├── .cz-config.js ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .husky ├── commit-msg ├── common.sh ├── lint-staged.config.js └── pre-commit ├── .ls-lint.yml ├── .prettierignore ├── .stylelintignore ├── .versionrc.js ├── CHANGELOG.md ├── README.md ├── babel.config.js ├── build ├── rollup-build.js ├── rollup-creat-Config.js └── utils.js ├── commitlint.config.js ├── compoments.json ├── components.d.ts ├── config ├── alias.js └── rollup-config.js ├── directoryList.md ├── docs ├── .vuepress │ ├── components │ │ ├── card │ │ │ ├── demo1.vue │ │ │ ├── demo2.vue │ │ │ ├── demo3.vue │ │ │ └── demo4.vue │ │ ├── press-row.vue │ │ └── source-block.vue │ ├── config.js │ ├── enhanceApp.js │ ├── public │ │ ├── js │ │ │ └── constant.js │ │ ├── logo.png │ │ └── logo.svg │ ├── sidebarRoutes │ │ ├── business.js │ │ ├── developer.js │ │ ├── element.js │ │ └── guide.js │ └── styles │ │ ├── developer │ │ └── update-theme.styl │ │ ├── element-ui │ │ ├── alert.styl │ │ ├── avatar.styl │ │ ├── badge.styl │ │ ├── border.styl │ │ ├── button.styl │ │ ├── calendar.styl │ │ ├── card.styl │ │ ├── carousel.styl │ │ ├── cascader.styl │ │ ├── collapse.styl │ │ ├── color-picker.styl │ │ ├── color.styl │ │ ├── container.styl │ │ ├── date-picker.styl │ │ ├── datetime-picker.styl │ │ ├── descriptions.styl │ │ ├── dialog.styl │ │ ├── divider.styl │ │ ├── drawer.styl │ │ ├── dropdown.styl │ │ ├── form.styl │ │ ├── i18n.styl │ │ ├── icon.styl │ │ ├── image.styl │ │ ├── infinite-scroll.styl │ │ ├── input-number.styl │ │ ├── input.styl │ │ ├── layout.styl │ │ ├── loading.styl │ │ ├── menu.styl │ │ ├── pagination.styl │ │ ├── popover.styl │ │ ├── progress.styl │ │ ├── rate.styl │ │ ├── select.styl │ │ ├── skeleton.styl │ │ ├── slider.styl │ │ ├── switch.styl │ │ ├── table.styl │ │ ├── tag.styl │ │ ├── time-picker.styl │ │ ├── timeline.styl │ │ ├── tooltip.styl │ │ ├── transfer.styl │ │ ├── transition.styl │ │ ├── tree.styl │ │ ├── typography.styl │ │ └── upload.styl │ │ ├── index.styl │ │ └── theme │ │ ├── code │ │ ├── base.styl │ │ ├── dark.styl │ │ ├── helper.styl │ │ ├── index.styl │ │ └── light.styl │ │ ├── fonts │ │ └── crimson.css │ │ ├── index.styl │ │ ├── layout.styl │ │ ├── normalize.styl │ │ ├── palette.styl │ │ ├── plugins │ │ ├── index.styl │ │ ├── nprogress.styl │ │ └── search.styl │ │ ├── theme-color.styl │ │ ├── theme.styl │ │ └── vars.styl ├── README.md ├── developer │ ├── build-advance.md │ ├── changelog.md │ ├── contributor.md │ ├── custom-theme.md │ ├── development-guide.md │ ├── installation.md │ ├── question.md │ ├── quickstart.md │ ├── sass.md │ ├── specify-build.md │ └── update-theme.md ├── guide │ ├── button.md │ ├── concept.md │ ├── datePicker.md │ ├── instroduce.md │ └── time-picker.md └── packages │ ├── business │ ├── cropper.md │ └── rich-text.md │ └── element │ ├── alert.md │ ├── avatar.md │ ├── backtop.md │ ├── badge.md │ ├── border.md │ ├── breadcrumb.md │ ├── button.md │ ├── calendar.md │ ├── card.md │ ├── carousel.md │ ├── cascader.md │ ├── checkbox.md │ ├── collapse.md │ ├── color-picker.md │ ├── color.md │ ├── container.md │ ├── custom-theme.md │ ├── date-picker.md │ ├── datetime-picker.md │ ├── descriptions.md │ ├── dialog.md │ ├── divider.md │ ├── drawer.md │ ├── dropdown.md │ ├── empty.md │ ├── form.md │ ├── i18n.md │ ├── icon.md │ ├── image.md │ ├── infiniteScroll.md │ ├── input-number.md │ ├── input.md │ ├── installation.md │ ├── layout.md │ ├── link.md │ ├── loading.md │ ├── menu.md │ ├── message-box.md │ ├── message.md │ ├── notification.md │ ├── page-header.md │ ├── pagination.md │ ├── popconfirm.md │ ├── popover.md │ ├── progress.md │ ├── quickstart.md │ ├── radio.md │ ├── rate.md │ ├── result.md │ ├── select.md │ ├── skeleton.md │ ├── slider.md │ ├── steps.md │ ├── switch.md │ ├── table.md │ ├── tabs.md │ ├── tag.md │ ├── time-picker.md │ ├── timeline.md │ ├── tooltip.md │ ├── transfer.md │ ├── transition.md │ ├── tree.md │ ├── typography.md │ └── upload.md ├── examples ├── assets │ ├── json │ │ ├── dl-icon.json │ │ └── el-icon.json │ ├── logo.png │ └── logo.svg ├── main.js └── src │ ├── App.vue │ ├── layout │ ├── components │ │ ├── AppMain.vue │ │ ├── index.js │ │ └── sidebar │ │ │ └── index.vue │ └── index.vue │ ├── router │ └── index.js │ ├── utils │ └── validate.js │ └── views │ ├── button │ ├── demo │ │ └── demo1.vue │ └── index.vue │ ├── checkbox │ ├── demo │ │ └── demo1.vue │ └── index.vue │ ├── datePicker │ ├── components │ │ ├── datePicker1.vue │ │ ├── datePicker2.vue │ │ ├── datePicker3.vue │ │ ├── datePicker4.vue │ │ ├── datePicker5.vue │ │ └── datePicker6.vue │ └── index.vue │ ├── dialog │ ├── demo │ │ └── demo1.vue │ └── index.vue │ ├── drawer │ ├── demo │ │ └── demo1.vue │ └── index.vue │ ├── empty │ ├── demo │ │ └── demo1.vue │ └── index.vue │ ├── form │ ├── demo │ │ ├── demo1.vue │ │ ├── demo2.vue │ │ ├── demo3.vue │ │ ├── demo4.vue │ │ ├── demo5.vue │ │ ├── demo6.vue │ │ ├── demo7.vue │ │ └── demo8.vue │ └── index.vue │ ├── icon │ ├── demo │ │ └── demo1.vue │ └── index.vue │ ├── input │ ├── demo │ │ └── demo1.vue │ └── index.vue │ ├── pagination │ ├── demo │ │ └── demo1.vue │ └── index.vue │ ├── popconfirm │ ├── demo │ │ └── demo1.vue │ └── index.vue │ ├── popover │ ├── demo │ │ └── demo1.vue │ └── index.vue │ ├── radio │ ├── demo │ │ └── demo1.vue │ └── index.vue │ ├── select │ ├── demo │ │ └── demo1.vue │ └── index.vue │ ├── table │ ├── demo │ │ ├── align-table.vue │ │ ├── basis-table.vue │ │ ├── border-table.vue │ │ ├── custom-index-table.vue │ │ ├── edit-dialog-table.vue │ │ ├── edit-table.vue │ │ ├── empty-table.vue │ │ ├── expand-row-table.vue │ │ ├── filter-table.vue │ │ ├── fixed-column-table.vue │ │ ├── fixed-header-table.vue │ │ ├── fluid-height-table.vue │ │ ├── footer-total-table.vue │ │ ├── merge-row-column-table.vue │ │ ├── merge-table.vue │ │ ├── multi-header-table.vue │ │ ├── multiple-table.vue │ │ ├── pagination-table.vue │ │ ├── radio-table.vue │ │ ├── render-header-table.vue │ │ ├── render-table.vue │ │ ├── sort-table.vue │ │ ├── status-table.vue │ │ ├── stripe-table.vue │ │ └── tree-table.vue │ └── index.vue │ ├── tag │ ├── demo │ │ └── demo1.vue │ └── index.vue │ ├── timePicker │ ├── components │ │ ├── timePicker1.vue │ │ ├── timePicker2.vue │ │ ├── timePicker3.vue │ │ └── timePicker4.vue │ └── index.vue │ └── tooltip │ ├── demo │ └── demo1.vue │ └── index.vue ├── gulpfile.js ├── index.html ├── jsconfig.json ├── package-lock.json ├── package.json ├── packages └── element-ui │ ├── button │ ├── index.js │ └── src │ │ └── button.vue │ ├── checkbox-button │ └── index.js │ ├── checkbox-group │ └── index.js │ ├── checkbox │ ├── index.js │ └── src │ │ ├── checkbox-button.vue │ │ ├── checkbox-group.vue │ │ └── checkbox.vue │ ├── date-picker │ ├── index.js │ └── src │ │ └── date-picker.vue │ ├── dialog │ ├── index.js │ └── src │ │ └── dialog.vue │ ├── drawer │ ├── index.js │ └── src │ │ └── drawer.vue │ ├── empty │ ├── index.js │ └── src │ │ └── empty.vue │ ├── form-item │ └── index.js │ ├── form │ ├── index.js │ └── src │ │ ├── form-item.vue │ │ └── form.vue │ ├── icon │ ├── index.js │ └── src │ │ └── icon.vue │ ├── input │ ├── index.js │ └── src │ │ └── input.vue │ ├── pagination │ ├── index.js │ └── src │ │ └── pagination.vue │ ├── popconfirm │ ├── index.js │ └── src │ │ └── popconfirm.vue │ ├── popover │ ├── index.js │ └── src │ │ └── popover.vue │ ├── radio-button │ └── index.js │ ├── radio-group │ └── index.js │ ├── radio │ ├── index.js │ └── src │ │ ├── radio-button.vue │ │ ├── radio-group.vue │ │ └── radio.vue │ ├── select │ ├── index.js │ └── src │ │ └── select.vue │ ├── table-column │ └── index.js │ ├── table │ ├── index.js │ └── src │ │ ├── column.vue │ │ ├── forced.jsx │ │ ├── render.vue │ │ └── table.vue │ ├── tag-group │ └── index.js │ ├── tag │ ├── index.js │ └── src │ │ ├── tag-group.vue │ │ └── tag.vue │ ├── time-picker │ ├── index.js │ └── src │ │ └── time-picker.vue │ └── tooltip │ ├── index.js │ └── src │ └── tooltip.vue ├── play ├── .gitignore ├── components.d.ts ├── index.html ├── package-lock.json ├── package.json ├── public │ └── vite.svg ├── src │ ├── App.vue │ └── main.js ├── vite.config.js └── yarn.lock ├── prettier.config.js ├── scripts └── docs.sh ├── src ├── images │ ├── default-hospital.png │ ├── default_dep.png │ ├── default_doctor.png │ ├── default_user.png │ └── empty.png ├── index.js └── utils │ ├── update-element-theme.js │ ├── update-ui-theme.js │ └── use-namespace.js ├── stylelint.config.js ├── styles └── src │ ├── common │ └── var.scss │ ├── element-ui │ ├── button.scss │ ├── checkbox-button.scss │ ├── checkbox.scss │ ├── datePicker.scss │ ├── dialog.scss │ ├── drawer.scss │ ├── empty.scss │ ├── icon.scss │ ├── input.scss │ ├── pagination.scss │ ├── popover.scss │ ├── radio-button.scss │ ├── radio-group.scss │ ├── radio.scss │ ├── select.scss │ ├── table.scss │ ├── tag-group.scss │ ├── tag.scss │ ├── time-picker.scss │ └── tooltip.scss │ ├── fonts │ ├── iconfont.ttf │ └── iconfont.woff │ ├── iconfont.scss │ ├── index.scss │ ├── mixins │ ├── _button.scss │ ├── _var.scss │ ├── config.scss │ ├── function.scss │ ├── mixins.scss │ └── utils.scss │ └── var.scss └── vite.config.js /.editorconfig: -------------------------------------------------------------------------------- 1 | # 表示是最顶层的 EditorConfig 配置文件 2 | root = true 3 | 4 | [*] # 表示所有文件适用 5 | charset = utf-8 # 设置文件字符集为 utf-8 6 | indent_style = space # 缩进风格（tab | space） 7 | indent_size = 2 # 缩进大小 8 | end_of_line = lf # 控制换行类型(lf | cr | crlf) 9 | trim_trailing_whitespace = true # 去除行首的任意空白字符 10 | insert_final_newline = true # 始终在文件末尾插入一个新行 11 | 12 | [*.md] # 表示仅 md 文件适用以下规则 13 | max_line_length = off 14 | trim_trailing_whitespace = false 15 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | *.sh 2 | node_modules 3 | *.md 4 | *.woff 5 | *.ttf 6 | .vscode 7 | .idea 8 | dist 9 | /public 10 | /docs 11 | .husky 12 | .local 13 | /bin 14 | /lib 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | .temp 4 | .cache 5 | /lib 6 | /dist 7 | /styles/theme/** 8 | 9 | # local env files 10 | .env.local 11 | .env.*.local 12 | 13 | # Log files 14 | npm-debug.log* 15 | yarn-debug.log* 16 | yarn-error.log* 17 | pnpm-debug.log* 18 | 19 | # Editor directories and files 20 | .idea 21 | .vscode 22 | *.suo 23 | *.ntvs* 24 | *.njsproj 25 | *.sln 26 | *.sw? 27 | *.tgz 28 | -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | 3 | # shellcheck source=./_/husky.sh 4 | . "$(dirname "$0")/_/husky.sh" 5 | 6 | npx --no-install commitlint --edit "$1" 7 | -------------------------------------------------------------------------------- /.husky/common.sh: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | # 解决Windows 上通过 Git Bash ( stdin is not a tty)使用 Yarn 时，Git 钩子可能会失败 3 | command_exists () { 4 | command -v "$1" >/dev/null 2>&1 5 | } 6 | 7 | # Workaround for Windows 10, Git Bash and Yarn 8 | if command_exists winpty && test -t 1; then 9 | exec < /dev/tty 10 | fi 11 | -------------------------------------------------------------------------------- /.husky/lint-staged.config.js: -------------------------------------------------------------------------------- 1 | // .husky/lint-staged.config.js 2 | module.exports = { 3 | 'packages/**.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'], 4 | '{!(package)*.json,*.code-snippets,.!(browserslist)*rc}': ['prettier --write--parser json'], 5 | 'package.json': ['prettier --write'], 6 | 'packages/***.vue': ['eslint --fix', 'prettier --write', 'stylelint --fix'], 7 | 'packages/***.{scss,less,styl,html}': ['stylelint --fix', 'prettier --write'], 8 | }; 9 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | . "$(dirname "$0")/common.sh" 4 | 5 | [ -n "$CI" ] && exit 0 6 | 7 | npm run lint:ls-lint 8 | 9 | # Format and submit code according to lintstagedrc.js configuration 10 | npm run lint:lint-staged 11 | -------------------------------------------------------------------------------- /.ls-lint.yml: -------------------------------------------------------------------------------- 1 | ls: 2 | packages/**: 3 | .js: kebab-case 4 | .ts: kebab-case 5 | .d.ts: kebab-case 6 | 7 | ignore: 8 | - .git 9 | - node_modules 10 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | **/*.svg 2 | **/*.ejs 3 | **/*.html 4 | package.json 5 | -------------------------------------------------------------------------------- /.stylelintignore: -------------------------------------------------------------------------------- 1 | /dist/* 2 | /public/* 3 | /docs/* 4 | /lib/* 5 | /styles/** 6 | -------------------------------------------------------------------------------- /.versionrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | skip: { 3 | tag: true 4 | }, 5 | types: [ 6 | { type: 'feat', section: '✨ Features | 新功能' }, 7 | { type: 'fix', section: '🐛 Bug Fixes | Bug 修复' }, 8 | { type: 'init', section: '🎉 Init | 初始化' }, 9 | { type: 'docs', section: '✏️ Documentation | 文档' }, 10 | { type: 'style', section: '💄 Styles | 风格' }, 11 | { type: 'refactor', section: '♻️ Code Refactoring | 代码重构' }, 12 | { type: 'perf', section: '⚡ Performance Improvements | 性能优化' }, 13 | { type: 'test', section: '✅ Tests | 测试' }, 14 | { type: 'revert', section: '⏪ Revert | 回退', hidden: true }, 15 | { type: 'build', section: '📦‍ Build System | 打包构建' }, 16 | { type: 'chore', section: '🚀 Chore | 构建/工程依赖/工具' }, 17 | { type: 'ci', section: '👷 Continuous Integration | CI 配置' } 18 | ] 19 | } 20 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | 4 | ], 5 | }; 6 | -------------------------------------------------------------------------------- /build/rollup-build.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs') 2 | const components = require('../compoments.json') 3 | const { styleOutputPath } = require('../config/rollup-config.js') 4 | const { build } = require('./rollup-creat-Config.js') 5 | const { resolve, getAssetsPath } = require('./utils.js') 6 | // 创建 lib 目录 7 | fs.mkdirSync(resolve()) 8 | // 创建 lib/theme 目录 9 | fs.mkdirSync(getAssetsPath(styleOutputPath)) 10 | // 输出文件格式 11 | const formatTypeList = [ 12 | // { format: 'umd', min: false, suffix: '.umd.js' }, 13 | // { format: 'umd', min: true, suffix: '.umd.min.js' }, 14 | // { format: 'cjs', min: false, suffix: '.common.js' }, 15 | // { format: 'cjs', min: true, suffix: '.common.min.js' }, 16 | // { format: 'es', min: false, suffix: '.es.js' }, 17 | { format: 'es', min: false, suffix: '.js' } 18 | ] 19 | 20 | let pkg = [] 21 | formatTypeList.forEach(({ format, min, suffix } = {}) => { 22 | Object.keys(components).forEach((moduleName) => { 23 | const input = components[moduleName] 24 | pkg.push({ min, format, suffix, moduleName, input, output: moduleName }) 25 | }) 26 | }) 27 | 28 | build(pkg) 29 | -------------------------------------------------------------------------------- /build/utils.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const fs = require('fs') 3 | var { outputPath } = require('../config/rollup-config.js') 4 | const chalk = require('chalk') 5 | 6 | module.exports = { 7 | getAssetsPath(_path = '.') { 8 | return path.posix.join(outputPath, _path) 9 | }, 10 | resolve(_path) { 11 | return _path ? path.resolve(__dirname, _path) : path.resolve(__dirname, '..', outputPath) 12 | }, 13 | isProduct: ['production', 'prod'].includes(process.env.NODE_ENV), 14 | env: process.env.NODE_ENV, 15 | chalkConsole: { 16 | success: () => { 17 | console.log(chalk.green(`=========================================`)) 18 | console.log(chalk.green(`========打包成功(build success)!=========`)) 19 | console.log(chalk.green(`=========================================`)) 20 | }, 21 | building: (index, total) => { 22 | console.log(chalk.blue(`正在打包第${index}/${total}个文件...`)) 23 | } 24 | }, 25 | fsExistsSync: (_path) => { 26 | try { 27 | fs.accessSync(_path, fs.F_OK) 28 | } catch (e) { 29 | return false 30 | } 31 | return true 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | ignores: [(commit) => commit.includes('init')], 3 | // extends: ['@commitlint/config-conventional', 'cz'], 4 | extends: ['gitmoji'], 5 | rules: { 6 | 'body-leading-blank': [2, 'always'], 7 | 'footer-leading-blank': [1, 'always'], 8 | 'header-max-length': [2, 'always', 108], 9 | 'subject-empty': [2, 'never'], 10 | 'type-empty': [2, 'never'], 11 | 'subject-case': [0], 12 | 'type-enum': [ 13 | 2, 14 | 'always', 15 | [ 16 | 'feat', 17 | ':sparkles: feat', 18 | 'fix', 19 | 'perf', 20 | 'style', 21 | 'docs', 22 | 'test', 23 | 'refactor', 24 | 'build', 25 | 'ci', 26 | ':construction_worker: ci', 27 | 'chore', 28 | 'revert', 29 | 'wip', 30 | 'workflow', 31 | 'types', 32 | 'release' 33 | ] 34 | // [ 35 | // 'feat', 36 | // 'fix',nvm 37 | // 'perf', 38 | // 'style', 39 | // 'docs', 40 | // 'test', 41 | // 'refactor', 42 | // 'build', 43 | // 'ci', 44 | // 'chore', 45 | // 'revert', 46 | // 'wip', 47 | // 'workflow', 48 | // 'types', 49 | // 'release' 50 | // ] 51 | ] 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /compoments.json: -------------------------------------------------------------------------------- 1 | { 2 | "index": "./src/index.js", 3 | "button": "./packages/element-ui/button/index.js", 4 | "icon": "./packages/element-ui/icon/index.js", 5 | "date-picker": "./packages/element-ui/date-picker/index.js", 6 | "time-picker": "./packages/element-ui/time-picker/index.js", 7 | "radio": "./packages/element-ui/radio/index.js", 8 | "radio-button": "./packages/element-ui/radio-button/index.js", 9 | "radio-group": "./packages/element-ui/radio-group/index.js", 10 | "checkbox": "./packages/element-ui/checkbox/index.js", 11 | "checkbox-button": "./packages/element-ui/checkbox-button/index.js", 12 | "checkbox-group": "./packages/element-ui/checkbox-group/index.js", 13 | "form": "./packages/element-ui/form/index.js", 14 | "form-item": "./packages/element-ui/form-item/index.js", 15 | "input": "./packages/element-ui/input/index.js", 16 | "table": "./packages/element-ui/table/index.js", 17 | "table-column": "./packages/element-ui/table-column/index.js", 18 | "empty": "./packages/element-ui/empty/index.js", 19 | "pagination": "./packages/element-ui/pagination/index.js", 20 | "dialog": "./packages/element-ui/dialog/index.js", 21 | "drawer": "./packages/element-ui/drawer/index.js", 22 | "popconfirm": "./packages/element-ui/popconfirm/index.js", 23 | "tooltip": "./packages/element-ui/tooltip/index.js", 24 | "select": "./packages/element-ui/select/index.js", 25 | "tag": "./packages/element-ui/tag/index.js" 26 | } 27 | -------------------------------------------------------------------------------- /config/alias.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | const resolve = p => path.resolve(__dirname, '../', p); 4 | 5 | module.exports = { 6 | src: resolve('src'), 7 | packages: resolve('packages') 8 | }; 9 | -------------------------------------------------------------------------------- /config/rollup-config.js: -------------------------------------------------------------------------------- 1 | const { version, author } = require('../package.json') 2 | 3 | module.exports = { 4 | banner:`/* 5 | * douluo-ui v${version} 6 | * Copyright ©2022-${new Date().getFullYear()} ${author.name} 7 | * Released under the MIT License. 8 | */\n`, 9 | // 打包样式目录 10 | styleOutputPath: 'theme', 11 | // 打包脚步目录 12 | outputPath: 'lib', 13 | // 清空console 14 | clearConsole: true, 15 | rollupResolve: { 16 | extensions: ['.js', '.vue', '.json', '.jsx'] 17 | }, 18 | // 打包忽略 19 | externalMap: { 20 | vue: 'Vue', 21 | lodash: 'lodash' 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /docs/.vuepress/components/card/demo1.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 35 | -------------------------------------------------------------------------------- /docs/.vuepress/components/card/demo2.vue: -------------------------------------------------------------------------------- 1 | 6 | 19 | -------------------------------------------------------------------------------- /docs/.vuepress/components/card/demo3.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 54 | 55 | 64 | -------------------------------------------------------------------------------- /docs/.vuepress/components/card/demo4.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /docs/.vuepress/components/press-row.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 19 | -------------------------------------------------------------------------------- /docs/.vuepress/components/source-block.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 39 | 40 | 62 | -------------------------------------------------------------------------------- /docs/.vuepress/enhanceApp.js: -------------------------------------------------------------------------------- 1 | // 引入 @internal/page-components 解决组件内部注册报错 2 | import pageComponents from '@internal/page-components' 3 | import ElementUI from 'element-ui'; 4 | import 'element-ui/lib/theme-chalk/index.css'; 5 | import DouluoUI from '../../src/index' 6 | import '../../styles/src/index.scss' 7 | import elIcons from '../../examples/assets/json/el-icon.json' 8 | import dlIcons from '../../examples/assets/json/dl-icon.json' 9 | 10 | 11 | export default async ({ Vue, options, router, siteData, isServer }) => { 12 | if (!isServer) { 13 | for (const [name, component] of Object.entries(pageComponents)) { 14 | Vue.component(name, component) 15 | } 16 | await DouluoUI.updateUITheme({ 17 | primaryColor: '#FFAA00', 18 | primarySecondColor: '#231909', 19 | oldTheme: window.oldTheme || '#409EFF' 20 | }) 21 | Vue.use(DouluoUI); 22 | Vue.use(ElementUI); 23 | Vue.prototype.$elIcons = elIcons 24 | Vue.prototype.$dlIcons = dlIcons 25 | window.oldTheme = '#FFAA00' 26 | window.primarySecond = '#231909' 27 | window.$updateTheme = DouluoUI.updateUITheme 28 | // Vue.prototype.$updateTheme = DouluoUI.updateTheme 29 | } 30 | }; 31 | -------------------------------------------------------------------------------- /docs/.vuepress/public/js/constant.js: -------------------------------------------------------------------------------- 1 | export const DEFAULT_THEME_CONFIG = { 2 | global: {}, 3 | local: {} 4 | }; 5 | 6 | export const ELEMENT_THEME_USER_CONFIG = 'ELEMENT_THEME_USER_CONFIG'; 7 | 8 | export const ELEMENT_THEME_PREVIEW_CONFIG = 'ELEMENT_THEME_PREVIEW_CONFIG'; 9 | 10 | export const ACTION_DOWNLOAD_THEME = 'ELEMENT_THEME_ACTION_DOWNLOAD'; 11 | 12 | export const ACTION_APPLY_THEME = 'ELEMENT_THEME_ACTION_ALLPY_CSS'; 13 | 14 | export const ACTION_COMPONECT_SELECT = 'ELEMENT_THEME_ACTION_COMPONECT_SELECT'; 15 | 16 | export const ACTION_USER_CONFIG_UPDATE = 'ELEMENT_THEME_USER_CONFIG_UPDATE'; 17 | -------------------------------------------------------------------------------- /docs/.vuepress/public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebJeffery/douluo-ui/6c83bdeb013e15083b6474dfcece7a0417dc9904/docs/.vuepress/public/logo.png -------------------------------------------------------------------------------- /docs/.vuepress/public/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/.vuepress/sidebarRoutes/business.js: -------------------------------------------------------------------------------- 1 | module.exports = [ 2 | { 3 | title: '业务组件', 4 | collapsable: false, 5 | children: [ 6 | ['/packages/business/rich-text', 'RichText 富文本编辑器'], 7 | ['/packages/business/cropper', 'Cropper 图片裁切'], 8 | ] 9 | } 10 | ] 11 | -------------------------------------------------------------------------------- /docs/.vuepress/sidebarRoutes/developer.js: -------------------------------------------------------------------------------- 1 | module.exports = [ 2 | { 3 | title: '开发指南', 4 | collapsable: false, 5 | children: [ 6 | ['/developer/changelog', '更新日志'], 7 | ['/developer/installation', '安装'], 8 | ['/developer/quickstart', '快速开始'], 9 | ['/developer/contributor', '代码贡献'], 10 | ['/developer/update-theme', '更改主题'], 11 | ] 12 | }, 13 | { 14 | title: '开发须知', 15 | collapsable: false, 16 | children: [ 17 | ['/developer/specify-build', '开发规范搭建'], 18 | ['/developer/custom-theme', '自定义主题'], 19 | ['/developer/sass', 'SCSS 开发指南'], 20 | ] 21 | } 22 | ] 23 | -------------------------------------------------------------------------------- /docs/.vuepress/sidebarRoutes/guide.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | module.exports = [ 4 | { 5 | title: '介绍说明', 6 | collapsable: false, 7 | children: [ 8 | { 9 | title: '背景', 10 | collapsable: false, 11 | path: '/guide/instroduce', 12 | }, 13 | { 14 | title: '概念', 15 | collapsable: false, 16 | path: '/guide/concept', 17 | } 18 | ] 19 | }, 20 | { 21 | title: 'Basic 基础', 22 | collapsable: false, 23 | children: [ 24 | { 25 | title: 'Button 按钮', 26 | collapsable: false, 27 | path: '/guide/button', 28 | }, 29 | { 30 | title: 'DatePicker 日期选择器', 31 | collapsable: false, 32 | path: '/guide/datePicker', 33 | }, 34 | { 35 | title: 'TimePicker 时间选择器', 36 | collapsable: false, 37 | path: '/guide/time-picker', 38 | } 39 | ] 40 | } 41 | ] 42 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/developer/update-theme.styl: -------------------------------------------------------------------------------- 1 | .demo-theme { 2 | .el-row { 3 | margin-bottom: 20px; 4 | 5 | &:last-child { 6 | margin-bottom: 0; 7 | } 8 | } 9 | .el-button + .el-button { 10 | margin-left: 10px; 11 | } 12 | .el-button-group { 13 | .el-button + .el-button { 14 | margin-left: 0; 15 | } 16 | 17 | & + .el-button-group { 18 | margin-left: 10px; 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/element-ui/alert.styl: -------------------------------------------------------------------------------- 1 | .demo-alert .el-alert { 2 | margin: 20px 0 0; 3 | } 4 | 5 | .demo-alert .el-alert:first-child { 6 | margin: 0; 7 | } 8 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/element-ui/avatar.styl: -------------------------------------------------------------------------------- 1 | .demo-avatar { 2 | 3 | &.demo-basic { 4 | text-align: center; 5 | 6 | .demo-basic--circle, .demo-basic--square { 7 | display: flex; 8 | justify-content: space-between; 9 | align-items: center; 10 | .block { 11 | flex: 1; 12 | } 13 | 14 | .block:not(:last-child) { 15 | border-right: 1px solid rgba(224, 230, 237, 0.5); 16 | } 17 | } 18 | 19 | } 20 | 21 | .sub-title { 22 | margin-bottom: 10px; 23 | font-size: 14px; 24 | color: #8492a6; 25 | } 26 | 27 | .el-col:not(:last-child) { 28 | border-right: 1px solid rgba(224,230,237,.5); 29 | } 30 | 31 | .demo-type { 32 | display: flex; 33 | 34 | >div { 35 | flex: 1; 36 | text-align: center; 37 | } 38 | 39 | >div:not(:last-child) { 40 | border-right: 1px solid rgba(224,230,237,.5); 41 | } 42 | } 43 | 44 | .demo-fit { 45 | display: flex; 46 | text-align: center; 47 | justify-content: space-between; 48 | 49 | .block { 50 | flex: 1; 51 | display: flex; 52 | flex-direction: column; 53 | flex-grow: 0; 54 | } 55 | 56 | .title { 57 | margin-bottom: 10px; 58 | font-size: 14px; 59 | color: #8492a6; 60 | } 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/element-ui/badge.styl: -------------------------------------------------------------------------------- 1 | .demo-badge .el-dropdown { 2 | vertical-align: middle; 3 | } 4 | .demo-badge { 5 | .share-button { 6 | width: 36px; 7 | padding: 10px; 8 | } 9 | 10 | .mark { 11 | margin-top: 8px; 12 | line-height: 1; 13 | float: right; 14 | } 15 | 16 | .item { 17 | margin-right: 40px; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/element-ui/border.styl: -------------------------------------------------------------------------------- 1 | .demo-border .text { 2 | width: 15%; 3 | } 4 | .demo-border .line { 5 | width: 70%; 6 | } 7 | .demo-border .line div { 8 | width: 100%; 9 | height: 0; 10 | border-top: 1px solid #eee; 11 | } 12 | .demo-border .line .dashed { 13 | border-top: 2px dashed #eee; 14 | } 15 | .demo-shadow { 16 | height: 100px; 17 | width: 50%; 18 | border: 1px solid #eee; 19 | } 20 | .demo-shadow-text { 21 | line-height: 50px; 22 | color: #666; 23 | font-size: 14px; 24 | } 25 | .demo-radius .title { 26 | color: #666; 27 | font-size: 18px; 28 | margin: 10px 0; 29 | } 30 | .demo-radius .value { 31 | color: #333; 32 | font-size: 16px; 33 | margin: 10px 0; 34 | } 35 | .demo-radius .radius { 36 | height: 60px; 37 | width: 70%; 38 | border: 1px solid #d7dae2; 39 | border-radius: 0; 40 | margin-top: 20px; 41 | } 42 | .demo-radius .radius-30 { 43 | border-radius: 30px; 44 | } 45 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/element-ui/button.styl: -------------------------------------------------------------------------------- 1 | .demo-button { 2 | .el-row { 3 | margin-bottom: 20px; 4 | 5 | &:last-child { 6 | margin-bottom: 0; 7 | } 8 | } 9 | .el-button + .el-button { 10 | margin-left: 10px; 11 | } 12 | .el-button-group { 13 | .el-button + .el-button { 14 | margin-left: 0; 15 | } 16 | 17 | & + .el-button-group { 18 | margin-left: 10px; 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/element-ui/calendar.styl: -------------------------------------------------------------------------------- 1 | .demo-calendar { 2 | .is-selected { 3 | color: #1989FA; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/element-ui/card.styl: -------------------------------------------------------------------------------- 1 | .demo-card { 2 | .text { 3 | font-size: 14px; 4 | } 5 | 6 | .time { 7 | font-size: 13px; 8 | color: #999; 9 | } 10 | 11 | .bottom { 12 | margin-top: 13px; 13 | line-height: 12px; 14 | } 15 | 16 | .item { 17 | margin-bottom: 18px; 18 | } 19 | 20 | .button { 21 | padding: 0; 22 | float: right; 23 | } 24 | 25 | .image { 26 | width: 100%; 27 | display: block; 28 | } 29 | 30 | .box-card { 31 | width: 480px; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/element-ui/carousel.styl: -------------------------------------------------------------------------------- 1 | .demo-carousel .block { 2 | padding: 30px; 3 | text-align: center; 4 | border-right: solid 1px #eff2f6; 5 | display: inline-block; 6 | width: 49%; 7 | box-sizing: border-box; 8 | &:last-child { 9 | border-right: none; 10 | } 11 | } 12 | 13 | .demo-carousel .demonstration { 14 | display: block; 15 | color: #8492a6; 16 | font-size: 14px; 17 | margin-bottom: 20px; 18 | } 19 | 20 | .demo-carousel .el-carousel__container { 21 | text-align: center; 22 | } 23 | 24 | .demo-carousel .el-carousel__item { 25 | h3 { 26 | color: #fff; 27 | font-size: 18px; 28 | line-height: 300px; 29 | margin: 0; 30 | &.small { 31 | font-size: 14px; 32 | line-height: 150px; 33 | } 34 | &.medium { 35 | font-size: 14px; 36 | line-height: 200px; 37 | } 38 | } 39 | &:nth-child(2n) { 40 | background-color: #99a9bf; 41 | } 42 | &:nth-child(2n + 1) { 43 | background-color: #d3dce6; 44 | } 45 | } 46 | 47 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/element-ui/cascader.styl: -------------------------------------------------------------------------------- 1 | .demo-cascader { 2 | .el-cascader { 3 | width: 222px; 4 | } 5 | } 6 | .demo-cascader-size { 7 | .el-cascader { 8 | vertical-align: top; 9 | margin-right: 15px; 10 | } 11 | } 12 | .demo-cascader .source > div { 13 | display: flex; 14 | } 15 | .demo-cascader .block { 16 | padding: 30px 0; 17 | text-align: center; 18 | border-right: solid 1px #eff2f6; 19 | width: 50%; 20 | box-sizing: border-box; 21 | &:last-child { 22 | border-right: none; 23 | } 24 | } 25 | .demo-cascader .demonstration { 26 | display: block; 27 | color: #8492a6; 28 | font-size: 14px; 29 | margin-bottom: 20px; 30 | } 31 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/element-ui/collapse.styl: -------------------------------------------------------------------------------- 1 | .demo-collapse { 2 | .el-collapse-item__header { 3 | .header-icon { 4 | margin-left: 5px; 5 | } 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/element-ui/color-picker.styl: -------------------------------------------------------------------------------- 1 | .demo-color-picker .block { 2 | padding: 30px 0; 3 | text-align: center; 4 | border-right: solid 1px #eff2f6; 5 | display: inline-block; 6 | width: 50%; 7 | box-sizing: border-box; 8 | &:last-child { 9 | border-right: none; 10 | } 11 | } 12 | .demo-color-picker .demonstration { 13 | display: block; 14 | color: #8492a6; 15 | font-size: 14px; 16 | margin-bottom: 20px; 17 | } 18 | .demo-color-picker .el-color-picker + .el-color-picker { 19 | margin-left: 20px; 20 | } 21 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/element-ui/color.styl: -------------------------------------------------------------------------------- 1 | .demo-color-box { 2 | position: relative; 3 | border-radius: 4px; 4 | padding: 20px; 5 | margin: 5px 0; 6 | height: 114px; 7 | box-sizing: border-box; 8 | color: #fff; 9 | font-size: 14px; 10 | 11 | & .value { 12 | font-size: 12px; 13 | opacity: 0.69; 14 | line-height: 24px; 15 | } 16 | } 17 | .demo-color-box-other { 18 | height: 74px; 19 | margin: 10px 0 !important; 20 | border-radius: 4px 4px 4px 4px !important; 21 | padding: 15px 20px; 22 | } 23 | .demo-color-box-group { 24 | .demo-color-box { 25 | border-radius: 0; 26 | margin: 0; 27 | } 28 | .demo-color-box:first-child { 29 | border-radius: 4px 4px 0 0; 30 | } 31 | .demo-color-box:last-child { 32 | border-radius: 0 0 4px 4px; 33 | } 34 | } 35 | .bg-color-sub { 36 | width: 100%; 37 | height: 40px; 38 | left: 0; 39 | bottom: 0; 40 | position: absolute; 41 | border-radius: 0 0 4px 4px; 42 | } 43 | .bg-blue-sub-item { 44 | width: 11.1111111%; 45 | height: 100%; 46 | display: inline-block; 47 | } 48 | .bg-blue-sub-item:first-child { 49 | border-radius: 0 0 0 4px; 50 | } 51 | .bg-success-sub-item { 52 | width: 50%; 53 | height: 100%; 54 | display: inline-block; 55 | } 56 | .bg-success-sub-item:first-child { 57 | border-radius: 0 0 0 4px; 58 | } 59 | .bg-success-sub-item:last-child { 60 | border-radius: 0 0 4px 0; 61 | } 62 | .bg-transparent { 63 | border: 1px solid #fcc3c3; 64 | color: #303133; 65 | background: url("data:image/svg+xml;utf8,"); 66 | background-repeat: no-repeat; 67 | background-position: center center; 68 | background-size: 100% 100%, auto; 69 | } 70 | .demo-color-box-lite { 71 | color: #303133; 72 | } 73 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/element-ui/container.styl: -------------------------------------------------------------------------------- 1 | .el-header, 2 | .el-footer { 3 | background-color: #b3c0d1; 4 | color: #333; 5 | line-height: 60px; 6 | } 7 | 8 | .el-aside { 9 | color: #333; 10 | } 11 | 12 | #chang-jian-ye-mian-bu-ju + .demo-container { 13 | .el-header, 14 | .el-footer { 15 | text-align: center; 16 | } 17 | 18 | .el-aside { 19 | background-color: #d3dce6; 20 | text-align: center; 21 | line-height: 200px; 22 | } 23 | 24 | .el-main { 25 | background-color: #e9eef3; 26 | color: #333; 27 | text-align: center; 28 | line-height: 160px; 29 | } 30 | 31 | & > .source > .el-container { 32 | margin-bottom: 40px; 33 | 34 | &:nth-child(5) .el-aside, 35 | &:nth-child(6) .el-aside { 36 | line-height: 260px; 37 | } 38 | 39 | &:nth-child(7) .el-aside { 40 | line-height: 320px; 41 | } 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/element-ui/date-picker.styl: -------------------------------------------------------------------------------- 1 | .demo-date-picker .source > div { 2 | padding: 0; 3 | display: flex; 4 | flex-wrap: wrap; 5 | } 6 | 7 | .demo-date-picker .block { 8 | padding: 30px 0; 9 | text-align: center; 10 | border-right: solid 1px #eff2f6; 11 | flex: 1; 12 | &:last-child { 13 | border-right: none; 14 | } 15 | } 16 | 17 | .demo-date-picker .container { 18 | flex: 1; 19 | border-right: solid 1px #eff2f6; 20 | .block { 21 | border-right: none; 22 | &:last-child { 23 | border-top: solid 1px #eff2f6; 24 | } 25 | } 26 | &:last-child { 27 | border-right: none; 28 | } 29 | } 30 | 31 | .demo-date-picker .demonstration { 32 | display: block; 33 | color: #8492a6; 34 | font-size: 14px; 35 | margin-bottom: 20px; 36 | } 37 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/element-ui/datetime-picker.styl: -------------------------------------------------------------------------------- 1 | .demo-datetime-picker .source > div { 2 | padding: 0; 3 | display: flex; 4 | } 5 | 6 | .demo-datetime-picker .block { 7 | padding: 30px 0; 8 | text-align: center; 9 | border-right: solid 1px #eff2f6; 10 | flex: 1; 11 | &:last-child { 12 | border-right: none; 13 | } 14 | } 15 | 16 | .demo-datetime-picker .demonstration { 17 | display: block; 18 | color: #8492a6; 19 | font-size: 14px; 20 | margin-bottom: 20px; 21 | } 22 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/element-ui/descriptions.styl: -------------------------------------------------------------------------------- 1 | .demo-descriptions { 2 | .margin-top { 3 | margin-top: 20px; 4 | } 5 | 6 | .my-label { 7 | background: #E1F3D8; 8 | } 9 | 10 | .my-content { 11 | background: #FDE2E2; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/element-ui/dialog.styl: -------------------------------------------------------------------------------- 1 | .demo-dialog, 2 | .el-dialog { 3 | .dialog-footer button:first-child { 4 | margin-right: 10px; 5 | } 6 | .full-image { 7 | width: 100%; 8 | } 9 | .el-dialog__wrapper { 10 | margin: 0; 11 | } 12 | .el-select { 13 | width: 300px; 14 | } 15 | .el-input { 16 | width: 300px; 17 | } 18 | .el-button--text { 19 | margin-right: 15px; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/element-ui/divider.styl: -------------------------------------------------------------------------------- 1 | .demo-divider-container-1 { 2 | display: inline-block; 3 | width: 33%; 4 | } 5 | 6 | .demo-divider-container-2 { 7 | display: inline-block; 8 | width: 50%; 9 | } -------------------------------------------------------------------------------- /docs/.vuepress/styles/element-ui/drawer.styl: -------------------------------------------------------------------------------- 1 | .demo-drawer, 2 | .el-drawer__wrapper { 3 | &__content { 4 | display: flex; 5 | flex-direction: column; 6 | height: 100%; 7 | form { 8 | flex: 1; 9 | } 10 | } 11 | 12 | &__footer { 13 | display: flex; 14 | button { 15 | flex: 1; 16 | } 17 | } 18 | } 19 | 20 | .el-drawer__body { 21 | padding: 20px; 22 | } 23 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/element-ui/dropdown.styl: -------------------------------------------------------------------------------- 1 | .demo-dropdown { 2 | .el-dropdown { 3 | vertical-align: top; 4 | 5 | & + .el-dropdown { 6 | margin-left: 15px; 7 | } 8 | } 9 | .el-dropdown-link { 10 | cursor: pointer; 11 | color: #409eff; 12 | } 13 | .el-icon-arrow-down { 14 | font-size: 12px; 15 | } 16 | } 17 | 18 | .block-col-2 { 19 | margin: -24px; 20 | 21 | .el-col { 22 | padding: 30px 0; 23 | text-align: center; 24 | border-right: 1px solid #eff2f6; 25 | 26 | &:last-child { 27 | border-right: 0; 28 | } 29 | } 30 | } 31 | 32 | .demo-dropdown .demonstration { 33 | display: block; 34 | color: #8492a6; 35 | font-size: 14px; 36 | margin-bottom: 20px; 37 | } 38 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/element-ui/form.styl: -------------------------------------------------------------------------------- 1 | .demo-form { 2 | .el-select .el-input { 3 | width: 380px; 4 | } 5 | .el-form { 6 | width: auto; 7 | } 8 | 9 | .line { 10 | text-align: center; 11 | } 12 | 13 | .el-checkbox-group { 14 | // width: 320px; 15 | margin: 0; 16 | padding: 0; 17 | list-style: none; 18 | 19 | &:after, 20 | &:before { 21 | content: " "; 22 | display: table; 23 | } 24 | &:after { 25 | clear: both; 26 | visibility: hidden; 27 | font-size: 0; 28 | height: 0; 29 | } 30 | 31 | .el-checkbox { 32 | float: left; 33 | width: 160px; 34 | padding-right: 20px; 35 | margin: 0; 36 | padding: 0; 37 | 38 | + .el-checkbox { 39 | margin-left: 0; 40 | } 41 | } 42 | } 43 | .demo-form-normal { 44 | width: 460px; 45 | } 46 | .demo-form-inline { 47 | width: auto; 48 | 49 | .el-input { 50 | width: 150px; 51 | } 52 | > * { 53 | margin-right: 10px; 54 | } 55 | } 56 | .demo-ruleForm { 57 | width: 460px; 58 | 59 | .el-select .el-input { 60 | width: 360px; 61 | } 62 | } 63 | .demo-dynamic { 64 | .el-input { 65 | margin-right: 10px; 66 | width: 270px; 67 | vertical-align: top; 68 | } 69 | } 70 | .fr { 71 | float: right; 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/element-ui/i18n.styl: -------------------------------------------------------------------------------- 1 | ul.language-list { 2 | color: #5e6d82; 3 | font-size: 14px; 4 | padding-left: 20px; 5 | li { 6 | line-height: 1.8; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/element-ui/icon.styl: -------------------------------------------------------------------------------- 1 | .demo-icon .source > div > i { 2 | color: #606266; 3 | margin: 0 20px; 4 | font-size: 1.5em; 5 | vertical-align: middle; 6 | } 7 | 8 | .demo-icon .source button { 9 | margin: 0 20px; 10 | } 11 | 12 | ul.icon-list { 13 | overflow: hidden; 14 | list-style: none; 15 | padding: 0!important; 16 | border: solid 1px #eaeefb; 17 | border-radius: 4px; 18 | display: flex; 19 | flex-wrap: wrap; 20 | } 21 | .icon-list li { 22 | 23 | width: 16.66%; 24 | text-align: center; 25 | height: 120px; 26 | line-height: 120px; 27 | color: #666; 28 | font-size: 13px; 29 | border-right: 1px solid #eee; 30 | border-bottom: 1px solid #eee; 31 | margin-right: -1px; 32 | margin-bottom: -1px; 33 | 34 | &::after { 35 | display: inline-block; 36 | content: ""; 37 | height: 100%; 38 | vertical-align: middle; 39 | } 40 | 41 | span { 42 | display: inline-block; 43 | line-height: normal; 44 | vertical-align: middle; 45 | font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", 46 | "Microsoft YaHei", SimSun, sans-serif; 47 | color: #99a9bf; 48 | transition: color 0.15s linear; 49 | } 50 | 51 | i { 52 | display: block; 53 | font-size: 32px; 54 | margin-bottom: 15px; 55 | color: #606266; 56 | transition: color 0.15s linear; 57 | } 58 | 59 | .icon-name { 60 | display: inline-block; 61 | padding: 0 3px; 62 | height: 1em; 63 | } 64 | 65 | &:hover { 66 | span, 67 | i { 68 | color: rgb(92, 182, 255); 69 | } 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/element-ui/image.styl: -------------------------------------------------------------------------------- 1 | @keyframes dot { 2 | 0% { width: 0; margin-right: 1em; } 3 | 100% { width: 1em; margin-right: 0; } 4 | } 5 | 6 | .demo-image { 7 | .block { 8 | padding: 30px 0; 9 | text-align: center; 10 | border-right: solid 1px #eff2f6; 11 | display: inline-block; 12 | width: 20%; 13 | box-sizing: border-box; 14 | vertical-align: top; 15 | &:last-child { 16 | border-right: none; 17 | } 18 | } 19 | 20 | .demonstration { 21 | display: block; 22 | color: #8492a6; 23 | font-size: 14px; 24 | margin-bottom: 20px; 25 | } 26 | } 27 | 28 | .demo-image__placeholder, .demo-image__error { 29 | @extend .demo-image; 30 | 31 | .block { 32 | width: 49%; 33 | } 34 | 35 | .el-image { 36 | width: 300px; 37 | height: 200px; 38 | } 39 | 40 | .image-slot { 41 | display: flex; 42 | justify-content: center; 43 | align-items: center; 44 | width: 100%; 45 | height: 100%; 46 | background: #f5f7fa; 47 | color: #909399; 48 | font-size: 14px; 49 | } 50 | } 51 | 52 | .demo-image__placeholder { 53 | .dot { 54 | animation: dot 2s infinite steps(3, start); 55 | overflow: hidden; 56 | } 57 | } 58 | 59 | .demo-image__error { 60 | .image-slot { 61 | font-size: 30px; 62 | } 63 | } 64 | 65 | .demo-image__lazy { 66 | height: 400px; 67 | overflow-y: auto; 68 | 69 | .el-image { 70 | display: block; 71 | min-height: 200px; 72 | margin-bottom: 10px; 73 | 74 | &:last-child { 75 | margin-bottom: 0; 76 | } 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/element-ui/infinite-scroll.styl: -------------------------------------------------------------------------------- 1 | .infinite-list { 2 | height: 300px; 3 | padding: 0; 4 | margin: 0; 5 | list-style: none; 6 | 7 | .infinite-list-item { 8 | display: flex; 9 | align-items: center; 10 | justify-content: center; 11 | height: 50px; 12 | background: #e8f3fe; 13 | margin: 10px; 14 | color: lighten(#1989fa, 20%); 15 | & + .list-item { 16 | margin-top: 10px 17 | } 18 | } 19 | } 20 | 21 | .infinite-list-wrapper { 22 | height: 300px; 23 | text-align: center; 24 | 25 | .list{ 26 | padding: 0; 27 | margin: 0; 28 | list-style: none; 29 | } 30 | 31 | 32 | .list-item{ 33 | display: flex; 34 | align-items: center; 35 | justify-content: center; 36 | height: 50px; 37 | background: #fff6f6; 38 | color: #ff8484; 39 | & + .list-item { 40 | margin-top: 10px 41 | } 42 | } 43 | } 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/element-ui/input-number.styl: -------------------------------------------------------------------------------- 1 | .demo-input-number { 2 | .el-input-number + .el-input-number { 3 | margin-left: 10px; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/element-ui/input.styl: -------------------------------------------------------------------------------- 1 | .demo-input { 2 | .el-select .el-input { 3 | width: 130px; 4 | } 5 | .el-input { 6 | width: 180px; 7 | } 8 | .el-textarea { 9 | width: 414px; 10 | } 11 | .el-input-group { 12 | width: 100%; 13 | } 14 | .demo-input-size { 15 | .el-input { 16 | vertical-align: top; 17 | margin: 0 10px 10px 0; 18 | } 19 | } 20 | .input-with-select .el-input-group__prepend { 21 | background-color: #fff; 22 | } 23 | .demo-autocomplete { 24 | text-align: center; 25 | 26 | .sub-title { 27 | margin-bottom: 10px; 28 | font-size: 14px; 29 | color: #8492a6; 30 | } 31 | 32 | .el-col:not(:last-child) { 33 | border-right: 1px solid rgba(224, 230, 237, 0.5); 34 | } 35 | 36 | .el-autocomplete { 37 | text-align: left; 38 | } 39 | } 40 | } 41 | .el-autocomplete-suggestion.my-autocomplete { 42 | li { 43 | line-height: normal; 44 | padding-top: 7px; 45 | padding-bottom: 7px; 46 | 47 | .name { 48 | text-overflow: ellipsis; 49 | overflow: hidden; 50 | } 51 | .addr { 52 | font-size: 12px; 53 | color: #b4b4b4; 54 | } 55 | .highlighted .addr { 56 | color: #ddd; 57 | } 58 | } 59 | } 60 | .demo-input-suffix { 61 | margin-bottom: 15px; 62 | .el-input { 63 | margin-right: 15px; 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/element-ui/layout.styl: -------------------------------------------------------------------------------- 1 | .demo-layout { 2 | .el-row { 3 | margin-bottom: 20px; 4 | &:last-child { 5 | margin-bottom: 0; 6 | } 7 | } 8 | .el-col { 9 | border-radius: 4px; 10 | } 11 | .bg-purple-dark { 12 | background: #99a9bf; 13 | } 14 | .bg-purple { 15 | background: #d3dce6; 16 | } 17 | .bg-purple-light { 18 | background: #e5e9f2; 19 | } 20 | .grid-content { 21 | border-radius: 4px; 22 | min-height: 36px; 23 | } 24 | .row-bg { 25 | padding: 10px 0; 26 | background-color: #f9fafc; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/element-ui/loading.styl: -------------------------------------------------------------------------------- 1 | .demo-loading .el-table { 2 | border: none; 3 | } 4 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/element-ui/menu.styl: -------------------------------------------------------------------------------- 1 | .demo-menu { 2 | .el-menu-demo { 3 | padding-left: 55px; 4 | } 5 | .el-menu-vertical-demo:not(.el-menu--collapse) { 6 | width: 240px; 7 | min-height: 400px; 8 | } 9 | .line { 10 | height: 1px; 11 | background-color: #e0e6ed; 12 | margin: 35px -24px; 13 | } 14 | h5 { 15 | font-size: 14px; 16 | color: #8492a6; 17 | margin-top: 10px; 18 | } 19 | .tac { 20 | text-align: center; 21 | 22 | .el-menu-vertical-demo { 23 | display: inline-block; 24 | text-align: left; 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/element-ui/pagination.styl: -------------------------------------------------------------------------------- 1 | .demo-pagination .source.first { 2 | padding: 0; 3 | } 4 | 5 | .demo-pagination .first .block { 6 | padding: 30px 0; 7 | text-align: center; 8 | border-right: solid 1px #eff2f6; 9 | display: inline-block; 10 | width: 50%; 11 | box-sizing: border-box; 12 | 13 | &:last-child { 14 | border-right: none; 15 | } 16 | } 17 | 18 | .demo-pagination .first .demonstration { 19 | display: block; 20 | color: #8492a6; 21 | font-size: 14px; 22 | margin-bottom: 20px; 23 | } 24 | 25 | .demo-pagination .source.last { 26 | padding: 0; 27 | } 28 | 29 | .demo-pagination .last .block { 30 | padding: 30px 24px; 31 | border-bottom: solid 1px #eff2f6; 32 | &:last-child { 33 | border-bottom: none; 34 | } 35 | } 36 | 37 | .demo-pagination .last .demonstration { 38 | font-size: 14px; 39 | color: #8492a6; 40 | line-height: 44px; 41 | } 42 | 43 | .demo-pagination .last .demonstration + .el-pagination { 44 | width: 70%; 45 | margin: 5px 20px 0 0; 46 | } 47 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/element-ui/popover.styl: -------------------------------------------------------------------------------- 1 | .demo-popover { 2 | .el-popover + .el-popover { 3 | margin-left: 10px; 4 | } 5 | .el-input { 6 | width: 360px; 7 | } 8 | .el-button { 9 | margin-left: 10px; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/element-ui/progress.styl: -------------------------------------------------------------------------------- 1 | .demo-progress { 2 | .el-progress--line { 3 | margin-bottom: 15px; 4 | width: 350px; 5 | } 6 | .el-progress--circle { 7 | margin-right: 15px; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/element-ui/rate.styl: -------------------------------------------------------------------------------- 1 | .demo-rate .block { 2 | padding: 30px 0; 3 | text-align: center; 4 | border-right: solid 1px #eff2f6; 5 | display: inline-block; 6 | width: 49%; 7 | box-sizing: border-box; 8 | &:last-child { 9 | border-right: none; 10 | } 11 | } 12 | 13 | .demo-rate .demonstration { 14 | display: block; 15 | color: #8492a6; 16 | font-size: 14px; 17 | margin-bottom: 20px; 18 | } 19 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/element-ui/select.styl: -------------------------------------------------------------------------------- 1 | .demo-select .el-select { 2 | width: 240px; 3 | } 4 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/element-ui/skeleton.styl: -------------------------------------------------------------------------------- 1 | .demo-skeleton { 2 | .el-card { 3 | margin-bottom: 16px; 4 | } 5 | 6 | .card-header { 7 | display: flex; 8 | justify-content: space-between; 9 | align-items: center; 10 | } 11 | 12 | .time { 13 | font-size: 13px; 14 | color: #999; 15 | } 16 | 17 | .bottom { 18 | margin-top: 13px; 19 | line-height: 12px; 20 | } 21 | 22 | .button { 23 | padding: 0; 24 | min-height: auto; 25 | } 26 | 27 | .image { 28 | &.multi-content { 29 | width: 400px; 30 | height: 267px; 31 | } 32 | 33 | width: 100%; 34 | display: block; 35 | } 36 | 37 | .clearfix:before, 38 | .clearfix:after { 39 | display: table; 40 | content: ''; 41 | } 42 | 43 | .clearfix:after { 44 | clear: both; 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/element-ui/slider.styl: -------------------------------------------------------------------------------- 1 | .demo-slider .source { 2 | padding: 0; 3 | } 4 | 5 | .demo-slider .block { 6 | padding: 30px 24px; 7 | overflow: hidden; 8 | border-bottom: solid 1px #eff2f6; 9 | &:last-child { 10 | border-bottom: none; 11 | } 12 | } 13 | 14 | .demo-slider .demonstration { 15 | font-size: 14px; 16 | color: #8492a6; 17 | line-height: 44px; 18 | } 19 | 20 | .demo-slider .demonstration + .el-slider { 21 | float: right; 22 | width: 70%; 23 | margin-right: 20px; 24 | } 25 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/element-ui/switch.styl: -------------------------------------------------------------------------------- 1 | .demo-switch { 2 | .el-switch { 3 | margin: 20px 20px 20px 0; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/element-ui/table.styl: -------------------------------------------------------------------------------- 1 | .el-table .warning-row { 2 | background: oldlace; 3 | } 4 | 5 | .el-table .success-row { 6 | background: #f0f9eb; 7 | } 8 | 9 | .demo-table .name-wrapper { 10 | display: inline-block; 11 | } 12 | 13 | .demo-table .demo-table-expand { 14 | label { 15 | width: 90px; 16 | color: #99a9bf; 17 | } 18 | .el-form-item { 19 | margin-right: 0; 20 | margin-bottom: 0; 21 | width: 50%; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/element-ui/tag.styl: -------------------------------------------------------------------------------- 1 | .demo-tag { 2 | .el-row { 3 | margin-bottom: 20px; 4 | 5 | &:last-child { 6 | margin-bottom: 0; 7 | } 8 | } 9 | .el-tag + .el-tag { 10 | margin-left: 10px; 11 | } 12 | 13 | .button-new-tag { 14 | margin-left: 10px; 15 | height: 32px; 16 | line-height: 30px; 17 | padding-top: 0; 18 | padding-bottom: 0; 19 | } 20 | 21 | .input-new-tag { 22 | width: 90px; 23 | margin-left: 10px; 24 | vertical-align: bottom; 25 | } 26 | 27 | .tag-group { 28 | display: flex; 29 | align-items: center; 30 | 31 | &__title { 32 | width: 45px; 33 | font-size: 14px; 34 | color: #606266; 35 | } 36 | 37 | &+.tag-group { 38 | margin-top: 10px; 39 | } 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/element-ui/time-picker.styl: -------------------------------------------------------------------------------- 1 | .demo-time-picker { 2 | .el-date-editor + .el-date-editor { 3 | margin-left: 10px; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/element-ui/timeline.styl: -------------------------------------------------------------------------------- 1 | .demo-timeline .source .radio { 2 | margin-bottom: 20px; 3 | } 4 | .demo-timeline .source .radio .el-radio-group { 5 | margin-left: 20px; 6 | } 7 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/element-ui/tooltip.styl: -------------------------------------------------------------------------------- 1 | .demo-tooltip { 2 | .el-tooltip + .el-tooltip { 3 | margin-left: 15px; 4 | } 5 | .box { 6 | width: 400px; 7 | 8 | .top { 9 | text-align: center; 10 | } 11 | 12 | .left { 13 | float: left; 14 | width: 60px; 15 | } 16 | 17 | .right { 18 | float: right; 19 | width: 60px; 20 | } 21 | 22 | .bottom { 23 | clear: both; 24 | text-align: center; 25 | } 26 | 27 | .item { 28 | margin: 4px; 29 | } 30 | 31 | .left .el-tooltip__popper, 32 | .right .el-tooltip__popper { 33 | padding: 8px 10px; 34 | } 35 | .el-tooltip { 36 | margin-left: 0; 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/element-ui/transfer.styl: -------------------------------------------------------------------------------- 1 | .demo-transfer { 2 | .transfer-footer { 3 | margin-left: 15px; 4 | padding: 6px 5px; 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/element-ui/transition.styl: -------------------------------------------------------------------------------- 1 | .demo-transition { 2 | .transition-box { 3 | margin-bottom: 10px; 4 | width: 200px; 5 | height: 100px; 6 | border-radius: 4px; 7 | background-color: #409EFF; 8 | text-align: center; 9 | color: #fff; 10 | padding: 40px 20px; 11 | margin-right: 20px; 12 | box-sizing: border-box; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/element-ui/tree.styl: -------------------------------------------------------------------------------- 1 | .demo-tree { 2 | .leaf { 3 | width: 20px; 4 | background: #ddd; 5 | } 6 | 7 | .folder { 8 | width: 20px; 9 | background: #888; 10 | } 11 | 12 | .buttons { 13 | margin-top: 20px; 14 | } 15 | 16 | .filter-tree { 17 | margin-top: 20px; 18 | } 19 | 20 | .custom-tree-container { 21 | display: flex; 22 | margin: -24px; 23 | } 24 | 25 | .block { 26 | flex: 1; 27 | padding: 8px 24px 24px; 28 | 29 | &:first-child { 30 | border-right: solid 1px #eff2f6; 31 | } 32 | 33 | > p { 34 | text-align: center; 35 | margin: 0; 36 | line-height: 4; 37 | } 38 | } 39 | 40 | .custom-tree-node { 41 | flex: 1; 42 | display: flex; 43 | align-items: center; 44 | justify-content: space-between; 45 | font-size: 14px; 46 | padding-right: 8px; 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/element-ui/typography.styl: -------------------------------------------------------------------------------- 1 | .demo-typo-size { 2 | .color-dark-light { 3 | color: #99a9bf; 4 | } 5 | } 6 | .demo-term-box img { 7 | width: 24%; 8 | margin: 0 4% 20px 0; 9 | } 10 | 11 | .lineH-left { 12 | display: inline-block; 13 | height: 80px; 14 | } 15 | .lineH-right { 16 | display: inline-block; 17 | list-style: none; 18 | padding: 0 0 0 90px; 19 | margin: 0; 20 | vertical-align: top; 21 | } 22 | .lineH-right li { 23 | font-size: 13px; 24 | color: #666; 25 | height: 20px; 26 | line-height: 20px; 27 | } 28 | .lineH-right li span { 29 | padding-left: 40px; 30 | } 31 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/element-ui/upload.styl: -------------------------------------------------------------------------------- 1 | .upload-tip { 2 | color: #8492a6; 3 | font-size: 12px; 4 | margin-top: 7px; 5 | } 6 | .demo-upload { 7 | margin-bottom: 24px; 8 | 9 | .upload-demo { 10 | width: 360px; 11 | } 12 | .avatar-uploader { 13 | .el-upload { 14 | border: 1px dashed #d9d9d9; 15 | border-radius: 6px; 16 | cursor: pointer; 17 | position: relative; 18 | overflow: hidden; 19 | 20 | &:hover, 21 | &:focus { 22 | border-color: #409eff; 23 | } 24 | } 25 | .avatar-uploader-icon { 26 | font-size: 28px; 27 | color: #8c939d; 28 | width: 178px; 29 | height: 178px; 30 | line-height: 178px; 31 | text-align: center; 32 | } 33 | .avatar { 34 | width: 178px; 35 | height: 178px; 36 | display: block; 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/index.styl: -------------------------------------------------------------------------------- 1 | @import 'developer/*' 2 | @import 'element-ui/*' 3 | @require './theme/index.styl'; 4 | // 文档图标库 5 | @import '//at.alicdn.com/t/c/font_3584623_m93bbem50c.css' 6 | 7 | .home header img 8 | width: 300px 9 | 10 | 11 | .text.item 12 | line-height: 24px 13 | padding: 0 14 | 15 | .demo-block .copy-code-button { 16 | display: none 17 | } 18 | 19 | .theme-default-content:not(.custom) { 20 | max-width: 880px} 21 | 22 | .theme-default-content code { 23 | color: #476582; 24 | } 25 | 26 | body:not(.theme-dark) .theme-default-content code, body.theme-light .theme-default-content code { 27 | background: rgba(27, 31, 35, .05) 28 | } 29 | 30 | div[class*='language-'] { 31 | background: #fafafa; 32 | } 33 | 34 | .theme-default-content code { 35 | padding: 0.1rem 0.3rem 36 | } 37 | 38 | .icon-new { 39 | color: red; 40 | font-size: 20px; 41 | } 42 | 43 | th, td { 44 | border: none; 45 | } 46 | 47 | table { 48 | margin: 0; 49 | } 50 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/theme/code/helper.styl: -------------------------------------------------------------------------------- 1 | color-helper($codeColor, $codeBgColor) { 2 | --code-color: $codeColor; 3 | --code-line-color: alpha($codeColor, 0.67); 4 | --code-bg-color: $codeBgColor; 5 | --code-border-color: darken(saturate($codeBgColor, 20%), 10%); 6 | --code-highlight-line-color: darken(saturate($codeBgColor, 10%), 5%); 7 | } 8 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/theme/code/index.styl: -------------------------------------------------------------------------------- 1 | @require './base'; 2 | @require './light'; 3 | @require './dark'; -------------------------------------------------------------------------------- /docs/.vuepress/styles/theme/index.styl: -------------------------------------------------------------------------------- 1 | @require './normalize'; 2 | @require './vars'; 3 | @require './code/index'; 4 | @require './theme'; 5 | @require './layout'; 6 | @require './plugins/index'; 7 | @require './theme-color'; 8 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/theme/layout.styl: -------------------------------------------------------------------------------- 1 | :root { 2 | @media (prefers-reduced-motion: no-preference) { 3 | scroll-behavior: smooth; 4 | } 5 | } 6 | 7 | ::-webkit-scrollbar { 8 | width: 6px; 9 | height: 6px; 10 | } 11 | 12 | ::-webkit-scrollbar-track-piece { 13 | -webkit-border-radius: 6px; 14 | border-radius: 6px; 15 | background: rgba(0, 0, 0, 10%); 16 | } 17 | 18 | ::-webkit-scrollbar-thumb { 19 | background-color: var(--accent-color); 20 | } 21 | 22 | .hide-in-mobile { 23 | @media (max-width: $MQMobile) { 24 | display: none !important; 25 | } 26 | } 27 | 28 | .hide-in-pad { 29 | @media (max-width: $MQNarrow) { 30 | display: none !important; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/theme/normalize.styl: -------------------------------------------------------------------------------- 1 | 2 | html, body { 3 | background: var(--bg-color); 4 | transition: background-color var(--color-transition); 5 | } 6 | 7 | html.dark { 8 | color-scheme: dark; 9 | } 10 | 11 | body { 12 | color: var(--text-color); 13 | font-family: var(--font-family); 14 | } 15 | 16 | a { 17 | color: var(--accent-color); 18 | } 19 | 20 | kbd { 21 | border-color: var(--grey14); 22 | background: var(--bg-color-light); 23 | font-family: var(--font-family-code); 24 | } 25 | 26 | code { 27 | font-family: var(--font-family-code); 28 | transition: background-color var(--color-transition), color var(--color-transition); 29 | 30 | html.dark & { 31 | background: #333; 32 | } 33 | 34 | p a & { 35 | color: var(--accent-color); 36 | } 37 | } 38 | 39 | blockquote { 40 | border-color: #eee; 41 | color: #666; 42 | transition: border-color var(--color-transition), color var(--color-transition); 43 | 44 | html.dark & { 45 | border-color: #333; 46 | } 47 | } 48 | 49 | h1 { 50 | @media (max-width: $MQMobileNarrow) { 51 | font-size: 1.9rem; 52 | } 53 | } 54 | 55 | h2 { 56 | border-color: var(--border-color); 57 | transition: border-bottom-color var(--color-transition); 58 | } 59 | 60 | hr { 61 | border-color: var(--border-color); 62 | transition: border-top-color var(--color-transition); 63 | } 64 | 65 | tr { 66 | border-color: var(--grey14); 67 | 68 | &:nth-child(2n) { 69 | background: var(--bg-color-light); 70 | 71 | html.dark & { 72 | background: #252322; 73 | } 74 | } 75 | } 76 | 77 | th, td { 78 | border-color: var(--grey14); 79 | } 80 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/theme/plugins/index.styl: -------------------------------------------------------------------------------- 1 | @require './nprogress'; 2 | @require './search'; 3 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/theme/plugins/nprogress.styl: -------------------------------------------------------------------------------- 1 | 2 | for $themeColorName, $themeColor in $colorPicker { 3 | .theme-{$themeColorName} { 4 | #nprogress { 5 | .bar { 6 | background: $themeColor; 7 | } 8 | 9 | .peg { 10 | box-shadow: 0 0 10px $themeColor, 0 0 5px $themeColor; 11 | } 12 | 13 | .spinner-icon { 14 | border-color: $themeColor; 15 | } 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/theme/theme-color.styl: -------------------------------------------------------------------------------- 1 | body { 2 | --accent-color: $accentColor; 3 | --accent-color-light: lighten($accentColor, 10%); 4 | --accent-color-dark: darken($accentColor, 10%); 5 | --accent-color-a15: alpha($accentColor, 15%); 6 | } 7 | 8 | theme-color($themeColor, $colorName) { 9 | body.theme-{$colorName} { 10 | --accent-color: $themeColor; 11 | --accent-color-light: lighten($themeColor, 10%); 12 | --accent-color-dark: darken($themeColor, 10%); 13 | --accent-color-a15: alpha($themeColor, 15%); 14 | } 15 | } 16 | 17 | for key, value in $colorPicker { 18 | theme-color(value, key); 19 | } 20 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/theme/theme.styl: -------------------------------------------------------------------------------- 1 | 2 | {$contentClass} { 3 | &:not(.custom) { 4 | wrapper(); 5 | 6 | > { 7 | // heading fix 8 | h1, h2, h3, h4, h5, h6 { 9 | margin-top: calc(0.5rem - var(--navbar-height)); 10 | margin-bottom: 0.5rem; 11 | padding-top: calc(1rem + var(--navbar-height)); 12 | outline: none; 13 | 14 | .theme-container.no-navbar & { 15 | margin-top: 1.5rem; 16 | padding-top: 0; 17 | } 18 | } 19 | 20 | // paragraph fix 21 | p, ul p, ol p { 22 | text-align: justify; 23 | word-break: break-word; 24 | overflow-wrap: break-word; 25 | hyphens: auto; 26 | 27 | @media (max-width: $MQMobileNarrow) { 28 | text-align: left; 29 | } 30 | } 31 | 32 | a:hover { 33 | text-decoration: underline; 34 | } 35 | } 36 | 37 | img { 38 | max-width: 100%; 39 | } 40 | } 41 | 42 | &.custom { 43 | margin: 0; 44 | padding: 0; 45 | 46 | img { 47 | max-width: 100%; 48 | } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | home: true 3 | heroImage: '/logo.svg' 4 | # heroImage: 'https://cn.vuejs.org/images/logo.svg' 5 | heroText: Douluo UI 6 | tagline: '基于 Element UI 封装的 Douluo UI 组件库' 7 | actions: 8 | - text: 开始 💡 9 | link: /guide/ 10 | type: primary 11 | 12 | - text: 组件文档 🛠 13 | link: /packages/element/layout/ 14 | 15 | features: 16 | - title: 更易用 17 | details: 开箱即用，案例丰富 18 | - title: 更高效 19 | details: 傻瓜写法，超高性能 20 | - title: 更专业 21 | details: 完备，灵活，优雅 22 | footer: MIT Licensed | Copyright © 2022-present 23 | --- 24 | 25 | ## 🛠 安装 26 | 27 | :::: code-group 28 | 29 | ::: code-group-item npm 30 | 31 | ```bash 32 | npm add element-ui -S 33 | npm add douluo-ui -S 34 | ``` 35 | 36 | ::: 37 | 38 | ::: code-group-item yarn 39 | 40 | ```bash 41 | yarn add element-ui 42 | yarn add douluo-ui 43 | ``` 44 | 45 | ::: 46 | 47 | :::: 48 | 49 | ## 🚀 使用 50 | 51 | ```js 52 | import ElementUI from 'element-ui'; 53 | import DouluoUI from 'douluo-ui'; 54 | import 'element-ui/lib/theme-chalk/index.css'; 55 | import 'douluo-ui/lib/css/index.css'; 56 | 57 | Vue.use(ElementUI); 58 | Vue.use(DouluoUI); 59 | ``` 60 | 61 | 62 | ::: tip 63 | 64 | `douluo-ui` 是基于 Element-UI 二次封装的组件库，使用前需要先安装 element-ui 组件库，提供了自定义换肤、自定义组件前缀、丰富的业务组件等功能 65 | -------------------------------------------------------------------------------- /docs/developer/changelog.md: -------------------------------------------------------------------------------- 1 | # 更新日志 2 | 3 | ## [1.1.0](https://github.com/JefferyXZF/douluo-ui/tree/develop)(2022-11-01) 4 | 5 | 6 | #### ✨ Features | 新功能 7 | 8 | 9 | * 新增 Icon 图标 10 | * 新增 Button 按钮 11 | * 新增 Radio 单选框 12 | * 新增 Checkbox 多选框 13 | * 新增 Input 输入框 14 | * 新增 Select 选择器 15 | * 新增 TimePicker 时间选择器 16 | * 新增 DatePicker 日期选择器 17 | * 新增 DateTimePicker 日期时间选择器 18 | * 新增 Form 表单 19 | * 新增 Table 表格 20 | * 新增 Pagination 分页 21 | * 新增 Empty 空状态 22 | * 新增 Dialog 对话框 23 | * 新增 Tooltip 文字提示 24 | * 新增 Popover 弹出框 25 | * 新增 Popconfirm 气泡确认框 26 | * 新增 Drawer 抽屉 27 | -------------------------------------------------------------------------------- /docs/developer/development-guide.md: -------------------------------------------------------------------------------- 1 | # 开发指南 2 | -------------------------------------------------------------------------------- /docs/developer/installation.md: -------------------------------------------------------------------------------- 1 | # 安装使用 2 | 3 | 此组件库基于 `element-ui` 二次开发。使用前请查看[更新日志](../changelog) 4 | 5 | ## 安装 6 | 7 | 8 | :::: code-group 9 | 10 | ::: code-group-item npm 11 | 12 | ```bash 13 | npm install douluo-ui -S 14 | ``` 15 | 16 | ::: 17 | 18 | ::: code-group-item yarn 19 | 20 | ```bash 21 | yarn add douluo-ui -S 22 | ``` 23 | 24 | ::: 25 | 26 | ::: code-group-item pnpm 27 | 28 | ```bash 29 | pnpm add douluo-ui 30 | ``` 31 | 32 | ::: 33 | 34 | :::: 35 | 36 | ## 使用 37 | 38 | ```js 39 | import ElementUI from 'element-ui'; 40 | import DouluoUI from 'douluo-ui'; 41 | import 'element-ui/lib/theme-chalk/index.css'; 42 | import 'douluo-ui/lib/css/index.css'; 43 | 44 | Vue.use(ElementUI); 45 | Vue.use(DouluoUI); 46 | ``` 47 | -------------------------------------------------------------------------------- /docs/developer/question.md: -------------------------------------------------------------------------------- 1 | # 常见问题 2 | 3 | ### 安装新的插件使用打包失败 4 | 5 | 6 | 7 | ### 8 | -------------------------------------------------------------------------------- /docs/guide/button.md: -------------------------------------------------------------------------------- 1 | # Button 按钮 2 | 3 | buttong 按钮 4 | -------------------------------------------------------------------------------- /docs/guide/concept.md: -------------------------------------------------------------------------------- 1 | # 概念 2 | 3 | ## 物料 4 | 5 | 在中后台系统的开发中，我们早已习惯了基础组件库搭建我们的页面。然而这些基础组件很难完全满足我们的业务需求，实际项目开发中往往包含大量重复的业务场景。这些业务场景很多都是大同小异的，有些是有一定业务逻辑的组件（用户选择器、表单等），另一些是由基础组件和业务组件组合成的列表、模块，还有一些是页面布局、视觉规范、项目工程化等。如何复用这些业务场景，降低中后台系统开发的成本呢？我们通过与其他产品一起共建物料体系，提供丰富的物料来解决这些问题。 6 | 7 | 物料即组成一个前端项目的不同单位，根据抽象粒度的不同，我们将物料从小到大分为 组件（component）、区块（block） 和 模板（template） 。在基于物料体系的开发中，我们使用模板物料来初始化前端工程，提供最佳实践，解决工程问题，再使用区块和组件像搭积木一样快速搭建页面。 8 | 9 | ## 构成 10 | 11 | 物料分为 组件（component）、区块（block） 和 模板（template） 三种类型： 12 | 13 | - 组件（component）：组件是组成页面的基本结构单元，是对局部交互逻辑的抽象和封装。通常需要设计和暴露属性、插槽、事件和方法等 API。使用者根据这些 API 直接使用，一般不需要做二次修改。从业务维度去看，组件又可分为基础组件和业务组件两种： 14 | - 基础组件：与业务无关的组件，基础组件保持统一的视觉规范，考虑高内聚低耦合的设计思想，例如 Button、Input、Table 等； 15 | - 业务组件：面向业务的组件，一般功能比较确定可复用，同时复杂度较高，例如富文本、大文件上传等。 16 | - 区块（block）：区块可以理解为在页面中，由一些组件组合而成的代码片段。在一个页面中，使用者可以快速把某个区块的代码添加到自身项目里，进行二次修改。 17 | - 模板（template）：项目的样板工程，包含了完整前端项目所有组成部分，包括布局、常用页面、基础插件、工程配置等，用户可以快速初始化项目。 18 | 19 | 基于以上三种不同粒度的物料，开发者可以加速前端项目开发。 20 | -------------------------------------------------------------------------------- /docs/guide/instroduce.md: -------------------------------------------------------------------------------- 1 | # 背景 2 | 3 | 随着公司业务的扩张和增长，自研产品数量越来越多，系统也变得更复杂。高频的产品迭代，需要设计师、开发、产品经理能快速做出响应。另一方面，市场同类的产品和服务层出不穷，客户也开始对企业级的中后台产品追求更好的用户体验。我们迫切需要提升产品的商业价值和市场竞争力，打造使客户满意、用户满意的具备有用性、可用性和吸引力的产品。 4 | 5 | 为了提高产品的研发效率，我们经过大量的产品、项目实践和总结，沉淀出一个企业级的 Web 设计指南。旨在统一企业级的产品设计和前端开发，减少不必要的设计差异和实现成本，提升效率，节约设计和前端的研发资源，帮助设计师们创建易用性和实用性较强的产品和应用程序。 6 | -------------------------------------------------------------------------------- /docs/packages/business/cropper.md: -------------------------------------------------------------------------------- 1 | # 图片裁剪 2 | 3 | 图片裁剪组件说明文档 4 | 5 | 6 | -------------------------------------------------------------------------------- /docs/packages/business/rich-text.md: -------------------------------------------------------------------------------- 1 | # 富文本 2 | 3 | 富文本组件说明文档 4 | -------------------------------------------------------------------------------- /docs/packages/element/backtop.md: -------------------------------------------------------------------------------- 1 | # Backtop 回到顶部 2 | 3 | 返回页面顶部的操作按钮 4 | 5 | ### 基础用法 6 | 7 | 滑动页面即可看到右下方的按钮。 8 | :::demo 9 | 10 | ```html 11 | 15 | ``` 16 | 17 | ::: 18 | 19 | ### 自定义显示内容 20 | 21 | 显示区域被固定为 40px \* 40px 的区域, 其中的内容可支持自定义。 22 | :::demo 23 | 24 | ```html 25 | 43 | ``` 44 | 45 | ::: 46 | 47 | ### Attributes 48 | 49 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 50 | | ----------------- | -------------------------------- | --------------- | ------ | ------ | 51 | | target | 触发滚动的对象 | string | | | 52 | | visibility-height | 滚动高度达到此参数值才出现 | number | | 200 | 53 | | right | 控制其显示位置, 距离页面右边距 | number | | 40 | 54 | | bottom | 控制其显示位置, 距离页面底部距离 | number | | 40 | 55 | 56 | ### Events 57 | 58 | | 事件名 | 说明 | 回调参数 | 59 | | ------ | ------------------ | -------- | 60 | | click | 点击按钮触发的事件 | 点击事件 | 61 | -------------------------------------------------------------------------------- /docs/packages/element/breadcrumb.md: -------------------------------------------------------------------------------- 1 | # Breadcrumb 面包屑 2 | 显示当前页面的路径，快速返回之前的任意页面。 3 | 4 | ### 基础用法 5 | 6 | 适用广泛的基础用法。 7 | 8 | :::demo 在`el-breadcrumb`中使用`el-breadcrumb-item`标签表示从首页开始的每一级。Element 提供了一个`separator`属性，在`el-breadcrumb`标签中设置它来决定分隔符，它只能是字符串，默认为斜杠`/`。 9 | 10 | ```html 11 | 12 | 首页 13 | 活动管理 14 | 活动列表 15 | 活动详情 16 | 17 | ``` 18 | ::: 19 | 20 | ### 图标分隔符 21 | 22 | :::demo 通过设置 `separator-class` 可使用相应的 `iconfont` 作为分隔符，注意这将使 `separator` 设置失效 23 | 24 | ```html 25 | 26 | 首页 27 | 活动管理 28 | 活动列表 29 | 活动详情 30 | 31 | ``` 32 | ::: 33 | 34 | ### Breadcrumb Attributes 35 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 36 | |---------- |-------------- |---------- |-------------------------------- |-------- | 37 | | separator | 分隔符 | string | — | 斜杠'/' | 38 | | separator-class | 图标分隔符 class | string | — | - | 39 | 40 | ### Breadcrumb Item Attributes 41 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 42 | |---------- |-------------- |---------- |-------------------------------- |-------- | 43 | | to | 路由跳转对象，同 `vue-router` 的 `to` | string/object | — | — | 44 | | replace | 在使用 to 进行路由跳转时，启用 replace 将不会向 history 添加新记录 | boolean | — | false | 45 | -------------------------------------------------------------------------------- /docs/packages/element/calendar.md: -------------------------------------------------------------------------------- 1 | # Calendar calendar 2 | 3 | 显示日期 4 | 5 | ### 基本 6 | 7 | :::demo 设置 `value` 来指定当前显示的月份。如果 `value` 未指定，则显示当月。`value` 支持 `v-model` 双向绑定。 8 | ```html 9 | 10 | 11 | 12 | 21 | ``` 22 | ::: 23 | 24 | ### 自定义内容 25 | 26 | :::demo 通过设置名为 `dateCell` 的 `scoped-slot` 来自定义日历单元格中显示的内容。在 `scoped-slot` 可以获取到 date（当前单元格的日期）, data（包括 type，isSelected，day 属性）。详情解释参考下方的 API 文档。 27 | ```html 28 | 29 | 30 | 37 | 38 | 43 | ``` 44 | ::: 45 | 46 | ### 自定义范围 47 | 48 | :::demo 设置 `range` 属性指定日历的显示范围。开始时间必须是周起始日，结束时间必须是周结束日，且时间跨度不能超过两个月。 49 | ```html 50 | 51 | 52 | ``` 53 | ::: 54 | 55 | ### Attributes 56 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 57 | |-----------------|-------------- |---------- |------------ |-------- | 58 | | value / v-model | 绑定值 | Date/string/number | — | — | 59 | | range | 时间范围，包括开始时间与结束时间。开始时间必须是周一，结束时间必须是周日，且时间跨度不能超过两个月。 | Array | — | — | 60 | | first-day-of-week | 周起始日 | Number | 1 到 7 | 1 | 61 | 62 | ### dateCell scoped slot 参数 63 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 64 | |-----------------|-------------- |---------- |------------ |-------- | 65 | | date | 单元格代表的日期 | Date | — | — | 66 | | data | { type, isSelected, day}，`type` 表示该日期的所属月份，可选值有 prev-month，current-month，next-month；`isSelected` 标明该日期是否被选中；`day` 是格式化的日期，格式为 yyyy-MM-dd | Object | — | — | 67 | -------------------------------------------------------------------------------- /docs/packages/element/divider.md: -------------------------------------------------------------------------------- 1 | # Divider 分割线 2 | 3 | 区隔内容的分割线。 4 | 5 | ### 基础用法 6 | 7 | 对不同章节的文本段落进行分割。 8 | 9 | :::demo 10 | ```html 11 | 18 | ``` 19 | ::: 20 | 21 | ### 设置文案 22 | 23 | 可以在分割线上自定义文案内容。 24 | 25 | 26 | :::demo 27 | ```html 28 | 38 | ``` 39 | ::: 40 | 41 | ### 垂直分割 42 | 43 | :::demo 44 | ```html 45 | 54 | ``` 55 | ::: 56 | 57 | ### Divider Attributes 58 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 59 | |------------- |---------------- |---------------- |---------------------- |-------- | 60 | | direction | 设置分割线方向 | string | horizontal / vertical | horizontal | 61 | | content-position | 设置分割线文案的位置 | string | left / right / center | center | 62 | -------------------------------------------------------------------------------- /docs/packages/element/empty.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Empty 空状态 3 | pageClass: demo-empty 4 | icon: new 5 | --- 6 | 7 | 空状态时的占位提示。 8 | 9 | ### 基础用法 10 | 11 | :::demo 12 | 13 | ```html 14 | 15 | ``` 16 | ::: 17 | 18 | ### 自定义图片 19 | 20 | 通过设置 `image` 属性传入图片 URL。 21 | 22 | :::demo 23 | 24 | ```html 25 | 26 | ``` 27 | ::: 28 | 29 | ### 图片尺寸 30 | 31 | 通过设置 `image-size` 属性来控制图片大小。 32 | 33 | :::demo 34 | 35 | ```html 36 | 37 | ``` 38 | ::: 39 | 40 | ### 底部内容 41 | 42 | 使用默认插槽可在底部插入内容。 43 | 44 | :::demo 45 | ```html 46 | 47 | 按钮 48 | 49 | ``` 50 | ::: 51 | 52 | ### Empty Attributes 53 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 54 | |------------- |---------------- |---------------- |---------------------- |-------- | 55 | | image | 图片地址 | string | — | — | 56 | | image-size | 图片大小（宽度） | number | — | — | 57 | | description | 文本描述 | string | — | — | 58 | 59 | ### Empty Slots 60 | 61 | | Name | 说明 | 62 | |------|--------| 63 | | default | 自定义底部内容 | 64 | | image | 自定义图片 | 65 | | description | 自定义描述文字 | 66 | -------------------------------------------------------------------------------- /docs/packages/element/icon.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Icon 图标 3 | pageClass: demo-icon 4 | icon: new 5 | --- 6 | 7 | 提供了一套常用的图标集合。 8 | 9 | ### 使用方法 10 | 11 | 直接通过设置类名为 `el-icon-iconName` 来使用即可。例如： 12 | 13 | :::demo 14 | ```html 15 | 16 | 17 | 18 | 搜索 19 | 20 | ``` 21 | ::: 22 | 23 | ### 组件库图标集合 24 | 25 | 26 |
    27 |
  • 28 | 29 | 30 | {{'el-icon-' + name}} 31 | 32 |
    • 33 |
34 | 35 | 36 | ### element-ui 图标集合 37 | 38 | 39 | 40 |
    41 |
  • 42 | 43 | 44 | {{'el-icon-' + name}} 45 | 46 |
    • 47 |
48 | 49 | -------------------------------------------------------------------------------- /docs/packages/element/infiniteScroll.md: -------------------------------------------------------------------------------- 1 | # InfiniteScroll 无限滚动 2 | 3 | 滚动至底部时，加载更多数据。 4 | 5 | ### 基础用法 6 | 在要实现滚动加载的列表上上添加`v-infinite-scroll`，并赋值相应的加载方法，可实现滚动到底部时自动执行加载方法。 7 | :::demo 8 | ```html 9 | 14 | 15 | 29 | ``` 30 | ::: 31 | 32 | ### 禁用加载 33 | 34 | :::demo 35 | ```html 36 | 48 | 49 | 76 | ``` 77 | ::: 78 | 79 | 80 | ### Attributes 81 | 82 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 83 | | -------------- | ------------------------------ | --------- | ------------------------------------ | ------- | 84 | | infinite-scroll-disabled | 是否禁用 | boolean | - |false | 85 | | infinite-scroll-delay | 节流时延，单位为ms | number | - |200 | 86 | | infinite-scroll-distance| 触发加载的距离阈值，单位为px | number |- |0 | 87 | | infinite-scroll-immediate | 是否立即执行加载方法，以防初始状态下内容无法撑满容器。| boolean | - |true | 88 | -------------------------------------------------------------------------------- /docs/packages/element/installation.md: -------------------------------------------------------------------------------- 1 | # 安装 2 | 3 | ### npm 安装 4 | 5 | 推荐使用 npm 的方式安装，它能更好地和 [webpack](https://webpack.js.org/) 打包工具配合使用。 6 | 7 | ```shell 8 | npm i element-ui -S 9 | ``` 10 | 11 | ### CDN 12 | 13 | 目前可以通过 [unpkg.com/element-ui](https://unpkg.com/element-ui/) 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。 14 | 15 | ```html 16 | 17 | 18 | 19 | 20 | ``` 21 | 22 | :::tip 23 | 我们建议使用 CDN 引入 Element 的用户在链接地址上锁定版本，以免将来 Element 升级时受到非兼容性更新的影响。锁定版本的方法请查看 [unpkg.com](https://unpkg.com)。 24 | ::: 25 | 26 | ### Hello world 27 | 28 | 通过 CDN 的方式我们可以很容易地使用 Element 写出一个 Hello world 页面。[在线演示](https://codepen.io/ziyoung/pen/rRKYpd) 29 | 30 | 34 | 35 | 如果是通过 npm 安装，并希望配合 webpack 使用，请阅读下一节：[快速上手](/#/zh-CN/component/quickstart)。 36 | -------------------------------------------------------------------------------- /docs/packages/element/link.md: -------------------------------------------------------------------------------- 1 | # Link 文字链接 2 | 3 | 文字超链接 4 | 5 | ### 基础用法 6 | 基础的文字链接用法。 7 | :::demo 8 | ```html 9 |
10 | 默认链接 11 | 主要链接 12 | 成功链接 13 | 警告链接 14 | 危险链接 15 | 信息链接 16 |
17 | ``` 18 | ::: 19 | 20 | ### 禁用状态 21 | 文字链接不可用状态。 22 | :::demo 23 | ```html 24 |
25 | 默认链接 26 | 主要链接 27 | 成功链接 28 | 警告链接 29 | 危险链接 30 | 信息链接 31 |
32 | ``` 33 | ::: 34 | 35 | ### 下划线 36 | 文字链接下划线。 37 | :::demo 38 | ```html 39 |
40 | 无下划线 41 | 有下划线 42 |
43 | ``` 44 | ::: 45 | 46 | ### 图标 47 | 48 | 带图标的文字链接可增强辨识度。 49 | :::demo 50 | ```html 51 |
52 | 编辑 53 | 查看 54 |
55 | ``` 56 | ::: 57 | 58 | ### Attributes 59 | 60 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 61 | | -------------- | ------------------------------ | --------- | ------------------------------------ | ------- | 62 | | type | 类型 | string | primary / success / warning / danger / info | default | 63 | | underline | 是否下划线 | boolean | — | true | 64 | | disabled | 是否禁用状态 | boolean | — | false | 65 | | href | 原生 href 属性 | string | — | - | 66 | | icon | 图标类名 | string | — | - | 67 | -------------------------------------------------------------------------------- /docs/packages/element/page-header.md: -------------------------------------------------------------------------------- 1 | # PageHeader 页头 2 | 3 | 如果页面的路径比较简单，推荐使用页头组件而非面包屑组件。 4 | 5 | ### 基础 6 | 7 | :::demo 8 | ```html 9 | 10 | 11 | 12 | 21 | ``` 22 | ::: 23 | 24 | ### Attributes 25 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 26 | |---------- |-------------- |---------- |------------------------------ | ------ | 27 | | title | 标题 | string | — | 返回 | 28 | | content | 内容 | string | — | — | 29 | 30 | 31 | ### Events 32 | | 事件名称 | 说明 | 回调参数 | 33 | |---------- |-------------- |---------- | 34 | | back | 点击左侧区域触发 | — | 35 | 36 | ### Slots 37 | | 事件名称 | 说明 | 38 | |---------- |------------- | 39 | | title | 标题内容 | 40 | | content | 内容 | 41 | -------------------------------------------------------------------------------- /docs/packages/element/popconfirm.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Popconfirm 气泡确认框 3 | pageClass: demo-popconfirm 4 | icon: new 5 | --- 6 | 7 | 点击元素，弹出气泡确认框。 8 | 9 | ### 基础用法 10 | 11 | Popconfirm 的属性与 Popover 很类似，因此对于重复属性，请参考 Popover 的文档，在此文档中不做详尽解释。 12 | :::demo 在 Popconfirm 中，只有 `title` 属性可用，`content` 属性不会被展示。 13 | ```html 14 | 21 | ```` 22 | ::: 23 | 24 | ### 自定义 25 | 26 | 可以在 Popconfirm 中自定义内容。 27 | :::demo 28 | ```html 29 | 40 | ``` 41 | ::: 42 | 43 | ### Attributes 44 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 45 | |--------------------|----------------------------------------------------------|-------------------|-------------|--------| 46 | | title | 标题 | String | — | — | 47 | | confirm-button-text | 确认按钮文字 | String | — | — | 48 | | cancdl-button-text | 取消按钮文字 | String | — | — | 49 | | confirm-button-type | 确认按钮类型 | String | — | Primary | 50 | | cancdl-button-type | 取消按钮类型 | String | — | Text | 51 | | icon | Icon | String | — | dl-icon-question | 52 | | icon-color | Icon 颜色 | String | — | #f90 | 53 | | hide-icon | 是否隐藏 Icon | Boolean | — | false | 54 | 55 | ### Slot 56 | | 参数 | 说明 | 57 | |--- | ---| 58 | | reference | 触发 Popconfirm 显示的 HTML 元素 | 59 | 60 | ### Events 61 | | 事件名称 | 说明 | 回调参数 | 62 | |---------|--------|---------| 63 | | confirm | 点击确认按钮时触发 | — | 64 | | cancel | 点击取消按钮时触发 | — | 65 | -------------------------------------------------------------------------------- /docs/packages/element/result.md: -------------------------------------------------------------------------------- 1 | # Result 结果 2 | 3 | 用于对用户的操作结果或者异常状态做反馈。 4 | 5 | ### 基础用法 6 | 7 | :::demo 8 | 9 | ```html 10 | 11 | 12 | 13 | 16 | 17 | 18 | 19 | 20 | 23 | 24 | 25 | 26 | 27 | 30 | 31 | 32 | 33 | 34 | 37 | 38 | 39 | 40 | ``` 41 | 42 | ::: 43 | 44 | ### 自定义内容 45 | 46 | :::demo 47 | 48 | ```html 49 | 50 | 53 | 56 | 57 | ``` 58 | 59 | ::: 60 | 61 | ### Result Attributes 62 | 63 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 64 | |------------- |---------------- |---------------- |---------------------- |-------- | 65 | | title | 标题 | string | — | — | 66 | | sub-title | 二级标题 | string | — | — | 67 | | icon | 图标类型 | string | success / warning / info / error | info | 68 | 69 | ### Result Slots 70 | 71 | | Name | 说明 | 72 | |------|--------| 73 | | icon | 自定义图标 | 74 | | title | 自定义标题 | 75 | | subTitle | 自定义二级标题 | 76 | | extra | 自定义底部额外区域 | 77 | -------------------------------------------------------------------------------- /examples/assets/json/dl-icon.json: -------------------------------------------------------------------------------- 1 | ["warning","info","lock","check","success","error","help","reflesh","setting","pass","delete","star","yanjing","right","left","review"] 2 | -------------------------------------------------------------------------------- /examples/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebJeffery/douluo-ui/6c83bdeb013e15083b6474dfcece7a0417dc9904/examples/assets/logo.png -------------------------------------------------------------------------------- /examples/assets/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/main.js: -------------------------------------------------------------------------------- 1 | // main.js 2 | import Vue from 'vue' 3 | import App from './src/App.vue' 4 | import router from './src/router/index.js' 5 | 6 | import ElementUI from 'element-ui' 7 | import 'element-ui/lib/theme-chalk/index.css' 8 | 9 | // 本地安装组件测试的包 10 | // import DouluoUI from 'douluo-ui' 11 | // import 'douluo-ui/lib/theme/index.css' 12 | 13 | import DouluoUI from '../src/index.js' 14 | import '../styles/src/index.scss' 15 | 16 | Vue.use(ElementUI) 17 | Vue.use(DouluoUI) 18 | 19 | const creatApp = async () => { 20 | try { 21 | await DouluoUI.updateUITheme({ 22 | primaryColor: '#FFAA00', 23 | primarySecondColor: '#231909' 24 | }) 25 | 26 | new Vue({ 27 | el: '#app', 28 | router, 29 | render: (h) => h(App) 30 | }).$mount() 31 | } catch (error) { 32 | new Vue({ 33 | el: '#app', 34 | router, 35 | render: (h) => h(App) 36 | }).$mount() 37 | console.error('主题更新失败') 38 | } 39 | } 40 | 41 | creatApp() 42 | -------------------------------------------------------------------------------- /examples/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 23 | 24 | 32 | -------------------------------------------------------------------------------- /examples/src/layout/components/AppMain.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 21 | 22 | -------------------------------------------------------------------------------- /examples/src/layout/components/index.js: -------------------------------------------------------------------------------- 1 | export { default as AppMain } from './AppMain.vue' 2 | export { default as Sidebar } from './Sidebar/index.vue' 3 | -------------------------------------------------------------------------------- /examples/src/layout/components/sidebar/index.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 39 | 40 | 45 | -------------------------------------------------------------------------------- /examples/src/layout/index.vue: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | 22 | 23 | 35 | -------------------------------------------------------------------------------- /examples/src/utils/validate.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @param {string} path 3 | * @returns {Boolean} 4 | */ 5 | export function isExternal(path) { 6 | return /^(https?:|mailto:|tel:)/.test(path) 7 | } 8 | -------------------------------------------------------------------------------- /examples/src/views/button/index.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 18 | -------------------------------------------------------------------------------- /examples/src/views/checkbox/index.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 18 | -------------------------------------------------------------------------------- /examples/src/views/datePicker/components/datePicker1.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 61 | 69 | -------------------------------------------------------------------------------- /examples/src/views/datePicker/components/datePicker2.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 40 | 47 | -------------------------------------------------------------------------------- /examples/src/views/datePicker/components/datePicker3.vue: -------------------------------------------------------------------------------- 1 | 30 | 31 | 72 | 80 | -------------------------------------------------------------------------------- /examples/src/views/datePicker/components/datePicker4.vue: -------------------------------------------------------------------------------- 1 | 30 | 31 | 68 | 76 | -------------------------------------------------------------------------------- /examples/src/views/datePicker/components/datePicker5.vue: -------------------------------------------------------------------------------- 1 | 34 | 35 | 46 | -------------------------------------------------------------------------------- /examples/src/views/datePicker/components/datePicker6.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 25 | -------------------------------------------------------------------------------- /examples/src/views/datePicker/index.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 29 | -------------------------------------------------------------------------------- /examples/src/views/dialog/index.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 18 | -------------------------------------------------------------------------------- /examples/src/views/drawer/index.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 18 | -------------------------------------------------------------------------------- /examples/src/views/empty/demo/demo1.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /examples/src/views/empty/index.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 18 | -------------------------------------------------------------------------------- /examples/src/views/form/demo/demo2.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 38 | -------------------------------------------------------------------------------- /examples/src/views/form/demo/demo3.vue: -------------------------------------------------------------------------------- 1 | 23 | 37 | -------------------------------------------------------------------------------- /examples/src/views/form/demo/demo7.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 49 | -------------------------------------------------------------------------------- /examples/src/views/form/demo/demo8.vue: -------------------------------------------------------------------------------- 1 | 43 | 44 | 67 | -------------------------------------------------------------------------------- /examples/src/views/form/index.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 40 | 41 | 66 | -------------------------------------------------------------------------------- /examples/src/views/icon/index.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 18 | -------------------------------------------------------------------------------- /examples/src/views/input/index.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 18 | -------------------------------------------------------------------------------- /examples/src/views/pagination/index.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 18 | 19 | 29 | -------------------------------------------------------------------------------- /examples/src/views/popconfirm/demo/demo1.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 65 | 66 | 71 | -------------------------------------------------------------------------------- /examples/src/views/popconfirm/index.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 18 | -------------------------------------------------------------------------------- /examples/src/views/popover/index.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 18 | -------------------------------------------------------------------------------- /examples/src/views/radio/index.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 18 | -------------------------------------------------------------------------------- /examples/src/views/select/index.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 18 | -------------------------------------------------------------------------------- /examples/src/views/table/demo/basis-table.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 57 | -------------------------------------------------------------------------------- /examples/src/views/table/demo/border-table.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 49 | -------------------------------------------------------------------------------- /examples/src/views/table/demo/custom-index-table.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 58 | -------------------------------------------------------------------------------- /examples/src/views/table/demo/empty-table.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 33 | -------------------------------------------------------------------------------- /examples/src/views/table/demo/fixed-column-table.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 78 | 79 | 88 | -------------------------------------------------------------------------------- /examples/src/views/table/demo/fixed-header-table.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 40 | -------------------------------------------------------------------------------- /examples/src/views/table/demo/fluid-height-table.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 65 | -------------------------------------------------------------------------------- /examples/src/views/table/demo/multiple-table.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 76 | -------------------------------------------------------------------------------- /examples/src/views/table/demo/pagination-table.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 78 | -------------------------------------------------------------------------------- /examples/src/views/table/demo/radio-table.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 72 | -------------------------------------------------------------------------------- /examples/src/views/table/demo/sort-table.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 62 | -------------------------------------------------------------------------------- /examples/src/views/table/demo/status-table.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 64 | 65 | 74 | -------------------------------------------------------------------------------- /examples/src/views/table/demo/stripe-table.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 49 | -------------------------------------------------------------------------------- /examples/src/views/tag/demo/demo1.vue: -------------------------------------------------------------------------------- 1 | 42 | -------------------------------------------------------------------------------- /examples/src/views/tag/index.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 18 | -------------------------------------------------------------------------------- /examples/src/views/timePicker/components/timePicker1.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 27 | -------------------------------------------------------------------------------- /examples/src/views/timePicker/components/timePicker2.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 33 | -------------------------------------------------------------------------------- /examples/src/views/timePicker/components/timePicker3.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 37 | -------------------------------------------------------------------------------- /examples/src/views/timePicker/components/timePicker4.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 35 | -------------------------------------------------------------------------------- /examples/src/views/timePicker/index.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 22 | -------------------------------------------------------------------------------- /examples/src/views/tooltip/index.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 18 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const path = require('path') 4 | const { series, src, dest } = require('gulp'); 5 | const gulpSass = require('gulp-sass'); 6 | const dartSass = require('sass') 7 | const autoprefixer = require('gulp-autoprefixer'); 8 | const cssmin = require('gulp-cssmin'); 9 | 10 | const distFolder = path.resolve(__dirname, 'styles') 11 | 12 | function compileIndex() { 13 | const sass = gulpSass(dartSass) 14 | return src('./styles/src/**.scss') 15 | .pipe(sass.sync()) 16 | .pipe(autoprefixer({ 17 | browsers: ['ie > 9', 'last 2 versions'], 18 | cascade: false 19 | })) 20 | .pipe(cssmin()) 21 | .pipe(dest('./styles/theme')); 22 | } 23 | 24 | const compileElement = function () { 25 | const sass = gulpSass(dartSass) 26 | return src('./styles/src/element-ui/**.scss') 27 | .pipe(sass.sync()) 28 | .pipe(autoprefixer({ 29 | browsers: ['ie > 9', 'last 2 versions'], 30 | cascade: false 31 | })) 32 | .pipe(cssmin()) 33 | .pipe(dest('./styles/theme/element-ui')); 34 | 35 | } 36 | 37 | /** 38 | * copy from packages/theme-chalk/dist to dist/element-plus/theme-chalk 39 | */ 40 | function copyThemeChalkBundle() { 41 | return src(`${distFolder}/theme/**`).pipe(dest('./lib/theme')) 42 | } 43 | 44 | function copyfont() { 45 | return src(`${distFolder}/src/fonts/**`) 46 | .pipe(cssmin()) 47 | .pipe(dest('./lib/theme/fonts')); 48 | } 49 | 50 | exports.build = series( 51 | compileIndex, 52 | compileElement, 53 | copyThemeChalkBundle, 54 | copyfont 55 | ); 56 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Vite App 7 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "experimentalDecorators": true, 4 | "baseUrl": ".", 5 | "paths": { 6 | "@/*": ["./examples/*"], 7 | "src/*": ["./src/*"], 8 | } 9 | }, 10 | "implicitProjectConfig":{ 11 | "experimentalDecorators": true 12 | }, 13 | "exclude": ["node_modules", "dist"] 14 | } 15 | 16 | -------------------------------------------------------------------------------- /packages/element-ui/button/index.js: -------------------------------------------------------------------------------- 1 | import Button from './src/button.vue' 2 | import { createNamespace } from '../../../src/utils/use-namespace.js' 3 | 4 | Button.install = (Vue, options = {}) => { 5 | Vue.component(createNamespace('button', { prefix: options.prefix }), Button) 6 | } 7 | 8 | export default Button 9 | -------------------------------------------------------------------------------- /packages/element-ui/button/src/button.vue: -------------------------------------------------------------------------------- 1 | 32 | 86 | -------------------------------------------------------------------------------- /packages/element-ui/checkbox-button/index.js: -------------------------------------------------------------------------------- 1 | import CheckboxButton from '../checkbox/src/checkbox-button.vue' 2 | import { createNamespace } from '../../../src/utils/use-namespace.js' 3 | 4 | CheckboxButton.install = (Vue, options = {}) => { 5 | Vue.component(createNamespace('CheckboxButton', { prefix: options.prefix }), CheckboxButton) 6 | } 7 | 8 | export default CheckboxButton 9 | -------------------------------------------------------------------------------- /packages/element-ui/checkbox-group/index.js: -------------------------------------------------------------------------------- 1 | import CheckboxGroup from '../checkbox/src/checkbox-group.vue' 2 | import { createNamespace } from '../../../src/utils/use-namespace.js' 3 | 4 | CheckboxGroup.install = (Vue, options = {}) => { 5 | Vue.component(createNamespace('CheckboxGroup', { prefix: options.prefix }), CheckboxGroup) 6 | } 7 | 8 | export default CheckboxGroup 9 | -------------------------------------------------------------------------------- /packages/element-ui/checkbox/index.js: -------------------------------------------------------------------------------- 1 | import Checkbox from './src/checkbox.vue' 2 | import { createNamespace } from '../../../src/utils/use-namespace.js' 3 | 4 | Checkbox.install = (Vue, options = {}) => { 5 | Vue.component(createNamespace('Checkbox', { prefix: options.prefix }), Checkbox) 6 | } 7 | 8 | export default Checkbox 9 | -------------------------------------------------------------------------------- /packages/element-ui/checkbox/src/checkbox-button.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | -------------------------------------------------------------------------------- /packages/element-ui/checkbox/src/checkbox-group.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 19 | -------------------------------------------------------------------------------- /packages/element-ui/checkbox/src/checkbox.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 56 | -------------------------------------------------------------------------------- /packages/element-ui/date-picker/index.js: -------------------------------------------------------------------------------- 1 | import DatePicker from './src/date-picker.vue' 2 | import { createNamespace } from '../../../src/utils/use-namespace.js' 3 | 4 | DatePicker.install = (Vue, options = {}) => { 5 | Vue.component(createNamespace('datePicker', { prefix: options.prefix }), DatePicker) 6 | } 7 | 8 | export default DatePicker 9 | -------------------------------------------------------------------------------- /packages/element-ui/date-picker/src/date-picker.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 65 | -------------------------------------------------------------------------------- /packages/element-ui/dialog/index.js: -------------------------------------------------------------------------------- 1 | import Dialog from './src/dialog.vue' 2 | import { createNamespace } from '../../../src/utils/use-namespace.js' 3 | 4 | Dialog.install = (Vue, options = {}) => { 5 | Vue.component(createNamespace('Dialog', { prefix: options.prefix }), Dialog) 6 | } 7 | 8 | export default Dialog 9 | -------------------------------------------------------------------------------- /packages/element-ui/dialog/src/dialog.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 36 | -------------------------------------------------------------------------------- /packages/element-ui/drawer/index.js: -------------------------------------------------------------------------------- 1 | import Drawer from './src/drawer.vue' 2 | import { createNamespace } from '../../../src/utils/use-namespace.js' 3 | 4 | Drawer.install = (Vue, options = {}) => { 5 | Vue.component(createNamespace('Drawer', { prefix: options.prefix }), Drawer) 6 | } 7 | 8 | export default Drawer 9 | -------------------------------------------------------------------------------- /packages/element-ui/drawer/src/drawer.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 33 | -------------------------------------------------------------------------------- /packages/element-ui/empty/index.js: -------------------------------------------------------------------------------- 1 | import Empty from './src/empty.vue' 2 | import { createNamespace } from '../../../src/utils/use-namespace.js' 3 | 4 | Empty.install = (Vue, options = {}) => { 5 | Vue.component(createNamespace('Empty', { prefix: options.prefix }), Empty) 6 | } 7 | 8 | export default Empty 9 | -------------------------------------------------------------------------------- /packages/element-ui/empty/src/empty.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 53 | -------------------------------------------------------------------------------- /packages/element-ui/form-item/index.js: -------------------------------------------------------------------------------- 1 | import FormItem from '../form/src/form-item.vue' 2 | import { createNamespace } from '../../../src/utils/use-namespace.js' 3 | 4 | FormItem.install = (Vue, options = {}) => { 5 | Vue.component(createNamespace('FormItem', { prefix: options.prefix }), FormItem) 6 | } 7 | 8 | export default FormItem 9 | -------------------------------------------------------------------------------- /packages/element-ui/form/index.js: -------------------------------------------------------------------------------- 1 | import Form from './src/form.vue' 2 | import { createNamespace } from '../../../src/utils/use-namespace.js' 3 | 4 | Form.install = (Vue, options = {}) => { 5 | Vue.component(createNamespace('Form', { prefix: options.prefix }), Form) 6 | } 7 | 8 | export default Form 9 | -------------------------------------------------------------------------------- /packages/element-ui/form/src/form-item.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 40 | -------------------------------------------------------------------------------- /packages/element-ui/form/src/form.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 50 | -------------------------------------------------------------------------------- /packages/element-ui/icon/index.js: -------------------------------------------------------------------------------- 1 | import Icon from './src/icon.vue' 2 | import { createNamespace } from '../../../src/utils/use-namespace.js' 3 | 4 | Icon.install = (Vue, options = {}) => { 5 | Vue.component(createNamespace('icon', { prefix: options.prefix }), Icon) 6 | } 7 | 8 | export default Icon 9 | -------------------------------------------------------------------------------- /packages/element-ui/icon/src/icon.vue: -------------------------------------------------------------------------------- 1 | 59 | -------------------------------------------------------------------------------- /packages/element-ui/input/index.js: -------------------------------------------------------------------------------- 1 | import Input from './src/input.vue' 2 | import { createNamespace } from '../../../src/utils/use-namespace.js' 3 | 4 | Input.install = (Vue, options = {}) => { 5 | Vue.component(createNamespace('Input', { prefix: options.prefix }), Input) 6 | } 7 | 8 | export default Input 9 | -------------------------------------------------------------------------------- /packages/element-ui/input/src/input.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 58 | -------------------------------------------------------------------------------- /packages/element-ui/pagination/index.js: -------------------------------------------------------------------------------- 1 | import Pagination from './src/pagination.vue' 2 | import { createNamespace } from '../../../src/utils/use-namespace.js' 3 | 4 | Pagination.install = (Vue, options = {}) => { 5 | Vue.component(createNamespace('Pagination', { prefix: options.prefix }), Pagination) 6 | } 7 | 8 | export default Pagination 9 | -------------------------------------------------------------------------------- /packages/element-ui/pagination/src/pagination.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 71 | -------------------------------------------------------------------------------- /packages/element-ui/popconfirm/index.js: -------------------------------------------------------------------------------- 1 | import Popconfirm from './src/popconfirm.vue' 2 | import { createNamespace } from '../../../src/utils/use-namespace.js' 3 | 4 | Popconfirm.install = (Vue, options = {}) => { 5 | Vue.component(createNamespace('Popconfirm', { prefix: options.prefix }), Popconfirm) 6 | } 7 | 8 | export default Popconfirm 9 | -------------------------------------------------------------------------------- /packages/element-ui/popconfirm/src/popconfirm.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 22 | -------------------------------------------------------------------------------- /packages/element-ui/popover/index.js: -------------------------------------------------------------------------------- 1 | import Popover from './src/popover.vue' 2 | import { createNamespace } from '../../../src/utils/use-namespace.js' 3 | 4 | Popover.install = (Vue, options = {}) => { 5 | Vue.component(createNamespace('Popover', { prefix: options.prefix }), Popover) 6 | } 7 | 8 | export default Popover 9 | -------------------------------------------------------------------------------- /packages/element-ui/popover/src/popover.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 22 | -------------------------------------------------------------------------------- /packages/element-ui/radio-button/index.js: -------------------------------------------------------------------------------- 1 | import RadioButton from '../radio/src/radio-button.vue' 2 | import { createNamespace } from '../../../src/utils/use-namespace.js' 3 | 4 | RadioButton.install = (Vue, options = {}) => { 5 | Vue.component(createNamespace('RadioButton', { prefix: options.prefix }), RadioButton) 6 | } 7 | 8 | export default RadioButton 9 | -------------------------------------------------------------------------------- /packages/element-ui/radio-group/index.js: -------------------------------------------------------------------------------- 1 | import RadioGroup from '../radio/src/radio-group.vue' 2 | import { createNamespace } from '../../../src/utils/use-namespace.js' 3 | 4 | RadioGroup.install = (Vue, options = {}) => { 5 | Vue.component(createNamespace('RadioGroup', { prefix: options.prefix }), RadioGroup) 6 | } 7 | 8 | export default RadioGroup 9 | -------------------------------------------------------------------------------- /packages/element-ui/radio/index.js: -------------------------------------------------------------------------------- 1 | import Radio from './src/radio.vue' 2 | import { createNamespace } from '../../../src/utils/use-namespace.js' 3 | 4 | Radio.install = (Vue, options = {}) => { 5 | Vue.component(createNamespace('Radio', { prefix: options.prefix }), Radio) 6 | } 7 | 8 | export default Radio 9 | -------------------------------------------------------------------------------- /packages/element-ui/radio/src/radio-button.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 21 | -------------------------------------------------------------------------------- /packages/element-ui/radio/src/radio-group.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 19 | -------------------------------------------------------------------------------- /packages/element-ui/radio/src/radio.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 30 | -------------------------------------------------------------------------------- /packages/element-ui/select/index.js: -------------------------------------------------------------------------------- 1 | import Select from './src/select.vue' 2 | import { createNamespace } from '../../../src/utils/use-namespace.js' 3 | 4 | Select.install = (Vue, options = {}) => { 5 | Vue.component(createNamespace('Select', { prefix: options.prefix }), Select) 6 | } 7 | 8 | export default Select 9 | -------------------------------------------------------------------------------- /packages/element-ui/table-column/index.js: -------------------------------------------------------------------------------- 1 | import TableColumn from '../table/src/column.vue' 2 | import { createNamespace } from '../../../src/utils/use-namespace.js' 3 | 4 | TableColumn.install = (Vue, options = {}) => { 5 | Vue.component(createNamespace('TableColumn', { prefix: options.prefix }), TableColumn) 6 | } 7 | 8 | export default TableColumn 9 | -------------------------------------------------------------------------------- /packages/element-ui/table/index.js: -------------------------------------------------------------------------------- 1 | import Table from './src/table.vue' 2 | import { createNamespace } from '../../../src/utils/use-namespace.js' 3 | 4 | Table.install = (Vue, options = {}) => { 5 | Vue.component(createNamespace('Table', { prefix: options.prefix }), Table) 6 | } 7 | 8 | export default Table 9 | -------------------------------------------------------------------------------- /packages/element-ui/table/src/forced.jsx: -------------------------------------------------------------------------------- 1 | export default { 2 | selection: { 3 | renderHeader: (h, { store }) => { 4 | return ( 5 | 0 && !store.states.isAllSelected 9 | } 10 | nativeOn-click={store.toggleAllSelection} 11 | value={store.states.isAllSelected} 12 | /> 13 | ) 14 | }, 15 | renderCell: (h, { row, column, store, $index }) => { 16 | return ( 17 | event.stopPropagation()} 19 | value={store.isSelected(row)} 20 | disabled={ 21 | column.selectable 22 | ? !column.selectable.call(null, row, $index) 23 | : false 24 | } 25 | on-input={() => { 26 | store.commit('rowSelectedChanged', row) 27 | }} 28 | /> 29 | ) 30 | }, 31 | sortable: false, 32 | resizable: false 33 | }, 34 | index: { 35 | renderHeader: (h, scope) => { 36 | return {scope.column.label || '#'} 37 | }, 38 | renderCell: (h, { $index, column }) => { 39 | let i = $index + 1 40 | const index = column.index 41 | 42 | if (typeof index === 'number') { 43 | i = $index + index 44 | } else if (typeof index === 'function') { 45 | i = index($index) 46 | } 47 | 48 | return
{i}
49 | }, 50 | sortable: false 51 | }, 52 | expand: { 53 | renderHeader: (h, scope) => { 54 | return {scope.column.label || ''} 55 | }, 56 | renderCell: (h, { row, store }, proxy) => { 57 | const expanded = store.states.expandRows.indexOf(row) > -1 58 | return ( 59 |
proxy.handleExpandClick(row, e)} 65 | > 66 | 67 |
68 | ) 69 | }, 70 | sortable: false, 71 | resizable: false, 72 | className: 'el-table__expand-column' 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /packages/element-ui/table/src/render.vue: -------------------------------------------------------------------------------- 1 | 2 | 15 | -------------------------------------------------------------------------------- /packages/element-ui/tag-group/index.js: -------------------------------------------------------------------------------- 1 | import TagGroup from '../tag/src/tag-group.vue' 2 | import { createNamespace } from '../../../src/utils/use-namespace.js' 3 | 4 | TagGroup.install = (Vue, options = {}) => { 5 | Vue.component(createNamespace('TagGroup', { prefix: options.prefix }), TagGroup) 6 | } 7 | 8 | export default TagGroup 9 | -------------------------------------------------------------------------------- /packages/element-ui/tag/index.js: -------------------------------------------------------------------------------- 1 | import Tag from './src/tag.vue' 2 | import { createNamespace } from '../../../src/utils/use-namespace.js' 3 | 4 | Tag.install = (Vue, options = {}) => { 5 | Vue.component(createNamespace('tag', { prefix: options.prefix }), Tag) 6 | } 7 | 8 | export default Tag 9 | -------------------------------------------------------------------------------- /packages/element-ui/tag/src/tag-group.vue: -------------------------------------------------------------------------------- 1 | 22 | 68 | -------------------------------------------------------------------------------- /packages/element-ui/tag/src/tag.vue: -------------------------------------------------------------------------------- 1 | 13 | 40 | -------------------------------------------------------------------------------- /packages/element-ui/time-picker/index.js: -------------------------------------------------------------------------------- 1 | import TimePicker from './src/time-picker.vue' 2 | import { createNamespace } from '../../../src/utils/use-namespace.js' 3 | 4 | TimePicker.install = (Vue, options = {}) => { 5 | Vue.component(createNamespace('TimePicker', { prefix: options.prefix }), TimePicker) 6 | } 7 | 8 | export default TimePicker 9 | -------------------------------------------------------------------------------- /packages/element-ui/time-picker/src/time-picker.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 64 | -------------------------------------------------------------------------------- /packages/element-ui/tooltip/index.js: -------------------------------------------------------------------------------- 1 | import Tooltip from './src/tooltip.vue' 2 | import { createNamespace } from '../../../src/utils/use-namespace.js' 3 | 4 | Tooltip.install = (Vue, options = {}) => { 5 | Vue.component(createNamespace('Tooltip', { prefix: options.prefix }), Tooltip) 6 | } 7 | 8 | export default Tooltip 9 | -------------------------------------------------------------------------------- /packages/element-ui/tooltip/src/tooltip.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 22 | -------------------------------------------------------------------------------- /play/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /play/components.d.ts: -------------------------------------------------------------------------------- 1 | // generated by unplugin-vue-components 2 | // We suggest you to commit this file into source control 3 | // Read more: https://github.com/vuejs/core/pull/3399 4 | import '@vue/runtime-core' 5 | 6 | export {} 7 | 8 | declare module '@vue/runtime-core' { 9 | export interface GlobalComponents { 10 | RouterLink: typeof import('vue-router')['RouterLink'] 11 | RouterView: typeof import('vue-router')['RouterView'] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /play/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Vite App 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /play/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "play", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "@vitejs/plugin-legacy": "^2.0.0", 13 | "@vitejs/plugin-vue2": "^1.1.2", 14 | "@vitejs/plugin-vue2-jsx": "^1.0.3", 15 | "unplugin-vue-components": "^0.21.2", 16 | "vite": "^3.0.0" 17 | }, 18 | "dependencies": { 19 | "@types/node": "^18.7.2", 20 | "douluo-ui": "file:douluo-ui-1.0.4.tgz", 21 | "element-ui": "^2.15.9", 22 | "vue": "^2.7.8" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /play/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /play/src/App.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 35 | -------------------------------------------------------------------------------- /play/src/main.js: -------------------------------------------------------------------------------- 1 | // main.js 2 | import Vue from 'vue' 3 | import App from './App.vue' 4 | 5 | import ElementUI from 'element-ui' 6 | import 'element-ui/lib/theme-chalk/index.css' 7 | 8 | // 这是本地组件测试的包 9 | import Button from 'douluo-ui/lib/button' 10 | import 'douluo-ui/lib/theme/index.css' 11 | 12 | // import DouluoUI from '../../src/index' 13 | // import '../../styles/src/index.scss' 14 | // import '../../lib/theme/index.css' 15 | 16 | Vue.use(ElementUI) 17 | Vue.use(Button) 18 | console.log(Button) 19 | 20 | // DouluoUI.updateUITheme({ 21 | // primaryColor: '#FFAA00', 22 | // primarySecondColor: '#231909' 23 | // }) 24 | 25 | new Vue({ 26 | el: '#app', 27 | render: (h) => h(App) 28 | }).$mount() 29 | -------------------------------------------------------------------------------- /play/vite.config.js: -------------------------------------------------------------------------------- 1 | 2 | // https://github.com/antfu/unplugin-vue-components 组件按需引入插件 3 | import Components from 'unplugin-vue-components/vite' 4 | import { ElementUiResolver } from 'unplugin-vue-components/resolvers' 5 | // 兼容 IE 6 | import legacy from '@vitejs/plugin-legacy' 7 | // 分离打包 8 | import { defineConfig, splitVendorChunkPlugin } from 'vite' 9 | // 支持 Vue2 10 | import Vue from '@vitejs/plugin-vue2' 11 | import vueJsx from '@vitejs/plugin-vue2-jsx' 12 | 13 | import { resolve } from 'path' 14 | 15 | export default defineConfig({ 16 | plugins: [ 17 | Vue(), 18 | vueJsx(), 19 | Components({ 20 | resolvers: [ElementUiResolver()], 21 | }), 22 | legacy({ 23 | targets: ['defaults', 'not ie < 9'], 24 | }), 25 | splitVendorChunkPlugin(), 26 | ], 27 | resolve: { 28 | alias: { 29 | src: resolve(__dirname, '../src'), 30 | packages: resolve('../packages') 31 | } 32 | }, 33 | build: { 34 | rollupOptions: { 35 | output: { 36 | manualChunks: { 37 | 'element-ui': ['element-ui'], 38 | }, 39 | }, 40 | }, 41 | } 42 | }) 43 | -------------------------------------------------------------------------------- /prettier.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | // 单行代码的最大宽度 3 | printWidth: 120, 4 | // 指定每个缩进级别的空格数 5 | tabWidth: 2, 6 | // 使用制表符 (tab) 缩进 7 | useTabs: false, 8 | // 在语句末尾打印分号 9 | semi: false, 10 | // 多行时尽可能打印尾随逗号 11 | trailingComma: 'none', 12 | // 使用单引号而不是双引号 13 | singleQuote: true, 14 | // 在对象文字中打印括号之间的空格 15 | bracketSpacing: true, 16 | // 将 > 多行 JSX 元素放在最后一行的末尾，而不是单独放在下一行（不适用于自闭元素）。 17 | jsxBracketSameLine: false, 18 | // auto | lf | crlf | cr 19 | endOfLine: 'lf' 20 | } 21 | -------------------------------------------------------------------------------- /scripts/docs.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | 3 | # 确保脚本抛出遇到的错误 4 | set -e 5 | 6 | # 生成静态文件 7 | npm run docs:build 8 | 9 | # 进入生成的文件夹 10 | cd docs/.vuepress/dist 11 | 12 | # 如果是发布到自定义域名 13 | # echo 'www.example.com' > CNAME 14 | 15 | git init 16 | git add -A 17 | git commit -m 'deploy' 18 | 19 | # 如果发布到 https://.github.io 20 | # git push -f git@github.com:/.github.io.git master 21 | 22 | # 如果发布到 https://.github.io/ 23 | git push -f git@github.com:JefferyXZF/douluo-ui.git master:gh-pages 24 | 25 | cd - 26 | -------------------------------------------------------------------------------- /src/images/default-hospital.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebJeffery/douluo-ui/6c83bdeb013e15083b6474dfcece7a0417dc9904/src/images/default-hospital.png -------------------------------------------------------------------------------- /src/images/default_dep.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebJeffery/douluo-ui/6c83bdeb013e15083b6474dfcece7a0417dc9904/src/images/default_dep.png -------------------------------------------------------------------------------- /src/images/default_doctor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebJeffery/douluo-ui/6c83bdeb013e15083b6474dfcece7a0417dc9904/src/images/default_doctor.png -------------------------------------------------------------------------------- /src/images/default_user.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebJeffery/douluo-ui/6c83bdeb013e15083b6474dfcece7a0417dc9904/src/images/default_user.png -------------------------------------------------------------------------------- /src/images/empty.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebJeffery/douluo-ui/6c83bdeb013e15083b6474dfcece7a0417dc9904/src/images/empty.png -------------------------------------------------------------------------------- /styles/src/element-ui/datePicker.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:map'; 2 | 3 | // 样式变量 4 | @use '../common/var' as *; 5 | // mixin 函数，例如：b()，e()，m() 6 | @use '../mixins/mixins' as *; 7 | // 工具方法 clearfix vertical-center ellipsis 8 | @use '../mixins/utils' as *; 9 | // set-css-var-value set-component-css-var css 变量方法 10 | @use '../mixins/var' as *; 11 | 12 | // 创建组件 css 变量 13 | @include b(date-picker) { 14 | @include set-component-css-var('date-picker', $datepicker); 15 | } 16 | -------------------------------------------------------------------------------- /styles/src/element-ui/dialog.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:map'; 2 | 3 | // 样式变量 4 | @use '../common/var' as *; 5 | // el 命名空间 6 | @use '../mixins/config' as *; 7 | // mixin 函数，例如：b()，e()，m() 8 | @use '../mixins/mixins' as *; 9 | // set-css-var-value set-component-css-var css 变量方法 10 | @use '../mixins/var' as *; 11 | 12 | // 创建组件 css 变量 13 | @include b(dialog) { 14 | @include set-component-css-var('dialog', $dialog); 15 | } 16 | 17 | @include b(dialog) { 18 | 19 | .el-dialog__title { 20 | color: getCssVar('text-color', 'primary'); 21 | } 22 | .el-dialog__body { 23 | color: getCssVar('text-color', 'regular'); 24 | } 25 | .el-dialog__close { 26 | color: getCssVar('text-color', 'secondary'); 27 | 28 | &:focus, 29 | &:hover { 30 | color: getCssVar('color', 'primary'); 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /styles/src/element-ui/drawer.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:map'; 2 | 3 | // 样式变量 4 | @use '../common/var' as *; 5 | // el 命名空间 6 | @use '../mixins/config' as *; 7 | // mixin 函数，例如：b()，e()，m() 8 | @use '../mixins/mixins' as *; 9 | // set-css-var-value set-component-css-var css 变量方法 10 | @use '../mixins/var' as *; 11 | 12 | // 创建组件 css 变量 13 | @include b(drawer) { 14 | @include set-component-css-var('drawer', $drawer); 15 | } 16 | 17 | @include b(drawer) { 18 | 19 | .el-drawer__header { 20 | color: getCssVar('text-color', 'primary'); 21 | } 22 | .el-drawer__body { 23 | color: getCssVar('text-color', 'regular'); 24 | padding: getCssVar('drawer', 'body-padding'); 25 | } 26 | .el-dialog__close { 27 | color: getCssVar('text-color', 'secondary'); 28 | 29 | &:focus, 30 | &:hover { 31 | color: getCssVar('color', 'primary'); 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /styles/src/element-ui/empty.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:map'; 2 | 3 | // 样式变量 4 | @use '../common/var' as *; 5 | // el 命名空间 6 | @use '../mixins/config' as *; 7 | // mixin 函数，例如：b()，e()，m() 8 | @use '../mixins/mixins' as *; 9 | // set-css-var-value set-component-css-var css 变量方法 10 | @use '../mixins/var' as *; 11 | 12 | // 创建组件 css 变量 13 | @include b(empty) { 14 | @include set-component-css-var('empty', $empty); 15 | 16 | display: flex; 17 | justify-content: center; 18 | align-items: center; 19 | flex-direction: column; 20 | text-align: center; 21 | box-sizing: border-box; 22 | padding: getCssVar('empty-padding'); 23 | 24 | @include e(image) { 25 | width: getCssVar('empty-image-width'); 26 | 27 | img { 28 | user-select: none; 29 | width: 100%; 30 | height: 100%; 31 | vertical-align: top; 32 | object-fit: contain; 33 | } 34 | } 35 | 36 | @include e(description) { 37 | margin: getCssVar('empty-description-margin'); 38 | 39 | p { 40 | margin: 0; 41 | font-size: getCssVar('font-size', 'base'); 42 | color: getCssVar('text-color', 'secondary'); 43 | line-height: map.get($line-height, 'default'), 44 | } 45 | } 46 | 47 | @include e(bottom) { 48 | margin-top: getCssVar('empty-bottom-margin-top'); 49 | } 50 | } 51 | 52 | -------------------------------------------------------------------------------- /styles/src/element-ui/icon.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:map'; 2 | 3 | // 样式变量 4 | @use '../common/var' as *; 5 | // el 命名空间 6 | @use '../mixins/config' as *; 7 | // mixin 函数，例如：b()，e()，m() 8 | @use '../mixins/mixins' as *; 9 | // set-css-var-value set-component-css-var css 变量方法 10 | @use '../mixins/var' as *; 11 | 12 | // 创建组件 css 变量 13 | // @include b(icon) { 14 | // @include set-component-css-var('icon', $icon); 15 | // } 16 | 17 | @include b(icon) { 18 | display: inline-block; 19 | transition: all 0.1s cubic-bezier(1, 0.5, 0.8, 1); 20 | } 21 | -------------------------------------------------------------------------------- /styles/src/element-ui/pagination.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:map'; 2 | 3 | // 样式变量 4 | @use '../common/var' as *; 5 | // el 命名空间 6 | @use '../mixins/config' as *; 7 | // mixin 函数，例如：b()，e()，m() 8 | @use '../mixins/mixins' as *; 9 | // set-css-var-value set-component-css-var css 变量方法 10 | @use '../mixins/var' as *; 11 | 12 | // 创建组件 css 变量 13 | @include b(pagination) { 14 | @include set-component-css-var('pagination', $pagination); 15 | 16 | display: flex; 17 | justify-content: flex-end; 18 | align-items: center; 19 | 20 | .el-pagination { 21 | padding: getCssVar('pagination-padding'); 22 | 23 | .el-pagination__total, 24 | &.is-background .btn-prev, 25 | .el-pager .number, 26 | &.is-background .btn-quicknext, 27 | &.is-background .btn-next, 28 | .el-pagination__jump, 29 | .el-pagination__editor, 30 | .el-pagination__jump .el-input__inner { 31 | font-size: getCssVar('pagination-font-size');; 32 | color: getCssVar('pagination-text-color'); 33 | height: getCssVar('pagination-height'); 34 | line-height: getCssVar('pagination-line-height'); 35 | border-radius: getCssVar('pagination-border-radius'); 36 | } 37 | 38 | .el-pagination__jump { 39 | margin-left: 15px; 40 | } 41 | 42 | &.is-background .btn-prev, 43 | &.is-background .btn-next { 44 | &:disabled { 45 | color: #ccc; 46 | } 47 | } 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /styles/src/element-ui/popover.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:map'; 2 | 3 | // 样式变量 4 | @use '../common/var' as *; 5 | // el 命名空间 6 | @use '../mixins/config' as *; 7 | // mixin 函数，例如：b()，e()，m() 8 | @use '../mixins/mixins' as *; 9 | // set-css-var-value set-component-css-var css 变量方法 10 | @use '../mixins/var' as *; 11 | 12 | // 创建组件 css 变量 13 | @include b(popover) { 14 | @include set-component-css-var('popover', $popover); 15 | } 16 | 17 | @include b(popover) { 18 | 19 | } 20 | 21 | .el-popper { 22 | .dl-button { 23 | min-width: 0; 24 | min-height: 0; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /styles/src/element-ui/radio-group.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebJeffery/douluo-ui/6c83bdeb013e15083b6474dfcece7a0417dc9904/styles/src/element-ui/radio-group.scss -------------------------------------------------------------------------------- /styles/src/element-ui/tag-group.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:map'; 2 | 3 | // 样式变量 4 | @use '../common/var' as *; 5 | // el 命名空间 6 | @use '../mixins/config' as *; 7 | // mixin 函数，例如：b()，e()，m() 8 | @use '../mixins/mixins' as *; 9 | // set-css-var-value set-component-css-var css 变量方法 10 | @use '../mixins/var' as *; 11 | 12 | // 创建组件 css 变量 13 | @include b(tag-group) { 14 | @include set-component-css-var('tag-group', $tag); 15 | } 16 | 17 | @include b(tag-group) { 18 | @include m(button) { 19 | display: inline-block; 20 | box-sizing: border-box; 21 | padding: 0 24px; 22 | min-width: 120px; 23 | height: 40px; 24 | line-height: 40px; 25 | text-align: center; 26 | border-radius: 4px; 27 | border: 1px dashed getCssVar('border-color-input'),; 28 | font-size: 14px; 29 | color: getCssVar('text-color-secondary'); 30 | cursor: pointer; 31 | &:hover{ 32 | border: 1px dashed getCssVar('color','primary'); 33 | } 34 | @include when(select) { 35 | border: 1px dashed getCssVar('color','primary'); 36 | } 37 | @include when(disabled) { 38 | background-color:getCssVar('bg-color-light'); 39 | color:getCssVar('text-color-disabled'); 40 | cursor: not-allowed; 41 | &:hover{ 42 | border: 1px dashed getCssVar('border-color-input'),; 43 | } 44 | @include when(select) { 45 | border: 1px dashed getCssVar('border-color-input'),; 46 | } 47 | } 48 | } 49 | .el-tag:not(:last-child){ 50 | margin-right: 20px; 51 | } 52 | .dl-tag-group--title{ 53 | margin-left: 3px 54 | } 55 | .dl-tag-group--tag-list{ 56 | margin-top: 10px; 57 | } 58 | } -------------------------------------------------------------------------------- /styles/src/element-ui/tag.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:map'; 2 | 3 | // 样式变量 4 | @use '../common/var' as *; 5 | // el 命名空间 6 | @use '../mixins/config' as *; 7 | // mixin 函数，例如：b()，e()，m() 8 | @use '../mixins/mixins' as *; 9 | // set-css-var-value set-component-css-var css 变量方法 10 | @use '../mixins/var' as *; 11 | 12 | // 创建组件 css 变量 13 | @include b(tag) { 14 | @include set-component-css-var('tag', $tag); 15 | } 16 | 17 | @include b(tag, true) { 18 | @each $type in (primary, success, warning, error) { 19 | border: none; 20 | @at-root { 21 | @include m($type) { 22 | background-color:getCssVar('color',$type,'light-9'); 23 | color:getCssVar('color',$type); 24 | @include when(disabled) { 25 | background-color:getCssVar('bg-color-light'); 26 | color:getCssVar('text-color-disabled'); 27 | cursor: not-allowed; 28 | .el-tag__close{ 29 | cursor: not-allowed; 30 | color: getCssVar('text-color-disabled'); 31 | &:hover{ 32 | background-color: getCssVar('bg-color-light'); 33 | } 34 | } 35 | } 36 | } 37 | } 38 | .el-tag__close{ 39 | color: getCssVar('color','primary'); 40 | &:hover{ 41 | background-color: getCssVar('color','primary'); 42 | color: #fff; 43 | } 44 | } 45 | } 46 | } -------------------------------------------------------------------------------- /styles/src/element-ui/time-picker.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:map'; 2 | 3 | // 样式变量 4 | @use '../common/var' as *; 5 | // mixin 函数，例如：b()，e()，m() 6 | @use '../mixins/mixins' as *; 7 | // 工具方法 clearfix vertical-center ellipsis 8 | @use '../mixins/utils' as *; 9 | // set-css-var-value set-component-css-var css 变量方法 10 | @use '../mixins/var' as *; 11 | 12 | @include b(date-editor) { 13 | @include set-component-css-var('date-editor', $date-editor); 14 | } 15 | 16 | @include b(date-editor, true) { 17 | .el-input__icon { 18 | font-size: getCssVar('date-editor', 'icon-size'); 19 | } 20 | &:not(.is-disabled):hover { 21 | border-color: getCssVar('date-editor', 'border-color'); 22 | .el-icon-time { 23 | color: getCssVar('date-editor', 'icon-color'); 24 | } 25 | } 26 | 27 | &.el-input { 28 | width: getCssVar('date-editor', 'width'); 29 | } 30 | &.el-range-editor { 31 | width: getCssVar('date-editor', 'range-width'); 32 | } 33 | .el-input__inner, .el-range-input { 34 | width: getCssVar('date-editor', 'width'); 35 | text-align: center; 36 | color: getCssVar('date-editor', 'text-color'); 37 | &:not(:disabled):hover { 38 | border-color: getCssVar('date-editor', 'border-color'); 39 | } 40 | &:disabled { 41 | color: getCssVar('date-editor', 'disabled-color'); 42 | } 43 | &::-webkit-input-placeholder { 44 | text-align: center; 45 | color: getCssVar('date-editor', 'placeholder-color'); 46 | } 47 | } 48 | } 49 | 50 | .el-picker-panel { 51 | .el-picker-panel__content { 52 | .time-select-item:hover { 53 | color: getCssVar('color-primary'); 54 | background-color: getCssVar( 'color-primary-light-9'); 55 | font-weight: getCssVar('font-weight-primary'); 56 | } 57 | } 58 | } 59 | 60 | .el-time-panel, .el-picker-panel { 61 | .el-time-panel__content { 62 | .el-time-spinner__wrapper { 63 | .el-time-spinner__item { 64 | color: getCssVar('text-color-regular'); 65 | &.active { 66 | color: getCssVar('color-primary'); 67 | background-color: getCssVar('color-primary-light-9'); 68 | } 69 | } 70 | } 71 | &::before, &::after { 72 | border-top: transparent; 73 | border-bottom: transparent; 74 | } 75 | } 76 | } 77 | 78 | 79 | 80 | -------------------------------------------------------------------------------- /styles/src/element-ui/tooltip.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:map'; 2 | 3 | // 样式变量 4 | @use '../common/var' as *; 5 | // el 命名空间 6 | @use '../mixins/config' as *; 7 | // mixin 函数，例如：b()，e()，m() 8 | @use '../mixins/mixins' as *; 9 | // set-css-var-value set-component-css-var css 变量方法 10 | @use '../mixins/var' as *; 11 | 12 | // 创建组件 css 变量 13 | // @include b(tooltip) { 14 | // @include set-component-css-var('tooltip', $tooltip); 15 | // } 16 | 17 | // @include b(tooltip) { 18 | 19 | // } 20 | -------------------------------------------------------------------------------- /styles/src/fonts/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebJeffery/douluo-ui/6c83bdeb013e15083b6474dfcece7a0417dc9904/styles/src/fonts/iconfont.ttf -------------------------------------------------------------------------------- /styles/src/fonts/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebJeffery/douluo-ui/6c83bdeb013e15083b6474dfcece7a0417dc9904/styles/src/fonts/iconfont.woff -------------------------------------------------------------------------------- /styles/src/iconfont.scss: -------------------------------------------------------------------------------- 1 | @use 'common/var' as *; 2 | 3 | @font-face { 4 | font-family: "douluo-icons"; 5 | src: url('./fonts/iconfont.woff?t=1662431203509') format('woff'), 6 | url('./fonts/iconfont.ttf?t=1662431203509') format('truetype'); 7 | } 8 | 9 | [class^="dl-icon-"], [class*=" dl-icon-"] { 10 | /* use !important to prevent issues with browser extensions that change fonts */ 11 | font-family: "douluo-icons" !important; 12 | speak: none; 13 | font-style: normal; 14 | font-weight: normal; 15 | font-variant: normal; 16 | text-transform: none; 17 | line-height: 1; 18 | vertical-align: baseline; 19 | display: inline-block; 20 | 21 | /* Better Font Rendering =========== */ 22 | -webkit-font-smoothing: antialiased; 23 | -moz-osx-font-smoothing: grayscale; 24 | } 25 | 26 | 27 | .dl-icon-add:before { 28 | content: "\e608"; 29 | } 30 | 31 | .dl-icon-close:before { 32 | content: "\e607"; 33 | } 34 | 35 | .dl-icon-warning:before { 36 | content: "\e606"; 37 | } 38 | 39 | .dl-icon-info:before { 40 | content: "\e675"; 41 | } 42 | 43 | .dl-icon-lock:before { 44 | content: "\e604"; 45 | } 46 | 47 | .dl-icon-check:before { 48 | content: "\e663"; 49 | } 50 | 51 | .dl-icon-success:before { 52 | content: "\e603"; 53 | } 54 | 55 | .dl-icon-error:before { 56 | content: "\e601"; 57 | } 58 | 59 | .dl-icon-help:before { 60 | content: "\e662"; 61 | } 62 | 63 | .dl-icon-reflesh:before { 64 | content: "\e628"; 65 | } 66 | 67 | .dl-icon-setting:before { 68 | content: "\e639"; 69 | } 70 | 71 | .dl-icon-pass:before { 72 | content: "\e65a"; 73 | } 74 | 75 | .dl-icon-delete:before { 76 | content: "\e605"; 77 | } 78 | 79 | .dl-icon-star:before { 80 | content: "\e617"; 81 | } 82 | 83 | .dl-icon-yanjing:before { 84 | content: "\e61a"; 85 | } 86 | 87 | .dl-icon-right:before { 88 | content: "\e621"; 89 | } 90 | 91 | .dl-icon-left:before { 92 | content: "\e622"; 93 | } 94 | 95 | .dl-icon-review:before { 96 | content: "\e674"; 97 | } -------------------------------------------------------------------------------- /styles/src/index.scss: -------------------------------------------------------------------------------- 1 | @use 'var.scss'; 2 | @use 'iconfont.scss'; 3 | 4 | @use 'element-ui/button.scss'; 5 | @use 'element-ui/icon.scss'; 6 | @use 'element-ui/datePicker.scss'; 7 | @use 'element-ui/radio.scss'; 8 | @use 'element-ui/radio-button.scss'; 9 | @use 'element-ui/checkbox.scss'; 10 | @use 'element-ui/checkbox-button.scss'; 11 | @use 'element-ui/input.scss'; 12 | @use 'element-ui/table.scss'; 13 | @use 'element-ui/empty.scss'; 14 | @use 'element-ui/pagination.scss'; 15 | @use 'element-ui/dialog.scss'; 16 | @use 'element-ui/drawer.scss'; 17 | @use 'element-ui/popover.scss'; 18 | @use 'element-ui/select.scss'; 19 | @use 'element-ui/tag.scss'; 20 | @use 'element-ui/tag-group.scss'; 21 | 22 | -------------------------------------------------------------------------------- /styles/src/mixins/_var.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:map'; 2 | 3 | @use 'config'; 4 | @use 'function' as *; 5 | @use '../common/var' as *; 6 | 7 | // set css var value, because we need translate value to string 8 | // for example: 9 | // @include set-css-var-value(('color', 'primary'), red); 10 | // --el-color-primary: red; 11 | @mixin set-css-var-value($name, $value) { 12 | #{joinVarName($name)}: #{$value}; 13 | } 14 | 15 | // @include set-css-var-type('color', 'primary', $map); 16 | // --el-color-primary: #{map.get($map, 'primary')}; 17 | @mixin set-css-var-type($name, $type, $variables) { 18 | #{getCssVarName($name, $type)}: #{map.get($variables, $type)}; 19 | } 20 | 21 | @mixin set-css-color-type($colors, $type) { 22 | @include set-css-var-value(('color', $type), map.get($colors, $type, 'base')); 23 | 24 | @each $i in (3, 5, 7, 8, 9) { 25 | @include set-css-var-value( 26 | ('color', $type, 'light', $i), 27 | map.get($colors, $type, 'light-#{$i}') 28 | ); 29 | } 30 | 31 | @include set-css-var-value( 32 | ('color', $type, 'dark-2'), 33 | map.get($colors, $type, 'dark-2') 34 | ); 35 | } 36 | 37 | // set all css var for component by map 38 | @mixin set-component-css-var($name, $variables) { 39 | @each $attribute, $value in $variables { 40 | @if $attribute == 'default' { 41 | #{getCssVarName($name)}: #{$value}; 42 | } @else { 43 | #{getCssVarName($name, $attribute)}: #{$value}; 44 | } 45 | } 46 | } 47 | 48 | @mixin set-css-color-rgb($type) { 49 | $color: map.get($colors, $type, 'base'); 50 | @include set-css-var-value( 51 | ('color', $type, 'rgb'), 52 | #{red($color), 53 | green($color), 54 | blue($color)} 55 | ); 56 | } 57 | 58 | // generate css var from existing css var 59 | // for example: 60 | // @include css-var-from-global(('button', 'text-color'), ('color', $type)) 61 | // --el-button-text-color: var(--el-color-#{$type}); 62 | @mixin css-var-from-global($var, $gVar) { 63 | $varName: joinVarName($var); 64 | $gVarName: joinVarName($gVar); 65 | #{$varName}: var(#{$gVarName}); 66 | } 67 | -------------------------------------------------------------------------------- /styles/src/mixins/config.scss: -------------------------------------------------------------------------------- 1 | $namespace: 'dl' !default; 2 | $el-namespace: 'el' !default; 3 | $common-separator: '-' !default; 4 | $element-separator: '__' !default; 5 | $modifier-separator: '--' !default; 6 | $state-prefix: 'is-' !default; 7 | -------------------------------------------------------------------------------- /styles/src/mixins/utils.scss: -------------------------------------------------------------------------------- 1 | @mixin utils-clearfix { 2 | $selector: &; 3 | 4 | @at-root { 5 | #{$selector}::before, 6 | #{$selector}::after { 7 | display: table; 8 | content: ''; 9 | } 10 | #{$selector}::after { 11 | clear: both; 12 | } 13 | } 14 | } 15 | 16 | @mixin utils-vertical-center { 17 | $selector: &; 18 | 19 | @at-root { 20 | #{$selector}::after { 21 | display: inline-block; 22 | content: ''; 23 | height: 100%; 24 | vertical-align: middle; 25 | } 26 | } 27 | } 28 | 29 | @mixin utils-ellipsis { 30 | overflow: hidden; 31 | text-overflow: ellipsis; 32 | white-space: nowrap; 33 | } 34 | 35 | @mixin utils-inline-flex-center { 36 | display: inline-flex; 37 | justify-content: center; 38 | align-items: center; 39 | } 40 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | 2 | // https://github.com/antfu/unplugin-vue-components 组件按需引入插件 3 | import Components from 'unplugin-vue-components/vite' 4 | import { ElementUiResolver } from 'unplugin-vue-components/resolvers' 5 | // 兼容 IE 6 | import legacy from '@vitejs/plugin-legacy' 7 | // 分离打包 8 | import { defineConfig, splitVendorChunkPlugin } from 'vite' 9 | // 支持 Vue2 10 | import Vue from '@vitejs/plugin-vue2' 11 | import vueJsx from '@vitejs/plugin-vue2-jsx' 12 | 13 | import { resolve } from 'path' 14 | 15 | export default defineConfig({ 16 | plugins: [ 17 | Vue(), 18 | vueJsx(), 19 | Components({ 20 | resolvers: [ElementUiResolver()], 21 | }), 22 | legacy({ 23 | targets: ['defaults', 'not ie < 9'], 24 | }), 25 | splitVendorChunkPlugin(), 26 | ], 27 | resolve: { 28 | alias: { 29 | '@': resolve(__dirname, './examples/src'), 30 | src: resolve(__dirname, './src'), 31 | packages: resolve('./packages'), 32 | examples: resolve('./examples'), 33 | } 34 | }, 35 | build: { 36 | rollupOptions: { 37 | output: { 38 | manualChunks: { 39 | 'element-ui': ['element-ui'], 40 | }, 41 | }, 42 | }, 43 | } 44 | }) 45 | --------------------------------------------------------------------------------