├── .gitignore ├── LICENSE ├── README.md ├── commitlint.config.js ├── devui ├── accordion │ ├── accordion-item.tsx │ ├── accordion-list.tsx │ ├── accordion-menu.tsx │ ├── accordion.scss │ ├── accordion.tsx │ ├── accordion.type.ts │ ├── demo │ │ ├── accordion-demo.tsx │ │ └── accordion.route.ts │ └── doc │ │ ├── api-cn.md │ │ └── api-en.md ├── alert │ ├── alert-close-icon.tsx │ ├── alert-type-icon.tsx │ ├── alert.scss │ ├── alert.tsx │ ├── demo │ │ ├── alert-demo.scss │ │ ├── alert-demo.tsx │ │ ├── alert.route.ts │ │ ├── basic │ │ │ └── basic.tsx │ │ ├── close │ │ │ └── close.tsx │ │ └── withoutIcon │ │ │ └── withoutIcon.tsx │ └── doc │ │ ├── api-cn.md │ │ └── api-en.md ├── anchor │ ├── anchor.tsx │ ├── demo │ │ ├── anchor-demo.tsx │ │ └── anchor.route.ts │ └── doc │ │ ├── api-cn.md │ │ └── api-en.md ├── auto-complete │ ├── auto-complete.tsx │ ├── demo │ │ ├── auto-complete-demo.tsx │ │ └── auto-complete.route.ts │ └── doc │ │ ├── api-cn.md │ │ └── api-en.md ├── avatar │ ├── avatar-body-icon.tsx │ ├── avatar-nobody-icon.tsx │ ├── avatar.scss │ ├── avatar.tsx │ ├── demo │ │ ├── avatar-demo.scss │ │ ├── avatar-demo.tsx │ │ ├── avatar.route.ts │ │ ├── basic │ │ │ └── basic.tsx │ │ ├── config │ │ │ └── config.tsx │ │ └── special │ │ │ └── special.tsx │ └── doc │ │ ├── api-cn.md │ │ └── api-en.md ├── back-top │ ├── back-top.tsx │ ├── demo │ │ ├── back-top-demo.tsx │ │ └── back-top.route.ts │ └── doc │ │ ├── api-cn.md │ │ └── api-en.md ├── badge │ ├── badge.tsx │ ├── demo │ │ ├── badge-demo.tsx │ │ └── badge.route.ts │ └── doc │ │ ├── api-cn.md │ │ └── api-en.md ├── breadcrumb │ ├── breadcrumb.tsx │ ├── demo │ │ ├── breadcrumb-demo.tsx │ │ └── breadcrumb.route.ts │ └── doc │ │ ├── api-cn.md │ │ └── api-en.md ├── button │ ├── button.scss │ ├── button.tsx │ ├── demo │ │ ├── button-demo.tsx │ │ ├── button.route.ts │ │ ├── common │ │ │ └── common.tsx │ │ └── primary │ │ │ └── primary.tsx │ ├── doc │ │ ├── api-cn.md │ │ └── api-en.md │ └── index.ts ├── card │ ├── card.tsx │ ├── demo │ │ ├── card-demo.tsx │ │ └── card.route.ts │ └── doc │ │ ├── api-cn.md │ │ └── api-en.md ├── carousel │ ├── carousel.tsx │ ├── demo │ │ ├── carousel-demo.tsx │ │ └── carousel.route.ts │ └── doc │ │ ├── api-cn.md │ │ └── api-en.md ├── cascader │ ├── cascader.tsx │ ├── demo │ │ ├── cascader-demo.tsx │ │ └── cascader.route.ts │ └── doc │ │ ├── api-cn.md │ │ └── api-en.md ├── checkbox │ ├── checkbox.tsx │ ├── demo │ │ ├── checkbox-demo.tsx │ │ └── checkbox.route.ts │ └── doc │ │ ├── api-cn.md │ │ └── api-en.md ├── data-table │ ├── data-table.tsx │ ├── demo │ │ ├── data-table-demo.tsx │ │ └── data-table.route.ts │ └── doc │ │ ├── api-cn.md │ │ └── api-en.md ├── datepicker │ ├── datepicker.tsx │ ├── demo │ │ ├── datepicker-demo.tsx │ │ └── datepicker.route.ts │ └── doc │ │ ├── api-cn.md │ │ └── api-en.md ├── dragdrop │ ├── demo │ │ ├── dragdrop-demo.tsx │ │ └── dragdrop.route.ts │ ├── doc │ │ ├── api-cn.md │ │ └── api-en.md │ └── dragdrop.tsx ├── drawer │ ├── demo │ │ ├── drawer-demo.tsx │ │ └── drawer.route.ts │ ├── doc │ │ ├── api-cn.md │ │ └── api-en.md │ └── drawer.tsx ├── dropdown │ ├── demo │ │ ├── dropdown-demo.tsx │ │ └── dropdown.route.ts │ ├── doc │ │ ├── api-cn.md │ │ └── api-en.md │ └── dropdown.tsx ├── editable-select │ ├── demo │ │ ├── editable-select-demo.tsx │ │ └── editable-select.route.ts │ ├── doc │ │ ├── api-cn.md │ │ └── api-en.md │ └── editable-select.tsx ├── form │ ├── demo │ │ ├── form-demo.tsx │ │ └── form.route.ts │ ├── doc │ │ ├── api-cn.md │ │ └── api-en.md │ └── form.tsx ├── fullscreen │ ├── demo │ │ ├── fullscreen-demo.tsx │ │ └── fullscreen.route.ts │ ├── doc │ │ ├── api-cn.md │ │ └── api-en.md │ └── fullscreen.tsx ├── gantt │ ├── demo │ │ ├── gantt-demo.tsx │ │ └── gantt.route.ts │ ├── doc │ │ ├── api-cn.md │ │ └── api-en.md │ └── gantt.tsx ├── image-preview │ ├── demo │ │ ├── image-preview-demo.tsx │ │ └── image-preview.route.ts │ ├── doc │ │ ├── README.md │ │ ├── api-cn.md │ │ └── api-en.md │ └── image-preview.tsx ├── input-number │ ├── demo │ │ ├── input-number-demo.tsx │ │ └── input-number.route.ts │ ├── doc │ │ ├── api-cn.md │ │ └── api-en.md │ └── input-number.tsx ├── layout │ ├── demo │ │ ├── layout-demo.tsx │ │ └── layout.route.ts │ ├── doc │ │ ├── api-cn.md │ │ └── api-en.md │ └── layout.tsx ├── loading │ ├── demo │ │ ├── loading-demo.tsx │ │ └── loading.route.ts │ ├── doc │ │ ├── api-cn.md │ │ └── api-en.md │ └── loading.tsx ├── modal │ ├── demo │ │ ├── modal-demo.tsx │ │ └── modal.route.ts │ ├── doc │ │ ├── api-cn.md │ │ └── api-en.md │ └── modal.tsx ├── multi-auto-complete │ ├── demo │ │ ├── multi-auto-complete-demo.tsx │ │ └── multi-auto-complete.route.ts │ ├── doc │ │ ├── api-cn.md │ │ └── api-en.md │ └── multi-auto-complete.tsx ├── pagination │ ├── demo │ │ ├── pagination-demo.tsx │ │ └── pagination.route.ts │ ├── doc │ │ ├── api-cn.md │ │ └── api-en.md │ └── pagination.tsx ├── panel │ ├── demo │ │ ├── basic │ │ │ └── basic.tsx │ │ ├── condition-change │ │ │ └── condition-change.tsx │ │ ├── panel-demo.tsx │ │ ├── panel.route.ts │ │ └── type │ │ │ └── type.tsx │ ├── doc │ │ ├── api-cn.md │ │ └── api-en.md │ ├── panel.scss │ └── panel.tsx ├── popover │ ├── demo │ │ ├── popover-demo.tsx │ │ └── popover.route.ts │ ├── doc │ │ ├── api-cn.md │ │ └── api-en.md │ └── popover.tsx ├── progress │ ├── demo │ │ ├── progress-demo.tsx │ │ └── progress.route.ts │ ├── doc │ │ ├── api-cn.md │ │ └── api-en.md │ └── progress.tsx ├── quadrant-diagram │ ├── demo │ │ ├── quadrant-diagram-demo.tsx │ │ └── quadrant-diagram.route.ts │ ├── doc │ │ ├── api-cn.md │ │ └── api-en.md │ └── quadrant-diagram.tsx ├── radio │ ├── demo │ │ ├── radio-demo.tsx │ │ └── radio.route.ts │ ├── doc │ │ ├── api-cn.md │ │ └── api-en.md │ └── radio.tsx ├── rate │ ├── demo │ │ ├── rate-demo.tsx │ │ └── rate.route.ts │ ├── doc │ │ ├── api-cn.md │ │ └── api-en.md │ └── rate.tsx ├── read-tip │ ├── demo │ │ ├── read-tip-demo.tsx │ │ └── read-tip.route.ts │ ├── doc │ │ ├── api-cn.md │ │ └── api-en.md │ └── read-tip.tsx ├── search │ ├── demo │ │ ├── search-demo.tsx │ │ └── search.route.ts │ ├── doc │ │ ├── api-cn.md │ │ └── api-en.md │ └── search.tsx ├── select │ ├── demo │ │ ├── select-demo.tsx │ │ └── select.route.ts │ ├── doc │ │ ├── api-cn.md │ │ └── api-en.md │ └── select.tsx ├── shared │ ├── devui-api │ │ └── devui-api.tsx │ ├── devui-codebox │ │ ├── codebox-collapse-icon.tsx │ │ ├── codebox-copied-icon.tsx │ │ ├── codebox-copy-icon.tsx │ │ ├── devui-codebox.scss │ │ ├── devui-codebox.tsx │ │ └── devui-source-data.ts │ └── devui-highlight │ │ └── devui-highlight.tsx ├── slider │ ├── demo │ │ ├── slider-demo.tsx │ │ └── slider.route.ts │ ├── doc │ │ ├── api-cn.md │ │ └── api-en.md │ └── slider.tsx ├── splitter │ ├── demo │ │ ├── splitter-demo.tsx │ │ └── splitter.route.ts │ ├── doc │ │ ├── api-cn.md │ │ └── api-en.md │ └── splitter.tsx ├── status │ ├── demo │ │ ├── status-demo.tsx │ │ └── status.route.ts │ ├── doc │ │ ├── api-cn.md │ │ └── api-en.md │ └── status.tsx ├── steps-guide │ ├── demo │ │ ├── steps-guide-demo.tsx │ │ └── steps-guide.route.ts │ ├── doc │ │ ├── api-cn.md │ │ └── api-en.md │ └── steps-guide.tsx ├── sticky │ ├── demo │ │ ├── sticky-demo.tsx │ │ └── sticky.route.ts │ ├── doc │ │ ├── api-cn.md │ │ └── api-en.md │ └── sticky.tsx ├── style │ ├── core │ │ ├── _cdk.scss │ │ ├── _common.scss │ │ ├── _dropdown.scss │ │ ├── _font.scss │ │ ├── _form.scss │ │ ├── _imagePreview.scss │ │ ├── _index.scss │ │ ├── _layout.scss │ │ ├── _normalize.scss │ │ └── _reset.scss │ ├── devui.scss │ ├── layout │ │ ├── _config.scss │ │ └── devui-layout.scss │ ├── mixins │ │ ├── _clearfix.scss │ │ ├── _hover.scss │ │ ├── _index.scss │ │ └── _size.scss │ └── theme │ │ ├── _color.scss │ │ ├── _corner.scss │ │ ├── _font.scss │ │ ├── _shadow.scss │ │ └── _variables.scss ├── tabs │ ├── demo │ │ ├── tabs-demo.tsx │ │ └── tabs.route.ts │ ├── doc │ │ ├── api-cn.md │ │ └── api-en.md │ ├── tab.tsx │ ├── tabs.scss │ └── tabs.tsx ├── tags-input │ ├── demo │ │ ├── tags-input-demo.tsx │ │ └── tags-input.route.ts │ ├── doc │ │ ├── api-cn.md │ │ └── api-en.md │ └── tags-input.tsx ├── tags │ ├── demo │ │ ├── tags-demo.tsx │ │ └── tags.route.ts │ ├── doc │ │ ├── api-cn.md │ │ └── api-en.md │ └── tags.tsx ├── text-input │ ├── demo │ │ ├── text-input-demo.tsx │ │ └── text-input.route.ts │ ├── doc │ │ ├── api-cn.md │ │ └── api-en.md │ └── text-input.tsx ├── textarea │ ├── demo │ │ ├── textarea-demo.tsx │ │ └── textarea.route.ts │ ├── doc │ │ ├── api-cn.md │ │ └── api-en.md │ └── textarea.tsx ├── time-axis │ ├── demo │ │ ├── time-axis-demo.tsx │ │ └── time-axis.route.ts │ ├── doc │ │ ├── api-cn.md │ │ └── api-en.md │ └── time-axis.tsx ├── time-picker │ ├── demo │ │ ├── time-picker-demo.tsx │ │ └── time-picker.route.ts │ ├── doc │ │ ├── api-cn.md │ │ └── api-en.md │ └── time-picker.tsx ├── toast │ ├── demo │ │ ├── toast-demo.tsx │ │ └── toast.route.ts │ ├── doc │ │ ├── api-cn.md │ │ └── api-en.md │ └── toast.tsx ├── toggle │ ├── demo │ │ ├── toggle-demo.tsx │ │ └── toggle.route.ts │ ├── doc │ │ ├── api-cn.md │ │ └── api-en.md │ └── toggle.tsx ├── tooltip │ ├── demo │ │ ├── tooltip-demo.tsx │ │ └── tooltip.route.ts │ ├── doc │ │ ├── api-cn.md │ │ └── api-en.md │ └── tooltip.tsx ├── transfer │ ├── demo │ │ ├── transfer-demo.tsx │ │ └── transfer.route.ts │ ├── doc │ │ ├── api-cn.md │ │ └── api-en.md │ └── transfer.tsx ├── tree-select │ ├── demo │ │ ├── tree-select-demo.tsx │ │ └── tree-select.route.ts │ ├── doc │ │ ├── api-cn.md │ │ └── api-en.md │ └── tree-select.tsx ├── tree │ ├── demo │ │ ├── tree-demo.tsx │ │ └── tree.route.ts │ ├── doc │ │ ├── api-cn.md │ │ └── api-en.md │ └── tree.tsx └── upload │ ├── demo │ ├── upload-demo.tsx │ └── upload.route.ts │ ├── doc │ ├── api-cn.md │ └── api-en.md │ └── upload.tsx ├── docs ├── component.route.ts └── i18n │ ├── en-us.json │ └── zh-cn.json ├── index.html ├── package.json ├── public ├── favicon.ico └── logo.svg ├── scripts ├── add-api.js ├── const.js ├── convert-component-route.js └── delete-old-api.js ├── src ├── app.route.ts ├── app.vue ├── assets │ ├── logo.png │ └── styles.scss ├── components │ ├── app-content.vue │ ├── app-demo-cell.vue │ └── component.route.ts └── main.ts ├── tsconfig.json ├── vite.config.ts └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | 85 | # Gatsby files 86 | .cache/ 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 88 | # https://nextjs.org/blog/next-9-1#public-directory-support 89 | # public 90 | 91 | # vuepress build output 92 | .vuepress/dist 93 | 94 | # Serverless directories 95 | .serverless/ 96 | 97 | # FuseBox cache 98 | .fusebox/ 99 | 100 | # DynamoDB Local files 101 | .dynamodb/ 102 | 103 | # TernJS port file 104 | .tern-port 105 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Kagol 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue DevUI 2 | 3 | Vue3版本的DevUI组件库，基于[https://github.com/devcloudfe/ng-devui](https://github.com/devcloudfe/ng-devui) 4 | 5 | DevUI官方网站：[https://devui.design](https://devui.design) 6 | 7 | Tips: 该项目目前还处于孵化和演进阶段，欢迎大家一起参与建设🤝 8 | 9 | 目前，组件移植的基本流程已经打通，欢迎大家参与到 Vue DevUI 项目的建设中来！👏🎉 10 | 11 | 通过参与 Vue DevUI 项目，你可以： 12 | - 学习最新的 Vite+Vue3+TSX 技术 13 | - 学习如何设计和开发组件 14 | - 参与到开源社区中来 15 | - 结识一群热爱学习、热爱开源的朋友 16 | 17 | 以下是项目进展和规划： 18 | [项目进展和规划](https://github.com/kagol/vue-devui/wiki/%E9%A1%B9%E7%9B%AE%E8%BF%9B%E5%B1%95%E5%92%8C%E8%A7%84%E5%88%92) 19 | 20 | # 快速开始 21 | 22 | ## 1 安装依赖 23 | 24 | ``` 25 | yarn(推荐) 26 | 27 | or 28 | 29 | npm i 30 | ``` 31 | 32 | ## 2 启动 33 | 34 | ``` 35 | yarn dev(推荐) 36 | 37 | or 38 | 39 | npx vite 40 | 41 | or 42 | 43 | npm run dev 44 | ``` 45 | 46 | ## 3 访问 47 | 48 | [http://localhost:3000/](http://localhost:3000/) 49 | 50 | ## 4 生产打包 51 | 52 | ``` 53 | yarn build(推荐) 54 | 55 | or 56 | 57 | npm run build 58 | ``` 59 | 60 | # 贡献者花名册 61 | 62 | 排名不分先后（按首字母排序） 63 | 64 | ## flxy1028 65 | 66 | [flxy1028](https://github.com/flxy1028) 67 | 68 | 目前负责的责任田有： 69 | - Tabs 70 | 71 | ## kagol 72 | 73 | [kagol](https://github.com/kagol) 74 | 75 | 目前负责的责任田有： 76 | - Accordion 77 | 78 | ## to0simple 79 | 80 | [to0simple](https://github.com/to0simple) 81 | 82 | 目前负责的责任田有： 83 | - Alert 84 | - Panel 85 | - Codebox 86 | - Highlight 87 | 88 | ## Zcating 89 | 90 | [Zcating](https://github.com/Zcating) 91 | 92 | 目前负责的责任田有： 93 | - Button 94 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | const types = ['feat', 'fix', 'docs', 'style', 'refactor', 'perf', 'test', 'build', 'release', 'chore', 'revert']; 2 | 3 | module.exports = { 4 | extends: ['@commitlint/config-conventional'], 5 | rules: { 6 | 'type-empty': [2, 'never'], 7 | 'type-enum': [2, 'always', types], 8 | 'scope-case': [0, 'always'], 9 | 'subject-empty': [2, 'never'], 10 | 'subject-case': [0, 'never'], 11 | 'header-max-length': [2, 'always', 88], 12 | }, 13 | }; -------------------------------------------------------------------------------- /devui/accordion/accordion-item.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-accordion-item', 5 | props: { 6 | 7 | }, 8 | setup(props, ctx) { 9 | return () => { 10 | return
  • d-accordion-item
    • 11 | } 12 | } 13 | }) -------------------------------------------------------------------------------- /devui/accordion/accordion-list.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | import { AccordionMenuItem } from './accordion.type' 3 | 4 | export default defineComponent({ 5 | name: 'd-accordion-list', 6 | inheritAttrs: false, 7 | props: { 8 | data: Array as () => Array, 9 | deepth: { 10 | type: Number, 11 | default: 0 12 | }, 13 | parent: Object as () => AccordionMenuItem, 14 | innerListTemplate: Boolean, 15 | }, 16 | setup(props, ctx) { 17 | const { data, deepth, innerListTemplate } = props; 18 | 19 | return () => { 20 | return (!innerListTemplate || deepth === 0) && 52 | } 53 | } 54 | }) -------------------------------------------------------------------------------- /devui/accordion/accordion-menu.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-accordion-menu', 5 | props: { 6 | 7 | }, 8 | setup(props, ctx) { 9 | return () => { 10 | return
  • d-accordion-menu
    • 11 | } 12 | } 13 | }) -------------------------------------------------------------------------------- /devui/accordion/accordion.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | import AccordionList from './accordion-list' 3 | import { AccordionMenuType } from './accordion.type' 4 | import './accordion.scss' 5 | 6 | export default defineComponent({ 7 | name: 'd-accordion', 8 | props: { 9 | data: Array as () => Array | AccordionMenuType, 10 | /* Key值定义, 用于自定义数据结构 */ 11 | titleKey: { type : String, default: 'title' }, // 标题的key，item[titleKey]类型为string，为标题显示内容 12 | loadingKey: { type : String, default: 'loading' }, // 子菜单动态加载item[loadingKey]类型为boolean 13 | childrenKey: { type : String, default: 'children' }, // 子菜单Key 14 | disabledKey: { type : String, default: 'disabled' }, // 是否禁用Key 15 | activeKey: { type : String, default: 'active' }, // 菜单是否激活/选中 16 | openKey: { type : String, default: 'open' }, // 菜单是否打开 17 | 18 | /* 菜单模板 */ 19 | menuItemTemplate: { type: String }, // 可展开菜单内容条模板 20 | itemTemplate: { type: String }, // 可点击菜单内容条模板 21 | 22 | menuToggle: Function as unknown as () => ((event: MouseEvent) => void), // 可展开菜单展开事件 23 | itemClick: Function as unknown as () => ((event: MouseEvent) => void), // 可点击菜单点击事件 24 | activeItemChange: Function as unknown as () => ((event: MouseEvent) => void), 25 | 26 | /** 高级选项和模板 */ 27 | restrictOneOpen: { type: Boolean, default: false }, // 限制一级菜单同时只能打开一个 28 | autoOpenActiveMenu: { type: Boolean, default: false }, // 自动展开活跃菜单 29 | showNoContent: { type: Boolean, default: true }, // 没有内容的时候是否显示没有数据 30 | noContentTemplate: { type: String }, // 没有内容的时候使用自定义模板 31 | loadingTemplate: { type: String }, // 加载中使用自定义模板 32 | innerListTemplate: { type: String }, // 可折叠菜单内容完全自定义，用做折叠面板 33 | 34 | /* 内置路由/链接/动态判断路由或链接类型 */ 35 | linkType: { type: String as () => 'routerLink' | 'hrefLink' | 'dependOnLinkTypeKey' | '' | string, default: '' }, 36 | linkTypeKey: { type: String, default: 'linkType' }, // linkType为'dependOnLinkTypeKey'时指定对象linkType定义区 37 | linkKey: { type: String, default: 'link' }, // 链接内容的key 38 | linkTargetKey: { type: String, default: 'target' }, // 链接目标窗口的key 39 | linkDefaultTarget: { type: String, default: '_self' }, // 不设置target的时候target默认值 40 | 41 | accordionType: { type: String as () => 'normal' | 'embed', default: 'normal' }, 42 | }, 43 | setup(props, ctx) { 44 | const { data, accordionType } = props 45 | 46 | return () => { 47 | return
    48 | 54 | 55 |
    56 | } 57 | } 58 | }) -------------------------------------------------------------------------------- /devui/accordion/demo/accordion-demo.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-accordion-demo', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-accordion-demo
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/accordion/demo/accordion.route.ts: -------------------------------------------------------------------------------- 1 | import AccordionDemoComponent from './accordion-demo' 2 | import DevUIApiComponent from '../../shared/devui-api/devui-api' 3 | 4 | import ApiCn from '../doc/api-cn.md' 5 | import ApiEn from '../doc/api-en.md' 6 | const routes = [ 7 | { path: '', redirectTo: 'demo' }, 8 | { path: 'demo', component: AccordionDemoComponent}, 9 | { path: 'api', component: DevUIApiComponent, meta: { 10 | 'zh-cn': ApiCn, 11 | 'en-us': ApiEn 12 | }} 13 | ] 14 | 15 | export default routes 16 | -------------------------------------------------------------------------------- /devui/alert/alert-close-icon.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-alert-close-icon', 5 | setup() { 6 | return () => { 7 | return ( 8 | 9 | 10 | 11 | 14 | 15 | 16 | 17 | ) 18 | } 19 | } 20 | }) -------------------------------------------------------------------------------- /devui/alert/alert.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent, ref, Transition, onMounted, watch, toRefs } from 'vue'; 2 | 3 | import AlertCloseIcon from './alert-close-icon'; 4 | import AlertTypeIcon from './alert-type-icon'; 5 | 6 | import './alert.scss'; 7 | 8 | export type AlertType = 'success' | 'danger' | 'warning' | 'info'; 9 | 10 | export default defineComponent({ 11 | name: 'd-alert', 12 | props: { 13 | type: { 14 | type: String as () => AlertType, 15 | default: 'info' 16 | }, 17 | cssClass: String, 18 | closeable: { 19 | type: Boolean, 20 | default: true 21 | }, 22 | showIcon: { 23 | type: Boolean, 24 | default: true 25 | }, 26 | dismissTime: { 27 | type: Number 28 | }, 29 | closeEvent: { 30 | type: Function as unknown as () => ((event?: MouseEvent) => void) 31 | } 32 | }, 33 | emits:['close'], 34 | setup(props, ctx) { 35 | 36 | const hide = ref(false); 37 | const closing = ref(false); 38 | 39 | const alertEl = ref(); 40 | 41 | const close = (event?: MouseEvent) => { 42 | const dom = alertEl.value; 43 | dom.style.height = `${dom.offsetHeight}px`; 44 | // 重复一次后才能正确设置 height 45 | dom.style.height = `${dom.offsetHeight}px`; 46 | closing.value = true; 47 | props.closeEvent?.(event); 48 | } 49 | 50 | const afterLeave = () => { 51 | hide.value = true; 52 | closing.value = false; 53 | } 54 | 55 | onMounted(() => { 56 | if (props.dismissTime) { 57 | setTimeout(() => { 58 | close(); 59 | }, props.dismissTime) 60 | } 61 | }) 62 | 63 | return () => { 64 | return ( 65 | !hide.value ? 66 | 67 |
    68 | {props.closeable ? 69 | : null 72 | } 73 | {props.showIcon !== false ? 74 | 75 | 76 | : null 77 | } 78 | {ctx.slots.default?.()} 79 |
    80 |     81 | : null 82 | ) 83 | } 84 | } 85 | }) 86 | /* 87 | 88 | 89 | */ -------------------------------------------------------------------------------- /devui/alert/demo/alert-demo.scss: -------------------------------------------------------------------------------- 1 | .devui-alert { 2 | margin-bottom: 20px; 3 | } -------------------------------------------------------------------------------- /devui/alert/demo/alert-demo.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue'; 2 | 3 | import CodeBox from '../../shared/devui-codebox/devui-codebox'; 4 | import AlertBasic from './basic/basic'; 5 | import AlertClose from './close/close'; 6 | import AlertWithoutIcon from './withoutIcon/withoutIcon'; 7 | import { DevuiSourceData } from '../../shared/devui-codebox/devui-source-data'; 8 | 9 | //code 10 | import BasicCode from './basic/basic.tsx?raw'; 11 | import CloseCode from './close/close.tsx?raw'; 12 | import WithoutIconCode from './withoutIcon/withoutIcon.tsx?raw'; 13 | 14 | import './alert-demo.scss'; 15 | 16 | export default defineComponent({ 17 | name: 'd-alert-demo', 18 | props: { 19 | }, 20 | setup(props, ctx) { 21 | const BasicSource: DevuiSourceData[] = [{title: 'TSX', language: 'TSX', code: BasicCode}]; 22 | const CloseSource: DevuiSourceData[] = [{title: 'TSX', language: 'TSX', code: CloseCode}]; 23 | const WithoutIconSource: DevuiSourceData[] = [{title: 'TSX', language: 'TSX', code: WithoutIconCode}]; 24 | return () => { 25 | return ( 26 |
    27 |
    28 |
    { '基本用法' }
    29 |
    { '共有四种样式：success、danger、warning、info。' }
    30 | 31 | 32 | 33 |
    34 |
    35 |
    { '可关闭提示' }
    36 |
    { '显示关闭按钮，点击可关闭提示。' }
    37 | 38 | 39 | 40 |
    41 |
    42 |
    { '不使用默认图标' }
    43 |
    { '不使用默认的类型图标。' }
    44 | 45 | 46 | 47 |
    48 |
    49 | ) 50 | } 51 | } 52 | }) -------------------------------------------------------------------------------- /devui/alert/demo/alert.route.ts: -------------------------------------------------------------------------------- 1 | import AlertDemoComponent from './alert-demo' 2 | import DevUIApiComponent from '../../shared/devui-api/devui-api' 3 | 4 | import ApiCn from '../doc/api-cn.md' 5 | import ApiEn from '../doc/api-en.md' 6 | const routes = [ 7 | { path: '', redirectTo: 'demo' }, 8 | { path: 'demo', component: AlertDemoComponent}, 9 | { path: 'api', component: DevUIApiComponent, meta: { 10 | 'zh-cn': ApiCn, 11 | 'en-us': ApiEn 12 | }} 13 | ] 14 | 15 | export default routes 16 | -------------------------------------------------------------------------------- /devui/alert/demo/basic/basic.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue'; 2 | import Alert from '../../alert'; 3 | 4 | export default defineComponent({ 5 | name: 'd-alert-basic', 6 | setup() { 7 | return () => { 8 | return ( 9 | <> 10 | success 11 | info 12 | warning 13 | danger 14 | 15 | ) 16 | } 17 | } 18 | }) -------------------------------------------------------------------------------- /devui/alert/demo/close/close.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue'; 2 | import DevuiAlert from '../../alert'; 3 | 4 | export default defineComponent({ 5 | name: 'd-alert-close', 6 | setup() { 7 | 8 | const handleClose = (e?: MouseEvent) => { 9 | console.log(e); 10 | } 11 | return () => { 12 | return ( 13 | <> 14 | success 15 | danger 16 | warning 17 | info 18 | 19 | ) 20 | } 21 | } 22 | }) -------------------------------------------------------------------------------- /devui/alert/demo/withoutIcon/withoutIcon.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue'; 2 | 3 | import DevuiAlert from '../../alert'; 4 | 5 | export default defineComponent({ 6 | name: 'd-alert-withoutIcon', 7 | setup() { 8 | return () => { 9 | return ( 10 | <> 11 | success 12 | danger 13 | warning 14 | info 15 | 16 | ) 17 | } 18 | } 19 | }) -------------------------------------------------------------------------------- /devui/alert/doc/api-cn.md: -------------------------------------------------------------------------------- 1 | # 如何使用 2 | 3 | 在module中引入： 4 | 5 | ```ts 6 | import { AlertModule } from 'ng-devui/alert'; 7 | ``` 8 | 9 | 在页面中使用： 10 | 11 | ```xml 12 | 13 | ``` 14 | # d-alert 15 | ## d-alert 参数 16 | 17 | | 参数 | 类型 | 默认 | 说明 | 跳转 Demo | 18 | | :---------: | :--------------------------------------: | :----: | :---------------------------------------- | ------------------------------------------ | 19 | | type | [`AlertType`](#alerttype) | 'info' | 必选，指定警告提示的样式 | [基本用法](demo#basic-usage) | 20 | | cssClass | `string` | -- | 可选，自定义 class 名 | 21 | | closeable | `boolean` | true | 可选，默认显示关闭按钮 | [基本用法](demo#tips-to-close) | 22 | | dismissTime | `number` | -- | 可选，自动关闭 alert 的延迟时间（`ms`） | 23 | | showIcon | `boolean` | true | 可选，是否使用默认的类型图标 | [不使用默认图标](demo#without-icon) | 24 | 25 | ## d-alert 事件 26 | 27 | | 参数 | 类型 | 说明 | 跳转 Demo | 28 | | :--------: | :-----------------: | :------------------------- | -------------------------------------------- | 29 | | closeEvent | `EventEmitter` | 可选，关闭时触发的回调函数 | [可关闭的提示](demo#tips-to-close) | 30 | 31 | # 接口 & 类型定义 32 | ### AlertType 33 | 34 | 默认值为'info'， 指定alert警告提示的类型 35 | 36 | ```ts 37 | export type AlertType = 'success' | 'danger' | 'warning' | 'info'; 38 | ``` -------------------------------------------------------------------------------- /devui/alert/doc/api-en.md: -------------------------------------------------------------------------------- 1 | # How to use 2 | 3 | Import into module: 4 | 5 | ```ts 6 | import { AlertModule } from 'ng-devui/alert'; 7 | ``` 8 | 9 | In the page: 10 | 11 | ```xml 12 | 13 | ``` 14 | # d-alert 15 | ## d-alert Parameter 16 | 17 | | Attributes | Type | Default | Description | Jump to Demo | 18 | | :---------: | :--------------------------------------: | :----: | :---------------------------------------- | ------------------------------------------ | 19 | | type | [`AlertType`](#alerttype) | 'info' | Required. Specify the style of the warning prompt | [Basic Usage](demo#basic-usage) | 20 | | cssClass | `string` | -- | Optional. Customize className | 21 | | closeable | `boolean` | true | Optional. The close button is displayed by default | [Basic Usage](demo#tips-to-close) | 22 | | dismissTime | `number` | -- | Optional. Toggle off the delay time of Alert(`ms`) | 23 | | showIcon | `boolean` | true | Optional. Whether to use the default type icon | [Without Icon](demo#without-icon) | 24 | 25 | ## d-alert Event 26 | 27 | | Attributes | Type | Description | Jump to Demo | 28 | | :--------: | :-----------------: | :------------------------- | -------------------------------------------- | 29 | | closeEvent | `EventEmitter` | Optional. Callback when alert is closed | [Closable Prompt](demo#tips-to-close) | 30 | 31 | # Interface & Type Definition 32 | ### AlertType 33 | 34 | The default value is 'info', which specifies the type of alert warning. 35 | 36 | ```ts 37 | export type AlertType = 'success' | 'danger' | 'warning' | 'info'; 38 | ``` -------------------------------------------------------------------------------- /devui/anchor/anchor.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-anchor', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-anchor
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/anchor/demo/anchor-demo.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-anchor-demo', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-anchor-demo
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/anchor/demo/anchor.route.ts: -------------------------------------------------------------------------------- 1 | import AnchorDemoComponent from './anchor-demo' 2 | import DevUIApiComponent from '../../shared/devui-api/devui-api' 3 | 4 | import ApiCn from '../doc/api-cn.md' 5 | import ApiEn from '../doc/api-en.md' 6 | const routes = [ 7 | { path: '', redirectTo: 'demo' }, 8 | { path: 'demo', component: AnchorDemoComponent}, 9 | { path: 'api', component: DevUIApiComponent, meta: { 10 | 'zh-cn': ApiCn, 11 | 'en-us': ApiEn 12 | }} 13 | ] 14 | 15 | export default routes 16 | -------------------------------------------------------------------------------- /devui/auto-complete/auto-complete.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-auto-complete', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-auto-complete
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/auto-complete/demo/auto-complete-demo.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-auto-complete-demo', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-auto-complete-demo
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/auto-complete/demo/auto-complete.route.ts: -------------------------------------------------------------------------------- 1 | import AutoCompleteDemoComponent from './auto-complete-demo' 2 | import DevUIApiComponent from '../../shared/devui-api/devui-api' 3 | 4 | import ApiCn from '../doc/api-cn.md' 5 | import ApiEn from '../doc/api-en.md' 6 | const routes = [ 7 | { path: '', redirectTo: 'demo' }, 8 | { path: 'demo', component: AutoCompleteDemoComponent}, 9 | { path: 'api', component: DevUIApiComponent, meta: { 10 | 'zh-cn': ApiCn, 11 | 'en-us': ApiEn 12 | }} 13 | ] 14 | 15 | export default routes 16 | -------------------------------------------------------------------------------- /devui/avatar/avatar-body-icon.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue'; 2 | 3 | export default defineComponent({ 4 | name: 'avatar-body-icon', 5 | props: { 6 | width: { 7 | type: Number 8 | }, 9 | height: { 10 | type: Number 11 | } 12 | }, 13 | setup(props) { 14 | return () => { 15 | return ( 16 | 21 | 22 | 23 | 28 | 29 | 30 | ) 31 | } 32 | } 33 | }) -------------------------------------------------------------------------------- /devui/avatar/avatar.scss: -------------------------------------------------------------------------------- 1 | @import '../style/theme/color'; 2 | 3 | .devui-avatar-style { 4 | display: inline-block; 5 | text-align: center; 6 | color: $devui-light-text; 7 | } 8 | 9 | .devui-avatar-background-0 { 10 | background-color: #ff8b87; 11 | } 12 | 13 | .devui-avatar-background-1 { 14 | background-color: #7693f5; 15 | } -------------------------------------------------------------------------------- /devui/avatar/demo/avatar-demo.scss: -------------------------------------------------------------------------------- 1 | .devui-avatar { 2 | margin: 8px; 3 | } -------------------------------------------------------------------------------- /devui/avatar/demo/avatar-demo.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent, ref } from 'vue'; 2 | import CodeBox from '../../shared/devui-codebox/devui-codebox'; 3 | import { DevuiSourceData } from '../../shared/devui-codebox/devui-source-data'; 4 | 5 | import AvatarBasic from './basic/basic'; 6 | import AvatarConfig from './config/config'; 7 | import AvatarSpecial from './special/special'; 8 | 9 | import BasicCode from './basic/basic.tsx?raw'; 10 | import ConfigCode from './config/config.tsx?raw'; 11 | import SpecialCode from './special/special.tsx?raw'; 12 | 13 | import './avatar-demo.scss'; 14 | 15 | export default defineComponent({ 16 | name: 'd-avatar-demo', 17 | props: { 18 | }, 19 | setup(props, ctx) { 20 | const BasicSource: DevuiSourceData[] = [{ title: 'TSX', language: 'TSX', code: BasicCode }]; 21 | const ConfigSource: DevuiSourceData[] = [{ title: 'TSX', language: 'TSX', code: ConfigCode}]; 22 | const SpecialSource: DevuiSourceData[] = [{ title: 'TSX', language: 'TSX', code: SpecialCode }]; 23 | 24 | return () => { 25 | return ( 26 |
    27 |
    28 |
    { '头像显示的基本规则' }
    29 |
    { "头像组件传入'name'属性时，会根据一定的规则显示头像的字段，具体规则参见API。" }
    30 | 31 | 32 | 33 |
    34 |
    35 |
    { '头像的基础配置' }
    36 |
    { "头像组件可设置宽度，高度，是否为圆形头像，同时可自定义头像的显示字段，传入自定义图片等。" }
    37 | 38 | 39 | 40 |
    41 |
    42 |
    { '头像的特殊显示' }
    43 |
    { "头像组件会对一些特殊情况进行处理，具体表现为用户不存在或展示默认头像，详细规则参见API。" }
    44 | 45 | 46 | 47 |
    48 |
    49 | ) 50 | } 51 | } 52 | }) -------------------------------------------------------------------------------- /devui/avatar/demo/avatar.route.ts: -------------------------------------------------------------------------------- 1 | import AvatarDemoComponent from './avatar-demo' 2 | import DevUIApiComponent from '../../shared/devui-api/devui-api' 3 | 4 | import ApiCn from '../doc/api-cn.md' 5 | import ApiEn from '../doc/api-en.md' 6 | const routes = [ 7 | { path: '', redirectTo: 'demo' }, 8 | { path: 'demo', component: AvatarDemoComponent}, 9 | { path: 'api', component: DevUIApiComponent, meta: { 10 | 'zh-cn': ApiCn, 11 | 'en-us': ApiEn 12 | }} 13 | ] 14 | 15 | export default routes 16 | -------------------------------------------------------------------------------- /devui/avatar/demo/basic/basic.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue'; 2 | import DevuiAvatar from '../../avatar'; 3 | 4 | export default defineComponent({ 5 | name: 'd-avatar-basic', 6 | setup() { 7 | return () => { 8 | return ( 9 |
    10 | 11 | 12 | 13 | 14 |
    15 | ) 16 | } 17 | } 18 | }) -------------------------------------------------------------------------------- /devui/avatar/demo/config/config.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue'; 2 | 3 | import DevuiAvatar from '../../avatar'; 4 | 5 | export default defineComponent({ 6 | name: 'd-avatar-config', 7 | setup() { 8 | const imgSrc = '/public/logo.svg'; 9 | return () => { 10 | return ( 11 |
    12 | 13 | 14 | 15 |
    16 | ) 17 | } 18 | } 19 | }) -------------------------------------------------------------------------------- /devui/avatar/demo/special/special.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue'; 2 | 3 | import DevuiAvatar from '../../avatar'; 4 | 5 | export default defineComponent({ 6 | name: 'd-avatar-special', 7 | setup() { 8 | return () => { 9 | return ( 10 |
    11 | 12 | 13 |
    14 | ) 15 | } 16 | } 17 | }) -------------------------------------------------------------------------------- /devui/avatar/doc/api-cn.md: -------------------------------------------------------------------------------- 1 | # 如何使用 2 | 3 | 在module中引入： 4 | 5 | ```ts 6 | import { AvatarModule } from 'ng-devui/avatar'; 7 | ``` 8 | 9 | 在页面中使用： 10 | 11 | ```xml 12 | 13 | ``` 14 | 15 | # d-avatar 16 | ## d-avatar 参数 17 | 18 | | 参数 | 类型 | 默认值 | 描述 | 跳转 Demo | 19 | | :--------: | :--------------------: | :--: | :-------------------------------------------------------------------------- | ------------------------------------------------------------- | 20 | | name | `string` | -- | 必选，传入字符串用于制作头像 | [头像显示的基本规则](demo#basic-rules) | 21 | | gender | `string \| male \| female` | -- | 可选，根据性别区分头像颜色，传入 string，可以是`female \| male`的任意大小写形式 | [头像显示的基本规则](demo#basic-rules) | 22 | | width | `number` | 40 | 可选，设定头像的宽度， 单位为`px` | [头像的基础配置](demo#basic-configuration) | 23 | | height | `number` | 40 | 可选，设定头像的高度，单位为`px` | [头像的基础配置](demo#basic-configuration) | 24 | | isRound | `boolean` | true | 可选，是否显示为圆形头像 | [头像的基础配置](demo#basic-configuration) | 25 | | imgSrc | `string` | -- | 可选，传入自定义图片作为头像 | [头像的基础配置](demo#basic-configuration) | 26 | | customText | `string` | -- | 可选，传入自定义显示文字 | [头像的基础配置](demo#basic-configuration) | 27 | 28 | ### 头像显示基本规则 29 | 30 | - `中文开头`：取传入字符串的最后两个字符 31 | - `英文开头`：取传入字符串的前面两个字符 32 | - `多个英文名连用`：取传入字符串的前两个英文名首字母 33 | - `非中英文开头`：取传入字符串的前两个字符 34 | 35 | ### 头像特殊显示规则 36 | 37 | - 未传入`name`，`customText`，`imgSrc`，视为使用该头像的用户不存在 38 | - 传入`name`，`customText`，`imgSrc`的值为空，视为使用该头像的用户无昵称，使用默认头像 39 | 40 | ### 显示优先级排序 41 | 42 | imgSrc > customText > name 43 | -------------------------------------------------------------------------------- /devui/avatar/doc/api-en.md: -------------------------------------------------------------------------------- 1 | # How to use 2 | 3 | Import into module: 4 | 5 | ```ts 6 | import { AvatarModule } from 'ng-devui/avatar'; 7 | ``` 8 | 9 | In the page: 10 | 11 | ```xml 12 | 13 | ``` 14 | # d-avatar 15 | ## d-avatar Parameter 16 | 17 | | Parameter | Type | Default | Description | Jump to Demo | 18 | | :--------: | :--------------------: | :--: | :-------------------------------------------------------------------------- | ------------------------------------------------------------- | 19 | | name | `string` | -- | Required. The input character string is used to create a profile picture. | [Basic Rules](demo#basic-rules) | 20 | | gender | `string \| male \| female` | -- | Optional. The profile picture color is differentiated by gender. The input string can be in the format of `female \| male`. | [Basic Rules](demo#basic-rules) | 21 | | width | `number` | 40 | Optional. Width of the avatar(`px`) | [Basic Configuration](demo#basic-configuration) | 22 | | height | `number` | 40 | Optional. Set the height of the avatar(`px`) | [Basic Configuration](demo#basic-configuration) | 23 | | isRound | `boolean` | true | Optional. Indicating whether to display a circular avatar | [Basic Configuration](demo#basic-configuration) | 24 | | imgSrc | `string` | -- | Optional. Import a customized image as the avatar | [Basic Configuration](demo#basic-configuration) | 25 | | customText | `string` | -- | Optional. Input the customized display text | [Basic Configuration](demo#basic-configuration) | 26 | 27 | 28 | ### Basic Profile Picture Display Rules 29 | 30 | - `Begin with Chinese `: Use the last two characters. 31 | - `Begin with English `: Use the first two characters. 32 | - `Use multiple English names together`: Use the first two letters of the first English name. 33 | - `Not starting with Chinese or English `: Use the first two characters. 34 | 35 | ### Special avatar display rules 36 | 37 | - If `name`, `customText`, and `imgSrc` are not transferred, the user who uses the avatar does not exist. 38 | - If the values of `name`, `customText`, and `imgSrc` are empty, the user who uses the avatar does not have a nickname and the default avatar is used. 39 | 40 | ### Display Priority 41 | 42 | imgSrc > customText > name 43 | -------------------------------------------------------------------------------- /devui/back-top/back-top.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-back-top', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-back-top
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/back-top/demo/back-top-demo.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-back-top-demo', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-back-top-demo
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/back-top/demo/back-top.route.ts: -------------------------------------------------------------------------------- 1 | import BackTopDemoComponent from './back-top-demo' 2 | import DevUIApiComponent from '../../shared/devui-api/devui-api' 3 | 4 | import ApiCn from '../doc/api-cn.md' 5 | import ApiEn from '../doc/api-en.md' 6 | const routes = [ 7 | { path: '', redirectTo: 'demo' }, 8 | { path: 'demo', component: BackTopDemoComponent}, 9 | { path: 'api', component: DevUIApiComponent, meta: { 10 | 'zh-cn': ApiCn, 11 | 'en-us': ApiEn 12 | }} 13 | ] 14 | 15 | export default routes 16 | -------------------------------------------------------------------------------- /devui/back-top/doc/api-cn.md: -------------------------------------------------------------------------------- 1 | # 如何使用 2 | 3 | 在module中引入： 4 | 5 | ```ts 6 | import { BackTopModule } from 'ng-devui/back-top'; 7 | ``` 8 | 9 | 在页面中使用： 10 | 11 | ```xml 12 | 13 | ``` 14 | 15 | # d-back-top 16 | ## d-back-top 参数 17 | 18 | | 参数 | 类型 | 默认 | 说明 | 跳转 Demo | 19 | | :---------: | :------------: | :-----: | :--------------------------------------------------------------------------- | | 20 | | customTemplate | `TemplateRef` | -- | 可选，自定义按钮样式 | [自定义](demo#back-top-customize) | 21 | | bottom | `string` | '50px' | 可选，按钮距离页面底部位置 | [自定义](demo#back-top-customize) | 22 | | right | `string` | '30px' | 可选，按钮距离页面右边距 | [自定义](demo#back-top-customize) | 23 | | visibleHeight | `number` | 300 | 可选，滚动高度达到visibleHeight所设值后展示回到顶部按钮，单位为`px` | [自定义](demo#back-top-customize) | 24 | | scrollTarget | `HTMLElement` | Window | 可选，触发滚动的对象 | [滚动容器](demo#back-top-scroll-container) | 25 | 26 | ## d-back-top 事件 27 | 28 | | 参数 | 类型 | 说明 | 跳转 Demo | 29 | | :------: | :-----------------: | :-------------------------------------------------------------------------------------- | ---------------------------------------------- | 30 | | backTopEvent | `EventEmitter` | 可选，点击回到顶部按钮的回调函数 | [基本用法](demo#back-top-basic) | 31 | -------------------------------------------------------------------------------- /devui/back-top/doc/api-en.md: -------------------------------------------------------------------------------- 1 | # How to use 2 | 3 | Import into module: 4 | 5 | ```ts 6 | import { BackTopModule } from 'ng-devui/back-top'; 7 | ``` 8 | 9 | In the page: 10 | 11 | ```xml 12 | 13 | ``` 14 | # d-back-top 15 | ## d-back-top Parameter 16 | 17 | | Parameter | Type | Default | Description | Jump to Demo | 18 | | :---------: | :------------: | :-----: | :--------------------------------------------------------------------------- | | 19 | | customTemplate | `TemplateRef` | -- | Optional. Custom button style | [Customize](demo#back-top-customize) | 20 | | bottom | `string` | '50px' | Optional. Position between the button and the bottom of the page | [Customize](demo#back-top-customize) | 21 | | right | `string` | '30px' | Optional. It is the right margin between the button and the page | [Customize](demo#back-top-customize) | 22 | | visibleHeight | `number` | 300 | Optional. When the scrolling height reaches the value of visibleHeight, the button is displayed to the top. The unit is `px` | [Customize](demo#back-top-customize) | 23 | | scrollTarget | `HTMLElement` | Window | Optional. Object that triggers scrolling | [Scrolling Container](demo#back-top-scroll-container) | 24 | 25 | ## d-back-top Event 26 | 27 | | Parameter | Type | Description | Jump to Demo | 28 | | :------: | :-----------------: | :-------------------------------------------------------------------------------------- | ---------------------------------------------- | 29 | | backTopEvent | `EventEmitter` | Optional. Callback function for clicking the button to return to the top | [Basic Usage](demo#back-top-basic) | 30 | -------------------------------------------------------------------------------- /devui/badge/badge.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-badge', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-badge
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/badge/demo/badge-demo.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-badge-demo', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-badge-demo
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/badge/demo/badge.route.ts: -------------------------------------------------------------------------------- 1 | import BadgeDemoComponent from './badge-demo' 2 | import DevUIApiComponent from '../../shared/devui-api/devui-api' 3 | 4 | import ApiCn from '../doc/api-cn.md' 5 | import ApiEn from '../doc/api-en.md' 6 | const routes = [ 7 | { path: '', redirectTo: 'demo' }, 8 | { path: 'demo', component: BadgeDemoComponent}, 9 | { path: 'api', component: DevUIApiComponent, meta: { 10 | 'zh-cn': ApiCn, 11 | 'en-us': ApiEn 12 | }} 13 | ] 14 | 15 | export default routes 16 | -------------------------------------------------------------------------------- /devui/badge/doc/api-cn.md: -------------------------------------------------------------------------------- 1 | # 如何使用 2 | 在module中引入： 3 | ```ts 4 | import { BadgeModule } from 'ng-devui/badge'; 5 | ``` 6 | 7 | 在页面中使用： 8 | ```html 9 | 10 |
    未读消息
    11 |     12 | 13 | ``` 14 | # Badge 15 | 16 | ## d-badge 参数 17 | 18 | | 参数 | 类型 | 默认值 | 描述 | 跳转 Demo | 19 | | :---------: | :------------: | :-----: | :--------------------------------------------------------------------------- | :--------------------------- | 20 | | count | `number` | -- | 可选，设置基本徽章和计数徽章中显示的数目 | [基本徽章](demo#badge-basic) | 21 | | maxCount | `number` | 99 | 可选，设置基本徽章和计数徽章最大可显示数目，当 count > maxCount 时显示maxCount+ | [基本徽章](demo#badge-basic) | 22 | | showDot | `boolean` | false | 可选，true时为点状徽章(有包裹)或状态徽章(无包裹)，false时为基本徽章(有包裹)或计数徽章(无包裹) | [点状徽章](demo#badge-dot) | 23 | | status |`BadgeStatusType` | -- | 可选，状态色 'danger' \| 'warning' \| 'waiting' \| 'success' \| 'info' | [基本徽章](demo#badge-basic) | 24 | | badgePos | `BadgePositionType` | 'top-right' | 可选，徽标位置 'top-left' \| 'top-right' \| 'bottpm-left' \| ''bottom-right'' | [徽章位置](demo#position) | 25 | | offsetXY | `[number, number]` | -- | 可选，有包裹时徽标位置偏移量，格式为[x,y]，单位为px。x为相对right偏移量(right: -x `px`)，y为相对top偏移量(top: y `px`) | [自定义](demo#custom) | 26 | | bgColor | `string` | -- | 可选，自定义徽标色，此时status参数设置的徽章状态色失效 | [自定义](demo#custom) | 27 | | textColor | `string` | -- | 可选， 可自定义徽标文字颜色 | [自定义](demo#custom) | 28 | -------------------------------------------------------------------------------- /devui/badge/doc/api-en.md: -------------------------------------------------------------------------------- 1 | # How to use 2 | Import into module: 3 | ```ts 4 | import { BadgeModule } from 'ng-devui/badge'; 5 | ``` 6 | 7 | In the page: 8 | ```html 9 | 10 |
    Unread messages
    11 |     12 | 13 | ``` 14 | # Badge 15 | 16 | ## d-badge Parameter 17 | 18 | | Parameter | Type | Default | Description | Jump to Demo | 19 | | :---------: | :------------: | :-----: | :--------------------------------------------------------------------------- | :--------------------------- | 20 | | count | `number` | -- | Optional. Set the number of basic badges and count badges to be displayed. | [Basic Badge](demo#badge-basic) | 21 | | maxCount | `number` | 99 | Optional. Sets the maximum number of basic and counting badges that can be displayed. When count is greater than maxCount, maxCount+ is displayed. | [Basic Badge](demo#badge-basic) | 22 | | showDot | `boolean` | false | Optional. The value true indicates the dot badge (with package) or status badge (without package). The value false indicates the basic badge (with package) or count badge (without package). | [Dotted Badge](demo#badge-dot) | 23 | | status |`BadgeStatusType` | -- | Optional. The status color is'danger'\| 'warning' \| 'waiting' \| 'success' \| 'info'. | [Basic Badge](demo#badge-basic) | 24 | | badgePos | `BadgePositionType` | 'top-right' | Optional. Logo position'top-left' \|'top-right' \|'bottpm-left' \|'bottom-right'. | [Badge Position](demo#position) | 25 | | offsetXY | `[number, number]` | -- |Optional. Indicates the logo position offset when there is a package. The format is [x,y], in px. This parameter is optional. x is the relative right offset (right: -x `px`), y is the relative top offset (top: y `px`). | [Custom](demo#custom) | 26 | | bgColor | `string` | -- | Optional. The badge color can be customized. In this case, the badge status color specified by status is invalid.| [Custom](demo#custom) | 27 | | textColor | `string` | -- | Optional. You can customize the logo text color. | [Custom](demo#custom) | 28 | -------------------------------------------------------------------------------- /devui/breadcrumb/breadcrumb.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-breadcrumb', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-breadcrumb
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/breadcrumb/demo/breadcrumb-demo.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-breadcrumb-demo', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-breadcrumb-demo
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/breadcrumb/demo/breadcrumb.route.ts: -------------------------------------------------------------------------------- 1 | import BreadcrumbDemoComponent from './breadcrumb-demo' 2 | import DevUIApiComponent from '../../shared/devui-api/devui-api' 3 | 4 | import ApiCn from '../doc/api-cn.md' 5 | import ApiEn from '../doc/api-en.md' 6 | const routes = [ 7 | { path: '', redirectTo: 'demo' }, 8 | { path: 'demo', component: BreadcrumbDemoComponent}, 9 | { path: 'api', component: DevUIApiComponent, meta: { 10 | 'zh-cn': ApiCn, 11 | 'en-us': ApiEn 12 | }} 13 | ] 14 | 15 | export default routes 16 | -------------------------------------------------------------------------------- /devui/button/demo/button-demo.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | import CodeBox from '../../shared/devui-codebox/devui-codebox' 3 | import ButtonPrimary from './primary/primary' 4 | import ButtonCommon from './common/common' 5 | import PrimaryCode from './primary/primary.tsx?raw' 6 | import CommonCode from './common/common.tsx?raw' 7 | 8 | export default defineComponent({ 9 | name: 'd-button-demo', 10 | setup() { 11 | const primarySource: any[] = [{title: 'TSX', language: 'TSX', code: PrimaryCode}]; 12 | const commonSource: any[] = [{title: 'TSX', language: 'TSX', code: CommonCode}]; 13 | return () => { 14 | return
    15 |
    16 |
    { '主要按钮' }
    17 |
    18 | 19 | 20 | 21 |
    22 |
    23 |
    { '次要按钮' }
    24 |
    25 | 26 | 27 | 28 |
    29 |
    30 | } 31 | } 32 | }) -------------------------------------------------------------------------------- /devui/button/demo/button.route.ts: -------------------------------------------------------------------------------- 1 | import ButtonDemoComponent from './button-demo' 2 | import DevUIApiComponent from '../../shared/devui-api/devui-api' 3 | 4 | import ApiCn from '../doc/api-cn.md' 5 | import ApiEn from '../doc/api-en.md' 6 | const routes = [ 7 | { path: '', redirectTo: 'demo' }, 8 | { path: 'demo', component: ButtonDemoComponent}, 9 | { path: 'api', component: DevUIApiComponent, meta: { 10 | 'zh-cn': ApiCn, 11 | 'en-us': ApiEn 12 | }} 13 | ] 14 | 15 | export default routes 16 | -------------------------------------------------------------------------------- /devui/button/demo/common/common.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue'; 2 | import Button from '../../button'; 3 | 4 | export default defineComponent({ 5 | name: 'd-button-common', 6 | setup() { 7 | return () => { 8 | return ( 9 |
    10 | 11 |
    12 | ); 13 | } 14 | } 15 | }); -------------------------------------------------------------------------------- /devui/button/demo/primary/primary.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue'; 2 | import Button from '../../button'; 3 | 4 | export default defineComponent({ 5 | name: 'd-button-primary', 6 | setup() { 7 | return () => { 8 | return ( 9 |
    10 | 11 | 12 |
    13 | ); 14 | } 15 | } 16 | }); -------------------------------------------------------------------------------- /devui/button/index.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kagol/vue-devui-early/f88930de89c1d471f8552ea7013c4f2e60ea77c0/devui/button/index.ts -------------------------------------------------------------------------------- /devui/card/card.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-card', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-card
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/card/demo/card-demo.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-card-demo', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-card-demo
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/card/demo/card.route.ts: -------------------------------------------------------------------------------- 1 | import CardDemoComponent from './card-demo' 2 | import DevUIApiComponent from '../../shared/devui-api/devui-api' 3 | 4 | import ApiCn from '../doc/api-cn.md' 5 | import ApiEn from '../doc/api-en.md' 6 | const routes = [ 7 | { path: '', redirectTo: 'demo' }, 8 | { path: 'demo', component: CardDemoComponent}, 9 | { path: 'api', component: DevUIApiComponent, meta: { 10 | 'zh-cn': ApiCn, 11 | 'en-us': ApiEn 12 | }} 13 | ] 14 | 15 | export default routes 16 | -------------------------------------------------------------------------------- /devui/card/doc/api-cn.md: -------------------------------------------------------------------------------- 1 | # 如何使用 2 | 3 | 在module中引入： 4 | 5 | ```ts 6 | import { CardModule } from 'ng-devui/card'; 7 | ``` 8 | 9 | 在页面中使用： 10 | 11 | ```xml 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | ``` 21 | # d-card 22 | ## d-card 区块划分 23 | 24 | | 标签 | 描述 | 25 | | :------------: | :--------------------------------------------------------------------------------------------: | 26 | | d-card-header | 标题区域，作为概览使用，通常包含标题`d-card-title`,副标题`d-card-subtitle`,头像`dAvatar`等元素 | 27 | | [dCardMeta] | 媒体信息区域，可放置多种媒体，包括图片、图形、视频。 | 28 | | d-card-content | 辅助信息区，分析和支撑标题作用，可以包含摘要或者说明。 | 29 | | d-card-actions | 决策作用，可以包含操作文本或者操作图标。 | 30 | 31 | ## d-card-header 区块划分 32 | 33 | | 标签 | 描述 | 34 | | :-------------: | :------------------------------------: | 35 | | d-card-title | 卡片的主要内容描述，一般定义为卡片名称 | 36 | | [dCardAvatar] | 头像区域，用作头像等图片展示 | 37 | | d-card-subtitle | 对标题的补充，可包含标签等信息 | 38 | 39 | ## d-card-actions 参数 40 | 41 | | 参数 | 类型 | 默认值 | 描述 | 跳转 Demo | 42 | | :---: | :------: | :---: | :-------------: | --------- | 43 | | align | `'start' \| 'end' \|'spaceBetween'` | 'start' | 可选，操作区域对齐方式，分别对应起始对齐，尾部对齐，拉伸对齐 | [基本用法](demo#card-basic) | 44 | -------------------------------------------------------------------------------- /devui/card/doc/api-en.md: -------------------------------------------------------------------------------- 1 | # How to use 2 | 3 | Import into module: 4 | 5 | ```ts 6 | import { CardModule } from 'ng-devui/card'; 7 | ``` 8 | 9 | In the page: 10 | 11 | ```xml 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | ``` 21 | # d-card 22 | ## d-card Block Division 23 | 24 | | Tag | Description | 25 | | :------------: | :--------------------------------------------------------------------------------------------: | 26 | | d-card-header | Title area, which is used as an overview. It usually contains elements such as title `d-card-title`, subtitle `d-card-subtitle`, and avatar `dAvatar` | 27 | | [dCardMeta] | Media information area, which can store multiple media, including pictures, graphics, and videos | 28 | | d-card-content | Auxiliary information area, which analyzes and supports the title function. It can contain abstracts or descriptions | 29 | | d-card-actions | Decision-making function, which can contain operation text or operation icons | 30 | 31 | ## d-card-header Block Division 32 | 33 | | Tag | Description | 34 | | :-------------: | :------------------------------------: | 35 | | d-card-title | Card content description, which is generally defined as the card name | 36 | | [dCardAvatar] | Avatar area, which is used to display images such as avatars | 37 | | d-card-subtitle | Supplement to the title, including tag information | 38 | 39 | ## d-card-actions Parameter 40 | 41 | | Parameter | Type | Default | Description | Jump to Demo | 42 | | :---: | :------: | :---: | :-------------: | --------- | 43 | | align | `'start'\|'end'\|'spaceBetween'` | 'start' | Optional. Operation area alignment mode, which corresponds to start alignment, tail alignment, and stretch alignment | [Basic usage](demo#card-basic) | 44 | -------------------------------------------------------------------------------- /devui/carousel/carousel.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-carousel', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-carousel
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/carousel/demo/carousel-demo.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-carousel-demo', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-carousel-demo
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/carousel/demo/carousel.route.ts: -------------------------------------------------------------------------------- 1 | import CarouselDemoComponent from './carousel-demo' 2 | import DevUIApiComponent from '../../shared/devui-api/devui-api' 3 | 4 | import ApiCn from '../doc/api-cn.md' 5 | import ApiEn from '../doc/api-en.md' 6 | const routes = [ 7 | { path: '', redirectTo: 'demo' }, 8 | { path: 'demo', component: CarouselDemoComponent}, 9 | { path: 'api', component: DevUIApiComponent, meta: { 10 | 'zh-cn': ApiCn, 11 | 'en-us': ApiEn 12 | }} 13 | ] 14 | 15 | export default routes 16 | -------------------------------------------------------------------------------- /devui/carousel/doc/api-cn.md: -------------------------------------------------------------------------------- 1 | # 如何使用 2 | 在module中引入： 3 | ```ts 4 | import { CarouselModule } from 'ng-devui/carousel'; 5 | ``` 6 | 在页面中使用： 7 | ```html 8 | 9 | 10 | 11 | ``` 12 | 13 | # d-carousel 14 | 15 | ## d-carousel 参数 16 | 17 | | 参数 | 类型 | 默认值 | 描述 | 跳转 Demo | 18 | | :----------: | :--------------------------: | :------: | :---------------------------------------------- | ------------------------------------------------ | 19 | | arrowTrigger | `'hover'\|'never'\|'always'` | 'hover' | 可选，指定切换箭头显示方式 | [指示器&切换箭头](demo#trigger-usage) | 20 | | autoplay | `boolean` | false | 可选，是否自动轮播 | [自动轮播](demo#autoplay-usage) | 21 | | autoplaySpeed | `number` | 3000 | 可选，配合`autoplay`使用，自动轮播速度，单位 ms | [自动轮播](demo#autoplay-usage) | 22 | | height | `string` | '100%' | 可选，轮播容器高度 | [基本用法](demo#basic-usage) | 23 | | showDots | `boolean` | true | 可选，是否显示面板指示器 | [自动轮播](demo#autoplay-usage) | 24 | | dotPosition | `'top'\|'bottom'` | 'bottom' | 可选，面板指示器位置 | [指示器&切换箭头](demo#trigger-usage) | 25 | | dotTrigger | `'click'\|'hover'` | 'click' | 可选，指示器触发轮播方式 | [指示器&切换箭头](demo#trigger-usage) | 26 | | activeIndex | `number` | 0 | 可选，初始化激活卡片索引，从 0 开始，支持`[(activeIndex)]`双向绑定 | [基本用法](demo#basic-usage) | 27 | 28 | ## d-carousel 事件 29 | 30 | | 事件 | 类型 | 描述 | 跳转 Demo | 31 | | :----------------: | :---------------------: | :-----------------------------------------: | ------------------------------------------------- | 32 | | activeIndexChange | `EventEmitter` | 卡片切换时，返回当前卡片的索引，从0开始 | [基本用法](demo#basic-usage) | 33 | 34 | ## d-carousel 方法 35 | 36 | | 方法 | 描述 | 跳转 Demo | 37 | | :---------: | :---------------------------------- | :----------------------------- | 38 | | prev() | 切换到上一张卡片 | [自定义操作](demo#custom-usage) | 39 | | next() | 切换到下一张卡片 | [自定义操作](demo#custom-usage) | 40 | | goTo(index) | 切换到指定索引的卡片，索引从 0 开始 | [自定义操作](demo#custom-usage) | 41 | -------------------------------------------------------------------------------- /devui/cascader/cascader.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-cascader', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-cascader
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/cascader/demo/cascader-demo.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-cascader-demo', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-cascader-demo
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/cascader/demo/cascader.route.ts: -------------------------------------------------------------------------------- 1 | import CascaderDemoComponent from './cascader-demo' 2 | import DevUIApiComponent from '../../shared/devui-api/devui-api' 3 | 4 | import ApiCn from '../doc/api-cn.md' 5 | import ApiEn from '../doc/api-en.md' 6 | const routes = [ 7 | { path: '', redirectTo: 'demo' }, 8 | { path: 'demo', component: CascaderDemoComponent}, 9 | { path: 'api', component: DevUIApiComponent, meta: { 10 | 'zh-cn': ApiCn, 11 | 'en-us': ApiEn 12 | }} 13 | ] 14 | 15 | export default routes 16 | -------------------------------------------------------------------------------- /devui/checkbox/checkbox.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-checkbox', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-checkbox
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/checkbox/demo/checkbox-demo.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-checkbox-demo', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-checkbox-demo
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/checkbox/demo/checkbox.route.ts: -------------------------------------------------------------------------------- 1 | import CheckboxDemoComponent from './checkbox-demo' 2 | import DevUIApiComponent from '../../shared/devui-api/devui-api' 3 | 4 | import ApiCn from '../doc/api-cn.md' 5 | import ApiEn from '../doc/api-en.md' 6 | const routes = [ 7 | { path: '', redirectTo: 'demo' }, 8 | { path: 'demo', component: CheckboxDemoComponent}, 9 | { path: 'api', component: DevUIApiComponent, meta: { 10 | 'zh-cn': ApiCn, 11 | 'en-us': ApiEn 12 | }} 13 | ] 14 | 15 | export default routes 16 | -------------------------------------------------------------------------------- /devui/data-table/data-table.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-data-table', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-data-table
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/data-table/demo/data-table-demo.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-data-table-demo', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-data-table-demo
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/data-table/demo/data-table.route.ts: -------------------------------------------------------------------------------- 1 | import DataTableDemoComponent from './data-table-demo' 2 | import DevUIApiComponent from '../../shared/devui-api/devui-api' 3 | 4 | import ApiCn from '../doc/api-cn.md' 5 | import ApiEn from '../doc/api-en.md' 6 | const routes = [ 7 | { path: '', redirectTo: 'demo' }, 8 | { path: 'demo', component: DataTableDemoComponent}, 9 | { path: 'api', component: DevUIApiComponent, meta: { 10 | 'zh-cn': ApiCn, 11 | 'en-us': ApiEn 12 | }} 13 | ] 14 | 15 | export default routes 16 | -------------------------------------------------------------------------------- /devui/datepicker/datepicker.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-datepicker', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-datepicker
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/datepicker/demo/datepicker-demo.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-datepicker-demo', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-datepicker-demo
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/datepicker/demo/datepicker.route.ts: -------------------------------------------------------------------------------- 1 | import DatepickerDemoComponent from './datepicker-demo' 2 | import DevUIApiComponent from '../../shared/devui-api/devui-api' 3 | 4 | import ApiCn from '../doc/api-cn.md' 5 | import ApiEn from '../doc/api-en.md' 6 | const routes = [ 7 | { path: '', redirectTo: 'demo' }, 8 | { path: 'demo', component: DatepickerDemoComponent}, 9 | { path: 'api', component: DevUIApiComponent, meta: { 10 | 'zh-cn': ApiCn, 11 | 'en-us': ApiEn 12 | }} 13 | ] 14 | 15 | export default routes 16 | -------------------------------------------------------------------------------- /devui/dragdrop/demo/dragdrop-demo.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-dragdrop-demo', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-dragdrop-demo
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/dragdrop/demo/dragdrop.route.ts: -------------------------------------------------------------------------------- 1 | import DragDropDemoComponent from './dragdrop-demo' 2 | import DevUIApiComponent from '../../shared/devui-api/devui-api' 3 | 4 | import ApiCn from '../doc/api-cn.md' 5 | import ApiEn from '../doc/api-en.md' 6 | const routes = [ 7 | { path: '', redirectTo: 'demo' }, 8 | { path: 'demo', component: DragDropDemoComponent}, 9 | { path: 'api', component: DevUIApiComponent, meta: { 10 | 'zh-cn': '', 11 | 'en-us': '' 12 | }} 13 | ] 14 | 15 | export default routes 16 | -------------------------------------------------------------------------------- /devui/dragdrop/dragdrop.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-dragdrop', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-dragdrop
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/drawer/demo/drawer-demo.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-drawer-demo', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-drawer-demo
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/drawer/demo/drawer.route.ts: -------------------------------------------------------------------------------- 1 | import DrawerDemoComponent from './drawer-demo' 2 | import DevUIApiComponent from '../../shared/devui-api/devui-api' 3 | 4 | import ApiCn from '../doc/api-cn.md' 5 | import ApiEn from '../doc/api-en.md' 6 | const routes = [ 7 | { path: '', redirectTo: 'demo' }, 8 | { path: 'demo', component: DrawerDemoComponent}, 9 | { path: 'api', component: DevUIApiComponent, meta: { 10 | 'zh-cn': ApiCn, 11 | 'en-us': ApiEn 12 | }} 13 | ] 14 | 15 | export default routes 16 | -------------------------------------------------------------------------------- /devui/drawer/drawer.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-drawer', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-drawer
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/dropdown/demo/dropdown-demo.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-dropdown-demo', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-dropdown-demo
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/dropdown/demo/dropdown.route.ts: -------------------------------------------------------------------------------- 1 | import DropdownDemoComponent from './dropdown-demo' 2 | import DevUIApiComponent from '../../shared/devui-api/devui-api' 3 | 4 | import ApiCn from '../doc/api-cn.md' 5 | import ApiEn from '../doc/api-en.md' 6 | const routes = [ 7 | { path: '', redirectTo: 'demo' }, 8 | { path: 'demo', component: DropdownDemoComponent}, 9 | { path: 'api', component: DevUIApiComponent, meta: { 10 | 'zh-cn': ApiCn, 11 | 'en-us': ApiEn 12 | }} 13 | ] 14 | 15 | export default routes 16 | -------------------------------------------------------------------------------- /devui/dropdown/dropdown.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-dropdown', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-dropdown
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/editable-select/demo/editable-select-demo.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-editable-select-demo', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-editable-select-demo
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/editable-select/demo/editable-select.route.ts: -------------------------------------------------------------------------------- 1 | import EditableSelectDemoComponent from './editable-select-demo' 2 | import DevUIApiComponent from '../../shared/devui-api/devui-api' 3 | 4 | import ApiCn from '../doc/api-cn.md' 5 | import ApiEn from '../doc/api-en.md' 6 | const routes = [ 7 | { path: '', redirectTo: 'demo' }, 8 | { path: 'demo', component: EditableSelectDemoComponent}, 9 | { path: 'api', component: DevUIApiComponent, meta: { 10 | 'zh-cn': ApiCn, 11 | 'en-us': ApiEn 12 | }} 13 | ] 14 | 15 | export default routes 16 | -------------------------------------------------------------------------------- /devui/editable-select/editable-select.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-editable-select', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-editable-select
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/form/demo/form-demo.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-form-demo', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-form-demo
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/form/demo/form.route.ts: -------------------------------------------------------------------------------- 1 | import FormDemoComponent from './form-demo' 2 | import DevUIApiComponent from '../../shared/devui-api/devui-api' 3 | 4 | import ApiCn from '../doc/api-cn.md' 5 | import ApiEn from '../doc/api-en.md' 6 | const routes = [ 7 | { path: '', redirectTo: 'demo' }, 8 | { path: 'demo', component: FormDemoComponent}, 9 | { path: 'api', component: DevUIApiComponent, meta: { 10 | 'zh-cn': ApiCn, 11 | 'en-us': ApiEn 12 | }} 13 | ] 14 | 15 | export default routes 16 | -------------------------------------------------------------------------------- /devui/form/form.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-form', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-form
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/fullscreen/demo/fullscreen-demo.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-fullscreen-demo', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-fullscreen-demo
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/fullscreen/demo/fullscreen.route.ts: -------------------------------------------------------------------------------- 1 | import FullscreenDemoComponent from './fullscreen-demo' 2 | import DevUIApiComponent from '../../shared/devui-api/devui-api' 3 | 4 | import ApiCn from '../doc/api-cn.md' 5 | import ApiEn from '../doc/api-en.md' 6 | const routes = [ 7 | { path: '', redirectTo: 'demo' }, 8 | { path: 'demo', component: FullscreenDemoComponent}, 9 | { path: 'api', component: DevUIApiComponent, meta: { 10 | 'zh-cn': ApiCn, 11 | 'en-us': ApiEn 12 | }} 13 | ] 14 | 15 | export default routes 16 | -------------------------------------------------------------------------------- /devui/fullscreen/doc/api-cn.md: -------------------------------------------------------------------------------- 1 | # 如何使用 2 | 3 | 在 module 中引入： 4 | 5 | ```ts 6 | import { FullscreenModule } from 'ng-devui/fullscreen'; 7 | ``` 8 | 9 | 在页面中使用： 10 | 11 | ```html 12 | 13 |
    14 |
    15 |
    16 |     17 | ``` 18 | 19 | # d-fullscreen 20 | 21 | ## d-fullscreen 参数 22 | 23 | | 参数 | 类型 | 默认 | 说明 | 跳转 Demo | 24 | | :----: | :-----------------------: | :---------: | :----------------: | ------------------------------------ | 25 | | mode | `'immersive' \| 'normal'` | 'immersive' | 可选，设置全屏模式 | [普通全屏](demo#general-full-screen) | 26 | | zIndex | `number` | 10 | 可选，设置全屏层级 | [普通全屏](demo#general-full-screen) | 27 | 28 | ## d-fullscreen 事件 29 | 30 | | 事件 | 类型 | 说明 | 跳转 Demo | 31 | | :--------------: | :---------------------: | :------------------- | ---------------------------------------- | 32 | | fullscreenLaunch | `EventEmitter` | 可选，全屏之后的回调 | [沉浸式全屏](demo#immersive-full-screen) | 33 | 34 | ### fullscreen-target 选择器 35 | 36 | 必含指令，内容投影，设置需要全屏的元素[沉浸式全屏](demo#immersive-full-screen)。 37 | 38 | ### fullscreen-launch 选择器 39 | 40 | 必含指令，内容投影，设置触发进入全屏的按钮[沉浸式全屏](demo#immersive-full-screen)。 41 | -------------------------------------------------------------------------------- /devui/fullscreen/doc/api-en.md: -------------------------------------------------------------------------------- 1 | # How To Use 2 | Import in module： 3 | ```ts 4 | import { FullscreenModule } from 'ng-devui/fullscreen'; 5 | ``` 6 | In the page： 7 | ```html 8 | 9 |
    10 |
    11 |
    12 |     13 | ``` 14 | 15 | # d-fullscreen 16 | 17 | ## d-fullscreen parameters 18 | 19 | | Parameter | Type | Default | Description | Jump to Demo | 20 | | :---------------: | :-----------------------: | :---------: | :------------------------------------: | --------------------------------------------------------- | 21 | | fullscreen-target | `HTMLElement` | -- | Required. Content projection, set the elements to be displayed in full screen. | [Immersive full screen](demo#immersive-full-screen) | 22 | | fullscreen-launch | `HTMLElement` | -- | Required. Content projection, set the button to trigger the full screen. | [Immersive full screen](demo#immersive-full-screen) | 23 | | mode | `'immersive' \|'normal'` | 'immersive' | Optional. Set the full-screen mode. | [Common full screen](demo#general-full-screen) | 24 | | zIndex | `number` | 10 | Optional. Set the full-screen level. | [Common full screen](demo#general-full-screen) | 25 | 26 | ## d-fullscreen event 27 | 28 | | Event | Type | Description | Jump to Demo | 29 | | :--------------: | :---------------------: | :------------------- | --------------------------------------------------------- | 30 | | fullscreenLaunch | `EventEmitter` | Optional. Callback after full screen | [Immersive full screen](demo#immersive-full-screen) | 31 | 32 | ### fullscreen-target directive 33 | Required directive. Content projection, set the elements to be displayed in full screen.[Immersive full screen](demo#immersive-full-screen) 34 | 35 | ### fullscreen-launch directive 36 | Required directive. Content projection, set the button to trigger the full screen.[Immersive full screen](demo#immersive-full-screen) 37 | -------------------------------------------------------------------------------- /devui/fullscreen/fullscreen.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-fullscreen', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-fullscreen
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/gantt/demo/gantt-demo.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-gantt-demo', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-gantt-demo
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/gantt/demo/gantt.route.ts: -------------------------------------------------------------------------------- 1 | import GanttDemoComponent from './gantt-demo' 2 | import DevUIApiComponent from '../../shared/devui-api/devui-api' 3 | 4 | import ApiCn from '../doc/api-cn.md' 5 | import ApiEn from '../doc/api-en.md' 6 | const routes = [ 7 | { path: '', redirectTo: 'demo' }, 8 | { path: 'demo', component: GanttDemoComponent}, 9 | { path: 'api', component: DevUIApiComponent, meta: { 10 | 'zh-cn': ApiCn, 11 | 'en-us': ApiEn 12 | }} 13 | ] 14 | 15 | export default routes 16 | -------------------------------------------------------------------------------- /devui/gantt/gantt.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-gantt', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-gantt
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/image-preview/demo/image-preview-demo.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-image-preview-demo', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-image-preview-demo
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/image-preview/demo/image-preview.route.ts: -------------------------------------------------------------------------------- 1 | import ImagePreviewDemoComponent from './image-preview-demo' 2 | import DevUIApiComponent from '../../shared/devui-api/devui-api' 3 | 4 | import ApiCn from '../doc/api-cn.md' 5 | import ApiEn from '../doc/api-en.md' 6 | const routes = [ 7 | { path: '', redirectTo: 'demo' }, 8 | { path: 'demo', component: ImagePreviewDemoComponent}, 9 | { path: 'api', component: DevUIApiComponent, meta: { 10 | 'zh-cn': ApiCn, 11 | 'en-us': ApiEn 12 | }} 13 | ] 14 | 15 | export default routes 16 | -------------------------------------------------------------------------------- /devui/image-preview/doc/README.md: -------------------------------------------------------------------------------- 1 | # 功能点 2 | ## 第一版本 提供指令 3 | 1. 可进行图片预览、变换、切换 4 | 5 | -------------------------------------------------------------------------------- /devui/image-preview/doc/api-cn.md: -------------------------------------------------------------------------------- 1 | # 如何使用 2 | 在module中引入： 3 | ```ts 4 | import { ImagePreviewModule } from 'ng-devui/image-preview'; 5 | ``` 6 | 在页面中使用： 7 | ```html 8 |
    9 | ``` 10 | 11 | # dImagePreview 12 | 13 | ## dImagePreview 参数 14 | 15 | | 参数 | 类型 | 默认值 | 描述 | 跳转 Demo | 16 | | :------------: | :--------------------: | :---: | :------------------------------------: | ------------------------------------------------- | 17 | | customSub | `Subject` | -- | 可选，customsub 触发 next 时，打开预览 | [自定义开启预览窗口](demo#custom-usage) | 18 | | disableDefault | `boolean` | false | 可选，关闭默认点击触发图片预览方式 | [自定义开启预览窗口](demo#custom-usage) | 19 | | zIndex | `number` | 1050 | 可选，设置预览时图片的z-index值 | [设置zIndex](demo#z-index-usage) | 20 | | backDropZIndex | `number` | 1040 | 可选，设置预览时图片背景的z-index值 | [设置zIndex](demo#z-index-usage) | 21 | -------------------------------------------------------------------------------- /devui/image-preview/doc/api-en.md: -------------------------------------------------------------------------------- 1 | # How To Use 2 | Import in module： 3 | ```ts 4 | import { ImagePreviewModule } from 'ng-devui/image-preview'; 5 | ``` 6 | In the page： 7 | ```html 8 |
    9 | ``` 10 | 11 | # dImagePreview 12 | 13 | ## dImagePreview Parameter 14 | 15 | | Parameter | Type | Default | Description | Jump to Demo | 16 | | :------------: | :--------------------: | :---: | :------------------------------------: | ------------------------------------------------- | 17 | | customSub | `Subject` | -- | Optional. When customsub triggers next, preview is opened. | [Customized preview window opening](demo#custom-usage) | 18 | | disableDefault | `boolean` | false | Optional. Disable the default image preview mode triggered by clicking. | [Customized preview window enabling](demo#custom-usage) | 19 | | zIndex | `number` | 1050 | Optional. Sets the z-index value of the image during preview. | [Setting zIndex](demo#z-index-usage) | 20 | | backDropZIndex | `number` | 1040 | Optional. Sets the z-index value of the back drop of the image during preview. | [Setting zIndex](demo#z-index-usage) | 21 | -------------------------------------------------------------------------------- /devui/image-preview/image-preview.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-image-preview', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-image-preview
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/input-number/demo/input-number-demo.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-input-number-demo', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-input-number-demo
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/input-number/demo/input-number.route.ts: -------------------------------------------------------------------------------- 1 | import InputNumberDemoComponent from './input-number-demo' 2 | import DevUIApiComponent from '../../shared/devui-api/devui-api' 3 | 4 | import ApiCn from '../doc/api-cn.md' 5 | import ApiEn from '../doc/api-en.md' 6 | const routes = [ 7 | { path: '', redirectTo: 'demo' }, 8 | { path: 'demo', component: InputNumberDemoComponent}, 9 | { path: 'api', component: DevUIApiComponent, meta: { 10 | 'zh-cn': ApiCn, 11 | 'en-us': ApiEn 12 | }} 13 | ] 14 | 15 | export default routes 16 | -------------------------------------------------------------------------------- /devui/input-number/input-number.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-input-number', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-input-number
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/layout/demo/layout-demo.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-layout-demo', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-layout-demo
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/layout/demo/layout.route.ts: -------------------------------------------------------------------------------- 1 | import LayoutDemoComponent from './layout-demo' 2 | import DevUIApiComponent from '../../shared/devui-api/devui-api' 3 | 4 | import ApiCn from '../doc/api-cn.md' 5 | import ApiEn from '../doc/api-en.md' 6 | const routes = [ 7 | { path: '', redirectTo: 'demo' }, 8 | { path: 'demo', component: LayoutDemoComponent}, 9 | { path: 'api', component: DevUIApiComponent, meta: { 10 | 'zh-cn': ApiCn, 11 | 'en-us': ApiEn 12 | }} 13 | ] 14 | 15 | export default routes 16 | -------------------------------------------------------------------------------- /devui/layout/doc/api-cn.md: -------------------------------------------------------------------------------- 1 | # 如何使用 2 | 3 | 在 module 中使用： 4 | 5 | ```ts 6 | import { LayoutModule } from 'ng-devui'; 7 | ``` 8 | 9 | 在页面中使用： 10 | 11 | ```html 12 | 13 | 14 | 15 | 16 | 17 | ``` 18 | 19 | # d-layout 20 | 21 | 布局容器，可以与`d-header`, `d-content`, `d-footer`, `d-aside`组合实现布局； 22 | `d-layout`下可嵌套元素：`d-header`, `d-content`, `d-aside`, `d-layout`。 23 | 24 | # d-header 25 | 26 | 顶部布局，只能放在`d-layout`容器中，作为`d-layout`容器的顶部实现。 27 | 默认高度：40px。 28 | 29 | # d-footer 30 | 31 | 底部布局，只能放在`d-layout`容器中，作为`d-layout`容器的底部实现。 32 | 33 | # d-content 34 | 35 | 内容容器，只能放在`d-layout`容器中，作为`d-layout`容器`d-header`与`d-footer`之间的内容。 36 | 37 | # d-aside 38 | 39 | 侧边栏，只能放在`d-layout`容器中，作为`d-layout`容器的侧边栏部分。 40 | -------------------------------------------------------------------------------- /devui/layout/doc/api-en.md: -------------------------------------------------------------------------------- 1 | # How to use 2 | 3 | Import into module: 4 | 5 | ```ts 6 | import { LayoutModule } from 'ng-devui'; 7 | ``` 8 | 9 | In the page: 10 | 11 | ```html 12 | 13 | 14 | 15 | 16 | 17 | ``` 18 | 19 | # d-layout 20 | 21 | Layout container, which can be combined with `d-header`, `d-content`, `d-footer`, `d-aside` to implement layout. 22 | Elements that can be nested under `d-layout`: `d-header`, `d-content`, `d-aside`, `d-layout`. 23 | 24 | # d-header 25 | 26 | Top layout, which can be implemented only in the `d-layout` container as the top of the `d-layout` container. 27 | Default height: 40 px 28 | 29 | # d-footer 30 | 31 | Bottom layout, which can be implemented only in the `d-layout` container as the bottom of the `d-layout` container. 32 | 33 | # d-content 34 | 35 | Content container, which can be placed only in the `d-layout` container as the content between `d-header` and `d-footer` in the `d-layout` container. 36 | 37 | # d-aside 38 | 39 | Sidebar, which can only be placed in the `d-layout` container as the sidebar part of the `d-layout` container. 40 | -------------------------------------------------------------------------------- /devui/layout/layout.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-layout', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-layout
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/loading/demo/loading-demo.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-loading-demo', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-loading-demo
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/loading/demo/loading.route.ts: -------------------------------------------------------------------------------- 1 | import LoadingDemoComponent from './loading-demo' 2 | import DevUIApiComponent from '../../shared/devui-api/devui-api' 3 | 4 | import ApiCn from '../doc/api-cn.md' 5 | import ApiEn from '../doc/api-en.md' 6 | const routes = [ 7 | { path: '', redirectTo: 'demo' }, 8 | { path: 'demo', component: LoadingDemoComponent}, 9 | { path: 'api', component: DevUIApiComponent, meta: { 10 | 'zh-cn': ApiCn, 11 | 'en-us': ApiEn 12 | }} 13 | ] 14 | 15 | export default routes 16 | -------------------------------------------------------------------------------- /devui/loading/loading.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-loading', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-loading
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/modal/demo/modal-demo.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-modal-demo', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-modal-demo
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/modal/demo/modal.route.ts: -------------------------------------------------------------------------------- 1 | import ModalDemoComponent from './modal-demo' 2 | import DevUIApiComponent from '../../shared/devui-api/devui-api' 3 | 4 | import ApiCn from '../doc/api-cn.md' 5 | import ApiEn from '../doc/api-en.md' 6 | const routes = [ 7 | { path: '', redirectTo: 'demo' }, 8 | { path: 'demo', component: ModalDemoComponent}, 9 | { path: 'api', component: DevUIApiComponent, meta: { 10 | 'zh-cn': ApiCn, 11 | 'en-us': ApiEn 12 | }} 13 | ] 14 | 15 | export default routes 16 | -------------------------------------------------------------------------------- /devui/modal/modal.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-dragdrop', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-dragdrop
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/multi-auto-complete/demo/multi-auto-complete-demo.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-multi-auto-complete-demo', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-multi-auto-complete-demo
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/multi-auto-complete/demo/multi-auto-complete.route.ts: -------------------------------------------------------------------------------- 1 | import MultiAutoCompleteDemoComponent from './multi-auto-complete-demo' 2 | import DevUIApiComponent from '../../shared/devui-api/devui-api' 3 | 4 | import ApiCn from '../doc/api-cn.md' 5 | import ApiEn from '../doc/api-en.md' 6 | const routes = [ 7 | { path: '', redirectTo: 'demo' }, 8 | { path: 'demo', component: MultiAutoCompleteDemoComponent}, 9 | { path: 'api', component: DevUIApiComponent, meta: { 10 | 'zh-cn': ApiCn, 11 | 'en-us': ApiEn 12 | }} 13 | ] 14 | 15 | export default routes 16 | -------------------------------------------------------------------------------- /devui/multi-auto-complete/multi-auto-complete.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-multi-auto-complete', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-multi-auto-complete
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/pagination/demo/pagination-demo.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-pagination-demo', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-pagination-demo
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/pagination/demo/pagination.route.ts: -------------------------------------------------------------------------------- 1 | import PaginationDemoComponent from './pagination-demo' 2 | import DevUIApiComponent from '../../shared/devui-api/devui-api' 3 | 4 | import ApiCn from '../doc/api-cn.md' 5 | import ApiEn from '../doc/api-en.md' 6 | const routes = [ 7 | { path: '', redirectTo: 'demo' }, 8 | { path: 'demo', component: PaginationDemoComponent}, 9 | { path: 'api', component: DevUIApiComponent, meta: { 10 | 'zh-cn': ApiCn, 11 | 'en-us': ApiEn 12 | }} 13 | ] 14 | 15 | export default routes 16 | -------------------------------------------------------------------------------- /devui/pagination/pagination.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-pagination', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-pagination
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/panel/demo/basic/basic.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue'; 2 | import Panel from '../../panel'; 3 | 4 | export default defineComponent({ 5 | name: 'd-panel-basic', 6 | setup() { 7 | return () => { 8 | return ( 9 |
    10 | 11 | {{ 12 | header: () => 'Panel with foldable', 13 | body: () => 'This is body' 14 | }} 15 | 16 |

    17 | 18 | {{ 19 | header: () => 'Panel with header and footer', 20 | body: () => 'This is body', 21 | footer: () => 'This is footer' 22 | }} 23 | 24 |
    25 | ) 26 | } 27 | } 28 | }) -------------------------------------------------------------------------------- /devui/panel/demo/condition-change/condition-change.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent, ref } from 'vue'; 2 | import Panel from '../../panel'; 3 | import Button from '../../../button/button'; 4 | 5 | export default defineComponent({ 6 | name: 'd-panel-condition-change', 7 | setup() { 8 | 9 | const isCollspaed = true; 10 | const panelToggle = ref(true); 11 | 12 | const beforeToggle = (isOpened: boolean) => { 13 | return isOpened ? panelToggle.value : true; 14 | } 15 | 16 | return () => { 17 | return ( 18 |
    19 | 20 | {{ 21 | header: () => 'Panel with foldable', 22 | body: () => 'This is body' 23 | }} 24 | 25 |

    26 | 29 |
    30 | ) 31 | } 32 | } 33 | }) -------------------------------------------------------------------------------- /devui/panel/demo/panel-demo.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | import CodeBox from '../../shared/devui-codebox/devui-codebox' 3 | import PanelBasic from './basic/basic' 4 | import PanelType from './type/type' 5 | import PanelCoditionChange from './condition-change/condition-change' 6 | 7 | import BasicCode from './basic/basic.tsx?raw'; 8 | import TypeCode from './type/type.tsx?raw'; 9 | import CoditionCode from './condition-change/condition-change.tsx?raw' 10 | 11 | export default defineComponent({ 12 | name: 'd-panel-demo', 13 | props: { 14 | }, 15 | setup(props, ctx) { 16 | const basicSource: any[] = [{title: 'TSX', language: 'TSX', code: BasicCode}]; 17 | const typeSource: any[] = [{title: 'TSX', language: 'TSX', code: TypeCode}]; 18 | const coditionSoure: any[] = [{title: 'TSX', language: 'TSX', code: CoditionCode}]; 19 | return () => { 20 | return
    21 |
    22 |
    {'基本用法'}
    23 |
    24 | 25 | 26 | 27 |
    28 |
    29 |
    {'多种类型'}
    30 |
    {'面板类型分为default、primary、success，danger、warning、info。'}
    31 | 32 | 33 | 34 |
    35 |
    36 |
    {'根据条件阻止折叠'}
    37 |
    {'根据条件判断，当panel展开时，点击阻止折叠按钮，将无法折叠panel。当panel折叠时不影响操作。'}
    38 | 39 | 40 | 41 |
    42 |
    43 | } 44 | } 45 | }) -------------------------------------------------------------------------------- /devui/panel/demo/panel.route.ts: -------------------------------------------------------------------------------- 1 | import PanelDemoComponent from './panel-demo' 2 | import DevUIApiComponent from '../../shared/devui-api/devui-api' 3 | 4 | import ApiCn from '../doc/api-cn.md' 5 | import ApiEn from '../doc/api-en.md' 6 | const routes = [ 7 | { path: '', redirectTo: 'demo' }, 8 | { path: 'demo', component: PanelDemoComponent}, 9 | { path: 'api', component: DevUIApiComponent, meta: { 10 | 'zh-cn': ApiCn, 11 | 'en-us': ApiEn 12 | }} 13 | ] 14 | 15 | export default routes 16 | -------------------------------------------------------------------------------- /devui/panel/demo/type/type.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue'; 2 | import Panel from '../../panel'; 3 | 4 | export default defineComponent({ 5 | name: 'd-panel-type', 6 | setup() { 7 | const isCollapsed = true; 8 | return () => { 9 | return ( 10 |
    11 | 12 | {{ 13 | header: () => 'Panel with default Type', 14 | body: () => 'This is body' 15 | }} 16 | 17 |

    18 | 19 | {{ 20 | header: () => 'Panel with Primary Type', 21 | body: () => 'This is body' 22 | }} 23 | 24 |

    25 | 26 | {{ 27 | header: () => 'Panel with Success Type', 28 | body: () => 'This is body' 29 | }} 30 | 31 |

    32 | 33 | {{ 34 | header: () => 'Panel with Info Type', 35 | body: () => 'This is body' 36 | }} 37 | 38 |

    39 | 40 | {{ 41 | header: () => 'Panel with Warning Type', 42 | body: () => 'This is body' 43 | }} 44 | 45 |

    46 | 47 | {{ 48 | header: () => 'Panel with Danger Type', 49 | body: () => 'This is body' 50 | }} 51 | 52 |
    53 | ) 54 | } 55 | } 56 | }) -------------------------------------------------------------------------------- /devui/panel/doc/api-cn.md: -------------------------------------------------------------------------------- 1 | # 如何使用 2 | 3 | 在module中引入： 4 | ```ts 5 | import { PanelModule } from 'ng-devui'; 6 | ``` 7 | 8 | 在页面中使用： 9 | ```html 10 | 11 | 12 | 13 | 14 | 15 | ``` 16 | 17 | # d-panel 18 | ## d-panel 参数 19 | 20 | | 参数 | 类型 | 默认 | 说明 | 跳转 Demo | 21 | | :----------: | :-----------------------------: | :-------: | :----------------------------------------------------------------------------------------- | ----------------------------------------------------------- | 22 | | type | [`PanelType`](#paneltype) | 'default' | 可选，面板的类型 | [基本用法](demo#basic-usage) | 23 | | cssClass | `string` | -- | 可选，自定义 class 名 | 24 | | isCollapsed | `boolean` | false | 可选，是否展开 | [基本用法](demo#basic-usage) | 25 | | beforeToggle | `Function\|Promise\|Observable` | -- | 可选，面板折叠状态改变前的回调函数，返回 boolean 类型，返回 false 可以阻止面板改变折叠状态 | [根据条件阻止折叠](demo#condition-change) | 26 | 27 | ## d-panel 事件 28 | 29 | | 参数 | 类型 | 说明 | 30 | | :----: | :---------------------: | :--------------------------------------------- | 31 | | toggle | `EventEmitter` | 可选，点击面板时的回调，返回当前面板的展开状态 | 32 | 33 | # 接口 & 类型定义 34 | 35 | ### PanelType 36 | ```ts 37 | export type PanelType = 'default' | 'primary' | 'success' | 'danger' | 'warning' | 'info'; 38 | ``` -------------------------------------------------------------------------------- /devui/popover/demo/popover-demo.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-popover-demo', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-popover-demo
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/popover/demo/popover.route.ts: -------------------------------------------------------------------------------- 1 | import PopoverDemoComponent from './popover-demo' 2 | import DevUIApiComponent from '../../shared/devui-api/devui-api' 3 | 4 | import ApiCn from '../doc/api-cn.md' 5 | import ApiEn from '../doc/api-en.md' 6 | const routes = [ 7 | { path: '', redirectTo: 'demo' }, 8 | { path: 'demo', component: PopoverDemoComponent}, 9 | { path: 'api', component: DevUIApiComponent, meta: { 10 | 'zh-cn': ApiCn, 11 | 'en-us': ApiEn 12 | }} 13 | ] 14 | 15 | export default routes 16 | -------------------------------------------------------------------------------- /devui/popover/popover.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-popover', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-popover
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/progress/demo/progress-demo.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-progress-demo', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-progress-demo
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/progress/demo/progress.route.ts: -------------------------------------------------------------------------------- 1 | import ProgressDemoComponent from './progress-demo' 2 | import DevUIApiComponent from '../../shared/devui-api/devui-api' 3 | 4 | import ApiCn from '../doc/api-cn.md' 5 | import ApiEn from '../doc/api-en.md' 6 | const routes = [ 7 | { path: '', redirectTo: 'demo' }, 8 | { path: 'demo', component: ProgressDemoComponent}, 9 | { path: 'api', component: DevUIApiComponent, meta: { 10 | 'zh-cn': ApiCn, 11 | 'en-us': ApiEn 12 | }} 13 | ] 14 | 15 | export default routes 16 | -------------------------------------------------------------------------------- /devui/progress/doc/api-cn.md: -------------------------------------------------------------------------------- 1 | # 如何使用 2 | 在module中引入： 3 | ```ts 4 | import { ProgressModule } from 'ng-devui/progress'; 5 | ``` 6 | 在页面中使用： 7 | ```html 8 | 9 | ``` 10 | 11 | # d-progress 12 | 13 | ## d-progress 参数 14 | 15 | | 参数 | 类型 | 默认值 | 描述 | 跳转 Demo | 16 | | :------------: | :-------: | :-------: | :------------------------------------------------------- | ---------------------------------------------- | 17 | | percentage | `number` | 0 | 可选，进度条的值最大为 100 | [基本用法](demo#basic-usage) | 18 | | percentageText | `string` | -- | 可选，进度条当前值的文字说明比如：'30%' \| '4/5' | [基本用法](demo#basic-usage) | 19 | | barbgcolor | `string` | '#5170ff' | 可选，进度条的颜色显示，默认为天蓝色 | [基本用法](demo#basic-usage) | 20 | | height | `string` | '20px' | 可选，进度条的高度值，默认值为 20px | [基本用法](demo#basic-usage) | 21 | | isCircle | `boolean` | false | 可选， 显示进度条是否为圈形 | [圆环用法](demo#circle-usage) | 22 | | strokeWidth | `number` | 6 | 可选，设置圈形进度条宽度，单位是进度条与画布宽度的百分比 | [圆环用法](demo#circle-usage) | 23 | | showContent | `boolean` | true | 可选，设置圈形进度条内是否展示内容 | [圆环用法](demo#circle-usage) | 24 | -------------------------------------------------------------------------------- /devui/progress/doc/api-en.md: -------------------------------------------------------------------------------- 1 | # How To Use 2 | Import in module： 3 | ```ts 4 | import { ProgressModule } from 'ng-devui/progress'; 5 | ``` 6 | In the page： 7 | ```html 8 | 9 | ``` 10 | 11 | # d-progress 12 | 13 | ## d-progress parameter 14 | 15 | | Parameter | Type | Default | Description | Jump to Demo | 16 | | :------------: | :-------: | :-------: | :------------------------------------------------------- | ---------------------------------------------- | 17 | | percentage | `number` | 0 | Optional. The maximum value of the progress bar is 100. | [Basic Usage](demo#basic-usage) | 18 | | percentageText | `string` | -- | Optional. Text description of the current value of the progress bar, for example, '30%'\| '4/5' | [Basic Usage](demo#basic-usage) | 19 | | barbgcolor | `string` | '#5170ff' | Optional. Color of the progress bar. The default value is sky blue. | [Basic Usage](demo#basic-usage) | 20 | | height | `string` | '20px' | Optional. The default value is 20px. | [Basic Usage](demo#basic-usage) | 21 | | isCircle | `boolean` | false | Optional. Whether the progress bar is displayed in a circle. | [Circle Usage](demo#circle-usage) | 22 | | strokeWidth | `number` | 6 | Optional. Sets the width of the progress bar. The unit is the percentage of the progress bar to the width of the canvas. | [Circle Usage](demo#circle-usage) | 23 | | showContent | `boolean` | true | Optional. Sets whether to display content in the circle progress bar. | [Circle Usage](demo#circle-usage) | 24 | -------------------------------------------------------------------------------- /devui/progress/progress.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-progress', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-progress
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/quadrant-diagram/demo/quadrant-diagram-demo.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-quadrant-diagram-demo', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-quadrant-diagram-demo
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/quadrant-diagram/demo/quadrant-diagram.route.ts: -------------------------------------------------------------------------------- 1 | import QuadrantDiagramDemoComponent from './quadrant-diagram-demo' 2 | import DevUIApiComponent from '../../shared/devui-api/devui-api' 3 | 4 | import ApiCn from '../doc/api-cn.md' 5 | import ApiEn from '../doc/api-en.md' 6 | const routes = [ 7 | { path: '', redirectTo: 'demo' }, 8 | { path: 'demo', component: QuadrantDiagramDemoComponent}, 9 | { path: 'api', component: DevUIApiComponent, meta: { 10 | 'zh-cn': ApiCn, 11 | 'en-us': ApiEn 12 | }} 13 | ] 14 | 15 | export default routes 16 | -------------------------------------------------------------------------------- /devui/quadrant-diagram/quadrant-diagram.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-quadrant-diagram', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-quadrant-diagram
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/radio/demo/radio-demo.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-radio-demo', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-radio-demo
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/radio/demo/radio.route.ts: -------------------------------------------------------------------------------- 1 | import RadioDemoComponent from './radio-demo' 2 | import DevUIApiComponent from '../../shared/devui-api/devui-api' 3 | 4 | import ApiCn from '../doc/api-cn.md' 5 | import ApiEn from '../doc/api-en.md' 6 | const routes = [ 7 | { path: '', redirectTo: 'demo' }, 8 | { path: 'demo', component: RadioDemoComponent}, 9 | { path: 'api', component: DevUIApiComponent, meta: { 10 | 'zh-cn': ApiCn, 11 | 'en-us': ApiEn 12 | }} 13 | ] 14 | 15 | export default routes 16 | -------------------------------------------------------------------------------- /devui/radio/radio.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-radio', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-radio
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/rate/demo/rate-demo.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-rate-demo', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-rate-demo
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/rate/demo/rate.route.ts: -------------------------------------------------------------------------------- 1 | import RateDemoComponent from './rate-demo' 2 | import DevUIApiComponent from '../../shared/devui-api/devui-api' 3 | 4 | import ApiCn from '../doc/api-cn.md' 5 | import ApiEn from '../doc/api-en.md' 6 | const routes = [ 7 | { path: '', redirectTo: 'demo' }, 8 | { path: 'demo', component: RateDemoComponent}, 9 | { path: 'api', component: DevUIApiComponent, meta: { 10 | 'zh-cn': ApiCn, 11 | 'en-us': ApiEn 12 | }} 13 | ] 14 | 15 | export default routes 16 | -------------------------------------------------------------------------------- /devui/rate/doc/api-cn.md: -------------------------------------------------------------------------------- 1 | # 如何使用 2 | 在module中引入： 3 | ```ts 4 | import { RateModule } from 'ng-devui/rate'; 5 | ``` 6 | 7 | 在页面中使用： 8 | ```html 9 | 10 | ``` 11 | # Rate 12 | 13 | ## d-rate 参数 14 | 15 | | 参数 | 类型 | 默认值 | 描述 | 跳转 Demo | 16 | | :-------: | :-----------------------------: | :---: | :------------------------------------------------------- | ------------------------------------------------------ | 17 | | read | `boolean` | false | 可选，设置是否为只读模式，只读模式无法交互 | [只读模式](demo#read-only-mode) | 18 | | count | `number` | 5 | 可选，设置总等级数 | [只读模式](demo#read-only-mode) | 19 | | type | `'success'\|'warning'\|'error'` | -- | 可选，设置当前评分的类型，不同类型对应不同颜色 | [使用type参数](demo#using-the-type-parameter) | 20 | | color | `string` | -- | 可选，星星颜色 | [动态模式-自定义](demo#dynamic-mode-Custom) | 21 | | icon | `string` | -- | 可选，评分图标的样式，只支持 devUI 图标库中所有图标 | [动态模式](demo#dynamic-mode) | 22 | | character | `string` | -- | 可选，评分图标的样式，icon 与 character 只能设置其中一个 | [动态模式-自定义](demo#dynamic-mode-Custom) | 23 | -------------------------------------------------------------------------------- /devui/rate/doc/api-en.md: -------------------------------------------------------------------------------- 1 | # How to use 2 | Import into module: 3 | ```ts 4 | import { RateModule } from 'ng-devui/rate'; 5 | ``` 6 | 7 | In the page: 8 | ```html 9 | 10 | ``` 11 | # Rate 12 | 13 | ## d-rate parameter 14 | 15 | | Parameter | Type | Default | Description | Jump to Demo | 16 | | :-------: | :-----------------------------: | :---: | :------------------------------------------------------- | ------------------------------------------------------ | 17 | | read | `boolean` | false | Optional. This parameter specifies whether to enable read-only mode. In read-only mode, interaction is not supported. | [Read-only Mode](demo#read-only-mode) | 18 | | count | `number` | 5 | Optional. Sets the total number of levels. | [Read-only Mode](demo#read-only-mode) | 19 | | type | `'success'\|'warning'\|'error'` | -- | Optional. Set the current rating type. Different types correspond to different colors. | [Use the type parameter](demo#using-the-type-parameter) | 20 | | color | `string` | -- | Optional. Star color. | [Dynamic Mode-Custom](demo#dynamic-mode-Custom) | 21 | | icon | `string` | -- | Optional. Style of the rating icon. Only all icons in the DevUI icon library are supported. | [Dynamic Mode](demo#dynamic-mode) | 22 | | character | `string` | -- | Optional. Scoring icon style. Only one of icon and character can be set. | [Dynamic Mode-Custom](demo#dynamic-mode-Custom) | 23 | -------------------------------------------------------------------------------- /devui/rate/rate.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-rate', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-rate
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/read-tip/demo/read-tip-demo.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-read-tip-demo', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-read-tip-demo
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/read-tip/demo/read-tip.route.ts: -------------------------------------------------------------------------------- 1 | import ReadTipDemoComponent from './read-tip-demo' 2 | import DevUIApiComponent from '../../shared/devui-api/devui-api' 3 | 4 | import ApiCn from '../doc/api-cn.md' 5 | import ApiEn from '../doc/api-en.md' 6 | const routes = [ 7 | { path: '', redirectTo: 'demo' }, 8 | { path: 'demo', component: ReadTipDemoComponent}, 9 | { path: 'api', component: DevUIApiComponent, meta: { 10 | 'zh-cn': ApiCn, 11 | 'en-us': ApiEn 12 | }} 13 | ] 14 | 15 | export default routes 16 | -------------------------------------------------------------------------------- /devui/read-tip/doc/api-cn.md: -------------------------------------------------------------------------------- 1 | # 如何使用 2 | 3 | 在 module 中引入： 4 | 5 | ```ts 6 | import { ReadTipModule } from 'ng-devui/read-tip'; 7 | ``` 8 | 9 | 在页面中使用： 10 | 11 | ```html 12 | ... 13 | ``` 14 | 15 | # dReadTip 16 | 17 | ## dReadTip 参数 18 | 19 | | 参数 | 类型 | 默认 | 说明 | 跳转 Demo | 20 | | :------------------: | :---------------------------------: | :-------------------------: | :------------------------------ | -------------------------------------------- | 21 | | readTipOptions | [`ReadTipOptions`](#readtipoptions) | [详见下方](#readtipoptions) | 必选，配置提示选项 | [基本用法](demo#basic) | 22 | | readTipOptions.rules | [`ReadTipRules`](#readtiprules) | -- | 必选，配置 readtip 内容 | [包括多个提示的 readtip](demo#multi-readtip) | 23 | | contentTemplate | `TemplateRef` | -- | 可选，传入模板显示 readtip 内容 | [传入模板显示内容](demo#readtip-template) | 24 | 25 | # 接口 & 类型定义 26 | 27 | ### ReadTipOptions 28 | 29 | ```ts 30 | export interface ReadTipOptions { 31 | trigger?: 'hover' | 'click'; // 默认值是 hover 32 | showAnimate?: boolean; // 默认值是 false 33 | mouseenterTime?: number; // 默认值是 100 34 | mouseleaveTime?: number; // 默认值是 100 35 | position?: PositionType | PositionType[]; // 默认值是 'top' 36 | overlayClassName?: string; // 默认值为空字符串 37 | rules: ReadTipRules; 38 | } 39 | ``` 40 | 41 | ### ReadTipRules 42 | 43 | ```ts 44 | export type ReadTipRules = ReadTipRule | ReadTipRule[]; 45 | 46 | export interface ReadTipRule { 47 | key?: string; 48 | selector: string; 49 | trigger?: 'hover' | 'click'; // 可以继承自 ReadTipOptions 50 | title?: string; 51 | content?: string; 52 | showAnimate?: boolean; // 可以继承自 ReadTipOptions 53 | mouseenterTime?: number; // 可以继承自 ReadTipOptions 54 | mouseleaveTime?: number; // 可以继承自 ReadTipOptions 55 | position?: PositionType | PositionType[]; // 可以继承自 ReadTipOptions 56 | overlayClassName?: string; // 可以继承自 ReadTipOptions 57 | dataFn?: ({ element, rule: ReadTipRule }) => Observable<{ title?: string; content?: string; template?: TemplateRef }>; 58 | } 59 | ``` 60 | -------------------------------------------------------------------------------- /devui/read-tip/doc/api-en.md: -------------------------------------------------------------------------------- 1 | # How to use 2 | 3 | Import into module: 4 | 5 | ```ts 6 | import { ReadTipModule } from 'ng-devui/read-tip'; 7 | ``` 8 | 9 | In the page: 10 | 11 | ```html 12 | ... 13 | ``` 14 | 15 | # dReadTip 16 | 17 | ## dReadTip parameters 18 | 19 | | Parameter | Type | Default | Description | Jump to Demo | 20 | | :------------------: | :---------------------------------: | :-----: | :------------------------------------------- | ------------------------------------------------------ | 21 | | readTipOptions | [`ReadTipOptions`](#readtipoptions) | -- | Required. Set readtip options. | [Basic Usage](demo#basic-usage) | 22 | | readTipOptions.rules | [`ReadTipRules`](#readtiprules) | -- | Option. Set the content of readtip | [Include Multiple Readtip](demo#multi-readtip) | 23 | | contentTemplate | `TemplateRef` | -- | Options. Using template to customize content | [Display Content with Template](demo#readtip-template) | 24 | 25 | # Interface & Type Definition 26 | 27 | ### ReadTipOptions 28 | 29 | ```ts 30 | export interface ReadTipOptions { 31 | trigger?: 'hover' | 'click'; // default is hover 32 | showAnimate?: boolean; // default is false 33 | mouseenterTime?: number; // default is 100 34 | mouseleaveTime?: number; // default is 100 35 | position?: PositionType | PositionType[]; // default is 'top' 36 | overlayClassName?: string; // default is '' 37 | rules: ReadTipRules; 38 | } 39 | ``` 40 | 41 | ### ReadTipRules 42 | 43 | ```ts 44 | export type ReadTipRules = ReadTipRule | ReadTipRule[]; 45 | 46 | export interface ReadTipRule { 47 | key?: string; 48 | selector: string; 49 | trigger?: 'hover' | 'click'; // can inherit from ReadTipOptions 50 | title?: string; 51 | content?: string; 52 | showAnimate?: boolean; // can inherit from ReadTipOptions 53 | mouseenterTime?: number; // can inherit from ReadTipOptions 54 | mouseleaveTime?: number; // can inherit from ReadTipOptions 55 | position?: PositionType | PositionType[]; // can inherit from ReadTipOptions 56 | overlayClassName?: string; // can inherit from ReadTipOptions 57 | dataFn?: ({ element, rule: ReadTipRule }) => Observable<{ title?: string; content?: string; template?: TemplateRef }>; 58 | } 59 | ``` 60 | -------------------------------------------------------------------------------- /devui/read-tip/read-tip.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-read-tip', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-read-tip
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/search/demo/search-demo.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-search-demo', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-search-demo
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/search/demo/search.route.ts: -------------------------------------------------------------------------------- 1 | import SearchDemoComponent from './search-demo' 2 | import DevUIApiComponent from '../../shared/devui-api/devui-api' 3 | 4 | import ApiCn from '../doc/api-cn.md' 5 | import ApiEn from '../doc/api-en.md' 6 | const routes = [ 7 | { path: '', redirectTo: 'demo' }, 8 | { path: 'demo', component: SearchDemoComponent}, 9 | { path: 'api', component: DevUIApiComponent, meta: { 10 | 'zh-cn': ApiCn, 11 | 'en-us': ApiEn 12 | }} 13 | ] 14 | 15 | export default routes 16 | -------------------------------------------------------------------------------- /devui/search/doc/api-cn.md: -------------------------------------------------------------------------------- 1 | # 如何使用 2 | 在module中引入： 3 | ```ts 4 | import { SearchModule } from 'ng-devui/search'; 5 | ``` 6 | 7 | 在页面中使用： 8 | ```html 9 | 10 | ``` 11 | # Search 12 | 13 | ## d-search 参数 14 | 15 | | 参数 | 类型 | 默认 | 说明 | 跳转 Demo | 16 | | :-----------: | :-------: | :---------------------: | :-------------------------------------- | ----------------------------------------------------- | 17 | | size | `string` | '' | 可选，搜索框尺寸，有三种选择 lg、''、sm | [基本用法](demo#basic-usage) | 18 | | placeholder | `string` | 'Please Input keywords' | 可选，输入框的 placeholder | 19 | | maxLength | `number` | Number.MAX_SAFE_INTEGER | 可选，输入框的 max-length | [双向绑定](demo#bidirectional-binding) | 20 | | delay | `number` | 300 | 可选，debounceTime 的延迟 | 21 | | disabled | `boolean` | false | 可选，输入框是否可用 | [基本用法](demo#basic-usage) 22 | | autoFocus | `boolean` | false | 可选，输入框是否自动对焦 | [自动对焦](demo#auto-focus) | 23 | | isKeyupSearch | `boolean` | false | 可选，是否支持输入值立即出发 searchFn | [基本用法](demo#basic-usage) | 24 | | iconPosition | `string` | 'right' | 可选，搜索图标位置，有两种选择'left' / 'right'| [搜索图标左置](demo#icon-left) | 25 | | noBorder | `boolean` | 'false' | 可选，是否显示边框 | [搜索图标左置](demo#icon-left) | 26 | | cssClass | `string` | '' | 可选，支持传入类名到输入框上 | | 27 | 28 | ## d-search 事件 29 | 30 | | 事件 | 类型 | 说明 | 跳转 Demo | 31 | | :------: | :------: | :--------------------------------------------------- | ------------------------------------------- | 32 | | searchFn | `string` | 回车或点击搜索按钮触发的回调函数，返回文本框输入的值 | [基本用法](demo#basic-usage) | 33 | -------------------------------------------------------------------------------- /devui/search/doc/api-en.md: -------------------------------------------------------------------------------- 1 | # How to use 2 | Import into module: 3 | ```ts 4 | import { SearchModule } from 'ng-devui/search'; 5 | ``` 6 | 7 | In the page: 8 | ```html 9 | 10 | ``` 11 | # Search 12 | 13 | ## d-search parameter 14 | 15 | | Parameter | Type | Default | Description | Jump to Demo | 16 | | :-----------: | :-------: | :---------------------: | :-------------------------------------- | ----------------------------------------------------- | 17 | | size | `string` |'' | Optional. Specifies the size of the search box. The options are lg, '', and sm. | [Basic Usage](demo#basic-usage) | 18 | | placeholder | `string` |'Please Input keywords' | Optional. This parameter specifies the placeholder in the input box. | 19 | | maxLength | `number` | Number.MAX_SAFE_INTEGER | Optional. Max-length of the text box. | [Two-way Binding](demo#bidirectional-binding) | 20 | | delay | `number` | 300 | Optional. Delay of debounceTime. | 21 | | disabled | `boolean` | false | Optional. Indicating whether the text box is available. | [Basic Usage](demo#basic-usage) 22 | | autoFocus | `boolean` | false | Optional. Whether to enable autofocus for the text box. | [Auto Focus](demo#auto-focus) | 23 | | isKeyupSearch | `boolean` | false | Optional. Indicates whether to support immediate searchFn after input. | [Basic Usage](demo#basic-usage) | 24 | | iconPosition | `string` | 'right' | Optional. The options are'left' and'right'.| [Left Search Icon](demo#icon-left)| 25 | | noBorder | `boolean` | 'false' | Optional. Specifies whether to display the border. | [Left Search Icon](demo#icon-left) | 26 | | cssClass | `string` |'' | Optional. The class name can be transferred to the text box. | | 27 | 28 | ## d-search event 29 | 30 | | Event | Type | Description | Jump to Demo | 31 | | :------: | :------: | :--------------------------------------------------- | ------------------------------------------- | 32 | | searchFn | `string` | Callback function triggered by pressing Enter or clicking the search button to return the value entered in the text box. | [Basic Usage](demo#basic-usage) | 33 | -------------------------------------------------------------------------------- /devui/search/search.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-search', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-search
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/select/demo/select-demo.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-select-demo', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-select-demo
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/select/demo/select.route.ts: -------------------------------------------------------------------------------- 1 | import SelectDemoComponent from './select-demo' 2 | import DevUIApiComponent from '../../shared/devui-api/devui-api' 3 | 4 | import ApiCn from '../doc/api-cn.md' 5 | import ApiEn from '../doc/api-en.md' 6 | const routes = [ 7 | { path: '', redirectTo: 'demo' }, 8 | { path: 'demo', component: SelectDemoComponent}, 9 | { path: 'api', component: DevUIApiComponent, meta: { 10 | 'zh-cn': ApiCn, 11 | 'en-us': ApiEn 12 | }} 13 | ] 14 | 15 | export default routes 16 | -------------------------------------------------------------------------------- /devui/select/select.tsx: -------------------------------------------------------------------------------- 1 | 2 | import { defineComponent } from 'vue' 3 | 4 | export default defineComponent({ 5 | name: 'd-select', 6 | props: { 7 | }, 8 | setup(props, ctx) { 9 | return () => { 10 | return
    devui-select
    11 | } 12 | } 13 | }) -------------------------------------------------------------------------------- /devui/shared/devui-api/devui-api.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | import { useRoute } from 'vue-router' 3 | 4 | export default defineComponent({ 5 | name: 'd-api', 6 | props: { 7 | }, 8 | setup(props, ctx) { 9 | const route = useRoute() 10 | const ApiCn = route.meta['zh-cn'] 11 | 12 | return () => { 13 | return
    14 | } 15 | } 16 | }) -------------------------------------------------------------------------------- /devui/shared/devui-codebox/codebox-collapse-icon.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue'; 2 | export default defineComponent({ 3 | setup() { 4 | return () => { 5 | return ( 6 | 7 | 11 | 12 | ) 13 | } 14 | } 15 | }) -------------------------------------------------------------------------------- /devui/shared/devui-codebox/codebox-copied-icon.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue'; 2 | export default defineComponent({ 3 | setup() { 4 | return () => { 5 | return ( 6 | 7 | 8 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | ) 21 | } 22 | } 23 | }) -------------------------------------------------------------------------------- /devui/shared/devui-codebox/codebox-copy-icon.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue'; 2 | export default defineComponent({ 3 | setup() { 4 | return () => { 5 | return ( 6 | 7 | 10 | 11 | ) 12 | } 13 | } 14 | }) -------------------------------------------------------------------------------- /devui/shared/devui-codebox/devui-source-data.ts: -------------------------------------------------------------------------------- 1 | export interface DevuiSourceData { 2 | title?: string; 3 | language?: string; 4 | code?: any 5 | } -------------------------------------------------------------------------------- /devui/shared/devui-highlight/devui-highlight.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-highlight', 5 | props: { 6 | code: String, 7 | language: String 8 | }, 9 | setup(props, ctx) { 10 | return () => { 11 | return ( 12 | 
    13 |           {/* 暂做处理避免tsx语法被解析为html标签 */}
14 |           
15 |
    16 | ) 17 | } 18 | } 19 | }) -------------------------------------------------------------------------------- /devui/slider/demo/slider-demo.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-slider-demo', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-slider-demo
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/slider/demo/slider.route.ts: -------------------------------------------------------------------------------- 1 | import SliderDemoComponent from './slider-demo' 2 | import DevUIApiComponent from '../../shared/devui-api/devui-api' 3 | 4 | import ApiCn from '../doc/api-cn.md' 5 | import ApiEn from '../doc/api-en.md' 6 | const routes = [ 7 | { path: '', redirectTo: 'demo' }, 8 | { path: 'demo', component: SliderDemoComponent}, 9 | { path: 'api', component: DevUIApiComponent, meta: { 10 | 'zh-cn': ApiCn, 11 | 'en-us': ApiEn 12 | }} 13 | ] 14 | 15 | export default routes 16 | -------------------------------------------------------------------------------- /devui/slider/doc/api-cn.md: -------------------------------------------------------------------------------- 1 | # 如何使用 2 | 在module中引入： 3 | ```ts 4 | import { SliderModule } from 'ng-devui/slider'; 5 | ``` 6 | 在页面中使用： 7 | ```html 8 | 9 | ``` 10 | 11 | # d-slider 12 | 13 | ## d-slider 参数 14 | 15 | | 参数 | 类型 | 默认 | 说明 | 跳转 Demo | 16 | | :----------: | :----------------: | :----------------------: | :------------------------------------------------------------------ | --------------------------------------------------- | 17 | | min | `number` | 0 | 可选，滑动输入条的最小值 | [基本用法](demo#basic-usage) | 18 | | max | `number` | 100 | 可选，滑动输入条的最大值 | [基本用法](demo#basic-usage) | 19 | | step | `number` | 1 | 可选，滑动输入条的步长，取值必须大于等于 0，且必须可被(max-min)整除 | [基本用法](demo#basic-usage) | 20 | | disabled | `boolean` | false | 可选，值为 true 时禁止用户输入 | [禁止输入态](demo#slider-disabled) | 21 | | tipsRenderer | `function \| null` | (value) => String(value) | 可选，渲染 Popover 内容的函数，传入 null 时不显示 Popover | [异定制Popover的显示内容](demo#slider-custom) | 22 | 23 | ## d-slider 事件 24 | 25 | | 事件 | 类型 | 说明 | 跳转 Demo | 26 | | :----------------: | :---------------------: | :-----------------------------------------: | ------------------------------------------------- | 27 | | afterChange | `EventEmitter` | 滑动结束事件，与`onmouseup`触发时机一致，返回当前值。 | [基本用法](demo#basic-usage) | 28 | -------------------------------------------------------------------------------- /devui/slider/doc/api-en.md: -------------------------------------------------------------------------------- 1 | # How To Use 2 | Import into module： 3 | ```ts 4 | import { SliderModule } from 'ng-devui/slider'; 5 | ``` 6 | In the page： 7 | ```html 8 | 9 | ``` 10 | 11 | # d-slider 12 | 13 | ## d-slider parameter 14 | 15 | | Parameter | Type | Default | Description | Jump to Demo | 16 | | :----------: | :----------------: | :----------------------: | :------------------------------------------------------------------ | --------------------------------------------------- | 17 | | min | `number` | 0 | Optional. Minimum value of the sliding input bar | [Basic Usage](demo#basic-usage) | 18 | | max | `number` | 100 | Optional. Maximum value of the sliding input bar | [Basic Usage](demo#basic-usage) | 19 | | step | `number` | 1 | Optional. Step of the sliding input bar. The value must be greater than or equal to 0 and must be divisible by (max-min). | [Basic Usage](demo#basic-usage) | 20 | | disabled | `boolean` | false | Optional. When the value is true, users are not allowed to enter. | [Input forbidden state](demo#slider-disabled) | 21 | | tipsRenderer | `function \| null` | (value) => String(value) | Optional. This parameter indicates the function for rendering popover content. If null is transferred, popover content is not displayed. | [Customized popover content displayed](demo#slider-custom) | 22 | 23 | ## d-slider event 24 | 25 | | Event | Type | Description | Jump to Demo | 26 | | :----------------: | :---------------------: | :-----------------------------------------: | ------------------------------------------------- | 27 | | afterChange | `EventEmitter` | Sliding end event, which is triggered at the same time as `onmouseup`. The current value is returned. | [Basic Usage](demo#basic-usage) | 28 | -------------------------------------------------------------------------------- /devui/slider/slider.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-slider', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-slider
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/splitter/demo/splitter-demo.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-splitter-demo', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-splitter-demo
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/splitter/demo/splitter.route.ts: -------------------------------------------------------------------------------- 1 | import SplitterDemoComponent from './splitter-demo' 2 | import DevUIApiComponent from '../../shared/devui-api/devui-api' 3 | 4 | import ApiCn from '../doc/api-cn.md' 5 | import ApiEn from '../doc/api-en.md' 6 | const routes = [ 7 | { path: '', redirectTo: 'demo' }, 8 | { path: 'demo', component: SplitterDemoComponent}, 9 | { path: 'api', component: DevUIApiComponent, meta: { 10 | 'zh-cn': ApiCn, 11 | 'en-us': ApiEn 12 | }} 13 | ] 14 | 15 | export default routes 16 | -------------------------------------------------------------------------------- /devui/splitter/splitter.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-splitter', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-splitter
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/status/demo/status-demo.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-status-demo', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-status-demo
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/status/demo/status.route.ts: -------------------------------------------------------------------------------- 1 | import StatusDemoComponent from './status-demo' 2 | import DevUIApiComponent from '../../shared/devui-api/devui-api' 3 | 4 | import ApiCn from '../doc/api-cn.md' 5 | import ApiEn from '../doc/api-en.md' 6 | const routes = [ 7 | { path: '', redirectTo: 'demo' }, 8 | { path: 'demo', component: StatusDemoComponent}, 9 | { path: 'api', component: DevUIApiComponent, meta: { 10 | 'zh-cn': ApiCn, 11 | 'en-us': ApiEn 12 | }} 13 | ] 14 | 15 | export default routes 16 | -------------------------------------------------------------------------------- /devui/status/doc/api-cn.md: -------------------------------------------------------------------------------- 1 | # 如何使用 2 | 在module中引入： 3 | ```ts 4 | import { StatusModule } from 'ng-devui/status'; 5 | ``` 6 | 7 | 在页面中使用： 8 | ```html 9 | 10 | ``` 11 | # d-status 12 | ## d-status 参数 13 | 14 | | 参数 | 类型 | 默认 | 说明 | 跳转 Demo | 15 | | :--: | :------: | :-------: | :--------------------------------------------------------------------------- | ------------------------------------------- | 16 | | type | `invalid\|running\|waiting\|important\|less-important\|error` | 'invalid' | 必选，类型，值有 success、error、warning、initial、waiting、running、invalid | [基本用法](demo#basic-usage) | 17 | -------------------------------------------------------------------------------- /devui/status/doc/api-en.md: -------------------------------------------------------------------------------- 1 | # How to use 2 | The following information is introduced into the module 3 | 4 | ```ts 5 | import { StatusModule } from 'ng-devui/status'; 6 | ``` 7 | 8 | On the page 9 | 10 | ```html 11 | 12 | ``` 13 | # d-status 14 | ## d-status parameter 15 | 16 | | Parameter | Type | Default | Description | Jump to Demo | 17 | | :-------: | :-----------------------------------------------------------: | :-------: | :----------------------------------------------------------------------------------------- | -------------------------------------------------------- | 18 | | type | `invalid\|running\|waiting\|important\|less-important\|error` | 'invalid' | Required. The value can be success, error, warning, initial, waiting, running, or invalid. | [Basic usage](demo#basic-usage) | 19 | -------------------------------------------------------------------------------- /devui/status/status.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-status', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-status
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/steps-guide/demo/steps-guide-demo.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-steps-guide-demo', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-steps-guide-demo
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/steps-guide/demo/steps-guide.route.ts: -------------------------------------------------------------------------------- 1 | import StepsGuideDemoComponent from './steps-guide-demo' 2 | import DevUIApiComponent from '../../shared/devui-api/devui-api' 3 | 4 | import ApiCn from '../doc/api-cn.md' 5 | import ApiEn from '../doc/api-en.md' 6 | const routes = [ 7 | { path: '', redirectTo: 'demo' }, 8 | { path: 'demo', component: StepsGuideDemoComponent}, 9 | { path: 'api', component: DevUIApiComponent, meta: { 10 | 'zh-cn': ApiCn, 11 | 'en-us': ApiEn 12 | }} 13 | ] 14 | 15 | export default routes 16 | -------------------------------------------------------------------------------- /devui/steps-guide/steps-guide.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-steps-guide', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-steps-guide
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/sticky/demo/sticky-demo.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-sticky-demo', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-sticky-demo
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/sticky/demo/sticky.route.ts: -------------------------------------------------------------------------------- 1 | import StickyDemoComponent from './sticky-demo' 2 | import DevUIApiComponent from '../../shared/devui-api/devui-api' 3 | 4 | import ApiCn from '../doc/api-cn.md' 5 | import ApiEn from '../doc/api-en.md' 6 | const routes = [ 7 | { path: '', redirectTo: 'demo' }, 8 | { path: 'demo', component: StickyDemoComponent}, 9 | { path: 'api', component: DevUIApiComponent, meta: { 10 | 'zh-cn': ApiCn, 11 | 'en-us': ApiEn 12 | }} 13 | ] 14 | 15 | export default routes 16 | -------------------------------------------------------------------------------- /devui/sticky/doc/api-cn.md: -------------------------------------------------------------------------------- 1 | # 如何使用 2 | 3 | 在module中引入： 4 | ```ts 5 | import { StickyModule } from 'ng-devui'; 6 | ``` 7 | 8 | 在页面中使用： 9 | ```html 10 | 11 | ``` 12 | 13 | # d-sticky 14 | 15 | 使用了一个组件能在父容器或者指定容器出现在可视区域的时候，跟随可视区域移动，在父容器或者指定容器从可视区域消失的时候，跟随父容器移动到可视区域外。如果父容器等于可视窗口，那组件不会消失。 16 | 17 | 便贴组件的内容必须有自己的宽度和高度，否则浮动的时候可能会宽度高度不正确。 18 | 19 | 目前只支持垂直方向跟随。 20 | 21 | **注意**：父容器必须有个高度，并且不会由于组件的浮动出现高度塌陷，否则组件无法跟随浮动。 22 | 23 | **注意**：由于监听了页面的滚动，一个页面里的 sticky 元素不应有太多，影响性能。 24 | 25 | ## d-sticky 参数 26 | 27 | | 参数 | 类型 | 默认 | 说明 | 跳转 Demo | 28 | | :----------: | :----------------------------: | :----------------------: | :------------------------------------------------------------------------------------: | ----------------------------------------------------- | 29 | | zIndex | `number` | -- | 可选，指定包裹层的 z-index，用于浮动的时候控制 z 轴的叠放 | [基本用法](demo#basic-usage) | 30 | | container | `HTMLElement` | 父容器 | 可选，触发的容器，可不同于父容器 | [基本用法](demo#basic-usage) | 31 | | view | `{top?:number,bottom?:number}` | {top:0,bottom:0} | 可选，用于可视区域的调整，比如顶部有固定位置的头部等，数值对应被遮挡的顶部或底部的高度 | [基本用法](demo#basic-usage) | 32 | | scrollTarget | `HTMLElement` | document.documentElement | 可选，设置要发生滚动的容器，一般为滚动条所在容器，为主页面的滚动条时候可以不设置 | [更换滚动容器](demo#scroll-target) | 33 | 34 | **注意**： container 范围如果大于 scrollTarget，生效的只有 scrollTarget 范围。 35 | 36 | ## d-sticky 事件 37 | 38 | | 事件 | 类型 | 说明 | 跳转 Demo | 39 | | :----------: | :--------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | ----------------------------------------------- | 40 | | statusChange | [`EventEmitter`](#stickystatus) | 可选，状态变化的时候触发，值为变化后的状态值 | [基本用法](demo#basic-usage) | 41 | 42 | # 接口 & 类型定义 43 | 44 | ### StickyStatus 45 | ```ts 46 | /** 47 | * normal: 表示处于正常状态 48 | * follow: 表示处于跟着页面滚动固定位置状态 49 | * stay: 表示横向滚动时候的跟随固定状态 50 | * remain: 表示被容器托起处于容器底部跟着容器走的状态 51 | */ 52 | export type StickyStatus = 'normal' | 'follow' | 'stay' | 'remain'; 53 | ``` 54 | -------------------------------------------------------------------------------- /devui/sticky/sticky.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-sticky', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-sticky
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/style/core/_cdk.scss: -------------------------------------------------------------------------------- 1 | // @import '~@angular/cdk/overlay-prebuilt'; 2 | 3 | .cdk-overlay-container { 4 | z-index: 1051; // 比modal z-index:1050;高 5 | } 6 | 7 | .cdk-global-scrollblock body { 8 | overflow-x: visible; 9 | } 10 | -------------------------------------------------------------------------------- /devui/style/core/_common.scss: -------------------------------------------------------------------------------- 1 | .over-flow-ellipsis { 2 | overflow: hidden; 3 | white-space: nowrap; 4 | text-overflow: ellipsis; 5 | } 6 | 7 | .clear-fix { 8 | zoom: 1; 9 | } 10 | 11 | .clear-fix::after { 12 | content: ''; 13 | display: block; 14 | width: 0; 15 | clear: both; 16 | } 17 | 18 | .devui-close { 19 | float: right; 20 | font-weight: bold; 21 | line-height: 20px; 22 | height: 20px; 23 | color: $devui-text; 24 | text-shadow: 0 1px 0 #ffffff; 25 | filter: alpha(opacity=20); 26 | opacity: 0.2; 27 | 28 | &:hover, 29 | &:focus { 30 | color: $devui-text; 31 | text-decoration: none; 32 | cursor: pointer; 33 | filter: alpha(opacity=50); 34 | opacity: 0.5; 35 | } 36 | } 37 | 38 | button.devui-close { 39 | -webkit-appearance: none; 40 | padding: 0; 41 | cursor: pointer; 42 | background: transparent; 43 | border: 0; 44 | } 45 | 46 | a:hover, 47 | a:focus { 48 | color: $devui-link; 49 | } 50 | 51 | a:active, 52 | a:hover { 53 | outline: 0; 54 | } 55 | 56 | .devui-link { 57 | color: $devui-link; 58 | 59 | &:hover { 60 | color: $devui-link-active; 61 | text-decoration: underline; 62 | cursor: pointer; 63 | } 64 | } 65 | 66 | .devui-link-light { 67 | color: $devui-link-light; 68 | 69 | &:hover { 70 | color: $devui-link-light-active; 71 | text-decoration: underline; 72 | cursor: pointer; 73 | } 74 | } 75 | 76 | .devui-disabled { 77 | &, 78 | &.devui-input-group-addon { 79 | border-color: $devui-disabled-line; 80 | } 81 | 82 | &, 83 | & > input, 84 | & > .devui-input-group-addon { 85 | color: $devui-disabled-text; 86 | background-color: $devui-disabled-bg; 87 | cursor: not-allowed; 88 | } 89 | } 90 | 91 | .devui-body-scrollblock { 92 | width: 100%; 93 | } 94 | -------------------------------------------------------------------------------- /devui/style/core/_font.scss: -------------------------------------------------------------------------------- 1 | // 字号大小变量 2 | 3 | $devui-font-size: var(--devui-font-size, 12px); //正文、卡片副标题 4 | $devui-font-size-card-title: var(--devui-font-size-card-title, 14px); //卡片标题 5 | $devui-font-size-page-title: var(--devui-font-size-page-title, 16px); //页面标题 6 | $devui-font-size-modal-title: var(--devui-font-size-modal-title, 18px); //弹窗标题、数字 7 | $devui-font-size-price: var(--devui-font-size-price, 20px); //购买价格 8 | $devui-font-size-data-overview: var(--devui-font-size-data-overview, 24px); //数据总览 9 | 10 | $devui-font-size-icon: var(--devui-font-size-icon, 16px); //图标大小 11 | $devui-font-size-sm: var(--devui-font-size-sm, 12px); //当组件size为'sm'时使用此字号大小 12 | $devui-font-size-md: var(--devui-font-size-md, 12px); //当组件size为''时使用此字号大小 13 | $devui-font-size-lg: var(--devui-font-size-lg, 14px); //当组件size为'lg'时使用此字号大小 14 | 15 | $font-title-weight: bold; 16 | $font-content-weight: normal; 17 | 18 | $line-height-base: 1.5; 19 | 20 | @mixin font-content() { 21 | font-size: $devui-font-size; 22 | font-weight: $font-content-weight; 23 | line-height: $line-height-base; 24 | } 25 | 26 | @mixin font-title($font-size: $devui-font-size-page-title) { 27 | font-size: $font-size; 28 | font-weight: $font-title-weight; 29 | line-height: $line-height-base; 30 | } 31 | -------------------------------------------------------------------------------- /devui/style/core/_imagePreview.scss: -------------------------------------------------------------------------------- 1 | @import '../theme/color.scss'; 2 | 3 | .devui-image-preview-container { 4 | img { 5 | cursor: zoom-in; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /devui/style/core/_index.scss: -------------------------------------------------------------------------------- 1 | @import '../mixins/index'; 2 | @import 'normalize'; 3 | @import 'reset'; 4 | @import 'common'; 5 | @import 'dropdown'; 6 | @import 'imagePreview'; 7 | @import 'form'; 8 | @import 'cdk'; 9 | -------------------------------------------------------------------------------- /devui/style/core/_reset.scss: -------------------------------------------------------------------------------- 1 | @import '../theme/color'; 2 | 3 | body { 4 | margin: 0; 5 | padding: 0; 6 | color: $text-color; 7 | font-size: $devui-font-size; 8 | font-family: $font-family; 9 | font-variant: $font-variant-base; 10 | line-height: $line-height-base; 11 | } 12 | 13 | *, 14 | *::before, 15 | *::after { 16 | box-sizing: border-box; 17 | } 18 | 19 | button { 20 | padding: 0; 21 | border: none; 22 | background: transparent; 23 | cursor: pointer; 24 | outline: 0; 25 | -webkit-appearance: button; 26 | } 27 | 28 | button, 29 | [type='button'], 30 | [type='reset'], 31 | [type='submit'] { 32 | -webkit-appearance: inherit; 33 | } 34 | 35 | ul, 36 | ol { 37 | list-style: none; 38 | margin: 0; 39 | padding: 0; 40 | } 41 | 42 | p { 43 | margin: 0; 44 | padding: 0; 45 | } 46 | 47 | a, 48 | a:hover, 49 | a:focus, 50 | a:active, 51 | a:visited { 52 | text-decoration: none; 53 | } 54 | 55 | :-ms-input-placeholder { 56 | color: $devui-placeholder; 57 | } 58 | 59 | ::-moz-placeholder { 60 | color: $devui-placeholder; 61 | } 62 | 63 | ::-webkit-input-placeholder { 64 | color: $devui-placeholder; 65 | } 66 | 67 | //******************滚动条*************************/ 68 | .devui-scrollbar::-webkit-scrollbar { 69 | width: 8px; 70 | height: 8px; 71 | } 72 | 73 | .devui-scrollbar::-webkit-scrollbar-track { 74 | background-color: transparent; 75 | } 76 | 77 | .devui-scrollbar::-webkit-scrollbar-thumb { 78 | border-radius: 8px; 79 | background-color: $devui-line; 80 | } 81 | 82 | .devui-scrollbar::-webkit-scrollbar-thumb:hover { 83 | background-color: $devui-placeholder; // TODO: Color-Question 84 | } 85 | 86 | body > * ::-webkit-scrollbar { 87 | width: 8px; 88 | height: 8px; 89 | } 90 | 91 | body > * ::-webkit-scrollbar-track { 92 | background-color: transparent; 93 | } 94 | 95 | body > * ::-webkit-scrollbar-thumb { 96 | border-radius: 8px; 97 | background-color: $devui-line; 98 | } 99 | 100 | body > * ::-webkit-scrollbar-thumb:hover { 101 | background-color: $devui-placeholder; // TODO: Color-Question 102 | } 103 | 104 | body > * ::-webkit-scrollbar-corner { 105 | background-color: transparent; 106 | } 107 | -------------------------------------------------------------------------------- /devui/style/devui.scss: -------------------------------------------------------------------------------- 1 | @import './theme/color'; 2 | @import './theme/variables'; 3 | @import './theme/shadow'; 4 | @import './core/layout'; 5 | @import './core/form'; 6 | @import './core/font'; 7 | @import './core/index'; 8 | -------------------------------------------------------------------------------- /devui/style/layout/_config.scss: -------------------------------------------------------------------------------- 1 | $layout-namespace: dl; 2 | 3 | // Grid breakpoints 4 | // 5 | // Define the minimum dimensions at which your layout will change, 6 | // adapting to different screen sizes, for use in media queries. 7 | 8 | $grid-breakpoints: ( 9 | ss: 0, 10 | ms: 360px, 11 | mm: 768px, 12 | ml: 1024px, 13 | xs: 1280px, 14 | sm: 1440px, 15 | md: 1600px, 16 | lg: 1760px, 17 | xl: 1920px 18 | ); 19 | 20 | @include _assert-ascending($grid-breakpoints, '$grid-breakpoints'); 21 | @include _assert-starts-at-zero($grid-breakpoints, '$grid-breakpoints'); 22 | 23 | // Grid containers 24 | // 25 | // Define the maximum width of `.container` for different screen sizes. 26 | 27 | $container-max-widths: ( 28 | ms: 340px, 29 | mm: 720px, 30 | ml: 960px, 31 | xs: 1240px, 32 | sm: 1400px, 33 | md: 1560px, 34 | lg: 1760px, 35 | xl: 1880px 36 | ); 37 | 38 | @include _assert-ascending($container-max-widths, '$container-max-widths'); 39 | 40 | // Grid columns 41 | // 42 | // Set the number of columns and specify the width of the gutters. 43 | 44 | $grid-columns: 24; 45 | $grid-gutter-width: 16px; 46 | $grid-row-columns: 12 !default; 47 | -------------------------------------------------------------------------------- /devui/style/layout/devui-layout.scss: -------------------------------------------------------------------------------- 1 | @import '~bootstrap/scss/functions'; 2 | @import './config'; 3 | @import '~bootstrap/scss/bootstrap-grid'; 4 | -------------------------------------------------------------------------------- /devui/style/mixins/_clearfix.scss: -------------------------------------------------------------------------------- 1 | @mixin clearfix() { 2 | &::after { 3 | display: block; 4 | clear: both; 5 | content: ''; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /devui/style/mixins/_hover.scss: -------------------------------------------------------------------------------- 1 | // Hover mixin and `$enable-hover-media-query` are deprecated. 2 | // 3 | // Originally added during our alphas and maintained during betas, this mixin was 4 | // designed to prevent `:hover` stickiness on iOS-an issue where hover styles 5 | // would persist after initial touch. 6 | // 7 | // For backward compatibility, we've kept these mixins and updated them to 8 | // always return their regular pseudo-classes instead of a shimmed media query. 9 | // 10 | // Issue: https://github.com/twbs/bootstrap/issues/25195 11 | 12 | @mixin hover { 13 | &:hover { 14 | @content; 15 | } 16 | } 17 | 18 | @mixin hover-focus { 19 | &:hover, 20 | &:focus { 21 | @content; 22 | } 23 | } 24 | 25 | @mixin plain-hover-focus { 26 | &, 27 | &:hover, 28 | &:focus { 29 | @content; 30 | } 31 | } 32 | 33 | @mixin hover-focus-active { 34 | &:hover, 35 | &:focus, 36 | &:active { 37 | @content; 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /devui/style/mixins/_index.scss: -------------------------------------------------------------------------------- 1 | @import 'clearfix'; 2 | @import 'hover'; 3 | @import 'size'; 4 | -------------------------------------------------------------------------------- /devui/style/mixins/_size.scss: -------------------------------------------------------------------------------- 1 | // Sizing shortcuts 2 | 3 | @mixin size($width, $height: $width) { 4 | width: $width; 5 | height: $height; 6 | } 7 | -------------------------------------------------------------------------------- /devui/style/theme/_corner.scss: -------------------------------------------------------------------------------- 1 | //圆角变量 2 | 3 | $devui-border-radius: var(--devui-border-radius, 2px); //一般圆角 4 | $devui-border-radius-feedback: var(--devui-border-radius-feedback, 4px); //反馈类圆角 5 | $devui-border-radius-card: var(--devui-border-radius-card, 6px); //卡片圆角 6 | -------------------------------------------------------------------------------- /devui/style/theme/_font.scss: -------------------------------------------------------------------------------- 1 | // 字号大小变量 2 | 3 | $devui-font-size: var(--devui-font-size, 12px); //正文、卡片副标题 4 | $devui-font-size-card-title: var(--devui-font-size-card-title, 14px); //卡片标题 5 | $devui-font-size-page-title: var(--devui-font-size-page-title, 16px); //页面标题 6 | $devui-font-size-modal-title: var(--devui-font-size-modal-title, 18px); //弹窗标题、数字 7 | $devui-font-size-price: var(--devui-font-size-price, 20px); //购买价格 8 | $devui-font-size-data-overview: var(--devui-font-size-data-overview, 24px); //数据总览 9 | 10 | $devui-font-size-icon: var(--devui-font-size-icon, 16px); //图标大小 11 | $devui-font-size-sm: var(--devui-font-size-sm, 12px); //当组件size为'sm'时使用此字号大小 12 | $devui-font-size-md: var(--devui-font-size-md, 12px); //当组件size为''时使用此字号大小 13 | $devui-font-size-lg: var(--devui-font-size-lg, 14px); //当组件size为'lg'时使用此字号大小 14 | 15 | $devui-font-title-weight: bold; //标题文字粗细 16 | $devui-font-content-weight: normal; //内容文字粗细 17 | $devui-line-height-base: 1.5; //规范行高 18 | 19 | $font-title-weight: bold; 20 | $font-content-weight: normal; 21 | $line-height-base: 1.5; 22 | -------------------------------------------------------------------------------- /devui/style/theme/_shadow.scss: -------------------------------------------------------------------------------- 1 | //阴影变量 2 | 3 | $devui-shadow-length-base: var(--devui-shadow-length-base, 0 1px 4px 0); //直接铺陈在页面上方的元素 (card等) 4 | 5 | $devui-shadow-length-slide-left: var(--devui-shadow-length-slide-left, -2px 0 8px 0); //向左滑动时出现在右侧边缘的阴影 (dataTable固定右侧列向左滑动) 6 | $devui-shadow-length-slide-right: var(--devui-shadow-length-slide-right, 2px 0 8px 0); //向右滑动时出现在左侧边缘的阴影 (dataTable固定左侧列向右滑动) 7 | $devui-shadow-length-connected-overlay : var(--devui-shadow-connected-overlay, 0 2px 8px 0); //有连接点的弹出(覆盖)层 (DatePicker Cascader Select TagsInput Pagination的下拉菜单等) 8 | 9 | $devui-shadow-length-hover : var(--devui-shadow-length-hover, 0 4px 16px 0); //涉及到hover的地方 10 | $devui-shadow-length-feedback-overlay : var(--devui-shadow-length-feedback-overlay, 0 4px 16px 0); //信息提示反馈类 (PopOver Tooltip Toast StepsGuide等) 11 | 12 | $devui-shadow-length-fullscreen-overlay: var(--devui-shadow-fullscreen-overlay, 0 8px 40px 0); //无连接点的弹出(覆盖)层 (Drawer Modal ImagePreview等) 13 | -------------------------------------------------------------------------------- /devui/style/theme/_variables.scss: -------------------------------------------------------------------------------- 1 | @import './color'; 2 | @import '../core/font'; 3 | @import '../theme/font'; 4 | 5 | $text-color: $devui-text; 6 | $font-family: 'HuaweiFont', helvetica, arial, 'PingFang', 'Microsoft YaHei', 'Hiragino Sans GB', 'Microsoft JhengHei', sans-serif; 7 | $font-variant-base: tabular-nums; 8 | $body-background: $devui-base-bg; 9 | $devui-font-size: $devui-font-size; // 12px 10 | // $devui-font-size-modal-title: $devui-font-size-modal-title; // 18px 11 | $font-size-page-title: $devui-font-size-page-title; // 16px 12 | // $devui-font-size-card-title: $devui-font-size-card-title; // 14px 13 | .devui-font-size-base { 14 | font-size: $devui-font-size; // 12px 15 | } 16 | 17 | .devui-font-base { 18 | @include font-content(); // 12px normal 1.5 19 | } 20 | 21 | .devui-font-size-modal-title { 22 | font-size: $devui-font-size-modal-title; // 18px 23 | } 24 | 25 | .devui-font-modal-title { 26 | @include font-title($devui-font-size-modal-title); // 18px bold 1.5 27 | } 28 | 29 | .devui-font-size-page-title { 30 | font-size: $devui-font-size-page-title; // 16px 31 | } 32 | 33 | .devui-font-page-title { 34 | @include font-title(); // 16px bold 1.5 35 | } 36 | 37 | .devui-font-size-secondary-title { 38 | font-size: $devui-font-size-card-title; // 14px 39 | } 40 | 41 | .devui-font-secondary-title { 42 | @include font-title($devui-font-size-card-title); // 14px bold 1.5 43 | } 44 | -------------------------------------------------------------------------------- /devui/tabs/demo/tabs-demo.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-tabs-demo', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-tabs-demo
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/tabs/demo/tabs.route.ts: -------------------------------------------------------------------------------- 1 | import TabsDemoComponent from './tabs-demo' 2 | import DevUIApiComponent from '../../shared/devui-api/devui-api' 3 | 4 | import ApiCn from '../doc/api-cn.md' 5 | import ApiEn from '../doc/api-en.md' 6 | const routes = [ 7 | { path: '', redirectTo: 'demo' }, 8 | { path: 'demo', component: TabsDemoComponent}, 9 | { path: 'api', component: DevUIApiComponent, meta: { 10 | 'zh-cn': ApiCn, 11 | 'en-us': ApiEn 12 | }} 13 | ] 14 | 15 | export default routes 16 | -------------------------------------------------------------------------------- /devui/tabs/tab.tsx: -------------------------------------------------------------------------------- 1 | import { computed, defineComponent, getCurrentInstance, inject, reactive } from 'vue' 2 | import { Tabs } from './tabs'; 3 | 4 | export default defineComponent({ 5 | name: 'd-tab', 6 | props: { 7 | title: { 8 | default: null, 9 | type: [String, Number] 10 | }, 11 | id: { 12 | default: null, 13 | type: String 14 | }, 15 | disabled: { 16 | type: Boolean, 17 | default: false 18 | } 19 | }, 20 | setup(props, {slots}) { 21 | const tabs = inject( 22 | 'tabs' 23 | ); 24 | tabs.state.data.push(props); 25 | return () => { 26 | const content = tabs.state.showContent && tabs.state.active === props.id ? ( 27 |
    28 |
    29 | {slots.default()} 30 |
    31 |
    ): null; 32 | return content 33 | } 34 | } 35 | }) -------------------------------------------------------------------------------- /devui/tabs/tabs.tsx: -------------------------------------------------------------------------------- 1 | import { computed, defineComponent, provide, reactive } from 'vue' 2 | import './tabs.scss'; 3 | export type Active = string | number | null; 4 | export type TabsType = 'tabs' | 'pills' | 'options' | 'wrapped' | 'slider' 5 | export interface Tabs { 6 | state: TabsState; 7 | } 8 | interface TabsState { 9 | data?: any[], 10 | showContent: boolean, 11 | active: any 12 | } 13 | export default defineComponent({ 14 | name: 'd-tabs', 15 | props: { 16 | modelValue: { 17 | type: [String, Number], 18 | default: null 19 | }, 20 | // TODO:其中 slider 类型还没有实现 21 | type: { 22 | type: String as () => TabsType, 23 | default: 'tabs' 24 | }, 25 | showContent: { 26 | type: Boolean, 27 | default: true 28 | }, 29 | vertical: { 30 | type: Boolean, 31 | default: false 32 | }, 33 | reactivable: { 34 | type: Boolean, 35 | default: true 36 | }, 37 | customWidth: { 38 | type: String 39 | }, 40 | cssClass: { 41 | type: String 42 | } 43 | }, 44 | // TODO: beforeChange没有完成实现 45 | emits: ['update:modelValue', 'activeTabChange', 'beforeChange'], 46 | setup(props, { emit, slots }) { 47 | const active = computed(() => { 48 | return props.modelValue 49 | }) 50 | const state: TabsState = reactive({ 51 | data: [], 52 | active, 53 | showContent: props.showContent 54 | }); 55 | provide('tabs', { 56 | state 57 | }); 58 | function activateTab(tab: Active) { 59 | emit('beforeChange'); 60 | emit('update:modelValue', tab); 61 | if (props.reactivable) { 62 | emit('activeTabChange', tab) 63 | } 64 | } 65 | 66 | const ulClass: string[] = [props.type]; 67 | props.cssClass && ulClass.push(props.cssClass); 68 | props.vertical && ulClass.push('devui-nav-stacked') 69 | return () => { 70 | return
    71 |
      72 | { 73 | state.data.map((item, i) => { 74 | return
    • activateTab((item.id || item.tabId))} class={active.value === (item.id || item.tabId) ? 'active' : ''} id={item.id || item.tabId} > 75 | 76 | {item.title} 77 | 78 |
      • 79 | }) 80 | } 81 |
      82 |
    83 | {slots.default()} 84 |
    85 | 86 | } 87 | } 88 | }) 89 | 90 | -------------------------------------------------------------------------------- /devui/tags-input/demo/tags-input-demo.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-tags-input-demo', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-tags-input-demo
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/tags-input/demo/tags-input.route.ts: -------------------------------------------------------------------------------- 1 | import TagsInputDemoComponent from './tags-input-demo' 2 | import DevUIApiComponent from '../../shared/devui-api/devui-api' 3 | 4 | import ApiCn from '../doc/api-cn.md' 5 | import ApiEn from '../doc/api-en.md' 6 | const routes = [ 7 | { path: '', redirectTo: 'demo' }, 8 | { path: 'demo', component: TagsInputDemoComponent}, 9 | { path: 'api', component: DevUIApiComponent, meta: { 10 | 'zh-cn': '', 11 | 'en-us': '' 12 | }} 13 | ] 14 | 15 | export default routes 16 | -------------------------------------------------------------------------------- /devui/tags-input/tags-input.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-tags-input', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-tags-input
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/tags/demo/tags-demo.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-tags-demo', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-tags-demo
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/tags/demo/tags.route.ts: -------------------------------------------------------------------------------- 1 | import TagsDemoComponent from './tags-demo' 2 | import DevUIApiComponent from '../../shared/devui-api/devui-api' 3 | 4 | import ApiCn from '../doc/api-cn.md' 5 | import ApiEn from '../doc/api-en.md' 6 | const routes = [ 7 | { path: '', redirectTo: 'demo' }, 8 | { path: 'demo', component: TagsDemoComponent}, 9 | { path: 'api', component: DevUIApiComponent, meta: { 10 | 'zh-cn': ApiCn, 11 | 'en-us': ApiEn 12 | }} 13 | ] 14 | 15 | export default routes 16 | -------------------------------------------------------------------------------- /devui/tags/tags.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-tags', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-tags
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/text-input/demo/text-input-demo.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-text-input-demo', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-text-input-demo
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/text-input/demo/text-input.route.ts: -------------------------------------------------------------------------------- 1 | import TextInputDemoComponent from './text-input-demo' 2 | import DevUIApiComponent from '../../shared/devui-api/devui-api' 3 | 4 | import ApiCn from '../doc/api-cn.md' 5 | import ApiEn from '../doc/api-en.md' 6 | const routes = [ 7 | { path: '', redirectTo: 'demo' }, 8 | { path: 'demo', component: TextInputDemoComponent}, 9 | { path: 'api', component: DevUIApiComponent, meta: { 10 | 'zh-cn': ApiCn, 11 | 'en-us': ApiEn 12 | }} 13 | ] 14 | 15 | export default routes 16 | -------------------------------------------------------------------------------- /devui/text-input/doc/api-cn.md: -------------------------------------------------------------------------------- 1 | # 如何使用 2 | 3 | 在module中引入： 4 | 5 | ```ts 6 | import { TextInputModule } from 'ng-devui/text-input'; 7 | ``` 8 | 9 | 在页面中使用： 10 | 11 | ```xml 12 | 13 | ``` 14 | 15 | # dTextInput 16 | ## dTextInput 参数 17 | 18 | | 参数 | 类型 | 默认 | 说明 | 跳转 Demo | 19 | | :---------: | :-------: | :---: | :--------------------------: | ----------------------------------------------- | 20 | | id | `string` | -- | 可选，文本框 id |[基本用法](demo#basic-usage)| 21 | | placeholder | `string` | -- | 可选，文本框 placeholder | [基本用法](demo#basic-usage) | 22 | | disabled | `boolean` | false | 可选，文本框是否被禁用 | [基本用法](demo#basic-usage) | 23 | | error | `boolean` | false | 可选，文本框是否出现输入错误 | [基本用法](demo#basic-usage) | 24 | -------------------------------------------------------------------------------- /devui/text-input/doc/api-en.md: -------------------------------------------------------------------------------- 1 | # How to use 2 | 3 | Import into module: 4 | 5 | ```ts 6 | import { TextInputModule } from 'ng-devui/text-input'; 7 | ``` 8 | 9 | In the page: 10 | 11 | ```xml 12 | 13 | ``` 14 | 15 | # dTextInput 16 | ### dTextInput Parameter 17 | 18 | | Parameter | Type | Default | Description | Jump to Demo | 19 | | :---------: | :-------: | :---: | :--------------------------: | ----------------------------------------------- | 20 | | id | `string` | -- | Optional. Text-input ID | [Basic Usage](demo#basic-usage)| 21 | | placeholder | `string` | -- | Optional. Text-input placeholder | [Basic Usage](demo#basic-usage) | 22 | | disabled | `boolean` | false | Optional. Indicating whether the Text-input is disabled. | [Basic Usage](demo#basic-usage) | 23 | | error | `boolean` | false | Optional. Indicating whether an input error occurs in the Text-input. | [Basic Usage](demo#basic-usage) | 24 | -------------------------------------------------------------------------------- /devui/text-input/text-input.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-text-input', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-text-input
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/textarea/demo/textarea-demo.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-textarea-demo', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-textarea-demo
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/textarea/demo/textarea.route.ts: -------------------------------------------------------------------------------- 1 | import TextareaDemoComponent from './textarea-demo' 2 | import DevUIApiComponent from '../../shared/devui-api/devui-api' 3 | 4 | import ApiCn from '../doc/api-cn.md' 5 | import ApiEn from '../doc/api-en.md' 6 | const routes = [ 7 | { path: '', redirectTo: 'demo' }, 8 | { path: 'demo', component: TextareaDemoComponent}, 9 | { path: 'api', component: DevUIApiComponent, meta: { 10 | 'zh-cn': ApiCn, 11 | 'en-us': ApiEn 12 | }} 13 | ] 14 | 15 | export default routes 16 | -------------------------------------------------------------------------------- /devui/textarea/doc/api-cn.md: -------------------------------------------------------------------------------- 1 | # 如何使用 2 | 3 | 在module中引入： 4 | 5 | ```ts 6 | import { TextareaModule } from 'ng-devui/textarea'; 7 | ``` 8 | 9 | 在页面中使用： 10 | 11 | ```xml 12 | 13 | ``` 14 | 15 | # dTextarea 16 | ## dTextarea 参数 17 | 18 | | 参数 | 类型 | 默认 | 说明 | 跳转 Demo | 19 | | :---------: | :-----------------------------------------: | :---: | :----------------------------------------------------------------------------------: | --------------------------------------------- | 20 | | id | `string` | -- | 可选，文本框 id | [基本用法](demo#basic-usage) | 21 | | placeholder | `string` | -- | 可选，文本框 placeholder | [基本用法](demo#basic-usage) | 22 | | disabled | `boolean` | false | 可选，文本框是否被禁用 | [基本用法](demo#basic-usage) | 23 | | error | `boolean` | false | 可选，文本框是否出现输入错误 | [基本用法](demo#basic-usage) | 24 | | resize | `none \| vertical \| horizontal \| both \| inherit` | none | 可选，文本框是否可调整大小，可选项：不可调整，水平调整，垂直调整，自由调整，默认继承 | [调整大小](demo#resize) | 25 | -------------------------------------------------------------------------------- /devui/textarea/doc/api-en.md: -------------------------------------------------------------------------------- 1 | # How to use 2 | 3 | Import into module: 4 | 5 | ```ts 6 | import { TextareaModule } from 'ng-devui/textarea'; 7 | ``` 8 | 9 | In the page: 10 | 11 | ```xml 12 | 13 | ``` 14 | # dTextarea 15 | ## dTextarea Parameter 16 | 17 | | Parameter | Type | Default | Description | Jump to Demo | 18 | | :---------: | :-----------------------------------------: | :---: | :----------------------------------------------------------------------------------: | --------------------------------------------- | 19 | | id | `string` | -- | Optional. Textarea ID | [Basic Usage](demo#basic-usage) | 20 | | placeholder | `string` | -- | Optional. Textarea placeholder | [Basic Usage](demo#basic-usage) | 21 | | disabled | `boolean` | false | Optional. Indicating whether the textarea is disabled | [Basic Usage](demo#basic-usage) | 22 | | error | `boolean` | false | Optional. Indicating whether an input error occurs in the textarea | [Basic Usage](demo#basic-usage) | 23 | | resize | `none \| vertical \| horizontal \| both \| inherit` | none | Optional. Indicates whether the textarea can be resized. The options are as follows: Unadjustable, Horizontal, Vertical, and Free. The default value is inherited | [Resizable](demo#resize) | 24 | -------------------------------------------------------------------------------- /devui/textarea/textarea.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-textarea', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-textarea
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/time-axis/demo/time-axis-demo.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-time-axis-demo', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-time-axis-demo
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/time-axis/demo/time-axis.route.ts: -------------------------------------------------------------------------------- 1 | import TimeAxisDemoComponent from './time-axis-demo' 2 | import DevUIApiComponent from '../../shared/devui-api/devui-api' 3 | 4 | import ApiCn from '../doc/api-cn.md' 5 | import ApiEn from '../doc/api-en.md' 6 | const routes = [ 7 | { path: '', redirectTo: 'demo' }, 8 | { path: 'demo', component: TimeAxisDemoComponent}, 9 | { path: 'api', component: DevUIApiComponent, meta: { 10 | 'zh-cn': ApiCn, 11 | 'en-us': ApiEn 12 | }} 13 | ] 14 | 15 | export default routes 16 | -------------------------------------------------------------------------------- /devui/time-axis/time-axis.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-time-axis', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-time-axis
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/time-picker/demo/time-picker-demo.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-time-picker-demo', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-time-picker-demo
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/time-picker/demo/time-picker.route.ts: -------------------------------------------------------------------------------- 1 | import TimePickerDemoComponent from './time-picker-demo' 2 | import DevUIApiComponent from '../../shared/devui-api/devui-api' 3 | 4 | import ApiCn from '../doc/api-cn.md' 5 | import ApiEn from '../doc/api-en.md' 6 | const routes = [ 7 | { path: '', redirectTo: 'demo' }, 8 | { path: 'demo', component: TimePickerDemoComponent}, 9 | { path: 'api', component: DevUIApiComponent, meta: { 10 | 'zh-cn': ApiCn, 11 | 'en-us': ApiEn 12 | }} 13 | ] 14 | 15 | export default routes 16 | -------------------------------------------------------------------------------- /devui/time-picker/time-picker.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-time-picker', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-time-picker
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/toast/demo/toast-demo.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-toast-demo', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-toast-demo
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/toast/demo/toast.route.ts: -------------------------------------------------------------------------------- 1 | import ToastDemoComponent from './toast-demo' 2 | import DevUIApiComponent from '../../shared/devui-api/devui-api' 3 | 4 | import ApiCn from '../doc/api-cn.md' 5 | import ApiEn from '../doc/api-en.md' 6 | const routes = [ 7 | { path: '', redirectTo: 'demo' }, 8 | { path: 'demo', component: ToastDemoComponent}, 9 | { path: 'api', component: DevUIApiComponent, meta: { 10 | 'zh-cn': ApiCn, 11 | 'en-us': ApiEn 12 | }} 13 | ] 14 | 15 | export default routes 16 | -------------------------------------------------------------------------------- /devui/toast/toast.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-toast', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-toast
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/toggle/demo/toggle-demo.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-toggle-demo', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-toggle-demo
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/toggle/demo/toggle.route.ts: -------------------------------------------------------------------------------- 1 | import ToggleDemoComponent from './toggle-demo' 2 | import DevUIApiComponent from '../../shared/devui-api/devui-api' 3 | 4 | import ApiCn from '../doc/api-cn.md' 5 | import ApiEn from '../doc/api-en.md' 6 | const routes = [ 7 | { path: '', redirectTo: 'demo' }, 8 | { path: 'demo', component: ToggleDemoComponent}, 9 | { path: 'api', component: DevUIApiComponent, meta: { 10 | 'zh-cn': ApiCn, 11 | 'en-us': ApiEn 12 | }} 13 | ] 14 | 15 | export default routes 16 | -------------------------------------------------------------------------------- /devui/toggle/doc/api-cn.md: -------------------------------------------------------------------------------- 1 | # 如何使用 2 | 在module中引入： 3 | ```ts 4 | import { ToggleModule } from 'ng-devui/toggle'; 5 | ``` 6 | 7 | 在页面中使用： 8 | ```html 9 | 10 | ``` 11 | # Toggle 12 | 13 | ## d-toggle 参数 14 | 15 | | 参数 | 类型 | 默认 | 说明 | 跳转 Demo | 16 | | :----------: | :-----------------------------: | :---: | :-------------------------------------------------------------------------- | ------------------------------------------- | 17 | | size | `'sm'\|''\|'lg'` | '' | 可选，开关尺寸大小 | [基本用法](demo#basic-usage) | 18 | | color | `string` | -- | 可选，开关打开时的自定义颜色 | [自定义样式](demo#custom) | 19 | | checked | `boolean` | false | 可选，开关是否打开，默认关闭 | [基本用法](demo#basic-usage) | 20 | | ngModel | `boolean` | false | 可选，指定当前是否打开，可双向绑定 | [双向绑定](demo#two-binding) | 21 | | disabled | `boolean` | false | 可选，是否禁用开关 | [基本用法](demo#basic-usage) | 22 | | beforeChange | `Function\|Promise\|()=> Observable` | -- | 可选，开关变化前的回调函数,返回 boolean 类型，返回 false 可以阻止开关的变化 | [双向绑定](demo#two-binding) | 23 | 24 | ## d-toggle 事件 25 | 26 | | 事件 | 类型 | 说明 | 跳转 Demo | 27 | | :----: | :---------------------: | :------------------------------------ | ------------------------------------------- | 28 | | change | `EventEmitter` | 可选,开关打开返回 true,关闭返回 false | [回调事件](demo#callback) | 29 | -------------------------------------------------------------------------------- /devui/toggle/doc/api-en.md: -------------------------------------------------------------------------------- 1 | # How to use 2 | Import into module: 3 | ```ts 4 | import { ToggleModule } from 'ng-devui/toggle'; 5 | ``` 6 | 7 | In the page: 8 | ```html 9 | 10 | ``` 11 | # Toggle 12 | 13 | ### d-toggle parameter 14 | 15 | | Parameter | Type | Default | Description | Jump to Demo | 16 | | :----------: | :-----------------------------: | :---: | :-------------------------------------------------------------------------- | ------------------------------------------- | 17 | | size | `'sm'\|''\|'lg'` |'' | Optional. Switch size. | [Basic Usage](demo#basic-usage) | 18 | | color | `string` | -- | Optional. Customized color when the switch is enabled. | [Custom Style](demo#custom) | 19 | | checked | `boolean` | false | Optional. Specifies whether to enable the function. The function is disabled by default. | [Basic Usage](demo#basic-usage) | 20 | | ngModel | `boolean` | false | Optional. Specifies whether to enable the function. Bidirectional binding is supported. | [Two-way Binding](demo#two-binding) | 21 | | disabled | `boolean` | false | Optional. Indicating whether to disable the function. | [Basic Usage](demo#basic-usage) | 22 | | beforeChange | `Function\|Promise\|()=> Observable` | -- |Optional. Callback function before a switch is changed. The return value is of the boolean type. If false is returned, the switch is not changed. | [Two-way Binding](demo#two-binding) | 23 | 24 | ### d-toggle event 25 | 26 | | Event | Type | Description | Jump to Demo | 27 | | :----: | :---------------------: | :------------------------------------ | ------------------------------------------- | 28 | | change | `EventEmitter` | Optional. If the function is enabled, true is returned. If the function is disabled, false is returned. | [Callback Event](demo#callback) | 29 | -------------------------------------------------------------------------------- /devui/toggle/toggle.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-toggle', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-toggle
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/tooltip/demo/tooltip-demo.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-tooltip-demo', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-tooltip-demo
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/tooltip/demo/tooltip.route.ts: -------------------------------------------------------------------------------- 1 | import TooltipDemoComponent from './tooltip-demo' 2 | import DevUIApiComponent from '../../shared/devui-api/devui-api' 3 | 4 | import ApiCn from '../doc/api-cn.md' 5 | import ApiEn from '../doc/api-en.md' 6 | const routes = [ 7 | { path: '', redirectTo: 'demo' }, 8 | { path: 'demo', component: TooltipDemoComponent}, 9 | { path: 'api', component: DevUIApiComponent, meta: { 10 | 'zh-cn': ApiCn, 11 | 'en-us': ApiEn 12 | }} 13 | ] 14 | 15 | export default routes 16 | -------------------------------------------------------------------------------- /devui/tooltip/doc/api-cn.md: -------------------------------------------------------------------------------- 1 | # 如何使用 2 | 3 | 在 module 中引入: 4 | 5 | ```ts 6 | import { TooltipModule } from 'ng-devui/tooltip'; 7 | ``` 8 | 9 | 在页面中使用: 10 | 11 | ```html 12 | 13 | 14 | ``` 15 | 16 | # dTooltip 17 | 18 | ## dTooltip 参数 19 | 20 | | 参数 | 类型 | 默认 | 说明 | 跳转 Demo | 21 | | :-------------: | :-------------------------------------------------: | :--------------------------------: | :-------------------------------------------------: | ------------------------------ | 22 | | content | `string\|DOMString` | -- | 必选，tooltip 显示内容 | [基本用法](demo#basic-usage) | 23 | | position | [`PositionType`](#positiontype) `\| PositionType[]` | ['top', 'right', 'bottom', 'left'] | 可选，tooltip 显示位置 | [基本用法](demo#basic-usage) | 24 | | showAnimate | `boolean` | false | 可选，是否显示划出动画 | [基本用法](demo#basic-usage) | 25 | | mouseEnterDelay | `number` | 150 | 可选，鼠标移入后延时多少才显示 Tooltip，单位是 `ms` | [延时触发](demo#delay-trigger) | 26 | | mouseLeaveDelay | `number` | 100 | 可选，鼠标移出后延时多少才隐藏 Tooltip，单位是 `ms` | [延时触发](demo#delay-trigger) | 27 | 28 | # 接口 & 类型定义 29 | 30 | ### PositionType 31 | 32 | ```ts 33 | export type PositionType = 'left' | 'right' | 'top' | 'bottom'; 34 | ``` 35 | -------------------------------------------------------------------------------- /devui/tooltip/doc/api-en.md: -------------------------------------------------------------------------------- 1 | # How to use 2 | 3 | Import into module 4 | 5 | ```ts 6 | import { TooltipModule } from 'ng-devui/tooltip'; 7 | ``` 8 | 9 | In the page 10 | 11 | ```html 12 | 13 | 14 | ``` 15 | 16 | # dTooltip 17 | 18 | ### dTooltip Parameter 19 | 20 | | Parameter | Type | Default | Description | Jump to Demo | 21 | | :-------------: | :-------------------------------------------------: | :--------------------------------: | :-------------------------------------------------------------------------------: | ----------------------------------- | 22 | | content | `string\|DOMString` | -- | Required. Tooltip display content | [Basic Usage](demo#basic-usage) | 23 | | position | [`PositionType`](#positiontype) `\| PositionType[]` | ['top', 'right', 'bottom', 'left'] | Optional. Tooltip display position | [Basic Usage](demo#basic-usage) | 24 | | showAnimate | `boolean` | false | Optional. Whether to display the drawing animation | [Basic Usage](demo#basic-usage) | 25 | | mouseEnterDelay | `number` | 150 | Optional. Delay for displaying Tooltip after the mouse is enter. The unit is `ms` | [Delay Trigger](demo#delay-trigger) | 26 | | mouseLeaveDelay | `number` | 100 | Optional. Delay for hiding Tooltip after the mouse is leave, The unit is `ms` | [Delay Trigger](demo#delay-trigger) | 27 | 28 | # Interface & Type Definition 29 | 30 | ### PositionType 31 | 32 | ```ts 33 | export type PositionType = 'left' | 'right' | 'top' | 'bottom'; 34 | ``` 35 | -------------------------------------------------------------------------------- /devui/tooltip/tooltip.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-tooltip', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-tooltip
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/transfer/demo/transfer-demo.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-transfer-demo', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-transfer-demo
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/transfer/demo/transfer.route.ts: -------------------------------------------------------------------------------- 1 | import TransferDemoComponent from './transfer-demo' 2 | import DevUIApiComponent from '../../shared/devui-api/devui-api' 3 | 4 | import ApiCn from '../doc/api-cn.md' 5 | import ApiEn from '../doc/api-en.md' 6 | const routes = [ 7 | { path: '', redirectTo: 'demo' }, 8 | { path: 'demo', component: TransferDemoComponent}, 9 | { path: 'api', component: DevUIApiComponent, meta: { 10 | 'zh-cn': ApiCn, 11 | 'en-us': ApiEn 12 | }} 13 | ] 14 | 15 | export default routes 16 | -------------------------------------------------------------------------------- /devui/transfer/doc/api-cn.md: -------------------------------------------------------------------------------- 1 | # 如何使用 2 | 在module中引入： 3 | ```ts 4 | import { TransferModule } from 'ng-devui/transfer'; 5 | ``` 6 | 在页面中使用： 7 | ```html 8 | 9 | ``` 10 | 11 | # d-transfer 12 | 13 | ## d-transfer 参数 14 | 15 | | 参数 | 类型 | 默认 | 说明 | 跳转 Demo | 16 | | :---------------: | :-----: | :---: | :------------------------- | ------------------------------------------------------------ | 17 | | sourceOption | `array` | [] | 可选参数，穿梭框源数据 | [基本用法](demo#transfer-demo-base) | 18 | | targetOption | `array` | [] | 可选参数，穿梭框目标数据 | [基本用法](demo#transfer-demo-base) | 19 | | titles | `array` | [] | 可选参数，穿梭框标题 | [基本用法](demo#transfer-demo-base) | 20 | | height | `string` | 320px | 可选参数，穿梭框高度 | 21 | | isSearch | `number` | false | 可选参数，是否可以搜索 | [搜索穿梭框](demo#transfer-demo-search) | 22 | | isSourceDroppable | `boolean` | false | 可选参数，源是否可以拖拽 | 23 | | isTargetDroppable | `boolean` | false | 可选参数，目标是否可以拖拽 | [排序穿梭框](demo#transfer-demo-sort) | 24 | | disabled | `boolean` | false | 可选参数 穿梭框禁止使用 | [基本用法](demo#transfer-demo-base) | 25 | | beforeTransfer | `(sourceOption, targetOption) => boolean \| Promise \| Observable` | - | 可选参数 在transfer事件发生前判断事件是否允许触发 | [基本用法](demo#transfer-demo-base) | 26 | 27 | ## d-transfer 事件 28 | 29 | | 事件 | 类型 | 说明 | 跳转 Demo | 30 | | :--------------: | :--------------------: | :--------------------------------: | -------------------------------------------------------- | 31 | | transferToSource | 返回穿梭框源和目标数据 | 当点击右穿梭时，返回源和目标数据； | [基本用法](demo#transfer-demo-base) | 32 | | transferToTarget | 返回穿梭框源和目标数据 | 当点击左穿梭时，返回源和目标数据； | [基本用法](demo#transfer-demo-base) | 33 | -------------------------------------------------------------------------------- /devui/transfer/doc/api-en.md: -------------------------------------------------------------------------------- 1 | # How To Use 2 | Import into module： 3 | ```ts 4 | import { TransferModule } from 'ng-devui/transfer'; 5 | ``` 6 | In the page： 7 | ```html 8 | 9 | ``` 10 | 11 | # d-transfer 12 | 13 | ## d-transfer parameter 14 | 15 | | Parameter | Type | Default | Description | Jump to Demo | 16 | | :---------------: | :-----: | :---: | :------------------------- | ------------------------------------------------------------ | 17 | | sourceOption | `array` | [] | Optional. This parameter indicates the source data of the shuttle box. | [Basic Usage](demo#transfer-demo-base) | 18 | | targetOption | `array` | [] | Optional. This parameter indicates the target data of the shuttle box. | [Basic Usage](demo#transfer-demo-base) | 19 | | titles | `array` | [] | Optional. Title of the shuttle box. | [Basic Usage](demo#transfer-demo-base) | 20 | | height | `string` | 320px | Optional. It indicates the height of the shuttle box. | 21 | | isSearch | `number` | false | Optional. Specifies whether to search. | [Search Shuttle Box](demo#transfer-demo-search) | 22 | | isSourceDroppable | `boolean` | false | Optional. Indicates whether the source can be dragged. | 23 | | isTargetDroppable | `boolean` | false | Optional. Indicates whether the object can be dragged. | [Sorting Shuttle Box](demo#transfer-demo-sort) | 24 | | disabled | `boolean` | false | Optional. The shuttle box cannot be used. | [Basic Usage](demo#transfer-demo-base) | 25 | | beforeTransfer | `(sourceOption, targetOption) => boolean \| Promise \| Observable` | - | Optional. Determines whether the transfer event can be triggered before the transfer event occurs. | [Basic Usage](demo#transfer-demo-base) | 26 | 27 | ## d-transfer event 28 | 29 | | Event | Type | Description | Jump to Demo | 30 | | :--------------: | :--------------------: | :--------------------------------: | -------------------------------------------------------- | 31 | | transferToSource | Return the source and target data in the shuttle box. | When you click the right button, the source and target data are returned. | [Basic Usage](demo#transfer-demo-base) | 32 | | transferToTarget | Return the source and target data in the shuttle box. | When you click the left button, the source and target data are returned. | [Basic Usage](demo#transfer-demo-base) | 33 | -------------------------------------------------------------------------------- /devui/transfer/transfer.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-transfer', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-transfer
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/tree-select/demo/tree-select-demo.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-tree-select-demo', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-tree-select-demo
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/tree-select/demo/tree-select.route.ts: -------------------------------------------------------------------------------- 1 | import TreeSelectDemoComponent from './tree-select-demo' 2 | import DevUIApiComponent from '../../shared/devui-api/devui-api' 3 | 4 | import ApiCn from '../doc/api-cn.md' 5 | import ApiEn from '../doc/api-en.md' 6 | const routes = [ 7 | { path: '', redirectTo: 'demo' }, 8 | { path: 'demo', component: TreeSelectDemoComponent}, 9 | { path: 'api', component: DevUIApiComponent, meta: { 10 | 'zh-cn': ApiCn, 11 | 'en-us': ApiEn 12 | }} 13 | ] 14 | 15 | export default routes 16 | -------------------------------------------------------------------------------- /devui/tree-select/tree-select.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-tree-select', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-tree-select
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/tree/demo/tree-demo.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-tree-demo', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-tree-demo
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/tree/demo/tree.route.ts: -------------------------------------------------------------------------------- 1 | import TreeDemoComponent from './tree-demo' 2 | import DevUIApiComponent from '../../shared/devui-api/devui-api' 3 | 4 | import ApiCn from '../doc/api-cn.md' 5 | import ApiEn from '../doc/api-en.md' 6 | const routes = [ 7 | { path: '', redirectTo: 'demo' }, 8 | { path: 'demo', component: TreeDemoComponent}, 9 | { path: 'api', component: DevUIApiComponent, meta: { 10 | 'zh-cn': ApiCn, 11 | 'en-us': ApiEn 12 | }} 13 | ] 14 | 15 | export default routes 16 | -------------------------------------------------------------------------------- /devui/tree/tree.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-tree', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-tree
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/upload/demo/upload-demo.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-upload-demo', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-upload-demo
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /devui/upload/demo/upload.route.ts: -------------------------------------------------------------------------------- 1 | import UploadDemoComponent from './upload-demo' 2 | import DevUIApiComponent from '../../shared/devui-api/devui-api' 3 | 4 | import ApiCn from '../doc/api-cn.md' 5 | import ApiEn from '../doc/api-en.md' 6 | const routes = [ 7 | { path: '', redirectTo: 'demo' }, 8 | { path: 'demo', component: UploadDemoComponent}, 9 | { path: 'api', component: DevUIApiComponent, meta: { 10 | 'zh-cn': ApiCn, 11 | 'en-us': ApiEn 12 | }} 13 | ] 14 | 15 | export default routes 16 | -------------------------------------------------------------------------------- /devui/upload/upload.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'd-upload', 5 | props: { 6 | }, 7 | setup(props, ctx) { 8 | return () => { 9 | return
    devui-upload
    10 | } 11 | } 12 | }) -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | DevUI 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-devui", 3 | "version": "0.0.0", 4 | "license": "MIT", 5 | "description": "DevUI components based on Vite and Vue3", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "convert:route": "node ./scripts/convert-component-route.js" 10 | }, 11 | "dependencies": { 12 | "@types/lodash-es": "^4.17.4", 13 | "lodash-es": "^4.17.20", 14 | "vue": "^3.0.5", 15 | "vue-router": "^4.0.3" 16 | }, 17 | "devDependencies": { 18 | "@commitlint/cli": "^11.0.0", 19 | "@commitlint/config-conventional": "^11.0.0", 20 | "@vitejs/plugin-vue": "^1.0.4", 21 | "@vitejs/plugin-vue-jsx": "^1.1.0", 22 | "@vue/compiler-sfc": "^3.0.5", 23 | "@vuedx/typecheck": "^0.4.1", 24 | "@vuedx/typescript-plugin-vue": "^0.4.1", 25 | "commander": "^7.1.0", 26 | "husky": "^4.3.7", 27 | "sass": "^1.32.2", 28 | "shelljs": "^0.8.4", 29 | "typescript": "^4.1.3", 30 | "vite": "^2.0.5", 31 | "vite-plugin-md": "^0.6.0" 32 | }, 33 | "husky": { 34 | "hooks": { 35 | "commit-msg": "commitlint -E HUSKY_GIT_PARAMS" 36 | } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kagol/vue-devui-early/f88930de89c1d471f8552ea7013c4f2e60ea77c0/public/favicon.ico -------------------------------------------------------------------------------- /scripts/add-api.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs') 2 | const path = require('path') 3 | const shelljs = require('shelljs') 4 | const program = require('commander') 5 | const { COMPONENTS } = require('./const') 6 | 7 | const DEFAULT_SOURCE_PATH = path.resolve(__dirname, '../../../code/ng-devui/devui') 8 | const DEFAULT_TARGET_PATH = path.resolve(__dirname, '../devui') 9 | 10 | // 从命令行参数中取源文件和目标文件路径 11 | program 12 | .option('-s, --source ', 'Original file path', DEFAULT_SOURCE_PATH) 13 | .option('-t, --target ', 'Target file path', DEFAULT_TARGET_PATH) 14 | program.parse(process.argv); 15 | 16 | const { source, target } = program.opts(); 17 | 18 | const sourcePath = source; 19 | const targetPath = target; 20 | 21 | function addApi(sourcePath, targetPath) { 22 | fs.readdir(sourcePath, function(sourcePathError, sourceComponentFolder) { 23 | if (sourcePathError) { 24 | console.error(sourcePathError) 25 | return 26 | } 27 | 28 | sourceComponentFolder 29 | .filter(doc => COMPONENTS.includes(doc)) 30 | .forEach((componentName) => { 31 | const targetDocPath = path.resolve(targetPath, componentName, 'doc') 32 | 33 | // 在组件目录下创建 doc 目录 34 | if (!fs.existsSync(targetDocPath)) { 35 | fs.mkdirSync(targetDocPath) 36 | } 37 | 38 | // 拷贝中英文 API 文档 39 | const sourceDocPath = path.resolve(sourcePath, componentName, 'doc') 40 | fs.readdir(sourceDocPath, (sourceDocPathError, sourceDocs) => { 41 | if (sourceDocPathError) { 42 | console.error(sourceDocPathError) 43 | return 44 | } 45 | 46 | sourceDocs.forEach(sourceDoc => { 47 | shelljs.cp(path.resolve(sourceDocPath, sourceDoc), targetDocPath) 48 | }) 49 | }) 50 | 51 | // 修改路由 52 | const componentRoutePath = path.resolve(targetPath, componentName, 'demo', componentName + '.route.ts') 53 | shelljs.sed('-i', /'..\/doc\/api-cn.md'/, 'ApiCn', componentRoutePath) 54 | shelljs.sed('-i', /'..\/doc\/api-en.md'/, 'ApiEn', componentRoutePath) 55 | shelljs.sed( 56 | '-i', 57 | /const routes = \[/, 58 | 'import ApiCn from \'../doc/api-cn.md\'\nimport ApiEn from \'../doc/api-en.md\'\nconst routes = [', 59 | componentRoutePath 60 | ) 61 | }) 62 | }) 63 | } 64 | 65 | addApi(sourcePath, targetPath) 66 | -------------------------------------------------------------------------------- /scripts/const.js: -------------------------------------------------------------------------------- 1 | const COMPONENTS = [ 2 | 'accordion', 3 | 'alert', 4 | 'anchor', 5 | 'auto-complete', 6 | 'avatar', 7 | 'back-top', 8 | 'badge', 9 | 'breadcrumb', 10 | 'button', 11 | 'card', 12 | 13 | 'carousel', 14 | 'cascader', 15 | 'checkbox', 16 | 'data-table', 17 | 'datepicker', 18 | 'dragdrop', 19 | 'drawer', 20 | 'dropdown', 21 | 'editable-select', 22 | 'form', 23 | 24 | 25 | 'fullscreen', 26 | 'gantt', 27 | 'image-preview', 28 | 'input-number', 29 | 'layout', 30 | 'loading', 31 | 'modal', 32 | 'multi-auto-complete', 33 | 'pagination', 34 | 'panel', 35 | 36 | 'popover', 37 | 'progress', 38 | 'quadrant-diagram', 39 | 'radio', 40 | 'rate', 41 | 'read-tip', 42 | 'search', 43 | 'select', 44 | 'slider', 45 | 'splitter', 46 | 47 | 'status', 48 | 'steps-guide', 49 | 'sticky', 50 | 'tabs', 51 | 'tags', 52 | 'tags-input', 53 | 'text-input', 54 | 'textarea', 55 | 'time-axis', 56 | 'time-picker', 57 | 58 | 'toast', 59 | 'toggle', 60 | 'tooltip', 61 | 'transfer', 62 | 'tree', 63 | 'tree-select', 64 | 'upload', 65 | ] 66 | 67 | module.exports = { 68 | COMPONENTS 69 | } 70 | -------------------------------------------------------------------------------- /scripts/delete-old-api.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs') 2 | const path = require('path') 3 | const shelljs = require('shelljs') 4 | const { COMPONENTS } = require('./const') 5 | 6 | const targetPath = path.resolve(__dirname, '../devui') 7 | 8 | function deleteOldApi(targetPath) { 9 | fs.readdir(targetPath, function(targetPathError, targetComponentFolder) { 10 | if (targetPathError) { 11 | console.error(targetPathError) 12 | return 13 | } 14 | 15 | targetComponentFolder 16 | .filter(doc => COMPONENTS.includes(doc)) 17 | .forEach((componentName) => { 18 | const targetApiPath = path.resolve(targetPath, componentName, 'api') 19 | 20 | // 在组件目录下创建 doc 目录 21 | if (fs.existsSync(targetApiPath)) { 22 | shelljs.rm('-rf', targetApiPath); 23 | } 24 | }) 25 | }) 26 | } 27 | 28 | deleteOldApi(targetPath) 29 | -------------------------------------------------------------------------------- /src/app.route.ts: -------------------------------------------------------------------------------- 1 | import { createRouter, createWebHistory } from 'vue-router' 2 | import AppContentRoutes from './components/component.route' 3 | import AppContent from './components/app-content.vue' 4 | 5 | const routerHistory = createWebHistory() 6 | 7 | const router = createRouter({ 8 | history: routerHistory, 9 | routes: [ 10 | { 11 | path: '/', 12 | redirect: '/components' 13 | }, 14 | { 15 | path: '/components', 16 | component: AppContent, 17 | children: AppContentRoutes 18 | } 19 | ] 20 | }) 21 | 22 | export default router 23 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kagol/vue-devui-early/f88930de89c1d471f8552ea7013c4f2e60ea77c0/src/assets/logo.png -------------------------------------------------------------------------------- /src/components/app-demo-cell.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | 58 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | // TypeScript error? Run VSCode command 3 | // TypeScript: Select TypeScript version - > Use Workspace Version 4 | import App from './app.vue' 5 | import appRoutes from './app.route' 6 | 7 | const app = createApp(App) 8 | 9 | app.use(appRoutes) 10 | 11 | app.mount('#app') 12 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "module": "esnext", 5 | "moduleResolution": "node", 6 | "strict": true, 7 | "jsx": "preserve", 8 | "sourceMap": true, 9 | "lib": ["esnext", "dom"], 10 | "types": ["vite/client"], 11 | "plugins": [{ "name": "@vuedx/typescript-plugin-vue" }] 12 | }, 13 | "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"] 14 | } 15 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import vue from '@vitejs/plugin-vue'; 3 | import vueJsx from '@vitejs/plugin-vue-jsx'; 4 | import markdown from 'vite-plugin-md'; 5 | 6 | export default defineConfig({ 7 | plugins: [ 8 | vue({ 9 | include: [/\.vue$/, /\.md$/], 10 | }), 11 | vueJsx({}), 12 | markdown() 13 | ], 14 | }) 15 | --------------------------------------------------------------------------------