From 1e5fcff6ad2331c5f7f5f76e4dc364892c3e9ee0 Mon Sep 17 00:00:00 2001 From: Justineo Date: Thu, 13 Aug 2020 11:47:56 +0800 Subject: [PATCH] feat: publicize doc implemetation --- .editorconfig | 9 + .eslintrc.js | 69 + .gitignore | 12 + README.md | 124 + app.html | 9 + app.js | 43 + app/router.scrollBehavior.js | 23 + assets/README.md | 8 + assets/styles/global.styl | 103 + assets/styles/mermaid-cli.css | 50 + assets/styles/mermaid.css | 50 + assets/styles/post.styl | 306 + build.sh | 1 + common/i18n.js | 99 + common/region.js | 2070 ++ common/util.js | 38 + components/OneBackToTop.vue | 84 + components/OneDemo.vue | 137 + components/OneDetails.vue | 115 + components/OneFooter.vue | 203 + components/OneHeader.vue | 89 + components/OneMenu.vue | 313 + layouts/default.vue | 96 + middleware/README.md | 9 + nuxt.config.js | 125 + one/build/customBlock.js | 226 + one/build/deps.js | 48 + one/build/details.js | 226 + one/build/generate.js | 3 + one/build/generator.js | 105 + one/build/i18n.js | 13 + one/build/language.js | 99 + one/build/page.js | 94 + one/build/refBlock.js | 226 + one/build/rehype-demo.js | 54 + one/build/rehype-link.js | 26 + one/build/rehype-preview-img.js | 98 + one/build/rehype-util-class.js | 36 + one/build/remark-custom.js | 30 + one/build/remark-demo.js | 125 + one/build/remark-details.js | 39 + one/build/remark-extract-frontmatter.js | 16 + one/build/remark-ref.js | 49 + one/build/util.js | 29 + one/build/watch.js | 33 + one/docs/advanced/custom-rules.md | 89 + one/docs/advanced/global-config.md | 61 + one/docs/advanced/overlay.md | 124 + one/docs/advanced/theming.md | 134 + one/docs/components/accordion.md | 61 + one/docs/components/alert-box.md | 69 + one/docs/components/alert.md | 92 + one/docs/components/anchor.md | 64 + one/docs/components/autocomplete.md | 91 + one/docs/components/badge.md | 52 + one/docs/components/breadcrumb-item.md | 48 + one/docs/components/breadcrumb.md | 114 + one/docs/components/button-group.md | 110 + one/docs/components/button.md | 93 + one/docs/components/calendar.md | 123 + one/docs/components/carousel.md | 110 + one/docs/components/check-button-group.md | 88 + one/docs/components/checkbox-group.md | 88 + one/docs/components/checkbox.md | 83 + one/docs/components/collapse.md | 52 + one/docs/components/column.md | 75 + one/docs/components/confirm-box.md | 41 + one/docs/components/date-picker.md | 214 + one/docs/components/dialog.md | 130 + one/docs/components/drawer.md | 98 + one/docs/components/dropdown.md | 169 + one/docs/components/embedded.md | 72 + one/docs/components/field.md | 131 + one/docs/components/fieldset.md | 30 + one/docs/components/filter-panel.md | 58 + one/docs/components/form.md | 198 + one/docs/components/grid-column.md | 26 + one/docs/components/grid-container.md | 48 + one/docs/components/grid-row.md | 17 + one/docs/components/icon.md | 33 + one/docs/components/input-group.md | 21 + one/docs/components/input.md | 120 + one/docs/components/label.md | 36 + one/docs/components/link.md | 51 + one/docs/components/loading.md | 56 + one/docs/components/menu.md | 147 + one/docs/components/number-input.md | 107 + one/docs/components/option-group.md | 121 + one/docs/components/option.md | 37 + one/docs/components/overlay.md | 102 + one/docs/components/pagination.md | 67 + one/docs/components/popover.md | 70 + one/docs/components/progress.md | 60 + one/docs/components/prompt-box.md | 60 + one/docs/components/radio-button-group.md | 88 + one/docs/components/radio-group.md | 88 + one/docs/components/radio.md | 73 + one/docs/components/region-picker.md | 81 + one/docs/components/schedule.md | 154 + one/docs/components/search-box.md | 176 + one/docs/components/select.md | 193 + one/docs/components/slider.md | 129 + one/docs/components/span.md | 11 + one/docs/components/steps.md | 91 + one/docs/components/switch.md | 75 + one/docs/components/tab.md | 57 + one/docs/components/table.md | 129 + one/docs/components/tabs.md | 137 + one/docs/components/tabs/index.vue | 5 + one/docs/components/tabs/tab.vue | 5 + one/docs/components/tabs/tab2.vue | 5 + one/docs/components/tabs/tab3.vue | 5 + one/docs/components/tag.md | 100 + one/docs/components/textarea.md | 89 + one/docs/components/time-picker.md | 114 + one/docs/components/toast.md | 74 + one/docs/components/tooltip.md | 78 + one/docs/components/transfer.md | 170 + one/docs/components/tree.md | 166 + one/docs/components/uploader.md | 312 + one/docs/demo/accordion/multiple.vue | 28 + one/docs/demo/accordion/size.vue | 40 + one/docs/demo/alert-box/title.vue | 65 + one/docs/demo/alert-box/type.vue | 67 + one/docs/demo/alert/multiple.vue | 46 + one/docs/demo/alert/type.vue | 41 + one/docs/demo/anchor/offset.vue | 135 + one/docs/demo/anchor/sticky.vue | 138 + one/docs/demo/autocomplete/normal.vue | 113 + one/docs/demo/badge/dot.vue | 45 + one/docs/demo/badge/number.vue | 61 + one/docs/demo/badge/text.vue | 58 + one/docs/demo/breadcrumb/base.vue | 26 + one/docs/demo/breadcrumb/datasource.vue | 32 + one/docs/demo/breadcrumb/redirect.vue | 55 + one/docs/demo/breadcrumb/separator.vue | 49 + one/docs/demo/breadcrumb/size.vue | 47 + one/docs/demo/breadcrumb/style.vue | 47 + one/docs/demo/button-group/disabled.vue | 76 + one/docs/demo/button-group/items.vue | 43 + one/docs/demo/button-group/size.vue | 41 + one/docs/demo/button-group/style.vue | 43 + one/docs/demo/button/disabled.vue | 58 + one/docs/demo/button/loading.vue | 66 + one/docs/demo/button/size.vue | 35 + one/docs/demo/button/style.vue | 57 + one/docs/demo/calendar/default.vue | 39 + one/docs/demo/calendar/multiple-ranges.vue | 49 + one/docs/demo/calendar/range-multiple.vue | 79 + one/docs/demo/carousel/autoplay.vue | 54 + one/docs/demo/carousel/indicator.vue | 68 + one/docs/demo/carousel/switch.vue | 64 + one/docs/demo/check-button-group/default.vue | 65 + one/docs/demo/checkbox-group/default.vue | 65 + one/docs/demo/checkbox/size.vue | 63 + one/docs/demo/checkbox/value.vue | 33 + one/docs/demo/collapse/size.vue | 34 + one/docs/demo/confirm-box/custom.vue | 41 + one/docs/demo/date-picker/default.vue | 52 + one/docs/demo/date-picker/range.vue | 54 + one/docs/demo/date-picker/shortcuts.vue | 62 + one/docs/demo/dialog/async.vue | 121 + one/docs/demo/dialog/custom.vue | 73 + one/docs/demo/dialog/draggable.vue | 38 + one/docs/demo/dialog/modal.vue | 64 + one/docs/demo/dialog/stack.vue | 62 + one/docs/demo/directives/drag/axis.vue | 51 + one/docs/demo/directives/drag/base.vue | 28 + one/docs/demo/directives/drag/containment.vue | 38 + one/docs/demo/directives/drag/targets.vue | 48 + one/docs/demo/directives/nudge.vue | 77 + one/docs/demo/directives/outside/click.vue | 54 + .../directives/outside/hover-with-delay.vue | 64 + one/docs/demo/directives/outside/hover.vue | 49 + one/docs/demo/directives/resize.vue | 98 + one/docs/demo/drawer/custom.vue | 73 + one/docs/demo/drawer/modal.vue | 64 + one/docs/demo/drawer/placement.vue | 103 + one/docs/demo/dropdown/disable.vue | 105 + one/docs/demo/dropdown/inline.vue | 70 + one/docs/demo/dropdown/other.vue | 132 + one/docs/demo/dropdown/searchable.vue | 168 + one/docs/demo/dropdown/size.vue | 72 + one/docs/demo/dropdown/style.vue | 59 + one/docs/demo/embedded/size.vue | 50 + one/docs/demo/filter-panel/default.vue | 63 + one/docs/demo/focus-visible.vue | 62 + one/docs/demo/form/disabled.vue | 38 + one/docs/demo/form/normal.vue | 84 + one/docs/demo/form/readonly.vue | 38 + one/docs/demo/form/validate.vue | 326 + one/docs/demo/grid/default.vue | 82 + one/docs/demo/grid/fixed.vue | 77 + one/docs/demo/icon/default.vue | 68 + one/docs/demo/input-group/default.vue | 126 + one/docs/demo/input/disabled.vue | 61 + one/docs/demo/input/readonly.vue | 61 + one/docs/demo/input/size.vue | 39 + one/docs/demo/label/default.vue | 55 + one/docs/demo/link/default.vue | 55 + one/docs/demo/loading/layout.vue | 34 + one/docs/demo/loading/size.vue | 90 + one/docs/demo/loading/slot.vue | 68 + one/docs/demo/loading/style.vue | 43 + one/docs/demo/menu/collaspible.vue | 97 + one/docs/demo/menu/normal.vue | 86 + one/docs/demo/menu/slot.vue | 95 + one/docs/demo/number-input/disabled.vue | 55 + one/docs/demo/number-input/readonly.vue | 55 + one/docs/demo/number-input/size.vue | 40 + one/docs/demo/overlay/position.vue | 67 + one/docs/demo/overlay/relative-base.vue | 45 + one/docs/demo/overlay/relative.less | 18 + .../stack-display-order-with-on-overlay.vue | 100 + one/docs/demo/overlay/stack-display-order.vue | 84 + one/docs/demo/overlay/stack-on-overlay.vue | 69 + one/docs/demo/pagination/goto.vue | 37 + one/docs/demo/pagination/size.vue | 52 + one/docs/demo/popover/position.vue | 224 + one/docs/demo/popover/trigger.vue | 78 + one/docs/demo/popover/ui.vue | 64 + one/docs/demo/progress/default.vue | 74 + one/docs/demo/prompt-box/base.vue | 43 + one/docs/demo/radio-button-group/default.vue | 77 + one/docs/demo/radio-group/default.vue | 62 + one/docs/demo/radio/model.vue | 47 + one/docs/demo/radio/size.vue | 47 + one/docs/demo/region-picker/default.vue | 44 + one/docs/demo/schedule/default.vue | 71 + one/docs/demo/search-box/disabled.vue | 69 + one/docs/demo/search-box/size.vue | 43 + one/docs/demo/search-box/style.vue | 22 + one/docs/demo/search-box/suggestion.vue | 78 + one/docs/demo/select/inline.vue | 102 + one/docs/demo/select/multiple.vue | 79 + one/docs/demo/select/searchable.vue | 38 + one/docs/demo/select/size.vue | 59 + one/docs/demo/slider/buffer.vue | 24 + one/docs/demo/slider/editable.vue | 28 + one/docs/demo/slider/range.vue | 24 + one/docs/demo/slider/size.vue | 24 + one/docs/demo/slider/steps.vue | 35 + one/docs/demo/slider/variant.vue | 104 + one/docs/demo/steps/default.vue | 117 + one/docs/demo/steps/status.vue | 54 + one/docs/demo/switch/size.vue | 64 + one/docs/demo/switch/value.vue | 33 + one/docs/demo/table/advanced.vue | 229 + one/docs/demo/table/basic.vue | 151 + one/docs/demo/table/expandable.vue | 158 + one/docs/demo/table/fixed.vue | 145 + one/docs/demo/table/scrollable.vue | 125 + one/docs/demo/tabs/disabled.vue | 57 + one/docs/demo/tabs/route.vue | 46 + one/docs/demo/tabs/size.vue | 73 + one/docs/demo/tabs/style.vue | 72 + one/docs/demo/tag/removable.vue | 53 + one/docs/demo/tag/selectable.vue | 53 + one/docs/demo/tag/size.vue | 72 + one/docs/demo/textarea/disabled.vue | 46 + one/docs/demo/textarea/readonly.vue | 48 + one/docs/demo/textarea/size.vue | 29 + one/docs/demo/time-picker/datasource.vue | 37 + one/docs/demo/time-picker/mode.vue | 47 + one/docs/demo/time-picker/range.vue | 29 + one/docs/demo/toast/default.vue | 54 + one/docs/demo/toast/plugin.vue | 41 + one/docs/demo/tooltip/position.vue | 224 + one/docs/demo/tooltip/style.vue | 45 + one/docs/demo/tooltip/trigger.vue | 78 + one/docs/demo/transfer/custom-search.vue | 196 + one/docs/demo/transfer/flat.vue | 177 + one/docs/demo/transfer/no-search.vue | 149 + one/docs/demo/transfer/size.vue | 163 + one/docs/demo/tree/custom-item.vue | 200 + one/docs/demo/tree/default.vue | 184 + one/docs/demo/tree/size.vue | 81 + one/docs/demo/ui.vue | 41 + one/docs/demo/uploader/custom.vue | 83 + one/docs/demo/uploader/file.vue | 57 + one/docs/demo/uploader/image.vue | 54 + one/docs/demo/uploader/validate.vue | 53 + one/docs/directives/v-drag.md | 150 + one/docs/directives/v-longpress.md | 60 + one/docs/directives/v-nudge.md | 81 + one/docs/directives/v-outside.md | 91 + one/docs/directives/v-resize.md | 77 + one/docs/en-US/components/alert-box.md | 69 + one/docs/en-US/components/alert.md | 91 + one/docs/en-US/components/breadcrumb-item.md | 48 + one/docs/en-US/components/breadcrumb.md | 116 + one/docs/en-US/components/button-group.md | 110 + one/docs/en-US/components/button.md | 93 + one/docs/en-US/components/calendar.md | 119 + one/docs/en-US/components/carousel.md | 107 + .../en-US/components/check-button-group.md | 86 + one/docs/en-US/components/checkbox-group.md | 86 + one/docs/en-US/components/checkbox.md | 83 + one/docs/en-US/components/column.md | 73 + one/docs/en-US/components/confirm-box.md | 41 + one/docs/en-US/components/date-picker.md | 214 + one/docs/en-US/components/dialog.md | 130 + one/docs/en-US/components/dropdown.md | 162 + one/docs/en-US/components/filter-panel.md | 58 + one/docs/en-US/components/grid-column.md | 26 + one/docs/en-US/components/grid-container.md | 48 + one/docs/en-US/components/grid-row.md | 17 + one/docs/en-US/components/icon.md | 33 + one/docs/en-US/components/input.md | 119 + one/docs/en-US/components/link.md | 51 + one/docs/en-US/components/loading.md | 56 + one/docs/en-US/components/option-group.md | 113 + one/docs/en-US/components/option.md | 37 + one/docs/en-US/components/overlay.md | 102 + one/docs/en-US/components/pagination.md | 67 + one/docs/en-US/components/popover.md | 70 + one/docs/en-US/components/progress.md | 58 + one/docs/en-US/components/prompt-box.md | 58 + .../en-US/components/radio-button-group.md | 86 + one/docs/en-US/components/radio-group.md | 86 + one/docs/en-US/components/radio.md | 73 + one/docs/en-US/components/region-picker.md | 79 + one/docs/en-US/components/schedule.md | 146 + one/docs/en-US/components/search-box.md | 177 + one/docs/en-US/components/select.md | 184 + one/docs/en-US/components/slider.md | 126 + one/docs/en-US/components/steps.md | 89 + one/docs/en-US/components/switch.md | 75 + one/docs/en-US/components/table.md | 129 + one/docs/en-US/components/tabs/index.vue | 5 + one/docs/en-US/components/tabs/tab.vue | 5 + one/docs/en-US/components/tabs/tab2.vue | 5 + one/docs/en-US/components/tabs/tab3.vue | 5 + one/docs/en-US/components/textarea.md | 89 + one/docs/en-US/components/toast.md | 74 + one/docs/en-US/components/tooltip.md | 78 + one/docs/en-US/components/transfer.md | 162 + one/docs/en-US/components/tree.md | 153 + one/docs/en-US/components/uploader.md | 292 + .../getting-started/babel-plugin-veui.md | 78 + .../en-US/getting-started/focus-visible.md | 33 + one/docs/en-US/getting-started/index.md | 101 + .../en-US/getting-started/style-variants.md | 35 + one/docs/en-US/getting-started/veui-loader.md | 64 + one/docs/en-US/index.md | 30 + one/docs/getting-started/babel-plugin-veui.md | 78 + one/docs/getting-started/focus-visible.md | 33 + one/docs/getting-started/index.md | 103 + one/docs/getting-started/style-variants.md | 35 + one/docs/getting-started/veui-loader.md | 64 + one/docs/index.md | 28 + one/docs/nav.json | 805 + one/docs/plugins/alert.md | 38 + one/docs/plugins/confirm.md | 29 + one/docs/plugins/prompt.md | 29 + one/docs/plugins/toast.md | 34 + one/templates/page.etpl | 30 + package-lock.json | 19501 ++++++++++++++++ package.json | 93 + plugins/README.md | 8 + plugins/algolia.js | 32 + plugins/hm.js | 14 + plugins/i18n.js | 11 + plugins/l10n.js | 43 + static/README.md | 11 + static/icons/angle.svg | 1 + .../development/advanced/overlay-tree.png | Bin 0 -> 41617 bytes .../development/uploader/demo-image1.jpg | Bin 0 -> 168199 bytes .../development/uploader/demo-image2.jpg | Bin 0 -> 120897 bytes .../development/uploader/demo-image3.jpg | Bin 0 -> 253293 bytes static/monitor.html | 1 + stylelint.config.js | 7 + 372 files changed, 50636 insertions(+) create mode 100644 .editorconfig create mode 100644 .eslintrc.js create mode 100644 .gitignore create mode 100644 README.md create mode 100644 app.html create mode 100644 app.js create mode 100644 app/router.scrollBehavior.js create mode 100644 assets/README.md create mode 100644 assets/styles/global.styl create mode 100644 assets/styles/mermaid-cli.css create mode 100644 assets/styles/mermaid.css create mode 100644 assets/styles/post.styl create mode 100644 build.sh create mode 100644 common/i18n.js create mode 100644 common/region.js create mode 100644 common/util.js create mode 100644 components/OneBackToTop.vue create mode 100644 components/OneDemo.vue create mode 100644 components/OneDetails.vue create mode 100644 components/OneFooter.vue create mode 100644 components/OneHeader.vue create mode 100644 components/OneMenu.vue create mode 100644 layouts/default.vue create mode 100644 middleware/README.md create mode 100644 nuxt.config.js create mode 100644 one/build/customBlock.js create mode 100644 one/build/deps.js create mode 100644 one/build/details.js create mode 100644 one/build/generate.js create mode 100644 one/build/generator.js create mode 100644 one/build/i18n.js create mode 100644 one/build/language.js create mode 100644 one/build/page.js create mode 100644 one/build/refBlock.js create mode 100644 one/build/rehype-demo.js create mode 100644 one/build/rehype-link.js create mode 100644 one/build/rehype-preview-img.js create mode 100644 one/build/rehype-util-class.js create mode 100644 one/build/remark-custom.js create mode 100644 one/build/remark-demo.js create mode 100644 one/build/remark-details.js create mode 100644 one/build/remark-extract-frontmatter.js create mode 100644 one/build/remark-ref.js create mode 100644 one/build/util.js create mode 100644 one/build/watch.js create mode 100644 one/docs/advanced/custom-rules.md create mode 100644 one/docs/advanced/global-config.md create mode 100644 one/docs/advanced/overlay.md create mode 100644 one/docs/advanced/theming.md create mode 100644 one/docs/components/accordion.md create mode 100644 one/docs/components/alert-box.md create mode 100644 one/docs/components/alert.md create mode 100644 one/docs/components/anchor.md create mode 100644 one/docs/components/autocomplete.md create mode 100644 one/docs/components/badge.md create mode 100644 one/docs/components/breadcrumb-item.md create mode 100644 one/docs/components/breadcrumb.md create mode 100644 one/docs/components/button-group.md create mode 100644 one/docs/components/button.md create mode 100644 one/docs/components/calendar.md create mode 100644 one/docs/components/carousel.md create mode 100644 one/docs/components/check-button-group.md create mode 100644 one/docs/components/checkbox-group.md create mode 100644 one/docs/components/checkbox.md create mode 100644 one/docs/components/collapse.md create mode 100644 one/docs/components/column.md create mode 100644 one/docs/components/confirm-box.md create mode 100644 one/docs/components/date-picker.md create mode 100644 one/docs/components/dialog.md create mode 100644 one/docs/components/drawer.md create mode 100644 one/docs/components/dropdown.md create mode 100644 one/docs/components/embedded.md create mode 100644 one/docs/components/field.md create mode 100644 one/docs/components/fieldset.md create mode 100644 one/docs/components/filter-panel.md create mode 100644 one/docs/components/form.md create mode 100644 one/docs/components/grid-column.md create mode 100644 one/docs/components/grid-container.md create mode 100644 one/docs/components/grid-row.md create mode 100644 one/docs/components/icon.md create mode 100644 one/docs/components/input-group.md create mode 100644 one/docs/components/input.md create mode 100644 one/docs/components/label.md create mode 100644 one/docs/components/link.md create mode 100644 one/docs/components/loading.md create mode 100644 one/docs/components/menu.md create mode 100644 one/docs/components/number-input.md create mode 100644 one/docs/components/option-group.md create mode 100644 one/docs/components/option.md create mode 100644 one/docs/components/overlay.md create mode 100644 one/docs/components/pagination.md create mode 100644 one/docs/components/popover.md create mode 100644 one/docs/components/progress.md create mode 100644 one/docs/components/prompt-box.md create mode 100644 one/docs/components/radio-button-group.md create mode 100644 one/docs/components/radio-group.md create mode 100644 one/docs/components/radio.md create mode 100644 one/docs/components/region-picker.md create mode 100644 one/docs/components/schedule.md create mode 100644 one/docs/components/search-box.md create mode 100644 one/docs/components/select.md create mode 100644 one/docs/components/slider.md create mode 100644 one/docs/components/span.md create mode 100644 one/docs/components/steps.md create mode 100644 one/docs/components/switch.md create mode 100644 one/docs/components/tab.md create mode 100644 one/docs/components/table.md create mode 100644 one/docs/components/tabs.md create mode 100644 one/docs/components/tabs/index.vue create mode 100644 one/docs/components/tabs/tab.vue create mode 100644 one/docs/components/tabs/tab2.vue create mode 100644 one/docs/components/tabs/tab3.vue create mode 100644 one/docs/components/tag.md create mode 100644 one/docs/components/textarea.md create mode 100644 one/docs/components/time-picker.md create mode 100644 one/docs/components/toast.md create mode 100644 one/docs/components/tooltip.md create mode 100644 one/docs/components/transfer.md create mode 100644 one/docs/components/tree.md create mode 100644 one/docs/components/uploader.md create mode 100644 one/docs/demo/accordion/multiple.vue create mode 100644 one/docs/demo/accordion/size.vue create mode 100644 one/docs/demo/alert-box/title.vue create mode 100644 one/docs/demo/alert-box/type.vue create mode 100644 one/docs/demo/alert/multiple.vue create mode 100644 one/docs/demo/alert/type.vue create mode 100644 one/docs/demo/anchor/offset.vue create mode 100644 one/docs/demo/anchor/sticky.vue create mode 100644 one/docs/demo/autocomplete/normal.vue create mode 100644 one/docs/demo/badge/dot.vue create mode 100644 one/docs/demo/badge/number.vue create mode 100644 one/docs/demo/badge/text.vue create mode 100644 one/docs/demo/breadcrumb/base.vue create mode 100644 one/docs/demo/breadcrumb/datasource.vue create mode 100644 one/docs/demo/breadcrumb/redirect.vue create mode 100644 one/docs/demo/breadcrumb/separator.vue create mode 100644 one/docs/demo/breadcrumb/size.vue create mode 100644 one/docs/demo/breadcrumb/style.vue create mode 100644 one/docs/demo/button-group/disabled.vue create mode 100644 one/docs/demo/button-group/items.vue create mode 100644 one/docs/demo/button-group/size.vue create mode 100644 one/docs/demo/button-group/style.vue create mode 100644 one/docs/demo/button/disabled.vue create mode 100644 one/docs/demo/button/loading.vue create mode 100644 one/docs/demo/button/size.vue create mode 100644 one/docs/demo/button/style.vue create mode 100644 one/docs/demo/calendar/default.vue create mode 100644 one/docs/demo/calendar/multiple-ranges.vue create mode 100644 one/docs/demo/calendar/range-multiple.vue create mode 100644 one/docs/demo/carousel/autoplay.vue create mode 100644 one/docs/demo/carousel/indicator.vue create mode 100644 one/docs/demo/carousel/switch.vue create mode 100644 one/docs/demo/check-button-group/default.vue create mode 100644 one/docs/demo/checkbox-group/default.vue create mode 100644 one/docs/demo/checkbox/size.vue create mode 100644 one/docs/demo/checkbox/value.vue create mode 100644 one/docs/demo/collapse/size.vue create mode 100644 one/docs/demo/confirm-box/custom.vue create mode 100644 one/docs/demo/date-picker/default.vue create mode 100644 one/docs/demo/date-picker/range.vue create mode 100644 one/docs/demo/date-picker/shortcuts.vue create mode 100644 one/docs/demo/dialog/async.vue create mode 100644 one/docs/demo/dialog/custom.vue create mode 100644 one/docs/demo/dialog/draggable.vue create mode 100644 one/docs/demo/dialog/modal.vue create mode 100644 one/docs/demo/dialog/stack.vue create mode 100644 one/docs/demo/directives/drag/axis.vue create mode 100644 one/docs/demo/directives/drag/base.vue create mode 100644 one/docs/demo/directives/drag/containment.vue create mode 100644 one/docs/demo/directives/drag/targets.vue create mode 100644 one/docs/demo/directives/nudge.vue create mode 100644 one/docs/demo/directives/outside/click.vue create mode 100644 one/docs/demo/directives/outside/hover-with-delay.vue create mode 100644 one/docs/demo/directives/outside/hover.vue create mode 100644 one/docs/demo/directives/resize.vue create mode 100644 one/docs/demo/drawer/custom.vue create mode 100644 one/docs/demo/drawer/modal.vue create mode 100644 one/docs/demo/drawer/placement.vue create mode 100644 one/docs/demo/dropdown/disable.vue create mode 100644 one/docs/demo/dropdown/inline.vue create mode 100644 one/docs/demo/dropdown/other.vue create mode 100644 one/docs/demo/dropdown/searchable.vue create mode 100644 one/docs/demo/dropdown/size.vue create mode 100644 one/docs/demo/dropdown/style.vue create mode 100644 one/docs/demo/embedded/size.vue create mode 100644 one/docs/demo/filter-panel/default.vue create mode 100644 one/docs/demo/focus-visible.vue create mode 100644 one/docs/demo/form/disabled.vue create mode 100644 one/docs/demo/form/normal.vue create mode 100644 one/docs/demo/form/readonly.vue create mode 100644 one/docs/demo/form/validate.vue create mode 100644 one/docs/demo/grid/default.vue create mode 100644 one/docs/demo/grid/fixed.vue create mode 100644 one/docs/demo/icon/default.vue create mode 100644 one/docs/demo/input-group/default.vue create mode 100644 one/docs/demo/input/disabled.vue create mode 100644 one/docs/demo/input/readonly.vue create mode 100644 one/docs/demo/input/size.vue create mode 100644 one/docs/demo/label/default.vue create mode 100644 one/docs/demo/link/default.vue create mode 100644 one/docs/demo/loading/layout.vue create mode 100644 one/docs/demo/loading/size.vue create mode 100644 one/docs/demo/loading/slot.vue create mode 100644 one/docs/demo/loading/style.vue create mode 100644 one/docs/demo/menu/collaspible.vue create mode 100644 one/docs/demo/menu/normal.vue create mode 100644 one/docs/demo/menu/slot.vue create mode 100644 one/docs/demo/number-input/disabled.vue create mode 100644 one/docs/demo/number-input/readonly.vue create mode 100644 one/docs/demo/number-input/size.vue create mode 100644 one/docs/demo/overlay/position.vue create mode 100644 one/docs/demo/overlay/relative-base.vue create mode 100644 one/docs/demo/overlay/relative.less create mode 100644 one/docs/demo/overlay/stack-display-order-with-on-overlay.vue create mode 100644 one/docs/demo/overlay/stack-display-order.vue create mode 100644 one/docs/demo/overlay/stack-on-overlay.vue create mode 100644 one/docs/demo/pagination/goto.vue create mode 100644 one/docs/demo/pagination/size.vue create mode 100644 one/docs/demo/popover/position.vue create mode 100644 one/docs/demo/popover/trigger.vue create mode 100644 one/docs/demo/popover/ui.vue create mode 100644 one/docs/demo/progress/default.vue create mode 100644 one/docs/demo/prompt-box/base.vue create mode 100644 one/docs/demo/radio-button-group/default.vue create mode 100644 one/docs/demo/radio-group/default.vue create mode 100644 one/docs/demo/radio/model.vue create mode 100644 one/docs/demo/radio/size.vue create mode 100644 one/docs/demo/region-picker/default.vue create mode 100644 one/docs/demo/schedule/default.vue create mode 100644 one/docs/demo/search-box/disabled.vue create mode 100644 one/docs/demo/search-box/size.vue create mode 100644 one/docs/demo/search-box/style.vue create mode 100644 one/docs/demo/search-box/suggestion.vue create mode 100644 one/docs/demo/select/inline.vue create mode 100644 one/docs/demo/select/multiple.vue create mode 100644 one/docs/demo/select/searchable.vue create mode 100644 one/docs/demo/select/size.vue create mode 100644 one/docs/demo/slider/buffer.vue create mode 100644 one/docs/demo/slider/editable.vue create mode 100644 one/docs/demo/slider/range.vue create mode 100644 one/docs/demo/slider/size.vue create mode 100644 one/docs/demo/slider/steps.vue create mode 100644 one/docs/demo/slider/variant.vue create mode 100644 one/docs/demo/steps/default.vue create mode 100644 one/docs/demo/steps/status.vue create mode 100644 one/docs/demo/switch/size.vue create mode 100644 one/docs/demo/switch/value.vue create mode 100644 one/docs/demo/table/advanced.vue create mode 100644 one/docs/demo/table/basic.vue create mode 100644 one/docs/demo/table/expandable.vue create mode 100644 one/docs/demo/table/fixed.vue create mode 100644 one/docs/demo/table/scrollable.vue create mode 100644 one/docs/demo/tabs/disabled.vue create mode 100644 one/docs/demo/tabs/route.vue create mode 100644 one/docs/demo/tabs/size.vue create mode 100644 one/docs/demo/tabs/style.vue create mode 100644 one/docs/demo/tag/removable.vue create mode 100644 one/docs/demo/tag/selectable.vue create mode 100644 one/docs/demo/tag/size.vue create mode 100644 one/docs/demo/textarea/disabled.vue create mode 100644 one/docs/demo/textarea/readonly.vue create mode 100644 one/docs/demo/textarea/size.vue create mode 100644 one/docs/demo/time-picker/datasource.vue create mode 100644 one/docs/demo/time-picker/mode.vue create mode 100644 one/docs/demo/time-picker/range.vue create mode 100644 one/docs/demo/toast/default.vue create mode 100644 one/docs/demo/toast/plugin.vue create mode 100644 one/docs/demo/tooltip/position.vue create mode 100644 one/docs/demo/tooltip/style.vue create mode 100644 one/docs/demo/tooltip/trigger.vue create mode 100644 one/docs/demo/transfer/custom-search.vue create mode 100644 one/docs/demo/transfer/flat.vue create mode 100644 one/docs/demo/transfer/no-search.vue create mode 100644 one/docs/demo/transfer/size.vue create mode 100644 one/docs/demo/tree/custom-item.vue create mode 100644 one/docs/demo/tree/default.vue create mode 100644 one/docs/demo/tree/size.vue create mode 100644 one/docs/demo/ui.vue create mode 100644 one/docs/demo/uploader/custom.vue create mode 100644 one/docs/demo/uploader/file.vue create mode 100644 one/docs/demo/uploader/image.vue create mode 100644 one/docs/demo/uploader/validate.vue create mode 100644 one/docs/directives/v-drag.md create mode 100644 one/docs/directives/v-longpress.md create mode 100644 one/docs/directives/v-nudge.md create mode 100644 one/docs/directives/v-outside.md create mode 100644 one/docs/directives/v-resize.md create mode 100644 one/docs/en-US/components/alert-box.md create mode 100644 one/docs/en-US/components/alert.md create mode 100644 one/docs/en-US/components/breadcrumb-item.md create mode 100644 one/docs/en-US/components/breadcrumb.md create mode 100644 one/docs/en-US/components/button-group.md create mode 100644 one/docs/en-US/components/button.md create mode 100644 one/docs/en-US/components/calendar.md create mode 100644 one/docs/en-US/components/carousel.md create mode 100644 one/docs/en-US/components/check-button-group.md create mode 100644 one/docs/en-US/components/checkbox-group.md create mode 100644 one/docs/en-US/components/checkbox.md create mode 100644 one/docs/en-US/components/column.md create mode 100644 one/docs/en-US/components/confirm-box.md create mode 100644 one/docs/en-US/components/date-picker.md create mode 100644 one/docs/en-US/components/dialog.md create mode 100644 one/docs/en-US/components/dropdown.md create mode 100644 one/docs/en-US/components/filter-panel.md create mode 100644 one/docs/en-US/components/grid-column.md create mode 100644 one/docs/en-US/components/grid-container.md create mode 100644 one/docs/en-US/components/grid-row.md create mode 100644 one/docs/en-US/components/icon.md create mode 100644 one/docs/en-US/components/input.md create mode 100644 one/docs/en-US/components/link.md create mode 100644 one/docs/en-US/components/loading.md create mode 100644 one/docs/en-US/components/option-group.md create mode 100644 one/docs/en-US/components/option.md create mode 100644 one/docs/en-US/components/overlay.md create mode 100644 one/docs/en-US/components/pagination.md create mode 100644 one/docs/en-US/components/popover.md create mode 100644 one/docs/en-US/components/progress.md create mode 100644 one/docs/en-US/components/prompt-box.md create mode 100644 one/docs/en-US/components/radio-button-group.md create mode 100644 one/docs/en-US/components/radio-group.md create mode 100644 one/docs/en-US/components/radio.md create mode 100644 one/docs/en-US/components/region-picker.md create mode 100644 one/docs/en-US/components/schedule.md create mode 100644 one/docs/en-US/components/search-box.md create mode 100644 one/docs/en-US/components/select.md create mode 100644 one/docs/en-US/components/slider.md create mode 100644 one/docs/en-US/components/steps.md create mode 100644 one/docs/en-US/components/switch.md create mode 100644 one/docs/en-US/components/table.md create mode 100644 one/docs/en-US/components/tabs/index.vue create mode 100644 one/docs/en-US/components/tabs/tab.vue create mode 100644 one/docs/en-US/components/tabs/tab2.vue create mode 100644 one/docs/en-US/components/tabs/tab3.vue create mode 100644 one/docs/en-US/components/textarea.md create mode 100644 one/docs/en-US/components/toast.md create mode 100644 one/docs/en-US/components/tooltip.md create mode 100644 one/docs/en-US/components/transfer.md create mode 100644 one/docs/en-US/components/tree.md create mode 100644 one/docs/en-US/components/uploader.md create mode 100644 one/docs/en-US/getting-started/babel-plugin-veui.md create mode 100644 one/docs/en-US/getting-started/focus-visible.md create mode 100644 one/docs/en-US/getting-started/index.md create mode 100644 one/docs/en-US/getting-started/style-variants.md create mode 100644 one/docs/en-US/getting-started/veui-loader.md create mode 100644 one/docs/en-US/index.md create mode 100644 one/docs/getting-started/babel-plugin-veui.md create mode 100644 one/docs/getting-started/focus-visible.md create mode 100644 one/docs/getting-started/index.md create mode 100644 one/docs/getting-started/style-variants.md create mode 100644 one/docs/getting-started/veui-loader.md create mode 100644 one/docs/index.md create mode 100644 one/docs/nav.json create mode 100644 one/docs/plugins/alert.md create mode 100644 one/docs/plugins/confirm.md create mode 100644 one/docs/plugins/prompt.md create mode 100644 one/docs/plugins/toast.md create mode 100644 one/templates/page.etpl create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 plugins/README.md create mode 100644 plugins/algolia.js create mode 100644 plugins/hm.js create mode 100644 plugins/i18n.js create mode 100644 plugins/l10n.js create mode 100644 static/README.md create mode 100644 static/icons/angle.svg create mode 100644 static/images/development/advanced/overlay-tree.png create mode 100644 static/images/development/uploader/demo-image1.jpg create mode 100644 static/images/development/uploader/demo-image2.jpg create mode 100644 static/images/development/uploader/demo-image3.jpg create mode 100644 static/monitor.html create mode 100644 stylelint.config.js diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..9d08a1a --- /dev/null +++ b/.editorconfig @@ -0,0 +1,9 @@ +root = true + +[*] +charset = utf-8 +indent_style = space +indent_size = 2 +end_of_line = lf +insert_final_newline = true +trim_trailing_whitespace = true diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000..adcdf4b --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,69 @@ +// http://eslint.org/docs/user-guide/configuring + +module.exports = { + root: true, + parserOptions: { + parser: 'babel-eslint', + sourceType: 'module' + }, + extends: [ + // https://github.com/vuejs/eslint-plugin-vue#bulb-rules + 'plugin:vue/essential', + 'plugin:vue/recommended', + 'plugin:vue/strongly-recommended', + // https://github.com/standard/standard/blob/master/docs/RULES-en.md + 'standard', + 'prettier/standard' + ], + // required to lint *.vue files + plugins: ['vue'], + // add your custom rules here + rules: { + // allow paren-less arrow functions + 'arrow-parens': 0, + // allow async-await + 'generator-star-spacing': 0, + // allow debugger during development + 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0, + 'no-multi-spaces': ['error', { ignoreEOLComments: true }], + 'no-template-curly-in-string': 0, + // to many false positives + 'vue/no-side-effects-in-computed-properties': 0, + // fix unused var error for JSX custom tags + 'vue/jsx-uses-vars': 2, + 'vue/require-default-prop': 0, + 'vue/name-property-casing': ['error', 'kebab-case'], + 'vue/component-name-in-template-casing': ['error', 'kebab-case'], + 'vue/html-indent': [ + 'error', + 2, + { + attribute: 1, + baseIndent: 0, + closeBracket: 0, + alignAttributesVertically: true + } + ], + 'vue/html-self-closing': [ + 'error', + { + html: { + void: 'never', + normal: 'always', + component: 'always' + }, + svg: 'always', + math: 'always' + } + ], + 'vue/html-closing-bracket-spacing': [ + 'error', + { + startTag: 'never', + endTag: 'never', + selfClosingTag: 'never' + } + ], + 'vue/no-v-html': 0 + } +} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..726398f --- /dev/null +++ b/.gitignore @@ -0,0 +1,12 @@ +node_modules +npm-debug.log +one/build/deps.json +.DS_Store +.nuxt +.vscode +pages +components/demos +dist +logs +assets/data +static/images/mermaid diff --git a/README.md b/README.md new file mode 100644 index 0000000..ba1f8f6 --- /dev/null +++ b/README.md @@ -0,0 +1,124 @@ +# veui/docs + +> VEUI 文档。 + +## 本地安装 + +`git clone` 到本地后,在项目根目录下运行: + +```shell +npm i +npm run dev +``` + +后在浏览访问 `http://localhost:3000` 即可。 + +## 文档编写 + +开发相关文档位于 `one/docs/development` 下。文档目录结构与网站的目录结构一致,新建 `.md` 文件后需要在 `one/docs/nav.json` 中新建相应的条目,作为目录配置。添加 `sub: true` 将缩进一个层级。 + +### 组件文档结构 + +每个组件的文档请按如下顺序编写: + +1. 示例 +2. API + + 1. 属性 + 2. 插槽 + 3. 作用域插槽 + 4. 事件 + 5. 方法 + +3. 全局配置 + + 1. `veui` 中的默认 + 2. `veui-theme-dls` 中的默认配置 + +4. 图标名称 + +另外,如有关联组件请在最开始进行说明。比如: + +```md +:::tip +`Select` 组件可以内联 [`Option`](./option) 或 [`OptionGroup`](./option-group) 组件使用。 +::: +``` + +### 在文档中插入示例 + +使用 Markdown 的 shortcode 语法,如下: + +```md +[[ demo src="../demo/button.vue"]] +``` + +路径为 demo 文件相对于当前文档文件的路径。Demo 文件是一个 Vue 单文件组件,最后会将代码展示到文档中。可以编写多个 ` diff --git a/components/OneDemo.vue b/components/OneDemo.vue new file mode 100644 index 0000000..c4300ea --- /dev/null +++ b/components/OneDemo.vue @@ -0,0 +1,137 @@ + + + + + + + diff --git a/components/OneDetails.vue b/components/OneDetails.vue new file mode 100644 index 0000000..7b57eea --- /dev/null +++ b/components/OneDetails.vue @@ -0,0 +1,115 @@ + + + + + diff --git a/components/OneFooter.vue b/components/OneFooter.vue new file mode 100644 index 0000000..e8614e5 --- /dev/null +++ b/components/OneFooter.vue @@ -0,0 +1,203 @@ + + + + + diff --git a/components/OneHeader.vue b/components/OneHeader.vue new file mode 100644 index 0000000..2e9373b --- /dev/null +++ b/components/OneHeader.vue @@ -0,0 +1,89 @@ + + + + + diff --git a/components/OneMenu.vue b/components/OneMenu.vue new file mode 100644 index 0000000..5941931 --- /dev/null +++ b/components/OneMenu.vue @@ -0,0 +1,313 @@ + + + + + diff --git a/layouts/default.vue b/layouts/default.vue new file mode 100644 index 0000000..b20dae0 --- /dev/null +++ b/layouts/default.vue @@ -0,0 +1,96 @@ + + + + + diff --git a/middleware/README.md b/middleware/README.md new file mode 100644 index 0000000..edb9129 --- /dev/null +++ b/middleware/README.md @@ -0,0 +1,9 @@ +# MIDDLEWARE + +This directory contains your Application Middleware. +The middleware lets you define custom function to be ran before rendering a page or a group of pages (layouts). + +More information about the usage of this directory in the documentation: +https://nuxtjs.org/guide/routing#middleware + +**This directory is not required, you can delete it if you don't want to use it.** diff --git a/nuxt.config.js b/nuxt.config.js new file mode 100644 index 0000000..bc5a738 --- /dev/null +++ b/nuxt.config.js @@ -0,0 +1,125 @@ +const path = require('path') + +function resolve (p) { + return path.resolve(__dirname, p) +} + +function appendLoader (config, loader) { + config.module.rules.push(loader) +} + +module.exports = { + target: 'static', + + /** + * Headers of the page + */ + head: { + title: 'VEUI', + meta: [ + { charset: 'utf-8' }, + { name: 'viewport', content: 'width=device-width, initial-scale=1' }, + { + hid: 'description', + name: 'description', + content: 'Website for VEUI: an enterprise component library for Vue.js.' + } + ], + link: [ + { rel: 'shortcut icon', href: 'https://www.baidu.com/favicon.ico' }, + { + rel: 'stylesheet', + href: + 'https://code.bdstatic.com/npm/docsearch.js@2.6.3/dist/cdn/docsearch.min.css' + } + ], + script: [ + { + src: + 'https://code.bdstatic.com/npm/docsearch.js@2.6.3/dist/cdn/docsearch.min.js', + body: true + } + ] + }, + /** + * Customize the progress bar color + */ + loading: { color: '#1e1f24' }, + + pageTransition: { + css: false + }, + + css: ['veui-theme-dls/common.less', '@/assets/styles/global.styl'], + + plugins: [ + { src: '~plugins/i18n.js' }, + { src: '~plugins/l10n.js' }, + { src: '~plugins/hm.js', ssr: false }, + { src: '~plugins/algolia.js', ssr: false } + ], + + generate: { + subFolders: false + }, + + /** + * Build configuration + */ + build: { + transpile: ['veui', 'vue-awesome', 'resize-detector', 'less-plugin-dls'], + + babel: { + plugins: ['veui', 'lodash'] + }, + + loaders: { + vue: { + compilerOptions: { + whitespace: 'condense' + } + }, + stylus: { + 'include css': true + }, + less: { + javascriptEnabled: true + } + }, + + extend (config) { + /** + * veui-loader + */ + appendLoader(config, { + enforce: 'pre', + test: /\.vue$/, + loader: 'veui-loader', + options: { + locale: ['zh-Hans', 'en-US'], + modules: [ + { + package: 'veui-theme-dls', + fileName: '{module}.less' + }, + { + package: 'veui-theme-dls', + fileName: '{module}.js', + transform: false + } + ] + }, + include: [resolve('pages'), resolve('node_modules/veui')] + }) + + appendLoader(config, { + test: /\.js$/, + include: [resolve('node_modules/focus-visible')], + loader: 'short-circuit-loader', + options: { + expr: "process.env.VUE_ENV === 'server'" + } + }) + } + } +} diff --git a/one/build/customBlock.js b/one/build/customBlock.js new file mode 100644 index 0000000..b467b75 --- /dev/null +++ b/one/build/customBlock.js @@ -0,0 +1,226 @@ +'use strict' + +var trim = require('trim-trailing-lines') + +module.exports = customBlock + +var C_NEWLINE = '\n' +var C_TAB = '\t' +var C_SPACE = ' ' +var C_COLON = ':' + +var MIN_FENCE_COUNT = 3 +var CODE_INDENT_COUNT = 4 + +function customBlock (eat, value, silent) { + var self = this + var length = value.length + 1 + var index = 0 + var subvalue = '' + var fenceCount + var marker + var character + var flag + var queue + var content + var exdentedContent + var closing + var exdentedClosing + var indent + var now + + /* Eat initial spacing. */ + while (index < length) { + character = value.charAt(index) + + if (character !== C_SPACE && character !== C_TAB) { + break + } + + subvalue += character + index++ + } + + indent = index + + /* Eat the fence. */ + character = value.charAt(index) + + if (character !== C_COLON) { + return + } + + index++ + marker = character + fenceCount = 1 + subvalue += character + + while (index < length) { + character = value.charAt(index) + + if (character !== marker) { + break + } + + subvalue += character + fenceCount++ + index++ + } + + if (fenceCount < MIN_FENCE_COUNT) { + return + } + + /* Eat spacing before flag. */ + while (index < length) { + character = value.charAt(index) + + if (character !== C_SPACE && character !== C_TAB) { + break + } + + subvalue += character + index++ + } + + /* Eat flag. */ + flag = '' + queue = '' + + while (index < length) { + character = value.charAt(index) + + if (character === C_NEWLINE || character === C_COLON) { + break + } + + if (character === C_SPACE || character === C_TAB) { + queue += character + } else { + flag += queue + character + queue = '' + } + + index++ + } + + character = value.charAt(index) + + if (character && character !== C_NEWLINE) { + return + } + + if (silent) { + return true + } + + now = eat.now() + now.column += subvalue.length + now.offset += subvalue.length + + subvalue += flag + flag = self.decode.raw(self.unescape(flag), now) + + if (queue) { + subvalue += queue + } + + queue = '' + closing = '' + exdentedClosing = '' + content = '' + exdentedContent = '' + + /* Eat content. */ + while (index < length) { + character = value.charAt(index) + content += closing + exdentedContent += exdentedClosing + closing = '' + exdentedClosing = '' + + if (character !== C_NEWLINE) { + content += character + exdentedClosing += character + index++ + continue + } + + /* Add the newline to `subvalue` if its the first + * character. Otherwise, add it to the `closing` + * queue. */ + if (content) { + closing += character + exdentedClosing += character + } else { + subvalue += character + } + + queue = '' + index++ + + while (index < length) { + character = value.charAt(index) + + if (character !== C_SPACE) { + break + } + + queue += character + index++ + } + + closing += queue + exdentedClosing += queue.slice(indent) + + if (queue.length >= CODE_INDENT_COUNT) { + continue + } + + queue = '' + + while (index < length) { + character = value.charAt(index) + + if (character !== marker) { + break + } + + queue += character + index++ + } + + closing += queue + exdentedClosing += queue + + if (queue.length < fenceCount) { + continue + } + + queue = '' + + while (index < length) { + character = value.charAt(index) + + if (character !== C_SPACE && character !== C_TAB) { + break + } + + closing += character + exdentedClosing += character + index++ + } + + if (!character || character === C_NEWLINE) { + break + } + } + + subvalue += content + closing + + return eat(subvalue)({ + type: 'customblock', + className: (flag || '').trim().replace(/\s+/g, ' '), + value: trim(exdentedContent) + }) +} diff --git a/one/build/deps.js b/one/build/deps.js new file mode 100644 index 0000000..0dfd160 --- /dev/null +++ b/one/build/deps.js @@ -0,0 +1,48 @@ +import path from 'path' +import { readFileSync, writeFileSync } from './util' +import { merge } from 'lodash' + +function load () { + try { + return JSON.parse(readFileSync(resolve('./deps.json'))) + } catch (e) { + return {} + } +} + +function save (deps) { + writeFileSync(resolve('./deps.json'), JSON.stringify(deps, null, ' ')) +} + +function resolve (file) { + return path.resolve(__dirname, file) +} + +export function get (file) { + let deps = load() + return deps[file] +} + +export function add (data) { + let deps = load() + save(merge(deps, data)) +} + +export function remove (data) { + let deps = load() + Object.keys(data).forEach(key => { + if (deps[key]) { + delete deps[key][data[key]] + } + }) + save(deps) +} + +export function removeFile (file) { + let deps = load() + delete deps[file] + + Object.keys(deps).forEach(key => { + delete deps[key][file] + }) +} diff --git a/one/build/details.js b/one/build/details.js new file mode 100644 index 0000000..841b6b2 --- /dev/null +++ b/one/build/details.js @@ -0,0 +1,226 @@ +'use strict' + +var trim = require('trim-trailing-lines') + +module.exports = details + +var C_NEWLINE = '\n' +var C_TAB = '\t' +var C_SPACE = ' ' +var C_PLUS = '+' + +var MIN_FENCE_COUNT = 3 +var CODE_INDENT_COUNT = 4 + +function details (eat, value, silent) { + var self = this + var length = value.length + 1 + var index = 0 + var subvalue = '' + var fenceCount + var marker + var character + var flag + var queue + var content + var exdentedContent + var closing + var exdentedClosing + var indent + var now + + /* Eat initial spacing. */ + while (index < length) { + character = value.charAt(index) + + if (character !== C_SPACE && character !== C_TAB) { + break + } + + subvalue += character + index++ + } + + indent = index + + /* Eat the fence. */ + character = value.charAt(index) + + if (character !== C_PLUS) { + return + } + + index++ + marker = character + fenceCount = 1 + subvalue += character + + while (index < length) { + character = value.charAt(index) + + if (character !== marker) { + break + } + + subvalue += character + fenceCount++ + index++ + } + + if (fenceCount < MIN_FENCE_COUNT) { + return + } + + /* Eat spacing before flag. */ + while (index < length) { + character = value.charAt(index) + + if (character !== C_SPACE && character !== C_TAB) { + break + } + + subvalue += character + index++ + } + + /* Eat flag. */ + flag = '' + queue = '' + + while (index < length) { + character = value.charAt(index) + + if (character === C_NEWLINE || character === C_PLUS) { + break + } + + if (character === C_SPACE || character === C_TAB) { + queue += character + } else { + flag += queue + character + queue = '' + } + + index++ + } + + character = value.charAt(index) + + if (character && character !== C_NEWLINE) { + return + } + + if (silent) { + return true + } + + now = eat.now() + now.column += subvalue.length + now.offset += subvalue.length + + subvalue += flag + flag = self.decode.raw(self.unescape(flag), now) + + if (queue) { + subvalue += queue + } + + queue = '' + closing = '' + exdentedClosing = '' + content = '' + exdentedContent = '' + + /* Eat content. */ + while (index < length) { + character = value.charAt(index) + content += closing + exdentedContent += exdentedClosing + closing = '' + exdentedClosing = '' + + if (character !== C_NEWLINE) { + content += character + exdentedClosing += character + index++ + continue + } + + /* Add the newline to `subvalue` if its the first + * character. Otherwise, add it to the `closing` + * queue. */ + if (content) { + closing += character + exdentedClosing += character + } else { + subvalue += character + } + + queue = '' + index++ + + while (index < length) { + character = value.charAt(index) + + if (character !== C_SPACE) { + break + } + + queue += character + index++ + } + + closing += queue + exdentedClosing += queue.slice(indent) + + if (queue.length >= CODE_INDENT_COUNT) { + continue + } + + queue = '' + + while (index < length) { + character = value.charAt(index) + + if (character !== marker) { + break + } + + queue += character + index++ + } + + closing += queue + exdentedClosing += queue + + if (queue.length < fenceCount) { + continue + } + + queue = '' + + while (index < length) { + character = value.charAt(index) + + if (character !== C_SPACE && character !== C_TAB) { + break + } + + closing += character + exdentedClosing += character + index++ + } + + if (!character || character === C_NEWLINE) { + break + } + } + + subvalue += content + closing + + return eat(subvalue)({ + type: 'details', + summary: flag || null, + value: trim(exdentedContent) + }) +} diff --git a/one/build/generate.js b/one/build/generate.js new file mode 100644 index 0000000..5f72c8c --- /dev/null +++ b/one/build/generate.js @@ -0,0 +1,3 @@ +import { generatePages } from './generator' + +generatePages() diff --git a/one/build/generator.js b/one/build/generator.js new file mode 100644 index 0000000..c76abd3 --- /dev/null +++ b/one/build/generator.js @@ -0,0 +1,105 @@ +import { statSync } from 'fs' +import { resolve, relative, extname, basename, sep } from 'path' +import readdirpSync from 'recursive-readdir-sync' +import rimraf from 'rimraf' +import { copyFileSync, replaceExtSync } from './util' +import { renderDocToPage } from './page' +import { get, removeFile } from './deps' + +const DOCS_DIR = resolve(__dirname, '../docs') +const PAGES_DIR = resolve(__dirname, '../../pages') +const DEMOS_DIR = resolve(__dirname, '../../components/demos') +const MERMAID_DIR = resolve(__dirname, '../../static/images/mermaid') +const ASSETS_DIR = resolve(__dirname, '../../assets') + +export function generatePages (file, stats) { + if (!file) { + rimraf.sync(PAGES_DIR) + rimraf.sync(DEMOS_DIR) + rimraf.sync(MERMAID_DIR) + rimraf.sync(resolve(__dirname, './deps.json')) + console.log('Regenerating all files...') + handleFile(DOCS_DIR) + console.log('...done.') + } else { + handleFile(file, stats) + } +} + +function handleFile (file, stats) { + let segments = relative(DOCS_DIR, file).split(sep) + if (segments.some(segment => { + return segment.startsWith('_') || segment.startsWith('.') + })) { + return + } + + let remove = stats ? stats.remove : false + let dir = stats ? stats.dir : statSync(file).isDirectory() + if (dir) { + if (remove) { + rimraf.sync(file) + return + } + + let children = readdirpSync(file) + children.forEach(child => { + handleFile(child, remove) + }) + return + } + + let ext = extname(file).toLowerCase() + + /* eslint-disable indent */ + /* There seems to be something wrong with FECS here */ + switch (ext) { + case '.md': { + if (remove) { + let relDest = replaceExtSync(relative(DOCS_DIR, file), 'vue') + rimraf.sync(resolve(PAGES_DIR, relDest)) + console.log(`[${relDest}] removed.`) + } else { + let dest = relative(DOCS_DIR, file) + renderDocToPage(dest) + console.log(`[${dest}] synced.`) + } + break + } + case '.json': { + if (basename(file) === 'nav.json') { + copyFileSync(file, resolve(ASSETS_DIR, 'data', 'nav.json')) + console.log('[nav.json] synced.') + } + break + } + default: { + let relDest = relative(DOCS_DIR, file) + + let dest = relDest.split(sep).indexOf('demo') === -1 + ? resolve(PAGES_DIR, relDest) + : resolve(DEMOS_DIR, relDest) + if (remove) { + rimraf.sync(dest) + console.log(`[${relDest}] removed.`) + } else { + copyFileSync(file, dest) + console.log(`[${relDest}] synced.`) + } + break + } + } + /* eslint-enable indent */ + + if (remove) { + removeFile(file) + return + } + + let deps = get(file) + if (deps) { + Object.keys(deps).forEach(dep => { + handleFile(dep) + }) + } +} diff --git a/one/build/i18n.js b/one/build/i18n.js new file mode 100644 index 0000000..8898427 --- /dev/null +++ b/one/build/i18n.js @@ -0,0 +1,13 @@ +export const DEFAULT_LOCALE = 'zh-Hans' +export const LOCALES = [ + { + code: DEFAULT_LOCALE, + label: '简体中文' + }, + { + code: 'en-US', + label: 'English (US)' + } +] +export const LOCALE_CODES = LOCALES.map(l => l.code) +export const RE_LOCALE = new RegExp(`^\\/(${LOCALE_CODES.join('|')})\\/`) diff --git a/one/build/language.js b/one/build/language.js new file mode 100644 index 0000000..dd70f26 --- /dev/null +++ b/one/build/language.js @@ -0,0 +1,99 @@ +/* eslint-disable fecs-camelcase */ +/* eslint-disable babel/new-cap */ +export function vue (hljs) { + const XML_IDENT_RE = '[A-Za-z0-9\\._:-]+' + const TAG_INTERNALS = { + endsWithParent: true, + illegal: /`]+/} + ] + } + ] + } + ] + } + return { + case_insensitive: true, + contains: [ + hljs.COMMENT( + '', + { + relevance: 10 + } + ), + { + className: 'tag', + /* + The lookahead pattern (?=...) ensures that 'begin' only matches + '|$)', + end: '>', + keywords: {name: 'style'}, + contains: [TAG_INTERNALS], + starts: { + end: '', + returnEnd: true, + subLanguage: ['css', 'less', 'scss', 'stylus'] + } + }, + { + className: 'tag', + // See the comment in the ` + ) + }) + return content.join('\n\n') +} + +function stringifyAttrs (attrs) { + let result = Object.keys(attrs) + .map(key => { + let val = attrs[key] + if (typeof val !== 'boolean') { + return `${escape(key)}="${escape(val)}"` + } + return val ? `${escape(key)}` : '' + }) + .join(' ') + + return result ? ` ${result}` : '' +} diff --git a/one/build/remark-details.js b/one/build/remark-details.js new file mode 100644 index 0000000..aaa086c --- /dev/null +++ b/one/build/remark-details.js @@ -0,0 +1,39 @@ +import tokenizer from './details' +import visit from 'unist-util-visit' +import { escape } from 'lodash' +import { render } from './page' + +const NAME = 'details' + +export default function attacher () { + let proto = this.Parser.prototype + + proto.blockTokenizers[NAME] = tokenizer + proto.interruptParagraph.push([NAME]) + proto.interruptList.push([NAME]) + proto.interruptBlockquote.push([NAME]) + + let methods = proto.blockMethods + methods.unshift(NAME) + + return (tree, file) => { + let { path, data } = file + + if (!data) { + file.data = data = {} + } + if (!data.components) { + data.components = {} + } + + visit(tree, NAME, ({ summary, value }, index, parent) => { + data.components['OneDetails'] = true + + let { contents } = render(value, path, data) + parent.children.splice(index, 1, { + type: 'html', + value: `${contents}` + }) + }) + } +} diff --git a/one/build/remark-extract-frontmatter.js b/one/build/remark-extract-frontmatter.js new file mode 100644 index 0000000..50f18a0 --- /dev/null +++ b/one/build/remark-extract-frontmatter.js @@ -0,0 +1,16 @@ +import visit from 'unist-util-visit' +import remove from 'unist-util-remove' +import yaml from 'js-yaml' + +export default function attacher () { + return (tree, file) => { + let { data } = file + + visit(tree, 'yaml', node => { + data.meta = yaml.safeLoad(node.value) + return visit.EXIT + }) + + remove(tree, ['yaml', 'toml']) + } +} diff --git a/one/build/remark-ref.js b/one/build/remark-ref.js new file mode 100644 index 0000000..b22167f --- /dev/null +++ b/one/build/remark-ref.js @@ -0,0 +1,49 @@ +import tokenizer from './refBlock' +import visit from 'unist-util-visit' +import remove from 'unist-util-remove' +import { render } from './page' + +const NAME = 'refblock' +const RE_REF = /^\^([-_a-z0-9]+)/i + +export default function attacher () { + let proto = this.Parser.prototype + + proto.blockTokenizers[NAME] = tokenizer + proto.interruptParagraph.push([NAME]) + proto.interruptList.push([NAME]) + proto.interruptBlockquote.push([NAME]) + + let methods = proto.blockMethods + methods.unshift(NAME) + + return (tree, file) => { + let { path, data } = file + + if (!data) { + file.data = data = {} + } + if (!data.refs) { + data.refs = {} + } + + visit(tree, NAME, ({ id, value }) => { + let { contents } = render(value, path, data) + data.refs[id] = contents + }) + remove(tree, NAME) + + visit(tree, 'linkReference', (node, index, parent) => { + let { identifier } = node + let [match, id] = identifier.match(RE_REF) + if (!match || !id || !data.refs[id]) { + return + } + + parent.children.splice(index, 1, { + type: 'html', + value: data.refs[id] + }) + }) + } +} diff --git a/one/build/util.js b/one/build/util.js new file mode 100644 index 0000000..19c6df2 --- /dev/null +++ b/one/build/util.js @@ -0,0 +1,29 @@ +import { readFileSync as fsReadFileSync, writeFileSync as fsWriteFileSync } from 'fs' +import { dirname } from 'path' +import mkdirp from 'mkdirp' +import crypto from 'crypto' + +export function readFileSync (file) { + return fsReadFileSync(file, 'utf8') +} + +export function writeFileSync (file, content) { + mkdirp.sync(dirname(file)) + fsWriteFileSync(file, content, 'utf8') +} + +export function copyFileSync (src, dest) { + mkdirp.sync(dirname(dest)) + writeFileSync(dest, readFileSync(src)) +} + +const RE_EXT = /\.([^.]+)$/ +export function replaceExtSync (file, ext) { + return file.replace(RE_EXT, `.${ext}`) +} + +export function hash (path) { + let hash = crypto.createHash('sha1') + hash.update(path) + return hash.digest('hex').substring(0, 7) +} diff --git a/one/build/watch.js b/one/build/watch.js new file mode 100644 index 0000000..b4d828b --- /dev/null +++ b/one/build/watch.js @@ -0,0 +1,33 @@ +import { resolve } from 'path' +import { debounce } from 'lodash' +import chokidar from 'chokidar' +import { generatePages } from './generator' + +let watcher = chokidar.watch(resolve(__dirname, '../docs'), { + ignoreInitial: true +}) + +watcher + .on('all', debounce(generate, 1000)) + +function generate (type, path) { + switch (type) { + case 'add': + generatePages(path, { dir: false, remove: false }) + break + case 'addDir': + generatePages(path, { dir: true, remove: false }) + break + case 'change': + generatePages(path) + break + case 'unlink': + generatePages(path, { dir: false, remove: true }) + break + case 'unlinkDir': + generatePages(path, { dir: true, remove: true }) + break + default: + break + } +} diff --git a/one/docs/advanced/custom-rules.md b/one/docs/advanced/custom-rules.md new file mode 100644 index 0000000..897a1ae --- /dev/null +++ b/one/docs/advanced/custom-rules.md @@ -0,0 +1,89 @@ +# 自定义校验规则 + +对于多值校验,[表单 › validators 属性](../components/form#属性)提供了比较完善的功能来实现自定义校验。对于单值校验,`Field` 组件内置了 7 种常见规则,具体参考[表单项 › rule 属性](../components/field#属性)。如果无法覆盖需求,`VEUI` 校验规则模块允许你添加自定义规则。 + +## 示例 + +```js +import ruleManager from 'veui/manager/rule' +ruleManager.addRule('range', { + validate (value, ruleValue) { + // 仅实现大小校验部分 + let range = value.split('-') + return +range[0] >= ruleValue.floor && +range[1] <= ruleValue.ceil + }, + message: '范围值必须在限定区间内', + priority: 100 +}) +``` + +```html +... +``` + +## API + +| 名称 | 类型 | 描述 | +| -- | -- | -- | +| `validate` | `function(value: *, ruleValue: ?*=)` | 校验逻辑,`value` 为 `Field` 需要校验的值,`ruleValue` 可选,根据规则需要添加,表示规则的限定值。 | +| `message` | `function|string` | [^message] | +| `priority` | `number` | [^priority] | + +^^^message +默认出错信息。 + +若类型为 `string`,可以通过 `{ruleValue}` 引用 `ruleValue`、`{value}` 引用 `value`。例如: + +```js +let minLengthRule = { + validate (value, ruleValue) { + return !isEmpty(value) ? val.length >= ruleValue : true + }, + message: '字符长度不能短于 {ruleValue},当前长度 {value}', + priority: 100 +} +``` + +若类型为 `function`,参数为 `(ruleValue: ?*=, value: *)`。例如: + +```js +let minLengthRule = { + validate (value, ruleValue) { + return !isEmpty(value) ? val.length >= ruleValue : true + }, + message (ruleValue, value) { + return `字符长度不能短于${ruleValue},当前长度${value}` + }, + priority: 100 +} +``` + +:::tip +如果需要支持运行时切换语言,`message` 必须使用 `function` 类型。 +::: +^^^ + +^^^priority +规则优先级。数值低优先级高。 + ++++目前内置的优先级 +| 名称 | 优先级 | +| -- | -- | -- | +| `required` | `0` | +| `numeric` | `10` | +| `pattern` | `50` | +| `maxLength` | `100` | +| `minLength` | `100` | +| `max` | `200` | +| `min` | `200` | ++++ diff --git a/one/docs/advanced/global-config.md b/one/docs/advanced/global-config.md new file mode 100644 index 0000000..3aa538f --- /dev/null +++ b/one/docs/advanced/global-config.md @@ -0,0 +1,61 @@ +# 全局配置 + +VEUI 中很多组件都定义了全局配置项,允许开发者在使用时全局配置某个组件的行为细节。 + +例如,`Uploader` 组件可以统一配置上传模式,用户可以根据项目前后端接口、需要支持浏览器版本的具体情况选择使用 iframe 回调方式还是 XHR2 方式传递数据,也可以统一配置远端数据格式的转换函数。 + +VEUI 全局配置项可以通过 `veui/managers/config` 模块进行覆盖: + +```js +import config from 'veui/managers/config' + +config.set('uploader.requestMode', 'iframe') +config.set('uploader.convertResponse', ({ code, error, result }) => { + /** + * Transform from + * + * { + * code: 0, + * error: '...', + * result: { + * url: '...' + * } + * } + * + * to + * + * { + * success: true, + * message: '...', + * src: '...' + * } + */ + return { + success: code === 0, + src: error ? null : result.url, + message: error || null + } +}) +``` + +如果需要一次修改同一个组件的多项设置,可以使用如下写法: + +```js +import config from 'veui/managers/config' + +config.set({ + requestMode: 'iframe', + convertResponse: data => data +}, 'uploader') +``` + +`config.set()` 方法参数可为如下形式: + +* `(key: string, value: *, namespace: string)` +* `(values: Object<{key: string, value: *}>, namespace: string)` + +当提供了 `namespace` 参数时,最终生成的配置项键名为 \`${namespace}.${key}\`。 + +除此以外,还提供了相同参数列表的 `config.defaults()` 方法,区别在于当需要在配置项中写入的键值已经存在,则不会覆盖。 + +每个组件、指令等支持的全局配置请查看对应组件、指令的详情页。 diff --git a/one/docs/advanced/overlay.md b/one/docs/advanced/overlay.md new file mode 100644 index 0000000..ca6161c --- /dev/null +++ b/one/docs/advanced/overlay.md @@ -0,0 +1,124 @@ +# 浮层管理 + +在 VEUI 中,有大量组件使用到了浮层功能: + +* 各种类型的弹框:[对话框](../components/dialog)、[警告弹框](../components/alert-box)等; +* [下拉选择](../components/select); +* …… + +针对这些组件,我们抽离了具备如下功能的浮层模块: + +* 能够浮于页面上所有普通元素之上; +* 能够进行层叠顺序管理; +* 能够基于指定元素定位。 + +## 层叠覆盖 + +为了避免浮层被上层 `overflow: hidden` 的元素意外遮盖,我们将浮层根元素直接置于 `` 下统一管理。 + +在[浮层组件](../components/overlay)中,`.veui-overlay-box` 对应了浮层根元素,该元素在组件初始化的时候,会被放置到 `` 之下,组件销毁的时候,会被移除掉。 + +## 层叠顺序管理 + +在将浮层根元素置于 `` 下后,原有的层级嵌套关系会丢失,同时也无法通过原生的层叠上下文机制来控制浮层的层叠顺序。比如: + +* 某个对话框组件 A 上有一个下拉选择组件 B,那么 B 组件浮层应该位于 A 组件浮层之上。 +* 警告框浮层应该位于普通对话框浮层之上。 + +基于上述限制,浮层模块实现了自己的层叠顺序管理机制。整个浮层层级嵌套关系,是通过一棵树来表达的: + + + +树中每一个蓝色节点都对应关联到具体的[浮层组件](../componets/overlay)实例。针对上图,树的构造顺序可以是: + +1. 弹出“对话框 1”,创建一个“对话框 1”节点,根据节点权重信息创建一个分组,然后将分组挂在 root 节点之下。 +2. 弹出“对话框 2”,创建一个“对话框 2”节点,发现已经存在相同权重的分组,就直接将“对话框 2”节点放置在该分组的末尾位置。 +3. 在“对话框 2”中实例化一个“下拉选择 1”组件实例,由于“对话框 2”组件实例是“下拉选择 1”组件实例的父级,因此对应的浮层节点也应当具备父子关系,因此按照类似于“步骤 1”的顺序在“对话框 2”节点下生成分组及“下拉选择 1”节点。 +4. 此时由于程序运行出现了故障,弹出了“警告弹框 1”,由于“警告弹框”类型的组件相对于“对话框”组件具备更高的层级权重,因此在 root 之下新建了一个靠右的分组,并将生成的“警告弹框 1”节点置于分组末尾。 + +有了树之后,就会按照深度优先的遍历顺序生成每个节点的 `z-index` 值。 + +其中,基准 `z-index` 值可以通过全局配置对象进行配置: + +```js +import config from 'veui/managers/config' + +config.set('overlay.baseZIndex', 200) +``` + +:::warning +必须在[浮层组件](../components/overlay)引入之前设置基准 `z-index`,不然不会生效。 +::: + +可以针对组件类型,甚至组件实例粒度设置层叠优先级,层叠优先级值越大,最终生成的 `z-index` 值就越大。具有相同层叠优先级的同级组件实例,越靠后实例化的组件,生成的 `z-index` 值越大。 + +浮层组件、对话框组件、弹框组件等提供了 `priority` 属性,用于自定义组件实例的层叠优先级: + +```html + +``` + +一些比较特殊的组件,会提供基于组件类型粒度的层叠优先级配置: + +| 组件 | 配置字段 | 默认值 | 修改配置示例 | +| -- | -- | -- | -- | +| 警告弹框 | `alertbox.priority` | `100` | [^alert-box] | +| 确认弹框 | `confirmbox.priority` | `100` | [^confirm-box] | +| 输入弹框 | `promptbox.priority` | `100` | [^prompt-box] | + +^^^alert-box +```js +import config from 'veui/managers/config' + +config.set('alertbox.priority', 100) +``` +^^^ + +^^^confirm-box +```js +import config from 'veui/managers/config' + +config.set('confirmbox.priority', 100) +``` +^^^ + +^^^prompt-box +```js +import config from 'veui/managers/config' + +config.set('promptbox.priority', 100) +``` +^^^ + +总结起来,确定某个浮层系组件实例的层叠优先级的逻辑流程为: + +* 如果能够设置组件实例级别的层叠优先级,并且设置了,那么就使用这个层叠优先级值,否则进入下一步; +* 如果能够设置组件类型级别的层叠优先级,并且设置了,那么就使用这个层叠优先级值,否则进入下一步; +* 使用默认的层叠优先级值:`1`。 + +## 定位 + +VEUI 中,浮层支持两种定位方式: + +* 在页面范围内,以坐标值的形式进行定位; +* 相对于某个元素,指定偏移和变换规则进行定位。 + +以坐标方式定位时,需要自己写 CSS 进行控制(浮层模块内部只会生成浮层根元素的 `z-index` 值)。 + +相对元素定位时,可以通过[浮层组件](../components/overlay)的 `options` 属性描述偏移和变换规则。由于目前内部采用 [Tether](http://tether.io/) 实现,因此完整的配置项可以参考 [Tether 官网](http://tether.io/#options)。同时,也支持一些常见场景的简化配置:{ position: `${side}-${align}` },`side` 表示浮层根元素位于目标元素哪一边(`top`/`right`/`bottom`/`left`),`align` 表示对齐方式(`start`/`end`)。其中 `side` 是必须的,`align` 不传表示居中。推荐尽量使用简化的配置。 + +## 样式 + +由于浮层根元素被手动放置到 `` 元素之下了,要设置浮层内容的样式,就需要给浮层根元素指定 `class`。所有浮层系组件都支持 `overlay-class` 属性,通过该属性为浮层根元素设置 `class`: + +```vue +