├── packages ├── components │ ├── icon │ │ ├── __test__ │ │ │ └── icon.spec.ts │ │ ├── src │ │ │ ├── svg │ │ │ │ ├── caret-top.svg │ │ │ │ ├── caret-bottom.svg │ │ │ │ ├── caret-left.svg │ │ │ │ ├── caret-right.svg │ │ │ │ ├── flag.svg │ │ │ │ ├── minus.svg │ │ │ │ ├── semi-select.svg │ │ │ │ ├── d-caret.svg │ │ │ │ ├── home-filled.svg │ │ │ │ ├── platform.svg │ │ │ │ ├── histogram.svg │ │ │ │ ├── management.svg │ │ │ │ ├── briefcase.svg │ │ │ │ ├── fold.svg │ │ │ │ ├── expand.svg │ │ │ │ ├── list.svg │ │ │ │ ├── plus.svg │ │ │ │ ├── promotion.svg │ │ │ │ ├── check.svg │ │ │ │ ├── sort-down.svg │ │ │ │ ├── sort-up.svg │ │ │ │ ├── brush-filled.svg │ │ │ │ ├── stamp.svg │ │ │ │ ├── ticket.svg │ │ │ │ ├── goods-filled.svg │ │ │ │ ├── select.svg │ │ │ │ ├── wallet-filled.svg │ │ │ │ ├── more-filled.svg │ │ │ │ ├── avatar.svg │ │ │ │ ├── remove-filled.svg │ │ │ │ ├── search.svg │ │ │ │ ├── download.svg │ │ │ │ ├── files.svg │ │ │ │ ├── umbrella.svg │ │ │ │ ├── upload.svg │ │ │ │ ├── user-filled.svg │ │ │ │ ├── folder.svg │ │ │ │ ├── right.svg │ │ │ │ ├── key.svg │ │ │ │ ├── arrow-down-bold.svg │ │ │ │ ├── arrow-left-bold.svg │ │ │ │ ├── arrow-right-bold.svg │ │ │ │ ├── arrow-up-bold.svg │ │ │ │ ├── checked.svg │ │ │ │ ├── comment.svg │ │ │ │ ├── magnet.svg │ │ │ │ ├── remove.svg │ │ │ │ ├── sunset.svg │ │ │ │ ├── crop.svg │ │ │ │ ├── cloudy.svg │ │ │ │ ├── document-remove.svg │ │ │ │ ├── folder-remove.svg │ │ │ │ ├── share.svg │ │ │ │ ├── tickets.svg │ │ │ │ ├── switch-button.svg │ │ │ │ ├── top-left.svg │ │ │ │ ├── bottom-left.svg │ │ │ │ ├── bottom-right.svg │ │ │ │ ├── top-right.svg │ │ │ │ ├── trend-charts.svg │ │ │ │ ├── bell-filled.svg │ │ │ │ ├── dish.svg │ │ │ │ ├── warning.svg │ │ │ │ ├── zoom-out.svg │ │ │ │ ├── arrow-down.svg │ │ │ │ ├── arrow-up.svg │ │ │ │ ├── back.svg │ │ │ │ ├── circle-plus-filled.svg │ │ │ │ ├── grid.svg │ │ │ │ ├── house.svg │ │ │ │ ├── moon.svg │ │ │ │ ├── video-pause.svg │ │ │ │ ├── arrow-left.svg │ │ │ │ ├── arrow-right.svg │ │ │ │ ├── document-add.svg │ │ │ │ ├── folder-add.svg │ │ │ │ ├── video-camera.svg │ │ │ │ ├── position.svg │ │ │ │ ├── shop.svg │ │ │ │ ├── success-filled.svg │ │ │ │ ├── bottom.svg │ │ │ │ ├── circle-check-filled.svg │ │ │ │ ├── document.svg │ │ │ │ ├── chat-square.svg │ │ │ │ ├── refresh-left.svg │ │ │ │ ├── refresh-right.svg │ │ │ │ ├── smoking.svg │ │ │ │ ├── collection-tag.svg │ │ │ │ ├── user.svg │ │ │ │ ├── warning-filled.svg │ │ │ │ ├── close-bold.svg │ │ │ │ ├── failed.svg │ │ │ │ ├── takeaway-box.svg │ │ │ │ ├── zoom-in.svg │ │ │ │ ├── close.svg │ │ │ │ ├── document-checked.svg │ │ │ │ ├── iphone.svg │ │ │ │ ├── more.svg │ │ │ │ ├── stopwatch.svg │ │ │ │ ├── top.svg │ │ │ │ ├── circle-plus.svg │ │ │ │ ├── filter.svg │ │ │ │ ├── monitor.svg │ │ │ │ ├── refrigerator.svg │ │ │ │ ├── circle-check.svg │ │ │ │ ├── coordinate.svg │ │ │ │ ├── document-copy.svg │ │ │ │ ├── female.svg │ │ │ │ ├── folder-checked.svg │ │ │ │ ├── ice-cream-square.svg │ │ │ │ ├── sort.svg │ │ │ │ ├── video-play.svg │ │ │ │ ├── watermelon.svg │ │ │ │ ├── headset.svg │ │ │ │ ├── mug.svg │ │ │ │ ├── clock.svg │ │ │ │ ├── data-board.svg │ │ │ │ ├── goblet.svg │ │ │ │ ├── coffee-cup.svg │ │ │ │ ├── pie-chart.svg │ │ │ │ ├── star-filled.svg │ │ │ │ ├── folder-opened.svg │ │ │ │ ├── goblet-square.svg │ │ │ │ ├── phone-filled.svg │ │ │ │ ├── circle-close-filled.svg │ │ │ │ ├── operation.svg │ │ │ │ ├── film.svg │ │ │ │ ├── notification.svg │ │ │ │ ├── shopping-bag.svg │ │ │ │ ├── shopping-cart.svg │ │ │ │ ├── bell.svg │ │ │ │ ├── camera-filled.svg │ │ │ │ ├── cellphone.svg │ │ │ │ ├── edit-pen.svg │ │ │ │ ├── picture-filled.svg │ │ │ │ ├── finished.svg │ │ │ │ ├── refresh.svg │ │ │ │ ├── location-filled.svg │ │ │ │ ├── upload-filled.svg │ │ │ │ ├── goblet-full.svg │ │ │ │ ├── location.svg │ │ │ │ ├── message.svg │ │ │ │ ├── paperclip.svg │ │ │ │ ├── delete-filled.svg │ │ │ │ ├── full-screen.svg │ │ │ │ ├── dish-dot.svg │ │ │ │ ├── no-smoking.svg │ │ │ │ ├── switch.svg │ │ │ │ ├── delete.svg │ │ │ │ ├── folder-delete.svg │ │ │ │ ├── camera.svg │ │ │ │ ├── document-delete.svg │ │ │ │ ├── wallet.svg │ │ │ │ ├── timer.svg │ │ │ │ ├── video-camera-filled.svg │ │ │ │ ├── wind-power.svg │ │ │ │ ├── circle-close.svg │ │ │ │ ├── opportunity.svg │ │ │ │ ├── microphone.svg │ │ │ │ ├── mostly-cloudy.svg │ │ │ │ ├── watch.svg │ │ │ │ ├── message-box.svg │ │ │ │ ├── open.svg │ │ │ │ ├── chat-line-square.svg │ │ │ │ ├── data-line.svg │ │ │ │ ├── help-filled.svg │ │ │ │ ├── price-tag.svg │ │ │ │ ├── reading-lamp.svg │ │ │ │ ├── turn-off.svg │ │ │ │ ├── view.svg │ │ │ │ ├── notebook.svg │ │ │ │ ├── partly-cloudy.svg │ │ │ │ ├── postcard.svg │ │ │ │ ├── delete-location.svg │ │ │ │ ├── magic-stick.svg │ │ │ │ ├── reading.svg │ │ │ │ ├── suitcase.svg │ │ │ │ ├── toilet-paper.svg │ │ │ │ ├── compass.svg │ │ │ │ ├── school.svg │ │ │ │ ├── discount.svg │ │ │ │ ├── scissor.svg │ │ │ │ ├── aim.svg │ │ │ │ ├── collection.svg │ │ │ │ ├── copy-document.svg │ │ │ │ ├── goods.svg │ │ │ │ ├── lock.svg │ │ │ │ ├── lollipop.svg │ │ │ │ ├── menu.svg │ │ │ │ ├── warn-triangle-filled.svg │ │ │ │ ├── odometer.svg │ │ │ │ ├── sunrise.svg │ │ │ │ ├── d-arrow-right.svg │ │ │ │ ├── ice-cream.svg │ │ │ │ ├── unlock.svg │ │ │ │ ├── bowl.svg │ │ │ │ ├── picture-rounded.svg │ │ │ │ ├── chat-round.svg │ │ │ │ ├── data-analysis.svg │ │ │ │ ├── location-information.svg │ │ │ │ ├── knife-fork.svg │ │ │ │ ├── milk-tea.svg │ │ │ │ ├── moon-night.svg │ │ │ │ ├── add-location.svg │ │ │ │ ├── map-location.svg │ │ │ │ ├── mic.svg │ │ │ │ ├── chat-dot-square.svg │ │ │ │ ├── d-arrow-left.svg │ │ │ │ ├── edit.svg │ │ │ │ ├── service.svg │ │ │ │ ├── male.svg │ │ │ │ ├── office-building.svg │ │ │ │ ├── tools.svg │ │ │ │ ├── shopping-cart-full.svg │ │ │ │ ├── burger.svg │ │ │ │ ├── picture.svg │ │ │ │ ├── box.svg │ │ │ │ ├── coffee.svg │ │ │ │ ├── first-aid-kit.svg │ │ │ │ ├── fork-spoon.svg │ │ │ │ ├── present.svg │ │ │ │ ├── ship.svg │ │ │ │ ├── place.svg │ │ │ │ ├── cold-drink.svg │ │ │ │ ├── dessert.svg │ │ │ │ ├── medal.svg │ │ │ │ ├── grape.svg │ │ │ │ ├── drizzling.svg │ │ │ │ ├── mute-notification.svg │ │ │ │ ├── baseball.svg │ │ │ │ ├── van.svg │ │ │ │ ├── connection.svg │ │ │ │ ├── alarm-clock.svg │ │ │ │ ├── ice-tea.svg │ │ │ │ ├── rank.svg │ │ │ │ ├── ice-drink.svg │ │ │ │ ├── sell.svg │ │ │ │ ├── sold-out.svg │ │ │ │ ├── calendar.svg │ │ │ │ ├── chat-line-round.svg │ │ │ │ ├── lightning.svg │ │ │ │ ├── cherry.svg │ │ │ │ ├── trophy.svg │ │ │ │ ├── star.svg │ │ │ │ ├── pointer.svg │ │ │ │ ├── phone.svg │ │ │ │ ├── set-up.svg │ │ │ │ ├── brush.svg │ │ │ │ ├── handbag.svg │ │ │ │ ├── chat-dot-round.svg │ │ │ │ ├── link.svg │ │ │ │ └── bicycle.svg │ │ │ └── icon.ts │ │ └── index.ts │ ├── input │ │ ├── __test__ │ │ │ └── input.spec.ts │ │ └── index.ts │ ├── radio │ │ ├── __test__ │ │ │ └── radio.spec.ts │ │ └── index.ts │ ├── table │ │ ├── __test__ │ │ │ └── table.spec.ts │ │ ├── src │ │ │ └── utils.ts │ │ └── index.ts │ ├── tag │ │ ├── __test__ │ │ │ └── tag.spec.ts │ │ ├── index.ts │ │ └── src │ │ │ └── tag.ts │ ├── tree │ │ ├── __test__ │ │ │ └── tree.spec.ts │ │ └── index.ts │ ├── dialog │ │ ├── __test__ │ │ │ └── dialog.spec.ts │ │ └── index.ts │ ├── message │ │ ├── __test__ │ │ │ └── message.spec.ts │ │ └── index.ts │ ├── overlay │ │ ├── __test__ │ │ │ └── overlay.spec.ts │ │ ├── index.ts │ │ └── src │ │ │ ├── overlay.less │ │ │ └── overlay.ts │ ├── popper │ │ ├── __test__ │ │ │ └── popper.spec.ts │ │ ├── index.ts │ │ └── src │ │ │ ├── use-nowrap.ts │ │ │ ├── use-popper-container.ts │ │ │ └── forward-ref.tsx │ ├── ripple │ │ ├── __test__ │ │ │ └── slider.spec.ts │ │ └── index.ts │ ├── select │ │ ├── __test__ │ │ │ └── select.spec.ts │ │ └── index.ts │ ├── slider │ │ ├── __test__ │ │ │ └── slider.spec.ts │ │ └── index.ts │ ├── switch │ │ ├── __test__ │ │ │ └── switch.spec.ts │ │ ├── index.ts │ │ └── src │ │ │ └── switch.ts │ ├── tooltip │ │ ├── __test__ │ │ │ └── tooltip.spec.ts │ │ ├── src │ │ │ ├── tooltip.less │ │ │ └── tooltip.ts │ │ └── index.ts │ ├── calendar │ │ ├── __test__ │ │ │ └── calendar.spec.ts │ │ └── index.ts │ ├── checkbox │ │ ├── __test__ │ │ │ └── checkbox.spec.ts │ │ └── index.ts │ ├── collapse │ │ ├── __test__ │ │ │ └── collapse.spec.ts │ │ ├── index.ts │ │ └── src │ │ │ └── collapse.ts │ ├── progress │ │ ├── __test__ │ │ │ └── progress.spec.ts │ │ └── index.ts │ ├── scrollbar │ │ ├── __test__ │ │ │ └── scrollbar.spec.ts │ │ ├── index.ts │ │ └── src │ │ │ └── scrollbar.ts │ ├── sortable │ │ ├── __test__ │ │ │ └── sortable.spec.ts │ │ ├── src │ │ │ ├── sortable.ts │ │ │ ├── sortable.less │ │ │ └── sortable.vue │ │ └── index.ts │ ├── date-picker │ │ ├── __test__ │ │ │ └── date-picker.spec.ts │ │ └── index.ts │ ├── styles │ │ └── common.less │ ├── button │ │ └── index.ts │ ├── collapse-transition │ │ └── index.ts │ ├── package.json │ └── index.ts ├── utils │ ├── dom │ │ └── index.ts │ ├── types.ts │ ├── index.ts │ ├── package.json │ ├── common.ts │ └── style.ts ├── hooks │ ├── index.ts │ └── package.json ├── docs │ ├── .vitepress │ │ ├── vitepress │ │ │ ├── styles │ │ │ │ ├── app.scss │ │ │ │ ├── var.scss │ │ │ │ └── base.scss │ │ │ └── index.ts │ │ ├── utils │ │ │ └── types.ts │ │ ├── i18n │ │ │ └── pages │ │ │ │ ├── sidebar.json │ │ │ │ └── guide.json │ │ ├── config │ │ │ └── nav.ts │ │ └── theme │ │ │ └── index.ts │ ├── examples │ │ ├── icon │ │ │ ├── basic.vue │ │ │ ├── color.vue │ │ │ └── size.vue │ │ ├── index.ts │ │ ├── calendar │ │ │ ├── basic.vue │ │ │ └── customize.vue │ │ ├── input │ │ │ ├── basic.vue │ │ │ ├── disabled.vue │ │ │ ├── clearable.vue │ │ │ └── password.vue │ │ ├── tooltip │ │ │ ├── rich-content.vue │ │ │ └── html-content.vue │ │ ├── switch │ │ │ ├── disabled.vue │ │ │ ├── loading.vue │ │ │ ├── basic.vue │ │ │ └── extended-value-types.vue │ │ ├── tag │ │ │ ├── basic.vue │ │ │ └── removable.vue │ │ ├── checkbox │ │ │ ├── disabled.vue │ │ │ └── grouping.vue │ │ ├── radio │ │ │ ├── basic.vue │ │ │ ├── disabled.vue │ │ │ ├── radio-button-group.vue │ │ │ ├── color.vue │ │ │ └── with-borders.vue │ │ ├── button │ │ │ ├── custom.vue │ │ │ └── size.vue │ │ ├── message │ │ │ ├── raw-html.vue │ │ │ └── basic.vue │ │ ├── slider │ │ │ └── vertical-mode.vue │ │ ├── popper │ │ │ └── basic copy.vue │ │ ├── sortable │ │ │ └── basic.vue │ │ ├── scrollbar │ │ │ ├── basic.vue │ │ │ └── horizontal-scroll.vue │ │ └── progress │ │ │ ├── circular-progress-bar.vue │ │ │ └── basic.vue │ ├── public │ │ ├── favicon.ico │ │ └── images │ │ │ ├── logo.png │ │ │ ├── logo-rect.png │ │ │ └── logo-large.png │ ├── zh │ │ ├── component │ │ │ ├── popper.md │ │ │ └── sortable.md │ │ └── guide │ │ │ └── design.md │ ├── vite.config.ts │ ├── index.md │ └── package.json ├── vangle │ ├── dist │ │ └── types │ │ │ ├── components │ │ │ ├── ripple │ │ │ │ ├── src │ │ │ │ │ └── ripple.d.ts │ │ │ │ └── index.d.ts │ │ │ ├── icon │ │ │ │ ├── src │ │ │ │ │ ├── icon.vue.d.ts │ │ │ │ │ └── icon.d.ts │ │ │ │ └── index.d.ts │ │ │ ├── button │ │ │ │ ├── src │ │ │ │ │ ├── button.vue.d.ts │ │ │ │ │ └── button.d.ts │ │ │ │ └── index.d.ts │ │ │ ├── dialog │ │ │ │ ├── src │ │ │ │ │ └── dialog.vue.d.ts │ │ │ │ └── index.d.ts │ │ │ ├── message │ │ │ │ ├── src │ │ │ │ │ ├── message.vue.d.ts │ │ │ │ │ └── message-method.d.ts │ │ │ │ └── index.d.ts │ │ │ ├── overlay │ │ │ │ ├── src │ │ │ │ │ ├── overlay.vue.d.ts │ │ │ │ │ └── overlay.d.ts │ │ │ │ └── index.d.ts │ │ │ ├── slider │ │ │ │ ├── src │ │ │ │ │ └── slider.vue.d.ts │ │ │ │ └── index.d.ts │ │ │ ├── tooltip │ │ │ │ ├── src │ │ │ │ │ ├── tooltip.vue.d.ts │ │ │ │ │ └── tooltip.d.ts │ │ │ │ └── index.d.ts │ │ │ └── index.d.ts │ │ │ └── vangle │ │ │ ├── component.d.ts │ │ │ ├── defaults.d.ts │ │ │ ├── make-installer.d.ts │ │ │ └── index.d.ts │ ├── defaults.ts │ ├── index.ts │ ├── component.ts │ └── make-installer.ts └── eslint-config │ └── package.json ├── scripts └── template │ ├── component │ ├── __test__ │ │ └── component.spec.ts │ ├── src │ │ ├── component.ts.ejs │ │ ├── component.less.ejs │ │ └── component.vue.ejs │ └── index.ts.ejs │ └── doc │ ├── basic.vue.ejs │ └── component.md.ejs ├── pnpm-workspace.yaml ├── play ├── .vscode │ └── extensions.json ├── src │ ├── main.ts │ ├── vite-env.d.ts │ └── assets │ │ └── vue.svg ├── vite.config.ts ├── .gitignore ├── index.html └── package.json ├── .husky ├── pre-commit └── commit-msg ├── .eslintrc.js ├── commitlint.config.js ├── local ├── 01项目搭建 │ └── images │ │ ├── 01.jpg │ │ ├── 02.jpg │ │ ├── banner.jpeg │ │ └── banner.webp ├── 02-组件库文档 │ └── images │ │ ├── home.jpg │ │ ├── banner.jpg │ │ └── button.jpg ├── 07-tree组件 │ └── images │ │ ├── 01.png │ │ ├── 02.gif │ │ ├── 03.png │ │ ├── 04.gif │ │ ├── 05.gif │ │ └── 06.gif └── 03-模拟element文档 │ └── images │ ├── docs.png │ ├── md.jpg │ ├── banner.jpg │ ├── component.jpg │ └── relation.png ├── .gitignore ├── .prettierrc.js ├── typings └── components.d.ts ├── tsconfig.json └── .github └── workflows └── sync-gitee.yml /packages/components/icon/__test__/icon.spec.ts: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/input/__test__/input.spec.ts: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/radio/__test__/radio.spec.ts: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/table/__test__/table.spec.ts: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/tag/__test__/tag.spec.ts: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/tree/__test__/tree.spec.ts: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/dialog/__test__/dialog.spec.ts: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/message/__test__/message.spec.ts: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/overlay/__test__/overlay.spec.ts: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/popper/__test__/popper.spec.ts: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/ripple/__test__/slider.spec.ts: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/select/__test__/select.spec.ts: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/slider/__test__/slider.spec.ts: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/switch/__test__/switch.spec.ts: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/tooltip/__test__/tooltip.spec.ts: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/utils/dom/index.ts: -------------------------------------------------------------------------------- 1 | export * from './event' -------------------------------------------------------------------------------- /scripts/template/component/__test__/component.spec.ts: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/calendar/__test__/calendar.spec.ts: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/checkbox/__test__/checkbox.spec.ts: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/collapse/__test__/collapse.spec.ts: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/progress/__test__/progress.spec.ts: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/scrollbar/__test__/scrollbar.spec.ts: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/sortable/__test__/sortable.spec.ts: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/hooks/index.ts: -------------------------------------------------------------------------------- 1 | export * from './use-draggable' -------------------------------------------------------------------------------- /packages/components/date-picker/__test__/date-picker.spec.ts: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/styles/common.less: -------------------------------------------------------------------------------- 1 | @import './css-variables.less'; -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - 'packages/*' 3 | - 'play' 4 | -------------------------------------------------------------------------------- /play/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["Vue.volar"] 3 | } 4 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npx lint-staged -------------------------------------------------------------------------------- /packages/docs/.vitepress/vitepress/styles/app.scss: -------------------------------------------------------------------------------- 1 | @use "./base"; 2 | @use "./code"; 3 | -------------------------------------------------------------------------------- /scripts/template/component/src/component.ts.ejs: -------------------------------------------------------------------------------- 1 | export const <%= name %>Props = { 2 | } -------------------------------------------------------------------------------- /packages/docs/.vitepress/utils/types.ts: -------------------------------------------------------------------------------- 1 | export const define = (value: T): T => value 2 | -------------------------------------------------------------------------------- /packages/docs/examples/icon/basic.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: ['@vangle/eslint-config'] 4 | } 5 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ['@commitlint/config-conventional'] 3 | } 4 | -------------------------------------------------------------------------------- /local/01项目搭建/images/01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vangleer/vangle/HEAD/local/01项目搭建/images/01.jpg -------------------------------------------------------------------------------- /local/01项目搭建/images/02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vangleer/vangle/HEAD/local/01项目搭建/images/02.jpg -------------------------------------------------------------------------------- /packages/docs/.vitepress/vitepress/styles/var.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | --code-bg-color: #f5f7fa; 3 | } 4 | -------------------------------------------------------------------------------- /packages/utils/types.ts: -------------------------------------------------------------------------------- 1 | export const isUndefined = (val: any): val is undefined => val === undefined -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npx --no-install commitlint --edit $1 -------------------------------------------------------------------------------- /local/01项目搭建/images/banner.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vangleer/vangle/HEAD/local/01项目搭建/images/banner.jpeg -------------------------------------------------------------------------------- /local/01项目搭建/images/banner.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vangleer/vangle/HEAD/local/01项目搭建/images/banner.webp -------------------------------------------------------------------------------- /local/02-组件库文档/images/home.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vangleer/vangle/HEAD/local/02-组件库文档/images/home.jpg -------------------------------------------------------------------------------- /local/07-tree组件/images/01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vangleer/vangle/HEAD/local/07-tree组件/images/01.png -------------------------------------------------------------------------------- /local/07-tree组件/images/02.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vangleer/vangle/HEAD/local/07-tree组件/images/02.gif -------------------------------------------------------------------------------- /local/07-tree组件/images/03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vangleer/vangle/HEAD/local/07-tree组件/images/03.png -------------------------------------------------------------------------------- /local/07-tree组件/images/04.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vangleer/vangle/HEAD/local/07-tree组件/images/04.gif -------------------------------------------------------------------------------- /local/07-tree组件/images/05.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vangleer/vangle/HEAD/local/07-tree组件/images/05.gif -------------------------------------------------------------------------------- /local/07-tree组件/images/06.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vangleer/vangle/HEAD/local/07-tree组件/images/06.gif -------------------------------------------------------------------------------- /scripts/template/component/src/component.less.ejs: -------------------------------------------------------------------------------- 1 | .van-<%= fileName %> { 2 | color: var(--color-text); 3 | } -------------------------------------------------------------------------------- /local/02-组件库文档/images/banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vangleer/vangle/HEAD/local/02-组件库文档/images/banner.jpg -------------------------------------------------------------------------------- /local/02-组件库文档/images/button.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vangleer/vangle/HEAD/local/02-组件库文档/images/button.jpg -------------------------------------------------------------------------------- /packages/docs/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vangleer/vangle/HEAD/packages/docs/public/favicon.ico -------------------------------------------------------------------------------- /local/03-模拟element文档/images/docs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vangleer/vangle/HEAD/local/03-模拟element文档/images/docs.png -------------------------------------------------------------------------------- /local/03-模拟element文档/images/md.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vangleer/vangle/HEAD/local/03-模拟element文档/images/md.jpg -------------------------------------------------------------------------------- /packages/docs/public/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vangleer/vangle/HEAD/packages/docs/public/images/logo.png -------------------------------------------------------------------------------- /play/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './App.vue' 3 | 4 | createApp(App).mount('#app') 5 | -------------------------------------------------------------------------------- /local/03-模拟element文档/images/banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vangleer/vangle/HEAD/local/03-模拟element文档/images/banner.jpg -------------------------------------------------------------------------------- /local/03-模拟element文档/images/component.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vangleer/vangle/HEAD/local/03-模拟element文档/images/component.jpg -------------------------------------------------------------------------------- /local/03-模拟element文档/images/relation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vangleer/vangle/HEAD/local/03-模拟element文档/images/relation.png -------------------------------------------------------------------------------- /packages/components/sortable/src/sortable.ts: -------------------------------------------------------------------------------- 1 | export const SortableProps = { 2 | ghostClass: { 3 | type: String 4 | } 5 | } -------------------------------------------------------------------------------- /packages/components/tooltip/src/tooltip.less: -------------------------------------------------------------------------------- 1 | .van-tooltip-fade-enter-from, 2 | .van-tooltip-fade-leave-to { 3 | opacity: 0; 4 | } -------------------------------------------------------------------------------- /packages/docs/.vitepress/vitepress/styles/base.scss: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | -------------------------------------------------------------------------------- /packages/docs/public/images/logo-rect.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vangleer/vangle/HEAD/packages/docs/public/images/logo-rect.png -------------------------------------------------------------------------------- /packages/docs/public/images/logo-large.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vangleer/vangle/HEAD/packages/docs/public/images/logo-large.png -------------------------------------------------------------------------------- /packages/vangle/dist/types/components/ripple/src/ripple.d.ts: -------------------------------------------------------------------------------- 1 | import { Directive } from 'vue'; 2 | export declare const ripple: Directive; 3 | -------------------------------------------------------------------------------- /scripts/template/doc/basic.vue.ejs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | dist 2 | cache 3 | .DS_Store 4 | node_modules 5 | coverage 6 | temp 7 | explorations 8 | TODOs.md 9 | *.log 10 | .idea 11 | 12 | -------------------------------------------------------------------------------- /packages/vangle/dist/types/components/icon/src/icon.vue.d.ts: -------------------------------------------------------------------------------- 1 | declare const _sfc_main: (props: Record & {}) => any; 2 | export default _sfc_main; 3 | -------------------------------------------------------------------------------- /packages/vangle/dist/types/vangle/component.d.ts: -------------------------------------------------------------------------------- 1 | import type { Plugin } from 'vue'; 2 | declare const _default: Plugin[]; 3 | export default _default; 4 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | semi: false, 3 | singleQuote: true, 4 | printWidth: 80, 5 | trailingComma: 'none', 6 | arrowParens: 'avoid' 7 | } 8 | -------------------------------------------------------------------------------- /packages/vangle/dist/types/components/button/src/button.vue.d.ts: -------------------------------------------------------------------------------- 1 | declare const _sfc_main: (props: Record & {}) => any; 2 | export default _sfc_main; 3 | -------------------------------------------------------------------------------- /packages/vangle/dist/types/components/dialog/src/dialog.vue.d.ts: -------------------------------------------------------------------------------- 1 | declare const _sfc_main: (props: Record & {}) => any; 2 | export default _sfc_main; 3 | -------------------------------------------------------------------------------- /packages/vangle/dist/types/components/message/src/message.vue.d.ts: -------------------------------------------------------------------------------- 1 | declare const _sfc_main: (props: Record & {}) => any; 2 | export default _sfc_main; 3 | -------------------------------------------------------------------------------- /packages/vangle/dist/types/components/overlay/src/overlay.vue.d.ts: -------------------------------------------------------------------------------- 1 | declare const _sfc_main: (props: Record & {}) => any; 2 | export default _sfc_main; 3 | -------------------------------------------------------------------------------- /packages/vangle/dist/types/components/slider/src/slider.vue.d.ts: -------------------------------------------------------------------------------- 1 | declare const _sfc_main: (props: Record & {}) => any; 2 | export default _sfc_main; 3 | -------------------------------------------------------------------------------- /packages/vangle/dist/types/components/tooltip/src/tooltip.vue.d.ts: -------------------------------------------------------------------------------- 1 | declare const _sfc_main: (props: Record & {}) => any; 2 | export default _sfc_main; 3 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/caret-top.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/vangle/defaults.ts: -------------------------------------------------------------------------------- 1 | import { makeInstaller } from './make-installer' 2 | import Components from './component' 3 | 4 | export default makeInstaller(Components) 5 | -------------------------------------------------------------------------------- /packages/vangle/dist/types/vangle/defaults.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: { 2 | install: (app: import("vue").App) => void; 3 | }; 4 | export default _default; 5 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/caret-bottom.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/caret-left.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/caret-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/sortable/src/sortable.less: -------------------------------------------------------------------------------- 1 | .van-sortable { 2 | color: var(--color-text); 3 | position: relative; 4 | .dragging { 5 | cursor: grab; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/vangle/index.ts: -------------------------------------------------------------------------------- 1 | export * from '../components' 2 | 3 | import installer from './defaults' 4 | export const install = installer.install 5 | export default installer 6 | -------------------------------------------------------------------------------- /packages/docs/examples/index.ts: -------------------------------------------------------------------------------- 1 | export const demos = import.meta.glob('./**/*.vue', { eager: true }) 2 | export const sourceCode = import.meta.glob('./**/*.vue', { eager: true, as: 'raw' }) -------------------------------------------------------------------------------- /packages/components/icon/src/svg/flag.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/minus.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/utils/index.ts: -------------------------------------------------------------------------------- 1 | export * from './dom' 2 | export * from './install' 3 | export * from './components' 4 | export * from './types' 5 | export * from './style' 6 | export * from './common' 7 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/semi-select.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/d-caret.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/home-filled.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/platform.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/vangle/dist/types/vangle/make-installer.d.ts: -------------------------------------------------------------------------------- 1 | import type { App, Plugin } from 'vue'; 2 | export declare function makeInstaller(components?: Plugin[]): { 3 | install: (app: App) => void; 4 | }; 5 | -------------------------------------------------------------------------------- /packages/docs/examples/calendar/basic.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/histogram.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/management.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/table/src/utils.ts: -------------------------------------------------------------------------------- 1 | let tableIndex = 1 2 | let columnIndex = 1 3 | 4 | export const tableId = () => { 5 | return tableIndex++ 6 | } 7 | export const columnId = () => { 8 | return columnIndex++ 9 | } -------------------------------------------------------------------------------- /packages/components/tag/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/tag' 2 | import { withInstall } from '@vangle/utils' 3 | import Tag from './src/tag.vue' 4 | 5 | export const VanTag = withInstall(Tag) 6 | 7 | export default VanTag -------------------------------------------------------------------------------- /packages/vangle/dist/types/components/message/src/message-method.d.ts: -------------------------------------------------------------------------------- 1 | import { Message } from './message'; 2 | export declare function closeAll(): void; 3 | declare const _default: Message; 4 | export default _default; 5 | -------------------------------------------------------------------------------- /packages/vangle/dist/types/components/ripple/index.d.ts: -------------------------------------------------------------------------------- 1 | import { App } from 'vue'; 2 | export * from './src/ripple'; 3 | declare const _default: { 4 | install(app: App): void; 5 | }; 6 | export default _default; 7 | -------------------------------------------------------------------------------- /packages/vangle/dist/types/vangle/index.d.ts: -------------------------------------------------------------------------------- 1 | export * from '../components'; 2 | import installer from './defaults'; 3 | export declare const install: (app: import("vue").App) => void; 4 | export default installer; 5 | -------------------------------------------------------------------------------- /packages/components/icon/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/icon' 2 | import { withInstall } from '@vangle/utils' 3 | import Icon from './src/icon.vue' 4 | 5 | export const VanIcon = withInstall(Icon) 6 | 7 | export default VanIcon -------------------------------------------------------------------------------- /packages/components/tree/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/tree' 2 | import { withInstall } from '@vangle/utils' 3 | import Tree from './src/tree.vue' 4 | 5 | export const VanTree = withInstall(Tree) 6 | 7 | export default VanTree -------------------------------------------------------------------------------- /packages/docs/examples/input/basic.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /packages/components/input/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/input' 2 | import { withInstall } from '@vangle/utils' 3 | import Input from './src/input.vue' 4 | 5 | export const VanInput = withInstall(Input) 6 | 7 | export default VanInput -------------------------------------------------------------------------------- /packages/docs/.vitepress/vitepress/index.ts: -------------------------------------------------------------------------------- 1 | import Demo from './component/Demo.vue' 2 | import IconList from './component/IconList.vue' 3 | import './styles/app.scss' 4 | export const globals = [['Demo', Demo], ['IconList', IconList]] 5 | -------------------------------------------------------------------------------- /packages/hooks/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@vangle/hooks", 3 | "main": "index.ts", 4 | "module": "index.ts", 5 | "keywords": [], 6 | "license": "MIT", 7 | "peerDependencies": { 8 | "vue": "^3.2.0" 9 | } 10 | } -------------------------------------------------------------------------------- /play/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | declare module '*.vue' { 4 | import type { DefineComponent } from 'vue' 5 | const component: DefineComponent<{}, {}, any> 6 | export default component 7 | } 8 | -------------------------------------------------------------------------------- /typings/components.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | declare module '*.vue' { 4 | import type { DefineComponent } from 'vue' 5 | const component: DefineComponent<{}, {}, any> 6 | export default component 7 | } 8 | -------------------------------------------------------------------------------- /packages/components/dialog/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/dialog' 2 | import { withInstall } from '@vangle/utils' 3 | import Dialog from './src/dialog.vue' 4 | 5 | export const VanDialog = withInstall(Dialog) 6 | 7 | export default VanDialog -------------------------------------------------------------------------------- /packages/components/icon/src/svg/briefcase.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/fold.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/popper/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/popper' 2 | import { withInstall } from '@vangle/utils' 3 | import Popper from './src/popper.vue' 4 | 5 | export const VanPopper = withInstall(Popper) 6 | 7 | export default VanPopper -------------------------------------------------------------------------------- /packages/components/slider/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/slider' 2 | import { withInstall } from '@vangle/utils' 3 | import Slider from './src/slider.vue' 4 | 5 | export const VanSlider = withInstall(Slider) 6 | 7 | export default VanSlider -------------------------------------------------------------------------------- /packages/components/switch/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/switch' 2 | import { withInstall } from '@vangle/utils' 3 | import Switch from './src/switch.vue' 4 | 5 | export const VanSwitch = withInstall(Switch) 6 | 7 | export default VanSwitch -------------------------------------------------------------------------------- /packages/components/tooltip/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/tooltip' 2 | import { withInstall } from '@vangle/utils' 3 | import Tooltip from './src/tooltip.vue' 4 | export const VanTooltip = withInstall(Tooltip) 5 | 6 | export default VanTooltip -------------------------------------------------------------------------------- /packages/utils/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@vangle/utils", 3 | "main": "index.ts", 4 | "module": "index.ts", 5 | "keywords": [], 6 | "license": "MIT", 7 | "peerDependencies": { 8 | "vue": "^3.2.0" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /packages/vangle/dist/types/components/message/index.d.ts: -------------------------------------------------------------------------------- 1 | export * from './src/message'; 2 | export declare const VanMessage: import("@vangle/utils").SFCInstallWithContext; 3 | export default VanMessage; 4 | -------------------------------------------------------------------------------- /packages/components/button/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/button' 2 | import { withInstall } from '@vangle/utils' 3 | import Button from './src/button.vue' 4 | 5 | export const VanButton = withInstall(Button) 6 | 7 | export default VanButton 8 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/expand.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/overlay/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/overlay' 2 | import { withInstall } from '@vangle/utils' 3 | import Overlay from './src/overlay.vue' 4 | 5 | export const VanOverlay = withInstall(Overlay) 6 | 7 | export default VanOverlay -------------------------------------------------------------------------------- /packages/docs/examples/input/disabled.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 9 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/list.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/plus.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/promotion.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/docs/examples/input/clearable.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 9 | -------------------------------------------------------------------------------- /packages/docs/examples/tooltip/rich-content.vue: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /packages/docs/zh/component/popper.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Popper 3 | lang: en-US 4 | --- 5 | 6 | # Popper 7 | 8 | Commonly used Popper. 9 | 10 | ## Basic usage 11 | 12 | :::demo description of Popper 13 | 14 | popper/basic 15 | 16 | ::: 17 | -------------------------------------------------------------------------------- /packages/vangle/dist/types/components/icon/index.d.ts: -------------------------------------------------------------------------------- 1 | export * from './src/icon'; 2 | export declare const VanIcon: import("@vangle/utils").SFCWithInstall<(props: Record & {}) => any> & Record; 3 | export default VanIcon; 4 | -------------------------------------------------------------------------------- /packages/components/calendar/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/calendar' 2 | import { withInstall } from '@vangle/utils' 3 | import Calendar from './src/calendar.vue' 4 | 5 | export const VanCalendar = withInstall(Calendar) 6 | 7 | export default VanCalendar -------------------------------------------------------------------------------- /packages/components/progress/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/progress' 2 | import { withInstall } from '@vangle/utils' 3 | import Progress from './src/progress.vue' 4 | 5 | export const VanProgress = withInstall(Progress) 6 | 7 | export default VanProgress -------------------------------------------------------------------------------- /packages/components/sortable/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/sortable' 2 | import { withInstall } from '@vangle/utils' 3 | import Sortable from './src/sortable.vue' 4 | 5 | export const VanSortable = withInstall(Sortable) 6 | 7 | export default VanSortable -------------------------------------------------------------------------------- /packages/components/icon/src/svg/check.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/sort-down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/sort-up.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/scrollbar/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/scrollbar' 2 | import { withInstall } from '@vangle/utils' 3 | import Scrollbar from './src/scrollbar.vue' 4 | 5 | export const VanScrollbar = withInstall(Scrollbar) 6 | 7 | export default VanScrollbar -------------------------------------------------------------------------------- /packages/docs/examples/tooltip/html-content.vue: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /packages/docs/zh/component/sortable.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Sortable 3 | lang: en-US 4 | --- 5 | 6 | # Sortable 7 | 8 | Commonly used Sortable. 9 | 10 | ## Basic usage 11 | 12 | :::demo description of Sortable 13 | 14 | sortable/basic 15 | 16 | ::: 17 | -------------------------------------------------------------------------------- /packages/vangle/dist/types/components/button/index.d.ts: -------------------------------------------------------------------------------- 1 | export * from './src/button'; 2 | export declare const VanButton: import("@vangle/utils").SFCWithInstall<(props: Record & {}) => any> & Record; 3 | export default VanButton; 4 | -------------------------------------------------------------------------------- /packages/vangle/dist/types/components/dialog/index.d.ts: -------------------------------------------------------------------------------- 1 | export * from './src/dialog'; 2 | export declare const VanDialog: import("@vangle/utils").SFCWithInstall<(props: Record & {}) => any> & Record; 3 | export default VanDialog; 4 | -------------------------------------------------------------------------------- /packages/vangle/dist/types/components/overlay/index.d.ts: -------------------------------------------------------------------------------- 1 | export * from './src/overlay'; 2 | export declare const VanOverlay: import("@vangle/utils").SFCWithInstall<(props: Record & {}) => any> & Record; 3 | export default VanOverlay; 4 | -------------------------------------------------------------------------------- /packages/vangle/dist/types/components/slider/index.d.ts: -------------------------------------------------------------------------------- 1 | export * from './src/slider'; 2 | export declare const VanSlider: import("@vangle/utils").SFCWithInstall<(props: Record & {}) => any> & Record; 3 | export default VanSlider; 4 | -------------------------------------------------------------------------------- /packages/vangle/dist/types/components/tooltip/index.d.ts: -------------------------------------------------------------------------------- 1 | export * from './src/tooltip'; 2 | export declare const VanTooltip: import("@vangle/utils").SFCWithInstall<(props: Record & {}) => any> & Record; 3 | export default VanTooltip; 4 | -------------------------------------------------------------------------------- /packages/components/ripple/index.ts: -------------------------------------------------------------------------------- 1 | import { App } from 'vue' 2 | export * from './src/ripple' 3 | import './src/ripple.less' 4 | import { ripple } from './src/ripple' 5 | export default { 6 | install(app: App) { 7 | app.directive('ripple', ripple) 8 | } 9 | } -------------------------------------------------------------------------------- /packages/components/date-picker/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/date-picker' 2 | import { withInstall } from '@vangle/utils' 3 | import DatePicker from './src/date-picker.vue' 4 | 5 | export const VanDatePicker = withInstall(DatePicker) 6 | 7 | export default VanDatePicker -------------------------------------------------------------------------------- /packages/components/icon/src/svg/brush-filled.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/stamp.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/ticket.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/vangle/component.ts: -------------------------------------------------------------------------------- 1 | import type { Plugin } from 'vue' 2 | import { VanButton, VanIcon, VanDialog, VanMessage, VanSlider, VanTooltip } from '@vangle/components' 3 | 4 | export default [VanButton, VanIcon, VanDialog, VanMessage, VanSlider, VanTooltip] as Plugin[] 5 | -------------------------------------------------------------------------------- /packages/components/message/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/message' 2 | import { withInstallFunction } from '@vangle/utils' 3 | import Message from './src/message-method' 4 | 5 | export const VanMessage = withInstallFunction(Message, '$message') 6 | 7 | export default VanMessage -------------------------------------------------------------------------------- /packages/components/overlay/src/overlay.less: -------------------------------------------------------------------------------- 1 | .van-overlay { 2 | position: fixed; 3 | top: 0; 4 | right: 0; 5 | bottom: 0; 6 | left: 0; 7 | z-index: 2000; 8 | height: 100%; 9 | background-color: var(--van-overlay-color-lighter); 10 | overflow: auto; 11 | } -------------------------------------------------------------------------------- /packages/docs/examples/icon/color.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /scripts/template/component/index.ts.ejs: -------------------------------------------------------------------------------- 1 | export * from './src/<%= fileName %>' 2 | import { withInstall } from '@vangle/utils' 3 | import <%= name %> from './src/<%= fileName %>.vue' 4 | 5 | export const Van<%= name %> = withInstall(<%= name %>) 6 | 7 | export default Van<%= name %> -------------------------------------------------------------------------------- /scripts/template/doc/component.md.ejs: -------------------------------------------------------------------------------- 1 | --- 2 | title: <%= name %> 3 | lang: en-US 4 | --- 5 | 6 | # <%= name %> 7 | 8 | Commonly used <%= name %>. 9 | 10 | ## Basic usage 11 | 12 | :::demo description of <%= name %> 13 | 14 | <%= fileName %>/basic 15 | 16 | ::: 17 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/goods-filled.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/select.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/wallet-filled.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /play/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import vue from '@vitejs/plugin-vue' 3 | import DefineOptions from 'unplugin-vue-define-options/vite' 4 | 5 | // https://vitejs.dev/config/ 6 | export default defineConfig({ 7 | plugins: [vue(), DefineOptions()] 8 | }) 9 | -------------------------------------------------------------------------------- /packages/components/collapse-transition/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@vangle/utils' 2 | import CollapseTransition from './src/collapse-transition.vue' 3 | 4 | export const VanCollapseTransition = withInstall(CollapseTransition) 5 | 6 | export default VanCollapseTransition 7 | 8 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/more-filled.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/avatar.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/remove-filled.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/search.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/download.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/files.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/umbrella.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/upload.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/user-filled.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/folder.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/key.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/arrow-down-bold.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/arrow-left-bold.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/arrow-right-bold.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/arrow-up-bold.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/checked.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/comment.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/magnet.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/remove.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/sunset.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/vangle/dist/types/components/icon/src/icon.d.ts: -------------------------------------------------------------------------------- 1 | export declare const svgs: any; 2 | export declare const IconProps: { 3 | name: StringConstructor; 4 | color: StringConstructor; 5 | size: (StringConstructor | NumberConstructor)[]; 6 | }; 7 | export declare const getIcon: (name?: string) => any; 8 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/crop.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/docs/examples/switch/disabled.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 12 | -------------------------------------------------------------------------------- /packages/docs/examples/tag/basic.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/cloudy.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/document-remove.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/select/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/select' 2 | import { withInstall } from '@vangle/utils' 3 | import Select from './src/select.vue' 4 | import Option from './src/option.vue' 5 | 6 | export const VanSelect = withInstall(Select) 7 | export const VanOption = withInstall(Option) 8 | 9 | export default VanSelect -------------------------------------------------------------------------------- /packages/docs/examples/input/password.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 14 | -------------------------------------------------------------------------------- /packages/docs/examples/switch/loading.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 12 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/folder-remove.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/share.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/tickets.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/docs/.vitepress/i18n/pages/sidebar.json: -------------------------------------------------------------------------------- 1 | { 2 | "zh": [ 3 | { 4 | "text": "指南", 5 | "link": "/guide/design", 6 | "activeMatch": "/guide/" 7 | }, 8 | { 9 | "text": "组件", 10 | "link": "/component/button", 11 | "activeMatch": "/component/" 12 | } 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/switch-button.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/top-left.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/radio/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/radio' 2 | import { withInstall } from '@vangle/utils' 3 | import Radio from './src/radio.vue' 4 | import RadioGroup from './src/radio-group.vue' 5 | 6 | export const VanRadio = withInstall(Radio) 7 | export const VanRadioGroup = withInstall(RadioGroup) 8 | 9 | export default VanRadio -------------------------------------------------------------------------------- /packages/components/icon/src/svg/bottom-left.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/bottom-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/top-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/trend-charts.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/table/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/table' 2 | import { withInstall } from '@vangle/utils' 3 | import Table from './src/table.vue' 4 | import TableColumn from './src/table-column.vue' 5 | 6 | export const VanTable = withInstall(Table) 7 | export const VanTableColumn = withInstall(TableColumn) 8 | 9 | export default VanTable -------------------------------------------------------------------------------- /packages/components/icon/src/svg/bell-filled.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/dish.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/warning.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/zoom-out.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/docs/examples/icon/size.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/utils/common.ts: -------------------------------------------------------------------------------- 1 | export const isNumber = (val: any): val is number => typeof val === 'number' 2 | export const isString = (val: any): val is string => typeof val === 'string' 3 | export const isFunction = (val: any): val is Function => typeof val === 'function' 4 | export const hasOwn = (val: any, key: string) => Object.hasOwn(val, key) 5 | -------------------------------------------------------------------------------- /packages/components/icon/src/icon.ts: -------------------------------------------------------------------------------- 1 | export const svgs = import.meta.glob('./svg/*.svg', { eager: true, as: 'raw' }) 2 | export const IconProps = { 3 | name: String, 4 | color: String, 5 | size: [String, Number] 6 | } 7 | 8 | export const getIcon = (name?: string) => { 9 | if (!name) return '' 10 | return svgs[`./svg/${name}.svg`] 11 | } -------------------------------------------------------------------------------- /packages/components/icon/src/svg/arrow-down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/arrow-up.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/back.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/circle-plus-filled.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/grid.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/house.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/moon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/video-pause.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/arrow-left.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/arrow-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/document-add.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/folder-add.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/video-camera.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/docs/.vitepress/i18n/pages/guide.json: -------------------------------------------------------------------------------- 1 | { 2 | "zh": { 3 | "intro": { 4 | "text": "基础", 5 | "children": [ 6 | { 7 | "text": "设计", 8 | "link": "/design" 9 | }, 10 | { 11 | "text": "开发指南", 12 | "link": "/dev-guide" 13 | } 14 | ] 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /packages/docs/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import vueJsx from '@vitejs/plugin-vue-jsx' 3 | import DefineOptions from 'unplugin-vue-define-options/vite' 4 | 5 | // https://vitejs.dev/config/ 6 | export default defineConfig({ 7 | plugins: [vueJsx(), DefineOptions()], 8 | server: { 9 | port: 3002 10 | } 11 | }) 12 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/position.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/shop.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/success-filled.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/docs/examples/checkbox/disabled.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 11 | -------------------------------------------------------------------------------- /packages/components/collapse/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/collapse' 2 | import { withInstall } from '@vangle/utils' 3 | import Collapse from './src/collapse.vue' 4 | import CollapseItem from './src/collapse-item.vue' 5 | 6 | export const VanCollapse = withInstall(Collapse) 7 | export const VanCollapseItem = withInstall(CollapseItem) 8 | 9 | export default VanCollapse -------------------------------------------------------------------------------- /packages/components/icon/src/svg/bottom.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/circle-check-filled.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/document.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/docs/examples/radio/basic.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 13 | -------------------------------------------------------------------------------- /packages/components/checkbox/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/checkbox' 2 | import { withInstall } from '@vangle/utils' 3 | import Checkbox from './src/checkbox.vue' 4 | import CheckboxGroup from './src/checkbox-group.vue' 5 | 6 | export const VanCheckbox = withInstall(Checkbox) 7 | export const VanCheckboxGroup = withInstall(CheckboxGroup) 8 | 9 | export default VanCheckbox -------------------------------------------------------------------------------- /packages/components/icon/src/svg/chat-square.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/refresh-left.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/refresh-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/smoking.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/utils/style.ts: -------------------------------------------------------------------------------- 1 | import { isString, isNumber } from './common' 2 | export function addUnit(value: string | number, defaultUnit = 'px') { 3 | if (!value) return '' 4 | if (isString(value)) { 5 | return `${value}`.indexOf(defaultUnit) === -1 ? `${value}${defaultUnit}` : value 6 | } else if (isNumber(value)) { 7 | return `${value}${defaultUnit}` 8 | } 9 | } -------------------------------------------------------------------------------- /packages/components/icon/src/svg/collection-tag.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/user.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/warning-filled.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/close-bold.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/failed.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /play/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/takeaway-box.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/zoom-in.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/close.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/document-checked.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/iphone.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/more.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/stopwatch.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/top.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/docs/examples/radio/disabled.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 13 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/circle-plus.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/filter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/monitor.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/refrigerator.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/docs/examples/button/custom.vue: -------------------------------------------------------------------------------- 1 | 12 | -------------------------------------------------------------------------------- /packages/docs/examples/button/size.vue: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/circle-check.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/coordinate.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/document-copy.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/female.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/folder-checked.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/ice-cream-square.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/sort.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/video-play.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/watermelon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/docs/examples/switch/basic.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 16 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/headset.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/mug.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/docs/examples/radio/radio-button-group.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/clock.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/data-board.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/goblet.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/docs/examples/message/raw-html.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 15 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/coffee-cup.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/pie-chart.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/star-filled.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/folder-opened.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/goblet-square.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/phone-filled.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/circle-close-filled.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/operation.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /play/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + Vue + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/film.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/notification.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/shopping-bag.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/shopping-cart.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/docs/examples/calendar/customize.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 17 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/bell.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/camera-filled.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/cellphone.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/edit-pen.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/picture-filled.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/finished.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/refresh.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/vangle/make-installer.ts: -------------------------------------------------------------------------------- 1 | import type { App, Plugin } from 'vue' 2 | 3 | const INSTALLED_KEY = Symbol('INSTALLED_KEY') 4 | 5 | export function makeInstaller(components: Plugin[] = []) { 6 | const install = (app: App) => { 7 | if ((app as any)[INSTALLED_KEY]) return 8 | ; (app as any)[INSTALLED_KEY] = true 9 | components.forEach(comp => app.use(comp)) 10 | } 11 | 12 | return { 13 | install 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/location-filled.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/upload-filled.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/overlay/src/overlay.ts: -------------------------------------------------------------------------------- 1 | 2 | import { PropType } from 'vue' 3 | export const OverlayProps = { 4 | mask: { 5 | type: Boolean, 6 | default: true, 7 | }, 8 | customMaskEvent: { 9 | type: Boolean, 10 | default: false, 11 | }, 12 | overlayClass: { 13 | type: [String, Array, Object] 14 | }, 15 | zIndex: { 16 | type: [String, Number] as PropType, 17 | default: 2000 18 | } 19 | } -------------------------------------------------------------------------------- /packages/components/icon/src/svg/goblet-full.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/location.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/message.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/paperclip.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/delete-filled.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/full-screen.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/popper/src/use-nowrap.ts: -------------------------------------------------------------------------------- 1 | import { computed, getCurrentInstance } from 'vue' 2 | export const useNowrap = () => { 3 | const ctx = getCurrentInstance() 4 | const nowrap = computed(() => { 5 | if (ctx?.slots.default) { 6 | const defaults = ctx?.slots.default() 7 | if (!defaults[0] || defaults[0].shapeFlag === 8) { 8 | return false 9 | } 10 | return true 11 | } 12 | }) 13 | 14 | return nowrap 15 | } -------------------------------------------------------------------------------- /packages/components/icon/src/svg/dish-dot.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/no-smoking.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/switch.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/delete.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/folder-delete.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/camera.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/document-delete.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/wallet.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/timer.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/video-camera-filled.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/wind-power.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /scripts/template/component/src/component.vue.ejs: -------------------------------------------------------------------------------- 1 | 3 | 4 | 15 | 16 | 19 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/circle-close.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/opportunity.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/tooltip/src/tooltip.ts: -------------------------------------------------------------------------------- 1 | import { PropType } from 'vue' 2 | export const TooltipProps = { 3 | content: String, 4 | placement: { 5 | type: String, 6 | default: 'bottom', 7 | }, 8 | effect: { 9 | type: String as PropType<'light' | 'dark'>, 10 | default: 'dark' 11 | }, 12 | disabled: { 13 | type: Boolean, 14 | }, 15 | rawContent: Boolean, 16 | transitionName: { 17 | type: String, 18 | default: 'van-popper-fade' 19 | } 20 | } -------------------------------------------------------------------------------- /packages/components/icon/src/svg/microphone.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/mostly-cloudy.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/watch.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@vangle/components", 3 | "version": "1.1.2", 4 | "description": "all components are settled here", 5 | "main": "index.ts", 6 | "module": "index.ts", 7 | "unpkg": "index.js", 8 | "jsdelivr": "index.js", 9 | "scripts": {}, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "private": true, 14 | "peerDependencies": { 15 | "vue": "^3.2.0" 16 | }, 17 | "types": "types/components/index.d.ts" 18 | } 19 | -------------------------------------------------------------------------------- /packages/docs/examples/switch/extended-value-types.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 17 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/message-box.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/open.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/chat-line-square.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/data-line.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/help-filled.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/price-tag.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/reading-lamp.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/turn-off.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/view.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/tag/src/tag.ts: -------------------------------------------------------------------------------- 1 | import { PropType } from 'vue' 2 | export type TagType = 'primary' | 'info' | 'success' | 'warning' | 'danger' | '' 3 | type TagEffect = 'dark' | 'light' | 'plain' 4 | export const TagProps = { 5 | type: { 6 | type: String as PropType, 7 | default: 'primary' 8 | }, 9 | closable: Boolean, 10 | round: Boolean, 11 | disableTransitions: Boolean, 12 | effect: { 13 | type: String as PropType, 14 | default: 'light' 15 | } 16 | } -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": ".", 4 | "target": "es2016", 5 | "sourceMap": false, 6 | "module": "esnext", 7 | "esModuleInterop": true, 8 | "strict": true, 9 | "allowJs": true, 10 | "jsx": "preserve", 11 | "lib": ["esnext", "dom"], 12 | "types": ["node", "unplugin-vue-define-options"], 13 | "rootDir": ".", 14 | "moduleResolution": "node", 15 | "paths": { 16 | "@valgle/*": ["packages/*"] 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/notebook.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/partly-cloudy.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/postcard.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/docs/examples/slider/vertical-mode.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 22 | -------------------------------------------------------------------------------- /play/src/assets/vue.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/delete-location.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/magic-stick.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/reading.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/suitcase.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/toilet-paper.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/compass.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/school.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/discount.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/scissor.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/aim.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/collection.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/copy-document.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/goods.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/lock.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/lollipop.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/menu.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/warn-triangle-filled.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/docs/examples/popper/basic copy.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/odometer.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/sunrise.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/d-arrow-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/ice-cream.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/unlock.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/docs/examples/checkbox/grouping.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 16 | -------------------------------------------------------------------------------- /packages/docs/examples/sortable/basic.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/bowl.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/picture-rounded.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/chat-round.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/data-analysis.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/location-information.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/knife-fork.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/milk-tea.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/moon-night.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/docs/examples/scrollbar/basic.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 21 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/add-location.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/map-location.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/mic.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/chat-dot-square.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/d-arrow-left.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/edit.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/service.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/docs/examples/tag/removable.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 24 | -------------------------------------------------------------------------------- /packages/vangle/dist/types/components/overlay/src/overlay.d.ts: -------------------------------------------------------------------------------- 1 | import { PropType } from 'vue'; 2 | export declare const OverlayProps: { 3 | mask: { 4 | type: BooleanConstructor; 5 | default: boolean; 6 | }; 7 | customMaskEvent: { 8 | type: BooleanConstructor; 9 | default: boolean; 10 | }; 11 | overlayClass: { 12 | type: (StringConstructor | ObjectConstructor | ArrayConstructor)[]; 13 | }; 14 | zIndex: { 15 | type: PropType; 16 | default: number; 17 | }; 18 | }; 19 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/male.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/office-building.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/tools.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/docs/.vitepress/config/nav.ts: -------------------------------------------------------------------------------- 1 | import navLocale from '../i18n/pages/sidebar.json' 2 | 3 | // Mapping the first sub link to the nav link to avoid 404 error. 4 | 5 | function getNav() { 6 | return Object.entries(navLocale).map(([lang, locales]) => { 7 | const item: { 8 | link: string 9 | text: string 10 | activeMatch?: string 11 | }[] = Object.values(locales).map(item => ({ 12 | ...item, 13 | link: `${lang}${item.link}` 14 | })) 15 | 16 | return [lang, item] 17 | })[0][1] 18 | } 19 | 20 | export const nav = getNav() 21 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/shopping-cart-full.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/collapse/src/collapse.ts: -------------------------------------------------------------------------------- 1 | import { InjectionKey, Ref } from 'vue' 2 | export const CollapseProps = { 3 | modelValue: { 4 | type: [String, Array], 5 | default: () => ([]) 6 | }, 7 | accordion: { 8 | type: Boolean 9 | } 10 | } 11 | 12 | export type CollapseActiveName = string | number 13 | 14 | export interface CollapseContext { 15 | activeNames: Ref 16 | handleItemClick: (name: CollapseActiveName) => void 17 | } 18 | 19 | export const collapseContextKey: InjectionKey = 20 | Symbol('collapseContextKey') 21 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/burger.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/picture.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /play/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "play", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vue-tsc --noEmit && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "@vangle/components": "workspace:^1.1.0", 13 | "vangle": "workspace:^1.0.17", 14 | "vue": "^3.2.37" 15 | }, 16 | "devDependencies": { 17 | "@vitejs/plugin-vue": "^3.0.0", 18 | "less": "^4.1.3", 19 | "typescript": "^4.6.4", 20 | "vite": "^3.0.0", 21 | "vue-tsc": "^0.38.4" 22 | } 23 | } -------------------------------------------------------------------------------- /packages/components/icon/src/svg/box.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/coffee.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/first-aid-kit.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/fork-spoon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/present.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/ship.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/vangle/dist/types/components/tooltip/src/tooltip.d.ts: -------------------------------------------------------------------------------- 1 | import { PropType } from 'vue'; 2 | export declare const TooltipProps: { 3 | content: StringConstructor; 4 | placement: { 5 | type: StringConstructor; 6 | default: string; 7 | }; 8 | effect: { 9 | type: PropType<"light" | "dark">; 10 | default: string; 11 | }; 12 | disabled: { 13 | type: BooleanConstructor; 14 | }; 15 | rawContent: BooleanConstructor; 16 | transitionName: { 17 | type: StringConstructor; 18 | default: string; 19 | }; 20 | }; 21 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/place.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/docs/examples/message/basic.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 22 | -------------------------------------------------------------------------------- /.github/workflows/sync-gitee.yml: -------------------------------------------------------------------------------- 1 | name: Sync to Gitee 2 | 3 | on: 4 | push: 5 | branches: [main, dev, build, gh-pages] 6 | 7 | jobs: 8 | build: 9 | runs-on: ubuntu-latest 10 | steps: 11 | - name: Sync to Gitee 12 | uses: wearerequired/git-mirror-action@master 13 | env: 14 | # 在 Settings->Secrets 15 | SSH_PRIVATE_KEY: ${{ secrets.GITEE_PRIVATE_KEY }} 16 | with: 17 | # GitHub 源仓库地址 18 | source-repo: git@github.com:vangleer/vangle.git 19 | # Gitee 目标仓库地址 20 | destination-repo: git@gitee.com:vangleer/vangle.git 21 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/cold-drink.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/dessert.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/medal.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/docs/examples/radio/color.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 19 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/grape.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/drizzling.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/mute-notification.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/baseball.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/van.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/connection.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/eslint-config/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@vangle/eslint-config", 3 | "version": "1.0.0", 4 | "description": "eslint config of vangle", 5 | "main": "index.js", 6 | "files": [ 7 | "index.js" 8 | ], 9 | "keywords": [ 10 | "eslint", 11 | "tslint", 12 | "config", 13 | "vangle" 14 | ], 15 | "dependencies": { 16 | "@typescript-eslint/eslint-plugin": "^5.33.1", 17 | "@typescript-eslint/parser": "^5.33.1", 18 | "eslint-config-prettier": "^8.5.0", 19 | "eslint-plugin-prettier": "^4.2.1", 20 | "eslint-plugin-vue": "^9.3.0" 21 | }, 22 | "author": "", 23 | "license": "ISC" 24 | } 25 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/alarm-clock.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/ice-tea.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/rank.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/ice-drink.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/sell.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/sold-out.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/docs/zh/guide/design.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 设计 3 | lang: zh-CN 4 | --- 5 | 6 | # 设计原则 7 | 8 | ## 一致 Consistency 9 | 10 | - **与现实生活一致：** 与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念； 11 | 12 | - **在界面中一致：** 所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。 13 | 14 | ## 反馈 Feedback 15 | 16 | - **控制反馈：** 通过界面样式和交互动效让用户可以清晰的感知自己的操作； 17 | 18 | - **页面反馈：** 操作后，通过页面元素的变化清晰地展现当前状态。 19 | 20 | ## 效率 Efficiency 21 | 22 | - **简化流程：** 设计简洁直观的操作流程； 23 | 24 | - **清晰明确：** 语言表达清晰且表意明确，让用户快速理解进而作出决策； 25 | 26 | - **帮助用户识别：** 界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。 27 | 28 | ## 可控 Controllability 29 | 30 | - **用户决策：** 根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策； 31 | 32 | - **结果可控：** 用户可以自由的进行操作，包括撤销、回退和终止当前操作等。 33 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/calendar.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/docs/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: home 3 | 4 | hero: 5 | name: Vangle 6 | text: 高质量前端组件库 7 | tagline: 基于 Vue 3，面向设计师和开发者的组件库 8 | image: 9 | src: /images/logo-rect.png 10 | alt: Vangle 11 | actions: 12 | - theme: brand 13 | text: Get Started 14 | link: zh/component/button 15 | - theme: alt 16 | text: View on Githib 17 | link: https://github.com/vangleer/vangle 18 | 19 | features: 20 | - icon: ⚡️ 21 | title: Composition API 22 | details: yes... 23 | - icon: 🖖 24 | title: 全面拥抱 Typescript 25 | details: good... 26 | - icon: 🛠️ 27 | title: 组件丰富 16+ 28 | details: very good... 29 | --- 30 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/chat-line-round.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/lightning.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/docs/examples/radio/with-borders.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 22 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/cherry.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/docs/examples/progress/circular-progress-bar.vue: -------------------------------------------------------------------------------- 1 | 10 | 19 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/trophy.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/star.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/switch/src/switch.ts: -------------------------------------------------------------------------------- 1 | import { PropType } from 'vue' 2 | type ValueType = string | number | boolean 3 | export const SwitchProps = { 4 | modelValue: { 5 | type: [String, Number, Boolean] as PropType, 6 | default: false 7 | }, 8 | activeValue: { 9 | type: [String, Number, Boolean] as PropType, 10 | default: true 11 | }, 12 | inactiveValue: { 13 | type: [String, Number, Boolean] as PropType, 14 | default: false 15 | }, 16 | activeText: String, 17 | inactiveText: String, 18 | inlinePrompt: Boolean, 19 | disabled: Boolean, 20 | loading: Boolean, 21 | width: { 22 | type: [String, Number] 23 | } 24 | } -------------------------------------------------------------------------------- /packages/docs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@vangle/docs", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "docs:dev": "vitepress dev . --host", 8 | "docs:build": "vitepress build .", 9 | "docs:serve": "vitepress serve ." 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "fast-glob": "^3.2.11", 16 | "sass": "^1.54.5", 17 | "vitepress": "^1.0.0-alpha.9", 18 | "vitepress-theme-demoblock": "^1.4.2" 19 | }, 20 | "dependencies": { 21 | "markdown-it-container": "^3.0.0", 22 | "prism-theme-vars": "^0.2.4", 23 | "prismjs": "^1.28.0" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/pointer.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/phone.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/set-up.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/index.ts: -------------------------------------------------------------------------------- 1 | import './styles/common.less' 2 | export * from './button' 3 | export * from './dialog' 4 | export * from './slider' 5 | export * from './icon' 6 | export * from './message' 7 | export * from './tooltip' 8 | export * from './ripple' 9 | export * from './input' 10 | export * from './checkbox' 11 | export * from './collapse' 12 | export * from './radio' 13 | export * from './switch' 14 | export * from './select' 15 | export * from './popper' 16 | export * from './scrollbar' 17 | export * from './tree' 18 | export * from './table' 19 | export * from './tag' 20 | export * from './date-picker' 21 | export * from './progress' 22 | export * from './calendar' 23 | export * from './sortable' 24 | -------------------------------------------------------------------------------- /packages/components/sortable/src/sortable.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 25 | 26 | 29 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/brush.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/docs/examples/progress/basic.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 15 | 16 | -------------------------------------------------------------------------------- /packages/vangle/dist/types/components/index.d.ts: -------------------------------------------------------------------------------- 1 | export * from './button'; 2 | export * from './dialog'; 3 | export * from './slider'; 4 | export * from './icon'; 5 | export * from './message'; 6 | export * from './tooltip'; 7 | export * from './ripple'; 8 | export * from './input'; 9 | export * from './checkbox'; 10 | export * from './collapse'; 11 | export * from './radio'; 12 | export * from './switch'; 13 | export * from './select'; 14 | export * from './popper'; 15 | export * from './scrollbar'; 16 | export * from './tree'; 17 | export * from './table'; 18 | export * from './tag'; 19 | export * from './date-picker'; 20 | export * from './progress'; 21 | export * from './calendar'; 22 | export * from './sortable'; 23 | -------------------------------------------------------------------------------- /packages/docs/.vitepress/theme/index.ts: -------------------------------------------------------------------------------- 1 | import * as Vangle from '@vangle/components' 2 | import { define } from '../utils/types' 3 | import type { Theme as ThemeType } from 'vitepress' 4 | 5 | import { globals } from '../vitepress' 6 | 7 | // 使用vitepress-theme-demoblock主题，并注册组件(包含主题中默认的组件)。 8 | import Theme from 'vitepress/dist/client/theme-default/index.js' 9 | 10 | export default define({ 11 | ...Theme, 12 | enhanceApp: ({ app }) => { 13 | Object.keys(Vangle).forEach(key => { 14 | if (key.startsWith('Van') && Vangle[key].name) { 15 | app.component(Vangle[key].name, Vangle[key]) 16 | } 17 | }) 18 | globals.forEach(([name, comp]) => app.component(name, comp)) 19 | } 20 | }) 21 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/handbag.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/scrollbar/src/scrollbar.ts: -------------------------------------------------------------------------------- 1 | import { InjectionKey, Ref } from 'vue' 2 | export const ScrollbarProps = { 3 | height: { 4 | type: [String, Number] 5 | }, 6 | native: { 7 | type: Boolean 8 | }, 9 | always: { 10 | type: Boolean 11 | }, 12 | minSize: { 13 | type: Number, 14 | default: 20, 15 | }, 16 | vertical: { 17 | type: Boolean 18 | }, 19 | maxHeight: { 20 | type: [String, Number] 21 | } 22 | } 23 | 24 | interface ScrollbarContext { 25 | wrapRef: Ref 26 | setScrollTop: (num: number) => void 27 | setScrollLeft: (num: number) => void 28 | } 29 | 30 | export const ScrollbarContextKey: InjectionKey = Symbol('ScrollbarContextKey') -------------------------------------------------------------------------------- /packages/docs/examples/scrollbar/horizontal-scroll.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 29 | -------------------------------------------------------------------------------- /packages/vangle/dist/types/components/button/src/button.d.ts: -------------------------------------------------------------------------------- 1 | import type { PropType } from 'vue'; 2 | export declare const ButtonProps: { 3 | type: PropType<"primary" | "info" | "success" | "warning" | "danger">; 4 | size: PropType<"mini" | "small" | "large">; 5 | plain: BooleanConstructor; 6 | autofocus: BooleanConstructor; 7 | round: BooleanConstructor; 8 | circle: BooleanConstructor; 9 | text: BooleanConstructor; 10 | icon: StringConstructor; 11 | color: StringConstructor; 12 | disabled: BooleanConstructor; 13 | textColor: { 14 | type: StringConstructor; 15 | }; 16 | ripple: { 17 | type: BooleanConstructor; 18 | default: boolean; 19 | }; 20 | }; 21 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/chat-dot-round.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/src/svg/link.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/popper/src/use-popper-container.ts: -------------------------------------------------------------------------------- 1 | import { onBeforeMount } from 'vue' 2 | 3 | let cachedContainer: HTMLElement 4 | const selector = `van-popper-container-1996` 5 | 6 | type PopperContainerType = { 7 | container: HTMLElement 8 | selector: string 9 | } 10 | 11 | export const usePopperContainer = (): PopperContainerType => { 12 | onBeforeMount(() => { 13 | if (!cachedContainer && !document.querySelector(`#${selector}`)) { 14 | const container = document.createElement('div') 15 | container.id = selector 16 | cachedContainer = container 17 | document.body.appendChild(container) 18 | } 19 | }) 20 | 21 | return { 22 | container: cachedContainer, 23 | selector 24 | } 25 | } -------------------------------------------------------------------------------- /packages/components/popper/src/forward-ref.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent, Fragment, ref } from "vue"; 2 | 3 | export default defineComponent({ 4 | props: { 5 | setRef: { type: Function, required: true }, 6 | onlyChild: Boolean 7 | }, 8 | setup(props, { slots }) { 9 | const setRef = (el: HTMLElement | null) => { 10 | if (el) { 11 | props.setRef(el.nextElementSibling || null) 12 | } else { 13 | props.setRef(null) 14 | } 15 | } 16 | return () => { 17 | const [firstChild] = slots.default?.() || [] 18 | const child = props.onlyChild ? (firstChild.children as any)[0] : firstChild.children 19 | return {child} 20 | } 21 | } 22 | }) -------------------------------------------------------------------------------- /packages/components/icon/src/svg/bicycle.svg: -------------------------------------------------------------------------------- 1 | --------------------------------------------------------------------------------