├── .babelrc ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .github └── issue_template.md ├── .gitignore ├── .postcssrc.js ├── LICENSE ├── README.md ├── build-lib ├── build.js ├── check-versions.js ├── utils.js ├── vue-loader.conf.js ├── webpack.base.conf.js ├── webpack.dev.conf.js └── webpack.prod.conf.js ├── build ├── build.js ├── check-versions.js ├── markdown-compile.js ├── utils.js ├── vue-loader.conf.js ├── webpack.base.conf.js ├── webpack.dev.conf.js └── webpack.prod.conf.js ├── config ├── dev.env.js ├── index.js ├── prod.env.js └── test.env.js ├── example ├── App.vue ├── CHANGELOG.md ├── assets │ ├── TV.jpg │ ├── css │ │ ├── common.scss │ │ └── fontawesome.css │ ├── img │ │ └── search.png │ └── logo.png ├── components │ ├── DemoPanel.vue │ ├── Footer.vue │ ├── Guide.vue │ ├── Header.vue │ ├── LeftAside.vue │ ├── LogItem.vue │ ├── Markdown.vue │ └── RightAside.vue ├── documents │ ├── alert │ │ ├── alert-center.md │ │ ├── alert-icon.md │ │ ├── alert-more.md │ │ ├── alert-normal.md │ │ └── alert-sub.md │ ├── back-top │ │ └── normal.md │ ├── badge │ │ ├── badge-custom.md │ │ ├── badge-dot.md │ │ ├── badge-limit.md │ │ ├── badge-normal.md │ │ └── badge-single.md │ ├── bread-crumb │ │ ├── bread-normal.md │ │ ├── bread-separator-icon.md │ │ └── bread-separator.md │ ├── button │ │ ├── button.md │ │ ├── buttonDisabled.md │ │ ├── buttonGroup.md │ │ ├── buttonLoading.md │ │ ├── buttonSize.md │ │ └── buttonText.md │ ├── cascader │ │ ├── cascader-clearable.md │ │ ├── cascader-disabled.md │ │ ├── cascader-last.md │ │ ├── cascader-normal.md │ │ ├── cascader-searchable.md │ │ └── cascader-size.md │ ├── checkbox │ │ ├── checkboxBorder.md │ │ ├── checkboxDisabled.md │ │ ├── checkboxGroup.md │ │ ├── checkboxIndeterminate.md │ │ ├── checkboxLimit.md │ │ ├── checkboxNormal.md │ │ └── checkboxTrueval.md │ ├── collsape │ │ ├── collsape-accordion.md │ │ ├── collsape-contain.md │ │ └── collsape-normal.md │ ├── date-picker │ │ ├── date-default-value.md │ │ ├── date-disabled.md │ │ ├── date-range.md │ │ ├── date-size.md │ │ ├── date-type.md │ │ └── date.md │ ├── dialog │ │ ├── dialog-footer.md │ │ ├── dialog-normal.md │ │ └── dialog-status.md │ ├── divider │ │ └── divider-normal.md │ ├── dropdown │ │ ├── dropdown-close.md │ │ ├── dropdown-command.md │ │ ├── dropdown-item.md │ │ ├── dropdown-normal.md │ │ ├── dropdown-trigger.md │ │ └── dropdown-width.md │ ├── font │ │ └── font.md │ ├── form │ │ ├── form-layout.md │ │ ├── form-normal.md │ │ └── form-validator.md │ ├── grid │ │ ├── gridFlex.md │ │ ├── gridGutter.md │ │ ├── gridMix.md │ │ ├── gridNormal.md │ │ ├── gridOffset.md │ │ └── gridResponsive.md │ ├── input-number │ │ ├── input-number-disabled.md │ │ ├── input-number-limit.md │ │ ├── input-number-normal.md │ │ ├── input-number-range.md │ │ ├── input-number-side-control.md │ │ └── input-number-size.md │ ├── input │ │ ├── input.md │ │ ├── inputButton.md │ │ ├── inputIcon.md │ │ └── inputSize.md │ ├── layout │ │ ├── layoutDemo.md │ │ ├── layoutMix.md │ │ └── layoutNormal.md │ ├── loading │ │ ├── loading-config.md │ │ ├── loading-directive.md │ │ └── loading-normal.md │ ├── menu │ │ ├── menu-collsape.md │ │ ├── menu-horizon.md │ │ └── menu-vertical.md │ ├── message │ │ ├── message-center.md │ │ ├── message-closable.md │ │ ├── message-normal.md │ │ └── message-sub.md │ ├── modal │ │ ├── modal-animation.md │ │ ├── modal-contain.md │ │ ├── modal-normal.md │ │ ├── modal-side.md │ │ └── modal-size.md │ ├── notify │ │ ├── notify-close.md │ │ ├── notify-duration.md │ │ ├── notify-normal.md │ │ ├── notify-status.md │ │ └── notify-sub.md │ ├── pagination │ │ ├── pagination-desc.md │ │ ├── pagination-layout.md │ │ └── pagination-normal.md │ ├── popover │ │ ├── popover-action.md │ │ ├── popover-contain.md │ │ ├── popover-directive.md │ │ ├── popover-position.md │ │ └── popover-trigger.md │ ├── progress │ │ ├── progress-circle.md │ │ ├── progress-inner.md │ │ └── progress-normal.md │ ├── radio │ │ ├── radioBorder.md │ │ ├── radioDisabled.md │ │ ├── radioGroup.md │ │ ├── radioNormal.md │ │ └── radioStyle.md │ ├── select │ │ ├── select-clearable.md │ │ ├── select-disabled.md │ │ ├── select-divide.md │ │ ├── select-editable.md │ │ ├── select-multiple.md │ │ ├── select-normal.md │ │ ├── select-searchable.md │ │ └── select-size.md │ ├── slider │ │ ├── slider-divide.md │ │ ├── slider-normal.md │ │ ├── slider-range.md │ │ └── slider-unit.md │ ├── step │ │ ├── step-center.md │ │ ├── step-icon.md │ │ ├── step-normal.md │ │ ├── step-status.md │ │ └── step-width.md │ ├── switch │ │ ├── switchColor.md │ │ ├── switchNormal.md │ │ ├── switchSize.md │ │ ├── switchText.md │ │ └── switchTrueval.md │ ├── table │ │ ├── table-border.md │ │ ├── table-class.md │ │ ├── table-column-header.md │ │ ├── table-column.md │ │ ├── table-expand.md │ │ ├── table-header.md │ │ ├── table-height-change.md │ │ ├── table-index.md │ │ ├── table-loading.md │ │ ├── table-normal.md │ │ ├── table-select.md │ │ ├── table-selection.md │ │ ├── table-slot.md │ │ ├── table-sort.md │ │ └── table-stripe.md │ ├── tabs │ │ ├── tabs-box.md │ │ ├── tabs-normal.md │ │ ├── tabs-pipe.md │ │ ├── tabs-position.md │ │ └── tabs-title.md │ ├── tag │ │ ├── tag-closable.md │ │ ├── tag-dynamic.md │ │ └── tag-normal.md │ ├── time-picker │ │ ├── time-clearable.md │ │ ├── time-disabled.md │ │ ├── time-size.md │ │ └── time.md │ ├── tooltip │ │ ├── tooltip-directive.md │ │ └── tooltip-theme.md │ ├── tree │ │ ├── tree-actions.md │ │ ├── tree-checkbox.md │ │ ├── tree-checked.md │ │ ├── tree-disabled.md │ │ ├── tree-expand.md │ │ ├── tree-filter.md │ │ ├── tree-load.md │ │ ├── tree-normal.md │ │ └── tree-slot.md │ ├── upload │ │ ├── upload-autoupload.md │ │ ├── upload-directory.md │ │ ├── upload-drag.md │ │ ├── upload-event.md │ │ ├── upload-limit.md │ │ ├── upload-normal.md │ │ └── upload-preview.md │ └── usage │ │ ├── usage-normal.md │ │ └── usage-project.md ├── main.js ├── mocks │ ├── index.js │ ├── tree.js │ └── upload.js ├── pages │ ├── alert.vue │ ├── backtop.vue │ ├── badge.vue │ ├── breadcrumb.vue │ ├── button.vue │ ├── cascader.vue │ ├── checkbox.vue │ ├── collsape.vue │ ├── color.vue │ ├── datepicker.vue │ ├── dialog.vue │ ├── divider.vue │ ├── dropdown.vue │ ├── font.vue │ ├── form.vue │ ├── grid.vue │ ├── input-number.vue │ ├── input.vue │ ├── install.vue │ ├── intro.vue │ ├── layout.vue │ ├── loading.vue │ ├── log.vue │ ├── menu.vue │ ├── message.vue │ ├── modal.vue │ ├── notify.vue │ ├── pagination.vue │ ├── popover.vue │ ├── progress.vue │ ├── radio.vue │ ├── select.vue │ ├── slider.vue │ ├── step.vue │ ├── switch.vue │ ├── table.vue │ ├── tabs.vue │ ├── tag.vue │ ├── timepicker.vue │ ├── tooltip.vue │ ├── tree.vue │ ├── upload.vue │ └── usage.vue ├── router │ └── index.js ├── styles │ ├── app.scss │ ├── footer.scss │ ├── header.scss │ ├── leftAside.scss │ └── rightAside.scss └── webfonts │ ├── fa-brands-400.eot │ ├── fa-brands-400.svg │ ├── fa-brands-400.ttf │ ├── fa-brands-400.woff │ ├── fa-brands-400.woff2 │ ├── fa-regular-400.eot │ ├── fa-regular-400.svg │ ├── fa-regular-400.ttf │ ├── fa-regular-400.woff │ ├── fa-regular-400.woff2 │ ├── fa-solid-900.eot │ ├── fa-solid-900.svg │ ├── fa-solid-900.ttf │ ├── fa-solid-900.woff │ └── fa-solid-900.woff2 ├── index.html ├── package-lock.json ├── package.json ├── src ├── components │ ├── alert │ │ ├── alert.vue │ │ └── index.js │ ├── aside │ │ ├── aside.vue │ │ └── index.js │ ├── backtop │ │ ├── backtop.vue │ │ └── index.js │ ├── badge │ │ ├── badge.vue │ │ └── index.js │ ├── breadcrumb │ │ ├── breadcrumb.vue │ │ └── index.js │ ├── breadcrumbItem │ │ ├── breadcrumb-item.vue │ │ └── index.js │ ├── button │ │ ├── button.vue │ │ └── index.js │ ├── buttonGroup │ │ ├── buttonGroup.vue │ │ └── index.js │ ├── cascader │ │ ├── cascader-drop-menu.vue │ │ ├── cascader-option.vue │ │ ├── cascader.vue │ │ └── index.js │ ├── checkbox │ │ ├── checkbox.vue │ │ └── index.js │ ├── checkboxGroup │ │ ├── checkbox-group.vue │ │ └── index.js │ ├── col │ │ ├── col.js │ │ └── index.js │ ├── collsape │ │ ├── collsape.vue │ │ └── index.js │ ├── collsapeItem │ │ ├── collsape-item.vue │ │ └── index.js │ ├── content │ │ ├── content.vue │ │ └── index.js │ ├── datepicker │ │ ├── datepicker-drop-menu.vue │ │ ├── datepicker.vue │ │ └── index.js │ ├── dialog │ │ ├── dialog.js │ │ ├── dialog.vue │ │ └── index.js │ ├── divider │ │ ├── divider.vue │ │ └── index.js │ ├── dropdown │ │ ├── dropdown.vue │ │ ├── dropmenu.vue │ │ └── index.js │ ├── dropdownItem │ │ ├── dropdown-item.vue │ │ └── index.js │ ├── footer │ │ ├── footer.vue │ │ └── index.js │ ├── form │ │ ├── form.vue │ │ └── index.js │ ├── formItem │ │ ├── form-item.vue │ │ └── index.js │ ├── header │ │ ├── header.vue │ │ └── index.js │ ├── input │ │ ├── index.js │ │ ├── input.vue │ │ ├── validate-icon.vue │ │ └── validateIcon.js │ ├── inputNumber │ │ ├── index.js │ │ └── input-number.vue │ ├── layout │ │ ├── index.js │ │ └── layout.vue │ ├── loading │ │ ├── index.js │ │ ├── loading.js │ │ └── loading.vue │ ├── menu │ │ ├── index.js │ │ ├── menu-collsape.vue │ │ ├── menu-item-content.vue │ │ ├── menu-item-drop.vue │ │ ├── menu-item.vue │ │ └── menu.vue │ ├── message │ │ ├── index.js │ │ ├── message.js │ │ └── message.vue │ ├── modal │ │ ├── index.js │ │ ├── modal.vue │ │ └── model-temp.vue │ ├── notify │ │ ├── index.js │ │ ├── notify.js │ │ └── notify.vue │ ├── option │ │ ├── index.js │ │ └── option.vue │ ├── optionGroup │ │ ├── index.js │ │ └── option-group.vue │ ├── pagination │ │ ├── index.js │ │ ├── jump.vue │ │ ├── pager.vue │ │ ├── pagination.vue │ │ ├── sizes.vue │ │ └── total.vue │ ├── popover │ │ ├── index.js │ │ ├── popover-content.vue │ │ └── popover.vue │ ├── progress │ │ ├── index.js │ │ └── progress.vue │ ├── radio │ │ ├── index.js │ │ └── radio.vue │ ├── radioGroup │ │ ├── index.js │ │ └── radio-group.vue │ ├── reset │ │ ├── index.js │ │ └── reset.vue │ ├── row │ │ ├── index.js │ │ └── row.js │ ├── select │ │ ├── index.js │ │ ├── select-drop-menu.vue │ │ └── select.vue │ ├── slider │ │ ├── index.js │ │ └── slider.vue │ ├── step │ │ ├── index.js │ │ ├── step-item.vue │ │ └── step.vue │ ├── submit │ │ ├── index.js │ │ └── submit.vue │ ├── switch │ │ ├── index.js │ │ └── switch.vue │ ├── tabPanel │ │ ├── index.js │ │ └── tab-panel.vue │ ├── table-bak │ │ ├── index.js │ │ ├── table-cell.vue │ │ ├── table-expand.vue │ │ └── table.vue │ ├── table │ │ ├── index.js │ │ ├── table-cell.vue │ │ ├── table-expand.vue │ │ └── table.vue │ ├── tableColumn-bak │ │ ├── index.js │ │ └── table-column.vue │ ├── tableColumn │ │ ├── index.js │ │ └── table-column.vue │ ├── tabs │ │ ├── index.js │ │ ├── tab-header-item.vue │ │ └── tabs.vue │ ├── tag │ │ ├── index.js │ │ └── tag.vue │ ├── timepicker │ │ ├── index.js │ │ ├── timepicker-drop-menu.vue │ │ └── timepicker.vue │ ├── tooltip │ │ ├── index.js │ │ └── tooltip.vue │ ├── tree │ │ ├── index.js │ │ ├── tree-box.vue │ │ ├── tree-item.vue │ │ └── tree.vue │ └── upload │ │ ├── ajax.js │ │ ├── index.js │ │ ├── tfile.js │ │ ├── upload.vue │ │ └── uploader.js ├── directives │ ├── focus.js │ ├── loading.js │ ├── popover.js │ └── tooltip.js ├── index.js ├── mixins │ ├── arrayHelper.js │ ├── dateHelper.js │ ├── emitter.js │ ├── positionHelper.js │ └── validateHelper.js ├── package.json ├── releases │ ├── v1.0.1.md │ ├── v1.0.2.md │ ├── v1.0.3.md │ ├── v1.0.4.md │ └── v1.0.5.md ├── styles │ ├── alert.scss │ ├── animation.scss │ ├── animations │ │ ├── bounce-down.scss │ │ ├── bounce-left.scss │ │ ├── bounce-right.scss │ │ ├── bounce-up.scss │ │ ├── down.scss │ │ ├── left.scss │ │ ├── right.scss │ │ ├── side-bottom.scss │ │ ├── side-left.scss │ │ ├── side-right.scss │ │ ├── side-top.scss │ │ └── up.scss │ ├── aside.scss │ ├── backtop.scss │ ├── badge.scss │ ├── breadcrumb-item.scss │ ├── breadcrumb.scss │ ├── button-group.scss │ ├── button.scss │ ├── cascader-option.scss │ ├── cascader.scss │ ├── checkbox-group.scss │ ├── checkbox.scss │ ├── col.scss │ ├── collsape-item.scss │ ├── collsape.scss │ ├── common.scss │ ├── content.scss │ ├── datepicker.scss │ ├── dialog.scss │ ├── divider.scss │ ├── dropdown-item.scss │ ├── dropdown.scss │ ├── font.scss │ ├── footer.scss │ ├── form-item.scss │ ├── form.scss │ ├── header.scss │ ├── index.scss │ ├── input-number.scss │ ├── input.scss │ ├── layout.scss │ ├── loading.scss │ ├── menu.scss │ ├── message.scss │ ├── mixins │ │ ├── button.scss │ │ ├── dialog.scss │ │ ├── divider.scss │ │ ├── drop.scss │ │ ├── index.scss │ │ ├── input.scss │ │ ├── loading.scss │ │ ├── mixins.scss │ │ ├── popover.scss │ │ ├── select.scss │ │ ├── step.scss │ │ ├── table.scss │ │ └── tabs.scss │ ├── modal.scss │ ├── notify.scss │ ├── option-group.scss │ ├── option.scss │ ├── pagination.scss │ ├── popover.scss │ ├── progress.scss │ ├── radio.scss │ ├── reset.scss │ ├── row.scss │ ├── select.scss │ ├── slider.scss │ ├── step-item.scss │ ├── step.scss │ ├── switch.scss │ ├── tab-panel.scss │ ├── table.scss │ ├── tabs.scss │ ├── tag.scss │ ├── timepicker.scss │ ├── tooltip.scss │ ├── tree-item.scss │ ├── tree.scss │ ├── upload.scss │ ├── utils │ │ ├── conf.scss │ │ └── utils.scss │ ├── validate-icon.scss │ ├── variables.scss │ └── webfonts │ │ ├── fa-brands-400.eot │ │ ├── fa-brands-400.svg │ │ ├── fa-brands-400.ttf │ │ ├── fa-brands-400.woff │ │ ├── fa-brands-400.woff2 │ │ ├── fa-regular-400.eot │ │ ├── fa-regular-400.svg │ │ ├── fa-regular-400.ttf │ │ ├── fa-regular-400.woff │ │ ├── fa-regular-400.woff2 │ │ ├── fa-solid-900.eot │ │ ├── fa-solid-900.svg │ │ ├── fa-solid-900.ttf │ │ ├── fa-solid-900.woff │ │ └── fa-solid-900.woff2 └── utils │ └── config.js ├── static └── .gitkeep └── test └── unit ├── .eslintrc ├── jest.conf.js ├── setup.js └── specs └── HelloWorld.spec.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": ["transform-vue-jsx", "transform-runtime"], 12 | "env": { 13 | "test": { 14 | "presets": ["env", "stage-2"], 15 | "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"] 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | /build/ 2 | /config/ 3 | /dist/ 4 | /*.js 5 | /test/unit/coverage/ 6 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | // https://eslint.org/docs/user-guide/configuring 2 | 3 | module.exports = { 4 | root: true, 5 | parserOptions: { 6 | parser: 'babel-eslint' 7 | }, 8 | env: { 9 | browser: true, 10 | node: true, 11 | es6: true 12 | }, 13 | extends: [ 14 | // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention 15 | // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules. 16 | 'plugin:vue/essential', 17 | // https://github.com/standard/standard/blob/master/docs/RULES-en.md 18 | 'standard' 19 | ], 20 | // required to lint *.vue files 21 | plugins: [ 22 | 'vue' 23 | ], 24 | // add your custom rules here 25 | rules: { 26 | // allow async-await 27 | 'generator-star-spacing': 'off', 28 | // allow debugger during development 29 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /.github/issue_template.md: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | /dist/ 4 | /src/dist/* 5 | /src/package.json 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | /test/unit/coverage/ 10 | /lib/ 11 | 12 | # Editor directories and files 13 | .idea 14 | .vscode 15 | *.suo 16 | *.ntvs* 17 | *.njsproj 18 | *.sln 19 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 TUI 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /build-lib/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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | module.exports = { 3 | NODE_ENV: '"production"' 4 | } 5 | -------------------------------------------------------------------------------- /config/test.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const devEnv = require('./dev.env') 4 | 5 | module.exports = merge(devEnv, { 6 | NODE_ENV: '"testing"' 7 | }) 8 | -------------------------------------------------------------------------------- /example/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Version: v1.0.2 2 | 3 | ## Common 4 | * 解决bug: icon图标样式被覆盖造成样式错误 5 | 6 |
7 | 8 | # Version: v1.0.1 9 | 10 | ## DatePicker 11 | * 解决bug: windows scrollbar 12 | 13 | ## TimePicker 14 | * 解决bug: timepicker windows scrollbar 15 | 16 | ## Cascader 17 | * 解决bug: cascader search item effect source item when do search 18 | 19 | ## 新组件 20 | * Slider 21 | -------------------------------------------------------------------------------- /example/assets/TV.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/victor0210/TUI/cc02731c6b37f624ce0deb047fce212950f4326e/example/assets/TV.jpg -------------------------------------------------------------------------------- /example/assets/img/search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/victor0210/TUI/cc02731c6b37f624ce0deb047fce212950f4326e/example/assets/img/search.png -------------------------------------------------------------------------------- /example/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/victor0210/TUI/cc02731c6b37f624ce0deb047fce212950f4326e/example/assets/logo.png -------------------------------------------------------------------------------- /example/components/DemoPanel.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 30 | -------------------------------------------------------------------------------- /example/components/Guide.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 18 | 19 | 22 | -------------------------------------------------------------------------------- /example/components/LogItem.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 25 | 26 | 40 | -------------------------------------------------------------------------------- /example/components/Markdown.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 16 | -------------------------------------------------------------------------------- /example/components/RightAside.vue: -------------------------------------------------------------------------------- 1 | 17 | 20 | 23 | -------------------------------------------------------------------------------- /example/documents/alert/alert-center.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > `text-center` 设置显示内容居中 3 | ```html 4 | 5 | 6 | 7 | 8 | ``` 9 | ::: 10 | -------------------------------------------------------------------------------- /example/documents/alert/alert-icon.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > 添加 `show-icon` 属性显示状态icon，`icon` 为图标自定义图标类名，将覆盖默认图标 3 | ```html 4 | 5 | 6 | 7 | 8 | 9 | ``` 10 | ::: 11 | -------------------------------------------------------------------------------- /example/documents/alert/alert-more.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > `closable` 为 `false` 不显示关闭按钮，默认可关闭，`close-text` 自定义关闭触发文本代替关闭按钮，`close` 为关闭触发事件 3 | ```html 4 | 5 | 6 | 7 | 8 | 17 | ``` 18 | ::: 19 | -------------------------------------------------------------------------------- /example/documents/alert/alert-normal.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > `content` 为提示信息，`type` 为组件状态，类型为`Stirng`，可选`success`、`info`、`warning`、`danger` 3 | ```html 4 | 5 | 6 | 7 | 8 | 9 | ``` 10 | ::: 11 | -------------------------------------------------------------------------------- /example/documents/alert/alert-sub.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > `sub` 属性传入辅助文本 3 | ```html 4 | 5 | 6 | 7 | ``` 8 | ::: 9 | -------------------------------------------------------------------------------- /example/documents/back-top/normal.md: -------------------------------------------------------------------------------- 1 | ::: mk 2 | > 直接使用即可，api参见下方 3 | ```html 4 | 5 | ``` 6 | ::: 7 | -------------------------------------------------------------------------------- /example/documents/badge/badge-custom.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > `value` 传入自定义文字 3 | ```html 4 | 5 | 通知 6 | 7 | 8 | 9 | 新用户 10 | 11 | ``` 12 | ::: 13 | -------------------------------------------------------------------------------- /example/documents/badge/badge-dot.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > 添加 `dot` 属性显示小红点 3 | ```html 4 | 5 | 查看 6 | 7 | ``` 8 | ::: 9 | -------------------------------------------------------------------------------- /example/documents/badge/badge-limit.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > `max` 为最大显示数，超出自动格式化 3 | ```html 4 | 5 | 短信 6 | 7 | ``` 8 | ::: 9 | -------------------------------------------------------------------------------- /example/documents/badge/badge-normal.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > 使用 `value` 传入显示数字即可，显示在内层元素右上角 3 | ```html 4 | 5 | 新订单 6 | 7 | 8 | 9 | 新消息 10 | 11 | ``` 12 | ::: 13 | -------------------------------------------------------------------------------- /example/documents/badge/badge-single.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > 在标记组件内不嵌入任何元素将会被单独使用 3 | ```html 4 |
5 | 6 | 单独使用 7 |
8 | 9 |
10 | 11 | 单独使用dot 12 |
13 | ``` 14 | ::: 15 | -------------------------------------------------------------------------------- /example/documents/bread-crumb/bread-normal.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > `t-breadcrumb-item` 接收参数见网站底部文档 3 | ```html 4 | 5 | 首页 6 | 商品分类 7 | 男装 8 | TUI男装 9 | 10 | ``` 11 | ::: 12 | -------------------------------------------------------------------------------- /example/documents/bread-crumb/bread-separator-icon.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > `separator-icon` 配置图标类型分隔符 3 | ```html 4 | 5 | 首页 6 | 商品分类 7 | 男装 8 | TUI男装 9 | 10 | ``` 11 | ::: 12 | -------------------------------------------------------------------------------- /example/documents/bread-crumb/bread-separator.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > `separator` 配置字符类型分隔符 3 | ```html 4 | 5 | 首页 6 | 商品分类 7 | 男装 8 | TUI男装 9 | 10 | ``` 11 | ::: 12 | -------------------------------------------------------------------------------- /example/documents/button/buttonDisabled.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > 将按钮的 `disabled` 属性定义为 `true` 即可、 默认为 `false` 3 | ```html 4 | Primary 5 | Success 6 | Info 7 | Warning 8 | Danger 9 | Default 10 | ``` 11 | ::: 12 | -------------------------------------------------------------------------------- /example/documents/button/buttonGroup.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > 将需要成组的基本按钮组件嵌入 `t-button-group` 组件即可实现按钮组 3 | ```html 4 | 5 | 上一页 6 | 下一页 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | ``` 15 | ::: 16 | -------------------------------------------------------------------------------- /example/documents/button/buttonLoading.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > 将 `loading` 属性设为 `true` 及显示加载状态的按钮，可结合 `disabled` 属性使用，例如：限制接口的频繁请求 3 | ```html 4 | Loading... 5 | ``` 6 | ::: 7 | -------------------------------------------------------------------------------- /example/documents/button/buttonSize.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > 除了默认尺寸外，TUI还为您定制了另外三种尺寸分别是 `lg` 、 `sm` 和 `mini` 3 | ```html 4 | large 5 | normal 6 | small 7 | mini 8 | ``` 9 | ::: 10 | -------------------------------------------------------------------------------- /example/documents/button/buttonText.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > 设置为 `type` 为 `text` 及可 3 | ```html 4 | Text-Button 5 | Text-Button 6 | ``` 7 | ::: 8 | -------------------------------------------------------------------------------- /example/documents/cascader/cascader-disabled.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > 使用 `disabled` 属性开启禁用状态 3 | ```html 4 | 5 | 6 | 15 | ``` 16 | ::: 17 | -------------------------------------------------------------------------------- /example/documents/checkbox/checkboxBorder.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > 添加 `outbox` 属性即可 3 | ```html 4 | 5 | 6 | 7 | 8 | ``` 9 | ::: 10 | -------------------------------------------------------------------------------- /example/documents/checkbox/checkboxDisabled.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > 设置 `disabled` 禁用复选框, `checked` 默认选中 3 | ```html 4 | 5 | 6 | ``` 7 | ::: 8 | -------------------------------------------------------------------------------- /example/documents/checkbox/checkboxGroup.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > 使用 `t-chekcbox-group` 可简化绑定值的操作，还可限制选中个数等，见后续demo 3 | ```html 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | ``` 14 | ::: 15 | -------------------------------------------------------------------------------- /example/documents/checkbox/checkboxLimit.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > `min` 为最少选中个数 `max` 为最多选中个数，类型为 `Number` 3 | ```html 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 20 | ``` 21 | ::: 22 | -------------------------------------------------------------------------------- /example/documents/checkbox/checkboxNormal.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > 设置 `label-left` 可调整label定位，默认为 false，`checked` 属性为默认选中 3 | ```html 4 | 5 | 6 | ``` 7 | ::: 8 | -------------------------------------------------------------------------------- /example/documents/checkbox/checkboxTrueval.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > 设置 `true-value` 属性为 `true` 将会再选中时返回 `val`，默认选中返回 `true`，当使用 true-value 并想通过修改 value 绑定值选中时，值必须等于 val 而不是true 3 | ```html 4 | 当前值: {{ v1 }} 5 | 6 | 当前值: {{ v2 }} 7 | 8 | 18 | ``` 19 | ::: 20 | -------------------------------------------------------------------------------- /example/documents/date-picker/date-default-value.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > 以下提供了四种参考格式 3 | ```html 4 | 5 | 6 | 7 | 8 | 9 | 21 | ``` 22 | ::: 23 | -------------------------------------------------------------------------------- /example/documents/date-picker/date-disabled.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > 添加 `disabled` 属性开启禁用 3 | ```html 4 | 5 | 6 | ``` 7 | ::: 8 | -------------------------------------------------------------------------------- /example/documents/date-picker/date-range.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > `type` 为 `daterange` 开启区间选择模式 3 | ```html 4 | 5 | 6 | 15 | ``` 16 | ::: 17 | -------------------------------------------------------------------------------- /example/documents/date-picker/date-size.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > 设置 `size` 属性快速使用TUI为您提供的预设尺寸 3 | ```html 4 | 5 | 6 | 7 | 8 | 9 | 18 | ``` 19 | ::: 20 | -------------------------------------------------------------------------------- /example/documents/date-picker/date-type.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > `type` 默认为选择年月日，`month` 为选择年月，`year` 为选择年 3 | ```html 4 |
5 | 6 | 7 |
8 |
9 | 10 | 11 |
12 |
13 | 14 | 15 |
16 | 17 | 28 | ``` 29 | ::: 30 | -------------------------------------------------------------------------------- /example/documents/date-picker/date.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > 双向绑定值类型为 `String` 3 | ```html 4 | 5 | 6 | 15 | ``` 16 | ::: 17 | -------------------------------------------------------------------------------- /example/documents/dialog/dialog-footer.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > 组件一共提供两个方法属性，`onOk` 和 `onClose`，触发任意一个事件后组件都会关闭，如果希望点击后窗口不关闭，如：内容为比较复杂的表单需要多次验证时，建议使用 `Modal` 组件 3 | ```html 4 | 打开提示框 5 | 6 | 32 | ``` 33 | ::: 34 | -------------------------------------------------------------------------------- /example/documents/dialog/dialog-normal.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > `$TDialog` 绑定在全局Vue下，为单例模式，方法见底部文档 3 | ```html 4 | 打开提示框 5 | 6 | 17 | ``` 18 | ::: 19 | -------------------------------------------------------------------------------- /example/documents/dialog/dialog-status.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > 调用状态方法 `success`、`info`、`warning`、`danger` 显示状态图标 3 | ```html 4 | 成功 5 | 信息 6 | 警告 7 | 危险 8 | 9 | 35 | ``` 36 | ::: 37 | -------------------------------------------------------------------------------- /example/documents/divider/divider-normal.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > 分割线的使用非常简单，参见demo 3 | ```html 4 | 5 | 6 | 7 | 8 | ``` 9 | ::: 10 | -------------------------------------------------------------------------------- /example/documents/dropdown/dropdown-close.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > 添加 `hide-on-click` 点击菜单item后自动关闭下拉菜单，默认为 `false` 3 | ```html 4 | 5 | 下拉菜单 6 | 12 | 13 | ``` 14 | ::: 15 | -------------------------------------------------------------------------------- /example/documents/dropdown/dropdown-command.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > item上添加 `command` 属性透传参数，dropdown组件上添加`command`事件捕获点击回传的command参数 3 | ```html 4 | 5 | 下拉菜单 6 | 12 | 13 | ``` 14 | ::: 15 | -------------------------------------------------------------------------------- /example/documents/dropdown/dropdown-item.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > `disabled` 为不可点击，`divided` 为分割线 3 | ```html 4 | 5 | 下拉菜单 6 | 12 | 13 | ``` 14 | ::: 15 | -------------------------------------------------------------------------------- /example/documents/dropdown/dropdown-normal.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > `t-dropdown` 组件内部 `slot-default` 为触发下拉元素，`slot-dropdown` 为下来组件内容，使用 `t-dropdown-item` 添加下拉列表内容 3 | ```html 4 | 5 | 下拉菜单 6 | 12 | 13 | ``` 14 | ::: 15 | -------------------------------------------------------------------------------- /example/documents/dropdown/dropdown-trigger.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > `trigger` 为触发显示下拉菜单方式，`click` 为点击触发，默认为 `hover` 3 | ```html 4 |
5 | 6 | 7 | 下拉菜单 8 | 14 | 15 |
16 | 17 |
18 | 19 | 20 | 下拉菜单 21 | 27 | 28 |
29 | ``` 30 | ::: 31 | -------------------------------------------------------------------------------- /example/documents/dropdown/dropdown-width.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > 不设置`width`为自适应，设置为0既和触发元素宽度相同，类型为`Number` 3 | ```html 4 |
5 | 6 | 7 | 下拉菜单 8 | 14 | 15 |
16 | 17 |
18 | 19 | 20 | 下拉菜单 21 | 27 | 28 |
29 | ``` 30 | ::: 31 | -------------------------------------------------------------------------------- /example/documents/font/font.md: -------------------------------------------------------------------------------- 1 | ```css 2 | font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif; 3 | ``` 4 | -------------------------------------------------------------------------------- /example/documents/form/form-layout.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > 设置 `layout` 属性改变表单布局，可设置在 `form` 组件上或者分别设置在 `form-item` 上，如果两者同时设置，form-item上的设置会覆盖掉form上的设置，类型为 `String`，可选值 `左对齐（不填）` 、 `right（右对齐）` 、 `oneline（行内排列）` 、 `vertical（竖直排列）` 3 | ```html 4 |
5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 提交 17 | 18 | 19 |
20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 提交 34 | 35 | 36 |
37 | ``` 38 | ::: 39 | -------------------------------------------------------------------------------- /example/documents/form/form-normal.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > `t-form` 嵌套 `t-form-item` 使用表单组件 3 | ```html 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | ``` 24 | ::: 25 | -------------------------------------------------------------------------------- /example/documents/grid/gridGutter.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > 只需要为 `t-row` 组件设置 `gutter` 属性即可，类型为 `Number` 3 | ```html 4 | 5 |
6 |
7 |
8 |
9 | 10 | 11 | 12 |
13 |
14 |
15 | 16 | ``` 17 | ::: 18 | -------------------------------------------------------------------------------- /example/documents/grid/gridMix.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > 可按为单位随意设置 `t-col` 的 `span` ，填满整行只需总和为 `24` 即可 3 | ```html 4 | 5 |
6 |
7 |
8 |
9 | 10 | 11 | 12 |
13 |
14 |
15 | 16 | 17 | 18 |
19 |
20 |
21 | 22 | ``` 23 | ::: 24 | -------------------------------------------------------------------------------- /example/documents/grid/gridOffset.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > 通过设置 `t-col` 的 `offset` 属性来指定区块的偏移列数，类型为 `Number` 3 | ```html 4 | 5 |
6 |
7 |
8 |
9 | 10 | 11 | 12 |
13 |
14 |
15 | 16 | 17 | 18 |
19 | 20 | ``` 21 | ::: 22 | -------------------------------------------------------------------------------- /example/documents/grid/gridResponsive.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > 同bootstrap，一共设置了五种屏幕响应尺寸，分别是 `xs` 、`sm` 、`md` 、`lg` 和 `xl` 3 | ```html 4 | 5 |
6 |
7 |
8 |
9 | 10 | ``` 11 | ::: 12 | -------------------------------------------------------------------------------- /example/documents/input-number/input-number-disabled.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > 设置 `disabled` 为 `true` 即可 3 | ```html 4 | 5 | 6 | 15 | ``` 16 | ::: 17 | -------------------------------------------------------------------------------- /example/documents/input-number/input-number-limit.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > `max` 为最大值，`min` 为最小值，类型都为 `Number` 3 | ```html 4 | 5 | 6 | 15 | ``` 16 | ::: 17 | -------------------------------------------------------------------------------- /example/documents/input-number/input-number-normal.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > 绑定value值即可，类型为 `Number` 或 `String` 3 | ```html 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 20 | ``` 21 | ::: 22 | -------------------------------------------------------------------------------- /example/documents/input-number/input-number-range.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > 设置 `range` 属性即可，类型为 `Number` 3 | ```html 4 | 5 | 6 | 7 | 17 | ``` 18 | ::: 19 | -------------------------------------------------------------------------------- /example/documents/input-number/input-number-side-control.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > 设置 `side-control` 属性为 `true` 3 | ```html 4 | 5 | 6 | 15 | ``` 16 | ::: 17 | -------------------------------------------------------------------------------- /example/documents/input-number/input-number-size.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > 设置 `size` 属性即可，可选 `lg` `sm` `mini`，可配合设置width样式 3 | ```html 4 | 5 | 6 | 7 | 8 | 9 | 18 | ``` 19 | ::: 20 | -------------------------------------------------------------------------------- /example/documents/input/input.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > 可以通过 `width` 属性设置组件宽度，类型为 `String` ，默认为 100% 3 | ```html 4 | 5 | ``` 6 | ::: 7 | -------------------------------------------------------------------------------- /example/documents/input/inputButton.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > 可以通过添加 `slot` 为input组件设置其余内容，可选值为 `prefix` 和 `suffix`, 设置 `prefix-icon` 或 `suffix-icon` 可以在input内嵌入图标，但不可添加事件 3 | ```html 4 | 5 | 6 | 7 | 8 | 9 | 30 | ``` 31 | ::: 32 | -------------------------------------------------------------------------------- /example/documents/input/inputIcon.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > 和加入按钮一样只需要设置 `slot` 即可 3 | ```html 4 | 5 |

www.

6 | 7 | 8 | 9 |

http://

10 |

.com

11 | 12 | ``` 13 | ::: 14 | -------------------------------------------------------------------------------- /example/documents/input/inputSize.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > 设置 `size` 属性快速使用TUI为您提供的预设尺寸 3 | ```html 4 | 5 | 6 | 7 | 8 | ``` 9 | ::: 10 | -------------------------------------------------------------------------------- /example/documents/layout/layoutMix.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > 可通过内嵌 `t-layout` 组件实现复杂的行列组合布局 3 | ```html 4 | 5 | Header 6 | 7 | Left Side 8 | Content 9 | Right Side 10 | 11 | Footer 12 | 13 | 14 | 15 | Left Side 16 | 17 | Header 18 | Content 19 | Footer 20 | 21 | 22 | ``` 23 | ::: 24 | -------------------------------------------------------------------------------- /example/documents/layout/layoutNormal.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > `t-layout` 组件提供了唯一属性 `flex-direction` 、可选值 `row` 或者 `column` 3 | ```html 4 | 5 |
Header
6 |
Content
7 |
Footer
8 | 9 | ``` 10 | ::: 11 | -------------------------------------------------------------------------------- /example/documents/loading/loading-config.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > `show` 方法接收一个config参数，详情查阅网站底部参数表 3 | ```html 4 | 开始加载 5 | 6 | 29 | ``` 30 | ::: 31 | -------------------------------------------------------------------------------- /example/documents/loading/loading-directive.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > `v-t-loading` 接收两个参数，第一个为是否加载，第二个为配置对象 3 | ```html 4 | 5 | 6 |
7 | 8 |

我是任意元素，请在顶级容器上使用

9 |

v-t-loading

10 |
11 | 12 | 13 | 14 | 切换加载状态 15 | 16 | 17 | 18 | 19 | 38 | ``` 39 | ::: 40 | -------------------------------------------------------------------------------- /example/documents/loading/loading-normal.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > `$TLoading` 挂载在全局Vue对象上，设计模式为单例，使用非常简单，如下 3 | ```html 4 | 开始加载 5 | 6 | 18 | ``` 19 | ::: 20 | -------------------------------------------------------------------------------- /example/documents/message/message-center.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > `$TMessage` 挂载在全局Vue对象，使用非常简单，只需调用用 `show` 方法传入config参数即可，参数详情见网站底部说明 3 | ```html 4 | success 5 | 6 | 24 | ``` 25 | ::: 26 | -------------------------------------------------------------------------------- /example/documents/message/message-closable.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > `$TMessage` 挂载在全局Vue对象，使用非常简单，只需调用用 `show` 方法传入config参数即可，参数详情见网站底部说明 3 | ```html 4 | success 5 | info 6 | warning 7 | danger 8 | 9 | 42 | ``` 43 | ::: 44 | -------------------------------------------------------------------------------- /example/documents/message/message-normal.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > `$TMessage` 挂载在全局Vue对象，使用非常简单，只需调用用 `show` 方法传入config参数即可，参数详情见网站底部说明 3 | ```html 4 | default 5 | success 6 | info 7 | warning 8 | danger 9 | 10 | 43 | ``` 44 | ::: 45 | -------------------------------------------------------------------------------- /example/documents/message/message-sub.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > `$TMessage` 挂载在全局Vue对象，使用非常简单，只需调用用 `show` 方法传入config参数即可，参数详情见网站底部说明 3 | ```html 4 | success 5 | 6 | 24 | ``` 25 | ::: 26 | -------------------------------------------------------------------------------- /example/documents/notify/notify-close.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > `closable` 设置为 `false` 隐藏关闭按钮 3 | ```html 4 | 隐藏关闭按钮 5 | 23 | ``` 24 | ::: 25 | -------------------------------------------------------------------------------- /example/documents/notify/notify-duration.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > `duration` 设置关闭时间，为0既永久显示，默认为 `3000` 3 | ```html 4 | 1s 5 | 不关闭 6 | 27 | ``` 28 | ::: 29 | -------------------------------------------------------------------------------- /example/documents/notify/notify-normal.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > `$TNotify` 挂载在全局Vue对象，使用非常简单，只需调用用 `show` 方法传入config参数即可，参数详情见网站底部说明 3 | ```html 4 | 右上 5 | 左上 6 | 右下 7 | 左下 8 | 36 | ``` 37 | ::: 38 | -------------------------------------------------------------------------------- /example/documents/notify/notify-status.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > 调用状态方法会带有对应的状态图标，分别是 `success`、`info`、`warning`、`danger` 3 | ```html 4 | default 5 | success 6 | info 7 | warning 8 | danger 9 | 41 | ``` 42 | ::: 43 | -------------------------------------------------------------------------------- /example/documents/notify/notify-sub.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > `sub` 为通知详细文案 3 | ```html 4 | 详细信息 5 | 22 | ``` 23 | ::: 24 | -------------------------------------------------------------------------------- /example/documents/pagination/pagination-desc.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > `per-page` 为每页数量，`current-page` 为当前页数，`sizes`为可选每页数量，`size-change`为每页数量变化回调，`page-change`为页数变化回调 3 | ```html 4 | 13 | 14 | 32 | ``` 33 | ::: 34 | -------------------------------------------------------------------------------- /example/documents/pagination/pagination-layout.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > 设置 `layout` 进行组件不同布局，可选值 `total`、`size`、`pager`、`jump`，每项用 `,` 分开，可任意调换顺序 3 | ```html 4 |
5 | 6 | 7 |
8 |
9 | 10 | 11 |
12 |
13 | 14 | 15 |
16 |
17 | 18 | 19 |
20 | 21 | 39 | ``` 40 | ::: 41 | -------------------------------------------------------------------------------- /example/documents/pagination/pagination-normal.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > 传入 `total` 可自动计算出页数，默认每页数量 `10` 3 | ```html 4 |
5 | 6 | 7 |
8 |
9 | 10 | 11 |
12 | ``` 13 | ::: 14 | -------------------------------------------------------------------------------- /example/documents/popover/popover-action.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > 弹出层理不仅用于展示，还可以做一些操作 3 | ```html 4 | 5 | 删除 6 |
7 |

您确定删除这段消息吗？

8 |
9 | 取消 10 | 确定 11 |
12 |
13 | 14 | 15 | 24 | ``` 25 | ::: 26 | -------------------------------------------------------------------------------- /example/documents/popover/popover-contain.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > 可以在 `slot-popover` 里面添加更复杂的内容哦 3 | ```html 4 | 5 | 显示内容 6 | 14 | 15 | 16 | 25 | ``` 26 | ::: 27 | -------------------------------------------------------------------------------- /example/documents/popover/popover-directive.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > 在弹出层上使用定义ref定义唯一key，然后在触发元素上使用 `v-t-popover` 绑定即可，两者必须在同一父级组件内 3 | ```html 4 | 5 | 6 | 7 |

Here Is Popover1

8 | 9 | 10 | 11 |

Here Is Popover2

12 | 13 | 14 | 15 |

您确定删除这段消息吗？

16 |
17 | 取消 18 | 确定 19 |
20 | 21 | 22 | 弹出层1 23 | 弹出层2 24 | 弹出层3 25 | 26 | 27 | ``` 28 | ::: 29 | -------------------------------------------------------------------------------- /example/documents/popover/popover-trigger.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > `trigger` 设置触发弹出层的方式，可选 `click`、`hover`、`focus`，默认为 `hover` 3 | ```html 4 | 5 | hover 6 |
7 | 我是Hover弹出层 8 |
9 | 10 | 11 | click 12 |
13 | 我是Click弹出层 14 |
15 | 16 | 17 | click on hide 18 |
19 | 点击外部区域也可以关闭哦 20 |
21 | 22 | 23 | focus 24 |
25 | 我是Focus弹出层 26 |
27 | 28 | ``` 29 | ::: 30 | -------------------------------------------------------------------------------- /example/documents/progress/progress-circle.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > `type` 设置为 `circle` 使用环形进度条，`circle-size` 设置尺寸，`round` 为是否展示圆角，通过 `slot-socpe` 可获取 `percentage` 值，自己实现内容请自行编写css哦，内容区域宽高为 `circle-size` 的 50% 3 | ```html 4 | 5 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 20 | 21 | 22 | 27 | ``` 28 | ::: 29 | -------------------------------------------------------------------------------- /example/documents/progress/progress-inner.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > 设置 `text-inside` 开启文字内部显示，`width` 设置进度条宽度，`stroke-width` 设置进度条高度 3 | ```html 4 | 5 | 6 | 7 | 8 | 13 | ``` 14 | ::: 15 | -------------------------------------------------------------------------------- /example/documents/progress/progress-normal.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > `percentage` 为进度量，类型为 `Number`，`status` 设置进度条状态，变化不同背景色，还可通过 `bar-fill` 属性设置，包括渐变色哦 3 | ```html 4 | 5 | 6 | 7 | 8 | 9 | 14 | ``` 15 | ::: 16 | -------------------------------------------------------------------------------- /example/documents/radio/radioBorder.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | ```html 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 23 | ``` 24 | ::: 25 | -------------------------------------------------------------------------------- /example/documents/radio/radioDisabled.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > 设置 `disabled` 属性为 `true` 即可禁用单选框，不同于 checkbox，radio 的默认选中是通过 v-model 来实现的 3 | ```html 4 | 5 | 6 | 15 | ``` 16 | ::: 17 | -------------------------------------------------------------------------------- /example/documents/radio/radioGroup.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > 使用 `t-radio-group` 可简化绑定值的操作，并提供了唯一的 `change` 事件，必须通过操作组下面的单选框才能触发哦！ 3 | ```html 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 32 | ``` 33 | ::: 34 | -------------------------------------------------------------------------------- /example/documents/radio/radioNormal.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > 设置 `label-left` 属性来定位label 3 | ```html 4 | 5 | 6 | 15 | ``` 16 | ::: 17 | -------------------------------------------------------------------------------- /example/documents/radio/radioStyle.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | ```html 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 19 | ``` 20 | ::: 21 | -------------------------------------------------------------------------------- /example/documents/select/select-clearable.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > 使用 `clearable` 开启清除功能 3 | ```html 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 29 | ``` 30 | ::: 31 | -------------------------------------------------------------------------------- /example/documents/select/select-disabled.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > 给 `t-select` 组件加上disabled属性即可禁用下拉框 3 | ```html 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 29 | ``` 30 | ::: 31 | -------------------------------------------------------------------------------- /example/documents/select/select-divide.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > `t-option-group` 接收唯一参数 `label` ，类型为 `String` 3 | ```html 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 29 | ``` 30 | ::: 31 | -------------------------------------------------------------------------------- /example/documents/select/select-editable.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > 使用 `editable` 开启编辑功能 3 | ```html 4 | 5 | 6 | 7 | 8 | 25 | ``` 26 | ::: 27 | -------------------------------------------------------------------------------- /example/documents/select/select-multiple.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > 使用 `multiple` 开启多选传入value为 `Array` 类型，使用 `collapse-tags` 可收起选项只展示数字 3 | ```html 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 28 | ``` 29 | ::: 30 | -------------------------------------------------------------------------------- /example/documents/select/select-normal.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > 在 `t-option` 中需要传入两个重要参数 `val` 和 `label` 3 | ```html 4 | 5 | 6 | 7 | 8 | 33 | ``` 34 | ::: 35 | -------------------------------------------------------------------------------- /example/documents/select/select-searchable.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > 使用 `seachable` 开启本地搜做功能，远程搜索功能近期将会与您见面，敬请期待！ 3 | ```html 4 | 5 | 6 | 7 | 8 | 25 | ``` 26 | ::: 27 | -------------------------------------------------------------------------------- /example/documents/select/select-size.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > 设置 `size` 属性快速使用TUI为您提供的预设尺寸 3 | ```html 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 36 | ``` 37 | ::: 38 | -------------------------------------------------------------------------------- /example/documents/slider/slider-divide.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > 添加 `divide-line` 显示分割线 3 | ```html 4 | 5 | 6 | 15 | ``` 16 | ::: 17 | -------------------------------------------------------------------------------- /example/documents/slider/slider-normal.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > 默认样式传入value为数字，type `range` 为区间选择模式，传入值为数组，格式为 [small, big] 3 | ```html 4 | 5 | 6 | 7 | 17 | ``` 18 | ::: 19 | -------------------------------------------------------------------------------- /example/documents/slider/slider-range.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > `min` 为最小值，`max` 为最大值，类型为数字 3 | ```html 4 | 5 | 6 | 15 | ``` 16 | ::: 17 | -------------------------------------------------------------------------------- /example/documents/slider/slider-unit.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > `unit` 定义单位值同时定义了精度，类型为数字 3 | ```html 4 |
5 | 6 | 7 |
8 |
9 | 10 | 11 |
12 |
13 | 14 | 15 |
16 | 17 | 28 | ``` 29 | ::: 30 | -------------------------------------------------------------------------------- /example/documents/step/step-center.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > `text-center` 开启内容居中 3 | ```html 4 | 5 | 6 | 30 | ``` 31 | ::: 32 | -------------------------------------------------------------------------------- /example/documents/step/step-icon.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > steps 的 `icon` 配置步骤图标 3 | ```html 4 | 5 | 6 | 31 | ``` 32 | ::: 33 | -------------------------------------------------------------------------------- /example/documents/step/step-normal.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > `steps` 为步骤条内容，详细配置建网站底部文档，`active` 为步骤进度，类型为 `Number` 3 | ```html 4 | 5 | 6 | 30 | ``` 31 | ::: 32 | -------------------------------------------------------------------------------- /example/documents/step/step-status.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > `status` 为进度条状态，可选 3 | ```html 4 | 5 | 6 | 7 | 8 | 9 | 10 | 34 | ``` 35 | ::: 36 | -------------------------------------------------------------------------------- /example/documents/step/step-width.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > `flex-basis` 设置步骤内容宽度，类型为 `String` 3 | ```html 4 | 5 | 6 | 31 | ``` 32 | ::: 33 | -------------------------------------------------------------------------------- /example/documents/switch/switchColor.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > 显示文字只需要设置 `active-text` 和 `inactive-text` 的颜色值即可 3 | ```html 4 | 5 | 6 | 15 | ``` 16 | ::: 17 | -------------------------------------------------------------------------------- /example/documents/switch/switchNormal.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > 没啥说的，绑定value嗨起来 3 | ```html 4 | 5 | 6 | 15 | ``` 16 | ::: 17 | -------------------------------------------------------------------------------- /example/documents/switch/switchSize.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > 定义尺寸接收两个参数 `width` 和 `height`，类型为 `String` 3 | ```html 4 | 5 | 6 | 15 | ``` 16 | ::: 17 | -------------------------------------------------------------------------------- /example/documents/switch/switchText.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > 显示文字只需要设置 `active-text` 和 `inactive-text` 即可 3 | ```html 4 | 5 | 6 | 24 | ``` 25 | ::: 26 | -------------------------------------------------------------------------------- /example/documents/switch/switchTrueval.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > 显示文字只需要设置 `active-text` 和 `inactive-text` 即可 3 | ```html 4 |
5 | 6 | 7 | 当前值: {{ s1 }} 8 |
9 | 10 |
11 | 12 | 13 | 当前值: {{ s2 }} 14 |
15 | 16 | 26 | ``` 27 | ::: 28 | -------------------------------------------------------------------------------- /example/documents/table/table-border.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > 设置 `border` 为带边框的表格 3 | ```html 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 27 | ``` 28 | ::: 29 | -------------------------------------------------------------------------------- /example/documents/table/table-class.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > 通过 `row-class-name` 属性添加类到指定行，类型为 `Function`，返回参数为字符串或数组，TUI预设了五种基本状态分别是 `row-primary`、 `row-success`、 `row-info`、`row-warning`、`row-danger` 3 | ```html 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 34 | ``` 35 | ::: 36 | -------------------------------------------------------------------------------- /example/documents/table/table-column-header.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > 头部固定和列固定组合使用 3 | ```html 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 29 | ``` 30 | ::: 31 | -------------------------------------------------------------------------------- /example/documents/table/table-column.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > 在列组件上设置 `fixed` 或 `fixed-right` 属性即可 3 | ```html 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 29 | ``` 30 | ::: 31 | -------------------------------------------------------------------------------- /example/documents/table/table-header.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > 通过 `body-height` 设置表格高度即可，类型为 `Number` 3 | ```html 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 27 | ``` 28 | ::: 29 | -------------------------------------------------------------------------------- /example/documents/table/table-height-change.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > 通过添加 `body-max-height` 和 `body-min-height` 设置流体高度 3 | ```html 4 | 5 | 6 | 7 | 8 | 9 | 10 | 13 | 14 | 15 | 16 | 37 | ``` 38 | ::: 39 | -------------------------------------------------------------------------------- /example/documents/table/table-index.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > 加入 `type` 为 `index` 的列即可 3 | ```html 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 30 | ``` 31 | ::: 32 | -------------------------------------------------------------------------------- /example/documents/table/table-loading.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > `loading` 属性为 `true` 开启加载状态 3 | ```html 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 27 | ``` 28 | ::: 29 | -------------------------------------------------------------------------------- /example/documents/table/table-normal.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > `data` 属性接收一个对象数组， t-table-column 组件的属性 `label` 为表头，类型为 `String`，`prop` 为对象的key，类型为`Sting`，`width` 为列宽，类型为 `Number` 3 | ```html 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 27 | ``` 28 | ::: 29 | -------------------------------------------------------------------------------- /example/documents/table/table-stripe.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > 设置 `stripe` 为带斑马条纹的表格 3 | ```html 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 27 | ``` 28 | ::: 29 | -------------------------------------------------------------------------------- /example/documents/tabs/tabs-box.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > `type` 设置为 `box` 即可 3 | ```html 4 | 5 | 6 |

为中华振兴而敲代码-Tab-{{p.title}}

7 | 8 | 9 | 10 | 19 | ``` 20 | ::: 21 | -------------------------------------------------------------------------------- /example/documents/tabs/tabs-pipe.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > `type` 设置为 `pipe` 开启管道样式，添加 `editable` 属性开启可关闭模式，目前 editable 只适用于 pipe 样式 3 | ```html 4 | 5 | 6 |

为中华振兴而敲代码-Tab-{{p.title}}

7 | 8 | 9 | 10 | 添加新标签 11 | 12 | 38 | ``` 39 | ::: 40 | -------------------------------------------------------------------------------- /example/documents/tabs/tabs-title.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > `slot-title` 为自定义title内容 3 | ```html 4 | 5 | 6 | 旅游住店 7 | 旅游住店 8 | 9 | 10 | 旅游住店 11 | 美食餐饮 12 | 13 | 14 | 娱乐服务 15 | 娱乐服务 16 | 17 | 18 | ``` 19 | ::: 20 | -------------------------------------------------------------------------------- /example/documents/tag/tag-closable.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > 添加 `closeable` 属性显示标签关闭按钮 3 | ```html 4 | {{ t.label }} 5 | 6 | 21 | ``` 22 | ::: 23 | -------------------------------------------------------------------------------- /example/documents/tag/tag-dynamic.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > 可通过 `close` 事件进行标签的删除操作 3 | ```html 4 | {{ t.label }} 5 | + 标签 6 | 7 | 29 | ``` 30 | ::: 31 | -------------------------------------------------------------------------------- /example/documents/tag/tag-normal.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > 设置 `type` 属性使用 TUI 预设标签样式，分别有 `默认`、`success`、`info`、`warning`、`danger` 3 | ```html 4 | {{ t.label }} 5 | 6 | 21 | ``` 22 | ::: 23 | -------------------------------------------------------------------------------- /example/documents/time-picker/time-clearable.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > 添加 `clearable` 属性开启清除功能 3 | ```html 4 | 5 | 6 | 15 | ``` 16 | ::: 17 | -------------------------------------------------------------------------------- /example/documents/time-picker/time-disabled.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > 添加 `disabled` 属性打开禁用状态 3 | ```html 4 | 5 | 6 | 15 | ``` 16 | ::: 17 | -------------------------------------------------------------------------------- /example/documents/time-picker/time-size.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > 设置 `size` 属性快速使用TUI为您提供的预设尺寸 3 | ```html 4 | 5 | 6 | 7 | 8 | 9 | 18 | ``` 19 | ::: 20 | -------------------------------------------------------------------------------- /example/documents/time-picker/time.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | ```html 3 | 4 | 5 | 14 | ``` 15 | ::: 16 | -------------------------------------------------------------------------------- /example/documents/tooltip/tooltip-directive.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > 在弹出层上使用定义ref定义唯一key，然后在触发元素上使用 `v-t-tootip` 绑定即可，两者必须在同一父级组件内 3 | ```html 4 | 5 | directive 6 | ``` 7 | ::: 8 | -------------------------------------------------------------------------------- /example/documents/tooltip/tooltip-theme.md: -------------------------------------------------------------------------------- 1 | :::demo 2 | > `content`为必填参数，TUI预设七种主题，`light`、`dark`、`dark-gold`、`info`、`warning`、`danger`、`success` 3 | ```html 4 | 5 | light 6 | 7 | 8 | 9 | dark 10 | 11 | 12 | 13 | dark-gold 14 | 15 | 16 | 17 | info 18 | 19 | 20 | 21 | warning 22 | 23 | 24 | 25 | danger 26 | 27 | 28 | 29 | success 30 | 31 | ``` 32 | ::: 33 | -------------------------------------------------------------------------------- /example/documents/tree/tree-load.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > 使用 `lazy` 属性开启懒加载，`load` 传入数据加载方法，获取数据后请严格使用 `resolve` 回传数据，若数据为空请传 `[]` 3 | ```html 4 | 5 | 6 | 28 | ``` 29 | ::: 30 | -------------------------------------------------------------------------------- /example/documents/upload/upload-autoupload.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > 设置属性 `auto-upload` 为 `false` 开启手动上传 3 | ```html 4 | 5 | ``` 6 | ::: 7 | -------------------------------------------------------------------------------- /example/documents/upload/upload-directory.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > 添加 `webkitdirectory` 属性开启文件夹上传，因为此属性对浏览器要求比较高，使用时请查阅兼容性文档 3 | ```html 4 | 5 | 上传文件夹 6 | 9 | 10 | 11 | ``` 12 | ::: 13 | -------------------------------------------------------------------------------- /example/documents/upload/upload-drag.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > 添加属性 `drag` 即可开启拖拽上传，同时也可以点击触发 3 | ```html 4 | 5 | ``` 6 | ::: 7 | -------------------------------------------------------------------------------- /example/documents/upload/upload-limit.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > 设置属性 `limit` 限制文件上传个数，类型为 `Number`，`on-exceed` 为文件上传超出时触发 3 | ```html 4 | 8 | 上传 9 | 12 | 13 | 14 | 23 | ``` 24 | ::: 25 | -------------------------------------------------------------------------------- /example/documents/upload/upload-normal.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > 属性 `action` 必填，为上传地址，类型为 `String` ，通过 `on-upload-success` 和 `on-upload-error` 捕获上传成功或者失败（TUI封装了一组ajax相应对象，如果您觉得还不够，可以直接处理第三个原生xhr对象），组件内嵌任意元素可触发文件选择，添加 `tip slot` 可设置上传组件的tip 3 | ```htmlreject 4 | 8 | 上传 9 | 12 | 13 | 14 | 27 | ``` 28 | ::: 29 | -------------------------------------------------------------------------------- /example/documents/upload/upload-preview.md: -------------------------------------------------------------------------------- 1 | ::: demo 2 | > 设置属性 `list-type` 为 `pic` 开启图片预览，`on-preview` 获取预览事件 3 | ```html 4 | 9 | 上传 10 | 13 | 14 | 15 | 24 | ``` 25 | ::: 26 | -------------------------------------------------------------------------------- /example/documents/usage/usage-normal.md: -------------------------------------------------------------------------------- 1 | ::: mk 2 | ```javascript 3 | import Vue from 'vue' 4 | import App from './App' 5 | import router from './router' 6 | 7 | // import full tui 8 | import Tui from 'vtui' 9 | import 'vtui/dist/css/tui.min.css' 10 | 11 | // mount 12 | Vue.use(Tui) 13 | 14 | new Vue({ 15 | el: '#app', 16 | router, 17 | render: h => h(App) 18 | }) 19 | ``` 20 | ::: 21 | -------------------------------------------------------------------------------- /example/documents/usage/usage-project.md: -------------------------------------------------------------------------------- 1 | ::: mk 2 | > TUI命名规范为 `t-` 作为前缀加上组件名，如下 3 | ```html 4 |
5 | Weilcome to TUI !! 6 | 7 |
8 | 9 | 18 | ``` 19 | ::: 20 | -------------------------------------------------------------------------------- /example/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App' 3 | import demoPanel from './components/DemoPanel' 4 | import markdown from './components/Markdown' 5 | import router from './router' 6 | import highlight from 'highlightjs' 7 | import Guide from './components/Guide' 8 | 9 | // import the whole tui toolkit 10 | // import Tui from 'vtui' 11 | // import 'vtui/dist/css/tui.min.css' 12 | import Tui from '../src/index.js' 13 | Vue.use(Tui) 14 | 15 | // code highlight transform to vue directive 16 | Vue.directive('hlt', function (el) { 17 | let blocks = el.querySelectorAll('pre code') 18 | Array.prototype.forEach.call(blocks, highlight.highlightBlock) 19 | }) 20 | 21 | Vue.component('demo-panel', demoPanel) 22 | Vue.component('markdown', markdown) 23 | Vue.component('guide', Guide) 24 | 25 | /* eslint-disable */ 26 | new Vue({ 27 | el: '#app', 28 | router, 29 | render: h => h(App) 30 | }) 31 | -------------------------------------------------------------------------------- /example/mocks/index.js: -------------------------------------------------------------------------------- 1 | // require('./tree') 2 | // require('./upload') 3 | -------------------------------------------------------------------------------- /example/mocks/tree.js: -------------------------------------------------------------------------------- 1 | import Mock from 'mockjs' 2 | let Random = Mock.Random 3 | 4 | Mock.mock('/tree/list', 'get', 5 | [{ 6 | 'name|1': Random.name() 7 | }, { 8 | 'name|2': Random.name() 9 | }] 10 | ) 11 | -------------------------------------------------------------------------------- /example/mocks/upload.js: -------------------------------------------------------------------------------- 1 | import Mock from 'mockjs' 2 | let Random = Mock.Random 3 | 4 | Mock.mock('/upload', 'post', 5 | [{ 6 | 'name|1': Random.name() 7 | }, { 8 | 'name|2': Random.name() 9 | }] 10 | ) 11 | -------------------------------------------------------------------------------- /example/pages/install.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 26 | -------------------------------------------------------------------------------- /example/pages/log.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 41 | 42 | 44 | -------------------------------------------------------------------------------- /example/pages/usage.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 34 | -------------------------------------------------------------------------------- /example/styles/footer.scss: -------------------------------------------------------------------------------- 1 | .t-footer-row{ 2 | .t-col{ 3 | padding: 20px 0; 4 | .footer-col-title{ 5 | margin-bottom: 10px; 6 | } 7 | ul{ 8 | li{ 9 | height: 20px; 10 | font-size: 13px; 11 | color: red; 12 | } 13 | } 14 | } 15 | .t-col-last{ 16 | text-align: center; 17 | img{ 18 | width: 40px; 19 | } 20 | p{ 21 | font-size: 14px; 22 | color: #999; 23 | } 24 | } 25 | } -------------------------------------------------------------------------------- /example/styles/header.scss: -------------------------------------------------------------------------------- 1 | .logoCol{ 2 | .logo-img{ 3 | height: 50px; 4 | vertical-align: middle; 5 | margin-right: 5px; 6 | } 7 | } 8 | .search{ 9 | margin-top: 5px; 10 | float: right; 11 | 12 | .t-input { 13 | transition: all .3s; 14 | width: 120px; 15 | 16 | .t-input__inner { 17 | background-color: #eee; 18 | transition: all .3s; 19 | //border: none; 20 | } 21 | } 22 | .t-input.is-focus { 23 | width: 200px; 24 | .t-input__inner { 25 | background-color: #fff; 26 | } 27 | //box-shadow: 0 2px 6px rgba(0,0,0,0.2); 28 | } 29 | } 30 | .navCol{ 31 | ul{ 32 | height: 50px; 33 | line-height: 50px; 34 | text-align: center; 35 | li{ 36 | float: left; 37 | height:100%; 38 | min-width: 90px; 39 | a{ 40 | display: block; 41 | width: 100%; 42 | height: 100%; 43 | color: #333; 44 | transition:all .1s; 45 | &:hover{ 46 | color: #5285f4; 47 | } 48 | } 49 | } 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /example/styles/leftAside.scss: -------------------------------------------------------------------------------- 1 | .aside-item{ 2 | .t-menu-item{ 3 | height: 45px; 4 | line-height: 45px; 5 | a{ 6 | width: 100%; 7 | height: 100%; 8 | display: block; 9 | color: #555; 10 | &:hover{ 11 | span{ 12 | color: #5285f4; 13 | } 14 | } 15 | } 16 | } 17 | .navigate-group{ 18 | height: 45px; 19 | line-height: 45px; 20 | font-size: 16px; 21 | color: #333; 22 | font-weight: 700; 23 | } 24 | .t-menu-item-group{ 25 | line-height: 45px; 26 | .t-menu-item-title{ 27 | color: #999; 28 | font-size: 12px; 29 | } 30 | .t-menu-item-list{ 31 | a{ 32 | display: block; 33 | width: 100%; 34 | height: 100%; 35 | color: #333 !important; 36 | font-size: 15px; 37 | font-weight: 500; 38 | .chinese{ 39 | font-weight: 400; 40 | font-size: 13px; 41 | color: #999; 42 | } 43 | &:hover{ 44 | span{ 45 | color: #5285f4; 46 | } 47 | } 48 | } 49 | } 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /example/styles/rightAside.scss: -------------------------------------------------------------------------------- 1 | .right-aside{ 2 | ul{ 3 | border-left: 1px solid #eeeeee; 4 | li{ 5 | height: 25px; 6 | line-height: 25px; 7 | padding-left: 18px; 8 | a{ 9 | color: #333 !important; 10 | font-size: 13px; 11 | } 12 | &:hover{ 13 | a{ 14 | color: red; 15 | } 16 | } 17 | }; 18 | } 19 | } -------------------------------------------------------------------------------- /example/webfonts/fa-brands-400.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/victor0210/TUI/cc02731c6b37f624ce0deb047fce212950f4326e/example/webfonts/fa-brands-400.eot -------------------------------------------------------------------------------- /example/webfonts/fa-brands-400.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/victor0210/TUI/cc02731c6b37f624ce0deb047fce212950f4326e/example/webfonts/fa-brands-400.ttf -------------------------------------------------------------------------------- /example/webfonts/fa-brands-400.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/victor0210/TUI/cc02731c6b37f624ce0deb047fce212950f4326e/example/webfonts/fa-brands-400.woff -------------------------------------------------------------------------------- /example/webfonts/fa-brands-400.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/victor0210/TUI/cc02731c6b37f624ce0deb047fce212950f4326e/example/webfonts/fa-brands-400.woff2 -------------------------------------------------------------------------------- /example/webfonts/fa-regular-400.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/victor0210/TUI/cc02731c6b37f624ce0deb047fce212950f4326e/example/webfonts/fa-regular-400.eot -------------------------------------------------------------------------------- /example/webfonts/fa-regular-400.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/victor0210/TUI/cc02731c6b37f624ce0deb047fce212950f4326e/example/webfonts/fa-regular-400.ttf -------------------------------------------------------------------------------- /example/webfonts/fa-regular-400.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/victor0210/TUI/cc02731c6b37f624ce0deb047fce212950f4326e/example/webfonts/fa-regular-400.woff -------------------------------------------------------------------------------- /example/webfonts/fa-regular-400.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/victor0210/TUI/cc02731c6b37f624ce0deb047fce212950f4326e/example/webfonts/fa-regular-400.woff2 -------------------------------------------------------------------------------- /example/webfonts/fa-solid-900.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/victor0210/TUI/cc02731c6b37f624ce0deb047fce212950f4326e/example/webfonts/fa-solid-900.eot -------------------------------------------------------------------------------- /example/webfonts/fa-solid-900.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/victor0210/TUI/cc02731c6b37f624ce0deb047fce212950f4326e/example/webfonts/fa-solid-900.ttf -------------------------------------------------------------------------------- /example/webfonts/fa-solid-900.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/victor0210/TUI/cc02731c6b37f624ce0deb047fce212950f4326e/example/webfonts/fa-solid-900.woff -------------------------------------------------------------------------------- /example/webfonts/fa-solid-900.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/victor0210/TUI/cc02731c6b37f624ce0deb047fce212950f4326e/example/webfonts/fa-solid-900.woff2 -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | t-ui 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/components/alert/index.js: -------------------------------------------------------------------------------- 1 | import Alert from './alert.vue' 2 | import Vue from 'vue' 3 | 4 | Alert.install = function () { 5 | if (this.install.installed) return 6 | Vue.component(Alert.name, Alert) 7 | } 8 | 9 | export default Alert 10 | -------------------------------------------------------------------------------- /src/components/aside/aside.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 19 | 20 | 23 | -------------------------------------------------------------------------------- /src/components/aside/index.js: -------------------------------------------------------------------------------- 1 | import Aside from './aside.vue' 2 | import Vue from 'vue' 3 | 4 | Aside.install = function () { 5 | if (this.install.installed) return 6 | Vue.component(Aside.name, Aside) 7 | } 8 | 9 | export default Aside 10 | -------------------------------------------------------------------------------- /src/components/backtop/index.js: -------------------------------------------------------------------------------- 1 | import BackTop from './backtop.vue' 2 | import Vue from 'vue' 3 | 4 | BackTop.install = function () { 5 | if (this.install.installed) return 6 | Vue.component(BackTop.name, BackTop) 7 | } 8 | 9 | export default BackTop 10 | -------------------------------------------------------------------------------- /src/components/badge/badge.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 34 | -------------------------------------------------------------------------------- /src/components/badge/index.js: -------------------------------------------------------------------------------- 1 | import Badge from './badge.vue' 2 | import Vue from 'vue' 3 | 4 | Badge.install = function () { 5 | if (this.install.installed) return 6 | Vue.component(Badge.name, Badge) 7 | } 8 | 9 | export default Badge 10 | -------------------------------------------------------------------------------- /src/components/breadcrumb/breadcrumb.vue: -------------------------------------------------------------------------------- 1 | 43 | -------------------------------------------------------------------------------- /src/components/breadcrumb/index.js: -------------------------------------------------------------------------------- 1 | import BreadCrumb from './breadcrumb.vue' 2 | import Vue from 'vue' 3 | 4 | BreadCrumb.install = function () { 5 | if (this.install.installed) return 6 | Vue.component(BreadCrumb.name, BreadCrumb) 7 | } 8 | 9 | export default BreadCrumb 10 | -------------------------------------------------------------------------------- /src/components/breadcrumbItem/breadcrumb-item.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 32 | 33 | 36 | -------------------------------------------------------------------------------- /src/components/breadcrumbItem/index.js: -------------------------------------------------------------------------------- 1 | import BreadCrumbItem from './breadcrumb-item.vue' 2 | import Vue from 'vue' 3 | 4 | BreadCrumbItem.install = function () { 5 | if (this.install.installed) return 6 | Vue.component(BreadCrumbItem.name, BreadCrumbItem) 7 | } 8 | 9 | export default BreadCrumbItem 10 | -------------------------------------------------------------------------------- /src/components/button/index.js: -------------------------------------------------------------------------------- 1 | import Button from './button.vue' 2 | 3 | Button.install = function (VUE) { 4 | if (this.install.installed) return 5 | VUE.component(Button.name, Button) 6 | } 7 | 8 | export default Button 9 | -------------------------------------------------------------------------------- /src/components/buttonGroup/buttonGroup.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | -------------------------------------------------------------------------------- /src/components/buttonGroup/index.js: -------------------------------------------------------------------------------- 1 | import ButtonGroup from './buttonGroup' 2 | 3 | ButtonGroup.install = function (Vue) { 4 | if (this.install.installed) return 5 | Vue.component(ButtonGroup.name, ButtonGroup) 6 | } 7 | 8 | export default ButtonGroup 9 | -------------------------------------------------------------------------------- /src/components/cascader/index.js: -------------------------------------------------------------------------------- 1 | import Cascader from './cascader.vue' 2 | import Vue from 'vue' 3 | 4 | Cascader.install = function () { 5 | if (this.install.installed) return 6 | Vue.component(Cascader.name, Cascader) 7 | } 8 | 9 | export default Cascader 10 | -------------------------------------------------------------------------------- /src/components/checkbox/index.js: -------------------------------------------------------------------------------- 1 | import CheckBox from './checkbox.vue' 2 | import Vue from 'vue' 3 | 4 | CheckBox.install = function () { 5 | if (this.install.installed) return 6 | Vue.component(CheckBox.name, CheckBox) 7 | } 8 | 9 | export default CheckBox 10 | -------------------------------------------------------------------------------- /src/components/checkboxGroup/index.js: -------------------------------------------------------------------------------- 1 | import CheckboxGroup from './checkbox-group.vue' 2 | import Vue from 'vue' 3 | 4 | CheckboxGroup.install = function () { 5 | if (this.install.installed) return 6 | Vue.component(CheckboxGroup.name, CheckboxGroup) 7 | } 8 | 9 | export default CheckboxGroup 10 | -------------------------------------------------------------------------------- /src/components/col/index.js: -------------------------------------------------------------------------------- 1 | import TCol from './col' 2 | 3 | /* istanbul ignore next */ 4 | TCol.install = function (Vue) { 5 | Vue.component(TCol.name, TCol) 6 | } 7 | 8 | export default TCol 9 | -------------------------------------------------------------------------------- /src/components/collsape/index.js: -------------------------------------------------------------------------------- 1 | import Collsape from './collsape.vue' 2 | import Vue from 'vue' 3 | 4 | Collsape.install = function () { 5 | if (this.install.installed) return 6 | Vue.component(Collsape.name, Collsape) 7 | } 8 | 9 | export default Collsape 10 | -------------------------------------------------------------------------------- /src/components/collsapeItem/index.js: -------------------------------------------------------------------------------- 1 | import CollsapeItem from './collsape-item.vue' 2 | import Vue from 'vue' 3 | 4 | CollsapeItem.install = function () { 5 | if (this.install.installed) return 6 | Vue.component(CollsapeItem.name, CollsapeItem) 7 | } 8 | 9 | export default CollsapeItem 10 | -------------------------------------------------------------------------------- /src/components/content/content.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 16 | -------------------------------------------------------------------------------- /src/components/content/index.js: -------------------------------------------------------------------------------- 1 | import Content from './content.vue' 2 | import Vue from 'vue' 3 | 4 | Content.install = function () { 5 | if (this.install.installed) return 6 | Vue.component(Content.name, Content) 7 | } 8 | 9 | export default Content 10 | -------------------------------------------------------------------------------- /src/components/datepicker/index.js: -------------------------------------------------------------------------------- 1 | import Datepicker from './datepicker.vue' 2 | import Vue from 'vue' 3 | 4 | Datepicker.install = function () { 5 | if (this.install.installed) return 6 | Vue.component(Datepicker.name, Datepicker) 7 | } 8 | 9 | export default Datepicker 10 | -------------------------------------------------------------------------------- /src/components/divider/divider.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 22 | -------------------------------------------------------------------------------- /src/components/divider/index.js: -------------------------------------------------------------------------------- 1 | import Divider from './divider' 2 | import Vue from 'vue' 3 | 4 | Divider.install = function () { 5 | if (this.install.installed) return 6 | Vue.component(Divider.name, Divider) 7 | } 8 | 9 | export default Divider 10 | -------------------------------------------------------------------------------- /src/components/dropdown/index.js: -------------------------------------------------------------------------------- 1 | import DropDown from './dropdown.vue' 2 | import Vue from 'vue' 3 | 4 | DropDown.install = function () { 5 | if (this.install.installed) return 6 | Vue.component(DropDown.name, DropDown) 7 | } 8 | 9 | export default DropDown 10 | -------------------------------------------------------------------------------- /src/components/dropdownItem/index.js: -------------------------------------------------------------------------------- 1 | import DropDownItem from './dropdown-item.vue' 2 | import Vue from 'vue' 3 | 4 | DropDownItem.install = function () { 5 | if (this.install.installed) return 6 | Vue.component(DropDownItem.name, DropDownItem) 7 | } 8 | 9 | export default DropDownItem 10 | -------------------------------------------------------------------------------- /src/components/footer/footer.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 18 | 19 | 22 | -------------------------------------------------------------------------------- /src/components/footer/index.js: -------------------------------------------------------------------------------- 1 | import Footer from './footer.vue' 2 | import Vue from 'vue' 3 | 4 | Footer.install = function () { 5 | if (this.install.installed) return 6 | Vue.component(Footer.name, Footer) 7 | } 8 | 9 | export default Footer 10 | -------------------------------------------------------------------------------- /src/components/form/index.js: -------------------------------------------------------------------------------- 1 | import Form from './form.vue' 2 | import Vue from 'vue' 3 | 4 | Form.install = function () { 5 | if (this.install.installed) return 6 | Vue.component(Form.name, Form) 7 | } 8 | 9 | export default Form 10 | -------------------------------------------------------------------------------- /src/components/formItem/index.js: -------------------------------------------------------------------------------- 1 | import FormItem from './form-item.vue' 2 | import Vue from 'vue' 3 | 4 | FormItem.install = function () { 5 | if (this.install.installed) return 6 | Vue.component(FormItem.name, FormItem) 7 | } 8 | 9 | export default FormItem 10 | -------------------------------------------------------------------------------- /src/components/header/header.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 19 | -------------------------------------------------------------------------------- /src/components/header/index.js: -------------------------------------------------------------------------------- 1 | import Header from './header.vue' 2 | import Vue from 'vue' 3 | 4 | Header.install = function () { 5 | if (this.install.installed) return 6 | Vue.component(Header.name, Header) 7 | } 8 | 9 | export default Header 10 | -------------------------------------------------------------------------------- /src/components/input/index.js: -------------------------------------------------------------------------------- 1 | import Input from './input.vue' 2 | 3 | Input.install = function (Vue) { 4 | if (this.install.installed) return 5 | Vue.component(Input.name, Input) 6 | } 7 | 8 | export default Input 9 | -------------------------------------------------------------------------------- /src/components/input/validate-icon.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 15 | 16 | 19 | -------------------------------------------------------------------------------- /src/components/input/validateIcon.js: -------------------------------------------------------------------------------- 1 | import ValidateIcon from './validate-icon.vue' 2 | import Vue from 'vue' 3 | 4 | ValidateIcon.install = function () { 5 | if (this.install.installed) return 6 | Vue.component(ValidateIcon.name, ValidateIcon) 7 | } 8 | 9 | export default ValidateIcon 10 | -------------------------------------------------------------------------------- /src/components/inputNumber/index.js: -------------------------------------------------------------------------------- 1 | import InputNumber from './input-number' 2 | import Vue from 'vue' 3 | 4 | InputNumber.install = function () { 5 | if (this.install.installed) return 6 | Vue.component(InputNumber.name, InputNumber) 7 | } 8 | 9 | export default InputNumber 10 | -------------------------------------------------------------------------------- /src/components/layout/index.js: -------------------------------------------------------------------------------- 1 | import Layout from './layout.vue' 2 | import Vue from 'vue' 3 | 4 | Layout.install = function () { 5 | if (this.install.installed) return 6 | Vue.component(Layout.name, Layout) 7 | } 8 | 9 | export default Layout 10 | -------------------------------------------------------------------------------- /src/components/layout/layout.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | 17 | 20 | -------------------------------------------------------------------------------- /src/components/loading/index.js: -------------------------------------------------------------------------------- 1 | import Loading from './loading.js' 2 | 3 | let loadingInstance = null 4 | 5 | const getInstance = (props) => { 6 | loadingInstance = loadingInstance || Loading.initial(props) 7 | return loadingInstance 8 | } 9 | 10 | const loading = (action, props) => { 11 | const c = getInstance(props) 12 | 13 | switch (action) { 14 | case 'show': 15 | c.show() 16 | break 17 | case 'hide': 18 | c.hide() 19 | loadingInstance = null 20 | break 21 | } 22 | } 23 | 24 | export default { 25 | show (props) { 26 | loading('show', props) 27 | }, 28 | 29 | hide () { 30 | loading('hide') 31 | }, 32 | 33 | remove () { 34 | this.hide() 35 | loadingInstance = null 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /src/components/loading/loading.js: -------------------------------------------------------------------------------- 1 | import Loading from './loading.vue' 2 | import Vue from 'vue' 3 | 4 | Loading.initial = _props => { 5 | const instance = new Vue({ 6 | data () { 7 | return { 8 | isShow: false 9 | } 10 | }, 11 | 12 | render (h) { 13 | let props = Object.assign({ 14 | isShow: this.isShow, 15 | width: 150, 16 | height: 120 17 | }, _props) 18 | 19 | return h(Loading, { 20 | props: props 21 | }) 22 | }, 23 | 24 | methods: { 25 | show () { 26 | this.isShow = true 27 | }, 28 | 29 | hide () { 30 | this.isShow = false 31 | setTimeout(() => { 32 | this.$destroy() 33 | }, 200) 34 | } 35 | }, 36 | 37 | beforeDestroy () { 38 | document.body.removeChild(this.$el) 39 | } 40 | }) 41 | 42 | const component = instance.$mount() 43 | const el = component.$el 44 | document.body.appendChild(el) 45 | 46 | return { 47 | show () { 48 | component.show() 49 | document.body.style.overflow = 'hidden' 50 | }, 51 | 52 | hide () { 53 | component.hide() 54 | document.body.style.overflow = 'auto' 55 | } 56 | } 57 | } 58 | 59 | export default Loading 60 | -------------------------------------------------------------------------------- /src/components/menu/index.js: -------------------------------------------------------------------------------- 1 | import Menu from './menu.vue' 2 | import Vue from 'vue' 3 | 4 | Menu.install = function () { 5 | if (this.install.installed) return 6 | Vue.component(Menu.name, Menu) 7 | } 8 | 9 | export default Menu 10 | -------------------------------------------------------------------------------- /src/components/menu/menu-collsape.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /src/components/menu/menu-item-content.vue: -------------------------------------------------------------------------------- 1 | 15 | 28 | 29 | 32 | -------------------------------------------------------------------------------- /src/components/message/index.js: -------------------------------------------------------------------------------- 1 | import Message from './message.js' 2 | 3 | let instance 4 | 5 | const getInstance = (props) => { 6 | return Message.initial(props) 7 | } 8 | 9 | const message = (props) => { 10 | instance = getInstance(props) 11 | 12 | return { 13 | show () { 14 | instance.show() 15 | }, 16 | remove () { 17 | instance.remove() 18 | } 19 | } 20 | } 21 | 22 | export default { 23 | show (props) { 24 | return message(props) 25 | }, 26 | hide () { 27 | message().remove() 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/components/message/message.js: -------------------------------------------------------------------------------- 1 | import Message from './message.vue' 2 | import Vue from 'vue' 3 | 4 | Message.initial = _props => { 5 | const instance = new Vue({ 6 | render (h) { 7 | return h(Message, { 8 | props: Object.assign({}, _props), 9 | on: { 10 | 'close': this.remove 11 | } 12 | }) 13 | }, 14 | methods: { 15 | remove () { 16 | setTimeout(() => { 17 | this.hide() 18 | }, 300) 19 | }, 20 | hide () { 21 | this.$destroy() 22 | document.body.removeChild(this.$el) 23 | } 24 | } 25 | }) 26 | 27 | const component = instance.$mount() 28 | document.body.appendChild(component.$el) 29 | 30 | const el = component.$el 31 | setTimeout(() => { 32 | el.style.opacity = '1' 33 | el.style.marginTop = '0' 34 | }, 100) 35 | 36 | return instance 37 | } 38 | 39 | export default Message 40 | -------------------------------------------------------------------------------- /src/components/modal/index.js: -------------------------------------------------------------------------------- 1 | import Modal from './modal.vue' 2 | import Vue from 'vue' 3 | 4 | Modal.install = function () { 5 | if (this.install.installed) return 6 | Vue.component(Modal.name, Modal) 7 | } 8 | 9 | export default Modal 10 | -------------------------------------------------------------------------------- /src/components/modal/model-temp.vue: -------------------------------------------------------------------------------- 1 | 24 | 40 | -------------------------------------------------------------------------------- /src/components/notify/index.js: -------------------------------------------------------------------------------- 1 | import Notify from './notify' 2 | 3 | const notify = (props, type) => { 4 | let instance = Notify.initial(props, type) 5 | 6 | setTimeout(() => { 7 | instance.show() 8 | }, 50) 9 | } 10 | 11 | // TODO: get notify instance / add remove methods 12 | export default { 13 | show (props) { 14 | notify(props) 15 | }, 16 | success (props) { 17 | notify(props, 'success') 18 | }, 19 | info (props) { 20 | notify(props, 'info') 21 | }, 22 | warning (props) { 23 | notify(props, 'warning') 24 | }, 25 | danger (props) { 26 | notify(props, 'danger') 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/components/notify/notify.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 48 | -------------------------------------------------------------------------------- /src/components/option/index.js: -------------------------------------------------------------------------------- 1 | import Option from './option.vue' 2 | import Vue from 'vue' 3 | 4 | Option.install = function () { 5 | if (this.install.installed) return 6 | Vue.component(Option.name, Option) 7 | } 8 | 9 | export default Option 10 | -------------------------------------------------------------------------------- /src/components/optionGroup/index.js: -------------------------------------------------------------------------------- 1 | import OptionGroup from './option-group.vue' 2 | import Vue from 'vue' 3 | 4 | OptionGroup.install = function () { 5 | if (this.install.installed) return 6 | Vue.component(OptionGroup.name, OptionGroup) 7 | } 8 | 9 | export default OptionGroup 10 | -------------------------------------------------------------------------------- /src/components/optionGroup/option-group.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /src/components/pagination/index.js: -------------------------------------------------------------------------------- 1 | import Pagination from './pagination.vue' 2 | import Vue from 'vue' 3 | 4 | Pagination.install = function () { 5 | if (this.install.installed) return 6 | Vue.component(Pagination.name, Pagination) 7 | } 8 | 9 | export default Pagination 10 | -------------------------------------------------------------------------------- /src/components/pagination/jump.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 25 | 26 | 29 | -------------------------------------------------------------------------------- /src/components/pagination/sizes.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 34 | 35 | 38 | -------------------------------------------------------------------------------- /src/components/pagination/total.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 17 | 18 | 21 | -------------------------------------------------------------------------------- /src/components/popover/index.js: -------------------------------------------------------------------------------- 1 | import Popover from './popover.vue' 2 | import Vue from 'vue' 3 | 4 | Popover.install = function () { 5 | if (this.install.installed) return 6 | Vue.component(Popover.name, Popover) 7 | } 8 | 9 | export default Popover 10 | -------------------------------------------------------------------------------- /src/components/popover/popover-content.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 49 | 50 | 53 | -------------------------------------------------------------------------------- /src/components/progress/index.js: -------------------------------------------------------------------------------- 1 | import Progress from './progress.vue' 2 | import Vue from 'vue' 3 | 4 | Progress.install = function () { 5 | if (this.install.installed) return 6 | Vue.component(Progress.name, Progress) 7 | } 8 | 9 | export default Progress 10 | -------------------------------------------------------------------------------- /src/components/radio/index.js: -------------------------------------------------------------------------------- 1 | import TRadio from './radio.vue' 2 | import Vue from 'vue' 3 | 4 | TRadio.install = function () { 5 | if (this.install.installed) return 6 | Vue.component(TRadio.name, TRadio) 7 | } 8 | 9 | export default TRadio 10 | -------------------------------------------------------------------------------- /src/components/radioGroup/index.js: -------------------------------------------------------------------------------- 1 | import TRadioGroup from './radio-group.vue' 2 | import Vue from 'vue' 3 | 4 | TRadioGroup.install = function () { 5 | if (this.install.installed) return 6 | Vue.component(TRadioGroup.name, TRadioGroup) 7 | } 8 | 9 | export default TRadioGroup 10 | -------------------------------------------------------------------------------- /src/components/reset/index.js: -------------------------------------------------------------------------------- 1 | import Reset from './reset.vue' 2 | 3 | Reset.install = function (Vue) { 4 | if (this.install.installed) return 5 | Vue.component(Reset.name, Reset) 6 | } 7 | 8 | export default Reset 9 | -------------------------------------------------------------------------------- /src/components/reset/reset.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 28 | 29 | 32 | -------------------------------------------------------------------------------- /src/components/row/index.js: -------------------------------------------------------------------------------- 1 | import TRow from './row' 2 | 3 | /* istanbul ignore next */ 4 | TRow.install = function (Vue) { 5 | Vue.component(TRow.name, TRow) 6 | } 7 | 8 | export default TRow 9 | -------------------------------------------------------------------------------- /src/components/row/row.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 't-row', 3 | 4 | props: { 5 | gutter: Number, 6 | type: String, 7 | tag: { 8 | type: String, 9 | default: 'div' 10 | }, 11 | justify: { 12 | type: String, 13 | default: 'start' 14 | }, 15 | align: { 16 | type: String, 17 | default: 'top' 18 | } 19 | }, 20 | 21 | computed: { 22 | style () { 23 | let ret = {} 24 | 25 | if (this.gutter) { 26 | ret.marginLeft = `-${this.gutter / 2}px` 27 | ret.marginRight = ret.marginLeft 28 | } 29 | 30 | return ret 31 | } 32 | }, 33 | 34 | render (h) { 35 | return h(this.tag, { 36 | class: [ 37 | 't-row', 38 | this.justify !== 'start' ? `is-justify-${this.justify}` : '', 39 | this.align !== 'top' ? `is-align-${this.align}` : '', 40 | { 't-row--flex': this.type === 'flex' } 41 | ], 42 | style: this.style 43 | }, this.$slots.default) 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /src/components/select/index.js: -------------------------------------------------------------------------------- 1 | import Select from './select.vue' 2 | import Vue from 'vue' 3 | 4 | Select.install = function () { 5 | if (this.install.installed) return 6 | Vue.component(Select.name, Select) 7 | } 8 | 9 | export default Select 10 | -------------------------------------------------------------------------------- /src/components/slider/index.js: -------------------------------------------------------------------------------- 1 | import Slider from './slider.vue' 2 | import Vue from 'vue' 3 | 4 | Slider.install = function () { 5 | if (this.install.installed) return 6 | Vue.component(Slider.name, Slider) 7 | } 8 | 9 | export default Slider 10 | -------------------------------------------------------------------------------- /src/components/step/index.js: -------------------------------------------------------------------------------- 1 | import Step from './step.vue' 2 | import Vue from 'vue' 3 | 4 | Step.install = function () { 5 | if (this.install.installed) return 6 | Vue.component(Step.name, Step) 7 | } 8 | 9 | export default Step 10 | -------------------------------------------------------------------------------- /src/components/step/step.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 40 | -------------------------------------------------------------------------------- /src/components/submit/index.js: -------------------------------------------------------------------------------- 1 | import Submit from './submit.vue' 2 | 3 | Submit.install = function (Vue) { 4 | if (this.install.installed) return 5 | Vue.component(Submit.name, Submit) 6 | } 7 | 8 | export default Submit 9 | -------------------------------------------------------------------------------- /src/components/submit/submit.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 37 | 38 | 41 | -------------------------------------------------------------------------------- /src/components/switch/index.js: -------------------------------------------------------------------------------- 1 | import Switch from './switch.vue' 2 | import Vue from 'vue' 3 | 4 | Switch.install = function () { 5 | if (this.install.installed) return 6 | Vue.component(Switch.name, Switch) 7 | } 8 | 9 | export default Switch 10 | -------------------------------------------------------------------------------- /src/components/tabPanel/index.js: -------------------------------------------------------------------------------- 1 | import TabPanel from './tab-panel.vue' 2 | import Vue from 'vue' 3 | 4 | TabPanel.install = function () { 5 | if (this.install.installed) return 6 | Vue.component(TabPanel.name, TabPanel) 7 | } 8 | 9 | export default TabPanel 10 | -------------------------------------------------------------------------------- /src/components/tabPanel/tab-panel.vue: -------------------------------------------------------------------------------- 1 | 8 | 30 | -------------------------------------------------------------------------------- /src/components/table-bak/index.js: -------------------------------------------------------------------------------- 1 | import Table from './table.vue' 2 | import Vue from 'vue' 3 | 4 | Table.install = function () { 5 | if (this.install.installed) return 6 | Vue.component(Table.name, Table) 7 | } 8 | 9 | export default Table 10 | -------------------------------------------------------------------------------- /src/components/table-bak/table-expand.vue: -------------------------------------------------------------------------------- 1 | 39 | 40 | 43 | -------------------------------------------------------------------------------- /src/components/table/index.js: -------------------------------------------------------------------------------- 1 | import Table from './table.vue' 2 | import Vue from 'vue' 3 | 4 | Table.install = function () { 5 | if (this.install.installed) return 6 | Vue.component(Table.name, Table) 7 | } 8 | 9 | export default Table 10 | -------------------------------------------------------------------------------- /src/components/table/table-expand.vue: -------------------------------------------------------------------------------- 1 | 39 | 40 | 43 | -------------------------------------------------------------------------------- /src/components/tableColumn-bak/index.js: -------------------------------------------------------------------------------- 1 | import TableColumn from './table-column.vue' 2 | import Vue from 'vue' 3 | 4 | TableColumn.install = function () { 5 | if (this.install.installed) return 6 | Vue.component(TableColumn.name, TableColumn) 7 | } 8 | 9 | export default TableColumn 10 | -------------------------------------------------------------------------------- /src/components/tableColumn-bak/table-column.vue: -------------------------------------------------------------------------------- 1 | 2 | 39 | 40 | 43 | -------------------------------------------------------------------------------- /src/components/tableColumn/index.js: -------------------------------------------------------------------------------- 1 | import TableColumn from './table-column.vue' 2 | import Vue from 'vue' 3 | 4 | TableColumn.install = function () { 5 | if (this.install.installed) return 6 | Vue.component(TableColumn.name, TableColumn) 7 | } 8 | 9 | export default TableColumn 10 | -------------------------------------------------------------------------------- /src/components/tableColumn/table-column.vue: -------------------------------------------------------------------------------- 1 | 2 | 39 | 40 | 43 | -------------------------------------------------------------------------------- /src/components/tabs/index.js: -------------------------------------------------------------------------------- 1 | import Tabs from './tabs.vue' 2 | import Vue from 'vue' 3 | 4 | Tabs.install = function () { 5 | if (this.install.installed) return 6 | Vue.component(Tabs.name, Tabs) 7 | } 8 | 9 | export default Tabs 10 | -------------------------------------------------------------------------------- /src/components/tag/index.js: -------------------------------------------------------------------------------- 1 | import Tag from './tag.vue' 2 | import Vue from 'vue' 3 | 4 | Tag.install = function () { 5 | if (this.install.installed) return 6 | Vue.component(Tag.name, Tag) 7 | } 8 | 9 | export default Tag 10 | -------------------------------------------------------------------------------- /src/components/tag/tag.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 26 | -------------------------------------------------------------------------------- /src/components/timepicker/index.js: -------------------------------------------------------------------------------- 1 | import Timepicker from './timepicker.vue' 2 | import Vue from 'vue' 3 | 4 | Timepicker.install = function () { 5 | if (this.install.installed) return 6 | Vue.component(Timepicker.name, Timepicker) 7 | } 8 | 9 | export default Timepicker 10 | -------------------------------------------------------------------------------- /src/components/tooltip/index.js: -------------------------------------------------------------------------------- 1 | import Tooltip from './tooltip.vue' 2 | import Vue from 'vue' 3 | 4 | Tooltip.install = function () { 5 | if (this.install.installed) return 6 | Vue.component(Tooltip.name, Tooltip) 7 | } 8 | 9 | export default Tooltip 10 | -------------------------------------------------------------------------------- /src/components/tree/index.js: -------------------------------------------------------------------------------- 1 | import Tree from './tree.vue' 2 | import Vue from 'vue' 3 | 4 | Tree.install = function () { 5 | if (this.install.installed) return 6 | Vue.component(Tree.name, Tree) 7 | } 8 | 9 | export default Tree 10 | -------------------------------------------------------------------------------- /src/components/tree/tree-box.vue: -------------------------------------------------------------------------------- 1 | 33 | 34 | 37 | -------------------------------------------------------------------------------- /src/components/upload/index.js: -------------------------------------------------------------------------------- 1 | import Upload from './upload' 2 | import Vue from 'vue' 3 | 4 | Upload.install = function () { 5 | if (this.install.installed) return 6 | Vue.component(Upload.name, Upload) 7 | } 8 | 9 | export default Upload 10 | -------------------------------------------------------------------------------- /src/components/upload/tfile.js: -------------------------------------------------------------------------------- 1 | export default class TFile { 2 | constructor (file) { 3 | this.file = file 4 | this.uuid = ~~(Math.random() * 100000000) 5 | this.loading = false 6 | this.percent = 0 7 | this.uploadSuccess = false 8 | this.uploadError = false 9 | this.prepearUpload = false 10 | this.uri = '' 11 | 12 | this.setFileUrl() 13 | } 14 | 15 | setFileUrl () { 16 | let reader = new FileReader() 17 | 18 | reader.addEventListener('load', () => { 19 | this.uri = reader.result 20 | }, false) 21 | 22 | this.file && reader.readAsDataURL(this.file) 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/components/upload/uploader.js: -------------------------------------------------------------------------------- 1 | import Ajax from './ajax' 2 | let ajax = new Ajax() 3 | 4 | export default class Uploader { 5 | constructor (uploadUrl, method, name, headers, withCredentials) { 6 | this.uploadUrl = uploadUrl 7 | this.method = method 8 | this.name = name 9 | this.headers = headers 10 | this.withCredentials = withCredentials 11 | } 12 | 13 | upload (tfile, handleProgressChange) { 14 | return new Promise((resolve, reject) => { 15 | let fd = new FormData() 16 | fd.append(this.name, tfile.file) 17 | 18 | ajax.send(this.uploadUrl, this.method, fd, this.headers, this.withCredentials, handleProgressChange, tfile) 19 | .then((resp, xhr) => { 20 | resolve(resp, xhr) 21 | }) 22 | .catch((err, xhr) => { 23 | reject(err, xhr) 24 | }) 25 | }) 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/directives/focus.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | 3 | const TFocus = Vue.directive('tfocus', function () { 4 | const autoFocus = setTimeout(function () { 5 | document.getElementsByClassName('t-select__editor-input')[0].focus() 6 | clearTimeout(autoFocus) 7 | }) 8 | }) 9 | 10 | export default TFocus 11 | -------------------------------------------------------------------------------- /src/directives/popover.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | 3 | const TPopover = Vue.directive('t-popover', { 4 | bind (el, binding, vnode) { 5 | console.log(vnode.context.$refs[binding.arg]) 6 | let pop = vnode.context.$refs[binding.arg] 7 | if (el && pop) pop.setTriggerTarget(el) 8 | return el 9 | } 10 | }) 11 | 12 | export default TPopover 13 | -------------------------------------------------------------------------------- /src/directives/tooltip.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | 3 | const TPopover = Vue.directive('t-tooltip', { 4 | bind (el, binding, vnode) { 5 | let pop = vnode.context.$refs[binding.arg].$children[0] 6 | if (el && pop) pop.setTriggerTarget(el) 7 | return el 8 | } 9 | }) 10 | 11 | export default TPopover 12 | -------------------------------------------------------------------------------- /src/mixins/dateHelper.js: -------------------------------------------------------------------------------- 1 | export default { 2 | format: function (date, fmt) { 3 | let o = { 4 | 'M+': date.getMonth() + 1, // 月份 5 | 'd+': date.getDate(), // 日 6 | 'h+': date.getHours(), // 小时 7 | 'm+': date.getMinutes(), // 分 8 | 's+': date.getSeconds(), // 秒 9 | 'q+': Math.floor((date.getMonth() + 3) / 3), // 季度 10 | 'S': date.getMilliseconds() // 毫秒 11 | } 12 | if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)) 13 | for (let k in o) { 14 | if (new RegExp('(' + k + ')').test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length))) 15 | } 16 | return fmt 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/mixins/positionHelper.js: -------------------------------------------------------------------------------- 1 | export default { 2 | methods: { 3 | getElementViewLeft (element) { 4 | let p = element.getBoundingClientRect() 5 | 6 | return p.left 7 | }, 8 | 9 | getElementViewTop (element) { 10 | let p = element.getBoundingClientRect() 11 | 12 | return p.top 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/mixins/validateHelper.js: -------------------------------------------------------------------------------- 1 | import AsyncValidator from 'async-validator' 2 | 3 | export default { 4 | methods: { 5 | validateFiled (model, rules, callback) { 6 | let validator = new AsyncValidator(rules) 7 | validator.validate(model, (errors, fields) => { 8 | return callback(errors, fields) 9 | }) 10 | }, 11 | getValidator (rules) { 12 | return new AsyncValidator(rules) 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/releases/v1.0.1.md: -------------------------------------------------------------------------------- 1 | * fix: datepicker windows scrollbar 2 | * fix: timepicker windows scrollbar 3 | * feat: theme colors 4 | * fix: cascader search item effect source item when do search 5 | * feat: add slider component 6 | -------------------------------------------------------------------------------- /src/releases/v1.0.2.md: -------------------------------------------------------------------------------- 1 | * fix: icon style covered （icon图标样式被覆盖造成样式错误） 2 | -------------------------------------------------------------------------------- /src/releases/v1.0.3.md: -------------------------------------------------------------------------------- 1 | * fix: font file url error 2 | -------------------------------------------------------------------------------- /src/releases/v1.0.4.md: -------------------------------------------------------------------------------- 1 | * fix: style compile error 2 | -------------------------------------------------------------------------------- /src/releases/v1.0.5.md: -------------------------------------------------------------------------------- 1 | * style: select option boxshadow 2 | * fix: windows modal scroll bar 3 | -------------------------------------------------------------------------------- /src/styles/animations/bounce-down.scss: -------------------------------------------------------------------------------- 1 | @keyframes t-bounce-down-in { 2 | from, 3 | 60%, 4 | 75%, 5 | 90%, 6 | to { 7 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 8 | } 9 | 10 | 0% { 11 | opacity: 0; 12 | transform: translate3d(0, -3000px, 0); 13 | } 14 | 15 | 60% { 16 | opacity: 1; 17 | transform: translate3d(0, 25px, 0); 18 | } 19 | 20 | 75% { 21 | transform: translate3d(0, -10px, 0); 22 | } 23 | 24 | 90% { 25 | transform: translate3d(0, 5px, 0); 26 | } 27 | 28 | to { 29 | transform: translate3d(0, 0, 0); 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/styles/animations/bounce-left.scss: -------------------------------------------------------------------------------- 1 | @keyframes t-bounce-left-in { 2 | from, 3 | 60%, 4 | 75%, 5 | 90%, 6 | to { 7 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 8 | } 9 | 10 | 0% { 11 | opacity: 0; 12 | transform: translate3d(-3000px, 0, 0); 13 | } 14 | 15 | 60% { 16 | opacity: 1; 17 | transform: translate3d(25px, 0, 0); 18 | } 19 | 20 | 75% { 21 | transform: translate3d(-10px, 0, 0); 22 | } 23 | 24 | 90% { 25 | transform: translate3d(5px, 0, 0); 26 | } 27 | 28 | to { 29 | transform: translate3d(0, 0, 0); 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/styles/animations/bounce-right.scss: -------------------------------------------------------------------------------- 1 | @keyframes t-bounce-right-in { 2 | from, 3 | 60%, 4 | 75%, 5 | 90%, 6 | to { 7 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 8 | } 9 | 10 | from { 11 | opacity: 0; 12 | transform: translate3d(3000px, 0, 0); 13 | } 14 | 15 | 60% { 16 | opacity: 1; 17 | transform: translate3d(-25px, 0, 0); 18 | } 19 | 20 | 75% { 21 | transform: translate3d(10px, 0, 0); 22 | } 23 | 24 | 90% { 25 | transform: translate3d(-5px, 0, 0); 26 | } 27 | 28 | to { 29 | transform: translate3d(0, 0, 0); 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/styles/animations/bounce-up.scss: -------------------------------------------------------------------------------- 1 | @keyframes t-bounce-up-in { 2 | from, 3 | 60%, 4 | 75%, 5 | 90%, 6 | to { 7 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 8 | } 9 | 10 | from { 11 | opacity: 0; 12 | transform: translate3d(0, 3000px, 0); 13 | } 14 | 15 | 60% { 16 | opacity: 1; 17 | transform: translate3d(0, -20px, 0); 18 | } 19 | 20 | 75% { 21 | transform: translate3d(0, 10px, 0); 22 | } 23 | 24 | 90% { 25 | transform: translate3d(0, -5px, 0); 26 | } 27 | 28 | to { 29 | transform: translate3d(0, 0, 0); 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/styles/animations/down.scss: -------------------------------------------------------------------------------- 1 | @keyframes t-go-down-in { 2 | 0% { 3 | transform: translateY(-$--animation-offset-base); 4 | } 5 | 100% { 6 | transform: translateY(0); 7 | } 8 | } 9 | 10 | @keyframes t-go-down-out { 11 | 0% { 12 | transform: translateY(0); 13 | } 14 | 100% { 15 | transform: translateY(-$--animation-offset-base); 16 | } 17 | } 18 | 19 | @keyframes t-go-down-big-in { 20 | 0% { 21 | transform: translateY(-$--animation-offset-big); 22 | } 23 | 100% { 24 | transform: translateY(0); 25 | } 26 | } 27 | 28 | @keyframes t-go-down-big-out { 29 | 0% { 30 | transform: translateY(0); 31 | } 32 | 100% { 33 | transform: translateY(-$--animation-offset-big); 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/styles/animations/left.scss: -------------------------------------------------------------------------------- 1 | @keyframes t-go-left-in { 2 | 0% { 3 | transform: translateX(-$--animation-offset-base); 4 | } 5 | 100% { 6 | transform: translateX(0); 7 | } 8 | } 9 | 10 | @keyframes t-go-left-out { 11 | 0% { 12 | transform: translateX(0); 13 | } 14 | 100% { 15 | transform: translateX(-$--animation-offset-base); 16 | } 17 | } 18 | 19 | @keyframes t-go-left-big-in { 20 | 0% { 21 | transform: translateX(-$--animation-offset-big); 22 | } 23 | 100% { 24 | transform: translateX(0); 25 | } 26 | } 27 | 28 | @keyframes t-go-left-big-out { 29 | 0% { 30 | transform: translateX(0); 31 | } 32 | 100% { 33 | transform: translateX(-$--animation-offset-big); 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/styles/animations/right.scss: -------------------------------------------------------------------------------- 1 | @keyframes t-go-right-in { 2 | 0% { 3 | transform: translateX($--animation-offset-base); 4 | } 5 | 100% { 6 | transform: translateX(0); 7 | } 8 | } 9 | 10 | @keyframes t-go-right-out { 11 | 0% { 12 | transform: translateX(0); 13 | } 14 | 100% { 15 | transform: translateX($--animation-offset-base); 16 | } 17 | } 18 | 19 | @keyframes t-go-right-big-in { 20 | 0% { 21 | transform: translateX($--animation-offset-big); 22 | } 23 | 100% { 24 | transform: translateX(0); 25 | } 26 | } 27 | 28 | @keyframes t-go-right-big-out { 29 | 0% { 30 | transform: translateX(0); 31 | } 32 | 100% { 33 | transform: translateX($--animation-offset-big); 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/styles/animations/side-bottom.scss: -------------------------------------------------------------------------------- 1 | @keyframes t-side-bottom-in { 2 | 0% { 3 | bottom: -1000px; 4 | } 5 | 100% { 6 | bottom: 0; 7 | } 8 | } 9 | 10 | @keyframes t-side-bottom-out { 11 | 0% { 12 | bottom: 0; 13 | } 14 | 100% { 15 | bottom: -1000px; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/styles/animations/side-left.scss: -------------------------------------------------------------------------------- 1 | @keyframes t-side-left-in { 2 | 0% { 3 | left: -1000px; 4 | } 5 | 100% { 6 | left: 0; 7 | } 8 | } 9 | 10 | @keyframes t-side-left-out { 11 | 0% { 12 | left: 0; 13 | } 14 | 100% { 15 | left: -1000px; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/styles/animations/side-right.scss: -------------------------------------------------------------------------------- 1 | @keyframes t-side-right-in { 2 | 0% { 3 | right: -1000px; 4 | } 5 | 100% { 6 | right: 0; 7 | } 8 | } 9 | 10 | @keyframes t-side-right-out { 11 | 0% { 12 | right: 0; 13 | } 14 | 100% { 15 | right: -1000px; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/styles/animations/side-top.scss: -------------------------------------------------------------------------------- 1 | @keyframes t-side-top-in { 2 | 0% { 3 | top: -1000px; 4 | } 5 | 100% { 6 | top: 0; 7 | } 8 | } 9 | 10 | @keyframes t-side-top-out { 11 | 0% { 12 | top: 0; 13 | } 14 | 100% { 15 | top: -1000px; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/styles/animations/up.scss: -------------------------------------------------------------------------------- 1 | @keyframes t-go-up-in { 2 | 0% { 3 | transform: translateY($--animation-offset-base); 4 | } 5 | 100% { 6 | transform: translateY(0); 7 | } 8 | } 9 | 10 | @keyframes t-go-up-out { 11 | 0% { 12 | transform: translateY(0); 13 | } 14 | 100% { 15 | transform: translateY($--animation-offset-base); 16 | } 17 | } 18 | 19 | @keyframes t-go-up-big-in { 20 | 0% { 21 | transform: translateY($--animation-offset-big); 22 | } 23 | 100% { 24 | transform: translateY(0); 25 | } 26 | } 27 | 28 | @keyframes t-go-up-big-out { 29 | 0% { 30 | transform: translateY(0); 31 | } 32 | 100% { 33 | transform: translateY($--animation-offset-big); 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/styles/aside.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | 3 | @include b(aside) { 4 | overflow: auto; 5 | box-sizing: border-box; 6 | padding: $--aside-padding; 7 | } 8 | -------------------------------------------------------------------------------- /src/styles/backtop.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins/mixins"; 3 | @import "utils/utils"; 4 | 5 | @include b(back-top) { 6 | position: fixed; 7 | border-radius: 50%; 8 | border: 1px solid #eee; 9 | background-color: #fff; 10 | text-align: center; 11 | transition: all .2s; 12 | box-shadow: $--box-shadow-base; 13 | cursor: pointer; 14 | opacity: 0; 15 | transform: scale(0); 16 | 17 | &:hover { 18 | color: $--color-primary; 19 | 20 | i { 21 | font-size: 20px; 22 | } 23 | } 24 | 25 | i { 26 | width: 20px; 27 | height: 20px; 28 | line-height: 20px; 29 | transition: font-size .2s; 30 | text-shadow: 0 2px 2px rgba(0,0,0,0.2); 31 | @include utils-position-center(a) 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/styles/badge.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins/mixins"; 3 | 4 | @include b(badge) { 5 | position: relative; 6 | display: inline-block; 7 | 8 | @include e(content) { 9 | display: inline-block; 10 | box-shadow: $--box-shadow-base; 11 | padding: 3px 6px; 12 | font-size: 12px; 13 | line-height: 12px; 14 | border: 2px solid #fafafa; 15 | background-color: $--color-danger; 16 | color: white; 17 | border-radius: 100px; 18 | font-weight: 300; 19 | 20 | @include m(dot) { 21 | width: 8px; 22 | height: 8px; 23 | padding: 0; 24 | } 25 | } 26 | 27 | @include m(alone) { 28 | .t-badge__content { 29 | z-index: $--popover-index; 30 | position: absolute; 31 | right: 10px; 32 | top: 0; 33 | transform: translate(100%, -50%); 34 | } 35 | .t-badge__content--dot { 36 | top: 0; 37 | right: 6px; 38 | } 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /src/styles/breadcrumb-item.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins/mixins"; 3 | 4 | @include b(breadcrumb-item) { 5 | position: relative; 6 | display: inline-block; 7 | float: left; 8 | font-size: 14px; 9 | height: 20px; 10 | line-height: 20px; 11 | color: $--color-text-secondary; 12 | font-weight: 400; 13 | 14 | > span { 15 | float: left; 16 | } 17 | 18 | @include e(router) { 19 | a { 20 | transition: color .2s; 21 | font-weight: 500; 22 | color: $--color-text-primary; 23 | &:hover { 24 | color: $--color-primary; 25 | } 26 | } 27 | } 28 | 29 | @include e(separator) { 30 | margin: 0 10px; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/styles/breadcrumb.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins/mixins"; 3 | 4 | @include b(breadcrumb) { 5 | position: relative; 6 | overflow: hidden; 7 | } 8 | -------------------------------------------------------------------------------- /src/styles/button-group.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "./utils/utils"; 3 | @import "./mixins/index"; 4 | 5 | @include b(btn-group) { 6 | display: inline-block; 7 | line-height: 1; 8 | white-space: nowrap; 9 | cursor: pointer; 10 | -webkit-appearance: none; 11 | box-sizing: border-box; 12 | outline: none; 13 | margin: 0; 14 | transition: .1s; 15 | font-weight: $--button-font-weight; 16 | border-radius: $--button-group-border-radius; 17 | overflow: hidden; 18 | @include utils-user-select(none); 19 | 20 | & > .t-btn { 21 | margin: 0; 22 | float: left; 23 | border-radius: 0; 24 | 25 | &:first-child{ 26 | border-top-left-radius: $--button-group-border-radius; 27 | border-bottom-left-radius: $--button-group-border-radius; 28 | } 29 | 30 | &:last-child{ 31 | border-top-right-radius: $--button-group-border-radius; 32 | border-bottom-right-radius: $--button-group-border-radius; 33 | } 34 | &:not(:last-child) { 35 | border-right: $--border-base; 36 | } 37 | } 38 | } 39 | 40 | -------------------------------------------------------------------------------- /src/styles/cascader-option.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins/mixins"; 3 | 4 | @include b(cascader-option) { 5 | cursor: pointer; 6 | user-select: none; 7 | padding: 0 20px; 8 | 9 | @include e(check) { 10 | color: $--color-text-placeholder; 11 | float: right; 12 | line-height: 40px; 13 | pointer-events: none; 14 | } 15 | 16 | &:hover { 17 | background-color: lighten(#f5f7fa, 1.5%); 18 | color: $--color-primary; 19 | } 20 | 21 | @include when(selected) { 22 | background-color: #fff; 23 | color: $--color-primary; 24 | } 25 | 26 | @include when(choosing) { 27 | background-color: #fff; 28 | color: $--color-primary; 29 | } 30 | 31 | @include when(focus) { 32 | background-color: #f5f7fa; 33 | color: $--color-primary; 34 | box-shadow: $--box-shadow-base; 35 | } 36 | 37 | &.is-focus { 38 | background-color: #f5f7fa; 39 | color: $--color-primary; 40 | } 41 | 42 | @include when(disabled) { 43 | background-color: #fff; 44 | cursor: not-allowed; 45 | color: $--color-text-placeholder; 46 | user-select: none; 47 | &:hover { 48 | background-color: #fff; 49 | color: $--color-text-placeholder; 50 | } 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /src/styles/checkbox-group.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins/mixins"; 3 | 4 | @include b(checkbox-group) { 5 | display: inline-block; 6 | vertical-align: middle; 7 | } 8 | -------------------------------------------------------------------------------- /src/styles/collsape-item.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins/mixins"; 3 | 4 | @include b(collsape-item) { 5 | height: 50px; 6 | padding: 0 8px; 7 | overflow: hidden; 8 | box-sizing: border-box; 9 | transition: height .3s; 10 | border-bottom: $--border-base; 11 | 12 | @include e(title) { 13 | height: 48px; 14 | line-height: 48px; 15 | background-color: $--color-white; 16 | color: $--color-text-primary; 17 | outline: none; 18 | font-size: 14px; 19 | font-weight: 500; 20 | cursor: pointer; 21 | overflow: hidden; 22 | } 23 | 24 | @include e(panel) { 25 | padding: 2px 0 25px; 26 | color: $--color-text-regular; 27 | } 28 | 29 | @include e(drop-icon) { 30 | line-height: 48px; 31 | float: right; 32 | width: 20px; 33 | text-align: center; 34 | transition: all .3s; 35 | } 36 | 37 | @include when(active) { 38 | > .t-collsape-item__title > .t-collsape-item__drop-icon{ 39 | transform: rotate(90deg); 40 | } 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /src/styles/collsape.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins/mixins"; 3 | 4 | @include b(collsape) { 5 | width: 100%; 6 | border: $--border-base; 7 | border-bottom: none; 8 | box-sizing: border-box; 9 | border-radius: 5px; 10 | box-shadow: $--box-shadow-base; 11 | } 12 | -------------------------------------------------------------------------------- /src/styles/common.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins/mixins"; 3 | 4 | @include b(text){ 5 | @include m(primary){ 6 | color: $--color-primary; 7 | } 8 | @include m(info){ 9 | color: $--color-info; 10 | } 11 | @include m(success){ 12 | color: $--color-success; 13 | } 14 | @include m(warning){ 15 | color: $--color-warning; 16 | } 17 | @include m(danger){ 18 | color: $--color-danger; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/styles/content.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | 3 | @include b(content) { 4 | flex: 1; 5 | overflow-y: auto; 6 | overflow-x: hidden; 7 | box-sizing: border-box; 8 | padding: $--content-padding; 9 | } 10 | -------------------------------------------------------------------------------- /src/styles/dropdown-item.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins/mixins"; 3 | 4 | @include b(dropdown-item) { 5 | cursor: pointer; 6 | display: block; 7 | padding: 0 10px; 8 | height: 30px; 9 | min-width: 100px; 10 | width: 100%; 11 | line-height: 40px; 12 | box-sizing: border-box; 13 | color: $--color-text-regular; 14 | user-select: none; 15 | position: relative; 16 | 17 | a { 18 | color: $--color-text-regular; 19 | &:hover { 20 | color: $--color-primary; 21 | } 22 | } 23 | 24 | &:hover { 25 | color: $--color-primary; 26 | background-color: $--color-primary-lighter; 27 | } 28 | 29 | @include e(icon) { 30 | width: 12px; 31 | height: 14px; 32 | display: inline-block; 33 | @include utils-position-center(a); 34 | right: 10px; 35 | left: auto; 36 | } 37 | 38 | @include when(disabled) { 39 | cursor: not-allowed; 40 | color: $--color-text-placeholder; 41 | 42 | &:hover { 43 | background-color: inherit; 44 | } 45 | } 46 | 47 | @include m(divided) { 48 | border-top: $--border-base; 49 | } 50 | 51 | .t-menu__link { 52 | display: block; 53 | width: 100%; 54 | height: 100%; 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /src/styles/dropdown.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins/mixins"; 3 | 4 | @include b(dropdown) { 5 | display: inline-block; 6 | transition: all .3s; 7 | 8 | @include e(menu) { 9 | position: fixed; 10 | display: inline-block; 11 | background-color: #fff; 12 | z-index: $--select-list-index; 13 | border-radius: 1px; 14 | box-shadow: 0 2px 10px 1px rgba(0,0,0,.2); 15 | transition: transform .2s ease-in, opacity .2s ease-in; 16 | 17 | .t-dropdown { 18 | width: 100%; 19 | float: left; 20 | position: relative; 21 | } 22 | 23 | &::-webkit-scrollbar{ 24 | display: none; 25 | } 26 | 27 | .t-dropdown-item { 28 | height: 40px; 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/styles/footer.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | 3 | @include b(footer) { 4 | overflow: auto; 5 | box-sizing: border-box; 6 | min-height: 60px; 7 | } 8 | 9 | -------------------------------------------------------------------------------- /src/styles/form.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins/mixins"; 3 | @import "mixins/input"; 4 | 5 | @include b(form) { 6 | 7 | } 8 | -------------------------------------------------------------------------------- /src/styles/header.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | 3 | @include b(header){ 4 | padding: $--header-padding; 5 | box-sizing: border-box; 6 | } 7 | -------------------------------------------------------------------------------- /src/styles/layout.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | 3 | @include b(layout){ 4 | box-sizing: border-box; 5 | display: flex; 6 | flex-direction: column; 7 | flex: 1; 8 | min-width: 1px; 9 | } 10 | -------------------------------------------------------------------------------- /src/styles/loading.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins/mixins"; 3 | @import "utils/utils"; 4 | @import "mixins/loading"; 5 | 6 | @include b(loading) { 7 | 8 | @include e(mask) { 9 | @include loading-mask(); 10 | background-color: $--loading-mask-background-color; 11 | } 12 | 13 | @include e(wrapper) { 14 | @include loading-mask(); 15 | } 16 | 17 | @include e(container) { 18 | transition: all .2s ease-in; 19 | overflow: hidden; 20 | width: 200px; 21 | height: 100px; 22 | line-height: 50px; 23 | text-align: center; 24 | position: absolute; 25 | top: 0; 26 | left: 0; 27 | right: 0; 28 | bottom: 0; 29 | margin: auto; 30 | background-color: inherit; 31 | border-radius: $--loading-border-radius; 32 | box-sizing: border-box; 33 | padding: 10px; 34 | } 35 | 36 | @include e(icon) { 37 | font-size: 3em; 38 | color: $--color-primary; 39 | } 40 | 41 | @include e(text) { 42 | color: $--color-text-regular; 43 | } 44 | 45 | @include m(inbox) { 46 | position: absolute; 47 | width: 100%; 48 | height: 100%; 49 | top: 0; 50 | left: 0; 51 | 52 | .t-loading__mask, 53 | .t-loading__wrapper { 54 | z-index: 1; 55 | position: absolute; 56 | } 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /src/styles/mixins/dialog.scss: -------------------------------------------------------------------------------- 1 | @import "../variables"; 2 | 3 | @mixin dialog-size($padding-vertical, $padding-horizontal, $font-size) { 4 | padding: $padding-vertical $padding-horizontal; 5 | font-size: $font-size; 6 | box-sizing: content-box; 7 | } 8 | 9 | @mixin dialog-mask(){ 10 | transition: all .3s ease-in; 11 | opacity: 0; 12 | z-index: $--dialog-mask-index; 13 | position: fixed; 14 | top: 0; 15 | left: 0; 16 | right: 0; 17 | bottom: 0; 18 | } 19 | -------------------------------------------------------------------------------- /src/styles/mixins/divider.scss: -------------------------------------------------------------------------------- 1 | @mixin divider-border-style($style) { 2 | &, 3 | &:before, 4 | &:after { 5 | border-top-style: $style !important; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/styles/mixins/drop.scss: -------------------------------------------------------------------------------- 1 | @mixin drop-variant() { 2 | z-index: $--select-list-index; 3 | transition: all .2s; 4 | width: auto; 5 | min-width: 155px; 6 | position: relative; 7 | background-color: #fff; 8 | line-height: 40px; 9 | list-style: none; 10 | height: 200px; 11 | max-height: 200px; 12 | overflow: scroll; 13 | float: left; 14 | display: inline-block; 15 | border: none; 16 | } 17 | 18 | @mixin drop-arrow() { 19 | @include e(arrow-up) { 20 | position: absolute; 21 | display: inline-block; 22 | width: 0; 23 | height: 0; 24 | content: ''; 25 | border-style: solid; 26 | border-width: 5px; 27 | border-color: #fff #fff transparent transparent; 28 | -webkit-transform: rotate(-45deg); 29 | transform: rotate(-45deg); 30 | -webkit-box-shadow: 1px -1px 1px #ccc; 31 | box-shadow: 1px -1px 1px #ccc; 32 | top: -3px; 33 | left: 25px; 34 | z-index: $--select-list-index + 1; 35 | transition: opacity .2s; 36 | 37 | @include m(right) { 38 | right: 25px; 39 | left: auto; 40 | } 41 | 42 | @include m(top) { 43 | top: auto; 44 | bottom: -4px; 45 | transform: rotate(135deg); 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /src/styles/mixins/index.scss: -------------------------------------------------------------------------------- 1 | @import "mixins"; 2 | @import "button"; 3 | @import "dialog"; 4 | -------------------------------------------------------------------------------- /src/styles/mixins/loading.scss: -------------------------------------------------------------------------------- 1 | @import "../variables"; 2 | 3 | @mixin loading-mask(){ 4 | transition: all .2s ease-out; 5 | z-index: $--dialog-mask-index; 6 | position: fixed; 7 | top: 0; 8 | left: 0; 9 | right: 0; 10 | bottom: 0; 11 | } 12 | 13 | @mixin loading-inbox-mask(){ 14 | transition: all .2s ease-out; 15 | z-index: $--dialog-mask-index; 16 | position: absolute; 17 | top: 0; 18 | left: 0; 19 | right: 0; 20 | bottom: 0; 21 | } 22 | -------------------------------------------------------------------------------- /src/styles/mixins/mixins.scss: -------------------------------------------------------------------------------- 1 | @import "../utils/conf"; 2 | @import "../variables"; 3 | 4 | @mixin b($block) { 5 | $B: $prefix+'-'+$block !global; 6 | 7 | .#{$B} { 8 | @content; 9 | } 10 | } 11 | 12 | @mixin e($element) { 13 | $E: $element !global; 14 | $selector: &; 15 | $currentSelector: ""; 16 | @each $unit in $element { 17 | $currentSelector: #{$currentSelector + "." + $B + $element-separator + $unit + ","}; 18 | } 19 | 20 | @at-root { 21 | #{$currentSelector} { 22 | @content; 23 | } 24 | } 25 | } 26 | 27 | @mixin m($modifier) { 28 | $selector: &; 29 | $currentSelector: ""; 30 | @each $unit in $modifier { 31 | $currentSelector: #{$currentSelector + & + $modifier-separator + $unit + ","}; 32 | } 33 | 34 | @at-root { 35 | #{$currentSelector} { 36 | @content; 37 | } 38 | } 39 | } 40 | 41 | @mixin when($state) { 42 | @at-root { 43 | &.#{$state-prefix + $state} { 44 | @content; 45 | } 46 | } 47 | } 48 | 49 | @mixin res($key, $map: $--breakpoints) { 50 | @if map-has-key($map, $key) { 51 | @media only screen and #{inspect(map-get($map, $key))} { 52 | @content; 53 | } 54 | } @else { 55 | @warn "Undefeined points: `#{$map}`"; 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /src/styles/mixins/popover.scss: -------------------------------------------------------------------------------- 1 | @mixin theme-variant ($theme-color){ 2 | background-color: $theme-color; 3 | color: $--color-white; 4 | border-color: $theme-color; 5 | 6 | .t-popover__arrow { 7 | background-color: $theme-color; 8 | border-color: $theme-color; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /src/styles/mixins/select.scss: -------------------------------------------------------------------------------- 1 | @mixin select-input-variant{ 2 | display: inline-block; 3 | box-sizing: border-box; 4 | position: relative; 5 | cursor: pointer; 6 | overflow: hidden; 7 | background-color: $--select-fill-color; 8 | border-radius: $--select-input-radius; 9 | border: $--border-base; 10 | transition: border-color .2s, box-shadow .2s, transform .2s; 11 | 12 | &:hover { 13 | border-color: $--select-input-hover-border-color; 14 | //box-shadow: $--box-shadow-base; 15 | //transform: translateY(-2px); 16 | } 17 | 18 | @include when(focus) { 19 | border-color: $--color-primary; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/styles/mixins/step.scss: -------------------------------------------------------------------------------- 1 | @mixin step-type-variant($color) { 2 | .t-step-item__content.is-active .t-step-item__title, 3 | .t-step-item__content.is-active .t-step-item__desc, 4 | .t-step-item__logo.is-active, 5 | .t-step-item__logo.is-active span { 6 | color: $color; 7 | } 8 | .t-step-item__logo.is-active span { 9 | border-color: $color; 10 | } 11 | .t-step-item__line.is-active { 12 | background-color: $color; 13 | } 14 | } 15 | 16 | -------------------------------------------------------------------------------- /src/styles/mixins/table.scss: -------------------------------------------------------------------------------- 1 | @mixin table-row-variant() { 2 | display: table-row; 3 | box-sizing: border-box; 4 | } 5 | 6 | @mixin table-fixed-variant() { 7 | z-index: $--table-fixed-index; 8 | position: absolute; 9 | height: 100%; 10 | overflow: hidden; 11 | background-color: #fff; 12 | transition: box-shadow .2s; 13 | 14 | @include when(shadow) { 15 | -webkit-box-shadow: 0 0 10px rgba(0,0,0,.12); 16 | box-shadow: 0 0 10px rgba(0,0,0,.12); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/styles/option-group.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins/mixins"; 3 | 4 | @include b(option-group) { 5 | & + .t-option-group { 6 | border-top: 1px solid #eee; 7 | } 8 | @include e(label) { 9 | line-height: 30px; 10 | padding-left: 20px; 11 | padding-top: 10px; 12 | font-weight: normal; 13 | font-size: 12px; 14 | color: #999; 15 | 16 | @include when(disabled){ 17 | cursor: pointer; 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/styles/option.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins/mixins"; 3 | 4 | @include b(option) { 5 | cursor: pointer; 6 | user-select: none; 7 | padding: 0 20px; 8 | 9 | @include e(check) { 10 | float: right; 11 | line-height: 40px; 12 | } 13 | 14 | &:hover { 15 | background-color: lighten(#f5f7fa, 1.5%); 16 | color: $--color-primary; 17 | } 18 | 19 | @include when(selected) { 20 | color: $--color-primary; 21 | //background-color: #fafafa; 22 | } 23 | 24 | @include e(check) { 25 | transition: all .2s; 26 | transform: scale(0.7); 27 | } 28 | 29 | @include when(focus) { 30 | background-color: #f5f7fa; 31 | color: $--color-primary; 32 | } 33 | 34 | @include when(disabled) { 35 | background-color: #fff; 36 | cursor: not-allowed; 37 | color: $--color-text-placeholder; 38 | user-select: none; 39 | &:hover { 40 | background-color: #fff; 41 | color: $--color-text-placeholder; 42 | } 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/styles/row.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins/mixins"; 3 | @import "utils/utils"; 4 | 5 | @include b(row) { 6 | position: relative; 7 | box-sizing: border-box; 8 | min-height: $--row-min-height; 9 | margin-bottom: $--row-margin-bottom; 10 | @include utils-clearfix; 11 | 12 | @include m(flex) { 13 | display: flex; 14 | &:before, 15 | &:after { 16 | display: none; 17 | } 18 | 19 | @include when(justify-center) { 20 | justify-content: center; 21 | } 22 | @include when(justify-end) { 23 | justify-content: flex-end; 24 | } 25 | @include when(justify-space-between) { 26 | justify-content: space-between; 27 | } 28 | @include when(justify-space-around) { 29 | justify-content: space-around; 30 | } 31 | 32 | @include when(align-middle) { 33 | align-items: center; 34 | } 35 | @include when(align-bottom) { 36 | align-items: flex-end; 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/styles/step.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins/mixins"; 3 | @import "mixins/step"; 4 | 5 | @include b(step) { 6 | @include when(horizon) { 7 | display: flex; 8 | } 9 | 10 | @include m(info) { 11 | @include step-type-variant($--color-info) 12 | } 13 | 14 | @include m(success) { 15 | @include step-type-variant($--color-success) 16 | } 17 | 18 | @include m(warning) { 19 | @include step-type-variant($--color-warning) 20 | } 21 | 22 | @include m(danger) { 23 | @include step-type-variant($--color-danger) 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/styles/tab-panel.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins/mixins"; 3 | 4 | @include b(tab-panel) { 5 | @include utils-clearfix(); 6 | width: 100%; 7 | height: auto; 8 | display: inline-block; 9 | box-sizing: border-box; 10 | } 11 | -------------------------------------------------------------------------------- /src/styles/tooltip.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/victor0210/TUI/cc02731c6b37f624ce0deb047fce212950f4326e/src/styles/tooltip.scss -------------------------------------------------------------------------------- /src/styles/tree.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/victor0210/TUI/cc02731c6b37f624ce0deb047fce212950f4326e/src/styles/tree.scss -------------------------------------------------------------------------------- /src/styles/utils/conf.scss: -------------------------------------------------------------------------------- 1 | $prefix: 't'; 2 | $element-separator: '__'; 3 | $modifier-separator: '--'; 4 | $state-prefix: 'is-' 5 | -------------------------------------------------------------------------------- /src/styles/utils/utils.scss: -------------------------------------------------------------------------------- 1 | @mixin utils-user-select($value) { 2 | -moz-user-select: $value; 3 | -webkit-user-select: $value; 4 | -ms-user-select: $value; 5 | } 6 | 7 | 8 | @mixin utils-clearfix { 9 | $selector: &; 10 | 11 | @at-root { 12 | #{$selector}::before, 13 | #{$selector}::after { 14 | display: table; 15 | content: ""; 16 | } 17 | #{$selector}::after { 18 | clear: both 19 | } 20 | } 21 | } 22 | 23 | @mixin utils-vertical-center { 24 | $selector: &; 25 | 26 | @at-root { 27 | #{$selector}::after { 28 | display: inline-block; 29 | content: ""; 30 | height: 100%; 31 | vertical-align: middle 32 | } 33 | } 34 | } 35 | 36 | @mixin utils-ellipsis { 37 | overflow: hidden; 38 | text-overflow: ellipsis; 39 | white-space: nowrap; 40 | } 41 | 42 | @mixin utils-position-center($t) { 43 | @if($t == f){ 44 | position: fixed; 45 | } @else if($t == a) { 46 | position: absolute; 47 | } @else { 48 | @error "position type must be 'a'(absolute) or f(fixed)" 49 | } 50 | top: 0; 51 | left: 0; 52 | right: 0; 53 | bottom: 0; 54 | margin: auto; 55 | } 56 | -------------------------------------------------------------------------------- /src/styles/validate-icon.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins/mixins"; 3 | 4 | @include b(validate-icon) { 5 | z-index: 1; 6 | position: absolute; 7 | top: 0; 8 | bottom: 0; 9 | right: 9px; 10 | margin: auto; 11 | width: 16px; 12 | height: 16px; 13 | line-height: 16px; 14 | background-color: $--color-white; 15 | text-align: center; 16 | -webkit-transition: .3s; 17 | transition: .3s; 18 | 19 | @include m(success) { 20 | color: $--color-success; 21 | } 22 | 23 | @include m(error) { 24 | color: $--color-danger; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/styles/webfonts/fa-brands-400.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/victor0210/TUI/cc02731c6b37f624ce0deb047fce212950f4326e/src/styles/webfonts/fa-brands-400.eot -------------------------------------------------------------------------------- /src/styles/webfonts/fa-brands-400.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/victor0210/TUI/cc02731c6b37f624ce0deb047fce212950f4326e/src/styles/webfonts/fa-brands-400.ttf -------------------------------------------------------------------------------- /src/styles/webfonts/fa-brands-400.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/victor0210/TUI/cc02731c6b37f624ce0deb047fce212950f4326e/src/styles/webfonts/fa-brands-400.woff -------------------------------------------------------------------------------- /src/styles/webfonts/fa-brands-400.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/victor0210/TUI/cc02731c6b37f624ce0deb047fce212950f4326e/src/styles/webfonts/fa-brands-400.woff2 -------------------------------------------------------------------------------- /src/styles/webfonts/fa-regular-400.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/victor0210/TUI/cc02731c6b37f624ce0deb047fce212950f4326e/src/styles/webfonts/fa-regular-400.eot -------------------------------------------------------------------------------- /src/styles/webfonts/fa-regular-400.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/victor0210/TUI/cc02731c6b37f624ce0deb047fce212950f4326e/src/styles/webfonts/fa-regular-400.ttf -------------------------------------------------------------------------------- /src/styles/webfonts/fa-regular-400.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/victor0210/TUI/cc02731c6b37f624ce0deb047fce212950f4326e/src/styles/webfonts/fa-regular-400.woff -------------------------------------------------------------------------------- /src/styles/webfonts/fa-regular-400.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/victor0210/TUI/cc02731c6b37f624ce0deb047fce212950f4326e/src/styles/webfonts/fa-regular-400.woff2 -------------------------------------------------------------------------------- /src/styles/webfonts/fa-solid-900.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/victor0210/TUI/cc02731c6b37f624ce0deb047fce212950f4326e/src/styles/webfonts/fa-solid-900.eot -------------------------------------------------------------------------------- /src/styles/webfonts/fa-solid-900.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/victor0210/TUI/cc02731c6b37f624ce0deb047fce212950f4326e/src/styles/webfonts/fa-solid-900.ttf -------------------------------------------------------------------------------- /src/styles/webfonts/fa-solid-900.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/victor0210/TUI/cc02731c6b37f624ce0deb047fce212950f4326e/src/styles/webfonts/fa-solid-900.woff -------------------------------------------------------------------------------- /src/styles/webfonts/fa-solid-900.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/victor0210/TUI/cc02731c6b37f624ce0deb047fce212950f4326e/src/styles/webfonts/fa-solid-900.woff2 -------------------------------------------------------------------------------- /src/utils/config.js: -------------------------------------------------------------------------------- 1 | export const prefixClass = 't-' 2 | -------------------------------------------------------------------------------- /static/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/victor0210/TUI/cc02731c6b37f624ce0deb047fce212950f4326e/static/.gitkeep -------------------------------------------------------------------------------- /test/unit/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "jest": true 4 | }, 5 | "globals": { 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /test/unit/jest.conf.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | 3 | module.exports = { 4 | rootDir: path.resolve(__dirname, '../../'), 5 | moduleFileExtensions: [ 6 | 'js', 7 | 'json', 8 | 'vue' 9 | ], 10 | moduleNameMapper: { 11 | '^@/(.*)$': '/src/$1' 12 | }, 13 | transform: { 14 | '^.+\\.js$': '/node_modules/babel-jest', 15 | '.*\\.(vue)$': '/node_modules/vue-jest' 16 | }, 17 | snapshotSerializers: ['/node_modules/jest-serializer-vue'], 18 | setupFiles: ['/test/unit/setup'], 19 | mapCoverage: true, 20 | coverageDirectory: '/test/unit/coverage', 21 | collectCoverageFrom: [ 22 | 'src/**/*.{js,vue}', 23 | '!src/main.js', 24 | '!src/router/index.js', 25 | '!**/node_modules/**' 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /test/unit/setup.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | 3 | Vue.config.productionTip = false 4 | -------------------------------------------------------------------------------- /test/unit/specs/HelloWorld.spec.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import HelloWorld from '@/components/HelloWorld' 3 | 4 | describe('HelloWorld.vue', () => { 5 | it('should render correct contents', () => { 6 | const Constructor = Vue.extend(HelloWorld) 7 | const vm = new Constructor().$mount() 8 | expect(vm.$el.querySelector('.hello h1').textContent) 9 | .toEqual('Welcome to Your Vue.js App') 10 | }) 11 | }) 12 | --------------------------------------------------------------------------------