├── .editorconfig ├── .eslintrc.cjs ├── .gitignore ├── .hintrc ├── .prettierignore ├── .prettierrc.json ├── .vitepress └── cache │ └── deps_temp │ ├── @popperjs_core.js │ ├── @popperjs_core.js.map │ ├── @popperjs_core_lib_modifiers_arrow.js │ ├── @popperjs_core_lib_modifiers_arrow.js.map │ ├── @popperjs_core_lib_modifiers_flip__js.js │ ├── @popperjs_core_lib_modifiers_flip__js.js.map │ ├── @popperjs_core_lib_modifiers_offset.js │ ├── @popperjs_core_lib_modifiers_offset.js.map │ ├── @popperjs_core_lib_modifiers_preventOverflow__js.js │ ├── @popperjs_core_lib_modifiers_preventOverflow__js.js.map │ ├── @vue_shared.js │ ├── @vue_shared.js.map │ ├── @vueuse_core.js │ ├── @vueuse_core.js.map │ ├── _metadata.json │ ├── chunk-BXE4SSMW.js │ ├── chunk-BXE4SSMW.js.map │ ├── chunk-FOINLP6H.js │ ├── chunk-FOINLP6H.js.map │ ├── chunk-G2LOIZIK.js │ ├── chunk-G2LOIZIK.js.map │ ├── chunk-H6YSKBJL.js │ ├── chunk-H6YSKBJL.js.map │ ├── chunk-IN7D5TZZ.js │ ├── chunk-IN7D5TZZ.js.map │ ├── chunk-IP2SUSOQ.js │ ├── chunk-IP2SUSOQ.js.map │ ├── chunk-OJJNZHSS.js │ ├── chunk-OJJNZHSS.js.map │ ├── chunk-RSJERJUL.js │ ├── chunk-RSJERJUL.js.map │ ├── chunk-VGJYVVDL.js │ ├── chunk-VGJYVVDL.js.map │ ├── chunk-WUXKB76K.js │ ├── chunk-WUXKB76K.js.map │ ├── chunk-ZUVEPBYQ.js │ ├── chunk-ZUVEPBYQ.js.map │ ├── dayjs.js │ ├── dayjs.js.map │ ├── dayjs_plugin_isLeapYear.js │ ├── dayjs_plugin_isLeapYear.js.map │ ├── lodash-unified.js │ ├── lodash-unified.js.map │ ├── package.json │ ├── vue.js │ └── vue.js.map ├── .vscode └── extensions.json ├── README.md ├── babel.config.js ├── deploys.sh ├── dist ├── assets │ ├── iconfont-2c1d6774.woff2 │ ├── iconfont-9c1d6ac4.woff │ ├── iconfont-ebea08e6.ttf │ ├── index-8888f299.js │ └── index-a4478bad.css ├── favicon.ico └── index.html ├── docs ├── .vitepress │ ├── cache │ │ └── deps │ │ │ ├── @popperjs_core.js │ │ │ ├── @popperjs_core.js.map │ │ │ ├── @vitepress-demo-preview_component.js │ │ │ ├── @vitepress-demo-preview_component.js.map │ │ │ ├── @vue_shared.js │ │ │ ├── @vue_shared.js.map │ │ │ ├── @vueuse_core.js │ │ │ ├── @vueuse_core.js.map │ │ │ ├── _metadata.json │ │ │ ├── async-validator.js │ │ │ ├── async-validator.js.map │ │ │ ├── chunk-2D2BEOV3.js │ │ │ ├── chunk-2D2BEOV3.js.map │ │ │ ├── chunk-K4I7CSBL.js │ │ │ ├── chunk-K4I7CSBL.js.map │ │ │ ├── chunk-RSJERJUL.js │ │ │ ├── chunk-RSJERJUL.js.map │ │ │ ├── dayjs.js │ │ │ ├── dayjs.js.map │ │ │ ├── dayjs_plugin_isLeapYear.js │ │ │ ├── dayjs_plugin_isLeapYear.js.map │ │ │ ├── lodash-unified.js │ │ │ ├── lodash-unified.js.map │ │ │ ├── package.json │ │ │ ├── vue.js │ │ │ └── vue.js.map │ ├── config │ │ ├── index.ts │ │ ├── markdown.ts │ │ ├── nav.ts │ │ ├── plugins │ │ │ ├── index.ts │ │ │ └── table.ts │ │ └── sidebar.ts │ ├── dist │ │ ├── 404.html │ │ ├── assets │ │ │ ├── app.34eee03d.js │ │ │ ├── component_button.md.cee57914.js │ │ │ ├── component_button.md.cee57914.lean.js │ │ │ ├── component_checkbox.md.b4285c64.js │ │ │ ├── component_checkbox.md.b4285c64.lean.js │ │ │ ├── component_drawer.md.9ef50619.js │ │ │ ├── component_drawer.md.9ef50619.lean.js │ │ │ ├── component_tag.md.e4bca401.js │ │ │ ├── component_tag.md.e4bca401.lean.js │ │ │ ├── guide_team.md.d62d0157.js │ │ │ ├── guide_team.md.d62d0157.lean.js │ │ │ ├── iconfont.2c1d6774.woff2 │ │ │ ├── iconfont.9c1d6ac4.woff │ │ │ ├── iconfont.ebea08e6.ttf │ │ │ ├── index.md.42ef25b8.js │ │ │ ├── index.md.42ef25b8.lean.js │ │ │ ├── inter-italic-cyrillic-ext.33bd5a8e.woff2 │ │ │ ├── inter-italic-cyrillic.ea42a392.woff2 │ │ │ ├── inter-italic-greek-ext.4fbe9427.woff2 │ │ │ ├── inter-italic-greek.8f4463c4.woff2 │ │ │ ├── inter-italic-latin-ext.bd8920cc.woff2 │ │ │ ├── inter-italic-latin.bd3b6f56.woff2 │ │ │ ├── inter-italic-vietnamese.6ce511fb.woff2 │ │ │ ├── inter-roman-cyrillic-ext.e75737ce.woff2 │ │ │ ├── inter-roman-cyrillic.5f2c6c8c.woff2 │ │ │ ├── inter-roman-greek-ext.ab0619bc.woff2 │ │ │ ├── inter-roman-greek.d5a6d92a.woff2 │ │ │ ├── inter-roman-latin-ext.0030eebd.woff2 │ │ │ ├── inter-roman-latin.2ed14f66.woff2 │ │ │ ├── inter-roman-vietnamese.14ce25a6.woff2 │ │ │ └── style.74cf9865.css │ │ ├── component │ │ │ ├── button.html │ │ │ ├── checkbox.html │ │ │ ├── drawer.html │ │ │ └── tag.html │ │ ├── favicon.ico │ │ ├── guide │ │ │ └── team.html │ │ ├── hashmap.json │ │ ├── index.html │ │ ├── logo.png │ │ └── logo.svg │ └── theme │ │ ├── index.ts │ │ └── style.scss ├── component │ ├── avatar.md │ ├── breadcrumb.md │ ├── button.md │ ├── checkbox.md │ ├── date-picker.md │ ├── dialog.md │ ├── divider.md │ ├── drawer.md │ ├── dropdown.md │ ├── form.md │ ├── icon.md │ ├── input.md │ ├── layout.md │ ├── link.md │ ├── menu.md │ ├── message.md │ ├── pagination.md │ ├── popper.md │ ├── progress.md │ ├── radio.md │ ├── scrollbar.md │ ├── select.md │ ├── switch.md │ ├── table.md │ ├── tag.md │ ├── text.md │ ├── tree.md │ └── upload.md ├── examples │ ├── avatar │ │ ├── basic.vue │ │ ├── contain.vue │ │ └── type.vue │ ├── breadcrumb │ │ ├── basic.vue │ │ └── separator.vue │ ├── button │ │ ├── clickFun.vue │ │ ├── curvature.vue │ │ ├── disabled.vue │ │ ├── hollow.vue │ │ ├── iscircle.vue │ │ ├── size.vue │ │ ├── slotDemo.vue │ │ └── type.vue │ ├── checkbox │ │ ├── basic.vue │ │ ├── disabled.vue │ │ ├── group.vue │ │ ├── indeterminate.vue │ │ └── limit.vue │ ├── date-picker │ │ ├── basic.vue │ │ ├── format.vue │ │ ├── range.vue │ │ └── type.vue │ ├── dialog │ │ ├── basic.vue │ │ ├── custom.vue │ │ └── draggable.vue │ ├── divider │ │ ├── basic.vue │ │ ├── dotted.vue │ │ ├── text-type.vue │ │ └── vertical.vue │ ├── drawer │ │ ├── direction.vue │ │ └── titleSolt.vue │ ├── dropdown │ │ ├── basic.vue │ │ ├── event.vue │ │ ├── size.vue │ │ ├── trigger.vue │ │ └── triggerStyle.vue │ ├── form │ │ ├── basic.vue │ │ ├── check.vue │ │ └── validate.vue │ ├── icon │ │ ├── basic.vue │ │ └── normal.vue │ ├── input │ │ ├── basic.vue │ │ ├── clearable.vue │ │ ├── complex.vue │ │ ├── disabled.vue │ │ ├── password.vue │ │ ├── prefixSuffix.vue │ │ ├── size.vue │ │ └── textarea.vue │ ├── layout │ │ ├── basic.vue │ │ ├── flex.vue │ │ ├── gutter.vue │ │ ├── mixin.vue │ │ └── offset.vue │ ├── link │ │ ├── basic.vue │ │ ├── disabled.vue │ │ ├── iconLink.vue │ │ └── undline.vue │ ├── menu │ │ ├── basic.vue │ │ ├── colors.vue │ │ ├── disabled.vue │ │ └── mode.vue │ ├── message │ │ ├── basic.vue │ │ ├── closable.vue │ │ └── status.vue │ ├── pagination │ │ ├── basic.vue │ │ ├── one.vue │ │ └── other.vue │ ├── popper │ │ ├── arrow.vue │ │ ├── basic.vue │ │ ├── custom.vue │ │ ├── hover.vue │ │ └── show.vue │ ├── progress │ │ ├── basic.vue │ │ └── precent.vue │ ├── radio │ │ ├── basic.vue │ │ ├── disabled.vue │ │ └── group.vue │ ├── scrollbar │ │ ├── basic.vue │ │ ├── max-height.vue │ │ └── vertical.vue │ ├── select │ │ ├── basic.vue │ │ ├── clearable.vue │ │ ├── disabled-option.vue │ │ ├── disabled.vue │ │ ├── filterable.vue │ │ ├── group.vue │ │ ├── multiple.vue │ │ └── remote.vue │ ├── switch │ │ ├── basic.vue │ │ ├── bgColor.vue │ │ ├── differentVal.vue │ │ ├── disabled.vue │ │ ├── size.vue │ │ └── vmodel.vue │ ├── table │ │ ├── basic.vue │ │ ├── checkbox.vue │ │ ├── custom.vue │ │ ├── filterable.vue │ │ ├── fixAll.vue │ │ ├── fixColumns.vue │ │ ├── fixHead.vue │ │ ├── fluidHeight.vue │ │ ├── radio.vue │ │ ├── sort.vue │ │ └── withClass.vue │ ├── tag │ │ ├── basic.vue │ │ ├── removeable.vue │ │ ├── round.vue │ │ ├── size.vue │ │ └── theme.vue │ ├── text │ │ ├── basic.vue │ │ ├── size.vue │ │ ├── tag.vue │ │ └── truncated.vue │ ├── tree │ │ └── basic.vue │ └── upload │ │ ├── basic.vue │ │ ├── drag.vue │ │ └── manual.vue ├── guide │ ├── quickstart.md │ └── team.md ├── index.md ├── public │ ├── favicon.ico │ ├── logo.png │ └── logo.svg └── vite.config.ts ├── env.d.ts ├── index.html ├── lerna.json ├── package-lock.json ├── package.json ├── packages ├── ETU-Design │ └── package.json ├── affix │ ├── README.md │ ├── index.ts │ └── src │ │ └── affix.vue ├── avatar │ ├── README.md │ ├── __tests__ │ │ └── avatar.test.js │ ├── index.ts │ ├── package.json │ └── src │ │ ├── avatar.ts │ │ └── avatar.vue ├── breadcrumb │ ├── README.md │ ├── __tests__ │ │ └── breadcrumb.test.js │ ├── index.ts │ ├── package.json │ └── src │ │ ├── breadcrumb-item.ts │ │ ├── breadcrumb-item.vue │ │ ├── breadcrumb.ts │ │ └── breadcrumb.vue ├── button │ ├── README.md │ ├── _tests_ │ │ └── button.test.js │ ├── index.ts │ ├── package.json │ └── src │ │ └── button.vue ├── checkbox │ ├── README.md │ ├── index.ts │ ├── package.json │ └── src │ │ ├── checkbox-group.ts │ │ ├── checkbox-group.vue │ │ ├── checkbox.ts │ │ ├── checkbox.vue │ │ └── composables │ │ ├── index.ts │ │ ├── use-checkbox-disabled.ts │ │ ├── use-checkbox-event.ts │ │ ├── use-checkbox-model.ts │ │ ├── use-checkbox-status.ts │ │ └── use-checkbox.ts ├── col │ ├── README.md │ ├── __tests__ │ │ └── col.test.js │ ├── index.ts │ └── src │ │ ├── col.ts │ │ └── col.vue ├── collapse │ ├── README.md │ ├── __tests__ │ │ └── collapse.test.js │ ├── index.ts │ ├── package.json │ └── src │ │ ├── collapse-item.ts │ │ ├── collapse-item.vue │ │ ├── collapse.ts │ │ └── collapse.vue ├── date-picker │ ├── README.md │ ├── __tests__ │ │ └── date-picker.test.js │ ├── index.ts │ ├── package.json │ └── src │ │ ├── date-picker-com │ │ ├── date-nav.vue │ │ ├── date-table.vue │ │ ├── month-table.vue │ │ └── year-table.vue │ │ ├── date-picker.ts │ │ ├── date-picker.vue │ │ ├── props │ │ ├── date-nav.ts │ │ ├── date-table.ts │ │ └── shared.ts │ │ ├── useDatePicker.ts │ │ └── utils.ts ├── dialog │ ├── README.md │ ├── __tests__ │ │ └── dialog.test.ts │ ├── index.ts │ ├── package.json │ └── src │ │ ├── dialog-content.ts │ │ ├── dialog-content.vue │ │ ├── dialog.ts │ │ ├── dialog.vue │ │ └── use-dialog.ts ├── directives │ ├── README.md │ ├── __tests__ │ │ └── directives.test.js │ ├── click-outside │ │ └── index.ts │ ├── index.ts │ └── package.json ├── divider │ ├── README.md │ ├── __tests__ │ │ └── divider.test.js │ ├── index.ts │ ├── package.json │ └── src │ │ ├── divider.ts │ │ └── divider.vue ├── drawer │ ├── README.md │ ├── __tests__ │ │ └── drawer.test.ts │ ├── index.ts │ ├── package.json │ └── src │ │ └── drawer.vue ├── dropdown │ ├── index.ts │ ├── package.json │ └── src │ │ ├── dropdown-item.ts │ │ ├── dropdown-item.vue │ │ ├── dropdown-menu.vue │ │ ├── dropdown.ts │ │ ├── dropdown.vue │ │ ├── use-dropdown-event.ts │ │ ├── use-dropdown-item-status.ts │ │ └── use-dropdown-style.ts ├── empty │ ├── README.md │ ├── __tests__ │ │ └── empty.test.ts │ ├── index.ts │ └── src │ │ ├── empty.ts │ │ └── empty.vue ├── form │ ├── README.md │ ├── __tests__ │ │ └── form.test.js │ ├── index.ts │ └── src │ │ ├── form-item.ts │ │ ├── form-item.vue │ │ ├── form.ts │ │ └── form.vue ├── hooks │ ├── README.md │ ├── index.ts │ ├── package.json │ ├── use-common-props │ │ └── index.ts │ ├── use-cursor │ │ └── index.ts │ ├── use-draggable │ │ └── index.ts │ ├── use-lockscreen │ │ └── index.ts │ ├── use-namespace │ │ └── index.ts │ ├── use-prop │ │ └── index.ts │ ├── use-resize-observe │ │ └── index.ts │ ├── use-same-target │ │ └── index.ts │ ├── use-timout │ │ └── index.ts │ ├── use-vmodel │ │ └── index.ts │ └── use-z-index │ │ └── index.ts ├── icon │ ├── README.md │ ├── __tests__ │ │ └── icon.test.js │ ├── index.ts │ ├── package.json │ └── src │ │ ├── icon.ts │ │ └── icon.vue ├── index.ts ├── input-number │ ├── README.md │ ├── __tests__ │ │ └── input-number.test.js │ ├── package.json │ └── src │ │ ├── input-number.vue │ │ └── inputer-number.ts ├── input │ ├── README.md │ ├── __tests__ │ │ └── input.test.js │ ├── index.ts │ ├── package.json │ └── src │ │ ├── composables │ │ ├── index.ts │ │ ├── use-input-icon.ts │ │ ├── use-input-state.ts │ │ ├── use-input-text.ts │ │ └── use-input.ts │ │ ├── input.ts │ │ └── input.vue ├── link │ ├── __tests__ │ │ └── link.test.js │ ├── index.ts │ └── src │ │ ├── link.ts │ │ └── link.vue ├── menu-group-item │ ├── index.ts │ └── src │ │ └── menuGroupItem.vue ├── menu-group │ ├── index.ts │ └── src │ │ └── menuGroup.vue ├── message │ ├── README.md │ ├── __tests__ │ │ └── message.test.ts │ ├── index.ts │ ├── package.json │ └── src │ │ ├── composables │ │ ├── index.ts │ │ ├── instance.ts │ │ ├── use-message-event.ts │ │ ├── use-message-icon.ts │ │ ├── use-message-offset.ts │ │ └── use-message.ts │ │ ├── message.ts │ │ ├── message.vue │ │ └── method.ts ├── overlay │ ├── README.md │ ├── __tests__ │ │ └── overlay.test.ts │ ├── index.ts │ ├── package.json │ └── src │ │ ├── overlay.ts │ │ └── overlay.vue ├── pagination │ ├── README.md │ ├── __tests__ │ │ └── pagination.test.ts │ ├── index.ts │ ├── package.json │ └── src │ │ ├── components │ │ ├── jumper.ts │ │ ├── jumper.vue │ │ ├── next.ts │ │ ├── next.vue │ │ ├── pager.ts │ │ ├── pager.vue │ │ ├── prev.ts │ │ ├── prev.vue │ │ ├── sizes.ts │ │ ├── sizes.vue │ │ ├── total.ts │ │ └── total.vue │ │ ├── default.ts │ │ ├── pagination.tsx │ │ └── use-pagination.ts ├── popper │ ├── README.md │ ├── __tests__ │ │ └── popper.test.ts │ ├── index.ts │ ├── package.json │ └── src │ │ ├── arrow.vue │ │ ├── composables │ │ ├── index.ts │ │ ├── typing.ts │ │ ├── useClickAway.ts │ │ ├── useContent.ts │ │ ├── useEventListener.ts │ │ ├── usePopper.ts │ │ └── useTimeEvent.ts │ │ ├── popper.ts │ │ └── popper.vue ├── progress │ ├── README.md │ ├── __tests__ │ │ └── progress.test.js │ ├── index.ts │ ├── package.json │ └── src │ │ ├── progress.ts │ │ └── progress.vue ├── radio │ ├── README.md │ ├── index.ts │ ├── package.json │ └── src │ │ ├── radio-group.ts │ │ ├── radio-group.vue │ │ ├── radio.ts │ │ ├── radio.vue │ │ └── use-radio.ts ├── row │ ├── README.md │ ├── __tests__ │ │ └── row.test.js │ ├── index.ts │ └── src │ │ ├── row.ts │ │ └── row.vue ├── scrollbar │ ├── README.md │ ├── __tests__ │ │ └── scrollbar.test.js │ ├── index.ts │ ├── package.json │ └── src │ │ ├── bar.ts │ │ ├── bar.vue │ │ ├── scrollbar.ts │ │ ├── scrollbar.vue │ │ ├── thumb.ts │ │ └── thumb.vue ├── select │ ├── __tests__ │ │ └── select.test.js │ ├── index.ts │ ├── package.json │ └── src │ │ ├── option.ts │ │ ├── option.vue │ │ ├── optionGrop.ts │ │ ├── optionGrop.vue │ │ ├── select.ts │ │ ├── select.vue │ │ └── useSelect.ts ├── slider │ ├── README.md │ ├── __tests__ │ │ └── slider.test.js │ ├── package.json │ └── src │ │ └── slider.vue ├── switch │ ├── README.md │ ├── _tests_ │ │ └── switch.test.ts │ ├── index.ts │ ├── package.json │ └── src │ │ ├── switch.ts │ │ └── switch.vue ├── table │ ├── README.md │ ├── __tests__ │ │ └── table.test.ts │ ├── index.ts │ ├── package.json │ └── src │ │ ├── table-body │ │ └── index.tsx │ │ ├── table-column │ │ ├── defaults.ts │ │ ├── index.tsx │ │ └── use-table-column.tsx │ │ ├── table-header │ │ ├── filter-panel.vue │ │ └── index.tsx │ │ ├── table.ts │ │ ├── table.vue │ │ ├── tableColgroup.vue │ │ ├── use-table-data.ts │ │ ├── use-table-style.ts │ │ ├── use-table.ts │ │ └── utils.ts ├── tag │ ├── README.md │ ├── __tests__ │ │ └── tag.test.ts │ ├── index.ts │ ├── package.json │ └── src │ │ ├── tag.ts │ │ └── tag.vue ├── text │ ├── README.md │ ├── index.ts │ └── src │ │ ├── BTag.vue │ │ ├── Del.vue │ │ ├── Div.vue │ │ ├── ITag.vue │ │ ├── Ins.vue │ │ ├── Mark.vue │ │ ├── Ptag.vue │ │ ├── Span.vue │ │ ├── Sub.vue │ │ ├── Sup.vue │ │ └── text.vue ├── theme-chalk │ ├── package.json │ └── src │ │ ├── affix.scss │ │ ├── avatar.scss │ │ ├── breadcrumb.scss │ │ ├── button.scss │ │ ├── checkbox-group.scss │ │ ├── checkbox.scss │ │ ├── col.scss │ │ ├── collapse.scss │ │ ├── date-picker.scss │ │ ├── date-table.scss │ │ ├── dialog.scss │ │ ├── divider.scss │ │ ├── drawer.scss │ │ ├── dropdown.scss │ │ ├── empty.scss │ │ ├── fonts │ │ ├── iconfont.ttf │ │ ├── iconfont.woff │ │ └── iconfont.woff2 │ │ ├── form.scss │ │ ├── icon.scss │ │ ├── index.scss │ │ ├── index.ts │ │ ├── input.scss │ │ ├── link.scss │ │ ├── menu-group-item.scss │ │ ├── menu-group.scss │ │ ├── message.scss │ │ ├── mixins │ │ ├── _var.scss │ │ ├── config.scss │ │ ├── function.scss │ │ └── mixins.scss │ │ ├── overlay.scss │ │ ├── pagination.scss │ │ ├── popper.scss │ │ ├── progress.scss │ │ ├── radio-group.scss │ │ ├── radio.scss │ │ ├── row.scss │ │ ├── scrollbar.scss │ │ ├── select.scss │ │ ├── switch.scss │ │ ├── table.scss │ │ ├── tag.scss │ │ ├── text.scss │ │ ├── tree.scss │ │ ├── upload.scss │ │ └── var.scss ├── tokens │ ├── README.md │ ├── __tests__ │ │ └── tokens.test.js │ ├── breadcrumb.ts │ ├── checkbox.ts │ ├── collapse.ts │ ├── data-picker.ts │ ├── dialog.ts │ ├── dropdown.ts │ ├── index.ts │ ├── package.json │ ├── pagination.ts │ ├── radio.ts │ ├── select.ts │ └── table.ts ├── tree │ ├── README.md │ ├── index.ts │ └── src │ │ ├── tree-node.vue │ │ └── tree.vue ├── upload │ ├── README.md │ ├── __tests__ │ │ └── upload.test.ts │ ├── index.ts │ └── src │ │ ├── ajax.ts │ │ ├── upload-content.ts │ │ ├── upload-content.vue │ │ ├── upload-dragger.ts │ │ ├── upload-dragger.vue │ │ ├── upload-list.ts │ │ ├── upload-list.vue │ │ ├── upload.ts │ │ ├── upload.vue │ │ ├── use-upload-content.ts │ │ └── use-upload.ts └── utils │ ├── dom │ ├── index.ts │ └── style.ts │ ├── index.ts │ ├── package.json │ ├── types.ts │ ├── utils.ts │ └── vue │ ├── index.ts │ ├── install.ts │ ├── runtime.ts │ └── tryOnScopeDispose.ts ├── public └── favicon.ico ├── src ├── App.vue ├── assets │ ├── base.css │ ├── logo.svg │ └── main.css ├── components │ ├── Affix.vue │ ├── Avatar.vue │ ├── Breadcrumb.vue │ ├── Button.vue │ ├── Checkbox.vue │ ├── Collapse.vue │ ├── DatePicker.vue │ ├── Dialog.vue │ ├── Divider.vue │ ├── Drawer.vue │ ├── Dropdown.vue │ ├── Empty.vue │ ├── Form.vue │ ├── Icon.vue │ ├── Input.vue │ ├── Link.vue │ ├── Menu.vue │ ├── Message.vue │ ├── OverLay.vue │ ├── Pagination.vue │ ├── Popper.vue │ ├── Progress.vue │ ├── Radio.vue │ ├── Scrollbar.vue │ ├── Select.vue │ ├── Switch.vue │ ├── Table.vue │ ├── Tag.vue │ ├── Text.vue │ ├── Tree.vue │ ├── Upload.vue │ └── layer.vue └── main.ts ├── tsconfig.config.json ├── tsconfig.json ├── tsconfig.web.json ├── typings └── vue-shim.d.ts ├── vite.config.ts └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] #表示所有文件适用 4 | charset = utf-8 #设置文件字符集为utf-8 5 | indent_style = space #缩进风格(tab/space) 6 | indent_size = 2 #缩进大小 7 | end_of_line = lf #控制换行类型(Lf/cr/crlf) 8 | trim_trailing_whitespace = true #去除行尾的任意空白字符 9 | insert_final_newline = false #始终在文件末尾插入一个新行 10 | 11 | [*.md]#仅md文件适用以下规则 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | /* eslint-env node */ 2 | require("@rushstack/eslint-patch/modern-module-resolution"); 3 | 4 | module.exports = { 5 | root: true, 6 | // parser: "@typescript-eslint/parser", 7 | // plugins: ["@typescript-eslint"], 8 | extends: [ 9 | "plugin:vue/vue3-essential", 10 | "eslint:recommended", 11 | "@vue/eslint-config-typescript", 12 | "@vue/eslint-config-prettier", 13 | "plugin:prettier/recommended", 14 | ], 15 | parserOptions: { 16 | ecmaVersion: "latest", 17 | }, 18 | rules: { 19 | "vue/multi-word-component-names": "off", 20 | }, 21 | }; 22 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | .DS_Store 12 | dist 13 | dist-ssr 14 | coverage 15 | *.local 16 | 17 | /cypress/videos/ 18 | /cypress/screenshots/ 19 | 20 | # Editor directories and files 21 | .vscode/* 22 | !.vscode/extensions.json 23 | .idea 24 | *.suo 25 | *.ntvs* 26 | *.njsproj 27 | *.sln 28 | *.sw? 29 | 30 | yarn.lock 31 | package-lock.json -------------------------------------------------------------------------------- /.hintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "development" 4 | ], 5 | "hints": { 6 | "compat-api/css": [ 7 | "default", 8 | { 9 | "ignore": [ 10 | "aspect-ratio" 11 | ] 12 | } 13 | ] 14 | } 15 | } -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | /dist/* 2 | .local 3 | .output.js 4 | /node_modules/** 5 | 6 | **/*.svg 7 | **/*.sh 8 | 9 | /public/* 10 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "useTabs": false, 3 | "tabwidth": 2, 4 | "printwidth": 100, 5 | "singleQuote": false, 6 | "trailingComma": "all", 7 | "semi": true 8 | } 9 | -------------------------------------------------------------------------------- /.vitepress/cache/deps_temp/@popperjs_core_lib_modifiers_arrow.js: -------------------------------------------------------------------------------- 1 | import { 2 | arrow_default 3 | } from "./chunk-BXE4SSMW.js"; 4 | import "./chunk-OJJNZHSS.js"; 5 | import "./chunk-IP2SUSOQ.js"; 6 | import "./chunk-IN7D5TZZ.js"; 7 | import "./chunk-RSJERJUL.js"; 8 | export { 9 | arrow_default as default 10 | }; 11 | //# sourceMappingURL=@popperjs_core_lib_modifiers_arrow.js.map 12 | -------------------------------------------------------------------------------- /.vitepress/cache/deps_temp/@popperjs_core_lib_modifiers_arrow.js.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "sources": [], 4 | "sourcesContent": [], 5 | "mappings": "", 6 | "names": [] 7 | } 8 | -------------------------------------------------------------------------------- /.vitepress/cache/deps_temp/@popperjs_core_lib_modifiers_flip__js.js: -------------------------------------------------------------------------------- 1 | import { 2 | flip_default 3 | } from "./chunk-H6YSKBJL.js"; 4 | import "./chunk-FOINLP6H.js"; 5 | import "./chunk-IP2SUSOQ.js"; 6 | import "./chunk-IN7D5TZZ.js"; 7 | import "./chunk-RSJERJUL.js"; 8 | export { 9 | flip_default as default 10 | }; 11 | //# sourceMappingURL=@popperjs_core_lib_modifiers_flip__js.js.map 12 | -------------------------------------------------------------------------------- /.vitepress/cache/deps_temp/@popperjs_core_lib_modifiers_flip__js.js.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "sources": [], 4 | "sourcesContent": [], 5 | "mappings": "", 6 | "names": [] 7 | } 8 | -------------------------------------------------------------------------------- /.vitepress/cache/deps_temp/@popperjs_core_lib_modifiers_offset.js: -------------------------------------------------------------------------------- 1 | import { 2 | distanceAndSkiddingToXY, 3 | offset_default 4 | } from "./chunk-WUXKB76K.js"; 5 | import "./chunk-IN7D5TZZ.js"; 6 | import "./chunk-RSJERJUL.js"; 7 | export { 8 | offset_default as default, 9 | distanceAndSkiddingToXY 10 | }; 11 | //# sourceMappingURL=@popperjs_core_lib_modifiers_offset.js.map 12 | -------------------------------------------------------------------------------- /.vitepress/cache/deps_temp/@popperjs_core_lib_modifiers_offset.js.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "sources": [], 4 | "sourcesContent": [], 5 | "mappings": "", 6 | "names": [] 7 | } 8 | -------------------------------------------------------------------------------- /.vitepress/cache/deps_temp/@popperjs_core_lib_modifiers_preventOverflow__js.js: -------------------------------------------------------------------------------- 1 | import { 2 | preventOverflow_default 3 | } from "./chunk-ZUVEPBYQ.js"; 4 | import "./chunk-OJJNZHSS.js"; 5 | import "./chunk-FOINLP6H.js"; 6 | import "./chunk-IP2SUSOQ.js"; 7 | import "./chunk-IN7D5TZZ.js"; 8 | import "./chunk-RSJERJUL.js"; 9 | export { 10 | preventOverflow_default as default 11 | }; 12 | //# sourceMappingURL=@popperjs_core_lib_modifiers_preventOverflow__js.js.map 13 | -------------------------------------------------------------------------------- /.vitepress/cache/deps_temp/@popperjs_core_lib_modifiers_preventOverflow__js.js.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "sources": [], 4 | "sourcesContent": [], 5 | "mappings": "", 6 | "names": [] 7 | } 8 | -------------------------------------------------------------------------------- /.vitepress/cache/deps_temp/@vue_shared.js.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "sources": [], 4 | "sourcesContent": [], 5 | "mappings": "", 6 | "names": [] 7 | } 8 | -------------------------------------------------------------------------------- /.vitepress/cache/deps_temp/chunk-RSJERJUL.js: -------------------------------------------------------------------------------- 1 | var __getOwnPropNames = Object.getOwnPropertyNames; 2 | var __commonJS = (cb, mod) => function __require() { 3 | return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports; 4 | }; 5 | 6 | export { 7 | __commonJS 8 | }; 9 | //# sourceMappingURL=chunk-RSJERJUL.js.map 10 | -------------------------------------------------------------------------------- /.vitepress/cache/deps_temp/chunk-RSJERJUL.js.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "sources": [], 4 | "sourcesContent": [], 5 | "mappings": "", 6 | "names": [] 7 | } 8 | -------------------------------------------------------------------------------- /.vitepress/cache/deps_temp/dayjs_plugin_isLeapYear.js: -------------------------------------------------------------------------------- 1 | import { 2 | __commonJS 3 | } from "./chunk-RSJERJUL.js"; 4 | 5 | // node_modules/dayjs/plugin/isLeapYear.js 6 | var require_isLeapYear = __commonJS({ 7 | "node_modules/dayjs/plugin/isLeapYear.js"(exports, module) { 8 | !function(e, t) { 9 | "object" == typeof exports && "undefined" != typeof module ? module.exports = t() : "function" == typeof define && define.amd ? define(t) : (e = "undefined" != typeof globalThis ? globalThis : e || self).dayjs_plugin_isLeapYear = t(); 10 | }(exports, function() { 11 | "use strict"; 12 | return function(e, t) { 13 | t.prototype.isLeapYear = function() { 14 | return this.$y % 4 == 0 && this.$y % 100 != 0 || this.$y % 400 == 0; 15 | }; 16 | }; 17 | }); 18 | } 19 | }); 20 | export default require_isLeapYear(); 21 | //# sourceMappingURL=dayjs_plugin_isLeapYear.js.map 22 | -------------------------------------------------------------------------------- /.vitepress/cache/deps_temp/dayjs_plugin_isLeapYear.js.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "sources": ["../../../node_modules/dayjs/plugin/isLeapYear.js"], 4 | "sourcesContent": ["!function(e,t){\"object\"==typeof exports&&\"undefined\"!=typeof module?module.exports=t():\"function\"==typeof define&&define.amd?define(t):(e=\"undefined\"!=typeof globalThis?globalThis:e||self).dayjs_plugin_isLeapYear=t()}(this,(function(){\"use strict\";return function(e,t){t.prototype.isLeapYear=function(){return this.$y%4==0&&this.$y%100!=0||this.$y%400==0}}}));"], 5 | "mappings": ";;;;;AAAA;AAAA;AAAA,KAAC,SAAS,GAAE,GAAE;AAAC,kBAAU,OAAO,WAAS,eAAa,OAAO,SAAO,OAAO,UAAQ,EAAE,IAAE,cAAY,OAAO,UAAQ,OAAO,MAAI,OAAO,CAAC,KAAG,IAAE,eAAa,OAAO,aAAW,aAAW,KAAG,MAAM,0BAAwB,EAAE;AAAA,IAAC,EAAE,SAAM,WAAU;AAAC;AAAa,aAAO,SAAS,GAAE,GAAE;AAAC,UAAE,UAAU,aAAW,WAAU;AAAC,iBAAO,KAAK,KAAG,KAAG,KAAG,KAAK,KAAG,OAAK,KAAG,KAAK,KAAG,OAAK;AAAA,QAAC;AAAA,MAAC;AAAA,IAAC,CAAE;AAAA;AAAA;", 6 | "names": [] 7 | } 8 | -------------------------------------------------------------------------------- /.vitepress/cache/deps_temp/package.json: -------------------------------------------------------------------------------- 1 | {"type":"module"} -------------------------------------------------------------------------------- /.vitepress/cache/deps_temp/vue.js.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "sources": [], 4 | "sourcesContent": [], 5 | "mappings": "", 6 | "names": [] 7 | } 8 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"] 3 | } 4 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ["@babel/preset-env", "@babel/preset-typescript"], 3 | overrides: [ 4 | { 5 | test: /\.vue$/, 6 | plugins: ["@babel/transform-typescript"], 7 | }, 8 | ], 9 | env: { 10 | utils: { 11 | plugins: [["babel-plugin-module-resolver", { root: "etu-design" }]], 12 | }, 13 | }, 14 | }; 15 | -------------------------------------------------------------------------------- /deploys.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh# 忽略错误 2 | set -e# 构建 3 | npm run docs:build # 进入待发布的目录 4 | cd docs/.vitepress/dist # 如果是发布到自定义域名 5 | # echo 'www.example.com' > CNAMEgit init 6 | git add -A 7 | git commit -m 'deploy' # 如果部署到 https://.github.io 8 | git push -f git@github.com:/.github.io.git master # 如果是部署到 https://.github.io/ 9 | # git push -f git@github.com:/.git master:gh-pagescd - -------------------------------------------------------------------------------- /dist/assets/iconfont-2c1d6774.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ByteCamp6/ETU-Design/1f36b195f3fc04f7d3c86bffe0ba809072d72f4c/dist/assets/iconfont-2c1d6774.woff2 -------------------------------------------------------------------------------- /dist/assets/iconfont-9c1d6ac4.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ByteCamp6/ETU-Design/1f36b195f3fc04f7d3c86bffe0ba809072d72f4c/dist/assets/iconfont-9c1d6ac4.woff -------------------------------------------------------------------------------- /dist/assets/iconfont-ebea08e6.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ByteCamp6/ETU-Design/1f36b195f3fc04f7d3c86bffe0ba809072d72f4c/dist/assets/iconfont-ebea08e6.ttf -------------------------------------------------------------------------------- /dist/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ByteCamp6/ETU-Design/1f36b195f3fc04f7d3c86bffe0ba809072d72f4c/dist/favicon.ico -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /docs/.vitepress/cache/deps/@vue_shared.js.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "sources": [], 4 | "sourcesContent": [], 5 | "mappings": "", 6 | "names": [] 7 | } 8 | -------------------------------------------------------------------------------- /docs/.vitepress/cache/deps/chunk-RSJERJUL.js: -------------------------------------------------------------------------------- 1 | var __getOwnPropNames = Object.getOwnPropertyNames; 2 | var __commonJS = (cb, mod) => function __require() { 3 | return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports; 4 | }; 5 | 6 | export { 7 | __commonJS 8 | }; 9 | //# sourceMappingURL=chunk-RSJERJUL.js.map 10 | -------------------------------------------------------------------------------- /docs/.vitepress/cache/deps/chunk-RSJERJUL.js.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "sources": [], 4 | "sourcesContent": [], 5 | "mappings": "", 6 | "names": [] 7 | } 8 | -------------------------------------------------------------------------------- /docs/.vitepress/cache/deps/dayjs_plugin_isLeapYear.js: -------------------------------------------------------------------------------- 1 | import { 2 | __commonJS 3 | } from "./chunk-RSJERJUL.js"; 4 | 5 | // node_modules/dayjs/plugin/isLeapYear.js 6 | var require_isLeapYear = __commonJS({ 7 | "node_modules/dayjs/plugin/isLeapYear.js"(exports, module) { 8 | !function(e, t) { 9 | "object" == typeof exports && "undefined" != typeof module ? module.exports = t() : "function" == typeof define && define.amd ? define(t) : (e = "undefined" != typeof globalThis ? globalThis : e || self).dayjs_plugin_isLeapYear = t(); 10 | }(exports, function() { 11 | "use strict"; 12 | return function(e, t) { 13 | t.prototype.isLeapYear = function() { 14 | return this.$y % 4 == 0 && this.$y % 100 != 0 || this.$y % 400 == 0; 15 | }; 16 | }; 17 | }); 18 | } 19 | }); 20 | export default require_isLeapYear(); 21 | //# sourceMappingURL=dayjs_plugin_isLeapYear.js.map 22 | -------------------------------------------------------------------------------- /docs/.vitepress/cache/deps/dayjs_plugin_isLeapYear.js.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "sources": ["../../../../node_modules/dayjs/plugin/isLeapYear.js"], 4 | "sourcesContent": ["!function(e,t){\"object\"==typeof exports&&\"undefined\"!=typeof module?module.exports=t():\"function\"==typeof define&&define.amd?define(t):(e=\"undefined\"!=typeof globalThis?globalThis:e||self).dayjs_plugin_isLeapYear=t()}(this,(function(){\"use strict\";return function(e,t){t.prototype.isLeapYear=function(){return this.$y%4==0&&this.$y%100!=0||this.$y%400==0}}}));"], 5 | "mappings": ";;;;;AAAA;AAAA;AAAA,KAAC,SAAS,GAAE,GAAE;AAAC,kBAAU,OAAO,WAAS,eAAa,OAAO,SAAO,OAAO,UAAQ,EAAE,IAAE,cAAY,OAAO,UAAQ,OAAO,MAAI,OAAO,CAAC,KAAG,IAAE,eAAa,OAAO,aAAW,aAAW,KAAG,MAAM,0BAAwB,EAAE;AAAA,IAAC,EAAE,SAAM,WAAU;AAAC;AAAa,aAAO,SAAS,GAAE,GAAE;AAAC,UAAE,UAAU,aAAW,WAAU;AAAC,iBAAO,KAAK,KAAG,KAAG,KAAG,KAAK,KAAG,OAAK,KAAG,KAAK,KAAG,OAAK;AAAA,QAAC;AAAA,MAAC;AAAA,IAAC,CAAE;AAAA;AAAA;", 6 | "names": [] 7 | } 8 | -------------------------------------------------------------------------------- /docs/.vitepress/cache/deps/package.json: -------------------------------------------------------------------------------- 1 | {"type":"module"} -------------------------------------------------------------------------------- /docs/.vitepress/cache/deps/vue.js.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "sources": [], 4 | "sourcesContent": [], 5 | "mappings": "", 6 | "names": [] 7 | } 8 | -------------------------------------------------------------------------------- /docs/.vitepress/config/index.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vitepress"; 2 | import nav from "./nav"; 3 | import markdown from "./markdown"; 4 | import sidebar from "./sidebar"; 5 | 6 | export default defineConfig({ 7 | head: [["link", { rel: "icon", href: "/logo.png" }]], 8 | title: "ETU组件库", 9 | // description: ' vue-cc-ui 组件库', 10 | // lastUpdated: true, 11 | // head: [['link', { rel: 'icon', type: 'image/svg+xml', href: '/logo.svg' }]], 12 | markdown, 13 | themeConfig: { 14 | sidebar, 15 | nav, 16 | socialLinks: [ 17 | { icon: "github", link: "https://github.com/ByteCamp6/ETU-Design" }, 18 | ], 19 | logo: "/logo.png", 20 | }, 21 | base: "/docs/", 22 | }); 23 | -------------------------------------------------------------------------------- /docs/.vitepress/config/markdown.ts: -------------------------------------------------------------------------------- 1 | import { componentPreview, containerPreview } from "@vitepress-demo-preview/plugin"; 2 | import { mdPlugin } from "./plugins"; 3 | 4 | interface IMd { 5 | use: (cb: any) => any 6 | } 7 | 8 | export default { 9 | theme: { 10 | light: 'vitesse-light', 11 | dark: 'vitesse-dark' 12 | }, 13 | lineNumbers: true, 14 | config(md: IMd) { 15 | md.use(componentPreview) 16 | md.use(containerPreview) 17 | mdPlugin(md) 18 | } 19 | } -------------------------------------------------------------------------------- /docs/.vitepress/config/nav.ts: -------------------------------------------------------------------------------- 1 | export default [ 2 | { text: '指南', link: '/guide/team.md', activeMatch: '/guide/'}, 3 | { text: '组件', link: '/component/button.md', activeMatch: '/component/' }, 4 | ] -------------------------------------------------------------------------------- /docs/.vitepress/config/plugins/index.ts: -------------------------------------------------------------------------------- 1 | import MarkdownIt from 'markdown-it' 2 | import TableContainer from './table' 3 | 4 | const markdown: MarkdownIt = MarkdownIt({ 5 | breaks: true 6 | }) 7 | 8 | export const mdPlugin = (md: MarkdownIt) => { 9 | md.use(TableContainer) 10 | } -------------------------------------------------------------------------------- /docs/.vitepress/config/plugins/table.ts: -------------------------------------------------------------------------------- 1 | import type MarkdownIt from 'markdown-it' 2 | 3 | export default (md: MarkdownIt): void => { 4 | md.renderer.rules.table_open = (): string => '
' 5 | md.renderer.rules.table_close = (): string => '
' 6 | } -------------------------------------------------------------------------------- /docs/.vitepress/dist/assets/iconfont.2c1d6774.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ByteCamp6/ETU-Design/1f36b195f3fc04f7d3c86bffe0ba809072d72f4c/docs/.vitepress/dist/assets/iconfont.2c1d6774.woff2 -------------------------------------------------------------------------------- /docs/.vitepress/dist/assets/iconfont.9c1d6ac4.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ByteCamp6/ETU-Design/1f36b195f3fc04f7d3c86bffe0ba809072d72f4c/docs/.vitepress/dist/assets/iconfont.9c1d6ac4.woff -------------------------------------------------------------------------------- /docs/.vitepress/dist/assets/iconfont.ebea08e6.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ByteCamp6/ETU-Design/1f36b195f3fc04f7d3c86bffe0ba809072d72f4c/docs/.vitepress/dist/assets/iconfont.ebea08e6.ttf -------------------------------------------------------------------------------- /docs/.vitepress/dist/assets/index.md.42ef25b8.js: -------------------------------------------------------------------------------- 1 | import{_ as e,o as t,e as i}from"./app.34eee03d.js";const m=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"home","hero":{"name":"ETU组件库","text":"一个使用 vue3、vite的组件库","tagline":"看过星辰大海，才明白自己渺小如沙","image":{"src":"/logo.svg","alt":"cc ui"},"actions":[{"theme":"brand","text":"开始","link":"/introduce"},{"theme":"alt","text":"GitHub地址","link":"https://github.com/ByteCamp6/ETU-Design"}]},"features":[{"icon":"🛠️","title":"丰富的功能","details":"内置微脚手架，专注于组件的开发。"},{"icon":"⚡️","title":"按需加载","details":"拿你想要的，减少打包体积。"},{"icon":"💡","title":"先进的技术栈","details":"vue3、vite4、vitepress、vitest"},{"icon":"🎨","title":"风格百变","details":"修改主题组合搭配，可实现数百种不同风格的界面"},{"icon":"📦","title":"丰富的组件","details":"内置常用组件，提高开发效率"},{"icon":"🕹","title":"交互式demo演示","details":"所见即所得，给你良好的组件文档使用体验"}]},"headers":[],"relativePath":"index.md"}'),a={name:"index.md"};function n(o,s,c,l,d,r){return t(),i("div")}const p=e(a,[["render",n]]);export{m as __pageData,p as default}; 2 | -------------------------------------------------------------------------------- /docs/.vitepress/dist/assets/index.md.42ef25b8.lean.js: -------------------------------------------------------------------------------- 1 | import{_ as e,o as t,e as i}from"./app.34eee03d.js";const m=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"home","hero":{"name":"ETU组件库","text":"一个使用 vue3、vite的组件库","tagline":"看过星辰大海，才明白自己渺小如沙","image":{"src":"/logo.svg","alt":"cc ui"},"actions":[{"theme":"brand","text":"开始","link":"/introduce"},{"theme":"alt","text":"GitHub地址","link":"https://github.com/ByteCamp6/ETU-Design"}]},"features":[{"icon":"🛠️","title":"丰富的功能","details":"内置微脚手架，专注于组件的开发。"},{"icon":"⚡️","title":"按需加载","details":"拿你想要的，减少打包体积。"},{"icon":"💡","title":"先进的技术栈","details":"vue3、vite4、vitepress、vitest"},{"icon":"🎨","title":"风格百变","details":"修改主题组合搭配，可实现数百种不同风格的界面"},{"icon":"📦","title":"丰富的组件","details":"内置常用组件，提高开发效率"},{"icon":"🕹","title":"交互式demo演示","details":"所见即所得，给你良好的组件文档使用体验"}]},"headers":[],"relativePath":"index.md"}'),a={name:"index.md"};function n(o,s,c,l,d,r){return t(),i("div")}const p=e(a,[["render",n]]);export{m as __pageData,p as default}; 2 | -------------------------------------------------------------------------------- /docs/.vitepress/dist/assets/inter-italic-cyrillic-ext.33bd5a8e.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ByteCamp6/ETU-Design/1f36b195f3fc04f7d3c86bffe0ba809072d72f4c/docs/.vitepress/dist/assets/inter-italic-cyrillic-ext.33bd5a8e.woff2 -------------------------------------------------------------------------------- /docs/.vitepress/dist/assets/inter-italic-cyrillic.ea42a392.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ByteCamp6/ETU-Design/1f36b195f3fc04f7d3c86bffe0ba809072d72f4c/docs/.vitepress/dist/assets/inter-italic-cyrillic.ea42a392.woff2 -------------------------------------------------------------------------------- /docs/.vitepress/dist/assets/inter-italic-greek-ext.4fbe9427.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ByteCamp6/ETU-Design/1f36b195f3fc04f7d3c86bffe0ba809072d72f4c/docs/.vitepress/dist/assets/inter-italic-greek-ext.4fbe9427.woff2 -------------------------------------------------------------------------------- /docs/.vitepress/dist/assets/inter-italic-greek.8f4463c4.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ByteCamp6/ETU-Design/1f36b195f3fc04f7d3c86bffe0ba809072d72f4c/docs/.vitepress/dist/assets/inter-italic-greek.8f4463c4.woff2 -------------------------------------------------------------------------------- /docs/.vitepress/dist/assets/inter-italic-latin-ext.bd8920cc.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ByteCamp6/ETU-Design/1f36b195f3fc04f7d3c86bffe0ba809072d72f4c/docs/.vitepress/dist/assets/inter-italic-latin-ext.bd8920cc.woff2 -------------------------------------------------------------------------------- /docs/.vitepress/dist/assets/inter-italic-latin.bd3b6f56.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ByteCamp6/ETU-Design/1f36b195f3fc04f7d3c86bffe0ba809072d72f4c/docs/.vitepress/dist/assets/inter-italic-latin.bd3b6f56.woff2 -------------------------------------------------------------------------------- /docs/.vitepress/dist/assets/inter-italic-vietnamese.6ce511fb.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ByteCamp6/ETU-Design/1f36b195f3fc04f7d3c86bffe0ba809072d72f4c/docs/.vitepress/dist/assets/inter-italic-vietnamese.6ce511fb.woff2 -------------------------------------------------------------------------------- /docs/.vitepress/dist/assets/inter-roman-cyrillic-ext.e75737ce.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ByteCamp6/ETU-Design/1f36b195f3fc04f7d3c86bffe0ba809072d72f4c/docs/.vitepress/dist/assets/inter-roman-cyrillic-ext.e75737ce.woff2 -------------------------------------------------------------------------------- /docs/.vitepress/dist/assets/inter-roman-cyrillic.5f2c6c8c.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ByteCamp6/ETU-Design/1f36b195f3fc04f7d3c86bffe0ba809072d72f4c/docs/.vitepress/dist/assets/inter-roman-cyrillic.5f2c6c8c.woff2 -------------------------------------------------------------------------------- /docs/.vitepress/dist/assets/inter-roman-greek-ext.ab0619bc.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ByteCamp6/ETU-Design/1f36b195f3fc04f7d3c86bffe0ba809072d72f4c/docs/.vitepress/dist/assets/inter-roman-greek-ext.ab0619bc.woff2 -------------------------------------------------------------------------------- /docs/.vitepress/dist/assets/inter-roman-greek.d5a6d92a.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ByteCamp6/ETU-Design/1f36b195f3fc04f7d3c86bffe0ba809072d72f4c/docs/.vitepress/dist/assets/inter-roman-greek.d5a6d92a.woff2 -------------------------------------------------------------------------------- /docs/.vitepress/dist/assets/inter-roman-latin-ext.0030eebd.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ByteCamp6/ETU-Design/1f36b195f3fc04f7d3c86bffe0ba809072d72f4c/docs/.vitepress/dist/assets/inter-roman-latin-ext.0030eebd.woff2 -------------------------------------------------------------------------------- /docs/.vitepress/dist/assets/inter-roman-latin.2ed14f66.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ByteCamp6/ETU-Design/1f36b195f3fc04f7d3c86bffe0ba809072d72f4c/docs/.vitepress/dist/assets/inter-roman-latin.2ed14f66.woff2 -------------------------------------------------------------------------------- /docs/.vitepress/dist/assets/inter-roman-vietnamese.14ce25a6.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ByteCamp6/ETU-Design/1f36b195f3fc04f7d3c86bffe0ba809072d72f4c/docs/.vitepress/dist/assets/inter-roman-vietnamese.14ce25a6.woff2 -------------------------------------------------------------------------------- /docs/.vitepress/dist/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ByteCamp6/ETU-Design/1f36b195f3fc04f7d3c86bffe0ba809072d72f4c/docs/.vitepress/dist/favicon.ico -------------------------------------------------------------------------------- /docs/.vitepress/dist/hashmap.json: -------------------------------------------------------------------------------- 1 | {"guide_team.md":"d62d0157","index.md":"42ef25b8","component_drawer.md":"9ef50619","component_checkbox.md":"b4285c64","component_button.md":"cee57914","component_tag.md":"e4bca401"} 2 | -------------------------------------------------------------------------------- /docs/.vitepress/dist/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ByteCamp6/ETU-Design/1f36b195f3fc04f7d3c86bffe0ba809072d72f4c/docs/.vitepress/dist/logo.png -------------------------------------------------------------------------------- /docs/.vitepress/theme/index.ts: -------------------------------------------------------------------------------- 1 | import Theme from "vitepress/theme"; 2 | import { ElementPlusContainer } from "@vitepress-demo-preview/component"; 3 | import "@vitepress-demo-preview/component/dist/style.css"; 4 | import "./style.scss"; 5 | import type { App } from "vue"; 6 | import ETU from "../../../packages/index"; 7 | import "../../../packages/theme-chalk/src/index.scss"; 8 | 9 | export default { 10 | ...Theme, 11 | enhanceApp({ app }: { app: App }) { 12 | // 注册组件 13 | app.component("demo-preview", ElementPlusContainer); 14 | app.use(ETU as any); 15 | }, 16 | }; 17 | -------------------------------------------------------------------------------- /docs/component/icon.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Icon 3 | --- 4 | 5 | # Icon 图标 6 | 7 | 一套常用的图标集合。 8 | 9 | ## 基础用法 10 | 11 | 12 | ## 图标集合 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /docs/component/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Text 3 | --- 4 | 5 | # Text 标签 6 | 7 | 用于虚拟树形控件 8 | 9 | ## 基础用法 10 | 11 | 由 `type` 属性来选择 Text 的类型。 12 | 13 | 14 | 15 | 16 | ## 尺寸 17 | 18 | 使用 `size` 属性配置尺寸，可选的尺寸大小有: `large`, `default` 或 `small` 19 | 20 | 21 | 22 | 23 | ## 覆盖 24 | 25 | 使用属性 `tag` 覆盖元素 26 | 27 | 28 | 29 | ## 省略 30 | 31 | 通过 `truncated` 属性，在文本超过视图或最大宽度设置时展示省略符。 32 | 33 | -------------------------------------------------------------------------------- /docs/component/tree.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Tree 3 | --- 4 | 5 | # Tree 标签 6 | 7 | 用于虚拟树形控件 8 | 9 | ## 基础用法 10 | 11 | 我们使用``标签来调用虚拟树形控件。 12 | 13 | 我们使用`:options=`来绑定要展示的数据。 14 | 15 | 数据示例: 16 | 17 | ```vue 18 | const state = reactive({ 19 | treeOptions: [ 20 | { 21 | label: "一级", 22 | children: [ 23 | { 24 | label: "一级-1", 25 | }, 26 | { 27 | label: "一级-2", 28 | children: [ 29 | { 30 | label: "一级-2-1", 31 | }, 32 | { 33 | label: "一级-2-2", 34 | }, 35 | ], 36 | }, 37 | ], 38 | }, 39 | ], 40 | }); 41 | const { treeOptions } = state; 42 | ``` 43 | 44 | 数据可以按照树形数据给Tree组件，每个数据可以包含`label`名称,和`children`子节点。 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /docs/examples/avatar/type.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 19 | -------------------------------------------------------------------------------- /docs/examples/breadcrumb/basic.vue: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /docs/examples/breadcrumb/separator.vue: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /docs/examples/button/clickFun.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /docs/examples/button/curvature.vue: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /docs/examples/button/disabled.vue: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /docs/examples/button/hollow.vue: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /docs/examples/button/iscircle.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | -------------------------------------------------------------------------------- /docs/examples/button/size.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /docs/examples/button/slotDemo.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /docs/examples/button/type.vue: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /docs/examples/checkbox/basic.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 14 | -------------------------------------------------------------------------------- /docs/examples/checkbox/disabled.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 14 | -------------------------------------------------------------------------------- /docs/examples/checkbox/group.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 16 | -------------------------------------------------------------------------------- /docs/examples/checkbox/limit.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 15 | -------------------------------------------------------------------------------- /docs/examples/date-picker/basic.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 13 | -------------------------------------------------------------------------------- /docs/examples/date-picker/format.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 13 | -------------------------------------------------------------------------------- /docs/examples/date-picker/range.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 13 | -------------------------------------------------------------------------------- /docs/examples/date-picker/type.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 17 | 18 | 23 | -------------------------------------------------------------------------------- /docs/examples/dialog/basic.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 22 | -------------------------------------------------------------------------------- /docs/examples/dialog/draggable.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 23 | -------------------------------------------------------------------------------- /docs/examples/divider/basic.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /docs/examples/divider/dotted.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /docs/examples/divider/text-type.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /docs/examples/divider/vertical.vue: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /docs/examples/drawer/titleSolt.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /docs/examples/dropdown/basic.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /docs/examples/dropdown/event.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 25 | -------------------------------------------------------------------------------- /docs/examples/icon/normal.vue: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /docs/examples/input/basic.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 9 | -------------------------------------------------------------------------------- /docs/examples/input/clearable.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 9 | -------------------------------------------------------------------------------- /docs/examples/input/complex.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 12 | -------------------------------------------------------------------------------- /docs/examples/input/disabled.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 9 | -------------------------------------------------------------------------------- /docs/examples/input/password.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 14 | -------------------------------------------------------------------------------- /docs/examples/input/prefixSuffix.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 15 | -------------------------------------------------------------------------------- /docs/examples/input/size.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 11 | -------------------------------------------------------------------------------- /docs/examples/input/textarea.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 9 | -------------------------------------------------------------------------------- /docs/examples/layout/basic.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 24 | -------------------------------------------------------------------------------- /docs/examples/layout/gutter.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 16 | -------------------------------------------------------------------------------- /docs/examples/layout/mixin.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 24 | -------------------------------------------------------------------------------- /docs/examples/layout/offset.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 20 | -------------------------------------------------------------------------------- /docs/examples/link/basic.vue: -------------------------------------------------------------------------------- 1 | 19 | 27 | -------------------------------------------------------------------------------- /docs/examples/link/disabled.vue: -------------------------------------------------------------------------------- 1 | 14 | 33 | -------------------------------------------------------------------------------- /docs/examples/link/iconLink.vue: -------------------------------------------------------------------------------- 1 | 6 | 14 | -------------------------------------------------------------------------------- /docs/examples/link/undline.vue: -------------------------------------------------------------------------------- 1 | 14 | 22 | -------------------------------------------------------------------------------- /docs/examples/menu/basic.vue: -------------------------------------------------------------------------------- 1 | 10 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /docs/examples/menu/colors.vue: -------------------------------------------------------------------------------- 1 | 10 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /docs/examples/menu/disabled.vue: -------------------------------------------------------------------------------- 1 | 11 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /docs/examples/menu/mode.vue: -------------------------------------------------------------------------------- 1 | 10 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /docs/examples/message/basic.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 12 | -------------------------------------------------------------------------------- /docs/examples/message/closable.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 42 | -------------------------------------------------------------------------------- /docs/examples/message/status.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 27 | -------------------------------------------------------------------------------- /docs/examples/pagination/basic.vue: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /docs/examples/pagination/one.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 16 | -------------------------------------------------------------------------------- /docs/examples/popper/arrow.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /docs/examples/popper/custom.vue: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ByteCamp6/ETU-Design/1f36b195f3fc04f7d3c86bffe0ba809072d72f4c/docs/examples/popper/custom.vue -------------------------------------------------------------------------------- /docs/examples/popper/show.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 21 | -------------------------------------------------------------------------------- /docs/examples/progress/basic.vue: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /docs/examples/progress/precent.vue: -------------------------------------------------------------------------------- 1 | 24 | -------------------------------------------------------------------------------- /docs/examples/radio/basic.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 11 | -------------------------------------------------------------------------------- /docs/examples/radio/disabled.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 13 | -------------------------------------------------------------------------------- /docs/examples/radio/group.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | -------------------------------------------------------------------------------- /docs/examples/scrollbar/basic.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | -------------------------------------------------------------------------------- /docs/examples/scrollbar/max-height.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 24 | 25 | 38 | -------------------------------------------------------------------------------- /docs/examples/scrollbar/vertical.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 29 | -------------------------------------------------------------------------------- /docs/examples/select/basic.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 40 | i 41 | -------------------------------------------------------------------------------- /docs/examples/select/clearable.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 40 | i 41 | -------------------------------------------------------------------------------- /docs/examples/select/disabled-option.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 42 | i 43 | -------------------------------------------------------------------------------- /docs/examples/select/disabled.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 40 | i 41 | -------------------------------------------------------------------------------- /docs/examples/select/filterable.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 40 | i 41 | -------------------------------------------------------------------------------- /docs/examples/select/multiple.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 40 | i 41 | -------------------------------------------------------------------------------- /docs/examples/switch/basic.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 11 | -------------------------------------------------------------------------------- /docs/examples/switch/bgColor.vue: -------------------------------------------------------------------------------- 1 | 6 | 11 | -------------------------------------------------------------------------------- /docs/examples/switch/differentVal.vue: -------------------------------------------------------------------------------- 1 | 9 | 17 | -------------------------------------------------------------------------------- /docs/examples/switch/disabled.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 11 | -------------------------------------------------------------------------------- /docs/examples/switch/size.vue: -------------------------------------------------------------------------------- 1 | 11 | 16 | -------------------------------------------------------------------------------- /docs/examples/switch/vmodel.vue: -------------------------------------------------------------------------------- 1 | 4 | 12 | -------------------------------------------------------------------------------- /docs/examples/table/basic.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 45 | -------------------------------------------------------------------------------- /docs/examples/tag/basic.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | -------------------------------------------------------------------------------- /docs/examples/tag/removeable.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /docs/examples/tag/round.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /docs/examples/tag/size.vue: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /docs/examples/text/basic.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /docs/examples/text/size.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /docs/examples/text/tag.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | -------------------------------------------------------------------------------- /docs/examples/text/truncated.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /docs/examples/tree/basic.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /docs/examples/upload/basic.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 28 | -------------------------------------------------------------------------------- /docs/examples/upload/drag.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 25 | -------------------------------------------------------------------------------- /docs/examples/upload/manual.vue: -------------------------------------------------------------------------------- 1 | 17 | 26 | -------------------------------------------------------------------------------- /docs/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ByteCamp6/ETU-Design/1f36b195f3fc04f7d3c86bffe0ba809072d72f4c/docs/public/favicon.ico -------------------------------------------------------------------------------- /docs/public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ByteCamp6/ETU-Design/1f36b195f3fc04f7d3c86bffe0ba809072d72f4c/docs/public/logo.png -------------------------------------------------------------------------------- /docs/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import vueJsx from "@vitejs/plugin-vue-jsx"; 3 | import VueSetupExtend from "vite-plugin-vue-setup-extend"; 4 | 5 | export default defineConfig({ 6 | plugins: [ 7 | // 添加JSX插件 8 | vueJsx(), 9 | VueSetupExtend(), 10 | ], 11 | server: { 12 | port: 3000, 13 | }, 14 | }); 15 | -------------------------------------------------------------------------------- /env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "node_modules/lerna/schemas/lerna-schema.json", 3 | "useWorkspaces": true, 4 | "version": "0.0.1" 5 | } 6 | -------------------------------------------------------------------------------- /packages/ETU-Design/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "etu-design", 3 | "version": "0.0.1", 4 | "description": "> TODO: description", 5 | "author": "jiaze <1244153559@qq.com>", 6 | "homepage": "", 7 | "license": "ISC", 8 | "main": "lib/ETU-Design.js", 9 | "directories": { 10 | "lib": "lib", 11 | "test": "__tests__" 12 | }, 13 | "files": [ 14 | "lib" 15 | ], 16 | "publishConfig": { 17 | "registry": "https://registry.npm.taobao.org/" 18 | }, 19 | "scripts": { 20 | "test": "node ./__tests__/ETU-Design.test.js" 21 | }, 22 | "dependencies": { 23 | "@etu-design/directives": "^0.0.1", 24 | "@etu-design/hooks": "^0.0.1", 25 | "@etu-design/theme-chalk": "^0.0.1", 26 | "animate.css": "^4.1.1", 27 | "hooks": "^0.3.2", 28 | "theme-chalk": "^1.0.0-dev.9", 29 | "utils": "^0.3.1", 30 | "vite": "^4.0.4", 31 | "vue-router": "^4.1.6" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /packages/affix/README.md: -------------------------------------------------------------------------------- 1 | # Affix组件 2 | 3 | 固钉 -------------------------------------------------------------------------------- /packages/affix/index.ts: -------------------------------------------------------------------------------- 1 | import Affix from "./src/affix.vue"; 2 | import type { App } from "vue"; 3 | 4 | Affix.install = (app: App) => { 5 | // 注册组件 6 | app.component(Affix.name, Affix); 7 | }; 8 | 9 | export default Affix; 10 | -------------------------------------------------------------------------------- /packages/avatar/README.md: -------------------------------------------------------------------------------- 1 | # `avatar` 2 | 3 | > TODO: description 4 | 5 | ## Usage 6 | 7 | ``` 8 | const avatar = require('avatar'); 9 | 10 | // TODO: DEMONSTRATE API 11 | ``` 12 | -------------------------------------------------------------------------------- /packages/avatar/__tests__/avatar.test.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const avatar = require('..'); 4 | const assert = require('assert').strict; 5 | 6 | assert.strictEqual(avatar(), 'Hello from avatar'); 7 | console.info("avatar tests passed"); 8 | -------------------------------------------------------------------------------- /packages/avatar/index.ts: -------------------------------------------------------------------------------- 1 | import Avatar from "./src/avatar.vue"; 2 | import type { App } from "vue"; 3 | 4 | Avatar.install = (app: App) => { 5 | app.component(Avatar.name, Avatar); 6 | }; 7 | 8 | export default Avatar; 9 | export * from "./src/avatar"; 10 | -------------------------------------------------------------------------------- /packages/avatar/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@etu-design/avatar", 3 | "version": "0.0.1", 4 | "description": "> TODO: description", 5 | "author": "voilt-sourse <2503063984@qq.com>", 6 | "homepage": "", 7 | "license": "ISC" 8 | } 9 | -------------------------------------------------------------------------------- /packages/breadcrumb/README.md: -------------------------------------------------------------------------------- 1 | # `breadcrumb` 2 | 3 | > TODO: description 4 | 5 | ## Usage 6 | 7 | ``` 8 | const breadcrumb = require('breadcrumb'); 9 | 10 | // TODO: DEMONSTRATE API 11 | ``` 12 | -------------------------------------------------------------------------------- /packages/breadcrumb/__tests__/breadcrumb.test.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const breadcrumb = require('..'); 4 | const assert = require('assert').strict; 5 | 6 | assert.strictEqual(breadcrumb(), 'Hello from breadcrumb'); 7 | console.info("breadcrumb tests passed"); 8 | -------------------------------------------------------------------------------- /packages/breadcrumb/index.ts: -------------------------------------------------------------------------------- 1 | import Breadcrumb from "./src/breadcrumb.vue"; 2 | import BreadcrumbItem from "./src/breadcrumb-item.vue"; 3 | import type { App } from "vue"; 4 | 5 | Breadcrumb.install = (app: App) => { 6 | // 注册组件 7 | app.component(Breadcrumb.name, Breadcrumb); 8 | }; 9 | 10 | BreadcrumbItem.install = (app: App) => { 11 | // 注册组件 12 | app.component(BreadcrumbItem.name, BreadcrumbItem); 13 | }; 14 | 15 | export default { Breadcrumb, BreadcrumbItem }; 16 | 17 | export * from "./src/breadcrumb"; 18 | export * from "./src/breadcrumb-item"; 19 | -------------------------------------------------------------------------------- /packages/breadcrumb/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "breadcrumb", 3 | "version": "0.0.1", 4 | "description": "> TODO: description", 5 | "author": "voilt-sourse <2503063984@qq.com>", 6 | "homepage": "", 7 | "license": "ISC", 8 | "main": "./index.ts", 9 | "dependencies": { 10 | "@etu-design/directives": "^0.0.1", 11 | "animate.css": "^4.1.1", 12 | "vue-router": "^4.1.6" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/breadcrumb/src/breadcrumb-item.ts: -------------------------------------------------------------------------------- 1 | import type { ExtractPropTypes } from "vue"; 2 | import type BreadcrumbItem from "./breadcrumb-item.vue"; 3 | 4 | export const breadcrumbItemProps = { 5 | to: { 6 | type: String, 7 | default: "", 8 | }, 9 | replace: { 10 | type: Boolean, 11 | values: [true, false], 12 | default: false, 13 | }, 14 | } as const; 15 | 16 | export type BreadcrumbItemProps = ExtractPropTypes; 17 | export type BreadcrumbItemInstance = InstanceType; 18 | -------------------------------------------------------------------------------- /packages/breadcrumb/src/breadcrumb.ts: -------------------------------------------------------------------------------- 1 | import type { ExtractPropTypes } from "vue"; 2 | import type Breadcrumb from "./breadcrumb.vue"; 3 | 4 | export const breadcrumbProps = { 5 | separator: { 6 | type: String, 7 | default: "/", 8 | }, 9 | } as const; 10 | 11 | export type BreadcrumbProps = ExtractPropTypes; 12 | export type BreadcrumbInstance = InstanceType; 13 | -------------------------------------------------------------------------------- /packages/breadcrumb/src/breadcrumb.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 24 | -------------------------------------------------------------------------------- /packages/button/_tests_/button.test.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const button = require(".."); 4 | const assert = require("button").strict; 5 | 6 | assert.strictEqual(button(), "Hello from button"); 7 | console.info("button tests passed"); 8 | -------------------------------------------------------------------------------- /packages/button/index.ts: -------------------------------------------------------------------------------- 1 | import Button from "./src/button.vue"; 2 | import type { App } from "vue"; 3 | 4 | Button.install = (app: App) => { 5 | // 注册组件 6 | app.component(Button.name, Button); 7 | }; 8 | 9 | export default Button; 10 | -------------------------------------------------------------------------------- /packages/button/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "button", 3 | "version": "0.0.1", 4 | "description": "> TODO: description", 5 | "author": "Polaris-6625 <2281487673@qq.com>", 6 | "homepage": "", 7 | "license": "ISC" 8 | } 9 | -------------------------------------------------------------------------------- /packages/checkbox/README.md: -------------------------------------------------------------------------------- 1 | # `checkbox` 2 | 3 | > TODO: description 4 | 5 | ## Usage 6 | 7 | ``` 8 | const checkbox = require('checkbox'); 9 | 10 | // TODO: DEMONSTRATE API 11 | ``` 12 | -------------------------------------------------------------------------------- /packages/checkbox/index.ts: -------------------------------------------------------------------------------- 1 | import Checkbox from "./src/checkbox.vue"; 2 | import CheckboxGroup from "./src/checkbox-group.vue"; 3 | import type { App } from "vue"; 4 | 5 | Checkbox.install = (app: App) => { 6 | // 注册组件 7 | app.component(Checkbox.name, Checkbox); 8 | }; 9 | 10 | CheckboxGroup.install = (app: App) => { 11 | // 注册组件 12 | app.component(CheckboxGroup.name, CheckboxGroup); 13 | }; 14 | 15 | export default { Checkbox, CheckboxGroup }; 16 | -------------------------------------------------------------------------------- /packages/checkbox/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@etu-design/checkbox", 3 | "version": "0.0.0", 4 | "description": "> TODO: description", 5 | "author": "1379255913 <1379255913@qq.com>", 6 | "homepage": "https://github.com/ByteCamp6/ETU-Design#readme", 7 | "license": "ISC" 8 | } 9 | -------------------------------------------------------------------------------- /packages/checkbox/src/composables/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./use-checkbox-disabled"; 2 | export * from "./use-checkbox-event"; 3 | export * from "./use-checkbox-model"; 4 | export * from "./use-checkbox-status"; 5 | export * from "./use-checkbox"; 6 | -------------------------------------------------------------------------------- /packages/col/README.md: -------------------------------------------------------------------------------- 1 | # `col` 2 | 3 | > TODO: description 4 | 5 | ## Usage 6 | 7 | ``` 8 | const col = require('col'); 9 | 10 | // TODO: DEMONSTRATE API 11 | ``` 12 | -------------------------------------------------------------------------------- /packages/col/__tests__/col.test.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const col = require('..'); 4 | const assert = require('assert').strict; 5 | 6 | assert.strictEqual(col(), 'Hello from col'); 7 | console.info("col tests passed"); 8 | -------------------------------------------------------------------------------- /packages/col/index.ts: -------------------------------------------------------------------------------- 1 | import Col from "./src/col.vue"; 2 | import type { App } from "vue"; 3 | 4 | Col.install = (app: App) => { 5 | // 注册组件 6 | app.component(Col.name, Col); 7 | }; 8 | 9 | export default Col; 10 | -------------------------------------------------------------------------------- /packages/col/src/col.ts: -------------------------------------------------------------------------------- 1 | import type { ExtractPropTypes } from "vue"; 2 | 3 | export const colProps = { 4 | span: { 5 | type: Number, 6 | default: 0, 7 | }, // 栏位数 8 | offset: { 9 | type: Number, 10 | default: 0, 11 | }, // 偏移量 12 | } as const; 13 | 14 | export type ColProps = ExtractPropTypes; 15 | -------------------------------------------------------------------------------- /packages/col/src/col.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /packages/collapse/README.md: -------------------------------------------------------------------------------- 1 | # `collapse` 2 | 3 | > TODO: description 4 | 5 | ## Usage 6 | 7 | ``` 8 | const collapse = require('collapse'); 9 | 10 | // TODO: DEMONSTRATE API 11 | ``` 12 | -------------------------------------------------------------------------------- /packages/collapse/__tests__/collapse.test.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const collapse = require('..'); 4 | const assert = require('assert').strict; 5 | 6 | assert.strictEqual(collapse(), 'Hello from collapse'); 7 | console.info("collapse tests passed"); 8 | -------------------------------------------------------------------------------- /packages/collapse/index.ts: -------------------------------------------------------------------------------- 1 | import Collapse from "./src/collapse.vue"; 2 | import CollapseItem from "./src/collapse-item.vue"; 3 | 4 | import type { App } from "vue"; 5 | 6 | Collapse.install = (app: App) => { 7 | app.component(Collapse.name, Collapse); 8 | }; 9 | 10 | CollapseItem.install = (app: App) => { 11 | app.component(CollapseItem.name, CollapseItem); 12 | }; 13 | 14 | export default { 15 | Collapse, 16 | CollapseItem, 17 | }; 18 | 19 | export * from "./src/collapse"; 20 | export * from "./src/collapse-item"; 21 | -------------------------------------------------------------------------------- /packages/collapse/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@etu-design/collapse", 3 | "version": "0.0.1", 4 | "description": "> TODO: description", 5 | "author": "voilt-sourse <2503063984@qq.com>", 6 | "homepage": "", 7 | "license": "ISC" 8 | } 9 | -------------------------------------------------------------------------------- /packages/collapse/src/collapse-item.ts: -------------------------------------------------------------------------------- 1 | import type { ExtractPropTypes } from "vue"; 2 | 3 | export const collapseItemProps = { 4 | name: { 5 | type: [String, Number], 6 | }, 7 | title: { 8 | type: String, 9 | default: "", 10 | }, 11 | disabled: { 12 | type: Boolean, 13 | default: false, 14 | }, 15 | }; 16 | 17 | export type CollapseItemProps = ExtractPropTypes; 18 | -------------------------------------------------------------------------------- /packages/collapse/src/collapse.ts: -------------------------------------------------------------------------------- 1 | import type { ExtractPropTypes } from "vue"; 2 | import { isString, isArray } from "@etu-design/utils"; 3 | import type Collapse from "./collapse.vue"; 4 | 5 | export const collapseProps = { 6 | modelValue: { 7 | type: [String, Array], 8 | }, 9 | accordion: { 10 | type: Boolean, 11 | default: false, 12 | }, 13 | }; 14 | 15 | export const collapseEmits = { 16 | change: (val: string | Array) => isString(val) || isArray(val), 17 | }; 18 | 19 | export type CollapseProps = ExtractPropTypes; 20 | export type CollapseInstance = InstanceType; 21 | -------------------------------------------------------------------------------- /packages/date-picker/README.md: -------------------------------------------------------------------------------- 1 | # `date-picker` 2 | 3 | > TODO: description 4 | 5 | ## Usage 6 | 7 | ``` 8 | const datePicker = require('date-picker'); 9 | 10 | // TODO: DEMONSTRATE API 11 | ``` 12 | -------------------------------------------------------------------------------- /packages/date-picker/__tests__/date-picker.test.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const datePicker = require('..'); 4 | const assert = require('assert').strict; 5 | 6 | assert.strictEqual(datePicker(), 'Hello from datePicker'); 7 | console.info("datePicker tests passed"); 8 | -------------------------------------------------------------------------------- /packages/date-picker/index.ts: -------------------------------------------------------------------------------- 1 | import DatePicker from "./src/date-picker.vue"; 2 | import type { App } from "vue"; 3 | 4 | DatePicker.install = (app: App) => { 5 | app.component(DatePicker.name, DatePicker); 6 | }; 7 | 8 | export default DatePicker; 9 | export * from "./src/date-picker"; 10 | -------------------------------------------------------------------------------- /packages/date-picker/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@etu-design/date-picker", 3 | "version": "0.0.1", 4 | "description": "> TODO: description", 5 | "author": "voilt-sourse <2503063984@qq.com>", 6 | "homepage": "", 7 | "license": "ISC" 8 | } 9 | -------------------------------------------------------------------------------- /packages/date-picker/src/props/date-nav.ts: -------------------------------------------------------------------------------- 1 | import type { ExtractPropTypes } from "vue"; 2 | import { sharedProps } from "./shared"; 3 | 4 | export const dateNavProps = { 5 | left: { 6 | type: Boolean, 7 | default: true, 8 | }, 9 | right: { 10 | type: Boolean, 11 | default: true, 12 | }, 13 | change: { 14 | type: Boolean, 15 | default: true, 16 | }, 17 | ...sharedProps, 18 | }; 19 | 20 | export type DateNavProps = ExtractPropTypes; 21 | -------------------------------------------------------------------------------- /packages/date-picker/src/props/date-table.ts: -------------------------------------------------------------------------------- 1 | import type { ExtractPropTypes } from "vue"; 2 | import { sharedProps } from "./shared"; 3 | 4 | export const dateTableProps = { 5 | ...sharedProps, 6 | }; 7 | 8 | export type DateTableProps = ExtractPropTypes; 9 | -------------------------------------------------------------------------------- /packages/date-picker/src/props/shared.ts: -------------------------------------------------------------------------------- 1 | import type { ExtractPropTypes } from "vue"; 2 | import { now } from "../utils"; 3 | import dayjs from "dayjs"; 4 | 5 | export const sharedProps = { 6 | value: { 7 | type: dayjs.Dayjs, 8 | }, 9 | model: { 10 | type: dayjs.Dayjs, 11 | }, 12 | index: { 13 | type: Number, 14 | default: -1, 15 | }, 16 | }; 17 | 18 | export type SharedProps = ExtractPropTypes; 19 | -------------------------------------------------------------------------------- /packages/dialog/README.md: -------------------------------------------------------------------------------- 1 | # `dialog` 2 | 3 | > TODO: description 4 | 5 | ## Usage 6 | 7 | ``` 8 | const dialog = require('dialog'); 9 | 10 | // TODO: DEMONSTRATE API 11 | ``` 12 | -------------------------------------------------------------------------------- /packages/dialog/__tests__/dialog.test.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ByteCamp6/ETU-Design/1f36b195f3fc04f7d3c86bffe0ba809072d72f4c/packages/dialog/__tests__/dialog.test.ts -------------------------------------------------------------------------------- /packages/dialog/index.ts: -------------------------------------------------------------------------------- 1 | import Dialog from "./src/dialog.vue"; 2 | import type { App } from "vue"; 3 | 4 | Dialog.install = (app: App) => { 5 | // 注册组件 6 | app.component(Dialog.name, Dialog); 7 | }; 8 | 9 | export default Dialog; 10 | -------------------------------------------------------------------------------- /packages/dialog/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@etu-design/dialog", 3 | "version": "0.0.1", 4 | "description": "> TODO: description", 5 | "author": "1379255913 <1379255913@qq.com>", 6 | "homepage": "https://github.com/ByteCamp6/ETU-Design#readme", 7 | "license": "ISC" 8 | } 9 | -------------------------------------------------------------------------------- /packages/dialog/src/dialog-content.ts: -------------------------------------------------------------------------------- 1 | export const dialogContentProps = { 2 | alignCenter: { 3 | type: Boolean, 4 | default: false, 5 | }, 6 | closeIcon: { 7 | type: String, 8 | }, 9 | customClass: { 10 | type: String, 11 | default: "", 12 | }, 13 | draggable: { 14 | type: Boolean, 15 | default: false, 16 | }, 17 | showClose: { 18 | type: Boolean, 19 | default: true, 20 | }, 21 | title: { 22 | type: String, 23 | default: "", 24 | }, 25 | } as const; 26 | 27 | export const dialogContentEmits = { 28 | close: () => true, 29 | }; 30 | -------------------------------------------------------------------------------- /packages/directives/README.md: -------------------------------------------------------------------------------- 1 | # `directives` 2 | 3 | > TODO: description 4 | 5 | ## Usage 6 | 7 | ``` 8 | const directives = require('directives'); 9 | 10 | // TODO: DEMONSTRATE API 11 | ``` 12 | -------------------------------------------------------------------------------- /packages/directives/__tests__/directives.test.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const directives = require('..'); 4 | const assert = require('assert').strict; 5 | 6 | assert.strictEqual(directives(), 'Hello from directives'); 7 | console.info("directives tests passed"); 8 | -------------------------------------------------------------------------------- /packages/directives/index.ts: -------------------------------------------------------------------------------- 1 | export { default as ClickOutside } from "./click-outside"; 2 | -------------------------------------------------------------------------------- /packages/directives/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@etu-design/directives", 3 | "version": "0.0.1", 4 | "description": "> TODO: description", 5 | "author": "voilt-sourse <2503063984@qq.com>", 6 | "homepage": "", 7 | "license": "ISC" 8 | } 9 | -------------------------------------------------------------------------------- /packages/divider/README.md: -------------------------------------------------------------------------------- 1 | # `divider` 2 | 3 | > TODO: description 4 | 5 | ## Usage 6 | 7 | ``` 8 | const divider = require('divider'); 9 | 10 | // TODO: DEMONSTRATE API 11 | ``` 12 | -------------------------------------------------------------------------------- /packages/divider/__tests__/divider.test.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const divider = require('..'); 4 | const assert = require('assert').strict; 5 | 6 | assert.strictEqual(divider(), 'Hello from divider'); 7 | console.info("divider tests passed"); 8 | -------------------------------------------------------------------------------- /packages/divider/index.ts: -------------------------------------------------------------------------------- 1 | import Divider from "./src/divider.vue"; 2 | import type { App } from "vue"; 3 | 4 | Divider.install = (app: App) => { 5 | // 注册组件 6 | app.component(Divider.name, Divider); 7 | }; 8 | 9 | export default Divider; 10 | -------------------------------------------------------------------------------- /packages/divider/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "divider", 3 | "version": "0.0.1", 4 | "description": "> TODO: description", 5 | "author": "voilt-sourse <2503063984@qq.com>", 6 | "homepage": "", 7 | "license": "ISC" 8 | } 9 | -------------------------------------------------------------------------------- /packages/divider/src/divider.ts: -------------------------------------------------------------------------------- 1 | import type { ExtractPropTypes } from "vue"; 2 | import type Divider from "./divider.vue"; 3 | 4 | export const dividerProps = { 5 | direction: { 6 | type: String, 7 | values: ["horizontal", "vertical"], 8 | default: "horizontal", 9 | }, 10 | contentPosition: { 11 | type: String, 12 | values: ["center", "left", "right"], 13 | default: "center", 14 | }, 15 | borderStyle: { 16 | type: String, 17 | values: [ 18 | "solid", 19 | "dotted", 20 | "dashed", 21 | "double", 22 | "groove", 23 | "ridge", 24 | "inset", 25 | "outset", 26 | ], 27 | default: "solid", 28 | }, 29 | } as const; 30 | 31 | export type Props = ExtractPropTypes; 32 | export type DividerInstance = InstanceType; 33 | -------------------------------------------------------------------------------- /packages/divider/src/divider.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 16 | 17 | 35 | -------------------------------------------------------------------------------- /packages/drawer/__tests__/drawer.test.ts: -------------------------------------------------------------------------------- 1 | import { expect, test } from "vitest"; 2 | import Drawer from "../src/drawer.vue"; 3 | import { mount } from "@vue/test-utils"; 4 | 5 | test("switch Test", () => { 6 | console.log(Drawer); 7 | const wrapper = mount(Drawer); 8 | console.log(expect(wrapper.text())); 9 | }); 10 | -------------------------------------------------------------------------------- /packages/drawer/index.ts: -------------------------------------------------------------------------------- 1 | import Drawer from "./src/drawer.vue"; 2 | import type { App } from "vue"; 3 | 4 | Drawer.install = (app: App) => { 5 | // 注册组件 6 | app.component(Drawer.name, Drawer); 7 | }; 8 | 9 | export default Drawer; 10 | -------------------------------------------------------------------------------- /packages/drawer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "drawer", 3 | "version": "0.0.1", 4 | "description": "> TODO: description", 5 | "author": "Polaris-6625 <2281487673@qq.com>", 6 | "homepage": "", 7 | "license": "ISC", 8 | "scripts": { 9 | "test": "vitest ./__tests__/drawer.test.ts" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /packages/dropdown/index.ts: -------------------------------------------------------------------------------- 1 | import DropDown from "./src/dropdown.vue"; 2 | import DropDownItem from "./src/dropdown-item.vue"; 3 | import DropDownMenu from "./src/dropdown-menu.vue"; 4 | import type { App } from "vue"; 5 | 6 | DropDown.install = (app: App) => { 7 | // 注册组件 8 | app.component(DropDown.name, DropDown); 9 | }; 10 | DropDownItem.install = (app: App) => { 11 | // 注册组件 12 | app.component(DropDownItem.name, DropDownItem); 13 | }; 14 | DropDownMenu.install = (app: App) => { 15 | // 注册组件 16 | app.component(DropDownMenu.name, DropDownMenu); 17 | }; 18 | export default { DropDown, DropDownItem, DropDownMenu }; 19 | export * from "./src/dropdown"; 20 | -------------------------------------------------------------------------------- /packages/dropdown/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dropdown", 3 | "version": "0.0.1", 4 | "description": "> TODO: description", 5 | "author": "王帆 <9729143+wang-fan1111@user.noreply.gitee.com>", 6 | "homepage": "https://github.com/ByteCamp6/ETU-Design#readme", 7 | "license": "ISC", 8 | "directories": { 9 | "lib": "lib", 10 | "test": "__tests__" 11 | }, 12 | "files": [ 13 | "lib" 14 | ], 15 | "repository": { 16 | "type": "git", 17 | "url": "git+https://github.com/ByteCamp6/ETU-Design.git" 18 | }, 19 | "scripts": { 20 | "test": "node ./__tests__/dropdown.test.js" 21 | }, 22 | "bugs": { 23 | "url": "https://github.com/ByteCamp6/ETU-Design/issues" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /packages/dropdown/src/dropdown-item.ts: -------------------------------------------------------------------------------- 1 | import type { ExtractPropTypes } from "vue"; 2 | import type DropDownItem from "./dropdown-item.vue"; 3 | import { definePropType } from "@etu-design/utils"; 4 | export const dropdownItemProps = { 5 | command: { 6 | type: definePropType([Object, String, Number]), 7 | default: () => "", 8 | }, 9 | disabled: { 10 | type: Boolean, 11 | default: false, 12 | }, 13 | divided: { 14 | type: Boolean, 15 | default: false, 16 | }, 17 | } as const; 18 | export type dropdownItemProps = ExtractPropTypes; 19 | 20 | export type DropDownItemInstance = InstanceType; 21 | -------------------------------------------------------------------------------- /packages/dropdown/src/dropdown-menu.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | -------------------------------------------------------------------------------- /packages/dropdown/src/use-dropdown-event.ts: -------------------------------------------------------------------------------- 1 | import type { dropDownProps } from "./dropdown"; 2 | import { getCurrentInstance } from "vue"; 3 | export const useDropdownEvent = (props: dropDownProps) => { 4 | const { emit } = getCurrentInstance()!; 5 | const handleMousedown = (command: string | number | object, e: Event) => { 6 | const arg = command ? [command, e] : [{}, e]; 7 | emit("command", ...arg); 8 | }; 9 | const onButtonClick = (e: Event) => { 10 | emit("click", e); 11 | }; 12 | return { 13 | handleMousedown, 14 | onButtonClick, 15 | }; 16 | }; 17 | -------------------------------------------------------------------------------- /packages/dropdown/src/use-dropdown-item-status.ts: -------------------------------------------------------------------------------- 1 | import { ref } from "vue"; 2 | import type { dropdownItemProps } from "./dropdown-item"; 3 | // import { isNumber } from "@etu-design/utils"; 4 | 5 | export const useDropDownItemStatus = (props: dropdownItemProps) => { 6 | const isDisabled = ref(props.disabled || false); 7 | 8 | return { 9 | isDisabled, 10 | }; 11 | }; 12 | export type useDropDownItemStatus = ReturnType; 13 | -------------------------------------------------------------------------------- /packages/dropdown/src/use-dropdown-style.ts: -------------------------------------------------------------------------------- 1 | import { computed } from "vue"; 2 | import type { dropDownProps } from "./dropdown"; 3 | 4 | export const useDropDownStyle = (props: dropDownProps) => { 5 | const scrollbarMaxHeight = computed(() => { 6 | if (props.maxHeight) { 7 | if (!Number.isNaN(Number(props.maxHeight))) { 8 | const maxHeight = Number(props.maxHeight); 9 | return maxHeight; 10 | } 11 | } 12 | return undefined; 13 | }); 14 | const canclePadding = props.canclePadding; 15 | const placeMent = props.placement; 16 | const judgeTriggerHover = { 17 | hover: true, 18 | click: false, 19 | }; 20 | const isTriggerHover = judgeTriggerHover[props.trigger]; 21 | const isUseArrowDown = props.arrowDown; 22 | return { 23 | isUseArrowDown, 24 | canclePadding, 25 | scrollbarMaxHeight, 26 | placeMent, 27 | isTriggerHover, 28 | }; 29 | }; 30 | -------------------------------------------------------------------------------- /packages/empty/README.md: -------------------------------------------------------------------------------- 1 | # `empty` 2 | 3 | > TODO: description 4 | 5 | ## Usage 6 | 7 | ``` 8 | const empty = require('empty'); 9 | 10 | // TODO: DEMONSTRATE API 11 | ``` 12 | -------------------------------------------------------------------------------- /packages/empty/__tests__/empty.test.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ByteCamp6/ETU-Design/1f36b195f3fc04f7d3c86bffe0ba809072d72f4c/packages/empty/__tests__/empty.test.ts -------------------------------------------------------------------------------- /packages/empty/index.ts: -------------------------------------------------------------------------------- 1 | import Empty from "./src/empty.vue"; 2 | import type { App } from "vue"; 3 | 4 | Empty.install = (app: App) => { 5 | // 注册组件 6 | app.component(Empty.name, Empty); 7 | }; 8 | 9 | export default Empty; 10 | -------------------------------------------------------------------------------- /packages/empty/src/empty.ts: -------------------------------------------------------------------------------- 1 | import type { ExtractPropTypes } from "vue"; 2 | 3 | export const emptyProps = { 4 | description: { 5 | type: String, 6 | default: "No Data", 7 | }, 8 | image: { 9 | type: String, 10 | }, 11 | imageSize: Number, 12 | }; 13 | 14 | export type EmptyProps = ExtractPropTypes; 15 | -------------------------------------------------------------------------------- /packages/form/README.md: -------------------------------------------------------------------------------- 1 | # `form` 2 | 3 | > TODO: description 4 | 5 | ## Usage 6 | 7 | ``` 8 | const form = require('form'); 9 | 10 | // TODO: DEMONSTRATE API 11 | ``` 12 | -------------------------------------------------------------------------------- /packages/form/__tests__/form.test.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const form = require('..'); 4 | const assert = require('assert').strict; 5 | 6 | assert.strictEqual(form(), 'Hello from form'); 7 | console.info("form tests passed"); 8 | -------------------------------------------------------------------------------- /packages/form/index.ts: -------------------------------------------------------------------------------- 1 | import Form from "./src/form.vue"; 2 | import FormItem from "./src/form-item.vue"; 3 | import type { App } from "vue"; 4 | 5 | Form.install = (app: App) => { 6 | // 注册组件 7 | app.component(Form.name, Form); 8 | }; 9 | FormItem.install = (app: App) => { 10 | app.component(FormItem.name, FormItem); 11 | }; 12 | 13 | export { Form, FormItem }; 14 | -------------------------------------------------------------------------------- /packages/form/src/form.ts: -------------------------------------------------------------------------------- 1 | import type { ExtractPropTypes, InjectionKey } from "vue"; 2 | import type { FormItemContext } from "./form-item"; 3 | 4 | export const formProps = { 5 | model: { 6 | type: Object, 7 | default: () => ({}), 8 | }, 9 | rules: { 10 | type: Object, 11 | default: () => ({}), 12 | }, 13 | showMessage: { 14 | type: Boolean, 15 | default: true, 16 | }, 17 | } as const; 18 | 19 | export type FormProps = ExtractPropTypes; 20 | 21 | export interface FormContext extends FormProps { 22 | addField: (field: FormItemContext) => void; 23 | } 24 | // export const FormContextKey: InjectionKey = Symbol(); 25 | -------------------------------------------------------------------------------- /packages/hooks/README.md: -------------------------------------------------------------------------------- 1 | # `ETU-Design` 2 | 3 | > TODO: description 4 | 5 | ## Usage 6 | 7 | ``` 8 | const etuDesign = require('ETU-Design'); 9 | 10 | // TODO: DEMONSTRATE API 11 | ``` 12 | -------------------------------------------------------------------------------- /packages/hooks/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./use-namespace"; 2 | export * from "./use-common-props"; 3 | export * from "./use-timout"; 4 | export * from "./use-vmodel"; 5 | export * from "./use-resize-observe"; 6 | export * from "./use-z-index"; 7 | export * from "./use-same-target"; 8 | export * from "./use-lockscreen"; 9 | export * from "./use-draggable"; 10 | export * from "./use-cursor"; 11 | -------------------------------------------------------------------------------- /packages/hooks/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@etu-design/hooks", 3 | "version": "0.0.1", 4 | "description": "Voile composables", 5 | "main": "index.ts", 6 | "module": "index.ts", 7 | "unpkg": "index.js", 8 | "jsdelivr": "index.js", 9 | "types": "index.d.ts", 10 | "peerDependencies": { 11 | "vue": "^3.2.0" 12 | }, 13 | "author": "volit", 14 | "license": "MIT", 15 | "dependencies": { 16 | "@etu-design/directives": "^0.0.1", 17 | "@etu-design/theme-chalk": "^0.0.1", 18 | "animate.css": "^4.1.1", 19 | "hooks": "^0.3.2", 20 | "theme-chalk": "^1.0.0-dev.9", 21 | "utils": "^0.3.1", 22 | "vite": "^4.0.4", 23 | "vue-router": "^4.1.6" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /packages/hooks/use-common-props/index.ts: -------------------------------------------------------------------------------- 1 | import { useProp } from "../use-prop"; 2 | import { computed, unref } from "vue"; 3 | import type { Ref } from "vue"; 4 | 5 | type MaybeRef = T | Ref; 6 | 7 | /** 8 | * @description useDisabled是一个hooks，通过判断其prop是否有disabled属性，以及其fallback是否为假得出组件是否被禁用 9 | * @param fallback 一个可能为Ref/Computed或者原始值的值 10 | */ 11 | export const useDisabled = (fallback?: MaybeRef) => { 12 | const disabled = useProp("disabled"); 13 | // unref()如果参数是一个 ref 则返回它的 value，否则返回参数本身 14 | return computed(() => disabled.value || unref(fallback) || false); 15 | }; 16 | -------------------------------------------------------------------------------- /packages/hooks/use-prop/index.ts: -------------------------------------------------------------------------------- 1 | import { computed, getCurrentInstance } from "vue"; 2 | import type { ComputedRef } from "vue"; 3 | 4 | export const useProp = (name: string): ComputedRef => { 5 | const vm = getCurrentInstance()!; 6 | return computed(() => (vm.proxy?.$props as any)[name] ?? undefined); 7 | }; 8 | -------------------------------------------------------------------------------- /packages/hooks/use-vmodel/index.ts: -------------------------------------------------------------------------------- 1 | import { ref, watch, getCurrentInstance } from "vue"; 2 | import type { UnwrapRef } from "vue"; 3 | 4 | type Emit = (event: string, ...args: any[]) => void; 5 | 6 | export function useVmodel

( 7 | props: P, 8 | key?: K, 9 | emit?: Emit, 10 | ) { 11 | const vm = getCurrentInstance(); 12 | const _emit = emit || vm?.emit; 13 | if (!key) { 14 | key = "modelValue" as K; 15 | } 16 | const event = `update:${key!.toString()}`; 17 | const proxy = ref(props[key]); 18 | watch( 19 | () => props[key!], 20 | (v) => (proxy.value = v as UnwrapRef), 21 | ); 22 | watch( 23 | () => proxy.value, 24 | (v) => { 25 | if (v !== props[key!]) { 26 | _emit!(event, v); 27 | } 28 | }, 29 | ); 30 | return proxy; 31 | } 32 | -------------------------------------------------------------------------------- /packages/hooks/use-z-index/index.ts: -------------------------------------------------------------------------------- 1 | import { computed, ref } from "vue"; 2 | 3 | const zIndex = ref(0); 4 | 5 | export const useZIndex = () => { 6 | const initialZIndex = 2000; 7 | const currentZIndex = computed(() => initialZIndex + zIndex.value); 8 | 9 | const nextZIndex = () => { 10 | zIndex.value++; 11 | return currentZIndex.value; 12 | }; 13 | 14 | return { 15 | currentZIndex, 16 | nextZIndex, 17 | }; 18 | }; 19 | -------------------------------------------------------------------------------- /packages/icon/__tests__/icon.test.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const icon = require(".."); 4 | const assert = require("assert").strict; 5 | 6 | assert.strictEqual(icon(), "Hello from icon"); 7 | console.info("icon tests passed"); 8 | -------------------------------------------------------------------------------- /packages/icon/index.ts: -------------------------------------------------------------------------------- 1 | import Icon from "./src/icon.vue"; 2 | import type { App } from "vue"; 3 | 4 | Icon.install = (app: App) => { 5 | // 注册组件 6 | app.component(Icon.name, Icon); 7 | }; 8 | 9 | export default Icon; 10 | -------------------------------------------------------------------------------- /packages/icon/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@etu-design/icon", 3 | "version": "0.0.1", 4 | "dependencies": { 5 | "@etu-design/directives": "^0.0.1", 6 | "animate.css": "^4.1.1" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /packages/icon/src/icon.ts: -------------------------------------------------------------------------------- 1 | import type { ExtractPropTypes } from "vue"; 2 | 3 | export const iconProps = { 4 | name: { 5 | type: String, 6 | default: "", 7 | }, 8 | } as const; 9 | 10 | export type IconProps = ExtractPropTypes; 11 | -------------------------------------------------------------------------------- /packages/icon/src/icon.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 35 | -------------------------------------------------------------------------------- /packages/input-number/README.md: -------------------------------------------------------------------------------- 1 | # `input-number` 2 | 3 | > TODO: description 4 | 5 | ## Usage 6 | 7 | ``` 8 | const inputNumber = require('input-number'); 9 | 10 | // TODO: DEMONSTRATE API 11 | ``` 12 | -------------------------------------------------------------------------------- /packages/input-number/__tests__/input-number.test.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const inputNumber = require('..'); 4 | const assert = require('assert').strict; 5 | 6 | assert.strictEqual(inputNumber(), 'Hello from inputNumber'); 7 | console.info("inputNumber tests passed"); 8 | -------------------------------------------------------------------------------- /packages/input-number/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "input-number", 3 | "version": "0.0.1", 4 | "description": "> TODO: description", 5 | "author": "王帆 <9729143+wang-fan1111@user.noreply.gitee.com>", 6 | "homepage": "https://github.com/ByteCamp6/ETU-Design#readme", 7 | "license": "ISC", 8 | "main": "lib/input-number.js", 9 | "directories": { 10 | "lib": "lib", 11 | "test": "__tests__" 12 | }, 13 | "files": [ 14 | "lib" 15 | ], 16 | "publishConfig": { 17 | "registry": "https://registry.npm.taobao.org/" 18 | }, 19 | "repository": { 20 | "type": "git", 21 | "url": "git+https://github.com/ByteCamp6/ETU-Design.git" 22 | }, 23 | "scripts": { 24 | "test": "node ./__tests__/input-number.test.js" 25 | }, 26 | "bugs": { 27 | "url": "https://github.com/ByteCamp6/ETU-Design/issues" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /packages/input-number/src/input-number.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /packages/input-number/src/inputer-number.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ByteCamp6/ETU-Design/1f36b195f3fc04f7d3c86bffe0ba809072d72f4c/packages/input-number/src/inputer-number.ts -------------------------------------------------------------------------------- /packages/input/README.md: -------------------------------------------------------------------------------- 1 | # `input` 2 | 3 | > TODO: description 4 | 5 | ## Usage 6 | 7 | ``` 8 | const input = require('input'); 9 | 10 | // TODO: DEMONSTRATE API 11 | ``` 12 | -------------------------------------------------------------------------------- /packages/input/__tests__/input.test.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const input = require('..'); 4 | const assert = require('assert').strict; 5 | 6 | assert.strictEqual(input(), 'Hello from input'); 7 | console.info("input tests passed"); 8 | -------------------------------------------------------------------------------- /packages/input/index.ts: -------------------------------------------------------------------------------- 1 | import Input from "./src/input.vue"; 2 | import type { App } from "vue"; 3 | 4 | Input.install = (app: App) => { 5 | // 注册组件 6 | app.component(Input.name, Input); 7 | }; 8 | // console.log(Input); 9 | 10 | export default Input; 11 | -------------------------------------------------------------------------------- /packages/input/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@etu-design/input", 3 | "version": "0.0.1", 4 | "description": "> TODO: description", 5 | "author": "jiaze <1244153559@qq.com>", 6 | "homepage": "https://github.com/ByteCamp6/ETU-Design#readme", 7 | "license": "ISC" 8 | } 9 | -------------------------------------------------------------------------------- /packages/input/src/composables/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./use-input"; 2 | -------------------------------------------------------------------------------- /packages/input/src/composables/use-input-icon.ts: -------------------------------------------------------------------------------- 1 | import { computed, ref } from "vue"; 2 | import type { InputProps } from "../input"; 3 | import type { Ref } from "vue"; 4 | 5 | export const useInputIcon = ( 6 | props: InputProps, 7 | passwordVisible: Ref, 8 | ) => { 9 | // 密码是否可见 10 | const eyeIcon = computed(() => { 11 | return passwordVisible.value ? "browse" : "hide"; 12 | }); 13 | 14 | //带Icon输入框 15 | const isShowSuffixIcon = computed(() => { 16 | return props.suffixIcon && !props.clearable && !props.showPassword; 17 | }); 18 | const isShowPrefixIcon = computed(() => { 19 | return props.prefixIcon; 20 | }); 21 | 22 | return { 23 | eyeIcon, 24 | isShowPrefixIcon, 25 | isShowSuffixIcon, 26 | }; 27 | }; 28 | -------------------------------------------------------------------------------- /packages/link/__tests__/link.test.js: -------------------------------------------------------------------------------- 1 | // 'use strict'; 2 | 3 | // const link = require('..'); 4 | // const assert = require('assert').strict; 5 | 6 | // assert.strictEqual(link(), 'Hello from link'); 7 | // console.info("link tests passed"); 8 | -------------------------------------------------------------------------------- /packages/link/index.ts: -------------------------------------------------------------------------------- 1 | import Link from "./src/link.vue"; 2 | export * from "./src/link"; 3 | import type { App } from "vue"; 4 | 5 | Link.install = (app: App) => { 6 | // 注册组件 7 | app.component(Link.name, Link); 8 | }; 9 | 10 | export default Link; 11 | -------------------------------------------------------------------------------- /packages/menu-group-item/index.ts: -------------------------------------------------------------------------------- 1 | import menuItem from "./src/menuGroupItem.vue"; 2 | import type { App } from "vue"; 3 | 4 | menuItem.install = (app: App) => { 5 | // 注册组件 6 | app.component(menuItem.name, menuItem); 7 | }; 8 | 9 | export default menuItem; 10 | -------------------------------------------------------------------------------- /packages/menu-group/index.ts: -------------------------------------------------------------------------------- 1 | import menuGroup from "./src/menuGroup.vue"; 2 | import type { App } from "vue"; 3 | 4 | menuGroup.install = (app: App) => { 5 | // 注册组件 6 | app.component(menuGroup.name, menuGroup); 7 | }; 8 | 9 | export default menuGroup; 10 | -------------------------------------------------------------------------------- /packages/message/README.md: -------------------------------------------------------------------------------- 1 | # `message` 2 | 3 | > TODO: description 4 | 5 | ## Usage 6 | 7 | ``` 8 | const message = require('message'); 9 | 10 | // TODO: DEMONSTRATE API 11 | ``` 12 | -------------------------------------------------------------------------------- /packages/message/__tests__/message.test.ts: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const message = require('..'); 4 | const assert = require('assert').strict; 5 | 6 | assert.strictEqual(message(), 'Hello from message'); 7 | console.info("message tests passed"); 8 | -------------------------------------------------------------------------------- /packages/message/index.ts: -------------------------------------------------------------------------------- 1 | import Message from "./src/method"; 2 | import { withInstallFunction } from "@etu-design/utils"; 3 | 4 | export const EtuMessage = withInstallFunction(Message, "$message"); 5 | 6 | export * from "./src/message"; 7 | export default EtuMessage; 8 | -------------------------------------------------------------------------------- /packages/message/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@etu-design/message", 3 | "version": "0.0.1", 4 | "main": "index.ts", 5 | "module": "index.ts", 6 | "dependencies": { 7 | "@etu-design/directives": "^0.0.1" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/message/src/composables/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./use-message"; 2 | export * from "./use-message-offset"; 3 | export * from "./use-message-event"; 4 | export * from "./use-message-icon"; 5 | -------------------------------------------------------------------------------- /packages/message/src/composables/use-message-icon.ts: -------------------------------------------------------------------------------- 1 | import type { MessageProps } from "../message"; 2 | import { computed } from "vue"; 3 | 4 | /** 5 | * @description 对于不同的type，需要使用不同的图标，如果用户手动传了图标，以用户为准 6 | */ 7 | export const useMessageIcon = (props: MessageProps) => { 8 | const TypeComponentsMap = { 9 | success: "success-filling", 10 | warning: "warning-filling", 11 | error: "delete-filling", 12 | info: "prompt-filling", 13 | }; 14 | const type = props.type as keyof typeof TypeComponentsMap; 15 | const iconComponent = computed( 16 | () => props.icon || TypeComponentsMap[type] || "", 17 | ); 18 | 19 | return { 20 | iconComponent, 21 | }; 22 | }; 23 | -------------------------------------------------------------------------------- /packages/message/src/composables/use-message.ts: -------------------------------------------------------------------------------- 1 | import type { MessageProps } from "../message"; 2 | import { useMessageIcon } from "./use-message-icon"; 3 | import { useMessageEvent } from "./use-message-event"; 4 | import { useMessageOffset } from "./use-message-offset"; 5 | 6 | export const useMessage = (props: MessageProps) => { 7 | const { bottom, customStyle, messageRef } = useMessageOffset(props); 8 | const { startTimer, clearTimer, keydown, visible, close } = 9 | useMessageEvent(props); 10 | const { iconComponent } = useMessageIcon(props); 11 | return { 12 | messageRef, 13 | bottom, 14 | customStyle, 15 | visible, 16 | startTimer, 17 | clearTimer, 18 | close, 19 | iconComponent, 20 | }; 21 | }; 22 | -------------------------------------------------------------------------------- /packages/overlay/README.md: -------------------------------------------------------------------------------- 1 | # `overlay` 2 | 3 | > TODO: description 4 | 5 | ## Usage 6 | 7 | ``` 8 | const overlay = require('overlay'); 9 | 10 | // TODO: DEMONSTRATE API 11 | ``` 12 | -------------------------------------------------------------------------------- /packages/overlay/__tests__/overlay.test.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ByteCamp6/ETU-Design/1f36b195f3fc04f7d3c86bffe0ba809072d72f4c/packages/overlay/__tests__/overlay.test.ts -------------------------------------------------------------------------------- /packages/overlay/index.ts: -------------------------------------------------------------------------------- 1 | import Overlay from "./src/overlay.vue"; 2 | import type { App } from "vue"; 3 | 4 | Overlay.install = (app: App) => { 5 | // 注册组件 6 | app.component(Overlay.name, Overlay); 7 | }; 8 | 9 | export default Overlay; 10 | -------------------------------------------------------------------------------- /packages/overlay/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@etu-design/overlay", 3 | "version": "0.0.1", 4 | "description": "> TODO: description", 5 | "author": "1379255913 <1379255913@qq.com>", 6 | "homepage": "https://github.com/ByteCamp6/ETU-Design#readme", 7 | "license": "ISC" 8 | } 9 | -------------------------------------------------------------------------------- /packages/overlay/src/overlay.ts: -------------------------------------------------------------------------------- 1 | import type { ExtractPropTypes } from "vue"; 2 | 3 | export const overlayProps = { 4 | modelValue: { 5 | type: Boolean, 6 | default: false, 7 | }, 8 | maskEvent: { 9 | type: Boolean, 10 | default: false, 11 | }, 12 | zIndex: { 13 | type: Number, 14 | }, 15 | } as const; 16 | 17 | export type OverlayProps = ExtractPropTypes; 18 | 19 | export const overlayEmits = { 20 | click: (evt: MouseEvent) => evt instanceof MouseEvent, 21 | }; 22 | export type OverlayEmits = typeof overlayEmits; 23 | -------------------------------------------------------------------------------- /packages/pagination/README.md: -------------------------------------------------------------------------------- 1 | # `pagination` 2 | 3 | > TODO: description 4 | 5 | ## Usage 6 | 7 | ``` 8 | const pagination = require('pagination'); 9 | 10 | // TODO: DEMONSTRATE API 11 | ``` 12 | -------------------------------------------------------------------------------- /packages/pagination/__tests__/pagination.test.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ByteCamp6/ETU-Design/1f36b195f3fc04f7d3c86bffe0ba809072d72f4c/packages/pagination/__tests__/pagination.test.ts -------------------------------------------------------------------------------- /packages/pagination/index.ts: -------------------------------------------------------------------------------- 1 | import Pagination from "./src/pagination"; 2 | import type { App } from "vue"; 3 | 4 | Pagination.install = (app: App) => { 5 | // 注册组件 6 | app.component(Pagination.name, Pagination); 7 | }; 8 | 9 | export default Pagination; 10 | -------------------------------------------------------------------------------- /packages/pagination/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@etu-design/pagination", 3 | "version": "0.0.1", 4 | "description": "> TODO: description", 5 | "author": "1379255913 <1379255913@qq.com>", 6 | "homepage": "https://github.com/ByteCamp6/ETU-Design#readme", 7 | "license": "ISC" 8 | } 9 | -------------------------------------------------------------------------------- /packages/pagination/src/components/jumper.ts: -------------------------------------------------------------------------------- 1 | import type Jumper from "./jumper.vue"; 2 | 3 | export type PaginationJumperInstance = InstanceType; 4 | -------------------------------------------------------------------------------- /packages/pagination/src/components/next.ts: -------------------------------------------------------------------------------- 1 | import type { ExtractPropTypes } from "vue"; 2 | import type Next from "./next.vue"; 3 | 4 | export const paginationNextProps = { 5 | disabled: Boolean, 6 | currentPage: { 7 | type: Number, 8 | default: 1, 9 | }, 10 | pageCount: { 11 | type: Number, 12 | default: 50, 13 | }, 14 | nextText: { 15 | type: String, 16 | }, 17 | } as const; 18 | 19 | export const paginationNextEmits = { 20 | click: (evt: MouseEvent) => evt instanceof MouseEvent, 21 | }; 22 | 23 | export type PaginationNextProps = ExtractPropTypes; 24 | 25 | export type NextInstance = InstanceType; 26 | -------------------------------------------------------------------------------- /packages/pagination/src/components/next.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 29 | -------------------------------------------------------------------------------- /packages/pagination/src/components/pager.ts: -------------------------------------------------------------------------------- 1 | import type { ExtractPropTypes } from "vue"; 2 | import type Pager from "./pager.vue"; 3 | 4 | export const paginationPagerProps = { 5 | currentPage: { 6 | type: Number, 7 | default: 1, 8 | }, 9 | pageCount: { 10 | type: Number, 11 | required: true, 12 | }, 13 | pagerCount: { 14 | type: Number, 15 | default: 7, 16 | }, 17 | disabled: Boolean, 18 | } as const; 19 | 20 | export type PaginationPagerProps = ExtractPropTypes< 21 | typeof paginationPagerProps 22 | >; 23 | 24 | export type PagerInstance = InstanceType; 25 | -------------------------------------------------------------------------------- /packages/pagination/src/components/prev.ts: -------------------------------------------------------------------------------- 1 | import type { ExtractPropTypes } from "vue"; 2 | import type Prev from "./prev.vue"; 3 | 4 | export const paginationPrevProps = { 5 | disabled: Boolean, 6 | currentPage: { 7 | type: Number, 8 | default: 1, 9 | }, 10 | prevText: { 11 | type: String, 12 | }, 13 | } as const; 14 | 15 | export const paginationPrevEmits = { 16 | click: (evt: MouseEvent) => evt instanceof MouseEvent, 17 | }; 18 | 19 | export type PaginationPrevProps = ExtractPropTypes; 20 | 21 | export type PrevInstance = InstanceType; 22 | -------------------------------------------------------------------------------- /packages/pagination/src/components/prev.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 25 | -------------------------------------------------------------------------------- /packages/pagination/src/components/sizes.ts: -------------------------------------------------------------------------------- 1 | import type { ExtractPropTypes } from "vue"; 2 | import type Sizes from "./sizes.vue"; 3 | import { definePropType } from "@etu-design/utils"; 4 | 5 | export const paginationSizesProps = { 6 | pageSize: { 7 | type: Number, 8 | required: true, 9 | }, 10 | pageSizes: { 11 | type: definePropType(Array), 12 | default: () => [10, 20, 30, 40, 50, 100], 13 | }, 14 | popperClass: { 15 | type: String, 16 | }, 17 | disabled: Boolean, 18 | } as const; 19 | 20 | export type PaginationSizesProps = ExtractPropTypes< 21 | typeof paginationSizesProps 22 | >; 23 | 24 | export type SizesInstance = InstanceType; 25 | -------------------------------------------------------------------------------- /packages/pagination/src/components/total.ts: -------------------------------------------------------------------------------- 1 | import type Total from "./total.vue"; 2 | import type { ExtractPropTypes } from "vue"; 3 | 4 | export const paginationTotalProps = { 5 | total: { 6 | type: Number, 7 | default: 1000, 8 | }, 9 | } as const; 10 | 11 | export type PaginationTotalProps = ExtractPropTypes< 12 | typeof paginationTotalProps 13 | >; 14 | 15 | export type TotalInstance = InstanceType; 16 | -------------------------------------------------------------------------------- /packages/pagination/src/components/total.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | -------------------------------------------------------------------------------- /packages/pagination/src/use-pagination.ts: -------------------------------------------------------------------------------- 1 | import { PaginationKey } from "@etu-design/tokens"; 2 | import { inject } from "vue"; 3 | 4 | export const usePagination = () => inject(PaginationKey, {}); 5 | -------------------------------------------------------------------------------- /packages/popper/README.md: -------------------------------------------------------------------------------- 1 | # `popper` 2 | 3 | > TODO: description 4 | 5 | ## Usage 6 | 7 | ``` 8 | const popper = require('popper'); 9 | 10 | // TODO: DEMONSTRATE API 11 | ``` 12 | -------------------------------------------------------------------------------- /packages/popper/__tests__/popper.test.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ByteCamp6/ETU-Design/1f36b195f3fc04f7d3c86bffe0ba809072d72f4c/packages/popper/__tests__/popper.test.ts -------------------------------------------------------------------------------- /packages/popper/index.ts: -------------------------------------------------------------------------------- 1 | import Popper from "./src/popper.vue"; 2 | import type { App } from "vue"; 3 | export type { PopperExpose, PopperProps } from "./src/popper"; 4 | 5 | Popper.install = (app: App) => { 6 | // 注册组件 7 | app.component(Popper.name, Popper); 8 | }; 9 | 10 | export default Popper; 11 | -------------------------------------------------------------------------------- /packages/popper/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@etu-design/popper", 3 | "version": "0.0.1", 4 | "description": "> TODO: description", 5 | "author": "1379255913 <1379255913@qq.com>", 6 | "homepage": "https://github.com/ByteCamp6/ETU-Design#readme", 7 | "license": "ISC" 8 | } 9 | -------------------------------------------------------------------------------- /packages/popper/src/arrow.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | -------------------------------------------------------------------------------- /packages/popper/src/composables/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./useClickAway"; 2 | export * from "./useContent"; 3 | export * from "./useEventListener"; 4 | export * from "./usePopper"; 5 | export * from "./useTimeEvent"; 6 | -------------------------------------------------------------------------------- /packages/popper/src/composables/typing.ts: -------------------------------------------------------------------------------- 1 | import type { Ref } from "vue"; 2 | 3 | export type MaybeRef = Ref | T; 4 | export type MaybeUndefinedRef = Ref; 5 | -------------------------------------------------------------------------------- /packages/popper/src/composables/useClickAway.ts: -------------------------------------------------------------------------------- 1 | import { unref } from "vue"; 2 | import { useEventListener } from "./useEventListener"; 3 | import type { MaybeRef } from "./typing"; 4 | 5 | export function useClickAway( 6 | target: MaybeRef, 7 | handler: (...args) => any, 8 | ) { 9 | const event = "pointerdown"; 10 | 11 | if (typeof window === "undefined" || !window) { 12 | return; 13 | } 14 | 15 | const listener = (event: Event) => { 16 | const el = unref(target); 17 | if (!el) { 18 | return; 19 | } 20 | 21 | if (el === event.target || event.composedPath().includes(el)) { 22 | return; 23 | } 24 | 25 | handler(event); 26 | }; 27 | 28 | return useEventListener(window, event, listener); 29 | } 30 | -------------------------------------------------------------------------------- /packages/popper/src/composables/useEventListener.ts: -------------------------------------------------------------------------------- 1 | import { isRef, watch, unref, onMounted, onBeforeUnmount } from "vue"; 2 | import type { MaybeRef } from "./typing"; 3 | 4 | export function useEventListener( 5 | target: MaybeRef, 6 | event: string, 7 | handler: (...args) => any, 8 | ) { 9 | if (isRef(target)) { 10 | watch(target, (value, oldValue) => { 11 | oldValue?.removeEventListener(event, handler); 12 | value?.addEventListener(event, handler); 13 | }); 14 | } else { 15 | onMounted(() => { 16 | target.addEventListener(event, handler); 17 | }); 18 | } 19 | 20 | onBeforeUnmount(() => { 21 | unref(target)?.removeEventListener(event, handler); 22 | }); 23 | } 24 | -------------------------------------------------------------------------------- /packages/progress/README.md: -------------------------------------------------------------------------------- 1 | # `progress` 2 | 3 | > TODO: description 4 | 5 | ## Usage 6 | 7 | ``` 8 | const progress = require('progress'); 9 | 10 | // TODO: DEMONSTRATE API 11 | ``` 12 | -------------------------------------------------------------------------------- /packages/progress/__tests__/progress.test.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const progress = require('..'); 4 | const assert = require('assert').strict; 5 | 6 | assert.strictEqual(progress(), 'Hello from progress'); 7 | console.info("progress tests passed"); 8 | -------------------------------------------------------------------------------- /packages/progress/index.ts: -------------------------------------------------------------------------------- 1 | import Progress from "./src/progress.vue"; 2 | 3 | import type { App } from "vue"; 4 | 5 | Progress.install = (app: App) => { 6 | // 注册组件 7 | app.component(Progress.name, Progress); 8 | }; 9 | 10 | export default Progress; 11 | 12 | export * from "./src/progress"; 13 | -------------------------------------------------------------------------------- /packages/progress/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@etu-design/progress", 3 | "version": "0.0.1", 4 | "description": "> TODO: description", 5 | "author": "voilt-sourse <2503063984@qq.com>", 6 | "homepage": "", 7 | "license": "ISC" 8 | } 9 | -------------------------------------------------------------------------------- /packages/radio/README.md: -------------------------------------------------------------------------------- 1 | # `radio` 2 | 3 | > TODO: description 4 | 5 | ## Usage 6 | 7 | ``` 8 | const radio = require('radio'); 9 | 10 | // TODO: DEMONSTRATE API 11 | ``` 12 | -------------------------------------------------------------------------------- /packages/radio/index.ts: -------------------------------------------------------------------------------- 1 | import Radio from "./src/radio.vue"; 2 | import RadioGroup from "./src/radio-group.vue"; 3 | import type { App } from "vue"; 4 | 5 | Radio.install = (app: App) => { 6 | // 注册组件 7 | app.component(Radio.name, Radio); 8 | }; 9 | 10 | RadioGroup.install = (app: App) => { 11 | // 注册组件 12 | app.component(RadioGroup.name, RadioGroup); 13 | }; 14 | 15 | export default { Radio, RadioGroup }; 16 | -------------------------------------------------------------------------------- /packages/radio/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@etu-design/radio", 3 | "version": "0.0.0", 4 | "description": "> TODO: description", 5 | "author": "1379255913 <1379255913@qq.com>", 6 | "homepage": "https://github.com/ByteCamp6/ETU-Design#readme", 7 | "license": "ISC" 8 | } 9 | -------------------------------------------------------------------------------- /packages/radio/src/radio-group.ts: -------------------------------------------------------------------------------- 1 | import { radioEmits } from "./radio"; 2 | import type { ExtractPropTypes } from "vue"; 3 | 4 | export const radioGroupProps = { 5 | /** 6 | * @description 单选框的大小 7 | */ 8 | size: { 9 | type: String, 10 | values: ["large", "default", "small"], 11 | default: "default", 12 | }, 13 | /** 14 | * @description 单选框是否被禁用 15 | */ 16 | disabled: Boolean, 17 | /** 18 | * @description 绑定的值 19 | */ 20 | modelValue: { 21 | type: [String, Number, Boolean], 22 | default: "", 23 | }, 24 | } as const; 25 | export type RadioGroupProps = ExtractPropTypes; 26 | 27 | export const radioGroupEmits = radioEmits; 28 | export type RadioGroupEmits = typeof radioGroupEmits; 29 | -------------------------------------------------------------------------------- /packages/radio/src/radio-group.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 30 | -------------------------------------------------------------------------------- /packages/row/README.md: -------------------------------------------------------------------------------- 1 | # `row` 2 | 3 | > TODO: description 4 | 5 | ## Usage 6 | 7 | ``` 8 | const row = require('row'); 9 | 10 | // TODO: DEMONSTRATE API 11 | ``` 12 | -------------------------------------------------------------------------------- /packages/row/__tests__/row.test.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const row = require('..'); 4 | const assert = require('assert').strict; 5 | 6 | assert.strictEqual(row(), 'Hello from row'); 7 | console.info("row tests passed"); 8 | -------------------------------------------------------------------------------- /packages/row/index.ts: -------------------------------------------------------------------------------- 1 | import Row from "./src/row.vue"; 2 | import type { App } from "vue"; 3 | 4 | Row.install = (app: App) => { 5 | // 注册组件 6 | app.component(Row.name, Row); 7 | }; 8 | 9 | export default Row; 10 | -------------------------------------------------------------------------------- /packages/row/src/row.ts: -------------------------------------------------------------------------------- 1 | import type { ExtractPropTypes } from "vue"; 2 | 3 | export const rowProps = { 4 | tag: { 5 | type: String, 6 | default: "div", 7 | }, 8 | gutter: { 9 | type: Number, 10 | default: 0, 11 | }, // 分栏间隔 12 | type: { 13 | type: String, 14 | default: "", 15 | }, // 布局方式 16 | justify: { 17 | type: String, 18 | default: "center", 19 | validator: function (value) { 20 | return ( 21 | ["start", "end", "center", "space-around", "space-between"].indexOf( 22 | value, 23 | ) !== -1 24 | ); 25 | }, 26 | }, // flex下的水平排列方式 27 | align: { 28 | type: String, 29 | default: "middle", 30 | validator: function (value) { 31 | return ["top", "middle", "bottom"].indexOf(value) !== -1; 32 | }, 33 | }, 34 | } as const; 35 | 36 | export type RowProps = ExtractPropTypes; 37 | -------------------------------------------------------------------------------- /packages/scrollbar/README.md: -------------------------------------------------------------------------------- 1 | # `scrollbar` 2 | 3 | > TODO: description 4 | 5 | ## Usage 6 | 7 | ``` 8 | const scrollbar = require('scrollbar'); 9 | 10 | // TODO: DEMONSTRATE API 11 | ``` 12 | -------------------------------------------------------------------------------- /packages/scrollbar/__tests__/scrollbar.test.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const scrollbar = require('..'); 4 | const assert = require('assert').strict; 5 | 6 | assert.strictEqual(scrollbar(), 'Hello from scrollbar'); 7 | console.info("scrollbar tests passed"); 8 | -------------------------------------------------------------------------------- /packages/scrollbar/index.ts: -------------------------------------------------------------------------------- 1 | import Scrollbar from "./src/scrollbar.vue"; 2 | import type { App } from "vue"; 3 | 4 | Scrollbar.install = (app: App) => { 5 | app.component(Scrollbar.name, Scrollbar); 6 | }; 7 | 8 | export default { Scrollbar }; 9 | export * from "./src/scrollbar"; 10 | -------------------------------------------------------------------------------- /packages/scrollbar/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@etu-design/scrollbar", 3 | "version": "0.0.1", 4 | "description": "", 5 | "author": "voilt-sourse <2503063984@qq.com>", 6 | "homepage": "", 7 | "license": "ISC" 8 | } 9 | -------------------------------------------------------------------------------- /packages/scrollbar/src/bar.ts: -------------------------------------------------------------------------------- 1 | import type { ExtractPropTypes } from "vue"; 2 | 3 | export const barProps = { 4 | always: { 5 | type: Boolean, 6 | default: true, 7 | }, 8 | width: String, 9 | height: String, 10 | ratioX: { 11 | type: Number, 12 | default: 1, 13 | }, 14 | ratioY: { 15 | type: Number, 16 | default: 1, 17 | }, 18 | }; 19 | 20 | export type BarProps = ExtractPropTypes; 21 | -------------------------------------------------------------------------------- /packages/scrollbar/src/scrollbar.ts: -------------------------------------------------------------------------------- 1 | import type { ExtractPropTypes } from "vue"; 2 | import { isNumber, isString } from "@etu-design/utils"; 3 | 4 | export const scrollbarProps = { 5 | height: { 6 | type: [Number, String], 7 | validator: (val: number | string): boolean => 8 | isNumber(val) || isString(val), 9 | }, 10 | maxHeight: { 11 | type: [Number, String], 12 | validator: (val: number | string): boolean => 13 | isNumber(val) || isString(val), 14 | }, 15 | minSize: { 16 | type: Number, 17 | default: 20, 18 | }, 19 | native: { 20 | type: Boolean, 21 | default: true, 22 | }, 23 | always: { 24 | type: Boolean, 25 | default: true, 26 | }, 27 | }; 28 | 29 | export const scrollbarEmits = { 30 | scroll: ({ 31 | scrollTop, 32 | scrollLeft, 33 | }: { 34 | scrollTop: number; 35 | scrollLeft: number; 36 | }) => [scrollTop, scrollLeft].every(isNumber), 37 | }; 38 | 39 | export type Props = ExtractPropTypes; 40 | -------------------------------------------------------------------------------- /packages/scrollbar/src/thumb.ts: -------------------------------------------------------------------------------- 1 | import type { ExtractPropTypes } from "vue"; 2 | 3 | export const thumbProps = { 4 | vertical: Boolean, 5 | size: String, 6 | move: Number, 7 | ratio: { 8 | type: Number, 9 | required: true, 10 | }, 11 | always: Boolean, 12 | }; 13 | 14 | export type Props = ExtractPropTypes; 15 | -------------------------------------------------------------------------------- /packages/scrollbar/src/thumb.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 35 | -------------------------------------------------------------------------------- /packages/select/__tests__/select.test.js: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/select/index.ts: -------------------------------------------------------------------------------- 1 | import Select from "./src/select.vue"; 2 | import Option from "./src/option.vue"; 3 | import OptionGroup from "./src/optionGrop.vue"; 4 | 5 | import type { App } from "vue"; 6 | 7 | Select.install = (app: App) => { 8 | // 注册组件 9 | app.component(Select.name, Select); 10 | }; 11 | 12 | Option.install = (app: App) => { 13 | app.component(Option.name, Option); 14 | }; 15 | 16 | OptionGroup.install = (app: App) => { 17 | app.component(OptionGroup.name, OptionGroup); 18 | }; 19 | 20 | export default { Select, Option, OptionGroup }; 21 | 22 | export * from "./src/option"; 23 | export * from "./src/select"; 24 | -------------------------------------------------------------------------------- /packages/select/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@etu-design/select", 3 | "version": "0.0.1", 4 | "description": "", 5 | "author": "voilt-sourse <2503063984@qq.com>", 6 | "homepage": "", 7 | "license": "ISC" 8 | } 9 | -------------------------------------------------------------------------------- /packages/select/src/option.ts: -------------------------------------------------------------------------------- 1 | import type { ExtractPropTypes } from "vue"; 2 | 3 | export const optionProps = { 4 | value: { 5 | type: [String, Number, Boolean, Object], 6 | }, 7 | label: { 8 | type: [String, Number], 9 | }, 10 | disabled: { 11 | type: Boolean, 12 | default: false, 13 | }, 14 | }; 15 | 16 | export type Props = ExtractPropTypes; 17 | -------------------------------------------------------------------------------- /packages/select/src/optionGrop.ts: -------------------------------------------------------------------------------- 1 | import type { ExtractPropTypes } from "vue"; 2 | 3 | export const optionGroupProps = { 4 | label: { 5 | type: [String, Number], 6 | }, 7 | disabled: { 8 | type: Boolean, 9 | default: false, 10 | }, 11 | }; 12 | 13 | export type Props = ExtractPropTypes; 14 | -------------------------------------------------------------------------------- /packages/select/src/optionGrop.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | 15 | 23 | -------------------------------------------------------------------------------- /packages/slider/README.md: -------------------------------------------------------------------------------- 1 | # `slider` 2 | 3 | > TODO: description 4 | 5 | ## Usage 6 | 7 | ``` 8 | const slider = require('slider'); 9 | 10 | // TODO: DEMONSTRATE API 11 | ``` 12 | -------------------------------------------------------------------------------- /packages/slider/__tests__/slider.test.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const slider = require('..'); 4 | const assert = require('assert').strict; 5 | 6 | assert.strictEqual(slider(), 'Hello from slider'); 7 | console.info("slider tests passed"); 8 | -------------------------------------------------------------------------------- /packages/slider/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "slider", 3 | "version": "0.0.1", 4 | "description": "> TODO: description", 5 | "author": "王帆 <9729143+wang-fan1111@user.noreply.gitee.com>", 6 | "homepage": "https://github.com/ByteCamp6/ETU-Design#readme", 7 | "license": "ISC", 8 | "main": "lib/slider.js", 9 | "directories": { 10 | "lib": "lib", 11 | "test": "__tests__" 12 | }, 13 | "files": [ 14 | "lib" 15 | ], 16 | "publishConfig": { 17 | "registry": "https://registry.npm.taobao.org/" 18 | }, 19 | "repository": { 20 | "type": "git", 21 | "url": "git+https://github.com/ByteCamp6/ETU-Design.git" 22 | }, 23 | "scripts": { 24 | "test": "node ./__tests__/slider.test.js" 25 | }, 26 | "bugs": { 27 | "url": "https://github.com/ByteCamp6/ETU-Design/issues" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /packages/slider/src/slider.vue: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ByteCamp6/ETU-Design/1f36b195f3fc04f7d3c86bffe0ba809072d72f4c/packages/slider/src/slider.vue -------------------------------------------------------------------------------- /packages/switch/_tests_/switch.test.ts: -------------------------------------------------------------------------------- 1 | import { expect, test } from "vitest"; 2 | import Switch from "../src/switch.vue"; 3 | import { mount } from "@vue/test-utils"; 4 | 5 | test("switch Test", () => { 6 | console.log(Switch); 7 | const wrapper = mount(Switch); 8 | console.log(expect(wrapper.text())); 9 | }); 10 | -------------------------------------------------------------------------------- /packages/switch/index.ts: -------------------------------------------------------------------------------- 1 | import Switch from "./src/switch.vue"; 2 | import type { App } from "vue"; 3 | 4 | Switch.install = (app: App) => { 5 | // 注册组件 6 | app.component(Switch.name, Switch); 7 | }; 8 | 9 | export default Switch; 10 | -------------------------------------------------------------------------------- /packages/switch/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "switch", 3 | "version": "0.0.1", 4 | "description": "> TODO: description", 5 | "author": "Polaris-6625 <2281487673@qq.com>", 6 | "homepage": "", 7 | "license": "ISC", 8 | "scripts": { 9 | "test": "vitest ./_tests_/switch.test.ts" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /packages/switch/src/switch.ts: -------------------------------------------------------------------------------- 1 | import { isBoolean, isNumber, isString } from "@etu-design/utils"; 2 | import { ref } from "vue"; 3 | const input = ref(null); 4 | const UPDATE_MODEL_EVENT = "update:modelValue"; 5 | const CHANGE_EVENT = "change"; 6 | const INPUT_EVENT = "input"; 7 | export const switchEmits = { 8 | [UPDATE_MODEL_EVENT]: (val: boolean | string | number) => 9 | isBoolean(val) || isString(val) || isNumber(val), 10 | [CHANGE_EVENT]: (val: boolean | string | number) => 11 | isBoolean(val) || isString(val) || isNumber(val), 12 | [INPUT_EVENT]: (val: boolean | string | number) => 13 | isBoolean(val) || isString(val) || isNumber(val), 14 | }; 15 | export type SwitchEmits = typeof switchEmits; 16 | -------------------------------------------------------------------------------- /packages/table/README.md: -------------------------------------------------------------------------------- 1 | # `table` 2 | 3 | > TODO: description 4 | 5 | ## Usage 6 | 7 | ``` 8 | const table = require('table'); 9 | 10 | // TODO: DEMONSTRATE API 11 | ``` 12 | -------------------------------------------------------------------------------- /packages/table/__tests__/table.test.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ByteCamp6/ETU-Design/1f36b195f3fc04f7d3c86bffe0ba809072d72f4c/packages/table/__tests__/table.test.ts -------------------------------------------------------------------------------- /packages/table/index.ts: -------------------------------------------------------------------------------- 1 | import Table from "./src/table.vue"; 2 | import type { App } from "vue"; 3 | 4 | export type { 5 | TableSortable, 6 | TableFilterData, 7 | TableFilterable, 8 | TableColumnCtx, 9 | SortingColumn, 10 | FilterColumn, 11 | } from "./src/table-column"; 12 | 13 | export * from "./src/table"; 14 | 15 | Table.install = (app: App) => { 16 | // 注册组件 17 | app.component(Table.name, Table); 18 | }; 19 | 20 | export default Table; 21 | -------------------------------------------------------------------------------- /packages/table/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@etu-design/table", 3 | "version": "0.0.0", 4 | "description": "> TODO: description", 5 | "author": "1379255913 <1379255913@qq.com>", 6 | "homepage": "https://github.com/ByteCamp6/ETU-Design#readme", 7 | "license": "ISC" 8 | } 9 | -------------------------------------------------------------------------------- /packages/table/src/table-column/index.tsx: -------------------------------------------------------------------------------- 1 | export * from "./defaults"; 2 | export * from "./use-table-column"; 3 | -------------------------------------------------------------------------------- /packages/table/src/tableColgroup.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 19 | -------------------------------------------------------------------------------- /packages/table/src/use-table.ts: -------------------------------------------------------------------------------- 1 | import { inject } from "vue"; 2 | import { TableKey } from "@etu-design/tokens"; 3 | 4 | export const useTable = () => inject(TableKey, undefined); 5 | -------------------------------------------------------------------------------- /packages/tag/README.md: -------------------------------------------------------------------------------- 1 | # `tag` 2 | 3 | > TODO: description 4 | 5 | ## Usage 6 | 7 | ``` 8 | const tag = require('tag'); 9 | 10 | // TODO: DEMONSTRATE API 11 | ``` 12 | -------------------------------------------------------------------------------- /packages/tag/index.ts: -------------------------------------------------------------------------------- 1 | import Tag from "./src/tag.vue"; 2 | import type { App } from "vue"; 3 | 4 | Tag.install = (app: App) => { 5 | // 注册组件 6 | app.component(Tag.name, Tag); 7 | }; 8 | 9 | export default Tag; 10 | -------------------------------------------------------------------------------- /packages/tag/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@etu-design/tag", 3 | "version": "0.0.1", 4 | "main": "index.js", 5 | "license": "MIT", 6 | "dependencies": { 7 | "@etu-design/directives": "^0.0.1" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/tag/src/tag.ts: -------------------------------------------------------------------------------- 1 | import type { ExtractPropTypes } from "vue"; 2 | 3 | export const tagProps = { 4 | closable: Boolean, 5 | type: { 6 | type: String, 7 | values: ["success", "info", "warning", "danger", "primary"], 8 | default: "primary", 9 | }, 10 | color: { 11 | type: String, 12 | default: "", 13 | }, 14 | size: { 15 | type: String, 16 | values: ["large", "default", "small"], 17 | default: "default", 18 | }, 19 | effect: { 20 | type: String, 21 | values: ["dark", "light", "plain"], 22 | default: "light", 23 | }, 24 | round: Boolean, 25 | } as const; 26 | 27 | export type TagProps = ExtractPropTypes; 28 | 29 | export const tagEmits = { 30 | close: (evt: MouseEvent) => evt instanceof MouseEvent, 31 | click: (evt: MouseEvent) => evt instanceof MouseEvent, 32 | }; 33 | 34 | export type TagEmits = typeof tagEmits; 35 | -------------------------------------------------------------------------------- /packages/text/README.md: -------------------------------------------------------------------------------- 1 | # Text 2 | 3 | 文本组件 -------------------------------------------------------------------------------- /packages/text/index.ts: -------------------------------------------------------------------------------- 1 | import Text from "./src/text.vue"; 2 | import type { App } from "vue"; 3 | 4 | Text.install = (app: App) => { 5 | // 注册组件 6 | app.component(Text.name, Text); 7 | }; 8 | 9 | export default Text; 10 | -------------------------------------------------------------------------------- /packages/text/src/BTag.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /packages/text/src/Del.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /packages/text/src/Div.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /packages/text/src/ITag.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /packages/text/src/Ins.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /packages/text/src/Mark.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /packages/text/src/Ptag.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /packages/text/src/Span.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /packages/text/src/Sub.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /packages/text/src/Sup.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /packages/theme-chalk/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@etu-design/theme-chalk", 3 | "version": "0.0.1", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "@etu-design/directives": "^0.0.1", 14 | "@etu-design/hooks": "^0.0.1", 15 | "animate.css": "^4.1.1", 16 | "hooks": "^0.3.2", 17 | "theme-chalk": "^1.0.0-dev.9", 18 | "utils": "^0.3.1", 19 | "vite": "^4.0.4", 20 | "vue-router": "^4.1.6" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/affix.scss: -------------------------------------------------------------------------------- 1 | @use "./mixins/mixins.scss" as *; 2 | 3 | //@mixin setFixedPos($offset,$position,$zIndex) { 4 | // position: fixed; 5 | // z-index: $zIndex; 6 | // @if($position == bottom) { 7 | // bottom: $offset; 8 | // } 9 | // @else if($position == left) { 10 | // left: $offset; 11 | // } 12 | // @else if($position == right) { 13 | // right: $offset; 14 | // } 15 | // @else { 16 | // top: $offset; 17 | // } 18 | //} 19 | 20 | @mixin setFixedPos($position) { 21 | position: fixed; 22 | @if($position == bottom) { 23 | bottom: 0; 24 | } 25 | @else if($position == left) { 26 | left: 0; 27 | } 28 | @else if($position == right) { 29 | right: 0; 30 | } 31 | @else { 32 | top: 0; 33 | } 34 | } 35 | 36 | @each $pos in(top,bottom,right,left) { 37 | .etu-Affix--#{$pos} { 38 | @include setFixedPos($pos); 39 | } 40 | } -------------------------------------------------------------------------------- /packages/theme-chalk/src/breadcrumb.scss: -------------------------------------------------------------------------------- 1 | @use "mixins/mixins" as *; 2 | @use "mixins/config.scss" as *; 3 | 4 | @include b(breadcrumb) { 5 | font-size: var(--font-size-default); 6 | 7 | @include e(separator) { 8 | margin: 0 var(--space-3); 9 | font-weight: 600; 10 | color: var(--color-text-3); 11 | } 12 | 13 | @include e(inner) { 14 | @include when(link) { 15 | font-weight: 600; 16 | cursor: pointer; 17 | } 18 | } 19 | 20 | @include e(item) { 21 | &:last-child { 22 | .#{$namespace}-breadcrumb__inner { 23 | font-weight: normal; 24 | cursor: text; 25 | } 26 | 27 | .#{$namespace}-breadcrumb__separator { 28 | display: none; 29 | } 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/checkbox-group.scss: -------------------------------------------------------------------------------- 1 | @use 'mixins/mixins' as *; 2 | 3 | @include b(checkbox-group) { 4 | font-size: 0; 5 | line-height: 0; 6 | } 7 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/col.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:map'; 2 | 3 | @use "mixins/mixins" as *; 4 | @use "mixins/function" as *; 5 | @use "mixins/_var.scss" as *; 6 | @use "var" as *; 7 | 8 | [class*= etu-col-] { 9 | float: left; 10 | box-sizing: border-box; 11 | margin-top: 5px; 12 | } 13 | 14 | 15 | // 总宽 16 | $width : 100%; 17 | 18 | 19 | @for $i from 0 through 24 { 20 | // 分栏 21 | .etu-col-#{$i} { 22 | width: calc($width / 24) * $i; 23 | display: block; 24 | } 25 | 26 | // 偏移 27 | .etu-col-offset-#{$i} { 28 | margin-left: calc($width / 24)* $i; 29 | } 30 | } -------------------------------------------------------------------------------- /packages/theme-chalk/src/fonts/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ByteCamp6/ETU-Design/1f36b195f3fc04f7d3c86bffe0ba809072d72f4c/packages/theme-chalk/src/fonts/iconfont.ttf -------------------------------------------------------------------------------- /packages/theme-chalk/src/fonts/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ByteCamp6/ETU-Design/1f36b195f3fc04f7d3c86bffe0ba809072d72f4c/packages/theme-chalk/src/fonts/iconfont.woff -------------------------------------------------------------------------------- /packages/theme-chalk/src/fonts/iconfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ByteCamp6/ETU-Design/1f36b195f3fc04f7d3c86bffe0ba809072d72f4c/packages/theme-chalk/src/fonts/iconfont.woff2 -------------------------------------------------------------------------------- /packages/theme-chalk/src/form.scss: -------------------------------------------------------------------------------- 1 | @use 'mixins/mixins' as *; 2 | @use 'mixins/var' as *; 3 | @use "mixins/function" as *; 4 | 5 | @include b(form-item){ 6 | display: flex; 7 | margin: 5px; 8 | align-items: center; 9 | @include e(label){ 10 | display: inline-flex; 11 | justify-content: flex-end; 12 | align-items: flex-start; 13 | padding-right: 12px; 14 | height: 32px; 15 | line-height: 32px; 16 | } 17 | @include e(content){ 18 | display: flex; 19 | flex: 1; 20 | flex-wrap: wrap; 21 | } 22 | @include e(error){ 23 | color: red; 24 | font-size: 12px; 25 | margin-left: 5px; 26 | align-self: center; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/mixins/config.scss: -------------------------------------------------------------------------------- 1 | $namespace: "etu" !default; // 所有的组件以el开头，如 el-input 2 | $common-separator: "-" !default; // 公共的连接符 3 | $element-separator: "__" !default; // 元素以__分割，如 el-input__inner 4 | $modifier-separator: "--" !default; // 修饰符以--分割，如 el-input--mini 5 | $state-prefix: "is-" !default; // 状态以is-开头，如 is-disabled 6 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/overlay.scss: -------------------------------------------------------------------------------- 1 | @use "mixins/function" as *; 2 | @use "mixins/_var.scss" as *; 3 | @use "mixins/mixins" as *; 4 | 5 | // 这里遮罩层的出现与否是通过overlay.vue中的 Transition + v-if来决定是否渲染出来遮罩层的 6 | @include b(overlay) { 7 | background-color: rgba(0, 0, 0, 0.5); 8 | position: fixed; 9 | top: 0; 10 | right: 0; 11 | bottom: 0; 12 | left: 0; 13 | z-index: 2000; 14 | transition: all 0.3s; 15 | overflow: auto; 16 | } -------------------------------------------------------------------------------- /packages/theme-chalk/src/radio-group.scss: -------------------------------------------------------------------------------- 1 | @use 'mixins/mixins' as *; 2 | 3 | @include b(radio-group) { 4 | display: inline-flex; 5 | align-items: center; 6 | flex-wrap: wrap; 7 | font-size: 0; 8 | } 9 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/tree.scss: -------------------------------------------------------------------------------- 1 | @use "mixins/mixins" as *; 2 | 3 | .slide-fade-enter-active { 4 | transition: all 0.3s ease-out; 5 | } 6 | 7 | .slide-fade-leave-active { 8 | transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1); 9 | } 10 | 11 | .slide-fade-enter-from, 12 | .slide-fade-leave-to { 13 | transform: translateX(20px); 14 | opacity: 0; 15 | } -------------------------------------------------------------------------------- /packages/tokens/README.md: -------------------------------------------------------------------------------- 1 | # `tokens` 2 | 3 | > TODO: description 4 | 5 | ## Usage 6 | 7 | ``` 8 | const tokens = require('tokens'); 9 | 10 | // TODO: DEMONSTRATE API 11 | ``` 12 | -------------------------------------------------------------------------------- /packages/tokens/__tests__/tokens.test.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const tokens = require(".."); 4 | const assert = require("assert").strict; 5 | 6 | assert.strictEqual(tokens(), "Hello from tokens"); 7 | console.info("tokens tests passed"); 8 | -------------------------------------------------------------------------------- /packages/tokens/breadcrumb.ts: -------------------------------------------------------------------------------- 1 | import type { InjectionKey } from "vue"; 2 | import type { BreadcrumbProps } from "../breadcrumb"; 3 | 4 | export const breadcrumbKey: InjectionKey = 5 | Symbol("breadcrumbKey"); 6 | -------------------------------------------------------------------------------- /packages/tokens/checkbox.ts: -------------------------------------------------------------------------------- 1 | import type { InjectionKey, ToRefs, WritableComputedRef } from "vue"; 2 | import type { CheckboxGroupProps } from "../checkbox/src/checkbox-group"; 3 | 4 | type CheckboxGroupContext = { 5 | modelValue?: WritableComputedRef; 6 | changeEvent?: (...args: any) => any; 7 | } & ToRefs; 8 | 9 | export const checkboxGroupContextKey: InjectionKey = 10 | Symbol("checkboxGroupContextKey"); 11 | -------------------------------------------------------------------------------- /packages/tokens/collapse.ts: -------------------------------------------------------------------------------- 1 | import type { InjectionKey } from "vue"; 2 | 3 | export const collapseKey: InjectionKey = Symbol("collapseKey"); 4 | -------------------------------------------------------------------------------- /packages/tokens/data-picker.ts: -------------------------------------------------------------------------------- 1 | import type { InjectionKey } from "vue"; 2 | 3 | export const datePickerKey: InjectionKey = Symbol("datePickerKey"); 4 | -------------------------------------------------------------------------------- /packages/tokens/dialog.ts: -------------------------------------------------------------------------------- 1 | import type { CSSProperties, ComputedRef, InjectionKey, Ref } from "vue"; 2 | 3 | export type DialogContext = { 4 | dialogRef: Ref; 5 | headerRef: Ref; 6 | rendered: Ref; 7 | style: ComputedRef; 8 | }; 9 | 10 | export const dialogInjectionKey: InjectionKey = 11 | Symbol("dialogInjectionKey"); 12 | -------------------------------------------------------------------------------- /packages/tokens/dropdown.ts: -------------------------------------------------------------------------------- 1 | import type { InjectionKey } from "vue"; 2 | // import type { DropDownProps } from "../dropdown"; 3 | 4 | export interface dropdounProvide { 5 | handleMousedown: any; 6 | } 7 | export const dropdownKey: InjectionKey = Symbol("dropdownKey"); 8 | -------------------------------------------------------------------------------- /packages/tokens/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./breadcrumb"; 2 | export * from "./select"; 3 | export * from "./checkbox"; 4 | export * from "./radio"; 5 | export * from "./dialog"; 6 | export * from "./collapse"; 7 | export * from "./pagination"; 8 | export * from "./table"; 9 | export * from "./data-picker"; 10 | -------------------------------------------------------------------------------- /packages/tokens/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@etu-design/tokens", 3 | "version": "0.0.1", 4 | "description": "> TODO: description", 5 | "author": "voilt-sourse <2503063984@qq.com>", 6 | "homepage": "", 7 | "license": "ISC", 8 | "main": "index.ts", 9 | "dependencies": { 10 | "@etu-design/directives": "^0.0.1", 11 | "animate.css": "^4.1.1", 12 | "vue-router": "^4.1.6" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/tokens/pagination.ts: -------------------------------------------------------------------------------- 1 | import type { ComputedRef, InjectionKey, WritableComputedRef } from "vue"; 2 | 3 | export interface PaginationContext { 4 | currentPage?: WritableComputedRef; 5 | pageCount?: ComputedRef; 6 | disabled?: ComputedRef; 7 | changeEvent?: (val: number) => void; 8 | handleSizeChange?: (val: number) => void; 9 | } 10 | 11 | export const PaginationKey: InjectionKey = 12 | Symbol("etuPaginationKey"); 13 | -------------------------------------------------------------------------------- /packages/tokens/radio.ts: -------------------------------------------------------------------------------- 1 | import type { RadioGroupProps } from "../radio/src/radio-group"; 2 | import type { InjectionKey, ToRefs } from "vue"; 3 | 4 | export type RadioGroupContext = { 5 | changeEvent: (val: RadioGroupProps["modelValue"]) => void; 6 | } & ToRefs; 7 | 8 | export const radioGroupKey: InjectionKey = 9 | Symbol("radioGroupKey"); 10 | -------------------------------------------------------------------------------- /packages/tokens/select.ts: -------------------------------------------------------------------------------- 1 | import type { InjectionKey } from "vue"; 2 | import type { SelectProps } from "../select"; 3 | 4 | export const selectKey: InjectionKey = Symbol("selectKey"); 5 | -------------------------------------------------------------------------------- /packages/tokens/table.ts: -------------------------------------------------------------------------------- 1 | import type { ComputedRef, InjectionKey, Ref } from "vue"; 2 | import type { 3 | SortingColumn, 4 | TableColumnCtx, 5 | } from "../table/src/table-column/defaults"; 6 | import type { ClassName } from "@etu-design/table/src/table"; 7 | 8 | export interface TableCtx { 9 | emit: (event: string, ...args: any[]) => void; 10 | hasKey: ComputedRef; 11 | originColumns: ComputedRef[]>; 12 | data: ComputedRef; 13 | rowClass: ClassName | ((data: { record: any; rowIndex: number }) => any); 14 | sortingColumn: Ref; 15 | changeSortingColumn: (data: SortingColumn) => void; 16 | changeFilterRules: (columnProp: string, filtersValue: string[]) => void; 17 | } 18 | 19 | export const TableKey: InjectionKey = Symbol("TableKey"); 20 | -------------------------------------------------------------------------------- /packages/tree/README.md: -------------------------------------------------------------------------------- 1 | # 虚拟树形控件 2 | 3 | 这是虚拟树形控件 4 | 5 | # 使用 6 | 7 | `` 8 | 9 | 然后在options中绑定值 10 | 11 | ```vue 12 | const state = reactive({ 13 | treeOptions: [ 14 | { 15 | label: "一级", 16 | checked: false, 17 | children: [ 18 | { 19 | label: "一级-1", 20 | checked: false, 21 | }, 22 | { 23 | label: "一级-2", 24 | checked: false, 25 | children: [ 26 | { 27 | label: "一级-2-1", 28 | checked: false, 29 | }, 30 | { 31 | label: "一级-2-2", 32 | checked: false, 33 | }, 34 | ], 35 | }, 36 | ], 37 | }, 38 | ], 39 | }); 40 | const { treeOptions } = state; 41 | ``` 42 | `label`:值的名，`showCheck: true`:是否显示多选框。 43 | 44 | # 不足 45 | 46 | 目前没有做出check-group式的选择框，没有中间状态。 47 | -------------------------------------------------------------------------------- /packages/tree/index.ts: -------------------------------------------------------------------------------- 1 | import Tree from "./src/tree.vue"; 2 | import type { App } from "vue"; 3 | 4 | Tree.install = (app: App) => { 5 | // 注册组件 6 | app.component(Tree.name, Tree); 7 | }; 8 | 9 | export default Tree; 10 | -------------------------------------------------------------------------------- /packages/tree/src/tree-node.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 22 | 23 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /packages/upload/README.md: -------------------------------------------------------------------------------- 1 | # `upload` 2 | 3 | > TODO: description 4 | 5 | ## Usage 6 | 7 | ``` 8 | const upload = require('upload'); 9 | 10 | // TODO: DEMONSTRATE API 11 | ``` 12 | -------------------------------------------------------------------------------- /packages/upload/__tests__/upload.test.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ByteCamp6/ETU-Design/1f36b195f3fc04f7d3c86bffe0ba809072d72f4c/packages/upload/__tests__/upload.test.ts -------------------------------------------------------------------------------- /packages/upload/index.ts: -------------------------------------------------------------------------------- 1 | import Upload from "./src/upload.vue"; 2 | import type { App } from "vue"; 3 | 4 | Upload.install = (app: App) => { 5 | // 注册组件 6 | app.component(Upload.name, Upload); 7 | }; 8 | 9 | export default Upload; 10 | -------------------------------------------------------------------------------- /packages/upload/src/upload-dragger.ts: -------------------------------------------------------------------------------- 1 | import type { ExtractPropTypes } from "vue"; 2 | import type UploadDragger from "./upload-dragger.vue"; 3 | import { isArray } from "@etu-design/utils"; 4 | 5 | export const uploadDraggerProps = { 6 | accept: { 7 | type: String, 8 | default: "", 9 | }, 10 | disabled: { 11 | type: Boolean, 12 | default: false, 13 | }, 14 | } as const; 15 | export type UploadDraggerProps = ExtractPropTypes; 16 | 17 | export const uploadDraggerEmits = { 18 | file: (file: File[]) => isArray(file), 19 | }; 20 | export type UploadDraggerEmits = typeof uploadDraggerEmits; 21 | 22 | export type UploadDraggerInstance = InstanceType; 23 | -------------------------------------------------------------------------------- /packages/upload/src/upload-list.ts: -------------------------------------------------------------------------------- 1 | import { uploadListTypes } from "./upload"; 2 | import type { UploadFile } from "./upload"; 3 | import type { ExtractPropTypes } from "vue"; 4 | 5 | export const uploadListProps = { 6 | files: { 7 | type: Array, 8 | default: () => [], 9 | }, 10 | disabled: { 11 | type: Boolean, 12 | default: false, 13 | }, 14 | handlePreview: { 15 | type: Function, 16 | }, 17 | listType: { 18 | type: String, 19 | values: uploadListTypes, 20 | default: "text", 21 | }, 22 | } as const; 23 | 24 | export type UploadListProps = ExtractPropTypes; 25 | export const uploadListEmits = { 26 | remove: (file: UploadFile) => !!file, 27 | }; 28 | export type UploadListEmits = typeof uploadListEmits; 29 | -------------------------------------------------------------------------------- /packages/utils/dom/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./style"; 2 | -------------------------------------------------------------------------------- /packages/utils/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./vue"; 2 | export * from "./types"; 3 | export * from "./dom"; 4 | export * from "./utils"; 5 | -------------------------------------------------------------------------------- /packages/utils/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@etu-design/utils", 3 | "version": "0.0.1", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "dev": "" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "dependencies": { 14 | "@etu-design/directives": "^0.0.1", 15 | "@etu-design/hooks": "^0.0.1", 16 | "@etu-design/theme-chalk": "^0.0.1", 17 | "animate.css": "^4.1.1", 18 | "hooks": "^0.3.2", 19 | "theme-chalk": "^1.0.0-dev.9", 20 | "utils": "^0.3.1", 21 | "vite": "^4.0.4", 22 | "vue-router": "^4.1.6" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /packages/utils/utils.ts: -------------------------------------------------------------------------------- 1 | export function _debounce(fn, wait) { 2 | let timer: number | null = null; 3 | return function (...args) { 4 | const context = this; 5 | 6 | if (timer) { 7 | clearTimeout(timer); 8 | timer = null; 9 | } 10 | 11 | timer = setTimeout(() => { 12 | fn.apply(context, args); 13 | }, wait); 14 | }; 15 | } 16 | 17 | // 定时器 18 | export function _throttle(fn, delay) { 19 | let timer: number | null = null; 20 | return function (...args) { 21 | const context = this; 22 | 23 | if (!timer) { 24 | timer = setTimeout(() => { 25 | fn.apply(context, args); 26 | timer = null; 27 | }, delay); 28 | } 29 | }; 30 | } 31 | -------------------------------------------------------------------------------- /packages/utils/vue/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./install"; 2 | export * from "./tryOnScopeDispose"; 3 | export * from "./runtime"; 4 | -------------------------------------------------------------------------------- /packages/utils/vue/install.ts: -------------------------------------------------------------------------------- 1 | import type { App, AppContext, Plugin } from "vue"; 2 | export type SFCWithInstall = T & Plugin; 3 | export type SFCInstallWithContext = SFCWithInstall & { 4 | _context: AppContext | null; 5 | }; 6 | 7 | export const withInstall = (comp: T) => { 8 | (comp as SFCWithInstall).install = function (app) { 9 | const { name } = comp as unknown as { name: string }; 10 | app.component(name, comp as SFCWithInstall); 11 | }; 12 | return comp as SFCWithInstall; 13 | }; 14 | 15 | export const withInstallFunction = (fn: T, name: string) => { 16 | (fn as SFCWithInstall).install = (app: App) => { 17 | (fn as SFCInstallWithContext)._context = app._context; 18 | app.config.globalProperties[name] = fn; 19 | }; 20 | 21 | return fn as SFCInstallWithContext; 22 | }; 23 | -------------------------------------------------------------------------------- /packages/utils/vue/runtime.ts: -------------------------------------------------------------------------------- 1 | import type { PropType } from "vue"; 2 | 3 | export const definePropType = (val: any): PropType => val; 4 | -------------------------------------------------------------------------------- /packages/utils/vue/tryOnScopeDispose.ts: -------------------------------------------------------------------------------- 1 | import { getCurrentScope, onScopeDispose } from "vue"; 2 | 3 | export function tryOnScopeDispose(fn: () => void) { 4 | // 如果有活跃的effect 5 | if (getCurrentScope()) { 6 | //在当前活跃的 effect 作用域上注册一个处理回调。该回调会在相关的 effect 作用域结束之后被调用 7 | //能代替onUmounted 8 | onScopeDispose(fn); 9 | return true; 10 | } 11 | return false; 12 | } 13 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ByteCamp6/ETU-Design/1f36b195f3fc04f7d3c86bffe0ba809072d72f4c/public/favicon.ico -------------------------------------------------------------------------------- /src/assets/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/main.css: -------------------------------------------------------------------------------- 1 | @import "./base.css"; 2 | 3 | #app { 4 | max-width: 1280px; 5 | margin: 0 auto; 6 | padding: 2rem; 7 | font-weight: normal; 8 | } 9 | 10 | a, 11 | .green { 12 | text-decoration: none; 13 | color: hsla(160, 100%, 37%, 1); 14 | transition: 0.4s; 15 | } 16 | 17 | @media (hover: hover) { 18 | a:hover { 19 | background-color: hsla(160, 100%, 37%, 0.2); 20 | } 21 | } 22 | 23 | @media (min-width: 1024px) { 24 | body { 25 | display: flex; 26 | place-items: center; 27 | } 28 | 29 | #app { 30 | display: grid; 31 | grid-template-columns: 1fr 1fr; 32 | padding: 0 2rem; 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/components/Affix.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 10 | 11 | -------------------------------------------------------------------------------- /src/components/Avatar.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /src/components/Breadcrumb.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 19 | -------------------------------------------------------------------------------- /src/components/DatePicker.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 11 | -------------------------------------------------------------------------------- /src/components/Dialog.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 21 | -------------------------------------------------------------------------------- /src/components/Divider.vue: -------------------------------------------------------------------------------- 1 | 14 | -------------------------------------------------------------------------------- /src/components/Empty.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/components/Icon.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 15 | -------------------------------------------------------------------------------- /src/components/Link.vue: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /src/components/Message.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 19 | -------------------------------------------------------------------------------- /src/components/OverLay.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/components/Pagination.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 19 | -------------------------------------------------------------------------------- /src/components/Progress.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 24 | -------------------------------------------------------------------------------- /src/components/Radio.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 21 | -------------------------------------------------------------------------------- /src/components/Scrollbar.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 20 | 21 | 39 | -------------------------------------------------------------------------------- /src/components/Switch.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /src/components/Tag.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /src/components/Text.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/components/Tree.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /src/components/layer.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 26 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | // import { createRouter, createWebHistory } from "vue-router"; 2 | import { createApp } from "vue"; 3 | import App from "./App.vue"; 4 | import "../packages/theme-chalk/src/index.scss"; 5 | 6 | // const router = createRouter({ 7 | // history: createWebHistory(), 8 | // routes: [ 9 | // { 10 | // path: "/home", 11 | // name: "Home", 12 | // meta: { 13 | // title: "首页", 14 | // keepAlive: true, 15 | // requireAuth: true, 16 | // }, 17 | // component: () => import("@/components/Breadcrumb.vue"), 18 | // }, 19 | // ], 20 | // }); 21 | 22 | import ETU from "../packages/index"; 23 | // import "./assets/main.css"; 24 | 25 | const app = createApp(App); 26 | app.use(ETU); 27 | // app.use(router); 28 | app.mount("#app"); 29 | -------------------------------------------------------------------------------- /tsconfig.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@vue/tsconfig/tsconfig.node.json", 3 | "include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "playwright.config.*"], 4 | "compilerOptions": { 5 | "composite": true, 6 | "types": ["node"] 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@vue/tsconfig/tsconfig.web.json", 3 | "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], 4 | "compilerOptions": { 5 | "target": "ESNext", 6 | "module": "ESNext", 7 | "esModuleInterop": true, // 支持模块转化 8 | "skipLibCheck": true, // 跳过类库检测 9 | "forceConsistentCasingInFileNames": true, // 强制区分大小写 10 | "moduleResolution": "node", // 模块解析方式 11 | "jsx": "preserve", // 不转化jsx 12 | "jsxFactory": "h", 13 | "jsxFragmentFactory": "Fragment", 14 | "declaration": true, // 生成声明文件 15 | "sourceMap": true, // 生成映射文件 16 | "baseUrl": ".", 17 | "paths": { 18 | "@/*": ["./src/*"] 19 | }, 20 | "noImplicitAny": false // 21 | }, 22 | 23 | "references": [ 24 | { 25 | "path": "./tsconfig.config.json" 26 | } 27 | ] 28 | } 29 | -------------------------------------------------------------------------------- /tsconfig.web.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, // 是否开启项目编译，开启该功能，将会生成被编译文件所在的目录，同时开启declaration、declarationMap和incremental，默认：false 5 | "jsx": "preserve", // 指定JSX代码生成用于的开发环境 6 | "lib": ["ES2018", "DOM", "DOM.Iterable"], // 指定项目运行时使用的库 7 | "types": ["unplugin-vue-define-options","unplugin-vue-define-options/macros-global"], // 用来指定需要包含的模块，并将其包含在全局范围内 8 | "skipLibCheck": true // 是否跳过声明文件的类型检查，这可以在编译期间以牺牲类型系统准确性为代价来节省时间，默认：false 9 | }, 10 | "include": ["packages"], // 使用 include 来指定应从绝对类型中使用哪些类型 11 | "exclude": [ 12 | // 提供用于禁用 JavaScript 项目中某个模块的类型获取的配置 13 | "node_modules", 14 | "**/dist", 15 | "**/__tests__/**/*", 16 | "**/gulpfile.ts", 17 | "**/test-helper", 18 | "packages/test-utils", 19 | "**/*.md" 20 | ] 21 | } 22 | -------------------------------------------------------------------------------- /typings/vue-shim.d.ts: -------------------------------------------------------------------------------- 1 | // vue文件类型声明 2 | // declare module "*.vue" { 3 | // import { DefineComponent } from "vue"; 4 | // const component: DefineComponent; 5 | // export default component; 6 | // } 7 | declare module "*.vue" { 8 | import { defineComponent, App } from "vue"; 9 | const component: ReturnType & { 10 | install(app: App): void; 11 | }; 12 | export default component; 13 | } 14 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | /// 2 | import { fileURLToPath, URL } from "node:url"; 3 | 4 | import { defineConfig } from "vite"; 5 | import vue from "@vitejs/plugin-vue"; 6 | import VueSetupExtend from "vite-plugin-vue-setup-extend"; 7 | import vueJsxPlugin from "@vitejs/plugin-vue-jsx"; 8 | // import DefineOptions from "unplugin-vue-define-options/vite" 9 | 10 | // https://vitejs.dev/config/ 11 | export default defineConfig({ 12 | plugins: [vue(), VueSetupExtend(), vueJsxPlugin()], 13 | resolve: { 14 | alias: { 15 | "@": fileURLToPath(new URL(import.meta.url)), 16 | }, 17 | }, 18 | define: { 19 | "process.env": {}, 20 | }, 21 | test: { 22 | globals: true, 23 | environment: "jsdom", 24 | transformMode: { 25 | web: [/.[tj]sx$/], 26 | }, 27 | }, 28 | }); 29 | --------------------------------------------------------------------------------