├── example ├── static │ └── .gitkeep ├── config │ ├── prod.env.js │ ├── dev.env.js │ └── index.js ├── build │ ├── logo.png │ ├── vue-loader.conf.js │ ├── build.js │ ├── check-versions.js │ ├── webpack.base.conf.js │ ├── utils.js │ ├── webpack.dev.conf.js │ └── webpack.prod.conf.js ├── babel.config.js ├── .editorconfig ├── .postcssrc.js ├── index.html ├── .gitignore ├── src │ ├── main.js │ ├── mock │ │ ├── baseInfo.js │ │ ├── explain.js │ │ ├── table4.js │ │ ├── table2.js │ │ ├── table5.js │ │ └── table1.js │ └── App.vue ├── dist │ ├── index.html │ └── static │ │ ├── js │ │ └── manifest.2ae2e69a05c33dfc65f8.js │ │ └── css │ │ └── app.0117062d932d25019484a9b61d107591.css ├── README.md └── package.json ├── .gitignore ├── .npmignore ├── .gitattributes ├── lib ├── typings │ ├── global.d.ts │ ├── shims-vue.d.ts │ └── shims-tsx.d.ts ├── tools │ ├── event.ts │ ├── fns.ts │ └── index.ts ├── index.ts ├── style │ ├── toast.css │ ├── textarea.css │ ├── index.css │ └── input.css └── components │ ├── toast.tsx │ ├── textarea.tsx │ ├── input.tsx │ └── staticTable.tsx ├── .env ├── typings ├── typings │ ├── global.d.ts │ ├── shims-vue.d.ts │ └── shims-tsx.d.ts ├── tools │ ├── fns.d.ts │ ├── event.d.ts │ └── index.d.ts ├── components │ ├── toast.d.ts │ ├── textarea.d.ts │ ├── input.d.ts │ ├── staticTable.d.ts │ ├── mutilTable.d.ts │ └── rowEditableTable.d.ts └── index.d.ts ├── .browserslistrc ├── babel.config.js ├── postcss.config.js ├── tea.yaml ├── dist └── demo.html ├── es ├── tools │ ├── event.js │ ├── event.js.map │ ├── fns.js.map │ ├── fns.js │ ├── index.js.map │ └── index.js ├── index.js.map ├── index.js └── components │ ├── toast.jsx.map │ ├── textarea.jsx.map │ ├── toast.jsx │ ├── textarea.jsx │ ├── input.jsx.map │ ├── staticTable.jsx.map │ ├── input.jsx │ ├── staticTable.jsx │ ├── mutilTable.jsx.map │ └── rowEditableTable.jsx.map ├── index.html ├── .eslintrc.js ├── tsconfig.package.json ├── vue.config.js ├── tsconfig.json ├── tslint.json ├── package.json └── README.md /example/static/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /demo -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /demo 3 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.js linguist-language=Vue -------------------------------------------------------------------------------- /lib/typings/global.d.ts: -------------------------------------------------------------------------------- 1 | declare module "*.css"; 2 | -------------------------------------------------------------------------------- /.env: -------------------------------------------------------------------------------- 1 | NODE_ENV=production 2 | VUE_APP_BUILD_MODE=package -------------------------------------------------------------------------------- /typings/typings/global.d.ts: -------------------------------------------------------------------------------- 1 | declare module "*.css"; 2 | -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not ie <= 8 4 | -------------------------------------------------------------------------------- /example/config/prod.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | module.exports = { 3 | NODE_ENV: '"production"' 4 | } 5 | -------------------------------------------------------------------------------- /example/build/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/foolsogood/custom-ele-table/HEAD/example/build/logo.png -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ["@vue/cli-plugin-babel/preset", "@babel/preset-env"] 3 | }; 4 | -------------------------------------------------------------------------------- /typings/tools/fns.d.ts: -------------------------------------------------------------------------------- 1 | export declare const fns: { 2 | [prop: string]: string; 3 | }; 4 | export default fns; 5 | -------------------------------------------------------------------------------- /example/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ["@vue/cli-plugin-babel/preset", "@babel/preset-env"] 3 | }; 4 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: { browsers: "last 5 version" } 4 | } 5 | }; 6 | -------------------------------------------------------------------------------- /lib/typings/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | declare module "*.vue"; 2 | // { 3 | // import Vue from 'vue'; 4 | // export default Vue; 5 | // } 6 | -------------------------------------------------------------------------------- /typings/typings/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | declare module "*.vue"; 2 | // { 3 | // import Vue from 'vue'; 4 | // export default Vue; 5 | // } 6 | -------------------------------------------------------------------------------- /tea.yaml: -------------------------------------------------------------------------------- 1 | # https://tea.xyz/what-is-this-file 2 | --- 3 | version: 1.0.0 4 | codeOwners: 5 | - '0x2b9E352c587c0969242233f8cB842Cb461aDCa20' 6 | quorum: 1 7 | -------------------------------------------------------------------------------- /typings/tools/event.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | import event from "events"; 3 | declare const ee: event.EventEmitter; 4 | export default ee; 5 | -------------------------------------------------------------------------------- /lib/tools/event.ts: -------------------------------------------------------------------------------- 1 | //用于组件的通信 2 | import event from "events"; 3 | const ee = new event.EventEmitter(); 4 | //扩大默认调用栈数量 5 | ee.setMaxListeners(50); 6 | export default ee; 7 | -------------------------------------------------------------------------------- /dist/demo.html: -------------------------------------------------------------------------------- 1 | 2 | custom-ele-table demo 3 | 4 | 5 | 6 | 9 | -------------------------------------------------------------------------------- /es/tools/event.js: -------------------------------------------------------------------------------- 1 | //用于组件的通信 2 | import event from "events"; 3 | const ee = new event.EventEmitter(); 4 | //扩大默认调用栈数量 5 | ee.setMaxListeners(50); 6 | export default ee; 7 | //# sourceMappingURL=event.js.map -------------------------------------------------------------------------------- /example/config/dev.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const prodEnv = require('./prod.env') 4 | 5 | module.exports = merge(prodEnv, { 6 | NODE_ENV: '"development"' 7 | }) 8 | -------------------------------------------------------------------------------- /example/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /es/tools/event.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"event.js","sourceRoot":"","sources":["../../lib/tools/event.ts"],"names":[],"mappings":"AAAA,SAAS;AACT,OAAO,KAAK,MAAM,QAAQ,CAAC;AAC3B,MAAM,EAAE,GAAG,IAAI,KAAK,CAAC,YAAY,EAAE,CAAC;AACpC,WAAW;AACX,EAAE,CAAC,eAAe,CAAC,EAAE,CAAC,CAAC;AACvB,eAAe,EAAE,CAAC"} -------------------------------------------------------------------------------- /typings/components/toast.d.ts: -------------------------------------------------------------------------------- 1 | import { Vue } from "vue-property-decorator"; 2 | import "../style/toast.css"; 3 | export default class Toast extends Vue { 4 | showWrap: boolean; 5 | showContent: boolean; 6 | text: string; 7 | created(): void; 8 | render(): JSX.Element; 9 | } 10 | -------------------------------------------------------------------------------- /example/.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | "postcss-import": {}, 6 | "postcss-url": {}, 7 | // to edit target browsers: use "browserslist" field in package.json 8 | "autoprefixer": {} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /es/index.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"index.js","sourceRoot":"","sources":["../lib/index.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,yBAAyB,CAAC;AACjD,OAAO,gBAAgB,MAAM,+BAA+B,CAAC;AAC7D,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,WAAW,EAAE,CAAC;AACrD,eAAe;IACb,UAAU;IACV,gBAAgB;IAChB,WAAW;CACZ,CAAC"} -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | demo 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /lib/index.ts: -------------------------------------------------------------------------------- 1 | import mutilTable from "./components/mutilTable"; 2 | import rowEditableTable from "./components/rowEditableTable"; 3 | import staticTable from "./components/staticTable"; 4 | import "./style/index.css"; 5 | export { mutilTable, rowEditableTable, staticTable }; 6 | export default { 7 | mutilTable, 8 | rowEditableTable, 9 | staticTable 10 | }; 11 | -------------------------------------------------------------------------------- /es/tools/fns.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"fns.js","sourceRoot":"","sources":["../../lib/tools/fns.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,GAAG,GAEZ;IACF,sEAAsE,EACpE,gFAAgF;IAClF,gCAAgC,EAC9B,mDAAmD;IACrD,oCAAoC,EAClC,uDAAuD;IACzD,4BAA4B,EAAE,sCAAsC;IACpE,4BAA4B,EAAE,sCAAsC;IACpE,kCAAkC,EAChC,qDAAqD;IACvD,gCAAgC,EAC9B,qDAAqD;IACvD,4DAA4D,EAC1D,4EAA4E;CAC/E,CAAC;AAEF,eAAe,GAAG,CAAC"} -------------------------------------------------------------------------------- /example/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | npm-debug.log* 19 | yarn-debug.log* 20 | yarn-error.log* 21 | -------------------------------------------------------------------------------- /es/index.js: -------------------------------------------------------------------------------- 1 | import mutilTable from "./components/mutilTable"; 2 | import rowEditableTable from "./components/rowEditableTable"; 3 | import staticTable from "./components/staticTable"; 4 | import "./style/index.css"; 5 | export { mutilTable, rowEditableTable, staticTable }; 6 | export default { 7 | mutilTable, 8 | rowEditableTable, 9 | staticTable 10 | }; 11 | //# sourceMappingURL=index.js.map -------------------------------------------------------------------------------- /typings/components/textarea.d.ts: -------------------------------------------------------------------------------- 1 | import { Vue } from "vue-property-decorator"; 2 | import "../style/textarea.css"; 3 | export default class TextArea extends Vue { 4 | readonly propContent: string; 5 | readonly isReadonly: boolean; 6 | readonly addStyle: object; 7 | textAreaContent: string; 8 | mounted(): void; 9 | textAreaContentChange(val: string): void; 10 | render(): JSX.Element; 11 | } 12 | -------------------------------------------------------------------------------- /example/src/main.js: -------------------------------------------------------------------------------- 1 | // The Vue build version to load with the `import` command 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 | import Vue from 'vue' 4 | import App from './App' 5 | import 'vue-json-viewer/style.css' 6 | Vue.config.productionTip = false 7 | 8 | /* eslint-disable no-new */ 9 | new Vue({ 10 | el: '#app', 11 | components: { App }, 12 | template: '' 13 | }) 14 | -------------------------------------------------------------------------------- /typings/index.d.ts: -------------------------------------------------------------------------------- 1 | import mutilTable from "./components/mutilTable"; 2 | import rowEditableTable from "./components/rowEditableTable"; 3 | import staticTable from "./components/staticTable"; 4 | import "./style/index.css"; 5 | export { mutilTable, rowEditableTable, staticTable }; 6 | declare const _default: { 7 | mutilTable: typeof mutilTable; 8 | rowEditableTable: typeof rowEditableTable; 9 | staticTable: typeof staticTable; 10 | }; 11 | export default _default; 12 | -------------------------------------------------------------------------------- /typings/tools/index.d.ts: -------------------------------------------------------------------------------- 1 | declare class Tools { 2 | convert2Zero(a: any): any; 3 | floatAdd(a: number, b: number): string; 4 | floatMul(a: number, b: number): number; 5 | floatDiv(a: number, b: number): number; 6 | deepCopy(obj1: T): T; 7 | throttle(fn: () => void, delay: number): (...args: any) => void; 8 | guid(): string; 9 | checkIfObjectEqual(objA: any, objB: any): boolean; 10 | } 11 | declare const getTool: Tools; 12 | export default getTool; 13 | -------------------------------------------------------------------------------- /example/dist/index.html: -------------------------------------------------------------------------------- 1 | demo
-------------------------------------------------------------------------------- /lib/typings/shims-tsx.d.ts: -------------------------------------------------------------------------------- 1 | import Vue, { VNode } from "vue"; 2 | 3 | declare global { 4 | namespace JSX { 5 | // tslint:disable no-empty-interface 6 | interface Element extends VNode {} 7 | // tslint:disable no-empty-interface 8 | interface ElementClass extends Vue {} 9 | interface IntrinsicElements { 10 | [elem: string]: any; 11 | } 12 | } 13 | } 14 | declare module "vue/types/options" { 15 | interface ComponentOptions { 16 | ref?: string; 17 | [propName: string]: any; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /typings/typings/shims-tsx.d.ts: -------------------------------------------------------------------------------- 1 | import Vue, { VNode } from "vue"; 2 | 3 | declare global { 4 | namespace JSX { 5 | // tslint:disable no-empty-interface 6 | interface Element extends VNode {} 7 | // tslint:disable no-empty-interface 8 | interface ElementClass extends Vue {} 9 | interface IntrinsicElements { 10 | [elem: string]: any; 11 | } 12 | } 13 | } 14 | declare module "vue/types/options" { 15 | interface ComponentOptions { 16 | ref?: string; 17 | [propName: string]: any; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | demo
-------------------------------------------------------------------------------- /typings/components/input.d.ts: -------------------------------------------------------------------------------- 1 | import { Vue } from "vue-property-decorator"; 2 | import "../style/input.css"; 3 | export default class Input extends Vue { 4 | readonly value: string | number; 5 | readonly addStyle: CSSStyleDeclaration; 6 | readonly isReadonly: boolean; 7 | readonly parentColumnId: string | number; 8 | readonly editPropName: string; 9 | readonly componentName: string; 10 | newValue: string; 11 | onValueChange(val: string): void; 12 | onNewValueChange(val: string): void; 13 | render(): JSX.Element; 14 | } 15 | -------------------------------------------------------------------------------- /example/README.md: -------------------------------------------------------------------------------- 1 | # demo 2 | 3 | > demo for custom-ele-table 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | 17 | # build for production and view the bundle analyzer report 18 | npm run build --report 19 | ``` 20 | 21 | For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). 22 | -------------------------------------------------------------------------------- /typings/components/staticTable.d.ts: -------------------------------------------------------------------------------- 1 | import { Vue } from "vue-property-decorator"; 2 | interface Item { 3 | key: string; 4 | name: string; 5 | value: string; 6 | } 7 | export default class staticTable extends Vue { 8 | readonly tableData: Item[][]; 9 | readonly tableBorderColor: string; 10 | readonly cellHeight: number; 11 | readonly headerStyle: CSSStyleDeclaration; 12 | readonly cellStyle: CSSStyleDeclaration; 13 | renderPanelBody(): JSX.Element; 14 | renderTableColumn(colOptions: Item[]): JSX.Element; 15 | render(): JSX.Element; 16 | } 17 | export {}; 18 | -------------------------------------------------------------------------------- /lib/style/toast.css: -------------------------------------------------------------------------------- 1 | .wrap { 2 | position: fixed; 3 | left: 50%; 4 | top: 10%; 5 | z-index: 999; 6 | background: rgba(0, 0, 0, 0.35); 7 | padding: 10px; 8 | border-radius: 5px; 9 | transform: translate(-50%, -50%); 10 | color: #fff; 11 | } 12 | .fadein { 13 | animation: animate_in 0.25s; 14 | } 15 | .fadeout { 16 | animation: animate_out 0.25s; 17 | opacity: 0; 18 | } 19 | @keyframes animate_in { 20 | 0% { 21 | opacity: 0; 22 | } 23 | 100% { 24 | opacity: 1; 25 | } 26 | } 27 | @keyframes animate_out { 28 | 0% { 29 | opacity: 1; 30 | } 31 | 100% { 32 | opacity: 0; 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true 5 | }, 6 | extends: ["plugin:vue/essential", "eslint:recommended", "@vue/typescript"], 7 | parserOptions: { 8 | ecmaVersion: 2020, 9 | parser: "@typescript-eslint/parser" 10 | }, 11 | rules: { 12 | "no-console": process.env.NODE_ENV === "production" ? "warn" : "off", 13 | "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off", 14 | "no-unused-vars": "off", 15 | "@typescript-eslint/no-unused-vars": "off", 16 | "@typescript-eslint/no-explicit-any": "off", 17 | "prefer-const": "off" 18 | } 19 | }; 20 | -------------------------------------------------------------------------------- /tsconfig.package.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "module": "esnext", 5 | "strict": true, 6 | "jsx": "preserve", 7 | "declaration": true, 8 | "declarationDir": "typings", 9 | "outDir": "es", 10 | "importHelpers": true, 11 | "moduleResolution": "node", 12 | "experimentalDecorators": true, 13 | "esModuleInterop": true, 14 | "allowSyntheticDefaultImports": true, 15 | "sourceMap": true, 16 | "baseUrl": ".", 17 | "lib": ["esnext", "dom", "dom.iterable", "scripthost"] 18 | }, 19 | "include": ["lib/**/*.ts", "lib/**/*.tsx"], 20 | "exclude": ["node_modules"] 21 | } 22 | -------------------------------------------------------------------------------- /example/build/vue-loader.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const utils = require('./utils') 3 | const config = require('../config') 4 | const isProduction = process.env.NODE_ENV === 'production' 5 | const sourceMapEnabled = isProduction 6 | ? config.build.productionSourceMap 7 | : config.dev.cssSourceMap 8 | 9 | module.exports = { 10 | loaders: utils.cssLoaders({ 11 | sourceMap: sourceMapEnabled, 12 | extract: isProduction 13 | }), 14 | cssSourceMap: sourceMapEnabled, 15 | cacheBusting: config.dev.cacheBusting, 16 | transformToRequire: { 17 | video: ['src', 'poster'], 18 | source: 'src', 19 | img: 'src', 20 | image: 'xlink:href' 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | parallel: false, 3 | publicPath: 4 | process.env.NODE_ENV === "production" && 5 | process.env.VUE_APP_BUILD_MODE !== "package" 6 | ? "/custom-ele-table/" 7 | : "/", 8 | outputDir: process.env.VUE_APP_BUILD_MODE === "package" ? "dist" : "docs", 9 | chainWebpack: config => { 10 | if (process.env.VUE_APP_BUILD_MODE === "package") { 11 | config.output.libraryExport("default"); 12 | config.externals({ 13 | vue: { 14 | commonjs: "vue", 15 | commonjs2: "vue", 16 | root: "Vue", 17 | amd: "vue" 18 | } 19 | }); 20 | } 21 | }, 22 | css: { extract: !!process.env.NO_EXTRACT_CSS } 23 | }; 24 | -------------------------------------------------------------------------------- /example/dist/static/js/manifest.2ae2e69a05c33dfc65f8.js: -------------------------------------------------------------------------------- 1 | !function(r){var n=window.webpackJsonp;window.webpackJsonp=function(e,u,c){for(var f,i,p,a=0,l=[];aa+b)}": "function(){return Array.prototype.reduce.call(arguments,(a,b)=>floatAdd(a,b))}", 3 | "function(a,b){return((a/b)*c)}": "function(a,b){return(floatMul((floatDiv(a,b),c))}", 4 | "function(a,b){return(100*(a-b)/b)}": "function(a,b){return(100*floatDiv(floatAdd(a,-b),b))}", 5 | "function(a,b){return(a/b)}": "function(a,b){return(floatDiv(a,b))}", 6 | "function(a,b){return(a+b)}": "function(a,b){return(floatAdd(a,b))}", 7 | "function(a,b,c){return((a-b)/c)}": "function(a,b,c){return(floatDiv(floatAdd(a,-b),c))}", 8 | "function(a,b,c){return(a+b-c)}": "function(a,b,c){return(floatAdd(floatAdd(a,b),-c))}", 9 | "function(a,b,c){if((a+b)a+b)}": 5 | "function(){return Array.prototype.reduce.call(arguments,(a,b)=>floatAdd(a,b))}", 6 | "function(a,b){return((a/b)*c)}": 7 | "function(a,b){return(floatMul((floatDiv(a,b),c))}", 8 | "function(a,b){return(100*(a-b)/b)}": 9 | "function(a,b){return(100*floatDiv(floatAdd(a,-b),b))}", 10 | "function(a,b){return(a/b)}": "function(a,b){return(floatDiv(a,b))}", 11 | "function(a,b){return(a+b)}": "function(a,b){return(floatAdd(a,b))}", 12 | "function(a,b,c){return((a-b)/c)}": 13 | "function(a,b,c){return(floatDiv(floatAdd(a,-b),c))}", 14 | "function(a,b,c){return(a+b-c)}": 15 | "function(a,b,c){return(floatAdd(floatAdd(a,b),-c))}", 16 | "function(a,b,c){if((a+b) { 16 | this.text = text; 17 | this.showWrap = true; 18 | this.showContent = true; 19 | setTimeout(() => { 20 | this.showContent = false; 21 | setTimeout(() => { 22 | this.showWrap = false; 23 | }, 0); 24 | }, 1000 * 3); 25 | }); 26 | } 27 | public render() { 28 | const { text, showContent } = this; 29 | const cls = "wrap flexBox alItSt"; 30 | return ( 31 |
34 | {text} 35 |
36 | ); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /es/components/toast.jsx.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"toast.jsx","sourceRoot":"","sources":["../../lib/components/toast.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAS,GAAG,EAAQ,MAAM,wBAAwB,CAAC;AACrE,OAAO,KAAK,MAAM,gBAAgB,CAAC;AACnC,OAAO,oBAAoB,CAAC;AAI5B,IAAqB,KAAK,GAA1B,MAAqB,KAAM,SAAQ,GAAG;IAAtC;;QACS,aAAQ,GAAY,IAAI,CAAC;QACzB,gBAAW,GAAY,KAAK,CAAC;QAC7B,SAAI,GAAW,IAAI,CAAC;IA4B7B,CAAC;IA3BQ,OAAO;QAIZ,KAAK,CAAC,EAAE,CAAC,YAAY,EAAE,CAAC,EAAE,IAAI,EAAM,EAAE,EAAE;YACtC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;YACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;YACrB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;YACxB,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;gBACzB,UAAU,CAAC,GAAG,EAAE;oBACd,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;gBACxB,CAAC,EAAE,CAAC,CAAC,CAAC;YACR,CAAC,EAAE,IAAI,GAAG,CAAC,CAAC,CAAC;QACf,CAAC,CAAC,CAAC;IACL,CAAC;IACM,MAAM;QACX,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;QACnC,MAAM,GAAG,GAAG,qBAAqB,CAAC;QAClC,OAAO,CACL,CAAC,GAAG,CACF,MAAM,CAAC,UAAU,CACjB,KAAK,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,GAAG,SAAS,CAAC,CAAC,CAAC,GAAG,GAAG,UAAU,CAAC,CACxD;QAAA,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EAAE,IAAI,CACpB;MAAA,EAAE,GAAG,CAAC,CACP,CAAC;IACJ,CAAC;CACF,CAAA;AA/BoB,KAAK;IAHzB,SAAS,CAAC;QACT,IAAI,EAAE,UAAU;KACjB,CAAC;GACmB,KAAK,CA+BzB;eA/BoB,KAAK"} -------------------------------------------------------------------------------- /es/components/textarea.jsx.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"textarea.jsx","sourceRoot":"","sources":["../../lib/components/textarea.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AACrE,OAAO,KAAK,MAAM,gBAAgB,CAAC;AACnC,OAAO,uBAAuB,CAAC;AAI/B,IAAqB,QAAQ,GAA7B,MAAqB,QAAS,SAAQ,GAAG;IAAzC;;QAiBS,oBAAe,GAAW,EAAE,CAAC;IAuBtC,CAAC;IAtBQ,OAAO;QACZ,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,WAAW,CAAC;IAC1C,CAAC;IAEM,qBAAqB,CAAC,GAAW;QACtC,KAAK,CAAC,IAAI,CAAC,iBAAiB,EAAE,GAAG,CAAC,CAAC;IACrC,CAAC;IACM,MAAM;QACX,MAAM,EAAE,UAAU,EAAE,eAAe,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QACvD,OAAO,CACL,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAC1B;QAAA,CAAC,QAAQ,CACP,KAAK,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CACjC,QAAQ,CAAC,CAAC,UAAU,CAAC,CACrB,IAAI,CAAC,KAAK,CACV,OAAO,CAAC,CAAC,eAAe,CAAC,CACzB,KAAK,CAAC,CAAC,QAAQ,CAAC,CAChB,WAAW,CAAC,IAAI,EAEpB;MAAA,EAAE,GAAG,CAAC,CACP,CAAC;IACJ,CAAC;CACF,CAAA;AAnCC;IAJC,IAAI,CAAC;QACJ,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,EAAE;KACZ,CAAC;6CACmC;AAKrC;IAJC,IAAI,CAAC;QACJ,IAAI,EAAE,OAAO;QACb,OAAO,EAAE,KAAK;KACf,CAAC;4CACmC;AAKrC;IAJC,IAAI,CAAC;QACJ,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC;KAC7B,CAAC;0CACgC;AAOlC;IADC,KAAK,CAAC,iBAAiB,CAAC;qDAGxB;AAxBkB,QAAQ;IAH5B,SAAS,CAAC;QACT,IAAI,EAAE,WAAW;KAClB,CAAC;GACmB,QAAQ,CAwC5B;eAxCoB,QAAQ"} -------------------------------------------------------------------------------- /es/components/toast.jsx: -------------------------------------------------------------------------------- 1 | import { __decorate } from "tslib"; 2 | import { Component, Vue } from "vue-property-decorator"; 3 | import event from "../tools/event"; 4 | import "../style/toast.css"; 5 | let Toast = class Toast extends Vue { 6 | constructor() { 7 | super(...arguments); 8 | this.showWrap = true; 9 | this.showContent = false; 10 | this.text = "文本"; 11 | } 12 | created() { 13 | event.on("show-toast", ({ text }) => { 14 | this.text = text; 15 | this.showWrap = true; 16 | this.showContent = true; 17 | setTimeout(() => { 18 | this.showContent = false; 19 | setTimeout(() => { 20 | this.showWrap = false; 21 | }, 0); 22 | }, 1000 * 3); 23 | }); 24 | } 25 | render() { 26 | const { text, showContent } = this; 27 | const cls = "wrap flexBox alItSt"; 28 | return (
29 | {text} 30 |
); 31 | } 32 | }; 33 | Toast = __decorate([ 34 | Component({ 35 | name: "My-Toast" 36 | }) 37 | ], Toast); 38 | export default Toast; 39 | //# sourceMappingURL=toast.jsx.map -------------------------------------------------------------------------------- /lib/components/textarea.tsx: -------------------------------------------------------------------------------- 1 | import { Component, Watch, Vue, Prop } from "vue-property-decorator"; 2 | import event from "../tools/event"; 3 | import "../style/textarea.css"; 4 | @Component({ 5 | name: "text-area" 6 | }) 7 | export default class TextArea extends Vue { 8 | @Prop({ 9 | type: String, 10 | default: "" 11 | }) 12 | public readonly propContent!: string; 13 | @Prop({ 14 | type: Boolean, 15 | default: false 16 | }) 17 | public readonly isReadonly!: boolean; 18 | @Prop({ 19 | type: Object, 20 | default: Object.create(null) 21 | }) 22 | public readonly addStyle!: object; 23 | 24 | public textAreaContent: string = ""; 25 | public mounted() { 26 | this.textAreaContent = this.propContent; 27 | } 28 | @Watch("textAreaContent") 29 | public textAreaContentChange(val: string) { 30 | event.emit("textarea-change", val); 31 | } 32 | public render() { 33 | const { isReadonly, textAreaContent, addStyle } = this; 34 | return ( 35 |
36 |