From 28f086f9532f3ae9aadbae88dff3720b8aabea8f Mon Sep 17 00:00:00 2001 From: dntzhang Date: Sun, 3 May 2020 17:14:46 +0800 Subject: [PATCH] feat: init omiu dialog --- components/dialog/README.md | 52 ++ components/dialog/demos/js-demo/index.html | 33 ++ components/dialog/package.json | 102 ++++ components/dialog/scripts/docs-gen.js | 153 +++++ components/dialog/scripts/rollup.config.js | 38 ++ components/dialog/scripts/rollup.end.js | 16 + components/dialog/scripts/webpack.build.js | 102 ++++ components/dialog/src/index.d.ts | 30 + components/dialog/src/index.js | 620 +++++++++++++++++++++ components/dialog/src/index.js.map | 1 + components/dialog/src/index.scss | 201 +++++++ components/dialog/src/index.tsx | 113 ++++ components/dialog/tsconfig.json | 14 + 13 files changed, 1475 insertions(+) create mode 100644 components/dialog/README.md create mode 100644 components/dialog/demos/js-demo/index.html create mode 100644 components/dialog/package.json create mode 100644 components/dialog/scripts/docs-gen.js create mode 100644 components/dialog/scripts/rollup.config.js create mode 100644 components/dialog/scripts/rollup.end.js create mode 100644 components/dialog/scripts/webpack.build.js create mode 100644 components/dialog/src/index.d.ts create mode 100644 components/dialog/src/index.js create mode 100644 components/dialog/src/index.js.map create mode 100644 components/dialog/src/index.scss create mode 100644 components/dialog/src/index.tsx create mode 100644 components/dialog/tsconfig.json diff --git a/components/dialog/README.md b/components/dialog/README.md new file mode 100644 index 000000000..58fdf7fee --- /dev/null +++ b/components/dialog/README.md @@ -0,0 +1,52 @@ +## ActionSheet + +Mobile pop-up options list + +* [→ CodePen](https://codepen.io/omijs/pen/wvKdoNJ) + +## Import + +```js +import '@omiu/action-sheet' +``` + +Or use script tag to ref it. + + +```html + +``` + +## Usage + +```html + +``` + +## API + +### Props + +```tsx +{ + type: string, + menus: any[], + actions: any[], + show: boolean +} +``` + +### 默认属性 + +```tsx +{ + type: '', + menus: [], + actions: [], + show: false +} +``` +### Events + +* item-click +* close diff --git a/components/dialog/demos/js-demo/index.html b/components/dialog/demos/js-demo/index.html new file mode 100644 index 000000000..ae9b10de9 --- /dev/null +++ b/components/dialog/demos/js-demo/index.html @@ -0,0 +1,33 @@ + + + + + + + Omiu Dialog + + + + + + + + + + + +
+ Open the Dialog + + +
+ + + + diff --git a/components/dialog/package.json b/components/dialog/package.json new file mode 100644 index 000000000..4ccb5dc17 --- /dev/null +++ b/components/dialog/package.json @@ -0,0 +1,102 @@ +{ + "name": "@omiu/dialog", + "version": "0.0.1", + "description": "Pop anything you want in the middle of the page", + "docsExtend": { + "cnName": "对话框", + "cnDescription": "在页面中间弹出任何你想弹出的东西", + "codepen": "wvKdoNJ", + "codepenHeight": 351, + "codepenDefaultTab": "html,result" + }, + "main": "src/index.js", + "module": "src/index.esm.js", + "types": "src/index.d.ts", + "scripts": { + "docs": "node ./scripts/docs-gen.js", + "start": "node ./scripts/webpack.build.js -- demo", + "build": "node ./scripts/webpack.build.js -- build && rollup -c scripts/rollup.config.js && node ./scripts/rollup.end.js" + }, + "typings": "./dist/index.d.ts", + "repository": { + "type": "git", + "url": "https://github.com/Tencent/omi.git" + }, + "files": [ + "src", + "dist", + "typings.json" + ], + "keywords": [ + "omiu", + "omi", + "omio", + "preact", + "react", + "virtual dom", + "vdom", + "components", + "virtual", + "dom" + ], + "author": "dntzhang ", + "license": "MIT", + "bugs": { + "url": "https://github.com/Tencent/omi/issues" + }, + "homepage": "http://omijs.org", + "devDependencies": { + "@rollup/plugin-commonjs": "^11.1.0", + "css": "^2.2.4", + "css-loader": "^1.0.1", + "file": "^0.2.2", + "file-loader": "^2.0.0", + "html-webpack-plugin": "^3.2.0", + "less": "^3.9.0", + "less-loader": "^4.1.0", + "mini-css-extract-plugin": "^0.4.5", + "node-sass": "^4.12.0", + "omi": "latest", + "omio": "latest", + "optimize-css-assets-webpack-plugin": "^5.0.1", + "progress-bar-webpack-plugin": "^2.1.0", + "resolve-url-loader": "^3.1.0", + "rollup": "^2.7.1", + "rollup-plugin-license": "^2.0.0", + "rollup-plugin-node-resolve": "^5.2.0", + "rollup-plugin-scss": "^2.4.0", + "rollup-plugin-typescript": "^1.0.1", + "sass-loader": "^7.1.0", + "style-loader": "^0.23.1", + "to-string-loader": "^1.1.5", + "ts-loader": "^5.4.4", + "typescript": "^3.2.1", + "url": "^0.11.0", + "url-loader": "^1.1.2", + "webpack": "^4.42.1", + "webpack-cli": "^3.3.1", + "webpack-dev-server": "^3.1.10", + "webpack-merge": "^4.1.4" + }, + "greenkeeper": { + "ignore": [ + "babel-cli", + "babel-core", + "babel-eslint", + "babel-loader", + "jscodeshift", + "rollup-plugin-babel" + ] + }, + "prettier": { + "singleQuote": true, + "semi": false, + "tabWidth": 2, + "useTabs": false + }, + "dependencies": { + "@omiu/common": "latest", + "@omiu/transition": "latest", + "omi": "latest" + } +} diff --git a/components/dialog/scripts/docs-gen.js b/components/dialog/scripts/docs-gen.js new file mode 100644 index 000000000..7eba9d60c --- /dev/null +++ b/components/dialog/scripts/docs-gen.js @@ -0,0 +1,153 @@ +//自动扫描 index.tsx 生成 readme +const fs = require('fs') + +const content = fs.readFileSync('./src/index.tsx', 'utf-8') + +const props = extract('interface Props {', content).replace('interface Props ', '') + +const defaultProps = extract('static defaultProps = {', content).replace('static defaultProps = ', '').replace(/ }/g, '}').replace(/ /g, ' ') + + +const eventContexts = content.match(new RegExp('this.fire\\([\\s\\S]*?[,|)]', 'g')) +const package = require('../package.json') +const packageName = package.name +const name = packageName.split('/')[1] + +const upperCaseName = name.split('-').map(item => { + return item.charAt(0).toUpperCase() + item.slice(1) +}).join('') +const tagName = 'o-' + name + +//fire 附近打标标记 event.detail 类型？ +let events, eventMap +if (eventContexts) { + + events = eventContexts.map(event => { + return event.replace('this.fire(\'', '').replace('\',', '').replace('\')', '') + }) + eventMap = {} + events.forEach(event => { + eventMap[event] = 1 + }) +} + +const cnContent = `## ${upperCaseName} ${package.docsExtend.cnName} + +${package.docsExtend.cnDescription} + + + +## 导入 + +\`\`\`js +import '${packageName}' +\`\`\` + +或者直接 script 标签引入。 + + +\`\`\`html + +\`\`\` + +## 使用 + +\`\`\`html +<${tagName}> +\`\`\` + + +## API + +### 属性 + +\`\`\`tsx +${props} +\`\`\` + +${defaultProps ? '### 默认属性\n' : ''}${defaultProps ? '\`\`\`tsx\n' : ''}${defaultProps ? defaultProps : ''} +${defaultProps ? '\`\`\`\n' : ''}${eventMap ? '### 事件\n' : ''}${eventMap ? Object.keys(eventMap).map(event => { + return `* ${event}\n` +}).join('') : ''}` + +fs.writeFileSync(`../docs-src/src/docs/zh-cn/${name}.md`, cnContent) + + + +const enContent = `## ${upperCaseName} + +${package.description} + + + +## Import + +\`\`\`js +import '${packageName}' +\`\`\` + +Or use script tag to ref it. + + +\`\`\`html + +\`\`\` + +## Usage + +\`\`\`html +<${tagName}> +\`\`\` + +## API + +### Props + +\`\`\`tsx +${props} +\`\`\` + +${defaultProps ? '### 默认属性\n\n' : ''}${defaultProps ? '\`\`\`tsx\n' : ''}${defaultProps ? defaultProps : ''} +${defaultProps ? '\`\`\`\n' : ''}${eventMap ? '### Events\n\n' : ''}${eventMap ? Object.keys(eventMap).map(event => { + return `* ${event}\n` +}).join('') : ''}` + + +fs.writeFileSync(`../docs-src/src/docs/en/${name}.md`, enContent) + + +fs.writeFileSync(`../${name}/README.md`, enContent.replace(//, `* [→ CodePen](https://codepen.io/omijs/pen/${package.docsExtend.codepen})`)) +// console.log(props) +// console.log(defaultProps) +// console.log(Object.keys(eventMap)) + + + +function extract(startWith, str) { + const start = str.indexOf(startWith) + if (start === -1) return '' + let end = start + startWith.length + let stackCount = 1 + while (end < str.length) { + if (str[end] === '}') { + if (stackCount === 1) { + + break + } else { + stackCount-- + } + } else if (str[end] === '{') { + stackCount++ + } + + end++ + } + + return str.substring(start, end + 1) +} diff --git a/components/dialog/scripts/rollup.config.js b/components/dialog/scripts/rollup.config.js new file mode 100644 index 000000000..1829eeeb9 --- /dev/null +++ b/components/dialog/scripts/rollup.config.js @@ -0,0 +1,38 @@ +import nodeResolve from "rollup-plugin-node-resolve"; + +import typescript from 'rollup-plugin-typescript'; +import scss from 'rollup-plugin-scss' +import commonjs from '@rollup/plugin-commonjs'; +const fs = require('fs') +const license = require("rollup-plugin-license"); +const pkg = require("../package.json"); +const licensePlugin = license({ + banner: `${pkg.name} v${pkg.version} http://omijs.org\r\nFront End Cross-Frameworks Framework.\r\nBy dntzhang https://github.com/dntzhang \r\n Github: https://github.com/Tencent/omi\r\n MIT Licensed.` +}); + +export default { + input: "src/index.tsx", + output: { + format: "es", + file: "./src/index.esm.js", + name: pkg.name, + sourcemap: true, + strict: true + }, + plugins: [ + nodeResolve({ + main: true + }), + scss({ + //output: false, + output: function (styles, styleNodes) { + fs.writeFileSync('./src/index.css', styles) + }, + }), + typescript(), + commonjs(), + + licensePlugin + ], + external: ['omi'] +}; diff --git a/components/dialog/scripts/rollup.end.js b/components/dialog/scripts/rollup.end.js new file mode 100644 index 000000000..14327af1a --- /dev/null +++ b/components/dialog/scripts/rollup.end.js @@ -0,0 +1,16 @@ +const fs = require('fs') + +const css = fs.readFileSync('./src/index.css') + +const js = fs.readFileSync('./src/index.esm.js', 'utf-8') + + +fs.writeFileSync('./src/index.esm.js', +js.replace(`var css = /*#__PURE__*/Object.freeze({ + __proto__: null +});`, ` +var css = \`${css}\` +`) +) + + diff --git a/components/dialog/scripts/webpack.build.js b/components/dialog/scripts/webpack.build.js new file mode 100644 index 000000000..ff4b7bdc4 --- /dev/null +++ b/components/dialog/scripts/webpack.build.js @@ -0,0 +1,102 @@ +const path = require('path') +const glob = require('glob') +const webpack = require('webpack') +const ProgressBarPlugin = require('progress-bar-webpack-plugin') +const pkgName = require('../package.json') +const componentName = pkgName.name.split('/')[1] + +const name = 'o-' + componentName +const library = 'O' + componentName.split('-').map(name => name.charAt(0).toUpperCase() + name.slice(1)).join('') + + +const config = { + devtool: 'source-map', + plugins: [ + new ProgressBarPlugin() + ], + entry: { + [name]: './src/index.tsx' + }, + output: { + path: path.resolve(__dirname, '../src/'), + filename: 'index.js', + libraryTarget: 'umd', + library: library, + libraryExport: "default", + globalObject: 'this' + }, + mode: 'development', + module: { + rules: [{ + test: /\.scss$/, + use: [ + 'to-string-loader', + 'css-loader', + { + loader: 'resolve-url-loader' + }, + { + loader: 'sass-loader', + options: { + sourceMap: true, + + // mdc-web doesn't use sass-loader's normal syntax for imports + // across modules, so we add all module directories containing + // mdc-web components to the Sass include path + // https://github.com/material-components/material-components-web/issues/351 + includePaths: glob.sync(path.join(__dirname, '../node_modules/@material')).map((dir) => path.dirname(dir)) + + } + } + ] + }, + { + test: /\.css$/, + use: [ + 'to-string-loader', + 'css-loader', + { + loader: 'resolve-url-loader' + } + ] + }, + { + test: /\.less$/, + use: [ + 'style-loader', + 'css-loader', + { + loader: 'resolve-url-loader' + }, + 'less-loader' + ] + }, + { + test: /\.(jpe?g|png|gif|svg)$/i, + loader: "url-loader" + }, + { + test: /\.[t|j]sx?$/, + use: 'ts-loader', + exclude: /node_modules/ + } + ] + }, + watch: process.argv[3] === 'demo', + externals: { + 'omi': { + commonjs: "omi", + commonjs2: "omi", + amd: "omi", + root: "Omi" + } + } +} + +webpack(config, (err, stats) => { // Stats Object + if (err || stats.hasErrors()) { + // Handle errors here + } + // Done processing + +}) diff --git a/components/dialog/src/index.d.ts b/components/dialog/src/index.d.ts new file mode 100644 index 000000000..8260ad62e --- /dev/null +++ b/components/dialog/src/index.d.ts @@ -0,0 +1,30 @@ +import { WeElement } from 'omi'; +import '@omiu/transition'; +interface Props { + type: string; + menus: any[]; + actions: any[]; + visible: boolean; +} +export default class Dialog extends WeElement { + static css: any; + static defaultProps: { + type: string; + menus: any[]; + actions: any[]; + visible: boolean; + }; + static propTypes: { + type: StringConstructor; + menus: ArrayConstructor; + actions: ArrayConstructor; + visible: BooleanConstructor; + }; + renderMenuItem(): JSX.Element[]; + open(): void; + handleMaskClick: (e: any) => void; + close: () => void; + onAfterLeave: () => void; + render(props: any): JSX.Element; +} +export {}; diff --git a/components/dialog/src/index.js b/components/dialog/src/index.js new file mode 100644 index 000000000..7fa3304a4 --- /dev/null +++ b/components/dialog/src/index.js @@ -0,0 +1,620 @@ +(function webpackUniversalModuleDefinition(root, factory) { + if(typeof exports === 'object' && typeof module === 'object') + module.exports = factory(require("omi")); + else if(typeof define === 'function' && define.amd) + define(["omi"], factory); + else if(typeof exports === 'object') + exports["ODialog"] = factory(require("omi")); + else + root["ODialog"] = factory(root["Omi"]); +})(this, function(__WEBPACK_EXTERNAL_MODULE_omi__) { +return /******/ (function(modules) { // webpackBootstrap +/******/ // The module cache +/******/ var installedModules = {}; +/******/ +/******/ // The require function +/******/ function __webpack_require__(moduleId) { +/******/ +/******/ // Check if module is in cache +/******/ if(installedModules[moduleId]) { +/******/ return installedModules[moduleId].exports; +/******/ } +/******/ // Create a new module (and put it into the cache) +/******/ var module = installedModules[moduleId] = { +/******/ i: moduleId, +/******/ l: false, +/******/ exports: {} +/******/ }; +/******/ +/******/ // Execute the module function +/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); +/******/ +/******/ // Flag the module as loaded +/******/ module.l = true; +/******/ +/******/ // Return the exports of the module +/******/ return module.exports; +/******/ } +/******/ +/******/ +/******/ // expose the modules object (__webpack_modules__) +/******/ __webpack_require__.m = modules; +/******/ +/******/ // expose the module cache +/******/ __webpack_require__.c = installedModules; +/******/ +/******/ // define getter function for harmony exports +/******/ __webpack_require__.d = function(exports, name, getter) { +/******/ if(!__webpack_require__.o(exports, name)) { +/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); +/******/ } +/******/ }; +/******/ +/******/ // define __esModule on exports +/******/ __webpack_require__.r = function(exports) { +/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { +/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); +/******/ } +/******/ Object.defineProperty(exports, '__esModule', { value: true }); +/******/ }; +/******/ +/******/ // create a fake namespace object +/******/ // mode & 1: value is a module id, require it +/******/ // mode & 2: merge all properties of value into the ns +/******/ // mode & 4: return value when already ns object +/******/ // mode & 8|1: behave like require +/******/ __webpack_require__.t = function(value, mode) { +/******/ if(mode & 1) value = __webpack_require__(value); +/******/ if(mode & 8) return value; +/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; +/******/ var ns = Object.create(null); +/******/ __webpack_require__.r(ns); +/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); +/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); +/******/ return ns; +/******/ }; +/******/ +/******/ // getDefaultExport function for compatibility with non-harmony modules +/******/ __webpack_require__.n = function(module) { +/******/ var getter = module && module.__esModule ? +/******/ function getDefault() { return module['default']; } : +/******/ function getModuleExports() { return module; }; +/******/ __webpack_require__.d(getter, 'a', getter); +/******/ return getter; +/******/ }; +/******/ +/******/ // Object.prototype.hasOwnProperty.call +/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; +/******/ +/******/ // __webpack_public_path__ +/******/ __webpack_require__.p = ""; +/******/ +/******/ +/******/ // Load entry module and return exports +/******/ return __webpack_require__(__webpack_require__.s = "./src/index.tsx"); +/******/ }) +/************************************************************************/ +/******/ ({ + +/***/ "./node_modules/_@omiu_transition@0.0.6@@omiu/transition/src/index.esm.js": +/*!********************************************************************************!*\ + !*** ./node_modules/_@omiu_transition@0.0.6@@omiu/transition/src/index.esm.js ***! + \********************************************************************************/ +/*! exports provided: default */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* WEBPACK VAR INJECTION */(function(global) {/* harmony import */ var omi__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! omi */ "omi"); +/* harmony import */ var omi__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(omi__WEBPACK_IMPORTED_MODULE_0__); +/** + * @omiu/transition v0.0.6 http://omijs.org + * Front End Cross-Frameworks Framework. + * By dntzhang https://github.com/dntzhang + * Github: https://github.com/Tencent/omi + * MIT Licensed. + */ + + + +/*! ***************************************************************************** +Copyright (c) Microsoft Corporation. All rights reserved. +Licensed under the Apache License, Version 2.0 (the "License"); you may not use +this file except in compliance with the License. You may obtain a copy of the +License at http://www.apache.org/licenses/LICENSE-2.0 + +THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED +WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE, +MERCHANTABLITY OR NON-INFRINGEMENT. + +See the Apache Version 2.0 License for specific language governing permissions +and limitations under the License. +***************************************************************************** */ +/* global Reflect, Promise */ + +var extendStatics = function(d, b) { + extendStatics = Object.setPrototypeOf || + ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || + function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; }; + return extendStatics(d, b); +}; + +function __extends(d, b) { + extendStatics(d, b); + function __() { this.constructor = d; } + d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); +} + +function __decorate(decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; +} + +var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {}; + +function createCommonjsModule(fn, module) { + return module = { exports: {} }, fn(module, module.exports), module.exports; +} + +var _dready_0_0_1_dready = createCommonjsModule(function (module, exports) { +// if the module has no dependencies, the above pattern can be simplified to +(function (root, factory) { + { + // Node. Does not work with strict CommonJS, but + // only CommonJS-like environments that support module.exports, + // like Node. + module.exports = factory(); + } +}(commonjsGlobal, function () { + + const readyCallbacks = []; + document.addEventListener('DOMContentLoaded', () => { + domReady.done = true; + readyCallbacks.forEach(callback => { + callback(); + }); + }); + + function domReady(callback) { + if (domReady.done) { + callback(); + return + } + readyCallbacks.push(callback); + } + + domReady.done = false; + + + // Just return a value to define the module export. + // This example returns an object, but the module + // can return a function as the exported value. + return domReady +})); +}); + +var _domReady = /*#__PURE__*/Object.freeze({ + __proto__: null, + 'default': _dready_0_0_1_dready, + __moduleExports: _dready_0_0_1_dready +}); + +/** + * o-transition element based on vue-transition + * Tom Fales (@enlightenmentor) + * Licensed under the MIT License + * https://github.com/enlightenmentor/vue-transition/blob/master/LICENSE + * + * modified by dntzhang + * + */ +var domReady = _dready_0_0_1_dready || _domReady; +var Transition = /** @class */ (function (_super) { + __extends(Transition, _super); + function Transition() { + var _this = _super !== null && _super.apply(this, arguments) || this; + _this._show = true; + return _this; + } + Transition.prototype.installed = function () { + var _this = this; + domReady(function () { + _this.transitionTarget = _this.children[0]; + if (_this.props.appear) { + _this.enter(); + } + if (_this.props.leavingTime) { + setTimeout(function () { + _this.leave(); + }, _this.props.leavingTime); + } + }); + }; + Transition.prototype.toggle = function () { + this._show = !this._show; + if (this._show) + this.enter(); + else + this.leave(); + }; + Transition.prototype.enter = function () { + this.fire('before-enter'); + this.transitionTarget.classList.remove(this.props.name + '-leave-active'); + this.transitionTarget.classList.remove(this.props.name + '-leave-to'); + this.transitionTarget.classList.add(this.props.name + '-enter'); + this.transitionTarget.classList.add(this.props.name + '-enter-active'); + this.callback = function () { + this.transitionTarget.classList.remove(this.props.name + '-enter-active'); + this.fire('after-enter'); + this._show = true; + }.bind(this); + this.once('transitionend', this.callback); + this.once('animationend', this.callback); + window.setTimeout(function () { + this.transitionTarget.classList.remove(this.props.name + '-enter'); + this.transitionTarget.classList.add(this.props.name + '-enter-to'); + this.fire('enter'); + }.bind(this), 0); + }; + Transition.prototype.leave = function () { + this.fire('before-leave'); + this.transitionTarget.classList.remove(this.props.name + '-enter-active'); + this.transitionTarget.classList.remove(this.props.name + '-enter-to'); + this.transitionTarget.classList.add(this.props.name + '-leave'); + this.transitionTarget.classList.add(this.props.name + '-leave-active'); + this.callback = function (e) { + this.transitionTarget.classList.remove(this.props.name + '-leave-active'); + this.fire('after-leave'); + this._show = false; + if (this.props.autoRemove && this.parentNode) { + this.parentNode.removeChild(this); + } + }.bind(this); + this.once('transitionend', this.callback); + this.once('animationend', this.callback); + window.setTimeout(function () { + this.transitionTarget.classList.remove(this.props.name + '-leave'); + this.transitionTarget.classList.add(this.props.name + '-leave-to'); + this.fire('leave'); + }.bind(this), 0); + }; + Transition.prototype.once = function (name, callback) { + var wrapCall = function () { + this.removeEventListener(name, wrapCall); + callback(); + }.bind(this); + this.addEventListener(name, wrapCall); + }; + Transition.prototype.render = function () { + return; + }; + Transition.propTypes = { + name: String, + leavingTime: Number, + autoRemove: Boolean, + appear: Boolean + }; + Transition.isLightDom = true; + Transition.defaultProps = { + name: 'o' + }; + Transition = __decorate([ + Object(omi__WEBPACK_IMPORTED_MODULE_0__["tag"])('o-transition') + ], Transition); + return Transition; +}(omi__WEBPACK_IMPORTED_MODULE_0__["WeElement"])); + +/* harmony default export */ __webpack_exports__["default"] = (Transition); +//# sourceMappingURL=index.esm.js.map + +/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./../../../_webpack@4.43.0@webpack/buildin/global.js */ "./node_modules/_webpack@4.43.0@webpack/buildin/global.js"))) + +/***/ }), + +/***/ "./node_modules/_css-loader@1.0.1@css-loader/index.js!./node_modules/_resolve-url-loader@3.1.1@resolve-url-loader/index.js!./node_modules/_sass-loader@7.3.1@sass-loader/dist/cjs.js?!./src/index.scss": +/*!****************************************************************************************************************************************************************************************************!*\ + !*** ./node_modules/_css-loader@1.0.1@css-loader!./node_modules/_resolve-url-loader@3.1.1@resolve-url-loader!./node_modules/_sass-loader@7.3.1@sass-loader/dist/cjs.js??ref--4-3!./src/index.scss ***! + \****************************************************************************************************************************************************************************************************/ +/*! no static exports found */ +/***/ (function(module, exports, __webpack_require__) { + +exports = module.exports = __webpack_require__(/*! ../node_modules/_css-loader@1.0.1@css-loader/lib/css-base.js */ "./node_modules/_css-loader@1.0.1@css-loader/lib/css-base.js")(false); +// imports + + +// module +exports.push([module.i, ".o-modal-enter {\n -webkit-animation: o-modal-in .2s ease;\n animation: o-modal-in .2s ease; }\n\n.o-modal-leave {\n -webkit-animation: o-modal-out .2s ease forwards;\n animation: o-modal-out .2s ease forwards; }\n\n@-webkit-keyframes o-modal-in {\n 0% {\n opacity: 0; } }\n\n@keyframes o-modal-in {\n 0% {\n opacity: 0; } }\n\n@-webkit-keyframes o-modal-out {\n 100% {\n opacity: 0; } }\n\n@keyframes o-modal-out {\n 100% {\n opacity: 0; } }\n\n.o-modal {\n position: fixed;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n opacity: .5;\n background: #000; }\n\n.o-popup-parent--hidden {\n overflow: hidden; }\n\n.o-dialog {\n position: relative;\n margin: 0 auto 50px;\n background: #FFF;\n border-radius: 2px;\n -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n width: 50%; }\n\n.o-dialog.is-fullscreen {\n width: 100%;\n margin-top: 0;\n margin-bottom: 0;\n height: 100%;\n overflow: auto; }\n\n.o-dialog__wrapper {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n overflow: auto;\n margin: 0; }\n\n.o-dialog__header {\n padding: 20px 20px 10px; }\n\n.o-dialog__headerbtn {\n position: absolute;\n top: 20px;\n right: 20px;\n padding: 0;\n background: 0 0;\n border: none;\n outline: 0;\n cursor: pointer;\n font-size: 16px; }\n\n.o-dialog__headerbtn .o-dialog__close {\n color: #909399; }\n\n.o-dialog__headerbtn:focus .o-dialog__close,\n.o-dialog__headerbtn:hover .o-dialog__close {\n color: #409EFF; }\n\n.o-dialog__title {\n line-height: 24px;\n font-size: 18px;\n color: #303133; }\n\n.o-dialog__body {\n padding: 30px 20px;\n color: #606266;\n font-size: 14px;\n word-break: break-all; }\n\n.o-dialog__footer {\n padding: 10px 20px 20px;\n text-align: right;\n -webkit-box-sizing: border-box;\n box-sizing: border-box; }\n\n.o-dialog--center {\n text-align: center; }\n\n.o-dialog--center .o-dialog__body {\n text-align: initial;\n padding: 25px 25px 30px; }\n\n.o-dialog--center .o-dialog__footer {\n text-align: inherit; }\n\n.dialog-fade-enter-active {\n -webkit-animation: dialog-fade-in .3s;\n animation: dialog-fade-in .3s; }\n\n.dialog-fade-leave-active {\n -webkit-animation: dialog-fade-out .3s;\n animation: dialog-fade-out .3s; }\n\n@-webkit-keyframes dialog-fade-in {\n 0% {\n -webkit-transform: translate3d(0, -20px, 0);\n transform: translate3d(0, -20px, 0);\n opacity: 0; }\n 100% {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n opacity: 1; } }\n\n@keyframes dialog-fade-in {\n 0% {\n -webkit-transform: translate3d(0, -20px, 0);\n transform: translate3d(0, -20px, 0);\n opacity: 0; }\n 100% {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n opacity: 1; } }\n\n@-webkit-keyframes dialog-fade-out {\n 0% {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n opacity: 1; }\n 100% {\n -webkit-transform: translate3d(0, -20px, 0);\n transform: translate3d(0, -20px, 0);\n opacity: 0; } }\n\n@keyframes dialog-fade-out {\n 0% {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n opacity: 1; }\n 100% {\n -webkit-transform: translate3d(0, -20px, 0);\n transform: translate3d(0, -20px, 0);\n opacity: 0; } }\n", ""]); + +// exports + + +/***/ }), + +/***/ "./node_modules/_css-loader@1.0.1@css-loader/lib/css-base.js": +/*!*******************************************************************!*\ + !*** ./node_modules/_css-loader@1.0.1@css-loader/lib/css-base.js ***! + \*******************************************************************/ +/*! no static exports found */ +/***/ (function(module, exports) { + +/* + MIT License http://www.opensource.org/licenses/mit-license.php + Author Tobias Koppers @sokra +*/ +// css base code, injected by the css-loader +module.exports = function(useSourceMap) { + var list = []; + + // return the list of modules as css string + list.toString = function toString() { + return this.map(function (item) { + var content = cssWithMappingToString(item, useSourceMap); + if(item[2]) { + return "@media " + item[2] + "{" + content + "}"; + } else { + return content; + } + }).join(""); + }; + + // import a list of modules into the list + list.i = function(modules, mediaQuery) { + if(typeof modules === "string") + modules = [[null, modules, ""]]; + var alreadyImportedModules = {}; + for(var i = 0; i < this.length; i++) { + var id = this[i][0]; + if(typeof id === "number") + alreadyImportedModules[id] = true; + } + for(i = 0; i < modules.length; i++) { + var item = modules[i]; + // skip already imported module + // this implementation is not 100% perfect for weird media query combinations + // when a module is imported multiple times with different media queries. + // I hope this will never occur (Hey this way we have smaller bundles) + if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) { + if(mediaQuery && !item[2]) { + item[2] = mediaQuery; + } else if(mediaQuery) { + item[2] = "(" + item[2] + ") and (" + mediaQuery + ")"; + } + list.push(item); + } + } + }; + return list; +}; + +function cssWithMappingToString(item, useSourceMap) { + var content = item[1] || ''; + var cssMapping = item[3]; + if (!cssMapping) { + return content; + } + + if (useSourceMap && typeof btoa === 'function') { + var sourceMapping = toComment(cssMapping); + var sourceURLs = cssMapping.sources.map(function (source) { + return '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */' + }); + + return [content].concat(sourceURLs).concat([sourceMapping]).join('\n'); + } + + return [content].join('\n'); +} + +// Adapted from convert-source-map (MIT) +function toComment(sourceMap) { + // eslint-disable-next-line no-undef + var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))); + var data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64; + + return '/*# ' + data + ' */'; +} + + +/***/ }), + +/***/ "./node_modules/_webpack@4.43.0@webpack/buildin/global.js": +/*!***********************************!*\ + !*** (webpack)/buildin/global.js ***! + \***********************************/ +/*! no static exports found */ +/***/ (function(module, exports) { + +var g; + +// This works in non-strict mode +g = (function() { + return this; +})(); + +try { + // This works if eval is allowed (see CSP) + g = g || new Function("return this")(); +} catch (e) { + // This works if the window reference is available + if (typeof window === "object") g = window; +} + +// g can still be undefined, but nothing to do about it... +// We return undefined, instead of nothing here, so it's +// easier to handle this case. if(!global) { ...} + +module.exports = g; + + +/***/ }), + +/***/ "./src/index.scss": +/*!************************!*\ + !*** ./src/index.scss ***! + \************************/ +/*! no static exports found */ +/***/ (function(module, exports, __webpack_require__) { + + + var result = __webpack_require__(/*! !../node_modules/_css-loader@1.0.1@css-loader!../node_modules/_resolve-url-loader@3.1.1@resolve-url-loader!../node_modules/_sass-loader@7.3.1@sass-loader/dist/cjs.js??ref--4-3!./index.scss */ "./node_modules/_css-loader@1.0.1@css-loader/index.js!./node_modules/_resolve-url-loader@3.1.1@resolve-url-loader/index.js!./node_modules/_sass-loader@7.3.1@sass-loader/dist/cjs.js?!./src/index.scss"); + + if (typeof result === "string") { + module.exports = result; + } else { + module.exports = result.toString(); + } + + +/***/ }), + +/***/ "./src/index.tsx": +/*!***********************!*\ + !*** ./src/index.tsx ***! + \***********************/ +/*! no static exports found */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + +var __extends = (this && this.__extends) || (function () { + var extendStatics = function (d, b) { + extendStatics = Object.setPrototypeOf || + ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || + function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; }; + return extendStatics(d, b); + }; + return function (d, b) { + extendStatics(d, b); + function __() { this.constructor = d; } + d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); + }; +})(); +var __assign = (this && this.__assign) || function () { + __assign = Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; +var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; +}; +var __rest = (this && this.__rest) || function (s, e) { + var t = {}; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) + t[p] = s[p]; + if (s != null && typeof Object.getOwnPropertySymbols === "function") + for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { + if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) + t[p[i]] = s[p[i]]; + } + return t; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +var omi_1 = __webpack_require__(/*! omi */ "omi"); +var css = __webpack_require__(/*! ./index.scss */ "./src/index.scss"); +__webpack_require__(/*! @omiu/transition */ "./node_modules/_@omiu_transition@0.0.6@@omiu/transition/src/index.esm.js"); +var Dialog = /** @class */ (function (_super) { + __extends(Dialog, _super); + function Dialog() { + var _this = _super !== null && _super.apply(this, arguments) || this; + _this.handleMaskClick = function (e) { + _this.hide(); + _this.fire('close'); + }; + _this.close = function () { + console.log(_this); + _this.rootNode.leave(); + }; + _this.onAfterLeave = function () { + _this.updateProps({ visible: false }); + }; + return _this; + } + Dialog.prototype.renderMenuItem = function () { + var _this = this; + return this.props.menus.map(function (menu, idx) { + var _a; + var label = menu.label, className = menu.className, others = __rest(menu, ["label", "className"]); + var cls = omi_1.classNames((_a = { + 'o-actionsheet__cell': true + }, + _a[className] = className, + _a)); + return (omi_1.h("div", __assign({ key: idx, onClick: function (_) { + _this.hide(); + _this.fire('item-click', menu); + } }, others, { class: cls }), label)); + }); + }; + Dialog.prototype.open = function () { + this.updateProps({ + visible: true + }); + this.rootNode.enter(); + }; + Dialog.prototype.render = function (props) { + return (omi_1.h("o-transition", { "onafter-leave": this.onAfterLeave, appear: true, name: "dialog-fade" }, + omi_1.h("div", { class: "o-dialog__wrapper", style: "z-index: 2040;" + (!props.visible ? 'display:none' : '') }, + omi_1.h("div", { role: "dialog", "aria-modal": "true", "aria-label": "\u63D0\u793A", class: "o-dialog", style: "margin-top: 15vh; width: 30%;" }, + omi_1.h("div", { class: "o-dialog__header" }, + omi_1.h("span", { class: "o-dialog__title" }, "\u63D0\u793A"), + omi_1.h("button", { type: "button", "aria-label": "Close", class: "o-dialog__headerbtn" }, + omi_1.h("svg", { onClick: this.close, class: "o-dialog__close o-icon o-icon-close", fill: "currentColor", width: "1em", height: "1em", focusable: "false", viewBox: "0 0 24 24", "aria-hidden": "true" }, + omi_1.h("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })))), + omi_1.h("div", { class: "o-dialog__body" }, + omi_1.h("span", null, "\u8FD9\u662F\u4E00\u6BB5\u4FE1\u606F")), + omi_1.h("div", { class: "o-dialog__footer" }, + omi_1.h("span", { class: "dialog-footer" }, + omi_1.h("button", { type: "button", class: "o-button o-button--default" }, + omi_1.h("span", null, "\u53D6 \u6D88")), + omi_1.h("button", { type: "button", class: "o-button o-button--primary" }, + omi_1.h("span", null, "\u786E \u5B9A")))))))); + }; + Dialog.css = css; + Dialog.defaultProps = { + type: '', + menus: [], + actions: [], + visible: false + }; + Dialog.propTypes = { + type: String, + menus: Array, + actions: Array, + visible: Boolean + }; + Dialog = __decorate([ + omi_1.tag('o-dialog') + ], Dialog); + return Dialog; +}(omi_1.WeElement)); +exports.default = Dialog; + + +/***/ }), + +/***/ "omi": +/*!******************************************************************************!*\ + !*** external {"commonjs":"omi","commonjs2":"omi","amd":"omi","root":"Omi"} ***! + \******************************************************************************/ +/*! no static exports found */ +/***/ (function(module, exports) { + +module.exports = __WEBPACK_EXTERNAL_MODULE_omi__; + +/***/ }) + +/******/ })["default"]; +}); +//# sourceMappingURL=index.js.map \ No newline at end of file diff --git a/components/dialog/src/index.js.map b/components/dialog/src/index.js.map new file mode 100644 index 000000000..4483f53ca --- /dev/null +++ b/components/dialog/src/index.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["webpack://ODialog/webpack/universalModuleDefinition","webpack://ODialog/webpack/bootstrap","webpack://ODialog/./node_modules/_@omiu_transition@0.0.6@@omiu/transition/src/index.esm.js","webpack://ODialog/./src/index.scss","webpack://ODialog/./node_modules/_css-loader@1.0.1@css-loader/lib/css-base.js","webpack://ODialog/(webpack)/buildin/global.js","webpack://ODialog/./src/index.scss?56db","webpack://ODialog/./src/index.tsx","webpack://ODialog/external {\"commonjs\":\"omi\",\"commonjs2\":\"omi\",\"amd\":\"omi\",\"root\":\"Omi\"}"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD,O;QCVA;QACA;;QAEA;QACA;;QAEA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;;QAEA;QACA;;QAEA;QACA;;QAEA;QACA;QACA;;;QAGA;QACA;;QAEA;QACA;;QAEA;QACA;QACA;QACA,0CAA0C,gCAAgC;QAC1E;QACA;;QAEA;QACA;QACA;QACA,wDAAwD,kBAAkB;QAC1E;QACA,iDAAiD,cAAc;QAC/D;;QAEA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA,yCAAyC,iCAAiC;QAC1E,gHAAgH,mBAAmB,EAAE;QACrI;QACA;;QAEA;QACA;QACA;QACA,2BAA2B,0BAA0B,EAAE;QACvD,iCAAiC,eAAe;QAChD;QACA;QACA;;QAEA;QACA,sDAAsD,+DAA+D;;QAErH;QACA;;;QAGA;QACA;;;;;;;;;;;;;AClFA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEqC;;AAErC;AACA;AACA,+DAA+D;AAC/D;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA,UAAU,gBAAgB,sCAAsC,iBAAiB,EAAE;AACnF,yBAAyB,uDAAuD;AAChF;AACA;;AAEA;AACA;AACA,mBAAmB,sBAAsB;AACzC;AACA;;AAEA;AACA;AACA;AACA,4CAA4C,QAAQ;AACpD;AACA;;AAEA;;AAEA;AACA,kBAAkB,YAAY,EAAE;AAChC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA,KAAK;AACL,GAAG;;AAEH;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;;AAGA;AACA;AACA;AACA;AACA,CAAC;AACD,CAAC;;AAED;AACA;AACA;AACA;AACA,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB;AACjB;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQ,+CAAG;AACX;AACA;AACA,CAAC,CAAC,6CAAS;;AAEI,yEAAU,EAAC;AAC1B;;;;;;;;;;;;;ACzMA,2BAA2B,mBAAO,CAAC,iIAA8D;AACjG;;;AAGA;AACA,cAAc,QAAS,mBAAmB,2CAA2C,mCAAmC,EAAE,oBAAoB,qDAAqD,6CAA6C,EAAE,mCAAmC,QAAQ,iBAAiB,EAAE,EAAE,2BAA2B,QAAQ,iBAAiB,EAAE,EAAE,oCAAoC,UAAU,iBAAiB,EAAE,EAAE,4BAA4B,UAAU,iBAAiB,EAAE,EAAE,cAAc,oBAAoB,YAAY,WAAW,gBAAgB,iBAAiB,gBAAgB,qBAAqB,EAAE,6BAA6B,qBAAqB,EAAE,eAAe,uBAAuB,wBAAwB,qBAAqB,uBAAuB,qDAAqD,6CAA6C,mCAAmC,2BAA2B,eAAe,EAAE,6BAA6B,gBAAgB,kBAAkB,qBAAqB,iBAAiB,mBAAmB,EAAE,wBAAwB,oBAAoB,WAAW,aAAa,cAAc,YAAY,mBAAmB,cAAc,EAAE,uBAAuB,4BAA4B,EAAE,0BAA0B,uBAAuB,cAAc,gBAAgB,eAAe,oBAAoB,iBAAiB,eAAe,oBAAoB,oBAAoB,EAAE,2CAA2C,mBAAmB,EAAE,+FAA+F,mBAAmB,EAAE,sBAAsB,sBAAsB,oBAAoB,mBAAmB,EAAE,qBAAqB,uBAAuB,mBAAmB,oBAAoB,0BAA0B,EAAE,uBAAuB,4BAA4B,sBAAsB,mCAAmC,2BAA2B,EAAE,uBAAuB,uBAAuB,EAAE,uCAAuC,wBAAwB,4BAA4B,EAAE,yCAAyC,wBAAwB,EAAE,+BAA+B,0CAA0C,kCAAkC,EAAE,+BAA+B,2CAA2C,mCAAmC,EAAE,uCAAuC,QAAQ,kDAAkD,0CAA0C,iBAAiB,EAAE,UAAU,8CAA8C,sCAAsC,iBAAiB,EAAE,EAAE,+BAA+B,QAAQ,kDAAkD,0CAA0C,iBAAiB,EAAE,UAAU,8CAA8C,sCAAsC,iBAAiB,EAAE,EAAE,wCAAwC,QAAQ,8CAA8C,sCAAsC,iBAAiB,EAAE,UAAU,kDAAkD,0CAA0C,iBAAiB,EAAE,EAAE,gCAAgC,QAAQ,8CAA8C,sCAAsC,iBAAiB,EAAE,UAAU,kDAAkD,0CAA0C,iBAAiB,EAAE,EAAE;;AAEv4G;;;;;;;;;;;;ACPA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,mCAAmC,gBAAgB;AACnD,IAAI;AACJ;AACA;AACA,GAAG;AACH;;AAEA;AACA;AACA;AACA;AACA;AACA,gBAAgB,iBAAiB;AACjC;AACA;AACA;AACA;AACA,YAAY,oBAAoB;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,GAAG;;AAEH;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA,oDAAoD,cAAc;;AAElE;AACA;;;;;;;;;;;;AC3EA;;AAEA;AACA;AACA;AACA,CAAC;;AAED;AACA;AACA;AACA,CAAC;AACD;AACA;AACA;;AAEA;AACA;AACA,4CAA4C;;AAE5C;;;;;;;;;;;;;AClBA,qBAAqB,mBAAO,CAAC,2YAAiN;;AAE9O;AACA;AACA,SAAS;AACT;AACA;;;;;;;;;;;;;ACPa;AACb;AACA;AACA;AACA,cAAc,gBAAgB,sCAAsC,iBAAiB,EAAE;AACvF,6BAA6B,uDAAuD;AACpF;AACA;AACA;AACA;AACA,uBAAuB,sBAAsB;AAC7C;AACA;AACA,CAAC;AACD;AACA;AACA,gDAAgD,OAAO;AACvD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,4CAA4C,QAAQ;AACpD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,4DAA4D,cAAc;AAC1E;AACA;AACA;AACA;AACA;AACA,8CAA8C,cAAc;AAC5D,YAAY,mBAAO,CAAC,gBAAK;AACzB,UAAU,mBAAO,CAAC,sCAAc;AAChC,mBAAO,CAAC,kGAAkB;AAC1B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+BAA+B,iBAAiB;AAChD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB;AACjB;AACA;AACA,6CAA6C;AAC7C;AACA;AACA,iBAAiB,EAAE,WAAW,aAAa;AAC3C,SAAS;AACT;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA,yCAAyC,wEAAwE;AACjH,4BAA4B,mDAAmD,4CAA4C;AAC3H,gCAAgC,iHAAiH,YAAY,GAAG;AAChK,oCAAoC,4BAA4B;AAChE,yCAAyC,2BAA2B;AACpE,2CAA2C,sEAAsE;AACjH,4CAA4C,wLAAwL;AACpO,iDAAiD,6GAA6G;AAC9J,oCAAoC,0BAA0B;AAC9D;AACA,oCAAoC,4BAA4B;AAChE,yCAAyC,yBAAyB;AAClE,+CAA+C,sDAAsD;AACrG;AACA,+CAA+C,sDAAsD;AACrG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD;;;;;;;;;;;;ACzHA,iD","file":"index.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory(require(\"omi\"));\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([\"omi\"], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"ODialog\"] = factory(require(\"omi\"));\n\telse\n\t\troot[\"ODialog\"] = factory(root[\"Omi\"]);\n})(this, function(__WEBPACK_EXTERNAL_MODULE_omi__) {\nreturn "," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = \"./src/index.tsx\");\n","/**\n * @omiu/transition v0.0.6 http://omijs.org\n * Front End Cross-Frameworks Framework.\n * By dntzhang https://github.com/dntzhang\n * Github: https://github.com/Tencent/omi\n * MIT Licensed.\n */\n\nimport { tag, WeElement } from 'omi';\n\n/*! *****************************************************************************\r\nCopyright (c) Microsoft Corporation. All rights reserved.\r\nLicensed under the Apache License, Version 2.0 (the \"License\"); you may not use\r\nthis file except in compliance with the License. You may obtain a copy of the\r\nLicense at http://www.apache.org/licenses/LICENSE-2.0\r\n\r\nTHIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\r\nKIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED\r\nWARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,\r\nMERCHANTABLITY OR NON-INFRINGEMENT.\r\n\r\nSee the Apache Version 2.0 License for specific language governing permissions\r\nand limitations under the License.\r\n***************************************************************************** */\r\n/* global Reflect, Promise */\r\n\r\nvar extendStatics = function(d, b) {\r\n extendStatics = Object.setPrototypeOf ||\r\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\r\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\r\n return extendStatics(d, b);\r\n};\r\n\r\nfunction __extends(d, b) {\r\n extendStatics(d, b);\r\n function __() { this.constructor = d; }\r\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\r\n}\r\n\r\nfunction __decorate(decorators, target, key, desc) {\r\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\r\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\r\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\r\n return c > 3 && r && Object.defineProperty(target, key, r), r;\r\n}\n\nvar commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};\n\nfunction createCommonjsModule(fn, module) {\n\treturn module = { exports: {} }, fn(module, module.exports), module.exports;\n}\n\nvar _dready_0_0_1_dready = createCommonjsModule(function (module, exports) {\n// if the module has no dependencies, the above pattern can be simplified to\n(function (root, factory) {\n {\n // Node. Does not work with strict CommonJS, but\n // only CommonJS-like environments that support module.exports,\n // like Node.\n module.exports = factory();\n }\n}(commonjsGlobal, function () {\n\n const readyCallbacks = [];\n document.addEventListener('DOMContentLoaded', () => {\n domReady.done = true;\n readyCallbacks.forEach(callback => {\n callback();\n });\n });\n\n function domReady(callback) {\n if (domReady.done) {\n callback();\n return\n }\n readyCallbacks.push(callback);\n }\n\n domReady.done = false;\n\n\n // Just return a value to define the module export.\n // This example returns an object, but the module\n // can return a function as the exported value.\n return domReady\n}));\n});\n\nvar _domReady = /*#__PURE__*/Object.freeze({\n __proto__: null,\n 'default': _dready_0_0_1_dready,\n __moduleExports: _dready_0_0_1_dready\n});\n\n/**\n * o-transition element based on vue-transition\n * Tom Fales (@enlightenmentor)\n * Licensed under the MIT License\n * https://github.com/enlightenmentor/vue-transition/blob/master/LICENSE\n *\n * modified by dntzhang\n *\n */\nvar domReady = _dready_0_0_1_dready || _domReady;\nvar Transition = /** @class */ (function (_super) {\n __extends(Transition, _super);\n function Transition() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this._show = true;\n return _this;\n }\n Transition.prototype.installed = function () {\n var _this = this;\n domReady(function () {\n _this.transitionTarget = _this.children[0];\n if (_this.props.appear) {\n _this.enter();\n }\n if (_this.props.leavingTime) {\n setTimeout(function () {\n _this.leave();\n }, _this.props.leavingTime);\n }\n });\n };\n Transition.prototype.toggle = function () {\n this._show = !this._show;\n if (this._show)\n this.enter();\n else\n this.leave();\n };\n Transition.prototype.enter = function () {\n this.fire('before-enter');\n this.transitionTarget.classList.remove(this.props.name + '-leave-active');\n this.transitionTarget.classList.remove(this.props.name + '-leave-to');\n this.transitionTarget.classList.add(this.props.name + '-enter');\n this.transitionTarget.classList.add(this.props.name + '-enter-active');\n this.callback = function () {\n this.transitionTarget.classList.remove(this.props.name + '-enter-active');\n this.fire('after-enter');\n this._show = true;\n }.bind(this);\n this.once('transitionend', this.callback);\n this.once('animationend', this.callback);\n window.setTimeout(function () {\n this.transitionTarget.classList.remove(this.props.name + '-enter');\n this.transitionTarget.classList.add(this.props.name + '-enter-to');\n this.fire('enter');\n }.bind(this), 0);\n };\n Transition.prototype.leave = function () {\n this.fire('before-leave');\n this.transitionTarget.classList.remove(this.props.name + '-enter-active');\n this.transitionTarget.classList.remove(this.props.name + '-enter-to');\n this.transitionTarget.classList.add(this.props.name + '-leave');\n this.transitionTarget.classList.add(this.props.name + '-leave-active');\n this.callback = function (e) {\n this.transitionTarget.classList.remove(this.props.name + '-leave-active');\n this.fire('after-leave');\n this._show = false;\n if (this.props.autoRemove && this.parentNode) {\n this.parentNode.removeChild(this);\n }\n }.bind(this);\n this.once('transitionend', this.callback);\n this.once('animationend', this.callback);\n window.setTimeout(function () {\n this.transitionTarget.classList.remove(this.props.name + '-leave');\n this.transitionTarget.classList.add(this.props.name + '-leave-to');\n this.fire('leave');\n }.bind(this), 0);\n };\n Transition.prototype.once = function (name, callback) {\n var wrapCall = function () {\n this.removeEventListener(name, wrapCall);\n callback();\n }.bind(this);\n this.addEventListener(name, wrapCall);\n };\n Transition.prototype.render = function () {\n return;\n };\n Transition.propTypes = {\n name: String,\n leavingTime: Number,\n autoRemove: Boolean,\n appear: Boolean\n };\n Transition.isLightDom = true;\n Transition.defaultProps = {\n name: 'o'\n };\n Transition = __decorate([\n tag('o-transition')\n ], Transition);\n return Transition;\n}(WeElement));\n\nexport default Transition;\n//# sourceMappingURL=index.esm.js.map\n","exports = module.exports = require(\"../node_modules/_css-loader@1.0.1@css-loader/lib/css-base.js\")(false);\n// imports\n\n\n// module\nexports.push([module.id, \".o-modal-enter {\\n -webkit-animation: o-modal-in .2s ease;\\n animation: o-modal-in .2s ease; }\\n\\n.o-modal-leave {\\n -webkit-animation: o-modal-out .2s ease forwards;\\n animation: o-modal-out .2s ease forwards; }\\n\\n@-webkit-keyframes o-modal-in {\\n 0% {\\n opacity: 0; } }\\n\\n@keyframes o-modal-in {\\n 0% {\\n opacity: 0; } }\\n\\n@-webkit-keyframes o-modal-out {\\n 100% {\\n opacity: 0; } }\\n\\n@keyframes o-modal-out {\\n 100% {\\n opacity: 0; } }\\n\\n.o-modal {\\n position: fixed;\\n left: 0;\\n top: 0;\\n width: 100%;\\n height: 100%;\\n opacity: .5;\\n background: #000; }\\n\\n.o-popup-parent--hidden {\\n overflow: hidden; }\\n\\n.o-dialog {\\n position: relative;\\n margin: 0 auto 50px;\\n background: #FFF;\\n border-radius: 2px;\\n -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\\n -webkit-box-sizing: border-box;\\n box-sizing: border-box;\\n width: 50%; }\\n\\n.o-dialog.is-fullscreen {\\n width: 100%;\\n margin-top: 0;\\n margin-bottom: 0;\\n height: 100%;\\n overflow: auto; }\\n\\n.o-dialog__wrapper {\\n position: fixed;\\n top: 0;\\n right: 0;\\n bottom: 0;\\n left: 0;\\n overflow: auto;\\n margin: 0; }\\n\\n.o-dialog__header {\\n padding: 20px 20px 10px; }\\n\\n.o-dialog__headerbtn {\\n position: absolute;\\n top: 20px;\\n right: 20px;\\n padding: 0;\\n background: 0 0;\\n border: none;\\n outline: 0;\\n cursor: pointer;\\n font-size: 16px; }\\n\\n.o-dialog__headerbtn .o-dialog__close {\\n color: #909399; }\\n\\n.o-dialog__headerbtn:focus .o-dialog__close,\\n.o-dialog__headerbtn:hover .o-dialog__close {\\n color: #409EFF; }\\n\\n.o-dialog__title {\\n line-height: 24px;\\n font-size: 18px;\\n color: #303133; }\\n\\n.o-dialog__body {\\n padding: 30px 20px;\\n color: #606266;\\n font-size: 14px;\\n word-break: break-all; }\\n\\n.o-dialog__footer {\\n padding: 10px 20px 20px;\\n text-align: right;\\n -webkit-box-sizing: border-box;\\n box-sizing: border-box; }\\n\\n.o-dialog--center {\\n text-align: center; }\\n\\n.o-dialog--center .o-dialog__body {\\n text-align: initial;\\n padding: 25px 25px 30px; }\\n\\n.o-dialog--center .o-dialog__footer {\\n text-align: inherit; }\\n\\n.dialog-fade-enter-active {\\n -webkit-animation: dialog-fade-in .3s;\\n animation: dialog-fade-in .3s; }\\n\\n.dialog-fade-leave-active {\\n -webkit-animation: dialog-fade-out .3s;\\n animation: dialog-fade-out .3s; }\\n\\n@-webkit-keyframes dialog-fade-in {\\n 0% {\\n -webkit-transform: translate3d(0, -20px, 0);\\n transform: translate3d(0, -20px, 0);\\n opacity: 0; }\\n 100% {\\n -webkit-transform: translate3d(0, 0, 0);\\n transform: translate3d(0, 0, 0);\\n opacity: 1; } }\\n\\n@keyframes dialog-fade-in {\\n 0% {\\n -webkit-transform: translate3d(0, -20px, 0);\\n transform: translate3d(0, -20px, 0);\\n opacity: 0; }\\n 100% {\\n -webkit-transform: translate3d(0, 0, 0);\\n transform: translate3d(0, 0, 0);\\n opacity: 1; } }\\n\\n@-webkit-keyframes dialog-fade-out {\\n 0% {\\n -webkit-transform: translate3d(0, 0, 0);\\n transform: translate3d(0, 0, 0);\\n opacity: 1; }\\n 100% {\\n -webkit-transform: translate3d(0, -20px, 0);\\n transform: translate3d(0, -20px, 0);\\n opacity: 0; } }\\n\\n@keyframes dialog-fade-out {\\n 0% {\\n -webkit-transform: translate3d(0, 0, 0);\\n transform: translate3d(0, 0, 0);\\n opacity: 1; }\\n 100% {\\n -webkit-transform: translate3d(0, -20px, 0);\\n transform: translate3d(0, -20px, 0);\\n opacity: 0; } }\\n\", \"\"]);\n\n// exports\n","/*\n\tMIT License http://www.opensource.org/licenses/mit-license.php\n\tAuthor Tobias Koppers @sokra\n*/\n// css base code, injected by the css-loader\nmodule.exports = function(useSourceMap) {\n\tvar list = [];\n\n\t// return the list of modules as css string\n\tlist.toString = function toString() {\n\t\treturn this.map(function (item) {\n\t\t\tvar content = cssWithMappingToString(item, useSourceMap);\n\t\t\tif(item[2]) {\n\t\t\t\treturn \"@media \" + item[2] + \"{\" + content + \"}\";\n\t\t\t} else {\n\t\t\t\treturn content;\n\t\t\t}\n\t\t}).join(\"\");\n\t};\n\n\t// import a list of modules into the list\n\tlist.i = function(modules, mediaQuery) {\n\t\tif(typeof modules === \"string\")\n\t\t\tmodules = [[null, modules, \"\"]];\n\t\tvar alreadyImportedModules = {};\n\t\tfor(var i = 0; i < this.length; i++) {\n\t\t\tvar id = this[i][0];\n\t\t\tif(typeof id === \"number\")\n\t\t\t\talreadyImportedModules[id] = true;\n\t\t}\n\t\tfor(i = 0; i < modules.length; i++) {\n\t\t\tvar item = modules[i];\n\t\t\t// skip already imported module\n\t\t\t// this implementation is not 100% perfect for weird media query combinations\n\t\t\t// when a module is imported multiple times with different media queries.\n\t\t\t// I hope this will never occur (Hey this way we have smaller bundles)\n\t\t\tif(typeof item[0] !== \"number\" || !alreadyImportedModules[item[0]]) {\n\t\t\t\tif(mediaQuery && !item[2]) {\n\t\t\t\t\titem[2] = mediaQuery;\n\t\t\t\t} else if(mediaQuery) {\n\t\t\t\t\titem[2] = \"(\" + item[2] + \") and (\" + mediaQuery + \")\";\n\t\t\t\t}\n\t\t\t\tlist.push(item);\n\t\t\t}\n\t\t}\n\t};\n\treturn list;\n};\n\nfunction cssWithMappingToString(item, useSourceMap) {\n\tvar content = item[1] || '';\n\tvar cssMapping = item[3];\n\tif (!cssMapping) {\n\t\treturn content;\n\t}\n\n\tif (useSourceMap && typeof btoa === 'function') {\n\t\tvar sourceMapping = toComment(cssMapping);\n\t\tvar sourceURLs = cssMapping.sources.map(function (source) {\n\t\t\treturn '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */'\n\t\t});\n\n\t\treturn [content].concat(sourceURLs).concat([sourceMapping]).join('\\n');\n\t}\n\n\treturn [content].join('\\n');\n}\n\n// Adapted from convert-source-map (MIT)\nfunction toComment(sourceMap) {\n\t// eslint-disable-next-line no-undef\n\tvar base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));\n\tvar data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64;\n\n\treturn '/*# ' + data + ' */';\n}\n","var g;\n\n// This works in non-strict mode\ng = (function() {\n\treturn this;\n})();\n\ntry {\n\t// This works if eval is allowed (see CSP)\n\tg = g || new Function(\"return this\")();\n} catch (e) {\n\t// This works if the window reference is available\n\tif (typeof window === \"object\") g = window;\n}\n\n// g can still be undefined, but nothing to do about it...\n// We return undefined, instead of nothing here, so it's\n// easier to handle this case. if(!global) { ...}\n\nmodule.exports = g;\n","\n var result = require(\"!!../node_modules/_css-loader@1.0.1@css-loader/index.js!../node_modules/_resolve-url-loader@3.1.1@resolve-url-loader/index.js!../node_modules/_sass-loader@7.3.1@sass-loader/dist/cjs.js??ref--4-3!./index.scss\");\n\n if (typeof result === \"string\") {\n module.exports = result;\n } else {\n module.exports = result.toString();\n }\n ","\"use strict\";\nvar __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __assign = (this && this.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nvar __rest = (this && this.__rest) || function (s, e) {\n var t = {};\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\n t[p] = s[p];\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n t[p[i]] = s[p[i]];\n }\n return t;\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar omi_1 = require(\"omi\");\nvar css = require(\"./index.scss\");\nrequire(\"@omiu/transition\");\nvar Dialog = /** @class */ (function (_super) {\n __extends(Dialog, _super);\n function Dialog() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.handleMaskClick = function (e) {\n _this.hide();\n _this.fire('close');\n };\n _this.close = function () {\n console.log(_this);\n _this.rootNode.leave();\n };\n _this.onAfterLeave = function () {\n _this.updateProps({ visible: false });\n };\n return _this;\n }\n Dialog.prototype.renderMenuItem = function () {\n var _this = this;\n return this.props.menus.map(function (menu, idx) {\n var _a;\n var label = menu.label, className = menu.className, others = __rest(menu, [\"label\", \"className\"]);\n var cls = omi_1.classNames((_a = {\n 'o-actionsheet__cell': true\n },\n _a[className] = className,\n _a));\n return (omi_1.h(\"div\", __assign({ key: idx, onClick: function (_) {\n _this.hide();\n _this.fire('item-click', menu);\n } }, others, { class: cls }), label));\n });\n };\n Dialog.prototype.open = function () {\n this.updateProps({\n visible: true\n });\n this.rootNode.enter();\n };\n Dialog.prototype.render = function (props) {\n return (omi_1.h(\"o-transition\", { \"onafter-leave\": this.onAfterLeave, appear: true, name: \"dialog-fade\" },\n omi_1.h(\"div\", { class: \"o-dialog__wrapper\", style: \"z-index: 2040;\" + (!props.visible ? 'display:none' : '') },\n omi_1.h(\"div\", { role: \"dialog\", \"aria-modal\": \"true\", \"aria-label\": \"\\u63D0\\u793A\", class: \"o-dialog\", style: \"margin-top: 15vh; width: 30%;\" },\n omi_1.h(\"div\", { class: \"o-dialog__header\" },\n omi_1.h(\"span\", { class: \"o-dialog__title\" }, \"\\u63D0\\u793A\"),\n omi_1.h(\"button\", { type: \"button\", \"aria-label\": \"Close\", class: \"o-dialog__headerbtn\" },\n omi_1.h(\"svg\", { onClick: this.close, class: \"o-dialog__close o-icon o-icon-close\", fill: \"currentColor\", width: \"1em\", height: \"1em\", focusable: \"false\", viewBox: \"0 0 24 24\", \"aria-hidden\": \"true\" },\n omi_1.h(\"path\", { d: \"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" })))),\n omi_1.h(\"div\", { class: \"o-dialog__body\" },\n omi_1.h(\"span\", null, \"\\u8FD9\\u662F\\u4E00\\u6BB5\\u4FE1\\u606F\")),\n omi_1.h(\"div\", { class: \"o-dialog__footer\" },\n omi_1.h(\"span\", { class: \"dialog-footer\" },\n omi_1.h(\"button\", { type: \"button\", class: \"o-button o-button--default\" },\n omi_1.h(\"span\", null, \"\\u53D6 \\u6D88\")),\n omi_1.h(\"button\", { type: \"button\", class: \"o-button o-button--primary\" },\n omi_1.h(\"span\", null, \"\\u786E \\u5B9A\"))))))));\n };\n Dialog.css = css;\n Dialog.defaultProps = {\n type: '',\n menus: [],\n actions: [],\n visible: false\n };\n Dialog.propTypes = {\n type: String,\n menus: Array,\n actions: Array,\n visible: Boolean\n };\n Dialog = __decorate([\n omi_1.tag('o-dialog')\n ], Dialog);\n return Dialog;\n}(omi_1.WeElement));\nexports.default = Dialog;\n","module.exports = __WEBPACK_EXTERNAL_MODULE_omi__;"],"sourceRoot":""} \ No newline at end of file diff --git a/components/dialog/src/index.scss b/components/dialog/src/index.scss new file mode 100644 index 000000000..a7ed35c7c --- /dev/null +++ b/components/dialog/src/index.scss @@ -0,0 +1,201 @@ +.o-modal-enter { + -webkit-animation: o-modal-in .2s ease; + animation: o-modal-in .2s ease +} + +.o-modal-leave { + -webkit-animation: o-modal-out .2s ease forwards; + animation: o-modal-out .2s ease forwards +} + +@-webkit-keyframes o-modal-in { + 0% { + opacity: 0 + } +} + +@keyframes o-modal-in { + 0% { + opacity: 0 + } +} + +@-webkit-keyframes o-modal-out { + 100% { + opacity: 0 + } +} + +@keyframes o-modal-out { + 100% { + opacity: 0 + } +} + +.o-modal { + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: .5; + background: #000 +} + +.o-popup-parent--hidden { + overflow: hidden +} + +.o-dialog { + position: relative; + margin: 0 auto 50px; + background: #FFF; + border-radius: 2px; + -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3); + box-shadow: 0 1px 3px rgba(0, 0, 0, .3); + -webkit-box-sizing: border-box; + box-sizing: border-box; + width: 50% +} + +.o-dialog.is-fullscreen { + width: 100%; + margin-top: 0; + margin-bottom: 0; + height: 100%; + overflow: auto +} + +.o-dialog__wrapper { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + overflow: auto; + margin: 0 +} + +.o-dialog__header { + padding: 20px 20px 10px +} + +.o-dialog__headerbtn { + position: absolute; + top: 20px; + right: 20px; + padding: 0; + background: 0 0; + border: none; + outline: 0; + cursor: pointer; + font-size: 16px +} + +.o-dialog__headerbtn .o-dialog__close { + color: #909399 +} + +.o-dialog__headerbtn:focus .o-dialog__close, +.o-dialog__headerbtn:hover .o-dialog__close { + color: #409EFF +} + +.o-dialog__title { + line-height: 24px; + font-size: 18px; + color: #303133 +} + +.o-dialog__body { + padding: 30px 20px; + color: #606266; + font-size: 14px; + word-break: break-all +} + +.o-dialog__footer { + padding: 10px 20px 20px; + text-align: right; + -webkit-box-sizing: border-box; + box-sizing: border-box +} + +.o-dialog--center { + text-align: center +} + +.o-dialog--center .o-dialog__body { + text-align: initial; + padding: 25px 25px 30px +} + +.o-dialog--center .o-dialog__footer { + text-align: inherit +} + +.dialog-fade-enter-active { + -webkit-animation: dialog-fade-in .3s; + animation: dialog-fade-in .3s +} + +.dialog-fade-leave-active { + -webkit-animation: dialog-fade-out .3s; + animation: dialog-fade-out .3s +} + +@-webkit-keyframes dialog-fade-in { + 0% { + -webkit-transform: translate3d(0, -20px, 0); + transform: translate3d(0, -20px, 0); + opacity: 0 + } + + 100% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1 + } +} + +@keyframes dialog-fade-in { + 0% { + -webkit-transform: translate3d(0, -20px, 0); + transform: translate3d(0, -20px, 0); + opacity: 0 + } + + 100% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1 + } +} + +@-webkit-keyframes dialog-fade-out { + 0% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1 + } + + 100% { + -webkit-transform: translate3d(0, -20px, 0); + transform: translate3d(0, -20px, 0); + opacity: 0 + } +} + +@keyframes dialog-fade-out { + 0% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1 + } + + 100% { + -webkit-transform: translate3d(0, -20px, 0); + transform: translate3d(0, -20px, 0); + opacity: 0 + } +} diff --git a/components/dialog/src/index.tsx b/components/dialog/src/index.tsx new file mode 100644 index 000000000..2a0681ab2 --- /dev/null +++ b/components/dialog/src/index.tsx @@ -0,0 +1,113 @@ +import { tag, WeElement, classNames, h } from 'omi' +import * as css from './index.scss' + +import '@omiu/transition' + +interface Props { + type: string, + menus: any[], + actions: any[], + visible: boolean +} + + +@tag('o-dialog') +export default class Dialog extends WeElement { + static css = css + + static defaultProps = { + type: '', + menus: [], + actions: [], + visible: false + } + + static propTypes = { + type: String, + menus: Array, + actions: Array, + visible: Boolean + } + + + renderMenuItem() { + return this.props.menus.map((menu, idx) => { + const { label, className, ...others } = menu + const cls = classNames({ + 'o-actionsheet__cell': true, + [className]: className + }) + + return ( +
{ + this.hide() + this.fire('item-click', menu) + }} {...others} class={cls}> + {label} +
+ ) + }) + } + + open() { + + this.updateProps({ + visible: true + }) + + this.rootNode.enter() + } + + handleMaskClick = e => { + this.hide() + this.fire('close') + } + + close = () => { + console.log(this) + this.rootNode.leave() + } + + onAfterLeave = () => { + this.updateProps({ visible: false }) + } + + render(props) { + + return ( + + + +
+ +
+ + + + ) + } +} diff --git a/components/dialog/tsconfig.json b/components/dialog/tsconfig.json new file mode 100644 index 000000000..e286fa256 --- /dev/null +++ b/components/dialog/tsconfig.json @@ -0,0 +1,14 @@ +{ + "compilerOptions": { + "baseUrl": ".", + "experimentalDecorators": true, + "jsx": "react", + "jsxFactory": "h", + "target": "es5", + "allowJs": true, + "declaration": true + }, + "include": [ + "src/**/*" + ] +} \ No newline at end of file