From 3c48df75278e9205e38b6ae486720429f2a08910 Mon Sep 17 00:00:00 2001 From: huaweidevcloud Date: Wed, 28 Apr 2021 10:27:34 +0800 Subject: [PATCH] chore(release): release 11.2.0 --- .../accordion/demo/accordion-demo.moudule.ts | 6 +- devui/alert/demo/alert-demo.module.ts | 6 +- devui/avatar/avatar.component.html | 7 +- devui/avatar/demo/avatar-demo.module.ts | 4 +- devui/back-top/back-top.component.html | 3 +- devui/back-top/demo/back-top-demo.module.ts | 4 +- .../back-top/demo/basic/basic.component.html | 1 - devui/badge/demo/badge-demo.module.ts | 4 +- .../breadcrumb-item.component.html | 1 - .../breadcrumb/demo/breadcrumb-demo.module.ts | 4 +- devui/button/button.component.scss | 2 +- devui/button/demo/button-demo.module.ts | 6 +- devui/button/doc/api-en.md | 2 +- devui/carousel/demo/carousel-demo.module.ts | 4 +- devui/cascader/cascader-li.component.html | 2 - devui/cascader/cascader.component.html | 2 - devui/cascader/cascader.component.scss | 2 +- .../lazyload-cascader.component.ts | 2 +- .../category-search.component.html | 4 +- .../category-search.component.scss | 17 +- .../category-search.component.ts | 34 +- devui/category-search/category-search.type.ts | 2 +- devui/category-search/doc/api-cn.md | 2 +- devui/category-search/doc/api-en.md | 2 +- .../demo/basic/checkbox-basic.component.html | 3 +- devui/common/demo/common-demo.module.ts | 4 +- .../helper-download.component.ts | 2 +- .../data-table/data-table-cell.component.html | 9 +- devui/data-table/data-table-cell.component.ts | 5 +- devui/data-table/data-table-column.spec.ts | 2 +- .../data-table/data-table-row.component.html | 4 +- .../tree-table-old.component.html | 10 +- .../demo/tree-table/tree-data.component.html | 1 + devui/data-table/doc/api-cn.md | 2 + devui/data-table/doc/api-en.md | 2 + .../table/body/td/td.component.html | 9 +- .../table/body/td/td.component.scss | 1 + .../data-table/table/body/td/td.component.ts | 7 +- .../head/th/filter/filter.component.html | 2 +- .../table/head/th/th.component.html | 7 +- .../tmpl/data-table-column-tmpl.component.ts | 5 +- .../border-radius.component.html | 20 + .../border-radius/border-radius.component.ts | 47 + .../design-border-radius-demo.component.html | 12 + .../design-border-radius-demo.component.ts | 41 + .../demo/design-border-radius-demo.module.ts | 33 + .../design-token/border-radius/doc/api-cn.md | 1 + .../design-token/border-radius/doc/api-en.md | 1 + .../color/demo/color/color.component.html | 108 + .../color/demo}/color/color.component.scss | 6 +- .../color/demo/color/color.component.ts | 320 + .../demo/design-color-demo.component.html | 12 + .../color/demo/design-color-demo.component.ts | 41 + .../color/demo/design-color-demo.module.ts | 33 + devui/design-token/color/doc/api-cn.md | 1 + devui/design-token/color/doc/api-en.md | 1 + .../font/demo/design-font-demo.component.html | 12 + .../font/demo/design-font-demo.component.ts | 41 + .../font/demo/design-font-demo.module.ts | 33 + .../font/demo/font/font.component.html | 60 + .../font/demo/font/font.component.scss | 13 + .../font/demo/font/font.component.ts | 72 + devui/design-token/font/doc/api-cn.md | 1 + devui/design-token/font/doc/api-en.md | 1 + .../link/demo/design-link-demo.component.html | 13 + .../link/demo/design-link-demo.component.ts | 47 + .../link/demo/design-link-demo.module.ts | 33 + .../link/demo/link/link.component.html | 13 + .../link/demo/link/link.component.ts | 11 + devui/design-token/link/doc/api-cn.md | 1 + devui/design-token/link/doc/api-en.md | 1 + .../demo/design-shadow-demo.component.html | 12 + .../demo/design-shadow-demo.component.ts | 41 + .../shadow/demo/design-shadow-demo.module.ts | 33 + .../shadow/demo/shadow/shadow.component.html | 58 + .../shadow/demo/shadow/shadow.component.scss | 7 + .../shadow/demo/shadow/shadow.component.ts | 84 + devui/design-token/shadow/doc/api-cn.md | 1 + devui/design-token/shadow/doc/api-en.md | 1 + devui/devui.module.ts | 3 + .../dragdrop/demo/basic/basic.component.scss | 2 +- devui/dragdrop/demo/dragdrop-demo.module.ts | 5 +- devui/dragdrop/doc/api-cn.md | 39 +- devui/dragdrop/doc/api-en.md | 39 +- devui/drawer/demo/drawer-demo.module.ts | 8 +- .../drawer-content.component.html | 9 +- .../drawer-content.component.scss | 1 - .../drawerContent/drawer-content.component.ts | 6 +- devui/form/demo/form-demo.module.ts | 6 +- .../custom-message-show.component.scss | 2 +- devui/form/form-label.component.html | 1 - .../fullscreen/demo/fullscreen-demo.module.ts | 4 +- .../demo/immersive/immersive.component.html | 2 +- .../demo/normal/normal.component.html | 2 +- devui/i18n/en-us.ts | 7 + devui/i18n/i18n.model.ts | 7 + devui/i18n/zh-cn.ts | 7 + .../demo/image-preview-demo.module.ts | 6 +- .../input-number/input-number.component.scss | 2 +- .../demo/basic/layout-basic.component.scss | 1 - devui/layout/demo/layout-demo.module.ts | 4 +- devui/loading/demo/loading-demo.module.ts | 6 +- devui/mention/assets/common.scss | 4 + devui/mention/demo/async/async.component.html | 9 + devui/mention/demo/async/async.component.ts | 31 + devui/mention/demo/basic/basic.component.html | 9 + devui/mention/demo/basic/basic.component.ts | 32 + .../mention/demo/custom/custom.component.html | 16 + devui/mention/demo/custom/custom.component.ts | 46 + .../mention/demo/mention-demo.component.html | 34 + devui/mention/demo/mention-demo.component.ts | 67 + devui/mention/demo/mention-demo.module.ts | 48 + .../mention/demo/prefix/prefix.component.html | 10 + devui/mention/demo/prefix/prefix.component.ts | 38 + .../mention/demo/target/target.component.html | 8 + devui/mention/demo/target/target.component.ts | 39 + devui/mention/doc/api-cn.md | 45 + devui/mention/doc/api-en.md | 45 + devui/mention/index.ts | 1 + devui/mention/mention.component.html | 18 + devui/mention/mention.component.scss | 57 + devui/mention/mention.component.ts | 51 + devui/mention/mention.directive.ts | 328 + devui/mention/mention.module.ts | 12 + devui/mention/mention.service.ts | 18 + devui/mention/mention.types.ts | 19 + devui/mention/package.json | 7 + devui/mention/position.ts | 51 + devui/mention/public-api.ts | 5 + devui/mention/utils.ts | 154 + devui/modal/demo/modal-demo.module.ts | 6 +- .../demo/basic/basic.component.html | 2 +- .../demo/nav-sprite-demo.component.html | 7 + .../demo/nav-sprite-demo.component.ts | 12 +- .../nav-sprite/demo/nav-sprite-demo.module.ts | 7 +- .../scroll-container.component.html | 40 + .../scroll-container.component.scss | 12 + .../scroll-container.component.ts | 19 + .../demo/sprite/sprite.component.html | 29 - .../demo/sprite/sprite.component.scss | 12 - .../demo/sprite/sprite.component.ts | 73 - devui/nav-sprite/doc/api-cn.md | 3 + devui/nav-sprite/doc/api-en.md | 3 + devui/nav-sprite/nav-sprite.component.html | 13 +- devui/nav-sprite/nav-sprite.component.scss | 16 +- devui/nav-sprite/nav-sprite.component.ts | 218 +- devui/nav-sprite/nav-sprite.module.ts | 3 +- devui/nav-sprite/nav-sprite.type.ts | 5 +- devui/nav-sprite/package.json | 2 +- devui/package.json | 2 +- devui/pagination/doc/api-cn.md | 4 +- devui/pagination/doc/api-en.md | 4 +- devui/pagination/pagination.component.html | 13 +- devui/panel/demo/panel-demo.module.ts | 6 +- .../demo/customize/customize.component.html | 13 +- .../demo/customize/customize.component.ts | 2 +- devui/popover/demo/popover-demo.module.ts | 6 +- devui/popover/doc/api-cn.md | 2 +- devui/popover/doc/api-en.md | 1 + devui/popover/popover.component.html | 4 +- devui/popover/popover.component.scss | 75 +- devui/popover/popover.component.ts | 5 + devui/popover/popover.directive.ts | 4 + devui/progress/demo/progress-demo.module.ts | 6 +- devui/radio/demo/radio-demo.module.ts | 5 +- devui/radio/radio.component.scss | 11 +- devui/rate/demo/rate-demo.module.ts | 6 +- devui/rate/rate.component.html | 4 +- devui/relative-time/demo/demo.module.ts | 4 +- devui/relative-time/index.ts | 1 + devui/search/demo/search-demo.module.ts | 6 +- devui/search/doc/api-en.md | 2 +- devui/select/demo/select-demo.module.ts | 9 +- devui/select/doc/api-cn.md | 10 +- devui/select/doc/api-en.md | 6 +- devui/select/select.component.scss | 8 - .../shared/devui-api/devui-api.component.html | 13 +- .../shared/devui-api/devui-api.component.scss | 10 + devui/shared/devui-api/devui-api.component.ts | 31 +- devui/shared/devui-api/devui-api.module.ts | 4 +- .../devui-codebox.component.html | 2 +- .../devui-codebox.component.scss | 3 +- devui/style/core/_form.scss | 22 + devui/style/devui.css | 5676 +++++++++++++++++ devui/tabs/demo/config/config.component.html | 70 - devui/tabs/demo/config/config.component.scss | 5 - .../configurable-tabs.component.scss | 3 +- devui/tabs/demo/custom/custom.component.html | 11 +- devui/tabs/demo/custom/custom.component.scss | 4 +- devui/tabs/demo/custom/custom.component.ts | 21 +- devui/tabs/demo/tabs-demo.component.html | 30 +- devui/tabs/demo/tabs-demo.component.ts | 31 +- devui/tabs/demo/tabs-demo.module.ts | 16 +- .../type-options/type-options.component.html | 12 + .../type-options.component.ts} | 7 +- .../demo/type-pills/type-pills.component.html | 12 + .../demo/type-pills/type-pills.component.ts | 40 + .../type-slider/type-slider.component.html | 12 + .../demo/type-slider/type-slider.component.ts | 40 + .../type-wrapped/type-wrapped.component.html | 6 + .../type-wrapped/type-wrapped.component.ts | 40 + devui/tabs/doc/api-cn.md | 6 +- devui/tabs/doc/api-en.md | 6 +- devui/tabs/tabs.component.scss | 12 +- .../tags-input/demo/tags.input-demo.module.ts | 6 +- devui/tags-input/doc/api-en.md | 2 +- devui/tags-input/tags.input.component.html | 1 - devui/tags/demo/tags-demo.module.ts | 6 +- devui/tags/tag.component.html | 2 - devui/tags/tag.component.scss | 1 - .../text-input/demo/text-input-demo.module.ts | 6 +- devui/textarea/demo/text-demo.module.ts | 6 +- devui/theme-collection/extend-theme.scss | 24 +- devui/theme-collection/extend-theme.ts | 48 +- devui/theme/theme-data.ts | 16 +- devui/theme/theme-management.ts | 33 +- devui/theme/theme-service.ts | 5 +- devui/time-axis/demo/time-axis-demo.module.ts | 6 +- .../demo/time-picker-demo.module.ts | 4 +- devui/time-picker/time-picker.component.ts | 2 +- .../demo/service/toast-service.component.ts | 2 +- devui/toast/demo/toast-demo.module.ts | 6 +- devui/toast/toast.component.ts | 10 +- devui/toast/toast.service.ts | 7 +- devui/toggle/demo/toggle-demo.module.ts | 6 +- devui/toggle/doc/api-en.md | 4 +- devui/tooltip/demo/tooltip-demo.module.ts | 6 +- devui/transfer/demo/transfer-demo.module.ts | 4 +- devui/transfer/transfer.component.html | 17 +- devui/tree-select/tree-select.component.scss | 2 +- devui/tree/demo/tree-demo.module.ts | 6 +- devui/tree/tree.component.scss | 4 + devui/upload/multiple-upload.component.html | 1 - devui/upload/multiple-upload.component.ts | 18 +- devui/upload/single-upload.component.html | 1 - devui/upload/single-upload.component.ts | 12 +- devui/version.ts | 2 +- src/app/app.component.html | 2 +- src/app/app.component.scss | 16 +- src/app/app.component.ts | 6 +- src/app/component/app-content.component.html | 2 +- src/app/component/app-content.component.ts | 8 +- src/app/component/app-content.module.ts | 4 +- src/app/component/color/color.component.html | 57 - src/app/component/color/color.component.ts | 164 - src/app/component/component.data.service.ts | 3 + src/app/component/component.map.ts | 114 + src/app/component/component.route.ts | 92 +- src/app/component/d-demo-nav.component.scss | 3 +- .../component/example-panel.component.scss | 12 +- src/app/component/global-config.component.ts | 17 +- src/app/component/globalConfig-cn.md | 77 +- src/app/component/globalConfig-en.md | 76 +- src/app/component/overview.component.html | 104 +- src/app/component/overview.component.scss | 125 +- src/app/component/overview.component.ts | 93 +- .../resolve-routes-config.service.ts | 31 +- src/app/component/themeGuide-en.md | 6 +- .../customize-theme/color-hierarchy.ts | 263 + .../customize-theme/custom-theme.service.ts | 282 + .../customize-theme.component.html | 23 + .../customize-theme.component.scss | 47 + .../customize-theme.component.ts | 116 + src/app/theme-picker/customize-theme/util.ts | 16 + .../theme-picker/theme-picker.component.html | 29 +- .../theme-picker/theme-picker.component.scss | 2 +- .../theme-picker/theme-picker.component.ts | 24 +- src/app/theme-picker/theme-picker.module.ts | 10 +- src/assets/galaxy.png | Bin 0 -> 6158 bytes src/assets/i18n/en-us.json | 500 +- src/assets/i18n/zh-cn.json | 476 +- src/assets/no-data-dark.png | Bin 6607 -> 0 bytes src/assets/no-data-dark.svg | 141 + src/assets/no-data.png | Bin 6977 -> 0 bytes src/assets/no-data.svg | 141 + src/assets/overview/Data Display/Avatar.png | Bin 8398 -> 0 bytes src/assets/overview/Data Display/Badge.png | Bin 7938 -> 0 bytes src/assets/overview/Data Display/Card.png | Bin 7419 -> 0 bytes src/assets/overview/Data Display/Carousel.png | Bin 10802 -> 0 bytes .../overview/Data Display/DataTable.png | Bin 7522 -> 0 bytes src/assets/overview/Data Display/Gantt.png | Bin 7860 -> 0 bytes .../overview/Data Display/ImagePreview.png | Bin 9542 -> 0 bytes src/assets/overview/Data Display/Progress.png | Bin 9050 -> 0 bytes .../Data Display/Quadrant Diagram.png | Bin 6432 -> 0 bytes src/assets/overview/Data Display/Rate.png | Bin 10198 -> 0 bytes .../overview/Data Display/RelativeTime.png | Bin 9266 -> 0 bytes src/assets/overview/Data Display/Tags.png | Bin 9458 -> 0 bytes src/assets/overview/Data Display/TimeAxis.png | Bin 7090 -> 0 bytes src/assets/overview/Data Display/Tree.png | Bin 6842 -> 0 bytes .../overview/Data Entry/AutoComplete.png | Bin 7708 -> 0 bytes src/assets/overview/Data Entry/Cascader.png | Bin 6902 -> 0 bytes .../overview/Data Entry/CategorySearch.png | Bin 6798 -> 0 bytes src/assets/overview/Data Entry/CheckBox.png | Bin 7917 -> 0 bytes src/assets/overview/Data Entry/DatePicker.png | Bin 8692 -> 0 bytes .../overview/Data Entry/EditableSelect.png | Bin 8027 -> 0 bytes src/assets/overview/Data Entry/EditorX.png | Bin 9055 -> 0 bytes src/assets/overview/Data Entry/Form.png | Bin 6456 -> 0 bytes .../overview/Data Entry/InputNumber.png | Bin 8650 -> 0 bytes src/assets/overview/Data Entry/Markdown.png | Bin 9055 -> 0 bytes .../overview/Data Entry/MultiAutoComplete.png | Bin 11682 -> 0 bytes src/assets/overview/Data Entry/Radio.png | Bin 7850 -> 0 bytes src/assets/overview/Data Entry/Select.png | Bin 6798 -> 0 bytes src/assets/overview/Data Entry/Slider.png | Bin 9548 -> 0 bytes src/assets/overview/Data Entry/TagsInput.png | Bin 8084 -> 0 bytes src/assets/overview/Data Entry/TextInput.png | Bin 7919 -> 0 bytes src/assets/overview/Data Entry/Textarea.png | Bin 7293 -> 0 bytes src/assets/overview/Data Entry/TimePicker.png | Bin 12617 -> 0 bytes src/assets/overview/Data Entry/Toggle.png | Bin 7647 -> 0 bytes src/assets/overview/Data Entry/Transfer.png | Bin 7893 -> 0 bytes src/assets/overview/Data Entry/TreeSelect.png | Bin 7977 -> 0 bytes src/assets/overview/Data Entry/Upload.png | Bin 9412 -> 0 bytes .../overview/Experimental/ColorPicker.png | Bin 10052 -> 0 bytes .../overview/Experimental/DatepickerPro.png | Bin 8692 -> 0 bytes .../overview/Experimental/Typography.png | Bin 6880 -> 0 bytes .../overview/Extended Service/CodeMirror.png | Bin 8091 -> 0 bytes .../Extended Service/CommonStyles.png | Bin 10052 -> 0 bytes .../overview/Extended Service/Echarts.png | Bin 8656 -> 0 bytes .../overview/Extended Service/Jsmind.png | Bin 8739 -> 0 bytes .../overview/Extended Service/Polyfills.png | Bin 10224 -> 0 bytes src/assets/overview/Feedback/Alert.png | Bin 9362 -> 6655 bytes src/assets/overview/Feedback/Drawer.png | Bin 7765 -> 4424 bytes src/assets/overview/Feedback/Loading.png | Bin 11106 -> 6928 bytes src/assets/overview/Feedback/Modal.png | Bin 9642 -> 8092 bytes src/assets/overview/Feedback/Popover.png | Bin 9087 -> 6844 bytes src/assets/overview/Feedback/ReadTip.png | Bin 9087 -> 7242 bytes src/assets/overview/Feedback/Toast.png | Bin 9122 -> 7168 bytes src/assets/overview/Feedback/Tooltip.png | Bin 7875 -> 5115 bytes src/assets/overview/Feedback/mention.png | Bin 0 -> 6077 bytes src/assets/overview/General/Button.png | Bin 7844 -> 5775 bytes src/assets/overview/General/Common.png | Bin 10224 -> 6939 bytes src/assets/overview/General/DragDrop.png | Bin 7678 -> 5470 bytes src/assets/overview/General/Fullscreen.png | Bin 7459 -> 6314 bytes src/assets/overview/General/Panel.png | Bin 5608 -> 5273 bytes src/assets/overview/General/Search.png | Bin 10270 -> 8017 bytes src/assets/overview/General/Status.png | Bin 7452 -> 5314 bytes src/assets/overview/General/Sticky.png | Bin 6371 -> 4857 bytes src/assets/overview/Layout/Layout.png | Bin 7343 -> 6188 bytes src/assets/overview/Layout/Splitter.png | Bin 8080 -> 6358 bytes src/assets/overview/Navigation/Accordion.png | Bin 8254 -> 10970 bytes src/assets/overview/Navigation/Anchor.png | Bin 8258 -> 6014 bytes src/assets/overview/Navigation/BackTop.png | Bin 9677 -> 7511 bytes src/assets/overview/Navigation/Breadcrumb.png | Bin 8820 -> 5930 bytes src/assets/overview/Navigation/DropDown.png | Bin 7012 -> 5801 bytes src/assets/overview/Navigation/NavSprite.png | Bin 8258 -> 6601 bytes src/assets/overview/Navigation/Pagination.png | Bin 8145 -> 5681 bytes src/assets/overview/Navigation/StepsGuide.png | Bin 5431 -> 4356 bytes src/assets/overview/Navigation/Tabs.png | Bin 6174 -> 5373 bytes src/assets/overview/data-display/avatar.png | Bin 0 -> 5855 bytes src/assets/overview/data-display/badge.png | Bin 0 -> 5258 bytes src/assets/overview/data-display/card.png | Bin 0 -> 5661 bytes src/assets/overview/data-display/carousel.png | Bin 0 -> 6544 bytes .../overview/data-display/datatable.png | Bin 0 -> 7241 bytes src/assets/overview/data-display/gantt.png | Bin 0 -> 6640 bytes .../overview/data-display/imagepreview.png | Bin 0 -> 7614 bytes src/assets/overview/data-display/progress.png | Bin 0 -> 6962 bytes .../overview/data-display/quadrantdiagram.png | Bin 0 -> 5621 bytes src/assets/overview/data-display/rate.png | Bin 0 -> 8637 bytes .../overview/data-display/relativetime.png | Bin 0 -> 5899 bytes src/assets/overview/data-display/tags.png | Bin 0 -> 5799 bytes src/assets/overview/data-display/timeaxis.png | Bin 0 -> 5993 bytes src/assets/overview/data-display/tree.png | Bin 0 -> 5752 bytes .../overview/data-entry/autocomplete.png | Bin 0 -> 6445 bytes src/assets/overview/data-entry/cascader.png | Bin 0 -> 5609 bytes .../overview/data-entry/categorysearch.png | Bin 0 -> 7610 bytes src/assets/overview/data-entry/checkbox.png | Bin 0 -> 5771 bytes src/assets/overview/data-entry/datepicker.png | Bin 0 -> 5170 bytes .../overview/data-entry/editableselect.png | Bin 0 -> 6071 bytes src/assets/overview/data-entry/editorx.png | Bin 0 -> 7684 bytes src/assets/overview/data-entry/form.png | Bin 0 -> 4376 bytes .../overview/data-entry/inputnumber.png | Bin 0 -> 6519 bytes src/assets/overview/data-entry/markdown.png | Bin 0 -> 5977 bytes .../overview/data-entry/multiautocomplete.png | Bin 0 -> 9216 bytes src/assets/overview/data-entry/radio.png | Bin 0 -> 5820 bytes src/assets/overview/data-entry/select.png | Bin 0 -> 5546 bytes src/assets/overview/data-entry/slider.png | Bin 0 -> 6395 bytes src/assets/overview/data-entry/tagsinput.png | Bin 0 -> 6378 bytes src/assets/overview/data-entry/textarea.png | Bin 0 -> 5837 bytes src/assets/overview/data-entry/textinput.png | Bin 0 -> 6087 bytes src/assets/overview/data-entry/timepicker.png | Bin 0 -> 10564 bytes src/assets/overview/data-entry/toggle.png | Bin 0 -> 5945 bytes src/assets/overview/data-entry/transfer.png | Bin 0 -> 6029 bytes src/assets/overview/data-entry/treeselect.png | Bin 0 -> 6108 bytes src/assets/overview/data-entry/upload.png | Bin 0 -> 7975 bytes src/assets/overview/default.png | Bin 0 -> 6366 bytes src/index.html | 2 +- src/main.ts | 7 +- 386 files changed, 11767 insertions(+), 1281 deletions(-) create mode 100644 devui/design-token/border-radius/demo/border-radius/border-radius.component.html create mode 100644 devui/design-token/border-radius/demo/border-radius/border-radius.component.ts create mode 100644 devui/design-token/border-radius/demo/design-border-radius-demo.component.html create mode 100644 devui/design-token/border-radius/demo/design-border-radius-demo.component.ts create mode 100644 devui/design-token/border-radius/demo/design-border-radius-demo.module.ts create mode 100644 devui/design-token/border-radius/doc/api-cn.md create mode 100644 devui/design-token/border-radius/doc/api-en.md create mode 100644 devui/design-token/color/demo/color/color.component.html rename {src/app/component => devui/design-token/color/demo}/color/color.component.scss (86%) create mode 100644 devui/design-token/color/demo/color/color.component.ts create mode 100644 devui/design-token/color/demo/design-color-demo.component.html create mode 100644 devui/design-token/color/demo/design-color-demo.component.ts create mode 100644 devui/design-token/color/demo/design-color-demo.module.ts create mode 100644 devui/design-token/color/doc/api-cn.md create mode 100644 devui/design-token/color/doc/api-en.md create mode 100644 devui/design-token/font/demo/design-font-demo.component.html create mode 100644 devui/design-token/font/demo/design-font-demo.component.ts create mode 100644 devui/design-token/font/demo/design-font-demo.module.ts create mode 100644 devui/design-token/font/demo/font/font.component.html create mode 100644 devui/design-token/font/demo/font/font.component.scss create mode 100644 devui/design-token/font/demo/font/font.component.ts create mode 100644 devui/design-token/font/doc/api-cn.md create mode 100644 devui/design-token/font/doc/api-en.md create mode 100644 devui/design-token/link/demo/design-link-demo.component.html create mode 100644 devui/design-token/link/demo/design-link-demo.component.ts create mode 100644 devui/design-token/link/demo/design-link-demo.module.ts create mode 100644 devui/design-token/link/demo/link/link.component.html create mode 100644 devui/design-token/link/demo/link/link.component.ts create mode 100644 devui/design-token/link/doc/api-cn.md create mode 100644 devui/design-token/link/doc/api-en.md create mode 100644 devui/design-token/shadow/demo/design-shadow-demo.component.html create mode 100644 devui/design-token/shadow/demo/design-shadow-demo.component.ts create mode 100644 devui/design-token/shadow/demo/design-shadow-demo.module.ts create mode 100644 devui/design-token/shadow/demo/shadow/shadow.component.html create mode 100644 devui/design-token/shadow/demo/shadow/shadow.component.scss create mode 100644 devui/design-token/shadow/demo/shadow/shadow.component.ts create mode 100644 devui/design-token/shadow/doc/api-cn.md create mode 100644 devui/design-token/shadow/doc/api-en.md create mode 100644 devui/mention/assets/common.scss create mode 100644 devui/mention/demo/async/async.component.html create mode 100644 devui/mention/demo/async/async.component.ts create mode 100644 devui/mention/demo/basic/basic.component.html create mode 100644 devui/mention/demo/basic/basic.component.ts create mode 100644 devui/mention/demo/custom/custom.component.html create mode 100644 devui/mention/demo/custom/custom.component.ts create mode 100644 devui/mention/demo/mention-demo.component.html create mode 100644 devui/mention/demo/mention-demo.component.ts create mode 100644 devui/mention/demo/mention-demo.module.ts create mode 100644 devui/mention/demo/prefix/prefix.component.html create mode 100644 devui/mention/demo/prefix/prefix.component.ts create mode 100644 devui/mention/demo/target/target.component.html create mode 100644 devui/mention/demo/target/target.component.ts create mode 100644 devui/mention/doc/api-cn.md create mode 100644 devui/mention/doc/api-en.md create mode 100644 devui/mention/index.ts create mode 100644 devui/mention/mention.component.html create mode 100644 devui/mention/mention.component.scss create mode 100644 devui/mention/mention.component.ts create mode 100644 devui/mention/mention.directive.ts create mode 100644 devui/mention/mention.module.ts create mode 100644 devui/mention/mention.service.ts create mode 100644 devui/mention/mention.types.ts create mode 100644 devui/mention/package.json create mode 100644 devui/mention/position.ts create mode 100644 devui/mention/public-api.ts create mode 100644 devui/mention/utils.ts create mode 100644 devui/nav-sprite/demo/scroll-container/scroll-container.component.html create mode 100644 devui/nav-sprite/demo/scroll-container/scroll-container.component.scss create mode 100644 devui/nav-sprite/demo/scroll-container/scroll-container.component.ts delete mode 100644 devui/nav-sprite/demo/sprite/sprite.component.html delete mode 100644 devui/nav-sprite/demo/sprite/sprite.component.scss delete mode 100644 devui/nav-sprite/demo/sprite/sprite.component.ts create mode 100644 devui/relative-time/index.ts create mode 100644 devui/shared/devui-api/devui-api.component.scss create mode 100644 devui/style/devui.css delete mode 100644 devui/tabs/demo/config/config.component.html delete mode 100644 devui/tabs/demo/config/config.component.scss create mode 100644 devui/tabs/demo/type-options/type-options.component.html rename devui/tabs/demo/{config/config.component.ts => type-options/type-options.component.ts} (82%) create mode 100644 devui/tabs/demo/type-pills/type-pills.component.html create mode 100644 devui/tabs/demo/type-pills/type-pills.component.ts create mode 100644 devui/tabs/demo/type-slider/type-slider.component.html create mode 100644 devui/tabs/demo/type-slider/type-slider.component.ts create mode 100644 devui/tabs/demo/type-wrapped/type-wrapped.component.html create mode 100644 devui/tabs/demo/type-wrapped/type-wrapped.component.ts delete mode 100644 src/app/component/color/color.component.html delete mode 100644 src/app/component/color/color.component.ts create mode 100644 src/app/component/component.map.ts create mode 100644 src/app/theme-picker/customize-theme/color-hierarchy.ts create mode 100644 src/app/theme-picker/customize-theme/custom-theme.service.ts create mode 100644 src/app/theme-picker/customize-theme/customize-theme.component.html create mode 100644 src/app/theme-picker/customize-theme/customize-theme.component.scss create mode 100644 src/app/theme-picker/customize-theme/customize-theme.component.ts create mode 100644 src/app/theme-picker/customize-theme/util.ts create mode 100644 src/assets/galaxy.png delete mode 100644 src/assets/no-data-dark.png create mode 100644 src/assets/no-data-dark.svg delete mode 100644 src/assets/no-data.png create mode 100644 src/assets/no-data.svg delete mode 100644 src/assets/overview/Data Display/Avatar.png delete mode 100644 src/assets/overview/Data Display/Badge.png delete mode 100644 src/assets/overview/Data Display/Card.png delete mode 100644 src/assets/overview/Data Display/Carousel.png delete mode 100644 src/assets/overview/Data Display/DataTable.png delete mode 100644 src/assets/overview/Data Display/Gantt.png delete mode 100644 src/assets/overview/Data Display/ImagePreview.png delete mode 100644 src/assets/overview/Data Display/Progress.png delete mode 100644 src/assets/overview/Data Display/Quadrant Diagram.png delete mode 100644 src/assets/overview/Data Display/Rate.png delete mode 100644 src/assets/overview/Data Display/RelativeTime.png delete mode 100644 src/assets/overview/Data Display/Tags.png delete mode 100644 src/assets/overview/Data Display/TimeAxis.png delete mode 100644 src/assets/overview/Data Display/Tree.png delete mode 100644 src/assets/overview/Data Entry/AutoComplete.png delete mode 100644 src/assets/overview/Data Entry/Cascader.png delete mode 100644 src/assets/overview/Data Entry/CategorySearch.png delete mode 100644 src/assets/overview/Data Entry/CheckBox.png delete mode 100644 src/assets/overview/Data Entry/DatePicker.png delete mode 100644 src/assets/overview/Data Entry/EditableSelect.png delete mode 100644 src/assets/overview/Data Entry/EditorX.png delete mode 100644 src/assets/overview/Data Entry/Form.png delete mode 100644 src/assets/overview/Data Entry/InputNumber.png delete mode 100644 src/assets/overview/Data Entry/Markdown.png delete mode 100644 src/assets/overview/Data Entry/MultiAutoComplete.png delete mode 100644 src/assets/overview/Data Entry/Radio.png delete mode 100644 src/assets/overview/Data Entry/Select.png delete mode 100644 src/assets/overview/Data Entry/Slider.png delete mode 100644 src/assets/overview/Data Entry/TagsInput.png delete mode 100644 src/assets/overview/Data Entry/TextInput.png delete mode 100644 src/assets/overview/Data Entry/Textarea.png delete mode 100644 src/assets/overview/Data Entry/TimePicker.png delete mode 100644 src/assets/overview/Data Entry/Toggle.png delete mode 100644 src/assets/overview/Data Entry/Transfer.png delete mode 100644 src/assets/overview/Data Entry/TreeSelect.png delete mode 100644 src/assets/overview/Data Entry/Upload.png delete mode 100644 src/assets/overview/Experimental/ColorPicker.png delete mode 100644 src/assets/overview/Experimental/DatepickerPro.png delete mode 100644 src/assets/overview/Experimental/Typography.png delete mode 100644 src/assets/overview/Extended Service/CodeMirror.png delete mode 100644 src/assets/overview/Extended Service/CommonStyles.png delete mode 100644 src/assets/overview/Extended Service/Echarts.png delete mode 100644 src/assets/overview/Extended Service/Jsmind.png delete mode 100644 src/assets/overview/Extended Service/Polyfills.png create mode 100644 src/assets/overview/Feedback/mention.png create mode 100644 src/assets/overview/data-display/avatar.png create mode 100644 src/assets/overview/data-display/badge.png create mode 100644 src/assets/overview/data-display/card.png create mode 100644 src/assets/overview/data-display/carousel.png create mode 100644 src/assets/overview/data-display/datatable.png create mode 100644 src/assets/overview/data-display/gantt.png create mode 100644 src/assets/overview/data-display/imagepreview.png create mode 100644 src/assets/overview/data-display/progress.png create mode 100644 src/assets/overview/data-display/quadrantdiagram.png create mode 100644 src/assets/overview/data-display/rate.png create mode 100644 src/assets/overview/data-display/relativetime.png create mode 100644 src/assets/overview/data-display/tags.png create mode 100644 src/assets/overview/data-display/timeaxis.png create mode 100644 src/assets/overview/data-display/tree.png create mode 100644 src/assets/overview/data-entry/autocomplete.png create mode 100644 src/assets/overview/data-entry/cascader.png create mode 100644 src/assets/overview/data-entry/categorysearch.png create mode 100644 src/assets/overview/data-entry/checkbox.png create mode 100644 src/assets/overview/data-entry/datepicker.png create mode 100644 src/assets/overview/data-entry/editableselect.png create mode 100644 src/assets/overview/data-entry/editorx.png create mode 100644 src/assets/overview/data-entry/form.png create mode 100644 src/assets/overview/data-entry/inputnumber.png create mode 100644 src/assets/overview/data-entry/markdown.png create mode 100644 src/assets/overview/data-entry/multiautocomplete.png create mode 100644 src/assets/overview/data-entry/radio.png create mode 100644 src/assets/overview/data-entry/select.png create mode 100644 src/assets/overview/data-entry/slider.png create mode 100644 src/assets/overview/data-entry/tagsinput.png create mode 100644 src/assets/overview/data-entry/textarea.png create mode 100644 src/assets/overview/data-entry/textinput.png create mode 100644 src/assets/overview/data-entry/timepicker.png create mode 100644 src/assets/overview/data-entry/toggle.png create mode 100644 src/assets/overview/data-entry/transfer.png create mode 100644 src/assets/overview/data-entry/treeselect.png create mode 100644 src/assets/overview/data-entry/upload.png create mode 100644 src/assets/overview/default.png diff --git a/devui/accordion/demo/accordion-demo.moudule.ts b/devui/accordion/demo/accordion-demo.moudule.ts index b3654dda..b9320a8a 100755 --- a/devui/accordion/demo/accordion-demo.moudule.ts +++ b/devui/accordion/demo/accordion-demo.moudule.ts @@ -2,13 +2,13 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; +import { TranslateModule } from '@ngx-translate/core'; +import { AccordionModule } from 'ng-devui/accordion'; import { DevUIApiComponent } from 'ng-devui/shared/devui-api/devui-api.component'; import { DevUIApiModule } from 'ng-devui/shared/devui-api/devui-api.module'; import { DevUICodeboxModule } from 'ng-devui/shared/devui-codebox'; import { ToggleModule } from 'ng-devui/toggle'; -import { TranslateModule } from '@ngx-translate/core'; import { DDemoNavModule } from 'src/app/component/d-demo-nav.module'; -import { AccordionModule } from '../accordion.module'; import { AccordionDemoComponent } from './accordion-demo.component'; import { BasicComponent } from './basic/basic.component'; import { ChangeKeyComponent } from './change-key/change-key.component'; @@ -51,6 +51,6 @@ import { TemplateComponent } from './template/template.component'; ChangeKeyComponent, ], providers: [], - + }) export class AccordionDemoModule {} diff --git a/devui/alert/demo/alert-demo.module.ts b/devui/alert/demo/alert-demo.module.ts index 5d6f6bed..eb3cbc31 100755 --- a/devui/alert/demo/alert-demo.module.ts +++ b/devui/alert/demo/alert-demo.module.ts @@ -2,12 +2,12 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; +import { TranslateModule } from '@ngx-translate/core'; +import { AlertModule } from 'ng-devui/alert'; import { DevUIApiComponent } from 'ng-devui/shared/devui-api/devui-api.component'; import { DevUIApiModule } from 'ng-devui/shared/devui-api/devui-api.module'; import { DevUICodeboxModule } from 'ng-devui/shared/devui-codebox/devui-codebox.module'; -import { TranslateModule } from '@ngx-translate/core'; import { DDemoNavModule } from 'src/app/component/d-demo-nav.module'; -import { AlertModule } from '../alert.module'; import { AlertDemoComponent } from './alert-demo.component'; import { BasicComponent } from './basic/basic.component'; import { CloseComponent } from './close/close.component'; @@ -38,7 +38,7 @@ import { WithoutIconComponent } from './withoutIcon/withoutIcon.component'; CloseComponent, WithoutIconComponent ], - + }) export class AlertDemoModule { } diff --git a/devui/avatar/avatar.component.html b/devui/avatar/avatar.component.html index 1039aca2..548fd160 100644 --- a/devui/avatar/avatar.component.html +++ b/devui/avatar/avatar.component.html @@ -33,11 +33,10 @@ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > - - + + @@ -56,12 +55,10 @@ diff --git a/devui/avatar/demo/avatar-demo.module.ts b/devui/avatar/demo/avatar-demo.module.ts index d3bc5559..7d5aec05 100644 --- a/devui/avatar/demo/avatar-demo.module.ts +++ b/devui/avatar/demo/avatar-demo.module.ts @@ -2,12 +2,12 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; +import { TranslateModule } from '@ngx-translate/core'; +import { AvatarModule } from 'ng-devui/avatar'; import { DevUIApiComponent } from 'ng-devui/shared/devui-api/devui-api.component'; import { DevUIApiModule } from 'ng-devui/shared/devui-api/devui-api.module'; import { DevUICodeboxModule } from 'ng-devui/shared/devui-codebox/devui-codebox.module'; -import { TranslateModule } from '@ngx-translate/core'; import { DDemoNavModule } from 'src/app/component/d-demo-nav.module'; -import { AvatarModule } from '../avatar.module'; import { AvatarDemoComponent } from './avatar-demo.component'; import { BasicComponent } from './basic/basic.component'; import { ConfigComponent } from './config/config.component'; diff --git a/devui/back-top/back-top.component.html b/devui/back-top/back-top.component.html index 92356960..0158b182 100644 --- a/devui/back-top/back-top.component.html +++ b/devui/back-top/back-top.component.html @@ -10,10 +10,9 @@ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > - + diff --git a/devui/back-top/demo/back-top-demo.module.ts b/devui/back-top/demo/back-top-demo.module.ts index 114031e9..21d8bd74 100644 --- a/devui/back-top/demo/back-top-demo.module.ts +++ b/devui/back-top/demo/back-top-demo.module.ts @@ -2,14 +2,14 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; +import { TranslateModule } from '@ngx-translate/core'; +import { BackTopModule } from 'ng-devui/back-top'; import { DevUIApiComponent } from 'ng-devui/shared/devui-api/devui-api.component'; import { DevUIApiModule } from 'ng-devui/shared/devui-api/devui-api.module'; import { DevUICodeboxModule } from 'ng-devui/shared/devui-codebox/devui-codebox.module'; import { ToggleModule } from 'ng-devui/toggle'; import { TooltipModule } from 'ng-devui/tooltip'; -import { TranslateModule } from '@ngx-translate/core'; import { DDemoNavModule } from 'src/app/component/d-demo-nav.module'; -import { BackTopModule } from '../back-top.module'; import { BackTopDemoComponent } from './back-top-demo.component'; import { BasicComponent } from './basic/basic.component'; import { CustomizeComponent } from './customize/customize.component'; diff --git a/devui/back-top/demo/basic/basic.component.html b/devui/back-top/demo/basic/basic.component.html index 6f80c61f..786c6dc2 100644 --- a/devui/back-top/demo/basic/basic.component.html +++ b/devui/back-top/demo/basic/basic.component.html @@ -10,7 +10,6 @@ diff --git a/devui/badge/demo/badge-demo.module.ts b/devui/badge/demo/badge-demo.module.ts index 8d1fa882..1770512a 100644 --- a/devui/badge/demo/badge-demo.module.ts +++ b/devui/badge/demo/badge-demo.module.ts @@ -1,12 +1,12 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; +import { TranslateModule } from '@ngx-translate/core'; +import { BadgeModule } from 'ng-devui/badge'; import { DevUIApiComponent } from 'ng-devui/shared/devui-api/devui-api.component'; import { DevUIApiModule } from 'ng-devui/shared/devui-api/devui-api.module'; import { DevUICodeboxModule } from 'ng-devui/shared/devui-codebox/devui-codebox.module'; -import { TranslateModule } from '@ngx-translate/core'; import { DDemoNavModule } from 'src/app/component/d-demo-nav.module'; -import { BadgeModule } from '../badge.module'; import { BadgeDemoComponent } from './badge-demo.component'; import { BasicComponent } from './basic/basic.component'; import { CountComponent } from './count/count.component'; diff --git a/devui/breadcrumb/breadcrumb-item/breadcrumb-item.component.html b/devui/breadcrumb/breadcrumb-item/breadcrumb-item.component.html index c5b9242f..a7e76d07 100644 --- a/devui/breadcrumb/breadcrumb-item/breadcrumb-item.component.html +++ b/devui/breadcrumb/breadcrumb-item/breadcrumb-item.component.html @@ -20,7 +20,6 @@ > diff --git a/devui/cascader/cascader.component.html b/devui/cascader/cascader.component.html index 7760335a..43aec7f3 100644 --- a/devui/cascader/cascader.component.html +++ b/devui/cascader/cascader.component.html @@ -68,7 +68,6 @@ > @@ -105,7 +104,6 @@ > diff --git a/devui/cascader/cascader.component.scss b/devui/cascader/cascader.component.scss index 8cd6c142..31a3b91b 100644 --- a/devui/cascader/cascader.component.scss +++ b/devui/cascader/cascader.component.scss @@ -151,7 +151,7 @@ min-height: 26px; max-height: 56px; overflow: auto; - padding: 4px 0 4px 4px; + padding: 1px 0 1px 4px; d-tag { margin-right: 4px; diff --git a/devui/cascader/demo/lazyload-cascader/lazyload-cascader.component.ts b/devui/cascader/demo/lazyload-cascader/lazyload-cascader.component.ts index a833594b..5a6e8245 100644 --- a/devui/cascader/demo/lazyload-cascader/lazyload-cascader.component.ts +++ b/devui/cascader/demo/lazyload-cascader/lazyload-cascader.component.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { CascaderItem } from '../../cascader.type'; +import { CascaderItem } from 'ng-devui/cascader'; @Component({ selector: 'd-demo-lazyload-cascader', diff --git a/devui/category-search/category-search.component.html b/devui/category-search/category-search.component.html index 53025236..f19f06cd 100644 --- a/devui/category-search/category-search.component.html +++ b/devui/category-search/category-search.component.html @@ -134,7 +134,7 @@ [placeholder]="placeholderText || i18nCategorySearchText?.searchPlaceholder" [(ngModel)]="searchKey" (ngModelChange)="searchKeyChangeEvent($event)" - (click)="$event.stopPropagation(); openMenu(inputDropdown, $event)" + (click)="openMenu(inputDropdown, $event)" (keyup)="checkInputSearching($event); openMenu(inputDropdown, $event)" (keydown.backspace)="backspaceEvent(inputDropdown)" (keydown.enter)="searchInputValue($event); closeMenu(inputDropdown)" @@ -160,7 +160,7 @@
{{ i18nCategorySearchText?.noFilterConditions }}
- +
  • {{ i18nCategorySearchText?.getSearchMessage(searchKey) }}
    • diff --git a/devui/category-search/category-search.component.scss b/devui/category-search/category-search.component.scss index bf5565e7..30ef6e71 100644 --- a/devui/category-search/category-search.component.scss +++ b/devui/category-search/category-search.component.scss @@ -254,8 +254,9 @@ d-tag { padding: 4px 4px 0; li { + display: flex; flex-grow: 0; - white-space: nowrap; + flex-flow: row wrap; &:first-child { margin-left: 0; @@ -292,11 +293,17 @@ d-tag { } ::ng-deep { - .cdk-overlay-container d-datepicker[id='devui-category-search-date-picker'] .devui-month-view { - box-shadow: none !important; + .cdk-overlay-container { + d-datepicker[id='devui-category-search-date-picker'] .devui-month-view { + box-shadow: none !important; + + tfoot { + display: none; + } + } - tfoot { - display: none; + .devui-selected-tags-list ul li .remove-button { + right: 8px; } } diff --git a/devui/category-search/category-search.component.ts b/devui/category-search/category-search.component.ts index 8319b7ec..bf256753 100644 --- a/devui/category-search/category-search.component.ts +++ b/devui/category-search/category-search.component.ts @@ -14,6 +14,7 @@ import { ViewChild, ViewChildren } from '@angular/core'; +import { cloneDeep, isEqual } from 'lodash-es'; import { DateRangePickerComponent } from 'ng-devui/datepicker'; import { DropDownDirective } from 'ng-devui/dropdown'; import { DValidateRules } from 'ng-devui/form'; @@ -21,7 +22,6 @@ import { I18nInterface, I18nService } from 'ng-devui/i18n'; import { ITreeItem } from 'ng-devui/tree'; import { DefaultIcons } from 'ng-devui/tree-select'; import { DateConverter, DefaultDateConverter } from 'ng-devui/utils'; -import { cloneDeep, isEqual } from 'lodash-es'; import { fromEvent, Observable, Subject } from 'rxjs'; import { debounceTime, takeUntil, tap } from 'rxjs/operators'; import { CreateFilterEvent, ICategorySearchTagItem, SearchEvent, SelectedTagsEvent } from './category-search.type'; @@ -160,7 +160,6 @@ export class CategorySearchComponent implements OnInit, OnChanges, OnDestroy, Af setValue(data) { if (data && Array.isArray(data) && data.length) { data.forEach((item) => { - item.title = item.title || `${item.label}：`; const preValue = item.type === 'numberRange' || item.type === 'treeSelect' ? { value: [] } : { value: undefined }; preValue[item.filterKey || 'label'] = undefined; item.value = item.value || preValue; @@ -170,10 +169,19 @@ export class CategorySearchComponent implements OnInit, OnChanges, OnDestroy, Af if (item.type === 'treeSelect' && item.options && item.options.length) { item.value.options = cloneDeep(item.options); } + const result = + (item.type === 'checkbox' || item.type === 'label') && this.getItemValue(item.value.value, item.filterKey || 'label'); + item.title = this.setTitle(item, item.type, result); }); } } + setTitle(tag: ICategorySearchTagItem, type: string, result?: string) { + return type === 'checkbox' || type === 'label' + ? `${tag.label}: ${result || ''}` + : `${tag.label}: ${(tag.value && tag.value[tag.filterKey || 'label']) || ''}`; + } + initCategoryDisplay() { const selectedTagsField = this.selectedTags.map((item) => item.field); if (this.categoryInGroup) { @@ -182,10 +190,12 @@ export class CategorySearchComponent implements OnInit, OnChanges, OnDestroy, Af const keys = this.groupOrderConfig || Object.keys(groupObj); this.categoryDisplay = []; keys.forEach((key) => { - const groupItem = {}; - groupItem.groupName = key; - groupItem.groupLength = groupObj[key].length; - this.categoryDisplay.push(groupItem, ...groupObj[key]); + if (groupObj[key]) { + const groupItem = {}; + groupItem.groupName = key; + groupItem.groupLength = groupObj[key].length; + this.categoryDisplay.push(groupItem, ...groupObj[key]); + } }); } else { this.categoryDisplay = @@ -474,7 +484,7 @@ export class CategorySearchComponent implements OnInit, OnChanges, OnDestroy, Af this.afterDropdownClosed(); tag.value = chooseItem; tag.value.cache = tag.value.value; - tag.title = `${tag.label}：${tag.value[tag.filterKey || 'label']}`; + tag.title = this.setTitle(tag, 'radio'); this.updateSelectedTags(tag); } @@ -489,7 +499,7 @@ export class CategorySearchComponent implements OnInit, OnChanges, OnDestroy, Af tag.value[tag.filterKey || 'label'] = tag.showTime ? this.dateConverter.formatDateTime(startDate) + ' - ' + this.dateConverter.formatDateTime(endDate) : this.dateConverter.format(startDate) + ' - ' + this.dateConverter.format(endDate); - tag.title = `${tag.label}：${tag.value[tag.filterKey || 'label']}`; + tag.title = this.setTitle(tag, 'dateRange'); this.updateSelectedTags(tag); } } @@ -499,7 +509,7 @@ export class CategorySearchComponent implements OnInit, OnChanges, OnDestroy, Af this.afterDropdownClosed(); const result = this.getItemValue(tag.value.value, tag.filterKey || 'label'); if (result) { - tag.title = `${tag.label}：${result}`; + tag.title = this.setTitle(tag, 'checkbox', result); tag.value[tag.filterKey || 'label'] = result; tag.value.cache = cloneDeep(tag.value.value); this.updateSelectedTags(tag); @@ -576,7 +586,7 @@ export class CategorySearchComponent implements OnInit, OnChanges, OnDestroy, Af getTextInputValue(tag) { this.afterDropdownClosed(); tag.value[tag.filterKey || 'label'] = tag.value.cache = tag.value.value; - tag.title = `${tag.label}：${tag.value[tag.filterKey || 'label']}`; + tag.title = this.setTitle(tag, 'textInput'); this.updateSelectedTags(tag); } @@ -588,7 +598,7 @@ export class CategorySearchComponent implements OnInit, OnChanges, OnDestroy, Af tag.value.value = [startNum, endNum]; tag.value.cache = [startNum, endNum]; tag.value[tag.filterKey || 'label'] = `${startNum} - ${endNum}`; - tag.title = `${tag.label}：${tag.value[tag.filterKey || 'label']}`; + tag.title = this.setTitle(tag, 'numberRange'); this.updateSelectedTags(tag); } @@ -607,7 +617,7 @@ export class CategorySearchComponent implements OnInit, OnChanges, OnDestroy, Af tag.value.options = cloneDeep(tag.options); tag.value.cache = cloneDeep(tag.value.value); tag.value[tag.filterKey || 'label'] = result.join(','); - tag.title = `${tag.label}：${tag.value[tag.filterKey || 'label']}`; + tag.title = this.setTitle(tag, 'treeSelect'); this.updateTreeData(tag, tag.value.options, selectedIds, halfCheckedIds); this.updateSelectedTags(tag); } else { diff --git a/devui/category-search/category-search.type.ts b/devui/category-search/category-search.type.ts index cd2f867a..ba3c1d7b 100644 --- a/devui/category-search/category-search.type.ts +++ b/devui/category-search/category-search.type.ts @@ -36,7 +36,7 @@ export interface ICategorySearchTagItem { /** * 自定义下拉模板的展示内容 */ - customTemplate?: TemplateRef; + customTemplate: TemplateRef; /** * 已选中值 */ diff --git a/devui/category-search/doc/api-cn.md b/devui/category-search/doc/api-cn.md index 2cb8743d..084bad57 100644 --- a/devui/category-search/doc/api-cn.md +++ b/devui/category-search/doc/api-cn.md @@ -80,7 +80,7 @@ export interface ICategorySearchTagItem { /** * 自定义下拉模板的展示内容 */ - customTemplate?: TemplateRef; + customTemplate: TemplateRef; /** * 已选中值 */ diff --git a/devui/category-search/doc/api-en.md b/devui/category-search/doc/api-en.md index 503e8b13..48898130 100644 --- a/devui/category-search/doc/api-en.md +++ b/devui/category-search/doc/api-en.md @@ -80,7 +80,7 @@ export interface ICategorySearchTagItem { /** * Customize the content to be displayed in the drop-down list box. */ - customTemplate?: TemplateRef; + customTemplate: TemplateRef; /** * Selected Value */ diff --git a/devui/checkbox/demo/basic/checkbox-basic.component.html b/devui/checkbox/demo/basic/checkbox-basic.component.html index a1e97bd6..74605b0b 100755 --- a/devui/checkbox/demo/basic/checkbox-basic.component.html +++ b/devui/checkbox/demo/basic/checkbox-basic.component.html @@ -25,8 +25,7 @@ [halfchecked]="true" > - - + - + @@ -39,7 +38,7 @@ - + - + - + { tick(); fixture.detectChanges(); expect(component.toggleChange).toHaveBeenCalled(); - const svgIcon = detailCell.nativeElement.querySelector('svg #chevron-up'); + const svgIcon = detailCell.nativeElement.querySelector('svg'); expect(svgIcon).toBeTruthy(); // test other detail row fixture.detectChanges(); diff --git a/devui/data-table/data-table-row.component.html b/devui/data-table/data-table-row.component.html index 4b233ccd..ffaba8b4 100755 --- a/devui/data-table/data-table-row.component.html +++ b/devui/data-table/data-table-row.component.html @@ -10,7 +10,7 @@ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > - + @@ -25,7 +25,7 @@ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > - + diff --git a/devui/data-table/demo/tree-table-old/tree-table-old.component.html b/devui/data-table/demo/tree-table-old/tree-table-old.component.html index 35ea955e..74f49f1b 100644 --- a/devui/data-table/demo/tree-table-old/tree-table-old.component.html +++ b/devui/data-table/demo/tree-table-old/tree-table-old.component.html @@ -13,7 +13,15 @@ [loadChildrenTable]="loadChildrenTable" [loadAllChildrenTable]="loadAllChildrenTable" > - + - + @@ -40,7 +39,7 @@ - + - + - + g > polygon { .cell-container-inner { position: absolute; max-width: 100%; + min-height: 24px; &.modify-holder { padding-right: 20px; diff --git a/devui/data-table/table/body/td/td.component.ts b/devui/data-table/table/body/td/td.component.ts index 7e4063e3..5b2782d6 100644 --- a/devui/data-table/table/body/td/td.component.ts +++ b/devui/data-table/table/body/td/td.component.ts @@ -1,7 +1,7 @@ import { - Component, ElementRef, EventEmitter, - HostBinding, Input, OnChanges, OnDestroy, OnInit, - Output, SimpleChanges + Component, ElementRef, EventEmitter, + HostBinding, Input, OnChanges, OnDestroy, OnInit, + Output, SimpleChanges } from '@angular/core'; import { fromEvent, Observable, Subscription } from 'rxjs'; import { tap } from 'rxjs/operators'; @@ -28,6 +28,7 @@ export class TableTdComponent implements OnInit, OnChanges, OnDestroy { @Input() fixedRight: string; @Input() iconFoldTable: string; @Input() iconUnFoldTable: string; + @Input() nestedColumnIndent = 16; @Input() beforeEditStart: (rowItem, field) => boolean | Promise | Observable; @Input() beforeEditEnd: (rowItem, field) => boolean | Promise | Observable; @Output() toggleChildTableEvent = new EventEmitter(); diff --git a/devui/data-table/table/head/th/filter/filter.component.html b/devui/data-table/table/head/th/filter/filter.component.html index 34dbd4c3..dd563217 100644 --- a/devui/data-table/table/head/th/filter/filter.component.html +++ b/devui/data-table/table/head/th/filter/filter.component.html @@ -24,7 +24,7 @@ > - + diff --git a/devui/data-table/table/head/th/th.component.html b/devui/data-table/table/head/th/th.component.html index 6c3e5aa5..ffb8ff2a 100644 --- a/devui/data-table/table/head/th/th.component.html +++ b/devui/data-table/table/head/th/th.component.html @@ -8,10 +8,9 @@ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > - + @@ -30,7 +29,7 @@ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > - + - + {{ 'components.design-border-radius.cornerDemo.instance.tableTitle' | translate }} + + + + + + + diff --git a/devui/design-token/border-radius/demo/border-radius/border-radius.component.ts b/devui/design-token/border-radius/demo/border-radius/border-radius.component.ts new file mode 100644 index 00000000..57bd1f04 --- /dev/null +++ b/devui/design-token/border-radius/demo/border-radius/border-radius.component.ts @@ -0,0 +1,47 @@ +import { Component, OnDestroy, OnInit } from '@angular/core'; +import { TranslateService, TranslationChangeEvent } from '@ngx-translate/core'; +import { Subscription } from 'rxjs'; + +@Component({ + selector: 'd-border-radius', + templateUrl: './border-radius.component.html' +}) +export class BorderRadiusComponent implements OnInit, OnDestroy { + subs: Subscription = new Subscription(); + borderRadius = []; + + constructor(private translate: TranslateService) { } + + ngOnInit() { + this.setI18n(); + } + + setI18n() { + this.subs.add( + this.translate.get('components.design-border-radius.cornerDemo.instance').subscribe((res) => { + this.setValues(res); + }) + ); + + this.subs.add( + this.translate.onLangChange.subscribe((event: TranslationChangeEvent) => { + const values = this.translate.instant('components.design-border-radius.cornerDemo.instance'); + this.setValues(values); + }) + ); + } + + setValues(values) { + this.borderRadius = [ + { name: '$devui-border-radius', value: '2px', description: values.borderRadius['devui-border-radius'] }, + { name: '$devui-border-radius-feedback', value: '4px', description: values.borderRadius['devui-border-radius-feedback'] }, + { name: '$devui-border-radius-card', value: '6px', description: values.borderRadius['devui-border-radius-card'] } + ]; + } + + ngOnDestroy() { + if (this.subs) { + this.subs.unsubscribe(); + } + } +} diff --git a/devui/design-token/border-radius/demo/design-border-radius-demo.component.html b/devui/design-token/border-radius/demo/design-border-radius-demo.component.html new file mode 100644 index 00000000..2d0b0db5 --- /dev/null +++ b/devui/design-token/border-radius/demo/design-border-radius-demo.component.html @@ -0,0 +1,12 @@ +
    + +
    +
    {{ 'components.design-border-radius.cornerDemo.title' | translate }}
    +
    + {{ 'components.design-border-radius.cornerDemo.description1' | translate }}
    + {{ 'components.design-border-radius.cornerDemo.description2' | translate }}
    + {{ 'components.design-border-radius.cornerDemo.description3' | translate }} +
    + +
    +
    diff --git a/devui/design-token/border-radius/demo/design-border-radius-demo.component.ts b/devui/design-token/border-radius/demo/design-border-radius-demo.component.ts new file mode 100644 index 00000000..f56117a7 --- /dev/null +++ b/devui/design-token/border-radius/demo/design-border-radius-demo.component.ts @@ -0,0 +1,41 @@ +import { Component, OnDestroy, OnInit } from '@angular/core'; +import { TranslateService, TranslationChangeEvent } from '@ngx-translate/core'; +import { Subscription } from 'rxjs'; + +@Component({ + selector: 'd-design-border-radius-demo', + templateUrl: './design-border-radius-demo.component.html' +}) +export class DesignBorderRadiusDemoComponent implements OnInit, OnDestroy { + navItems = []; + subs: Subscription = new Subscription(); + constructor(private translate: TranslateService) {} + + ngOnInit() { + this.subs.add( + this.translate.get('components.design-border-radius.anchorLinkValues').subscribe((res) => { + this.setNavValues(res); + }) + ); + + this.subs.add( + this.translate.onLangChange.subscribe((event: TranslationChangeEvent) => { + const values = this.translate.instant('components.design-border-radius.anchorLinkValues'); + this.setNavValues(values); + }) + ); + } + + setNavValues(values) { + this.navItems = [ + { dAnchorLink: 'border-radius', value: values['border-radius'] } + ]; + } + + ngOnDestroy() { + if (this.subs) { + this.subs.unsubscribe(); + } + } + +} diff --git a/devui/design-token/border-radius/demo/design-border-radius-demo.module.ts b/devui/design-token/border-radius/demo/design-border-radius-demo.module.ts new file mode 100644 index 00000000..f0d4ea4b --- /dev/null +++ b/devui/design-token/border-radius/demo/design-border-radius-demo.module.ts @@ -0,0 +1,33 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { TranslateModule } from '@ngx-translate/core'; +import { DataTableModule } from 'ng-devui/data-table'; +import { DevUIApiComponent } from 'ng-devui/shared/devui-api/devui-api.component'; +import { DevUIApiModule } from 'ng-devui/shared/devui-api/devui-api.module'; +import { DevUICodeboxModule } from 'ng-devui/shared/devui-codebox'; +import { TabsModule } from 'ng-devui/tabs'; +import { DDemoNavModule } from 'src/app/component/d-demo-nav.module'; +import { BorderRadiusComponent } from './border-radius/border-radius.component'; +import { DesignBorderRadiusDemoComponent } from './design-border-radius-demo.component'; +@NgModule({ + declarations: [DesignBorderRadiusDemoComponent, BorderRadiusComponent], + imports: [ + TranslateModule, + CommonModule, + DevUIApiModule, + DevUICodeboxModule, + DataTableModule, + DDemoNavModule, + TabsModule, + RouterModule.forChild([ + { path: '', redirectTo: 'demo' }, + { path: 'demo', component: DesignBorderRadiusDemoComponent}, + { path: 'api', component: DevUIApiComponent, data: { + 'zh-cn': require('!html-loader!markdown-loader!../doc/api-cn.md'), + 'en-us': require('!html-loader!markdown-loader!../doc/api-en.md') + }} + ]) + ] +}) +export class DesignBorderRadiusDemoModule { } diff --git a/devui/design-token/border-radius/doc/api-cn.md b/devui/design-token/border-radius/doc/api-cn.md new file mode 100644 index 00000000..b6d572fb --- /dev/null +++ b/devui/design-token/border-radius/doc/api-cn.md @@ -0,0 +1 @@ +具体使用方式参考demo及描述信息 \ No newline at end of file diff --git a/devui/design-token/border-radius/doc/api-en.md b/devui/design-token/border-radius/doc/api-en.md new file mode 100644 index 00000000..49bd13e8 --- /dev/null +++ b/devui/design-token/border-radius/doc/api-en.md @@ -0,0 +1 @@ +For details, please see the demo and description. \ No newline at end of file diff --git a/devui/design-token/color/demo/color/color.component.html b/devui/design-token/color/demo/color/color.component.html new file mode 100644 index 00000000..6891726f --- /dev/null +++ b/devui/design-token/color/demo/color/color.component.html @@ -0,0 +1,108 @@ +
    +

    {{ 'components.design-color.colorDemo.instance.title' | translate }}

    +
    {{ 'components.design-color.colorDemo.instance.description' | translate }}
    +
    +
    +
    +
    +
    +
    +
    + + + + + + + + + {{ 'components.design-color.colorDemo.instance.defaultTable.colorVar' | translate }} + {{ 'components.design-color.colorDemo.instance.defaultTable.normalColor' | translate }} + {{ 'components.design-color.colorDemo.instance.defaultTable.darkColor' | translate }} + {{ 'components.design-color.colorDemo.instance.defaultTable.description' | translate }} + + + + + + +
    + + +
    + + {{ rowItem?.name }} + +
    + {{ rowItem?.light }} +
    +
    + + +
    + {{ rowItem?.dark }} +
    +
    + + {{ rowItem?.description }} + +     + +     +     +     + + + + + + + + + + + +
    + {{ cellItem }} +
    +
    +     +     +     + + + +
    + {{ cellItem }} +
    +
    +     +     +     + + +     +     +     +     +
    diff --git a/src/app/component/color/color.component.scss b/devui/design-token/color/demo/color/color.component.scss similarity index 86% rename from src/app/component/color/color.component.scss rename to devui/design-token/color/demo/color/color.component.scss index f211cd2d..a8df950d 100644 --- a/src/app/component/color/color.component.scss +++ b/devui/design-token/color/demo/color/color.component.scss @@ -1,11 +1,11 @@ -@import '../../../../devui/style/theme/color'; +@import '~ng-devui/styles-var/devui-var.scss'; .devui-container { margin-top: 16px; } .devui-theme-color-title { - font-size: 16px; + font-size: $devui-font-size-page-title; padding: 20px 0; } @@ -61,7 +61,7 @@ table { width: 20px; display: inline-block; vertical-align: middle; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + box-shadow: $devui-shadow-length-base $devui-light-shadow; } .color-name { diff --git a/devui/design-token/color/demo/color/color.component.ts b/devui/design-token/color/demo/color/color.component.ts new file mode 100644 index 00000000..3d6a2304 --- /dev/null +++ b/devui/design-token/color/demo/color/color.component.ts @@ -0,0 +1,320 @@ +import { Component, OnDestroy, OnInit } from '@angular/core'; +import { TranslateService, TranslationChangeEvent } from '@ngx-translate/core'; +import { TableExpandConfig } from 'ng-devui/data-table'; +import { Subscription } from 'rxjs'; + +export interface CatalogConfig { + name: string; + type: string; + expand?: boolean; + [propName: string]: any; +} + +@Component({ + selector: 'd-color', + templateUrl: './color.component.html', + styleUrls: ['./color.component.scss'] +}) +export class ColorComponent implements OnInit, OnDestroy { + subs: Subscription = new Subscription(); + headerExpandConfig: TableExpandConfig; + activeTab = 'tab1'; + colorSource = []; + catalogs: CatalogConfig[] = []; + + colors = []; + constructor(private translate: TranslateService) {} + + ngOnInit() { + this.setI18n(); + } + + toggleExpand(rowItem, index) { + rowItem.expand = !rowItem.expand; + if (rowItem.expand) { + const insertItems = this.colorSource.filter(color => color.type === rowItem.type); + this.catalogs.splice(index + 1, 0, ...insertItems); + } else { + const itemLength = this.colorSource.filter(color => color.type === rowItem.type).length; + this.catalogs.splice(index + 1, itemLength); + } + } + + setI18n() { + this.subs.add( + this.translate.get('components.design-color.colorDemo.instance').subscribe((res) => { + this.setValues(res); + }) + ); + + this.subs.add( + this.translate.onLangChange.subscribe((event: TranslationChangeEvent) => { + const values = this.translate.instant('components.design-color.colorDemo.instance'); + this.setValues(values); + }) + ); + } + + setValues(values) { + this.colorSource = [ + { type: 'basic', name: '$devui-global-bg', light: '#f3f6f8', dark: '#202124', description: values.colorSource['devui-global-bg'] }, + { type: 'basic', name: '$devui-global-bg-normal', light: '#ffffff', dark: '#202124', description: values.colorSource['devui-global-bg-normal'] }, + { type: 'basic', name: '$devui-base-bg', light: '#ffffff', dark: '#2E2F31', description: values.colorSource['devui-global-bg-normal'] }, + { type: 'basic', name: '$devui-base-bg-dark', light: '#333854', dark: '#2e2f31', description: values.colorSource['devui-base-bg-dark'] }, + { type: 'basic', name: '$devui-brand', light: '#5e7ce0', dark: '#5e7ce0', description: values.colorSource['devui-brand'] }, + { type: 'basic', name: '$devui-brand-foil', light: '#859bff', dark: '#313a61', description: values.colorSource['devui-brand-foil'] }, + { type: 'basic', name: '$devui-brand-hover', light: '#7693f5', dark: '#425288', description: values.colorSource['devui-brand-hover'] }, + { type: 'basic', name: '$devui-brand-active', light: '#526ecc', dark: '#526ecc', description: values.colorSource['devui-brand-active'] }, + { type: 'basic', name: '$devui-brand-active-focus', light: '#344899', dark: '#344899', description: values.colorSource['devui-brand-active-focus'] }, + { type: 'basic', name: '$devui-contrast', light: '#C7000B', dark: '#C7000B', description: values.colorSource['devui-contrast'] }, + { type: 'basic', name: '$devui-text', light: '#252b3a', dark: '#E8E8E8', description: values.colorSource['devui-text'] }, + { type: 'basic', name: '$devui-text-weak', light: '#575d6c', dark: '#A0A0A0', description: values.colorSource['devui-text-weak'] }, + { type: 'basic', name: '$devui-aide-text', light: '#8a8e99', dark: '#909090', description: values.colorSource['devui-aide-text'] }, + { type: 'basic', name: '$devui-aide-text-stress', light: '#575d6c', dark: '#A0A0A0', description: values.colorSource['devui-aide-text-stress'] }, + { type: 'basic', name: '$devui-placeholder', light: '#8a8e99', dark: '#8A8A8A', description: values.colorSource['devui-placeholder'] }, + { type: 'basic', name: '$devui-light-text', light: '#ffffff', dark: '#ffffff', description: values.colorSource['devui-light-text'] }, + { type: 'basic', name: '$devui-dark-text', light: '#252b3a', dark: '#252b3a', description: values.colorSource['devui-dark-text'] }, + { type: 'basic', name: '$devui-link', light: '#526ecc', dark: '#526ECC', description: values.colorSource['devui-link'] }, + { type: 'basic', name: '$devui-link-active', light: '#344899', dark: '#344899', description: values.colorSource['devui-link-active'] }, + { type: 'basic', name: '$devui-link-light', light: '#96adfa', dark: '#96adfa', description: values.colorSource['devui-link-light'] }, + { type: 'basic', name: '$devui-link-light-active', light: '#beccfa', dark: '#beccfa', description: values.colorSource['devui-link-light-active'] }, + { type: 'basic', name: '$devui-line', light: '#adb0b8', dark: '#505153', description: values.colorSource['devui-line'] }, + { type: 'basic', name: '$devui-dividing-line', light: '#dfe1e6', dark: '#3D3E40', description: values.colorSource['devui-dividing-line'] }, + { type: 'basic', name: '$devui-block', light: '#ffffff', dark: '#606061', description: values.colorSource['devui-block'] }, + { type: 'basic', name: '$devui-area', light: '#f8f8f8', dark: '#34363A', description: values.colorSource['devui-area'] }, + { type: 'basic', name: '$devui-danger', light: '#f66f6a', dark: '#f66f6a', description: values.colorSource['devui-danger'] }, + { type: 'basic', name: '$devui-warning', light: '#fac20a', dark: '#fac20a', description: values.colorSource['devui-warning'] }, + { type: 'basic', name: '$devui-waiting', light: '#9faad7', dark: '#5e6580', description: values.colorSource['devui-waiting'] }, + { type: 'basic', name: '$devui-success', light: '#50d4ab', dark: '#50d4ab', description: values.colorSource['devui-success'] }, + { type: 'basic', name: '$devui-info', light: '#5e7ce0', dark: '#5e7ce0', description: values.colorSource['devui-info'] }, + { type: 'basic', name: '$devui-initial', light: '#e9edfa', dark: '#64676e', description: values.colorSource['devui-initial'] }, + { type: 'basic', name: '$devui-unavailable', light: '#f5f5f6', dark: '#5b5b5c', description: values.colorSource['devui-unavailable'] }, + { type: 'basic', name: '$devui-shadow', light: 'rgba(0, 0, 0, 0.2)', dark: 'rgba(17, 18, 19, 0.4)', description: values.colorSource['devui-shadow'] }, + { + type: 'basic', name: '$devui-light-shadow', light: 'rgba(0, 0, 0, 0.1)', dark: 'rgba(17, 18, 19, 0.5)', + description: values.colorSource['devui-light-shadow'] + }, + + { type: 'icon', name: '$devui-icon-text', light: '#252b3a', dark: '#E8E8E8', description: values.colorSource['devui-icon-text'] }, + { type: 'icon', name: '$devui-icon-bg', light: '#ffffff', dark: '#2E2F31', description: values.colorSource['devui-icon-bg'] }, + { type: 'icon', name: '$devui-icon-fill', light: '#d3d5d9', dark: '#606061', description: values.colorSource['devui-icon-fill'] }, + { type: 'icon', name: '$devui-icon-fill-hover', light: '#adb5ce', dark: '#73788a', description: values.colorSource['devui-icon-fill-hover'] }, + { type: 'icon', name: '$devui-icon-fill-active', light: '#5e7ce0', dark: '#5e7ce0', description: values.colorSource['devui-icon-fill-active'] }, + { type: 'icon', name: '$devui-icon-fill-active-hover', light: '#526ecc', dark: '#526ecc', description: values.colorSource['evui-icon-fill-active-hover'] }, + + { type: 'form', name: '$devui-form-control-line', light: '#adb0b8', dark: '#505153', description: values.colorSource['devui-form-control-line'] }, + { + type: 'form', name: '$devui-form-control-line-hover', light: '#575d6c', dark: '#909090', + description: values.colorSource['devui-form-control-line-hover'] + }, + { + type: 'form', name: '$devui-form-control-line-active', light: '#5e7ce0', dark: '#5e7ce0', + description: values.colorSource['devui-form-control-line-active'] + }, + { + type: 'form', name: '$devui-form-control-line-active-hover', light: '#344899', dark: '#344899', + description: values.colorSource['devui-form-control-line-active-hover'] + }, + + { type: 'list', name: '$devui-list-item-active-bg', light: '#5e7ce0', dark: '#5e7ce0', description: values.colorSource['devui-list-item-active-bg'] }, + { + type: 'list', name: '$devui-list-item-active-text', light: '#ffffff', dark: '#ffffff', + description: values.colorSource['devui-list-item-active-text'] + }, + { + type: 'list', name: '$devui-list-item-active-hover-bg', light: '#526ecc', dark: '#526ecc', + description: values.colorSource['devui-list-item-active-hover-bg'] + }, + { type: 'list', name: '$devui-list-item-hover-bg', light: '#f2f5fc', dark: '#383838', description: values.colorSource['$devui-list-item-hover-bg'] }, + { type: 'list', name: '$devui-list-item-hover-text', light: '#526ecc', dark: '#526ecc', description: values.colorSource['devui-list-item-hover-text'] }, + { type: 'list', name: '$devui-list-item-selected-bg', light: '#e9edfa', dark: '#454545', description: values.colorSource['devui-list-item-selected-bg'] }, + { type: 'list', name: '$devui-list-item-strip-bg', light: '#f2f5fc', dark: '#383838', description: values.colorSource['devui-list-item-strip-bg'] }, + + { type: 'disable', name: '$devui-disabled-bg', light: '#f5f5f6', dark: '#3D3E44', description: values.colorSource['devui-disabled-bg'] }, + { type: 'disable', name: '$devui-disabled-line', light: '#dfe1e6', dark: '#505153', description: values.colorSource['devui-disabled-line'] }, + { type: 'disable', name: '$devui-disabled-text', light: '#adb0b8', dark: '#7D7D7D', description: values.colorSource['devui-disabled-text'] }, + { type: 'disable', name: 'devui-primary-disabled', light: '#beccfa', dark: '#2b3458', description: values.colorSource['devui-primary-disabled'] }, + { + type: 'disable', name: 'devui-icon-fill-active-disabled', light: '#beccfa', dark: '#2b3458', + description: values.colorSource['devui-icon-fill-active-disabled'] + }, + + { + type: 'specialBackground', name: '$devui-label-bg', light: '#eef0f5', dark: '#46443F', + description: values.colorSource['devui-label-bg'] + }, + { + type: 'specialBackground', name: '$devui-connected-overlay-bg', light: '#ffffff', dark: '#2F2F2F', + description: values.colorSource['devui-connected-overlay-bg'] + }, + { + type: 'specialBackground', name: '$devui-connected-overlay-line', light: '#526ecc', dark: '#526ecc', + description: values.colorSource['devui-connected-overlay-line'] + }, + { + type: 'specialBackground', name: '$devui-fullscreen-overlay-bg', light: '#ffffff', dark: '#2E2F31', + description: values.colorSource['devui-fullscreen-overlay-bg'] + }, + { + type: 'specialBackground', name: '$devui-feedback-overlay-bg', light: '#464d6e', dark: '#4C4C4C', + description: values.colorSource['devui-feedback-overlay-bg'] + }, + { + type: 'specialBackground', name: '$devui-feedback-overlay-text', light: '#dfe1e6', dark: '#DFE1E6', + description: values.colorSource['devui-feedback-overlay-text'] + }, + { + type: 'specialBackground', name: '$devui-embed-search-bg', light: '#f2f5fc', dark: '#383838', + description: values.colorSource['devui-embed-search-bg'] + }, + { + type: 'specialBackground', name: '$devui-embed-search-bg-hover', light: '#eef0f5', dark: '#3D3E40', + description: values.colorSource['devui-embed-search-bg-hover'] + }, + { + type: 'specialBackground', name: '$devui-float-block-shadow', light: 'rgba(94, 124, 224, 0.3)', dark: 'rgba(94, 124, 224, 0.3)', + description: values.colorSource['devui-float-block-shadow'] + }, + { + type: 'specialBackground', name: '$devui-highlight-overlay', light: 'rgba(255, 255, 255, 0.8)', dark: 'rgba(255, 255, 255, 0.1)', + description: values.colorSource['devui-highlight-overlay'] + }, + { + type: 'specialBackground', name: '$devui-range-item-hover-bg', light: '#e9edfa', dark: '#454545', + description: values.colorSource['devui-range-item-hover-bg'] + }, + + { type: 'button', name: '$devui-primary', light: '#5e7ce0', dark: '#5e7ce0', description: values.colorSource['devui-primary'] }, + { type: 'button', name: '$devui-primary-hover', light: '#7693f5', dark: '#425288', description: values.colorSource['devui-primary-hover'] }, + { type: 'button', name: '$devui-primary-active', light: '#344899', dark: '#344899', description: values.colorSource['devui-primary-active'] }, + { type: 'button', name: '$devui-contrast-hover', light: '#D64A52', dark: '#D64A52', description: values.colorSource['devui-contrast-hover'] }, + { type: 'button', name: '$devui-contrast-active', light: '#B12220', dark: '#B12220', description: values.colorSource['devui-contrast-active'] }, + + { type: 'status', name: '$devui-danger-line', light: '#f66f6a', dark: '#985C5A', description: values.colorSource['devui-danger-line'] }, + { type: 'status', name: '$devui-danger-bg', light: '#ffeeed', dark: '#4B3A39', description: values.colorSource['devui-danger-bg'] }, + { type: 'status', name: '$devui-warning-line', light: '#fa9841', dark: '#8D6138', description: values.colorSource['devui-warning-line'] }, + { type: 'status', name: '$devui-warning-bg', light: '#fff3e8', dark: '#554434', description: values.colorSource['devui-warning-bg'] }, + { type: 'status', name: '$devui-info-line', light: '#5e7ce0', dark: '#546BB7', description: values.colorSource['devui-info-line'] }, + { type: 'status', name: '$devui-info-bg', light: '#f2f5fc', dark: '#383D4F', description: values.colorSource['devui-info-bg'] }, + { type: 'status', name: '$devui-success-line', light: '#50d4ab', dark: '#5D887D', description: values.colorSource['devui-success-line'] }, + { type: 'status', name: '$devui-success-bg', light: '#edfff9', dark: '#304642', description: values.colorSource['devui-success-bg'] }, + { type: 'status', name: '$devui-primary-line', light: '#5e7ce0', dark: '#546BB7', description: values.colorSource['devui-primary-line'] }, + { type: 'status', name: '$devui-primary-bg', light: '#f2f5fc', dark: '#383D4F', description: values.colorSource['devui-primary-bg'] }, + { type: 'status', name: '$devui-default-line', light: '#5e7ce0', dark: '#5e7ce0', description: values.colorSource['devui-default-line'] }, + { type: 'status', name: '$devui-default-bg', light: '#f3f6f8', dark: '#383838', description: values.colorSource['devui-default-bg'] }, + ]; + + this.catalogs = [ + { name: values.catalogs.basic, type: 'basic', expand: true, }, + { name: values.catalogs.icon, type: 'icon', expand: true }, + { name: values.catalogs.form, type: 'form', expand: true }, + { name: values.catalogs.list, type: 'list', expand: true }, + { name: values.catalogs.disable, type: 'disable', expand: true, }, + { name: values.catalogs.specialBackground, type: 'specialBackground', expand: true }, + { name: values.catalogs.button, type: 'button', expand: true }, + { name: values.catalogs.status, type: 'status', expand: true } + ]; + + this.colors = [ + { name: '$global-bg', newName: '$devui-global-bg', light: '#f3f6f8', dark: '#202124', description: values.colors['global-bg'] }, + { name: '$bg-white', newName: '$devui-base-bg', light: '#FFFFFF', dark: '#2E2F31', description: values.colors['bg-white'] }, + { name: '$base-bg-white', newName: '$devui-global-bg-normal', light: '#ffffff', dark: '#202124', description: values.colors['base-bg-white'] }, + { name: '$block-bg-white', newName: '$devui-block', light: '#ffffff', dark: '#606061', + description: values.colors['block-bg-white'] }, + { name: '$brand-1', newName: '$devui-brand', light: '#5e7ce0', dark: '#5E7CE0', description: values.colors['brand-1'] }, + { name: '$brand-2', newName: '$devui-brand-active-focus', light: '#344899', dark: '#344899', description: values.colors['brand-2'] }, + { name: '$brand-3', newName: '$devui-list-item-selected-bg', light: '#e9edfa', dark: '#454545', description: values.colors['brand-3'] }, + { name: '$brand-4', newName: '$devui-brand-foil', light: '#859bff', dark: '#859BFF', description: values.colors['brand-4'] }, + + { name: '$dark-1', newName: '$devui-text', light: '#252b3a', dark: '#E8E8E8', description: values.colors['dark-1'] }, + { name: '$dark-2', newName: '$devui-aide-text', light: '#575d6c', dark: '#909090', description: values.colors['dark-2'] }, + { name: '$dark-3', newName: '$devui-placeholder', light: '#8a8e99', dark: '#8A8A8A', description: values.colors['dark-3'] }, + { name: '$dark-1-boxshadow-light', newName: '$devui-light-shadow', light: 'rgba(41, 48, 64, 0.1)', dark: 'rgba(17, 18, 19, 0.5)', + description: values.colors['dark-1-boxshadow-light'] }, + { name: '$dark-1-boxshadow', newName: '$devui-shadow', light: ' rgba(41, 48, 64, 0.2)', dark: 'rgba(17, 18, 19, 0.4)', + description: values.colors['dark-1-boxshadow'] }, + { name: '$dark-1-3', newName: '废弃', light: '#252b3a', dark: '#d1d4da', description: values.colors['dark-1-3'] }, + { name: '$dividing', newName: '$devui-dividing-line', light: '#dfe1e6', dark: '#3D3E40', description: values.colors['dividing'] }, + { name: '$dropdown-overlay', newName: '$devui-connected-overlay-bg', light: '#ffffff', dark: '#2F2F2F', + description: values.colors['dropdown-overlay'] }, + { name: '$font-dark', newName: '$devui-dark-text', light: '#293040', dark: '#293040', description: values.colors['font-dark'] }, + { name: '$font-white', newName: '$devui-light-text', light: '#ffffff', dark: '#ffffff', description: values.colors['font-white'] }, + { name: '$full-screen-overlay', newName: '$devui-fullscreen-overlay-bg', light: '#ffffff', dark: '#4C4C4C', + description: values.colors['full-screen-overlay'] }, + { name: '$gray-1', newName: '$devui-line', light: '#adb0b8', dark: '#505153', description: values.colors['gray-1'] }, + { name: '$gray-2', newName: '$devui-dividing-line', light: '#dfe1e6', dark: '#3D3E40', description: values.colors['gray-2'] }, + { name: '$gray-3', newName: '$devui-area', light: '#f8f8f8', dark: '#34363A', description: values.colors['gray-3'] }, + { name: '$highlight-overlay', newName: '$devui-highlight-overlay', light: 'rgba(255, 255, 255, 0.8)', dark: 'rgba(255, 255, 255, 0.1)', + description: values.colors['highlight-overlay'] }, + { name: '$hover-control', newName: '$devui-brand-active', light: '#526ecc', dark: '#526ECC', description: values.colors['hover-control'] }, + { name: '$hover-control-light', newName: '$devui-link-light-active', light: '#beccfa', dark: '#beccfa', description: values.colors['hover-control-light'] }, + { name: '$hover-content', newName: '$devui-list-item-hover-bg', light: '#f2f5fc', dark: '#383838', description: values.colors['hover-content'] }, + { name: '$huawei-bg', newName: '$devui-base-bg-dark', light: '#333854', dark: '#222222', description: values.colors['huawei-bg'] }, + { name: '$huawei-red', newName: '$devui-contrast', light: '#C7000B', dark: '#C7000B', description: values.colors['huawei-red'] }, + { name: '$icon-gray-bg', newName: '$devui-icon-fill', light: '#e3e5e9', dark: '#606061', description: values.colors['icon-gray-bg'] }, + { name: '$link', newName: '$devui-link', light: '#526ecc', dark: '#526ECC', description: values.colors['link'] }, + { name: '$link-light', newName: '$devui-link-light', light: '#96adfa', dark: '#96adfa', description: values.colors['link-light'] }, + { name: '$status-red', newName: '$devui-danger', light: '#f66f6a', dark: '#F66F6A', description: values.colors['status-red'] }, + { name: '$status-yellow', newName: '$devui-warning', light: '#fac20a', dark: '#FA9841', description: values.colors['status-yellow'] }, + { name: '$status-waiting', newName: '$devui-waiting', light: '#9faad7', dark: '#9faad7', description: values.colors['status-waiting'] }, + { name: '$status-green', newName: '$devui-success', light: '#50d4ab', dark: '#3DCCA6', description: values.colors['status-green'] }, + { name: '$status-blue', newName: '$devui-info', light: '#5e7ce0', dark: '#5E7CE0', description: values.colors['status-blue'] }, + { name: '$status-initial', newName: '$devui-initial', light: '#e9edfa', dark: '#E8F0FD', description: values.colors['status-initial'] }, + { name: '$status-unavaliable', newName: '$devui-unavailable', light: '#f5f5f6', dark: '#202124', + description: values.colors['status-unavaliable'] }, + { name: '$strip-color', newName: '$devui-list-item-strip-bg', light: '#f2f5fc', dark: 'rgba(52, 54, 58, 0.5)', + description: values.colors['strip-color'] }, + { name: '$tag-label-bgcolor', newName: '$devui-label-bg', light: '#eef0f5', dark: '#46443F', description: values.colors['tag-label-bgcolor'] }, + { name: '$hwc-status-danger-border', newName: '$devui-danger-line', light: '#ffa4a1', dark: '#985C5A', + description: values.colors['hwc-status-danger-border'] }, + { name: '$hwc-status-danger-background', newName: '$devui-danger-bg', light: '#ffeeed', dark: '#4B3A39', + description: values.colors['hwc-status-danger-background'] }, + { name: '$hwc-status-warning-border', newName: '$devui-warning-line', light: '#fa9841', dark: '#8D6138', + description: values.colors['hwc-status-warning-border'] }, + { name: '$hwc-status-warning-background', newName: '$devui-warning-bg', light: '#fff3e8', dark: '#554434', + description: values.colors['hwc-status-warning-background'] }, + { name: '$hwc-status-info-border', newName: '$devui-info-line', light: '#5e7ce0', dark: '#546BB7', + description: values.colors['hwc-status-info-border'] }, + { name: '$hwc-status-info-background', newName: '$devui-info-bg', light: '#f2f5fc', dark: '#383D4F', + description: values.colors['hwc-status-info-background'] }, + { name: '$hwc-status-success-border', newName: '$devui-success-line', light: '#50d4ab', dark: '#5D887D', + description: values.colors['hwc-status-success-border'] }, + { name: '$hwc-status-success-background', newName: '$devui-success-bg', light: '#edfff9', dark: '#304642', + description: values.colors['hwc-status-success-background'] }, + { name: '$hwc-feedback-overlay-background', newName: '$devui-feedback-overlay-bg', light: '#464d6e', dark: '#4C4C4C', + description: values.colors['hwc-feedback-overlay-background'] }, + { name: '$hwc-feedback-overlay-font-color', newName: '$devui-feedback-overlay-text', light: '#dfe1e6', dark: '#DFE1E6', + description: values.colors['hwc-feedback-overlay-font-color'] }, + { name: '$color-bg-primary', newName: '$devui-primary', light: '#f66f6a', dark: '#F66F6A', description: values.colors['color-bg-primary'] }, + { name: '$color-bg-primary-hover', newName: '$devui-primary-hover', light: '#ff8b87', dark: '#FF8B87', description: values.colors['color-bg-primary-hover'] }, + { name: '$color-bg-primary-active', newName: '$devui-primary-active', light: '#de504e', dark: '#DE504E', description: values.colors['color-bg-primary-active'] }, + { name: '$hwc-drop-down-search', newName: '$devui-embed-search-bg', light: '#f2f5fc', dark: '#F2F5FC', description: values.colors['hwc-drop-down-search'] }, + { name: '$hwc-drop-down-search-hover', newName: '$devui-embed-search-bg-hover', light: '#eef0f5', dark: '#EEF0F5', + description: values.colors['hwc-drop-down-search-hover'] }, + { name: '$disabled-bg', newName: '$devui-disabled-bg', light: '#f5f5f6', dark: '#3d3e44', description: values.colors['disabled-bg'] }, + { name: '$disabled-border', newName: '$devui-disabled-line', light: '#dfe1e6', dark: '#505153', description: values.colors['disabled-border'] }, + { name: '$disabled-content', newName: '$devui-disabled-text', light: '#adb0b8', dark: '#7D7D7D', description: values.colors['disabled-content'] }, + ]; + + this.setDataList(); + } + + setDataList() { + const currentDataList = this.activeTab === 'tab1' ? 'colorSource' : 'colors'; + const result = []; + this.catalogs.forEach((catalog, catalogIndex) => { + result.push(catalog); + if (catalog.expand && !this.catalogs[catalogIndex + 1]?.hasOwnProperty('description')) { + const insertItems = this[currentDataList].filter(color => color.type === catalog.type); + result.push(...insertItems); + } + }); + this.catalogs = result; + } + + ngOnDestroy() { + if (this.subs) { + this.subs.unsubscribe(); + } + } +} diff --git a/devui/design-token/color/demo/design-color-demo.component.html b/devui/design-token/color/demo/design-color-demo.component.html new file mode 100644 index 00000000..8b9f54c9 --- /dev/null +++ b/devui/design-token/color/demo/design-color-demo.component.html @@ -0,0 +1,12 @@ +
    + +
    +
    {{ 'components.design-color.colorDemo.title' | translate }}
    +
    + {{ 'components.design-color.colorDemo.description1' | translate }}
    + {{ 'components.design-color.colorDemo.description2' | translate }}
    + {{ 'components.design-color.colorDemo.description3' | translate }} +
    + +
    +
    diff --git a/devui/design-token/color/demo/design-color-demo.component.ts b/devui/design-token/color/demo/design-color-demo.component.ts new file mode 100644 index 00000000..58383a96 --- /dev/null +++ b/devui/design-token/color/demo/design-color-demo.component.ts @@ -0,0 +1,41 @@ +import { Component, OnDestroy, OnInit } from '@angular/core'; +import { TranslateService, TranslationChangeEvent } from '@ngx-translate/core'; +import { Subscription } from 'rxjs'; + +@Component({ + selector: 'd-design-color-demo', + templateUrl: './design-color-demo.component.html' +}) +export class DesignColorDemoComponent implements OnInit, OnDestroy { + navItems = []; + subs: Subscription = new Subscription(); + constructor(private translate: TranslateService) {} + + ngOnInit() { + this.subs.add( + this.translate.get('components.design-color.anchorLinkValues').subscribe((res) => { + this.setNavValues(res); + }) + ); + + this.subs.add( + this.translate.onLangChange.subscribe((event: TranslationChangeEvent) => { + const values = this.translate.instant('components.design-color.anchorLinkValues'); + this.setNavValues(values); + }) + ); + } + + setNavValues(values) { + this.navItems = [ + { dAnchorLink: 'color', value: values['color'] } + ]; + } + + ngOnDestroy() { + if (this.subs) { + this.subs.unsubscribe(); + } + } + +} diff --git a/devui/design-token/color/demo/design-color-demo.module.ts b/devui/design-token/color/demo/design-color-demo.module.ts new file mode 100644 index 00000000..d8503340 --- /dev/null +++ b/devui/design-token/color/demo/design-color-demo.module.ts @@ -0,0 +1,33 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { TranslateModule } from '@ngx-translate/core'; +import { DataTableModule } from 'ng-devui/data-table'; +import { DevUIApiComponent } from 'ng-devui/shared/devui-api/devui-api.component'; +import { DevUIApiModule } from 'ng-devui/shared/devui-api/devui-api.module'; +import { DevUICodeboxModule } from 'ng-devui/shared/devui-codebox'; +import { TabsModule } from 'ng-devui/tabs'; +import { DDemoNavModule } from 'src/app/component/d-demo-nav.module'; +import { ColorComponent } from './color/color.component'; +import { DesignColorDemoComponent } from './design-color-demo.component'; +@NgModule({ + declarations: [DesignColorDemoComponent, ColorComponent], + imports: [ + TranslateModule, + CommonModule, + DevUIApiModule, + DevUICodeboxModule, + DataTableModule, + DDemoNavModule, + TabsModule, + RouterModule.forChild([ + { path: '', redirectTo: 'demo' }, + { path: 'demo', component: DesignColorDemoComponent}, + { path: 'api', component: DevUIApiComponent, data: { + 'zh-cn': require('!html-loader!markdown-loader!../doc/api-cn.md'), + 'en-us': require('!html-loader!markdown-loader!../doc/api-en.md') + }} + ]) + ] +}) +export class DesignColorDemoModule { } diff --git a/devui/design-token/color/doc/api-cn.md b/devui/design-token/color/doc/api-cn.md new file mode 100644 index 00000000..b6d572fb --- /dev/null +++ b/devui/design-token/color/doc/api-cn.md @@ -0,0 +1 @@ +具体使用方式参考demo及描述信息 \ No newline at end of file diff --git a/devui/design-token/color/doc/api-en.md b/devui/design-token/color/doc/api-en.md new file mode 100644 index 00000000..49bd13e8 --- /dev/null +++ b/devui/design-token/color/doc/api-en.md @@ -0,0 +1 @@ +For details, please see the demo and description. \ No newline at end of file diff --git a/devui/design-token/font/demo/design-font-demo.component.html b/devui/design-token/font/demo/design-font-demo.component.html new file mode 100644 index 00000000..348b8f29 --- /dev/null +++ b/devui/design-token/font/demo/design-font-demo.component.html @@ -0,0 +1,12 @@ +
    + +
    +
    {{ 'components.design-font.fontDemo.title' | translate }}
    +
    + {{ 'components.design-font.fontDemo.description1' | translate }}
    + {{ 'components.design-font.fontDemo.description2' | translate }}
    + {{ 'components.design-font.fontDemo.description3' | translate }} +
    + +
    +
    diff --git a/devui/design-token/font/demo/design-font-demo.component.ts b/devui/design-token/font/demo/design-font-demo.component.ts new file mode 100644 index 00000000..a65c4c30 --- /dev/null +++ b/devui/design-token/font/demo/design-font-demo.component.ts @@ -0,0 +1,41 @@ +import { Component, OnDestroy, OnInit } from '@angular/core'; +import { TranslateService, TranslationChangeEvent } from '@ngx-translate/core'; +import { Subscription } from 'rxjs'; + +@Component({ + selector: 'd-design-font-demo', + templateUrl: './design-font-demo.component.html' +}) +export class DesignFontDemoComponent implements OnInit, OnDestroy { + navItems = []; + subs: Subscription = new Subscription(); + constructor(private translate: TranslateService) {} + + ngOnInit() { + this.subs.add( + this.translate.get('components.design-font.anchorLinkValues').subscribe((res) => { + this.setNavValues(res); + }) + ); + + this.subs.add( + this.translate.onLangChange.subscribe((event: TranslationChangeEvent) => { + const values = this.translate.instant('components.design-font.anchorLinkValues'); + this.setNavValues(values); + }) + ); + } + + setNavValues(values) { + this.navItems = [ + { dAnchorLink: 'font', value: values['font'] } + ]; + } + + ngOnDestroy() { + if (this.subs) { + this.subs.unsubscribe(); + } + } + +} diff --git a/devui/design-token/font/demo/design-font-demo.module.ts b/devui/design-token/font/demo/design-font-demo.module.ts new file mode 100644 index 00000000..b64880bc --- /dev/null +++ b/devui/design-token/font/demo/design-font-demo.module.ts @@ -0,0 +1,33 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { TranslateModule } from '@ngx-translate/core'; +import { DataTableModule } from 'ng-devui/data-table'; +import { DevUIApiComponent } from 'ng-devui/shared/devui-api/devui-api.component'; +import { DevUIApiModule } from 'ng-devui/shared/devui-api/devui-api.module'; +import { DevUICodeboxModule } from 'ng-devui/shared/devui-codebox'; +import { TabsModule } from 'ng-devui/tabs'; +import { DDemoNavModule } from 'src/app/component/d-demo-nav.module'; +import { DesignFontDemoComponent } from './design-font-demo.component'; +import { FontComponent } from './font/font.component'; +@NgModule({ + declarations: [DesignFontDemoComponent, FontComponent], + imports: [ + TranslateModule, + CommonModule, + DevUIApiModule, + DevUICodeboxModule, + DataTableModule, + DDemoNavModule, + TabsModule, + RouterModule.forChild([ + { path: '', redirectTo: 'demo' }, + { path: 'demo', component: DesignFontDemoComponent}, + { path: 'api', component: DevUIApiComponent, data: { + 'zh-cn': require('!html-loader!markdown-loader!../doc/api-cn.md'), + 'en-us': require('!html-loader!markdown-loader!../doc/api-en.md') + }} + ]) + ] +}) +export class DesignFontDemoModule { } diff --git a/devui/design-token/font/demo/font/font.component.html b/devui/design-token/font/demo/font/font.component.html new file mode 100644 index 00000000..277599bc --- /dev/null +++ b/devui/design-token/font/demo/font/font.component.html @@ -0,0 +1,60 @@ +

    {{ 'components.design-font.fontDemo.instance.title' | translate }}

    + +
    + {{ 'components.design-font.fontDemo.instance.description1' | translate }} +
    +
    + {{ 'components.design-font.fontDemo.instance.description2' | translate }} +
    + +

    {{ 'components.design-font.fontDemo.instance.tableTitle' | translate }}

    + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/devui/design-token/font/demo/font/font.component.scss b/devui/design-token/font/demo/font/font.component.scss new file mode 100644 index 00000000..c9eac8da --- /dev/null +++ b/devui/design-token/font/demo/font/font.component.scss @@ -0,0 +1,13 @@ +@import '~ng-devui/styles-var/devui-var.scss'; + +.page-first-card-title { + font-size: $devui-font-size-page-title; + line-height: $devui-line-height-base; + font-weight: $devui-font-title-weight; +} + +.content { + font-size: $devui-font-size; + line-height: $devui-line-height-base; + font-weight: $devui-font-content-weight; +} diff --git a/devui/design-token/font/demo/font/font.component.ts b/devui/design-token/font/demo/font/font.component.ts new file mode 100644 index 00000000..0a990be6 --- /dev/null +++ b/devui/design-token/font/demo/font/font.component.ts @@ -0,0 +1,72 @@ +import { Component, OnDestroy, OnInit } from '@angular/core'; +import { TranslateService, TranslationChangeEvent } from '@ngx-translate/core'; +import { Subscription } from 'rxjs'; + +@Component({ + selector: 'd-font', + templateUrl: './font.component.html', + styleUrls: ['./font.component.scss'] +}) +export class FontComponent implements OnInit, OnDestroy { + subs: Subscription = new Subscription(); + fonts = []; + + oldFonts = []; + + activeTab = 'curFont'; + + constructor(private translate: TranslateService) { } + + ngOnInit() { + this.setI18n(); + } + + setI18n() { + this.subs.add( + this.translate.get('components.design-font.fontDemo.instance').subscribe((res) => { + this.setValues(res); + }) + ); + + this.subs.add( + this.translate.onLangChange.subscribe((event: TranslationChangeEvent) => { + const values = this.translate.instant('components.design-font.fontDemo.instance'); + this.setValues(values); + }) + ); + } + + setValues(values) { + this.fonts = [ + { name: '$devui-font-size-data-overview', value: '24px', description: values.fonts['devui-font-size-data-overview'] }, + { name: '$devui-font-size-price', value: '20px', description: values.fonts['devui-font-size-price'] }, + { name: '$devui-font-size-modal-title', value: '18px', description: values.fonts['devui-font-size-modal-title'] }, + { name: '$devui-font-size-page-title', value: '16px', description: values.fonts['devui-font-size-page-title'] }, + { name: '$devui-font-size-card-title', value: '14px', description: values.fonts['devui-font-size-card-title'] }, + { name: '$devui-font-size', value: '12px', description: values.fonts['devui-font-size'] }, + { name: '$devui-font-size-icon', value: '16px', description: values.fonts['devui-font-size-icon'] }, + { name: '$devui-font-size-sm', value: '12px', description: values.fonts['devui-font-size-sm'] }, + { name: '$devui-font-size-md', value: '12px', description: values.fonts['devui-font-size-md'] }, + { name: '$devui-font-size-lg', value: '14px', description: values.fonts['devui-font-size-lg'] }, + { name: '$devui-font-title-weight', value: 'bold', description: values.fonts['devui-font-title-weight'] }, + { name: '$devui-font-content-weight', value: 'normal', description: values.fonts['devui-font-content-weight'] }, + { name: '$devui-line-height-base', value: '1.5', description: values.fonts['devui-line-height-base'] }, + ]; + + this.oldFonts = [ + { name: '$font-size-modal-title', newName: '$devui-font-size-modal-title', value: '18px', description: values.oldFonts['font-size-modal-title'] }, + { name: '$font-size-primary', newName: '$devui-font-size-page-title', value: '16px', description: values.oldFonts['font-size-primary'] }, + { name: '$font-size-secondary-card-title', newName: '$devui-font-size-card-title', value: '14px', description: values.oldFonts['font-size-secondary-card-title'] }, + { name: '$font-size-base', value: '12px', newName: '$devui-font-size', description: values.oldFonts['font-size-base'] }, + { name: '$font-title-weight', value: 'bold', newName: '$devui-font-title-weight', description: values.oldFonts['font-title-weight'] }, + { name: '$font-content-weight', value: 'normal', newName: '$devui-font-content-weight', description: values.oldFonts['font-content-weight'] }, + { name: '$line-height-base', value: '1.5', newName: '$devui-line-height-base', description: values.oldFonts['line-height-base'] }, + ]; + } + + ngOnDestroy() { + if (this.subs) { + this.subs.unsubscribe(); + } + } +} diff --git a/devui/design-token/font/doc/api-cn.md b/devui/design-token/font/doc/api-cn.md new file mode 100644 index 00000000..b6d572fb --- /dev/null +++ b/devui/design-token/font/doc/api-cn.md @@ -0,0 +1 @@ +具体使用方式参考demo及描述信息 \ No newline at end of file diff --git a/devui/design-token/font/doc/api-en.md b/devui/design-token/font/doc/api-en.md new file mode 100644 index 00000000..49bd13e8 --- /dev/null +++ b/devui/design-token/font/doc/api-en.md @@ -0,0 +1 @@ +For details, please see the demo and description. \ No newline at end of file diff --git a/devui/design-token/link/demo/design-link-demo.component.html b/devui/design-token/link/demo/design-link-demo.component.html new file mode 100644 index 00000000..81a453f9 --- /dev/null +++ b/devui/design-token/link/demo/design-link-demo.component.html @@ -0,0 +1,13 @@ +
    + +
    +
    {{ 'components.design-link.hrefDemo.title' | translate }}
    +
    + {{ 'components.design-link.hrefDemo.description1' | translate }}
    + {{ 'components.design-link.hrefDemo.description2' | translate }} +
    + + + +
    +
    diff --git a/devui/design-token/link/demo/design-link-demo.component.ts b/devui/design-token/link/demo/design-link-demo.component.ts new file mode 100644 index 00000000..e5f0e7da --- /dev/null +++ b/devui/design-token/link/demo/design-link-demo.component.ts @@ -0,0 +1,47 @@ +import { Component, OnDestroy, OnInit } from '@angular/core'; +import { TranslateService, TranslationChangeEvent } from '@ngx-translate/core'; +import { DevuiSourceData } from 'ng-devui/shared/devui-codebox'; +import { Subscription } from 'rxjs'; + +@Component({ + selector: 'd-design-link-demo', + templateUrl: './design-link-demo.component.html' +}) +export class DesignLinkDemoComponent implements OnInit, OnDestroy { + LinkSource: Array = [ + { title: 'HTML', language: 'xml', code: require('!!raw-loader!./link/link.component.html') }, + { title: 'TS', language: 'typescript', code: require('!!raw-loader!./link/link.component.ts') } + ]; + + navItems = []; + subs: Subscription = new Subscription(); + constructor(private translate: TranslateService) {} + + ngOnInit() { + this.subs.add( + this.translate.get('components.design-link.anchorLinkValues').subscribe((res) => { + this.setNavValues(res); + }) + ); + + this.subs.add( + this.translate.onLangChange.subscribe((event: TranslationChangeEvent) => { + const values = this.translate.instant('components.design-link.anchorLinkValues'); + this.setNavValues(values); + }) + ); + } + + setNavValues(values) { + this.navItems = [ + { dAnchorLink: 'href-a', value: values['href-a'] } + ]; + } + + ngOnDestroy() { + if (this.subs) { + this.subs.unsubscribe(); + } + } + +} diff --git a/devui/design-token/link/demo/design-link-demo.module.ts b/devui/design-token/link/demo/design-link-demo.module.ts new file mode 100644 index 00000000..ac117754 --- /dev/null +++ b/devui/design-token/link/demo/design-link-demo.module.ts @@ -0,0 +1,33 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { TranslateModule } from '@ngx-translate/core'; +import { DataTableModule } from 'ng-devui/data-table'; +import { DevUIApiComponent } from 'ng-devui/shared/devui-api/devui-api.component'; +import { DevUIApiModule } from 'ng-devui/shared/devui-api/devui-api.module'; +import { DevUICodeboxModule } from 'ng-devui/shared/devui-codebox'; +import { TabsModule } from 'ng-devui/tabs'; +import { DDemoNavModule } from 'src/app/component/d-demo-nav.module'; +import { DesignLinkDemoComponent } from './design-link-demo.component'; +import { LinkComponent } from './link/link.component'; +@NgModule({ + declarations: [DesignLinkDemoComponent, LinkComponent], + imports: [ + TranslateModule, + CommonModule, + DevUIApiModule, + DevUICodeboxModule, + DataTableModule, + DDemoNavModule, + TabsModule, + RouterModule.forChild([ + { path: '', redirectTo: 'demo' }, + { path: 'demo', component: DesignLinkDemoComponent}, + { path: 'api', component: DevUIApiComponent, data: { + 'zh-cn': require('!html-loader!markdown-loader!../doc/api-cn.md'), + 'en-us': require('!html-loader!markdown-loader!../doc/api-en.md') + }} + ]) + ] +}) +export class DesignLinkDemoModule { } diff --git a/devui/design-token/link/demo/link/link.component.html b/devui/design-token/link/demo/link/link.component.html new file mode 100644 index 00000000..c11af79e --- /dev/null +++ b/devui/design-token/link/demo/link/link.component.html @@ -0,0 +1,13 @@ +
    + link +
    +
    + 链接 +
    +
    + + diff --git a/devui/design-token/link/demo/link/link.component.ts b/devui/design-token/link/demo/link/link.component.ts new file mode 100644 index 00000000..b888d381 --- /dev/null +++ b/devui/design-token/link/demo/link/link.component.ts @@ -0,0 +1,11 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'd-link', + templateUrl: './link.component.html' +}) +export class LinkComponent { + + constructor() { } + +} diff --git a/devui/design-token/link/doc/api-cn.md b/devui/design-token/link/doc/api-cn.md new file mode 100644 index 00000000..b6d572fb --- /dev/null +++ b/devui/design-token/link/doc/api-cn.md @@ -0,0 +1 @@ +具体使用方式参考demo及描述信息 \ No newline at end of file diff --git a/devui/design-token/link/doc/api-en.md b/devui/design-token/link/doc/api-en.md new file mode 100644 index 00000000..49bd13e8 --- /dev/null +++ b/devui/design-token/link/doc/api-en.md @@ -0,0 +1 @@ +For details, please see the demo and description. \ No newline at end of file diff --git a/devui/design-token/shadow/demo/design-shadow-demo.component.html b/devui/design-token/shadow/demo/design-shadow-demo.component.html new file mode 100644 index 00000000..84ee8874 --- /dev/null +++ b/devui/design-token/shadow/demo/design-shadow-demo.component.html @@ -0,0 +1,12 @@ +
    + +
    +
    {{ 'components.design-shadow.shadowDemo.title' | translate }}
    +
    + {{ 'components.design-shadow.shadowDemo.description1' | translate }}
    + {{ 'components.design-shadow.shadowDemo.description2' | translate }}
    + {{ 'components.design-shadow.shadowDemo.description3' | translate }} +
    + +
    +
    diff --git a/devui/design-token/shadow/demo/design-shadow-demo.component.ts b/devui/design-token/shadow/demo/design-shadow-demo.component.ts new file mode 100644 index 00000000..cea3e81d --- /dev/null +++ b/devui/design-token/shadow/demo/design-shadow-demo.component.ts @@ -0,0 +1,41 @@ +import { Component, OnDestroy, OnInit } from '@angular/core'; +import { TranslateService, TranslationChangeEvent } from '@ngx-translate/core'; +import { Subscription } from 'rxjs'; + +@Component({ + selector: 'd-design-shadow-demo', + templateUrl: './design-shadow-demo.component.html' +}) +export class DesignShadowDemoComponent implements OnInit, OnDestroy { + navItems = []; + subs: Subscription = new Subscription(); + constructor(private translate: TranslateService) {} + + ngOnInit() { + this.subs.add( + this.translate.get('components.design-shadow.anchorLinkValues').subscribe((res) => { + this.setNavValues(res); + }) + ); + + this.subs.add( + this.translate.onLangChange.subscribe((event: TranslationChangeEvent) => { + const values = this.translate.instant('components.design-shadow.anchorLinkValues'); + this.setNavValues(values); + }) + ); + } + + setNavValues(values) { + this.navItems = [ + { dAnchorLink: 'shadow', value: values['shadow'] } + ]; + } + + ngOnDestroy() { + if (this.subs) { + this.subs.unsubscribe(); + } + } + +} diff --git a/devui/design-token/shadow/demo/design-shadow-demo.module.ts b/devui/design-token/shadow/demo/design-shadow-demo.module.ts new file mode 100644 index 00000000..a94f94d8 --- /dev/null +++ b/devui/design-token/shadow/demo/design-shadow-demo.module.ts @@ -0,0 +1,33 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { TranslateModule } from '@ngx-translate/core'; +import { DataTableModule } from 'ng-devui/data-table'; +import { DevUIApiComponent } from 'ng-devui/shared/devui-api/devui-api.component'; +import { DevUIApiModule } from 'ng-devui/shared/devui-api/devui-api.module'; +import { DevUICodeboxModule } from 'ng-devui/shared/devui-codebox'; +import { TabsModule } from 'ng-devui/tabs'; +import { DDemoNavModule } from 'src/app/component/d-demo-nav.module'; +import { DesignShadowDemoComponent } from './design-shadow-demo.component'; +import { ShadowComponent } from './shadow/shadow.component'; +@NgModule({ + declarations: [DesignShadowDemoComponent, ShadowComponent], + imports: [ + TranslateModule, + CommonModule, + DevUIApiModule, + DevUICodeboxModule, + DataTableModule, + DDemoNavModule, + TabsModule, + RouterModule.forChild([ + { path: '', redirectTo: 'demo' }, + { path: 'demo', component: DesignShadowDemoComponent}, + { path: 'api', component: DevUIApiComponent, data: { + 'zh-cn': require('!html-loader!markdown-loader!../doc/api-cn.md'), + 'en-us': require('!html-loader!markdown-loader!../doc/api-en.md') + }} + ]) + ] +}) +export class DesignShadowDemoModule { } diff --git a/devui/design-token/shadow/demo/shadow/shadow.component.html b/devui/design-token/shadow/demo/shadow/shadow.component.html new file mode 100644 index 00000000..6deb2021 --- /dev/null +++ b/devui/design-token/shadow/demo/shadow/shadow.component.html @@ -0,0 +1,58 @@ +

    {{ 'components.design-shadow.shadowDemo.instance.title' | translate }}

    +
    + +

    {{ 'components.design-shadow.shadowDemo.instance.description' | translate }}

    + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/devui/design-token/shadow/demo/shadow/shadow.component.scss b/devui/design-token/shadow/demo/shadow/shadow.component.scss new file mode 100644 index 00000000..f2323914 --- /dev/null +++ b/devui/design-token/shadow/demo/shadow/shadow.component.scss @@ -0,0 +1,7 @@ +@import '~ng-devui/styles-var/devui-var.scss'; + +.modal { + height: 100px; + width: 100px; + box-shadow: $devui-shadow-length-fullscreen-overlay $devui-light-shadow; +} diff --git a/devui/design-token/shadow/demo/shadow/shadow.component.ts b/devui/design-token/shadow/demo/shadow/shadow.component.ts new file mode 100644 index 00000000..22a8e0fd --- /dev/null +++ b/devui/design-token/shadow/demo/shadow/shadow.component.ts @@ -0,0 +1,84 @@ +import { Component, OnDestroy, OnInit } from '@angular/core'; +import { TranslateService, TranslationChangeEvent } from '@ngx-translate/core'; +import { Subscription } from 'rxjs'; + +@Component({ + selector: 'd-shadow', + templateUrl: './shadow.component.html', + styleUrls: ['./shadow.component.scss'] +}) +export class ShadowComponent implements OnInit, OnDestroy { + subs: Subscription = new Subscription(); + shadows = []; + oldShadows = []; + + activeTab = 'curShadow'; + + constructor(private translate: TranslateService) { } + + ngOnInit() { + this.setI18n(); + } + + setI18n() { + this.subs.add( + this.translate.get('components.design-shadow.shadowDemo.instance').subscribe((res) => { + this.setValues(res); + }) + ); + + this.subs.add( + this.translate.onLangChange.subscribe((event: TranslationChangeEvent) => { + const values = this.translate.instant('components.design-shadow.shadowDemo.instance'); + this.setValues(values); + }) + ); + } + + setValues(values) { + this.shadows = [ + { name: '$devui-shadow-length-base', value: '0 1px 4px 0', description: values.shadows['devui-shadow-length-base'] }, + { name: '$devui-shadow-length-slide-left', value: '-2px 0 8px 0', description: values.shadows['devui-shadow-length-slide-left'] }, + { name: '$devui-shadow-length-slide-right', value: '2px 0 8px 0', description: values.shadows['devui-shadow-length-slide-right'] }, + { name: '$devui-shadow-length-connected-overlay', value: '0 2px 8px 0', description: values.shadows['devui-shadow-length-connected-overlay'] }, + { name: '$devui-shadow-length-hover', value: '0 4px 16px 0', description: values.shadows['devui-shadow-length-hover'] }, + { name: '$devui-shadow-length-feedback-overlay', value: '0 4px 16px 0', description: values.shadows['devui-shadow-length-feedback-overlay'] }, + { name: '$devui-shadow-length-fullscreen-overlay', value: '0 8px 40px 0', description: values.shadows['devui-shadow-length-fullscreen-overlay'] }, + ]; + + this.oldShadows = [ + { name: '$hwc-shadow-1', newName: '$devui-shadow-length-base $devui-light-shadow', + value: '0 1px 3px 0 rbga(0, 0, 0, 0.1)', description: values.oldShadows['hwc-shadow-1'] }, + { name: '$hwc-shadow-2', newName: '$devui-shadow-length-connected-overlay $devui-shadow', + value: '0 2px 5px 0 rgba(0, 0, 0, 0.2)', description: values.oldShadows['hwc-shadow-2'] }, + { name: '$hwc-shadow-3', newName: '$devui-shadow-length-feedback-overlay $devui-shadow', + value: '0 4px 8px 0 rgba(0, 0, 0, 0.2)', description: values.oldShadows['hwc-shadow-3'] }, + { name: '$hwc-shadow-4', newName: '$devui-shadow-length-hover $devui-shadow', + value: '0 2px 8px 0 rgba(94, 124, 224, 0.3)', description: values.oldShadows['hwc-shadow-4'] }, + { name: '$hwc-shadow-5', newName: '$devui-shadow-length-connected-overlay $devui-light-shadow', + value: '0 0 6px 0 rgba(0, 0, 0, 0.1)', description: values.oldShadows['hwc-shadow-5'] }, + { name: '$hwc-shadow-6', newName: '$devui-shadow-length-base $devui-light-shadow', + value: '0 8px 6px -4px rgba(199, 54, 54, 0.4)', description: values.oldShadows['hwc-shadow-6'] }, + { name: '$hwc-shadow-7', newName: '$devui-shadow-length-fullscreen-overlay $devui-light-shadow', + value: '0 10px 40px 0 rgba(0, 0, 0, 0.1)', description: values.oldShadows['hwc-shadow-7'] }, + { name: '$hwc-shadow-8', newName: '$devui-shadow-length-base $devui-light-shadow', + value: '0 1px 2px 0 rgba(57, 71, 166, 0.5)', description: values.oldShadows['hwc-shadow-8'] }, + { name: '$hwc-shadow-error', newName: '$devui-shadow-length-base $devui-danger', + value: '0 1px 3px 0 rgba(199, 54, 54, 0.25)', description: values.oldShadows['hwc-shadow-error'] }, + { name: '$hwc-shadow-warn', newName: '$devui-shadow-length-base $devui-warning', + value: ' 0 1px 3px 0 rgba(204, 100, 20, 0.25)', description: values.oldShadows['hwc-shadow-warn'] }, + { name: '$hwc-shadow-prompt', newName: '$devui-shadow-length-base $devui-info', + value: '0 1px 3px 0 rgba(70, 94, 184, 0.25)', description: values.oldShadows['hwc-shadow-prompt'] }, + { name: '$hwc-shadow-success', newName: '$devui-shadow-length-base $devui-success', + value: '0 1px 3px 0 rgba(39, 176, 128, 0.25)', description: values.oldShadows['hwc-shadow-success'] }, + { name: '$hwc-shadow-dark', newName: '$devui-shadow-length-feedback-overlay $devui-shadow', + value: '0 5px 8px 0 rgba(70, 77, 110, 0.25)', description: values.oldShadows['hwc-shadow-dark'] } + ]; + } + + ngOnDestroy() { + if (this.subs) { + this.subs.unsubscribe(); + } + } +} diff --git a/devui/design-token/shadow/doc/api-cn.md b/devui/design-token/shadow/doc/api-cn.md new file mode 100644 index 00000000..b6d572fb --- /dev/null +++ b/devui/design-token/shadow/doc/api-cn.md @@ -0,0 +1 @@ +具体使用方式参考demo及描述信息 \ No newline at end of file diff --git a/devui/design-token/shadow/doc/api-en.md b/devui/design-token/shadow/doc/api-en.md new file mode 100644 index 00000000..49bd13e8 --- /dev/null +++ b/devui/design-token/shadow/doc/api-en.md @@ -0,0 +1 @@ +For details, please see the demo and description. \ No newline at end of file diff --git a/devui/devui.module.ts b/devui/devui.module.ts index 66ad193d..c67d870f 100755 --- a/devui/devui.module.ts +++ b/devui/devui.module.ts @@ -27,6 +27,7 @@ import { ImagePreviewModule } from 'ng-devui/image-preview'; import { InputNumberModule } from 'ng-devui/input-number'; import { LayoutModule } from 'ng-devui/layout'; import { LoadingModule } from 'ng-devui/loading'; +import { MentionModule } from 'ng-devui/mention'; import { ModalModule } from 'ng-devui/modal'; import { MultiAutoCompleteModule } from 'ng-devui/multi-auto-complete'; import { NavSpriteModule } from 'ng-devui/nav-sprite'; @@ -88,6 +89,7 @@ export * from 'ng-devui/image-preview'; export * from 'ng-devui/input-number'; export * from 'ng-devui/layout'; export * from 'ng-devui/loading'; +export * from 'ng-devui/mention'; export * from 'ng-devui/modal'; export * from 'ng-devui/multi-auto-complete'; export * from 'ng-devui/nav-sprite'; @@ -185,6 +187,7 @@ export * from './version'; TimePickerModule, CascaderModule, CategorySearchModule, + MentionModule, NavSpriteModule, ReadTipModule, ], diff --git a/devui/dragdrop/demo/basic/basic.component.scss b/devui/dragdrop/demo/basic/basic.component.scss index 6d426c39..b850e398 100644 --- a/devui/dragdrop/demo/basic/basic.component.scss +++ b/devui/dragdrop/demo/basic/basic.component.scss @@ -72,6 +72,6 @@ li.list-group-item.disabled { border-color: $devui-line; - color: $devui-line; + color: $devui-disabled-text; background-color: $devui-disabled-bg; } diff --git a/devui/dragdrop/demo/dragdrop-demo.module.ts b/devui/dragdrop/demo/dragdrop-demo.module.ts index 346dcbb2..a81f5338 100755 --- a/devui/dragdrop/demo/dragdrop-demo.module.ts +++ b/devui/dragdrop/demo/dragdrop-demo.module.ts @@ -3,14 +3,13 @@ import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; import { TranslateModule } from '@ngx-translate/core'; - import { ButtonModule } from 'ng-devui/button'; +import { DragDropModule } from 'ng-devui/dragdrop'; import { DevUIApiComponent } from 'ng-devui/shared/devui-api/devui-api.component'; import { DevUIApiModule } from 'ng-devui/shared/devui-api/devui-api.module'; import { DevUICodeboxModule } from 'ng-devui/shared/devui-codebox/devui-codebox.module'; import { ToggleModule } from 'ng-devui/toggle'; import { DDemoNavModule } from 'src/app/component/d-demo-nav.module'; -import { DragDropModule } from '../drag-drop.module'; import { BasicComponent } from './basic/basic.component'; import { BatchDragComponent } from './batch-drag/batch-drag.component'; import { CrossDimensionComponent } from './cross-dimension/cross-dimension.component'; @@ -55,7 +54,7 @@ import { TreeComponent } from './tree/tree.component'; DropScrollComponent, CrossDimensionComponent ], - + }) export class DragDropDemoModule { } diff --git a/devui/dragdrop/doc/api-cn.md b/devui/dragdrop/doc/api-cn.md index 4038dc9e..4b5074aa 100644 --- a/devui/dragdrop/doc/api-cn.md +++ b/devui/dragdrop/doc/api-cn.md @@ -14,25 +14,26 @@ import { DragDropModule } from 'ng-devui/dragdrop'; ### dDraggable 参数 -| 参数 | 类型 | 默认值 | 描述 | 跳转 Demo |全局配置项| -| :----------------: | :---------------------------- | :--------------------------------------------------------------------------------------------------------------- | :-------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------ | -| dragData | `any` | -- | 可选，转递给 `DropEvent`事件的数据. | [基本用法](demo#basic-usage) | -| dragScope | `string \| Array` | 'default' | 可选，限制 drop 的位置，必须匹配对应的 `dropScope` | [基本用法](demo#basic-usage) | -| dragOverClass | `string` | -- | 可选，拖动时被拖动元素的 css | [拖拽实体元素跟随](demo#drag-entity-elements-to-follow) | -| dragHandleClass | `string` | -- | 可选，拖动句柄，css 选择器，只有被选中的元素才能响应拖动事件 | [基本用法](demo#basic-usage) | -| disabled | `boolean` | false | 可选，控制当前元素是否可拖动 false 为可以，true 为不可以 | [基本用法](demo#basic-usage) | -| enableDragFollow | `boolean` | false | 可选，是否启用实体元素跟随（可以添加更多特效，如阴影等） | [拖拽实体元素跟随](demo#drag-entity-elements-to-follow) | -| dragFollowOption | `{appendToBody?: boolean}` | -- | 可选，用于控制实体拖拽的一些配置 | [拖拽实体元素跟随](demo#drag-entity-elements-to-follow) | -| dragFollowOption.appendToBody | `boolean` | false | 可选，用于控制实体拖拽的克隆元素插入的位置。默认 false 会插入到源元素父元素所有子的最后，设置为 true 会附着到。见说明 1 | [拖拽实体元素跟随](demo#drag-entity-elements-to-follow) | -| originPlaceholder | `{show?: boolean; tag?: string; style?: {cssProperties: string]: string}; text?: string; removeDelay?: number;}` | -- | 可选，设置源占位符号，用于被拖拽元素原始位置占位 | [源占位符](demo#source-placeholder) | -| originPlaceholder.show | `boolean` | true | 可选，是否显示，默认 originPlaceholder 有 Input 则显示，特殊情况可以关闭 | -| originPlaceholder.tag | `string` | 'div' | 可选，使用 tag 名，默认 originPlaceholder 使用'div'，特殊情况可以置换 | -| originPlaceholder.style | `Object` | -- | 可选，传 style 对象，key 为样式属性，value 为样式值 | [源占位符](demo#source-placeholder) | -| originPlaceholder.text | `string` | -- | 可选，placeholder 内的文字 | [源占位符](demo#source-placeholder) | -| originPlaceholder.removeDelay | `number` | -- | 可选，用于希望源占位符在拖拽之后的延时里再删除，方便做动画，单位为 ms 毫秒 | [源占位符](demo#source-placeholder) | -| dragIdentity | `any` | -- | 可选，用于虚拟滚动的恢复，虚拟滚动过程中会删除元素（溢出画面）然后又重新生成来恢复元素（回到画面），需要唯一识别值来恢复原始事件拖拽事件监听和源占位符等 | -| dragItemParentName | `string` | -- | 可选，选择器名，和 dragItemChildrenName 搭配用于拖拽截断看不见的列表内元素以提高性能， 从 dragItemParentName 匹配的选择器里边查询匹配 dragItemChildrenName 的元素，通常是列表里查找条目，把超出可视范围的条目克隆的时候剔除 | 暂无 | -| dragItemChildrenName | `string` | -- | 可选，选择器名，和 dragItemParentName 搭配用于拖拽截断看不见的列表内元素以提高性能，功能见 dragItemParentName 的描述 | 暂无 | +| 参数 | 类型 | 默认值 | 描述 | 跳转 Demo | 全局配置项 | +| :---------------------------: | :--------------------------------------------------------------------------------------------------------------- | :------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------ | :--------- | +| dragData | `any` | -- | 可选，转递给 `DropEvent`事件的数据. | [基本用法](demo#basic-usage) | +| dragScope | `string \| Array` | 'default' | 可选，限制 drop 的位置，必须匹配对应的 `dropScope` | [基本用法](demo#basic-usage) | +| dragOverClass | `string` | -- | 可选，拖动时被拖动元素的 css | [拖拽实体元素跟随](demo#drag-entity-elements-to-follow) | +| dragHandle | `string` | -- | 可选，可拖动拖动内容的 css 选择器，只有匹配 css 选择器的元素才能响应拖动事件, 注意是css选择器，示例：`'.title, .title > *'`,`'#header'`, `'.title *:not(input)'` | | | +| dragHandleClass | `string` | 'drag-handle' | 可选， 会给可拖动内容的应用的 css 选择器命中的元素添加的 css 类名， 第一个匹配 css 选择器的会被加上该 css 类 | [基本用法](demo#basic-usage) | +| disabled | `boolean` | false | 可选，控制当前元素是否可拖动 false 为可以，true 为不可以 | [基本用法](demo#basic-usage) | +| enableDragFollow | `boolean` | false | 可选，是否启用实体元素跟随（可以添加更多特效，如阴影等） | [拖拽实体元素跟随](demo#drag-entity-elements-to-follow) | +| dragFollowOption | `{appendToBody?: boolean}` | -- | 可选，用于控制实体拖拽的一些配置 | [拖拽实体元素跟随](demo#drag-entity-elements-to-follow) | +| dragFollowOption.appendToBody | `boolean` | false | 可选，用于控制实体拖拽的克隆元素插入的位置。默认 false 会插入到源元素父元素所有子的最后，设置为 true 会附着到。见说明 1 | [拖拽实体元素跟随](demo#drag-entity-elements-to-follow) | +| originPlaceholder | `{show?: boolean; tag?: string; style?: {cssProperties: string]: string}; text?: string; removeDelay?: number;}` | -- | 可选，设置源占位符号，用于被拖拽元素原始位置占位 | [源占位符](demo#source-placeholder) | +| originPlaceholder.show | `boolean` | true | 可选，是否显示，默认 originPlaceholder 有 Input 则显示，特殊情况可以关闭 | +| originPlaceholder.tag | `string` | 'div' | 可选，使用 tag 名，默认 originPlaceholder 使用'div'，特殊情况可以置换 | +| originPlaceholder.style | `Object` | -- | 可选，传 style 对象，key 为样式属性，value 为样式值 | [源占位符](demo#source-placeholder) | +| originPlaceholder.text | `string` | -- | 可选，placeholder 内的文字 | [源占位符](demo#source-placeholder) | +| originPlaceholder.removeDelay | `number` | -- | 可选，用于希望源占位符在拖拽之后的延时里再删除，方便做动画，单位为 ms 毫秒 | [源占位符](demo#source-placeholder) | +| dragIdentity | `any` | -- | 可选，用于虚拟滚动的恢复，虚拟滚动过程中会删除元素（溢出画面）然后又重新生成来恢复元素（回到画面），需要唯一识别值来恢复原始事件拖拽事件监听和源占位符等 | +| dragItemParentName | `string` | -- | 可选，选择器名，和 dragItemChildrenName 搭配用于拖拽截断看不见的列表内元素以提高性能， 从 dragItemParentName 匹配的选择器里边查询匹配 dragItemChildrenName 的元素，通常是列表里查找条目，把超出可视范围的条目克隆的时候剔除 | 暂无 | +| dragItemChildrenName | `string` | -- | 可选，选择器名，和 dragItemParentName 搭配用于拖拽截断看不见的列表内元素以提高性能，功能见 dragItemParentName 的描述 | 暂无 | 说明 1：dragFollowOptions 的 appendToBody 的使用场景：当拖拽离开后源位置的父对象会被销毁的话，需要把克隆体附着到 body 上防止被销毁。默认会通过复制样式保证克隆到 body 的实体的样式是正确的，但部分深度依赖 DOM 节点位置的样式和属性可能会失败，需要手动调整部分样式。 diff --git a/devui/dragdrop/doc/api-en.md b/devui/dragdrop/doc/api-en.md index 15de7cf0..e21000d7 100644 --- a/devui/dragdrop/doc/api-en.md +++ b/devui/dragdrop/doc/api-en.md @@ -3,7 +3,7 @@ Import into module: ```typescript -import { DragDropModule } from' ng-devui/dragdrop'; +import { DragDropModule } from ' ng-devui/dragdrop'; ``` ## Dragdrop @@ -14,25 +14,26 @@ Provides the dDraggable and dDroppable(dSortable) instructions. ### dDraggable Parameter -| Parameter | Type | Default Value | Description | Jump to Demo |Global Config| -| :----------------: | :---------------------------- | :--------------------------------------------------------------------------------------------------------------- | :------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------- | -| dragData | `any` | -- | Optional. Data transmitted to the `DropEvent` event. | [Basic Usage](demo#basic-usage) | -| dragScope | `string \| Array` | 'default ' | Optional. Restricts the drop position. It must match the corresponding `dropScope`. | [Basic Usage](demo#basic-usage) | -| dragOverClass | `string` | -- | Optional. CSS of the dragged element. | [Drag Entity Element to Follow](demo#drag-entity-elements-to-follow) | -| dragHandleClass | `string` | -- | Optional. Drag handle. CSS selector. Only selected elements can respond to drag events. | [Basic Usage](demo#basic-usage) | -| disabled | `boolean` | false | Optional. Specifies whether the current element can be dragged. false: yes; true: no. | [Basic Usage](demo#basic-usage) | -| enableDragFollow | `boolean` | false | Optional. Whether to enable entity element follow (more special effects such as shadow can be added) | [Drag Entity Element to Follow](demo#drag-entity-elements-to-follow) | -| dragFollowOption | `{appendToBody?: boolean}` | -- | Optional. It is used to control some configuration of entity dragging. | [Drag Entity Element to Follow](demo#drag-entity-elements-to-follow) | +| Parameter | Type | Default Value | Description | Jump to Demo | Global Config | +| :---------------------------: | :--------------------------------------------------------------------------------------------------------------- | :------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------- | :------------ | +| dragData | `any` | -- | Optional. Data transmitted to the `DropEvent` event. | [Basic Usage](demo#basic-usage) | +| dragScope | `string \| Array` | 'default ' | Optional. Restricts the drop position. It must match the corresponding `dropScope`. | [Basic Usage](demo#basic-usage) | +| dragOverClass | `string` | -- | Optional. CSS of the dragged element. | [Drag Entity Element to Follow](demo#drag-entity-elements-to-follow) | +| dragHandle | `string` | -- | Optional. The CSS selector that can be dragged. Only the elements matching the CSS selector can respond to the drag event. Note that the CSS selector is used, for example, `.title, .title > *'`, `#header'`, `'.title *:not(input)'` | | | +| dragHandleClass | `string` | 'drag-handle' | CSS class name added to the element hit by the CSS selector of the application of dragable content. The CSS class is added to the first matching CSS selector. | [Basic Usage](demo#basic-usage) | | +| disabled | `boolean` | false | Optional. Specifies whether the current element can be dragged. false: yes; true: no. | [Basic Usage](demo#basic-usage) | +| enableDragFollow | `boolean` | false | Optional. Whether to enable entity element follow (more special effects such as shadow can be added) | [Drag Entity Element to Follow](demo#drag-entity-elements-to-follow) | +| dragFollowOption | `{appendToBody?: boolean}` | -- | Optional. It is used to control some configuration of entity dragging. | [Drag Entity Element to Follow](demo#drag-entity-elements-to-follow) | | dragFollowOption.appendToBody | `boolean` | false | Optional. controls the position of the clone element to be inserted in entity dragging. The default value false is inserted at the end of all children of the source element's parent element, and the value true is attached to. See Note 1 | [Drag Entity Element to Follow](demo#drag-entity-elements-to-follow) | -| originPlaceholder | `{show?: boolean; tag?: string; style?: {cssProperties: string]: string}; text?: string; removeDelay?: number;}` | -- | Optional. Sets the Source Placeholder for the original position of the dragged element. | [Source Placeholder](demo#source-placeholder) | -| originPlaceholder.show | `boolean` | true | Optional. It indicates whether to display the Source Placeholder. By default, the Source Placeholder is displayed if there is an input. You can disable the Source Placeholder in special cases. | -| originPlaceholder.tag | `string` | 'div' | Optional. Whether to display originPlaceholder. By default, originPlaceholder is displayed if there is an input. This parameter can be disabled in special cases. | -| originPlaceholder.style | `Object` | -- | Optional. The style object is transferred. The key indicates the style attribute, and the value indicates the style value. | [Source Placeholder](demo#source-placeholder) | -| originPlaceholder.text | `string` | -- | Optional. text in placeholder | [Source Placeholder](demo#source-placeholder) | +| originPlaceholder | `{show?: boolean; tag?: string; style?: {cssProperties: string]: string}; text?: string; removeDelay?: number;}` | -- | Optional. Sets the Source Placeholder for the original position of the dragged element. | [Source Placeholder](demo#source-placeholder) | +| originPlaceholder.show | `boolean` | true | Optional. It indicates whether to display the Source Placeholder. By default, the Source Placeholder is displayed if there is an input. You can disable the Source Placeholder in special cases. | +| originPlaceholder.tag | `string` | 'div' | Optional. Whether to display originPlaceholder. By default, originPlaceholder is displayed if there is an input. This parameter can be disabled in special cases. | +| originPlaceholder.style | `Object` | -- | Optional. The style object is transferred. The key indicates the style attribute, and the value indicates the style value. | [Source Placeholder](demo#source-placeholder) | +| originPlaceholder.text | `string` | -- | Optional. text in placeholder | [Source Placeholder](demo#source-placeholder) | | originPlaceholder.removeDelay | `number` | -- | Optional. It is used to delete the Source Placeholder in the delay after dragging to facilitate animation. The unit is ms. | [Source Placeholder](demo#source-placeholder) | -| dragIdentity | `any` | -- | Optional. This parameter is used to restore virtual scrolling. During virtual scrolling, the element is deleted (overflow) and then regenerated to restore the element (back to the image). A unique identifier is required to restore the original event drag event listening and Source Placeholder. | -| dragItemParentName | `string` | -- | Optional. Selector name. This parameter is used with dragItemChildrenName to truncate invisible elements in the list to improve performance, query elements matching dragItemChildrenName from the selector matching dragItemParentName. Generally, search for items in the list and delete items beyond the visible scope when cloning. | None | -| dragItemChildrenName | `string` | -- | Optional. Selector name, used with dragItemParentName to drag and truncate the invisible elements in the list to improve performance, see the description of dragItemParentName for the function. | None. | +| dragIdentity | `any` | -- | Optional. This parameter is used to restore virtual scrolling. During virtual scrolling, the element is deleted (overflow) and then regenerated to restore the element (back to the image). A unique identifier is required to restore the original event drag event listening and Source Placeholder. | +| dragItemParentName | `string` | -- | Optional. Selector name. This parameter is used with dragItemChildrenName to truncate invisible elements in the list to improve performance, query elements matching dragItemChildrenName from the selector matching dragItemParentName. Generally, search for items in the list and delete items beyond the visible scope when cloning. | None | +| dragItemChildrenName | `string` | -- | Optional. Selector name, used with dragItemParentName to drag and truncate the invisible elements in the list to improve performance, see the description of dragItemParentName for the function. | None. | Note 1: AppendToBody of dragFollowOptions is used as follows: If the parent object in the source position is destroyed after dragFollowOptions is dragged away, the clone must be attached to the body to prevent it from being destroyed. By default, the style of the entity to be cloned is copied to ensure that the style of the entity to be cloned is correct. However, some styles and attributes that depend on the DOM node location may fail. You need to manually adjust some styles. @@ -334,7 +335,7 @@ Used for the dDropable object and the sortable area with the same structure as t ### dDropSortSync Parameter | Parameter | Type | Default Value | Description | Jump to Demo | -| :----------------- | :-------- | :------------ | :------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------- | +| :----------------- | :-------- | :------------ | :------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------- | ------------------------------------- | | dDropSortSync | `string` | '' | Mandatory, Name of the group to be synchronized. This parameter is invalid when the value is empty or an empty string. The value | [Two-dimensional drag and preview](demo#2D-drag-and-drop-preview) | is not synchronized to other content. | | dDropSyncDirection | `v'\|'h'` | 'v' | Optional. orthogonal to the direction of dSortable | diff --git a/devui/drawer/demo/drawer-demo.module.ts b/devui/drawer/demo/drawer-demo.module.ts index 5b8ba0eb..3b8576d0 100755 --- a/devui/drawer/demo/drawer-demo.module.ts +++ b/devui/drawer/demo/drawer-demo.module.ts @@ -1,15 +1,15 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; +import { TranslateModule } from '@ngx-translate/core'; import { ButtonModule } from 'ng-devui/button'; +import { DrawerModule } from 'ng-devui/drawer'; +import { ModalModule } from 'ng-devui/modal'; import { DevUIApiComponent } from 'ng-devui/shared/devui-api/devui-api.component'; import { DevUIApiModule } from 'ng-devui/shared/devui-api/devui-api.module'; import { DevUICodeboxModule } from 'ng-devui/shared/devui-codebox'; import { TextInputModule } from 'ng-devui/text-input'; -import { TranslateModule } from '@ngx-translate/core'; import { DDemoNavModule } from 'src/app/component/d-demo-nav.module'; -import { ModalModule } from '../../modal'; -import { DrawerModule } from '../drawer.moudule'; import { BasicComponent } from './basic/basic.component'; import { DrawerDemoComponent } from './drawer-demo.component'; import { DrawerContentComponent } from './drawerContent/drawer-content.component'; @@ -41,6 +41,6 @@ import { UndestroyableComponent } from './undestroyable/undestroyable.component' ], exports: [], declarations: [DrawerDemoComponent, BasicComponent, UndestroyableComponent, DrawerContentComponent], - + }) export class DrawerDemoModule {} diff --git a/devui/drawer/demo/drawerContent/drawer-content.component.html b/devui/drawer/demo/drawerContent/drawer-content.component.html index 18e140c4..4885295e 100755 --- a/devui/drawer/demo/drawerContent/drawer-content.component.html +++ b/devui/drawer/demo/drawerContent/drawer-content.component.html @@ -1,7 +1,14 @@
    - + +
      diff --git a/devui/drawer/demo/drawerContent/drawer-content.component.scss b/devui/drawer/demo/drawerContent/drawer-content.component.scss index 479f7293..c571a195 100644 --- a/devui/drawer/demo/drawerContent/drawer-content.component.scss +++ b/devui/drawer/demo/drawerContent/drawer-content.component.scss @@ -1,4 +1,3 @@ -@import '../../../style/theme/color'; @import '~ng-devui/styles-var/devui-var.scss'; input[type='text'] { diff --git a/devui/drawer/demo/drawerContent/drawer-content.component.ts b/devui/drawer/demo/drawerContent/drawer-content.component.ts index 949f8d46..a073c1cc 100755 --- a/devui/drawer/demo/drawerContent/drawer-content.component.ts +++ b/devui/drawer/demo/drawerContent/drawer-content.component.ts @@ -9,7 +9,11 @@ export class DrawerContentComponent { @Input() fullScreen; @Input() close; @Input() changeWidth; + isFullScreen = false; constructor() { } - + toggleFullScreen() { + this.isFullScreen = !this.isFullScreen; + this.fullScreen(); + } } diff --git a/devui/form/demo/form-demo.module.ts b/devui/form/demo/form-demo.module.ts index 4ae2148e..18ee39d1 100644 --- a/devui/form/demo/form-demo.module.ts +++ b/devui/form/demo/form-demo.module.ts @@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; +import { TranslateModule } from '@ngx-translate/core'; import { DatepickerModule, EditableSelectModule, @@ -22,14 +23,13 @@ import { SelectModule } from 'ng-devui/select'; import { DevUIApiComponent } from 'ng-devui/shared/devui-api/devui-api.component'; import { DevUIApiModule } from 'ng-devui/shared/devui-api/devui-api.module'; import { DevUICodeboxModule } from 'ng-devui/shared/devui-codebox'; +import { StickyModule } from 'ng-devui/sticky'; import { TagsInputModule } from 'ng-devui/tags-input'; import { TextInputModule } from 'ng-devui/text-input'; import { TextareaModule } from 'ng-devui/textarea'; import { ToastModule } from 'ng-devui/toast'; import { ToggleModule } from 'ng-devui/toggle'; -import { TranslateModule } from '@ngx-translate/core'; import { DDemoNavModule } from 'src/app/component/d-demo-nav.module'; -import { StickyModule } from '../../sticky'; import { BasicComponent } from './basic/basic.component'; import { CustomStatusComponent } from './custom-status/custom-status.component'; import { FormDemoComponent } from './form-demo.component'; @@ -119,6 +119,6 @@ import { ValidateTemplateFormComponent } from './validate-template/validate-temp CustomStatusComponent, DebounceTimeComponent, ], - + }) export class FormDemoModule {} diff --git a/devui/form/demo/validate-template/custom-message-show/custom-message-show.component.scss b/devui/form/demo/validate-template/custom-message-show/custom-message-show.component.scss index eabe5803..eabd8557 100644 --- a/devui/form/demo/validate-template/custom-message-show/custom-message-show.component.scss +++ b/devui/form/demo/validate-template/custom-message-show/custom-message-show.component.scss @@ -1,4 +1,4 @@ -@import '../../../../style/theme/color'; +@import '~ng-devui/styles-var/devui-var.scss'; .error-message { height: 20px; diff --git a/devui/form/form-label.component.html b/devui/form/form-label.component.html index 7e02e16d..a44c6b72 100644 --- a/devui/form/form-label.component.html +++ b/devui/form/form-label.component.html @@ -18,7 +18,6 @@ diff --git a/devui/fullscreen/demo/fullscreen-demo.module.ts b/devui/fullscreen/demo/fullscreen-demo.module.ts index dee3f288..4a3ba5a1 100644 --- a/devui/fullscreen/demo/fullscreen-demo.module.ts +++ b/devui/fullscreen/demo/fullscreen-demo.module.ts @@ -1,14 +1,14 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; +import { TranslateModule } from '@ngx-translate/core'; import { ButtonModule } from 'ng-devui/button'; +import { FullscreenModule } from 'ng-devui/fullscreen'; import { DevUIApiComponent } from 'ng-devui/shared/devui-api/devui-api.component'; import { DevUIApiModule } from 'ng-devui/shared/devui-api/devui-api.module'; import { DevUICodeboxModule } from 'ng-devui/shared/devui-codebox'; import { TooltipModule } from 'ng-devui/tooltip'; -import { TranslateModule } from '@ngx-translate/core'; import { DDemoNavModule } from 'src/app/component/d-demo-nav.module'; -import { FullscreenModule } from '../fullscreen.module'; import { FullscreenDemoComponent } from './fullscreen-demo.component'; import { FullscreenDemoImmersiveComponent } from './immersive/immersive.component'; import { FullscreenDemoNormalComponent } from './normal/normal.component'; diff --git a/devui/fullscreen/demo/immersive/immersive.component.html b/devui/fullscreen/demo/immersive/immersive.component.html index 5074c2cc..53471254 100644 --- a/devui/fullscreen/demo/immersive/immersive.component.html +++ b/devui/fullscreen/demo/immersive/immersive.component.html @@ -1,4 +1,4 @@ - +
      {{ btnContent }} diff --git a/devui/fullscreen/demo/normal/normal.component.html b/devui/fullscreen/demo/normal/normal.component.html index 652686d2..42b2a195 100644 --- a/devui/fullscreen/demo/normal/normal.component.html +++ b/devui/fullscreen/demo/normal/normal.component.html @@ -1,4 +1,4 @@ - +
      diff --git a/devui/i18n/en-us.ts b/devui/i18n/en-us.ts index f7e86a9b..4a7195fa 100644 --- a/devui/i18n/en-us.ts +++ b/devui/i18n/en-us.ts @@ -253,4 +253,11 @@ export default { seeMore: 'See more', selected: 'Selected' }, + userGuide: { + guide: 'Guide', + prev: 'Prev', + next: 'Next', + finish: 'Finish', + autoFill: 'Click here to auto-populate' + } }; diff --git a/devui/i18n/i18n.model.ts b/devui/i18n/i18n.model.ts index 2e7b2f2b..c497e589 100644 --- a/devui/i18n/i18n.model.ts +++ b/devui/i18n/i18n.model.ts @@ -149,4 +149,11 @@ export interface I18nInterface { seeMore: string; selected: string; }; + userGuide: { + guide: string; + prev: string; + next: string; + finish: string; + autoFill: string; + }; } diff --git a/devui/i18n/zh-cn.ts b/devui/i18n/zh-cn.ts index 032f006b..5236f572 100644 --- a/devui/i18n/zh-cn.ts +++ b/devui/i18n/zh-cn.ts @@ -253,4 +253,11 @@ export default { seeMore: '查看全部过滤条件', selected: '已选择' }, + userGuide: { + guide: '指引', + prev: '上一步', + next: '下一步', + finish: '完成', + autoFill: '点击此处自动填充' + } }; diff --git a/devui/image-preview/demo/image-preview-demo.module.ts b/devui/image-preview/demo/image-preview-demo.module.ts index e9d46eb5..a83c4cb2 100644 --- a/devui/image-preview/demo/image-preview-demo.module.ts +++ b/devui/image-preview/demo/image-preview-demo.module.ts @@ -2,14 +2,14 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; +import { TranslateModule } from '@ngx-translate/core'; import { ButtonModule } from 'ng-devui/button'; +import { ImagePreviewModule } from 'ng-devui/image-preview'; import { DevUIApiComponent } from 'ng-devui/shared/devui-api/devui-api.component'; import { DevUIApiModule } from 'ng-devui/shared/devui-api/devui-api.module'; import { DevUICodeboxModule } from 'ng-devui/shared/devui-codebox/devui-codebox.module'; import { SafePipeModule } from 'ng-devui/utils'; -import { TranslateModule } from '@ngx-translate/core'; import { DDemoNavModule } from 'src/app/component/d-demo-nav.module'; -import { ImagePreviewModule } from '../image-preview.module'; import { BasicComponent } from './basic/basic.component'; import { CustomOpenComponent } from './custom-open/custom-open.component'; import { DImagePreviewDemoComponent } from './image-preview-demo.component'; @@ -42,6 +42,6 @@ import { ZIndexComponent } from './z-index/z-index.component'; CustomOpenComponent, ZIndexComponent ], - + }) export class ImagePreviewDemoModule { } diff --git a/devui/input-number/input-number.component.scss b/devui/input-number/input-number.component.scss index 508e1f8f..8862d37a 100755 --- a/devui/input-number/input-number.component.scss +++ b/devui/input-number/input-number.component.scss @@ -93,7 +93,7 @@ height: 50%; line-height: 50%; border-width: 0 1px; - transition: transform 0.2s ease-in-out; + transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); display: flex; justify-content: center; align-items: center; diff --git a/devui/layout/demo/basic/layout-basic.component.scss b/devui/layout/demo/basic/layout-basic.component.scss index 47e0e504..c4c09b1e 100644 --- a/devui/layout/demo/basic/layout-basic.component.scss +++ b/devui/layout/demo/basic/layout-basic.component.scss @@ -1,5 +1,4 @@ @import '~ng-devui/styles-var/devui-var.scss'; -@import '../../../style/theme/shadow'; .basic-usage { box-shadow: $devui-shadow-length-base; // TODO: color not variable diff --git a/devui/layout/demo/layout-demo.module.ts b/devui/layout/demo/layout-demo.module.ts index a66d33b4..45a6393d 100644 --- a/devui/layout/demo/layout-demo.module.ts +++ b/devui/layout/demo/layout-demo.module.ts @@ -1,14 +1,14 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; +import { TranslateModule } from '@ngx-translate/core'; import { AccordionModule } from 'ng-devui/accordion'; import { BreadcrumbModule } from 'ng-devui/breadcrumb'; +import { LayoutModule } from 'ng-devui/layout'; import { DevUIApiComponent } from 'ng-devui/shared/devui-api/devui-api.component'; import { DevUIApiModule } from 'ng-devui/shared/devui-api/devui-api.module'; import { DevUICodeboxModule } from 'ng-devui/shared/devui-codebox'; -import { TranslateModule } from '@ngx-translate/core'; import { DDemoNavModule } from 'src/app/component/d-demo-nav.module'; -import { LayoutModule } from '../layout.module'; import { LayoutBasicComponent } from './basic/layout-basic.component'; import { LayoutDemoComponent } from './layout-demo.component'; import { LayoutTopAsideComponent } from './top-aside/top-aside.component'; diff --git a/devui/loading/demo/loading-demo.module.ts b/devui/loading/demo/loading-demo.module.ts index 30910b0a..f58a0485 100755 --- a/devui/loading/demo/loading-demo.module.ts +++ b/devui/loading/demo/loading-demo.module.ts @@ -2,13 +2,13 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; +import { TranslateModule } from '@ngx-translate/core'; import { ButtonModule } from 'ng-devui/button'; +import { LoadingModule } from 'ng-devui/loading'; import { DevUIApiComponent } from 'ng-devui/shared/devui-api/devui-api.component'; import { DevUIApiModule } from 'ng-devui/shared/devui-api/devui-api.module'; import { DevUICodeboxModule } from 'ng-devui/shared/devui-codebox/devui-codebox.module'; -import { TranslateModule } from '@ngx-translate/core'; import { DDemoNavModule } from 'src/app/component/d-demo-nav.module'; -import { LoadingModule } from '../loading.module'; import { BasicComponent } from './basic/basic.component'; import { CustomComponent } from './custom/custom.component'; import { FullScreenComponent } from './full-screen/full-screen.component'; @@ -46,7 +46,7 @@ import { SubscriptionComponent } from './subscription/subscription.component'; ShowLoadingComponent, FullScreenComponent ], - + }) export class LoadingDemoModule { } diff --git a/devui/mention/assets/common.scss b/devui/mention/assets/common.scss new file mode 100644 index 00000000..e252e5c6 --- /dev/null +++ b/devui/mention/assets/common.scss @@ -0,0 +1,4 @@ +@import '../../style/theme/color'; +@import '../../style/theme/variables'; +@import '../../style/theme/shadow'; +@import '../../style/theme/corner'; diff --git a/devui/mention/demo/async/async.component.html b/devui/mention/demo/async/async.component.html new file mode 100644 index 00000000..1257b132 --- /dev/null +++ b/devui/mention/demo/async/async.component.html @@ -0,0 +1,9 @@ + diff --git a/devui/mention/demo/async/async.component.ts b/devui/mention/demo/async/async.component.ts new file mode 100644 index 00000000..00a47eed --- /dev/null +++ b/devui/mention/demo/async/async.component.ts @@ -0,0 +1,31 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'd-mention-async', + templateUrl: './async.component.html', +}) +export class AsyncComponent implements OnInit { + loading = true; + + suggestions = []; + + constructor() {} + + ngOnInit() {} + + onSearchChange({ value }) { + this.loading = true; + this.fetchSuggestions(value, (suggestions) => { + console.log(suggestions); + this.suggestions = suggestions; + this.loading = false; + }); + } + + fetchSuggestions(value: string, callback: (suggestions: string[]) => void): void { + const users = ['C#', 'C', 'C++', 'Python', 'Java', 'JavaScript', 'Go', 'Python', 'Ruby', 'F#']; + setTimeout(() => { + return callback(users.filter((item) => item.indexOf(value) !== -1)); + }, 1000); + } +} diff --git a/devui/mention/demo/basic/basic.component.html b/devui/mention/demo/basic/basic.component.html new file mode 100644 index 00000000..15a42087 --- /dev/null +++ b/devui/mention/demo/basic/basic.component.html @@ -0,0 +1,9 @@ + diff --git a/devui/mention/demo/basic/basic.component.ts b/devui/mention/demo/basic/basic.component.ts new file mode 100644 index 00000000..dac9e2cb --- /dev/null +++ b/devui/mention/demo/basic/basic.component.ts @@ -0,0 +1,32 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'd-mention-basic', + templateUrl: './basic.component.html', +}) +export class BasicComponent { + suggestions = [ + 'C#', + 'C', + 'C++', + 'Python', + 'Java', + 'JavaScript', + 'Go', + 'Python', + 'Ruby', + 'F#', + 'TypeScript', + 'SQL', + 'LiveScript', + 'CoffeeScript', + ]; + + selectHandler(e) { + console.log(e); + } + + afterMentionInit (e) { + console.log(e); + } +} diff --git a/devui/mention/demo/custom/custom.component.html b/devui/mention/demo/custom/custom.component.html new file mode 100644 index 00000000..7c32c5de --- /dev/null +++ b/devui/mention/demo/custom/custom.component.html @@ -0,0 +1,16 @@ + + + + + {{ suggestion.name }} - {{ suggestion.id }} + diff --git a/devui/mention/demo/custom/custom.component.ts b/devui/mention/demo/custom/custom.component.ts new file mode 100644 index 00000000..f43d4e20 --- /dev/null +++ b/devui/mention/demo/custom/custom.component.ts @@ -0,0 +1,46 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'd-mention-custom', + templateUrl: './custom.component.html', +}) +export class CustomComponent implements OnInit { + suggestions = [ + { + name: 'C#', + id: 1 + }, + { + name: 'C', + id: 2 + }, + { + name: 'C++', + id: 3 + }, + { + name: 'Python', + id: 4 + }, + { + name: 'Java', + id: 5 + }, + { + name: 'JavaScript', + id: 6 + }, + { + name: 'Go', + id: 7 + } + ]; + + valueWith = (data) => data.name; + + constructor() {} + + ngOnInit() { + + } +} diff --git a/devui/mention/demo/mention-demo.component.html b/devui/mention/demo/mention-demo.component.html new file mode 100644 index 00000000..6a94e413 --- /dev/null +++ b/devui/mention/demo/mention-demo.component.html @@ -0,0 +1,34 @@ +
      + +
      +
      {{ 'components.mention.basicDemo.title' | translate }}
      +
      + + + +
      + +
      +
      {{ 'components.mention.asyncDemo.title' | translate }}
      +
      + + + +
      + +
      +
      {{ 'components.mention.prefixDemo.title' | translate }}
      +
      + + + +
      + +
      +
      {{ 'components.mention.customDemo.title' | translate }}
      +
      + + + +
      +
      diff --git a/devui/mention/demo/mention-demo.component.ts b/devui/mention/demo/mention-demo.component.ts new file mode 100644 index 00000000..3a3c548e --- /dev/null +++ b/devui/mention/demo/mention-demo.component.ts @@ -0,0 +1,67 @@ +import { Component, OnDestroy, OnInit } from '@angular/core'; +import { TranslateService, TranslationChangeEvent } from '@ngx-translate/core'; +import { DevuiSourceData } from 'ng-devui/shared/devui-codebox'; +import { Subscription } from 'rxjs'; + +@Component({ + selector: 'app-mention-demo', + templateUrl: './mention-demo.component.html' +}) +export class MentionDemoComponent implements OnInit, OnDestroy { + + navItems = []; + + basicSource: Array = [ + { title: 'HTML', language: 'xml', code: require('!!raw-loader!./basic/basic.component.html') }, + { title: 'TS', language: 'typescript', code: require('!!raw-loader!./basic/basic.component.ts') }, + ]; + + asyncSource: Array = [ + { title: 'HTML', language: 'xml', code: require('!!raw-loader!./async/async.component.html') }, + { title: 'TS', language: 'typescript', code: require('!!raw-loader!./async/async.component.ts') }, + ]; + + customSource: Array = [ + { title: 'HTML', language: 'xml', code: require('!!raw-loader!./custom/custom.component.html') }, + { title: 'TS', language: 'typescript', code: require('!!raw-loader!./custom/custom.component.ts') }, + ]; + + prefixSource: Array = [ + { title: 'HTML', language: 'xml', code: require('!!raw-loader!./prefix/prefix.component.html') }, + { title: 'TS', language: 'typescript', code: require('!!raw-loader!./prefix/prefix.component.ts') }, + ]; + + subs: Subscription = new Subscription(); + + constructor(private translate: TranslateService) {} + + ngOnInit() { + this.subs.add( + this.translate.get('components.mention.anchorLinkValues').subscribe((res) => { + this.setNavValues(res); + }) + ); + + this.subs.add( + this.translate.onLangChange.subscribe((event: TranslationChangeEvent) => { + const values = this.translate.instant('components.mention.anchorLinkValues'); + this.setNavValues(values); + }) + ); + } + + setNavValues(values) { + this.navItems = [ + { dAnchorLink: 'basic-usage', value: values['basic-usage'] }, + { dAnchorLink: 'async-usage', value: values['async-usage'] }, + { dAnchorLink: 'custom-prefix', value: values['custom-prefix'] }, + { dAnchorLink: 'custom-template', value: values['custom-template'] }, + ]; + } + + ngOnDestroy () { + if (this.subs) { + this.subs.unsubscribe(); + } + } +} diff --git a/devui/mention/demo/mention-demo.module.ts b/devui/mention/demo/mention-demo.module.ts new file mode 100644 index 00000000..d687bc27 --- /dev/null +++ b/devui/mention/demo/mention-demo.module.ts @@ -0,0 +1,48 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { TranslateModule } from '@ngx-translate/core'; +import { TextareaModule } from 'ng-devui'; +import { AnchorModule } from 'ng-devui/anchor'; +import { AvatarModule } from 'ng-devui/avatar'; +import { MentionModule } from 'ng-devui/mention'; +import { DevUIApiComponent } from 'ng-devui/shared/devui-api/devui-api.component'; +import { DevUIApiModule } from 'ng-devui/shared/devui-api/devui-api.module'; +import { DevUICodeboxModule } from 'ng-devui/shared/devui-codebox'; +import { DDemoNavModule } from 'src/app/component/d-demo-nav.module'; +import { AsyncComponent } from './async/async.component'; +import { BasicComponent } from './basic/basic.component'; +import { CustomComponent } from './custom/custom.component'; +import { MentionDemoComponent } from './mention-demo.component'; +import { PrefixComponent } from './prefix/prefix.component'; +import { TargetComponent } from './target/target.component'; + +@NgModule({ + imports: [ + CommonModule, + AnchorModule, + TranslateModule, + DevUICodeboxModule, + DDemoNavModule, + DevUIApiModule, + TextareaModule, + MentionModule, + AvatarModule, + RouterModule.forChild([ + { path: '', redirectTo: 'demo' }, + { path: 'demo', component: MentionDemoComponent }, + { + path: 'api', + component: DevUIApiComponent, + data: { + 'zh-cn': require('!html-loader!markdown-loader!../doc/api-cn.md'), + 'en-us': require('!html-loader!markdown-loader!../doc/api-en.md') + }, + }, + ]), + ], + declarations: [MentionDemoComponent, BasicComponent, AsyncComponent, CustomComponent, TargetComponent, PrefixComponent], + exports: [MentionDemoComponent], + +}) +export class MentionDemoModule {} diff --git a/devui/mention/demo/prefix/prefix.component.html b/devui/mention/demo/prefix/prefix.component.html new file mode 100644 index 00000000..b2e2a304 --- /dev/null +++ b/devui/mention/demo/prefix/prefix.component.html @@ -0,0 +1,10 @@ + diff --git a/devui/mention/demo/prefix/prefix.component.ts b/devui/mention/demo/prefix/prefix.component.ts new file mode 100644 index 00000000..58763276 --- /dev/null +++ b/devui/mention/demo/prefix/prefix.component.ts @@ -0,0 +1,38 @@ +import { Component, OnInit } from '@angular/core'; +import { MentionOnSearchTypes } from 'ng-devui/mention/mention.types'; + +@Component({ + selector: 'd-mention-prefix', + templateUrl: './prefix.component.html', +}) +export class PrefixComponent implements OnInit { + suggestions = []; + + prefixes = ['#', '!']; + + users = [ + 'C#', + 'C', + 'C++', + 'Python', + 'Java', + 'JavaScript', + 'Go', + 'Python', + 'Ruby', + 'F#', + 'TypeScript', + 'SQL', + 'LiveScript', + 'CoffeeScript', + ]; + tags = ['1.0', '2.0', '3.0']; + + constructor() {} + + ngOnInit() {} + + searchChangeHandler({ value, trigger }: MentionOnSearchTypes) { + this.suggestions = trigger === '#' ? this.users : this.tags; + } +} diff --git a/devui/mention/demo/target/target.component.html b/devui/mention/demo/target/target.component.html new file mode 100644 index 00000000..0d21a287 --- /dev/null +++ b/devui/mention/demo/target/target.component.html @@ -0,0 +1,8 @@ +
      + +
      diff --git a/devui/mention/demo/target/target.component.ts b/devui/mention/demo/target/target.component.ts new file mode 100644 index 00000000..f5373310 --- /dev/null +++ b/devui/mention/demo/target/target.component.ts @@ -0,0 +1,39 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'd-mention-target', + templateUrl: './target.component.html' +}) +export class TargetComponent { + + suggestions = [ + 'C#', + 'C', + 'C++', + 'CPython', + 'Java', + 'JavaScript', + 'Go', + 'Python', + 'Ruby', + 'F#', + 'TypeScript', + 'SQL', + 'LiveScript', + 'CoffeeScript', + ]; + + mentionValue = ''; + + editorRef = null; + + beforeShow; + + contentChange (e) { + this.beforeShow(e); + } + + afterEditorInit (e) { + this.editorRef = e; + } +} diff --git a/devui/mention/doc/api-cn.md b/devui/mention/doc/api-cn.md new file mode 100644 index 00000000..22c862be --- /dev/null +++ b/devui/mention/doc/api-cn.md @@ -0,0 +1,45 @@ +# 如何使用 + +在module中引入： + +```ts +import { MentionModule } from 'ng-devui/mention'; +``` + +在页面中使用： + +```xml + +``` + +# mention +## mention 参数 + +| 参数 | 类型 | 默认值 | 描述 | 跳转 Demo | +| :--------: | :--------------------: | :--: | :-------------------------------------------------------------------------- | ------------------------------------------------------------- | +| mentionPosition | `'top' \| 'bottom'` | `bottom` | 可选，建议框位置 | -- | +| mentionSuggestions | `[]` | -- | 必选，建议数据源 | [基本用法](demo#basic-usage) | +| mentionNotFoundContent | `string` | `'No suggestion matched' ` | 可选，用于在没有匹配到数据的时候的提示 | -- | +| mentionLoading | `boolean` | `false` | 可选，异步加载数据源的时候是否显示loading效果 | [异步用法](demo#async-usage) | +| mentionItemTemplate | `TemplateRef` | -- | 可选，自定义建议模板 | [自定义模板](demo#custom-template) | +| dmValueParse | `(value: string) => string = (value) => value;` | -- | 可选，建议选项的取值方法 | [自定义模板](demo#custom-template) | +| mentionTrigger | `string[]` | `['@']` | 可选，触发组件的前缀符 | [自定义前缀](demo#custom-prefix) | + +## mention 事件 + +| 参数 | 类型 | 默认值 | 描述 | 跳转 Demo | +| :--------: | :--------------------: | :--: | :-------------------------------------------------------------------------- | ------------------------------------------------------------- | +| mentionSelectItem | `any` | -- | 可选，触发选中建议 | [基本用法](demo#basic-usage) | +| mentionAfterMentionInit | -- | -- | 可选，在指令初始化之后返回指令实例 | [基本用法](demo#basic-usage) | +| mentionSearchChange | [`EventEmitter`](#MentionOnSearchTypes) | -- | 可选，输入框change事件 | [自定义前缀](demo#custom-prefix) | + +# 接口 & 类型定义 + +### MentionOnSearchTypes + +```ts +export interface MentionOnSearchTypes { + value: string; + trigger: string; +} +``` \ No newline at end of file diff --git a/devui/mention/doc/api-en.md b/devui/mention/doc/api-en.md new file mode 100644 index 00000000..93745ee5 --- /dev/null +++ b/devui/mention/doc/api-en.md @@ -0,0 +1,45 @@ +# How to use + +Import into module: + +```ts +import { MentionModule } from 'ng-devui/mention'; +``` + +In the page: + +```html + +``` + +# mention +## mention parameters + +| Parameter | Type | Default | Description | Jump to Demo | +| :--------: | :--------------------: | :--: | :-------------------------------------------------------------------------- | ------------------------------------------------------------- | +| mentionPosition | `'top' \| 'bottom'` | `bottom` | Option. Recommended box location | [Basic Usage](demo#basic-usage) | +| mentionSuggestions | `[]` | -- | required. Suggested Data Source | [Basic Usage](demo#basic-usage) | +| mentionNotFoundContent | `string` | `'No suggestion matched'` | Option. It is used for prompting when no data is matched. | -- | +| mentionLoading | `boolean` | `false` | Option.Indicates whether to display the loading effect during asynchronous data source loading. | [Async Usage](demo#async-usage) | +| mentionItemTemplate | `TemplateRef` | -- | Option. Custom Recommendation Template | [Custom Template](demo#custom-template) | +| dmValueParse | `(value: string) => string = (value) => value;` | -- | Option. Function that maps an suggestion's value | [Custom Prefix](demo#custom-prefix) | +| mentionTrigger | `string[]` | `['@']` | Option. Prefix for triggering components | [Custom Prefix](demo#custom-prefix) | + +## mention Event + +| Parameter | Type | Default | Description | Jump to Demo | +| :--------: | :--------------------: | :--: | :-------------------------------------------------------------------------- | ------------------------------------------------------------- | +| mentionSelectItem | `any` | -- | Option. Trigger Selection Suggestion. | [Basic Usage](demo#basic-usage) | +| mentionAfterMentionInit | -- | -- | Option. Returns an directive instance after directive initialization | [Basic Usage](demo#basic-usage) | +| mentionSearchChange | [`EventEmitter`](#MentionOnSearchTypes) | -- | Option. Input box change event | [Custom Prefix](demo#custom-prefix) | + +# Interface & Type Definition + +### MentionOnSearchTypes + +```ts +export interface MentionOnSearchTypes { + value: string; + trigger: string; +} +``` \ No newline at end of file diff --git a/devui/mention/index.ts b/devui/mention/index.ts new file mode 100644 index 00000000..7e1a213e --- /dev/null +++ b/devui/mention/index.ts @@ -0,0 +1 @@ +export * from './public-api'; diff --git a/devui/mention/mention.component.html b/devui/mention/mention.component.html new file mode 100644 index 00000000..79c8c934 --- /dev/null +++ b/devui/mention/mention.component.html @@ -0,0 +1,18 @@ +
        +
      • + + + + {{ suggestion }} +
        • +
      • + {{ mentionNotFoundContent }} +
        • +
      diff --git a/devui/mention/mention.component.scss b/devui/mention/mention.component.scss new file mode 100644 index 00000000..5e366e5b --- /dev/null +++ b/devui/mention/mention.component.scss @@ -0,0 +1,57 @@ +@import './assets/common'; + +.devui-mention-dropdown { + position: absolute; + color: $devui-text; + z-index: 1050; + min-width: 120px; + max-height: 250px; + overflow-x: hidden; + overflow-y: auto; + border-radius: $devui-border-radius; + background-color: $devui-connected-overlay-bg; + box-shadow: $devui-shadow-length-base $devui-light-shadow; + margin-top: 16px; + box-sizing: border-box; + outline: none; + + &.devui-mention-overlay-top { + transform: translateY(-100%); + margin-top: -6px; + } + + .devui-mention-dropdown-notfound { + min-height: 36px; + line-height: 1.5; + color: $devui-text; + font-size: $devui-font-size; + padding: 10px 10px; + border: 0; + } + + .devui-mention-dropdown-item { + font-size: $devui-font-size; + display: block; + min-height: 36px; + line-height: 1.5; + width: 100%; + padding: 10px 10px; + clear: both; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + border: 0; + color: $devui-text; + cursor: pointer; + + &:hover { + color: $devui-list-item-hover-text; + background-color: $devui-list-item-hover-bg; + } + + &.focus { + color: $devui-list-item-active-text; + background-color: $devui-list-item-active-bg; + } + } +} diff --git a/devui/mention/mention.component.ts b/devui/mention/mention.component.ts new file mode 100644 index 00000000..348cb690 --- /dev/null +++ b/devui/mention/mention.component.ts @@ -0,0 +1,51 @@ +import { Component, ElementRef, QueryList, TemplateRef, ViewChildren } from '@angular/core'; +import { MentionDirective } from './mention.directive'; + +@Component({ + selector: 'd-mention', + templateUrl: './mention.component.html', + styleUrls: ['./mention.component.scss'], +}) +export class MentionComponent { + + @ViewChildren('items', { read: ElementRef }) + items!: QueryList; + + suggestions = []; + + trigger: MentionDirective; + + value = ''; + + activeIndex = -1; + + loading = false; + + mentionItemTemplate: TemplateRef; + + mentionNotFoundContent = ''; + + position; + + private get focusItemElement(): HTMLElement | null { + const itemArr = this.items?.toArray(); + if (itemArr && itemArr[this.activeIndex]) { + return itemArr[this.activeIndex].nativeElement; + } + return null; + } + + constructor() {} + + selectSuggestion (suggestion) { + if (this.trigger) { + this.trigger.selectSuggestion(suggestion); + } + } + + scrollToFocusItem(): void { + if (this.focusItemElement) { + this.focusItemElement.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' }); + } + } +} diff --git a/devui/mention/mention.directive.ts b/devui/mention/mention.directive.ts new file mode 100644 index 00000000..b258c38b --- /dev/null +++ b/devui/mention/mention.directive.ts @@ -0,0 +1,328 @@ +import { DOWN_ARROW, ENTER, ESCAPE, LEFT_ARROW, RIGHT_ARROW, TAB, UP_ARROW } from '@angular/cdk/keycodes'; +import { ConnectionPositionPair, FlexibleConnectedPositionStrategy, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay'; +import { ComponentPortal } from '@angular/cdk/portal'; +import { + AfterViewInit, + ChangeDetectorRef, + ComponentRef, + Directive, + ElementRef, + EventEmitter, + HostListener, + Input, + OnChanges, + OnDestroy, + OnInit, + Output, + SimpleChanges, + TemplateRef, + ViewContainerRef +} from '@angular/core'; +import { fromEvent, Subject } from 'rxjs'; +import { debounceTime } from 'rxjs/operators'; +import { MentionComponent } from './mention.component'; +import { Mention, MentionOnSearchTypes, PostionType } from './mention.types'; +import { DEFAULT_MENTION_BOTTOM_POSITIONS } from './position'; +import { getCaretCoordinates } from './utils'; + +@Directive({ + selector: '[dMention]', + exportAs: 'dMention', +}) +export class MentionDirective implements OnInit, OnChanges, AfterViewInit, OnDestroy { + get nativeElement() { + return this.el.nativeElement; + } + + constructor( + private el: ElementRef, + private viewContainerRef: ViewContainerRef, + private cdr: ChangeDetectorRef, + private overlay: Overlay + ) {} + @Input() mentionNotFoundContent = 'No suggestion matched'; + + @Input() mentionSuggestions = []; + + @Input() mentionLoading = false; + + @Input() mentionTrigger = ['@']; + + @Input() mentionPosition: PostionType = 'bottom'; + + @Input() mentionItemTemplate: TemplateRef; + + @Output() mentionSelectItem = new EventEmitter(); + + @Output() mentionSearchChange: EventEmitter = new EventEmitter(); + + @Output() mentionAfterMentionInit: EventEmitter = new EventEmitter(); + + private value = ''; + private previousValue = ''; + private cursorMention: any; + private cursorMentionStart: number; + private cursorMentionEnd: number; + private cursorEnd: number; + private overlayRef: OverlayRef | null = null; + private portal?: ComponentPortal; + private positionStrategy!: FlexibleConnectedPositionStrategy; + private mentionRef: ComponentRef; + private filterSuggestions = []; + + isOpen = false; + + activeIndex = -1; + + unsubscribe$ = new Subject(); + + defaultNotFoundText = ''; + + @Input() mentionValueParse: (value: string) => string = (value) => value; + + @HostListener('keydown', ['$event']) + onKeyDown(event) { + if (this.mentionRef) { + const keyCode = event.keyCode; + if (this.isOpen && keyCode === ENTER && this.activeIndex !== -1 && this.filterSuggestions.length) { + this.selectSuggestion(this.filterSuggestions[this.activeIndex]); + event.preventDefault(); + } else if (keyCode === LEFT_ARROW || keyCode === RIGHT_ARROW) { + if (keyCode === LEFT_ARROW) { + this.cursorMentionStart = this.cursorMentionStart - 1; + } else { + this.cursorMentionStart = this.cursorMentionStart + 1; + } + event.stopPropagation(); + setTimeout(() => { + this.resetMention(); + }); + } else { + if (this.isOpen && (keyCode === TAB || keyCode === ESCAPE)) { + this.hideMention(); + return; + } + + if (this.isOpen && keyCode === UP_ARROW) { + event.preventDefault(); + event.stopPropagation(); + this.setPreviousItemActive(); + } + + if (this.isOpen && keyCode === DOWN_ARROW) { + event.preventDefault(); + event.stopPropagation(); + this.setNextItemActive(); + } + } + this.setMentionData(); + } + } + + @HostListener('document:click', ['$event']) + onClick(e) { + if (this.overlayRef && this.isOpen) { + if (!this.nativeElement.contains(e.target)) { + this.hideMention(); + } + } else if (this.nativeElement.contains(e.target)) { + this.resetMention(); + } + } + + ngOnInit(): void { + this.mentionAfterMentionInit.emit(this); + } + + ngAfterViewInit(): void { + fromEvent(this.el.nativeElement, 'input') + .pipe(debounceTime(300)) + .subscribe(() => { + this.resetMention(); + }); + } + + ngOnChanges(changes: SimpleChanges): void { + if (changes.hasOwnProperty('mentionSuggestions')) { + if (this.isOpen) { + this.previousValue = null; + this.activeIndex = -1; + this.resetMention(false); + } + } + } + + resetMention(emit = true) { + this.checkMention(); + if (!this.cursorMention) { + this.hideMention(); + return; + } + this.suggestionsFilter(this.cursorMention, emit); + const activeIndex = this.filterSuggestions.indexOf(this.cursorMention.substring(1)); + this.activeIndex = activeIndex >= 0 ? activeIndex : 0; + this.showMention(); + } + + checkMention() { + const value = this.nativeElement.value.replace(/[\r\n]/g, ' ') || ''; + const selectionStart = this.nativeElement.selectionStart; + let i = this.mentionTrigger.length; + while (i >= 0) { + const startPos = value.lastIndexOf(this.mentionTrigger[i], selectionStart); + const endPos = value.indexOf(' ', selectionStart) > -1 ? value.indexOf(' ', selectionStart) : value.length; + const mention = value.substring(startPos, selectionStart); + if ( + (startPos > 0 && value[startPos - 1] !== ' ') || + startPos < 0 || + mention.includes(this.mentionTrigger[i], 1) || + mention.includes(' ') + ) { + this.cursorMention = null; + this.cursorMentionStart = -1; + this.cursorMentionEnd = -1; + this.cursorEnd = -1; + this.value = ''; + } else { + this.cursorMention = mention[0]; + this.cursorMentionStart = startPos; + this.cursorMentionEnd = endPos; + this.cursorEnd = selectionStart; + this.value = mention.slice(1); + return; + } + i--; + } + } + + hideMention() { + if (this.overlayRef && this.overlayRef.hasAttached()) { + this.overlayRef.detach(); + this.cdr.markForCheck(); + this.isOpen = false; + } + } + + showMention() { + this.attachOverlay(); + this.isOpen = true; + this.cdr.markForCheck(); + } + + attachOverlay() { + if (!this.overlayRef) { + this.portal = new ComponentPortal(MentionComponent, this.viewContainerRef); + this.overlayRef = this.overlay.create(this.getOverlayConfig()); + } + if (this.overlayRef && !this.overlayRef.hasAttached()) { + this.mentionRef = this.overlayRef.attach(this.portal); + this.mentionRef.instance.mentionItemTemplate = this.mentionItemTemplate; + this.mentionRef.instance.mentionNotFoundContent = this.mentionNotFoundContent; + } + this.updatePositions(); + } + + getOverlayConfig() { + const target = this.el; + return new OverlayConfig({ + positionStrategy: this.getOverlayPosition(target), + scrollStrategy: this.overlay.scrollStrategies.reposition(), + disposeOnNavigation: true, + }); + } + + getOverlayPosition(target) { + const positions = [ + new ConnectionPositionPair({ originX: 'start', originY: 'bottom' }, { overlayX: 'start', overlayY: 'top' }), + new ConnectionPositionPair({ originX: 'start', originY: 'top' }, { overlayX: 'start', overlayY: 'bottom' }), + ]; + this.positionStrategy = this.overlay + .position() + .flexibleConnectedTo(target) + .withPositions(positions) + .withFlexibleDimensions(false) + .withPush(false); + return this.positionStrategy; + } + + updatePositions() { + const coordinates = getCaretCoordinates(this.nativeElement, this.cursorEnd); + const top = coordinates.top - this.nativeElement.getBoundingClientRect().height - this.nativeElement.scrollTop; + const left = coordinates.left - this.nativeElement.scrollLeft; + this.positionStrategy.withDefaultOffsetX(left).withDefaultOffsetY(top); + this.positionStrategy.withPositions([...DEFAULT_MENTION_BOTTOM_POSITIONS]); + this.positionStrategy.apply(); + this.setMentionData(); + } + + suggestionsFilter(value: string, emit: boolean) { + if (this.previousValue === value && value !== this.cursorMention[0]) { + return; + } + this.previousValue = value; + if (emit) { + this.mentionSearchChange.emit({ + value: this.value, + trigger: this.cursorMention, + }); + } + const searchValue = this.value.toLowerCase(); + this.filterSuggestions = this.mentionSuggestions.filter((suggestion) => + this.mentionValueParse(suggestion).toLowerCase().includes(searchValue) + ); + } + + setMentionData() { + Object.assign(this.mentionRef.instance, { + suggestions: this.filterSuggestions, + activeIndex: this.activeIndex, + loading: this.mentionLoading, + trigger: this, + position: this.mentionPosition, + }); + } + + selectSuggestion(suggestion) { + const value = this.mentionValueParse(suggestion); + this.insertMention({ + mention: value, + startPos: this.cursorMentionStart, + endPos: this.cursorMentionEnd, + }); + this.mentionSelectItem.emit(suggestion); + this.hideMention(); + this.activeIndex = -1; + } + + insertMention(mention: Mention) { + const value: string = this.el.nativeElement.value; + const insertValue = mention.mention.trim() + ' '; + const newValue = [value.slice(0, mention.startPos + 1), insertValue, value.slice(mention.endPos, value.length)].join(''); + this.el.nativeElement.value = newValue; + this.value = newValue; + } + + setPreviousItemActive() { + this.activeIndex = this.activeIndex - 1 < 0 ? this.filterSuggestions.length - 1 : this.activeIndex - 1; + this.cdr.markForCheck(); + this.scrollToFocusItem(); + } + + scrollToFocusItem() {} + + setNextItemActive() { + this.activeIndex = this.activeIndex + 1 <= this.filterSuggestions.length - 1 ? this.activeIndex + 1 : 0; + this.cdr.markForCheck(); + setTimeout(() => { + if (this.mentionRef) { + this.mentionRef.instance.scrollToFocusItem(); + } + }); + } + + ngOnDestroy() { + if (this.overlayRef) { + this.overlayRef.dispose(); + } + } +} diff --git a/devui/mention/mention.module.ts b/devui/mention/mention.module.ts new file mode 100644 index 00000000..4c1a1a0a --- /dev/null +++ b/devui/mention/mention.module.ts @@ -0,0 +1,12 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { LoadingModule } from 'ng-devui/loading'; +import { MentionComponent } from './mention.component'; +import { MentionDirective } from './mention.directive'; + +@NgModule({ + imports: [CommonModule, LoadingModule], + declarations: [MentionComponent, MentionDirective], + exports: [MentionComponent, MentionDirective] +}) +export class MentionModule {} diff --git a/devui/mention/mention.service.ts b/devui/mention/mention.service.ts new file mode 100644 index 00000000..4451db69 --- /dev/null +++ b/devui/mention/mention.service.ts @@ -0,0 +1,18 @@ +import { Injectable } from '@angular/core'; +import { Subject } from 'rxjs'; + +@Injectable({ + providedIn: 'root', +}) +export class MentionService { + + subs = new Subject(); + + scrollSubs = new Subject(); + + constructor() {} + + selectSuggestion (suggestion) { + this.subs.next(suggestion); + } +} diff --git a/devui/mention/mention.types.ts b/devui/mention/mention.types.ts new file mode 100644 index 00000000..ad9a3898 --- /dev/null +++ b/devui/mention/mention.types.ts @@ -0,0 +1,19 @@ +export interface Mention { + startPos: number; + endPos: number; + mention: string; +} + +export interface MentionOnSearchTypes { + value: string; + trigger: string; +} + +export interface MentionPositions { + x?: number; + y?: number; +} + +export type Mode = 'default' | 'extend'; + +export type PostionType = 'top' | 'bottom'; diff --git a/devui/mention/package.json b/devui/mention/package.json new file mode 100644 index 00000000..ded1e7a9 --- /dev/null +++ b/devui/mention/package.json @@ -0,0 +1,7 @@ +{ + "ngPackage": { + "lib": { + "entryFile": "public-api.ts" + } + } +} diff --git a/devui/mention/position.ts b/devui/mention/position.ts new file mode 100644 index 00000000..90d655e6 --- /dev/null +++ b/devui/mention/position.ts @@ -0,0 +1,51 @@ +/** + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE + */ + +import { ConnectedOverlayPositionChange, ConnectionPositionPair } from '@angular/cdk/overlay'; + +export const POSITION_MAP: { [key: string]: ConnectionPositionPair } = { + top: new ConnectionPositionPair({ originX: 'center', originY: 'top' }, { overlayX: 'center', overlayY: 'bottom' }), + topCenter: new ConnectionPositionPair({ originX: 'center', originY: 'top' }, { overlayX: 'center', overlayY: 'bottom' }), + topLeft: new ConnectionPositionPair({ originX: 'start', originY: 'top' }, { overlayX: 'start', overlayY: 'bottom' }), + topRight: new ConnectionPositionPair({ originX: 'end', originY: 'top' }, { overlayX: 'end', overlayY: 'bottom' }), + right: new ConnectionPositionPair({ originX: 'end', originY: 'center' }, { overlayX: 'start', overlayY: 'center' }), + rightTop: new ConnectionPositionPair({ originX: 'end', originY: 'top' }, { overlayX: 'start', overlayY: 'top' }), + rightBottom: new ConnectionPositionPair({ originX: 'end', originY: 'bottom' }, { overlayX: 'start', overlayY: 'bottom' }), + bottom: new ConnectionPositionPair({ originX: 'center', originY: 'bottom' }, { overlayX: 'center', overlayY: 'top' }), + bottomCenter: new ConnectionPositionPair({ originX: 'center', originY: 'bottom' }, { overlayX: 'center', overlayY: 'top' }), + bottomLeft: new ConnectionPositionPair({ originX: 'start', originY: 'bottom' }, { overlayX: 'start', overlayY: 'top' }), + bottomRight: new ConnectionPositionPair({ originX: 'end', originY: 'bottom' }, { overlayX: 'end', overlayY: 'top' }), + left: new ConnectionPositionPair({ originX: 'start', originY: 'center' }, { overlayX: 'end', overlayY: 'center' }), + leftTop: new ConnectionPositionPair({ originX: 'start', originY: 'top' }, { overlayX: 'end', overlayY: 'top' }), + leftBottom: new ConnectionPositionPair({ originX: 'start', originY: 'bottom' }, { overlayX: 'end', overlayY: 'bottom' }) +}; + +export const DEFAULT_TOOLTIP_POSITIONS = [POSITION_MAP.top, POSITION_MAP.right, POSITION_MAP.bottom, POSITION_MAP.left]; + +export const DEFAULT_CASCADER_POSITIONS = [POSITION_MAP.bottomLeft, POSITION_MAP.bottomRight, POSITION_MAP.topLeft, POSITION_MAP.topRight]; + +export const DEFAULT_MENTION_TOP_POSITIONS = [ + new ConnectionPositionPair({ originX: 'start', originY: 'bottom' }, { overlayX: 'start', overlayY: 'bottom' }), + new ConnectionPositionPair({ originX: 'start', originY: 'bottom' }, { overlayX: 'end', overlayY: 'bottom' }) +]; + +export const DEFAULT_MENTION_BOTTOM_POSITIONS = [ + POSITION_MAP.bottomLeft, + new ConnectionPositionPair({ originX: 'start', originY: 'bottom' }, { overlayX: 'end', overlayY: 'top' }) +]; + +export function getPlacementName(position: ConnectedOverlayPositionChange): string | undefined { + for (const placement in POSITION_MAP) { + if ( + position.connectionPair.originX === POSITION_MAP[placement].originX && + position.connectionPair.originY === POSITION_MAP[placement].originY && + position.connectionPair.overlayX === POSITION_MAP[placement].overlayX && + position.connectionPair.overlayY === POSITION_MAP[placement].overlayY + ) { + return placement; + } + } + return undefined; +} diff --git a/devui/mention/public-api.ts b/devui/mention/public-api.ts new file mode 100644 index 00000000..3768ba80 --- /dev/null +++ b/devui/mention/public-api.ts @@ -0,0 +1,5 @@ +export * from './mention.component'; +export * from './mention.directive'; +export * from './mention.module'; +export * from './position'; +export * from './utils'; diff --git a/devui/mention/utils.ts b/devui/mention/utils.ts new file mode 100644 index 00000000..033faf17 --- /dev/null +++ b/devui/mention/utils.ts @@ -0,0 +1,154 @@ +const properties = [ + 'direction', // RTL support + 'boxSizing', + 'width', // on Chrome and IE, exclude the scrollbar, so the mirror div wraps exactly as the textarea does + 'height', + 'overflowX', + 'overflowY', + + 'borderTopWidth', + 'borderRightWidth', + 'borderBottomWidth', + 'borderLeftWidth', + 'borderStyle', + + 'paddingTop', + 'paddingRight', + 'paddingBottom', + 'paddingLeft', + + 'fontStyle', + 'fontVariant', + 'fontWeight', + 'fontStretch', + 'fontSize', + 'fontSizeAdjust', + 'lineHeight', + 'fontFamily', + + 'textAlign', + 'textTransform', + 'textIndent', + 'textDecoration', + + 'letterSpacing', + 'wordSpacing', + + 'tabSize', + 'MozTabSize', +]; + +const isBrowser = typeof window !== 'undefined'; +const isFirefox = isBrowser && window['mozInnerScreenX'] != null; +const _parseInt = value => { + return parseInt(value, 10); +}; + +export function getCaretCoordinates(element, position, options?) { + if (!isBrowser) { + throw new Error('textarea-caret-position#getCaretCoordinates should only be called in a browser'); + } + + // isDebugMode 调试模式，用来定位光标位置的 + const isDebugMode = (options && options.isDebugMode) || false; + if (isDebugMode) { + const el = document.querySelector('#input-textarea-caret-position-mirror-div'); + if (el) { + el.parentNode.removeChild(el); + } + } + + const div = document.createElement('div'); + div.id = 'input-textarea-caret-position-mirror-div'; + document.body.appendChild(div); + + const style = div.style; + const computed = window.getComputedStyle ? window.getComputedStyle(element) : element.currentStyle; + const isInput = element.nodeName === 'INPUT'; + + style.whiteSpace = 'pre-wrap'; + if (!isInput) { + style.wordWrap = 'break-word'; + } + + style.position = 'absolute'; + if (!isDebugMode) { + style.visibility = 'hidden'; + } + + properties.forEach(function (prop) { + if (isInput && prop === 'lineHeight') { + if (computed.boxSizing === 'border-box') { + const height = _parseInt(computed.height); + const outerHeight = + _parseInt(computed.paddingTop) + + _parseInt(computed.paddingBottom) + + _parseInt(computed.borderTopWidth) + + _parseInt(computed.borderBottomWidth); + const targetHeight = outerHeight + _parseInt(computed.lineHeight); + if (height > targetHeight) { + style.lineHeight = height - outerHeight + 'px'; + } else if (height === targetHeight) { + style.lineHeight = computed.lineHeight; + } else { + style.lineHeight = '0'; + } + } else { + style.lineHeight = computed.height; + } + } else { + style[prop] = computed[prop]; + } + }); + + if (isFirefox) { + if (element.scrollHeight > _parseInt(computed.height)) { + style.overflowY = 'scroll'; + } + } else { + style.overflow = 'hidden'; + } + + div.textContent = element.value.substring(0, position); + if (isInput) { + div.textContent = div.textContent.replace(/\s/g, '\u00a0'); + } + + const span = document.createElement('span'); + span.textContent = element.value.substring(position) || '.'; + div.appendChild(span); + + const coordinates = { + top: span.offsetTop + _parseInt(computed['borderTopWidth']), + left: span.offsetLeft + _parseInt(computed['borderLeftWidth']), + height: _parseInt(computed['lineHeight']), + }; + + if (isDebugMode) { + span.style.backgroundColor = '#aaa'; + } else { + document.body.removeChild(div); + } + + return coordinates; +} + +export function getRegExp(prefix: string | string[]): RegExp { + const prefixArray = Array.isArray(prefix) ? prefix : [prefix]; + let prefixToken = prefixArray.join('').replace(/(\$|\^)/g, '\\$1'); + + if (prefixArray.length > 1) { + prefixToken = `[${prefixToken}]`; + } + + return new RegExp(`(\\s|^)(${prefixToken})[^\\s]*`, 'g'); +} + +export function getMentions(value: string, prefix: string | string[] = '@'): string[] { + if (typeof value !== 'string') { + return []; + } + const regex = getRegExp(prefix); + const mentions = value.match(regex); + return mentions !== null ? mentions.map((e) => e.trim()) : []; +} diff --git a/devui/modal/demo/modal-demo.module.ts b/devui/modal/demo/modal-demo.module.ts index bd8cf9d6..9d32ecd7 100755 --- a/devui/modal/demo/modal-demo.module.ts +++ b/devui/modal/demo/modal-demo.module.ts @@ -1,14 +1,14 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; +import { TranslateModule } from '@ngx-translate/core'; import { ButtonModule } from 'ng-devui/button'; +import { ModalModule } from 'ng-devui/modal'; import { DevUIApiComponent } from 'ng-devui/shared/devui-api/devui-api.component'; import { DevUIApiModule } from 'ng-devui/shared/devui-api/devui-api.module'; import { DevUICodeboxModule } from 'ng-devui/shared/devui-codebox'; import { TextInputModule } from 'ng-devui/text-input'; -import { TranslateModule } from '@ngx-translate/core'; import { DDemoNavModule } from 'src/app/component/d-demo-nav.module'; -import { ModalModule } from '../modal.module'; import { AutofocusComponent } from './autofocus/autofocus.component'; import { BasicUpdateComponent } from './basic-update/basic-update.component'; import { BasicComponent } from './basic/basic.component'; @@ -65,6 +65,6 @@ import { WarningComponent } from './warning/warning.component'; BasicUpdateComponent, FixedWrapperComponent ], - + }) export class ModalDemoModule {} diff --git a/devui/nav-sprite/demo/basic/basic.component.html b/devui/nav-sprite/demo/basic/basic.component.html index bf2b615f..18358b78 100644 --- a/devui/nav-sprite/demo/basic/basic.component.html +++ b/devui/nav-sprite/demo/basic/basic.component.html @@ -10,7 +10,7 @@

      2. Installation

      3. Import Modules

      BrowserModule BrowserAnimationsModule NgModule DevUIModule AppComponent.

      4. Import Styles

      -

      Add the devui style to the angular.json file.

      +

      Add the devui style sheet to the angular.json file.

      5. Start Development and Debugging

      $ ng serve --open

      DevUI Design

      diff --git a/devui/nav-sprite/demo/nav-sprite-demo.component.html b/devui/nav-sprite/demo/nav-sprite-demo.component.html index 8dbec4a1..1ec057ae 100644 --- a/devui/nav-sprite/demo/nav-sprite-demo.component.html +++ b/devui/nav-sprite/demo/nav-sprite-demo.component.html @@ -7,4 +7,11 @@
      +
      +
      {{ 'components.nav-sprite.scrollDemo.title' | translate }}
      +
      {{ 'components.nav-sprite.scrollDemo.description' | translate }}
      + + + +
    diff --git a/devui/nav-sprite/demo/nav-sprite-demo.component.ts b/devui/nav-sprite/demo/nav-sprite-demo.component.ts index 361a656a..be716f86 100644 --- a/devui/nav-sprite/demo/nav-sprite-demo.component.ts +++ b/devui/nav-sprite/demo/nav-sprite-demo.component.ts @@ -1,6 +1,6 @@ import { Component, OnDestroy, OnInit } from '@angular/core'; -import { DevuiSourceData } from 'ng-devui/shared/devui-codebox'; import { TranslateService, TranslationChangeEvent } from '@ngx-translate/core'; +import { DevuiSourceData } from 'ng-devui/shared/devui-codebox'; import { Subscription } from 'rxjs'; @Component({ @@ -15,6 +15,12 @@ export class NavSpriteDemoComponent implements OnInit, OnDestroy { { title: 'SCSS', language: 'css', code: require('!!raw-loader!./basic/basic.component.scss') }, ]; + scrollSource: Array = [ + { title: 'HTML', language: 'xml', code: require('!!raw-loader!./scroll-container/scroll-container.component.html') }, + { title: 'TS', language: 'typescript', code: require('!!raw-loader!./scroll-container/scroll-container.component.ts') }, + { title: 'SCSS', language: 'css', code: require('!!raw-loader!./scroll-container/scroll-container.component.scss') }, + ]; + navItems = []; subs: Subscription = new Subscription(); constructor(private translate: TranslateService) {} @@ -36,7 +42,9 @@ export class NavSpriteDemoComponent implements OnInit, OnDestroy { setNavValues(values) { this.navItems = [ - { dAnchorLink: 'basic', value: values['basic-usage'] } + { dAnchorLink: 'basic', value: values['basic-usage'] }, + { dAnchorLink: 'sprite', value: values['sprite-usage'] }, + { dAnchorLink: 'scroll', value: values['scroll-usage'] }, ]; } diff --git a/devui/nav-sprite/demo/nav-sprite-demo.module.ts b/devui/nav-sprite/demo/nav-sprite-demo.module.ts index fa33637c..e6d69b3f 100644 --- a/devui/nav-sprite/demo/nav-sprite-demo.module.ts +++ b/devui/nav-sprite/demo/nav-sprite-demo.module.ts @@ -1,14 +1,15 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; +import { TranslateModule } from '@ngx-translate/core'; +import { NavSpriteModule } from 'ng-devui/nav-sprite'; import { DevUIApiComponent } from 'ng-devui/shared/devui-api/devui-api.component'; import { DevUIApiModule } from 'ng-devui/shared/devui-api/devui-api.module'; import { DevUICodeboxModule } from 'ng-devui/shared/devui-codebox'; -import { TranslateModule } from '@ngx-translate/core'; import { DDemoNavModule } from 'src/app/component/d-demo-nav.module'; -import { NavSpriteModule } from '../nav-sprite.module'; import { BasicComponent } from './basic/basic.component'; import { NavSpriteDemoComponent } from './nav-sprite-demo.component'; +import { ScrollContainerComponent } from './scroll-container/scroll-container.component'; @NgModule({ imports: [ @@ -31,6 +32,6 @@ import { NavSpriteDemoComponent } from './nav-sprite-demo.component'; }, ]), ], - declarations: [NavSpriteDemoComponent, BasicComponent] + declarations: [NavSpriteDemoComponent, BasicComponent, ScrollContainerComponent] }) export class NavSpriteDemoModule { } diff --git a/devui/nav-sprite/demo/scroll-container/scroll-container.component.html b/devui/nav-sprite/demo/scroll-container/scroll-container.component.html new file mode 100644 index 00000000..78781833 --- /dev/null +++ b/devui/nav-sprite/demo/scroll-container/scroll-container.component.html @@ -0,0 +1,40 @@ +
    +

    This is Header.

    +
    +
    +

    Getting Started

    +

    Guides: How to use DevUI in your project

    +

    1. Create a project

    +

    It is recommended to use @angular/cli to create your project.

    +

    $ ng new New-Project

    +

    2. Installation

    +

    Go to your project folder and use npm to install DevUI.

    +

    3. Import Modules

    +

    BrowserModule BrowserAnimationsModule NgModule DevUIModule AppComponent.

    +

    4. Import Styles

    +

    Add the devui style sheet to the angular.json file.

    +

    5. Start Development and Debugging

    +

    $ ng serve --open

    +

    DevUI Design

    +

    Introduction

    +

    DevUI Design allows developers to focus exclusively on thinking about.

    +

    Purpose & Rules

    +

    Design Resource

    +

    DevUI Design provides comprehensive design principles, best practices, design resource documents.

    +

    Who's using DevUI Design

    +

    DevUI Design provides comprehensive design principles, best practices, design resource documents.

    +
    +
    +
    + + diff --git a/devui/nav-sprite/demo/scroll-container/scroll-container.component.scss b/devui/nav-sprite/demo/scroll-container/scroll-container.component.scss new file mode 100644 index 00000000..e4d25120 --- /dev/null +++ b/devui/nav-sprite/demo/scroll-container/scroll-container.component.scss @@ -0,0 +1,12 @@ +@import '~ng-devui/styles-var/devui-var.scss'; + +.page { + max-height: 200px; + overflow-y: auto; + + .page-header { + position: sticky; + top: 0; + background-color: $devui-base-bg; + } +} diff --git a/devui/nav-sprite/demo/scroll-container/scroll-container.component.ts b/devui/nav-sprite/demo/scroll-container/scroll-container.component.ts new file mode 100644 index 00000000..9cf7115a --- /dev/null +++ b/devui/nav-sprite/demo/scroll-container/scroll-container.component.ts @@ -0,0 +1,19 @@ +import { ChangeDetectorRef, Component, ElementRef, OnInit, ViewChild } from '@angular/core'; + +@Component({ + selector: 'd-demo-scroll-container', + templateUrl: './scroll-container.component.html', + styleUrls: ['./scroll-container.component.scss'], +}) +export class ScrollContainerComponent implements OnInit { + @ViewChild('header', { static: true }) headerRef: ElementRef; + + view = { top: 0, bottom: 0 }; + + constructor(private cdr: ChangeDetectorRef) {} + + ngOnInit() { + this.view.top = this.headerRef.nativeElement.clientHeight; + this.cdr.detectChanges(); + } +} diff --git a/devui/nav-sprite/demo/sprite/sprite.component.html b/devui/nav-sprite/demo/sprite/sprite.component.html deleted file mode 100644 index ae31dae5..00000000 --- a/devui/nav-sprite/demo/sprite/sprite.component.html +++ /dev/null @@ -1,29 +0,0 @@ -
    - -
    - -
    - -
    - - -
    - {{ item.label }} - -
    -     diff --git a/devui/nav-sprite/demo/sprite/sprite.component.scss b/devui/nav-sprite/demo/sprite/sprite.component.scss deleted file mode 100644 index f02a0214..00000000 --- a/devui/nav-sprite/demo/sprite/sprite.component.scss +++ /dev/null @@ -1,12 +0,0 @@ -.nav-item { - i { - visibility: hidden; - margin-left: 8px; - } - - &:hover { - i { - visibility: visible; - } - } -} diff --git a/devui/nav-sprite/demo/sprite/sprite.component.ts b/devui/nav-sprite/demo/sprite/sprite.component.ts deleted file mode 100644 index 727d2f86..00000000 --- a/devui/nav-sprite/demo/sprite/sprite.component.ts +++ /dev/null @@ -1,73 +0,0 @@ -import { Component, ElementRef, TemplateRef, ViewChild } from '@angular/core'; - -@Component({ - selector: 'd-demo-sprite', - templateUrl: './sprite.component.html', - styleUrls: ['./sprite.component.scss'], -}) -export class SpriteComponent { - content = '' + - ` # Getting Started - Guides: How to use DevUI in your project - ## 1. Create a project - It is recommended to use @angular/cli to create your project. - $ ng new New-Project - ## 2. Installation - Go to your project folder and use npm to install DevUI. - ## 3. Import Modules - BrowserModule BrowserAnimationsModule NgModule DevUIModule AppComponent. - ## 4. Import Styles - Add the devui style to the angular.json file. - ## 5. Start Development and Debugging - $ ng serve --open - # DevUI Design - ## Introduction - DevUI Design allows developers to focus exclusively on thinking about. - ## Purpose & Rules - ### Design Resource - DevUI Design provides comprehensive design principles, best practices, design resource documents. - ### Who's using DevUI Design -DevUI Design provides comprehensive design principles, best practices, design resource documents. - `; - - @ViewChild('navItemTemp') navItemTemp: TemplateRef; - - mdInit = false; - - isNavMin = true; - - targetContainer = null; - - spriteOption = { - top: '40%', - left: '85%', - zIndex: 10, - }; - - private navSpriteInstance; - - constructor(private ele: ElementRef) {} - - contentChange() { - setTimeout(() => { - if (this.navSpriteInstance) { - this.navSpriteInstance.getNavData(); - } - }, 500); - } - - edit(item) { - console.log(item); - } - - afterNavInit(e) { - this.navSpriteInstance = e; - } - - afterEditorInit() { - setTimeout(() => { - this.mdInit = true; - }); - this.targetContainer = this.ele.nativeElement.querySelector('.devui-md-view-container'); - } -} diff --git a/devui/nav-sprite/doc/api-cn.md b/devui/nav-sprite/doc/api-cn.md index ed9be07c..4261fbbd 100644 --- a/devui/nav-sprite/doc/api-cn.md +++ b/devui/nav-sprite/doc/api-cn.md @@ -19,6 +19,9 @@ import { NavSpriteModule } from 'ng-devui/nav-sprite'; | 参数 | 类型 | 默认 | 说明 | 跳转 Demo | | :------------------:| :---------------------------------: | :-------------------------: | :------------------------------ | -------------------------------------------- | | target | `HTMLElement` | -- | 必选，目录存放的位置 | [基本用法](demo#basic) | +| scrollTarget | `HTMLElement` | -- | 可选，指定滚动容器 | [指定容器用法](demo#scroll) | +| view | `{top?:number,bottom?:number}` | {top:0,bottom:0} | 可选，用于可视区域的调整，比如顶部有固定位置的头部等，数值对应被遮挡的顶部或底部的高度 | [指定容器用法](demo#scroll) | +| hashSupport | `boolean` | `false` | 可选，是否支持锚点 | -- | | mode | [`Mode`](#Mode) | 'default' | 可选，模式`default \| sprite` | [模式](demo#sprite) | | maxLevel | `number` | 3 | 可选，生成目录的最大层级 | [最大层级](demo#sprite) | | title | `string` | 'menu' | 可选，名称 | [名称](demo#basic) | diff --git a/devui/nav-sprite/doc/api-en.md b/devui/nav-sprite/doc/api-en.md index 571226e2..6a2cb2fa 100644 --- a/devui/nav-sprite/doc/api-en.md +++ b/devui/nav-sprite/doc/api-en.md @@ -19,6 +19,9 @@ In the page:： | Parameter | Type | Default | Description | Jump to Demo | | :------------------:| :---------------------------------: | :-------------------------: | :------------------------------ | -------------------------------------------- | | target | `HTMLElement` | -- | Required. Location of the generated directory | [Basic usage](demo#basic) | +| scrollTarget | `HTMLElement` | -- | Optional. Specifies the scrolling container. | [Scroll Usage](demo#scroll) | +| view | `{top?:number,bottom?:number}` | {top:0,bottom:0} | Optional. It is used to adjust the visible region, for example, the head with a fixed position on the top. The value corresponds to the height of the blocked top or bottom. | [Scroll Usage](demo#scroll) | +| hashSupport | `boolean` | `false` | Optional. Specifies whether to support anchors | -- | | mode | [`Mode`](#Mode) | 'default' | Optional. mode`default \| sprite` | [mode](demo#sprite) | | maxLevel | `number` | 3 | Optional. Maximum level of the generated directory | [maxLevel](demo#sprite) | | title | `string` | 'menu' | Optional. title | [title](demo#basic) | diff --git a/devui/nav-sprite/nav-sprite.component.html b/devui/nav-sprite/nav-sprite.component.html index a2eb1b9f..77cdf7ce 100644 --- a/devui/nav-sprite/nav-sprite.component.html +++ b/devui/nav-sprite/nav-sprite.component.html @@ -29,13 +29,13 @@ -