From a1ce16bcf391637f134a501783a3e09ac31281c9 Mon Sep 17 00:00:00 2001 From: ajaxzheng <894103554@qq.com> Date: Sat, 6 May 2023 18:12:23 +0800 Subject: [PATCH 01/25] =?UTF-8?q?fix(upload)=20=E4=BF=AE=E5=A4=8Duplaod?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E9=94=80=E6=AF=81=E6=97=B6=E6=8A=A5=E9=94=99?= =?UTF-8?q?=E7=9A=84bug=20(#196)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/renderless/CHANGELOG.md | 41 ------------------------- packages/renderless/src/upload/index.ts | 1 - 2 files changed, 42 deletions(-) delete mode 100644 packages/renderless/CHANGELOG.md diff --git a/packages/renderless/CHANGELOG.md b/packages/renderless/CHANGELOG.md deleted file mode 100644 index e6bf996ef..000000000 --- a/packages/renderless/CHANGELOG.md +++ /dev/null @@ -1,41 +0,0 @@ -# Change Log - -All notable changes to this project will be documented in this file. -See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. - -## [5.0.34-mf.0](https://codehub-dg-g.huawei.com/AIF/TINY/opentiny-vue/compare/@opentiny/vue-renderless@5.0.33-mf.0...@opentiny/vue-renderless@5.0.34-mf.0) (2023-02-08) - -**Note:** Version bump only for package @opentiny/vue-renderless - - - - - -## [5.0.33-mf.0](https://codehub-dg-g.huawei.com/AIF/TINY/opentiny-vue/compare/@opentiny/vue-renderless@5.0.32-mf.0...@opentiny/vue-renderless@5.0.33-mf.0) (2023-02-08) - -**Note:** Version bump only for package @opentiny/vue-renderless - - - - - -## [5.0.32-mf.0](https://codehub-dg-g.huawei.com/AIF/TINY/opentiny-vue/compare/@opentiny/vue-renderless@5.0.31-beta.0...@opentiny/vue-renderless@5.0.32-mf.0) (2023-02-08) - -**Note:** Version bump only for package @opentiny/vue-renderless - - - - - -## 5.0.31-beta.0 (2023-02-08) - - -### Bug Fixes - -* 参数名错误 ([aeebbba](https://codehub-dg-g.huawei.com/AIF/TINY/opentiny-vue/commits/aeebbbaf42ce46d250b02050c009729a8b0c1611)) -* 修正 form-item 的 renderless 参数名错误 ([3b0925a](https://codehub-dg-g.huawei.com/AIF/TINY/opentiny-vue/commits/3b0925a91971d953780d94fd9193fa92a1b1fd4f)) - - -### Features - -* 增加 build:renderless ([b29dacb](https://codehub-dg-g.huawei.com/AIF/TINY/opentiny-vue/commits/b29dacb0fa68d919c6d749660d1ece8ea336e18e)) diff --git a/packages/renderless/src/upload/index.ts b/packages/renderless/src/upload/index.ts index 012992857..d297ec791 100644 --- a/packages/renderless/src/upload/index.ts +++ b/packages/renderless/src/upload/index.ts @@ -295,6 +295,5 @@ export const mounted = ({ state, props, api }) => () => { } export const onBeforeDestroy = (state) => () => { - state.updateInput.onchange = null state.updateInput = null } From 950205482852fd6403e5db7ade72f9eb60527e2c Mon Sep 17 00:00:00 2001 From: chenxi-20 <76168465+chenxi-20@users.noreply.github.com> Date: Wed, 10 May 2023 18:16:27 +0800 Subject: [PATCH 02/25] =?UTF-8?q?fix(fileupload):=20=E4=B8=8A=E4=BC=A0?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=A2=9E=E5=8A=A0=E7=94=A8=E6=88=B7=E4=B8=8D?= =?UTF-8?q?=E9=85=8D=E7=BD=AEaction=E5=B1=9E=E6=80=A7=E6=8A=A5=E9=94=99?= =?UTF-8?q?=E7=9A=84=E8=AD=A6=E5=91=8A=EF=BC=8C=E5=91=8A=E7=9F=A5=E7=94=A8?= =?UTF-8?q?=E6=88=B7=E9=9C=80=E8=A6=81=E9=85=8D=E7=BD=AE=20(#199)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/renderless/src/file-upload/index.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/renderless/src/file-upload/index.ts b/packages/renderless/src/file-upload/index.ts index d302b95d8..fd5be82ca 100644 --- a/packages/renderless/src/file-upload/index.ts +++ b/packages/renderless/src/file-upload/index.ts @@ -25,7 +25,11 @@ export const initService = ({ props, service }) => { if (propName) { return Promise.reject(new Error(`[TINY Error][FileUpload] Prop ${propName} is not configured`)) } else { - return Promise.reject(new Error('[TINY Error][FileUpload] This component depends on @opentiny/vue-service')) + return Promise.reject( + new Error( + '[TINY Error][FileUpload] This component depends on @opentiny/vue-service, Currently unable to generate a default gateway, please set a value for the action' + ) + ) } } From a8f402563b904f3a8df64c892d7f9e57f1650313 Mon Sep 17 00:00:00 2001 From: qinwencheng <157475034@qq.com> Date: Wed, 10 May 2023 18:18:04 +0800 Subject: [PATCH 03/25] =?UTF-8?q?fix(button):=20=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E6=97=A0=E5=86=85=E5=AE=B9=E7=9A=84=E6=83=85=E5=86=B5=E4=B8=8B?= =?UTF-8?q?=E4=B8=8A=E4=B8=8B=E9=94=99=E4=BD=8D=E7=9A=84=E9=97=AE=E9=A2=98?= =?UTF-8?q?(#194)=20(#203)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/theme-mobile/src/button/index.less | 1 + packages/theme/src/button/index.less | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/theme-mobile/src/button/index.less b/packages/theme-mobile/src/button/index.less index 8abd513f6..a3f7b7928 100644 --- a/packages/theme-mobile/src/button/index.less +++ b/packages/theme-mobile/src/button/index.less @@ -41,6 +41,7 @@ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + vertical-align: middle; &::before { position: absolute; diff --git a/packages/theme/src/button/index.less b/packages/theme/src/button/index.less index 07be54671..b02a323ff 100644 --- a/packages/theme/src/button/index.less +++ b/packages/theme/src/button/index.less @@ -43,6 +43,7 @@ overflow: hidden; transition: border 0.3s ease 0s, color 0.3s ease 0s, background 0.3s ease 0s; outline: 0; + vertical-align: middle; .@{svg-prefix-cls} { vertical-align: text-top; From 969550b2d63bd34fc4b9d5c54dc6d08de3bf6f60 Mon Sep 17 00:00:00 2001 From: MrWang2016 <421231576@qq.com> Date: Sat, 13 May 2023 11:42:26 +0800 Subject: [PATCH 04/25] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8DpullRefresh?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E6=95=B0=E6=8D=AE=E7=B1=BB=E5=9E=8B?= =?UTF-8?q?=E4=B8=8D=E5=8C=B9=E9=85=8D=EF=BC=8C=E5=AF=BC=E8=87=B4=E6=8E=A7?= =?UTF-8?q?=E5=88=B6=E5=8F=B0=E5=91=8A=E8=AD=A6=E6=97=A5=E5=BF=97=E8=B6=85?= =?UTF-8?q?=E5=A4=A7=E9=87=8F=E6=89=93=E5=8D=B0=EF=BC=8C=E5=AF=BC=E8=87=B4?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=B8=B2=E6=9F=93=E6=85=A2=E7=9A=84=E9=97=AE?= =?UTF-8?q?=E9=A2=98=20(#211)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 修复actionSheet在手机上click无效问题 * 修复pullRefresh组件,数据类型不匹配,导致控制台告警日志超大量打印,导致页面渲染慢的问题 --- packages/vue/src/pull-refresh/src/index.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/vue/src/pull-refresh/src/index.vue b/packages/vue/src/pull-refresh/src/index.vue index 5a808a9d7..e8c9c2cb9 100644 --- a/packages/vue/src/pull-refresh/src/index.vue +++ b/packages/vue/src/pull-refresh/src/index.vue @@ -79,10 +79,10 @@ export default defineComponent({ default: false }, pullUp: { - type: Function + type: Object }, pullDown: { - type: Function + type: Object }, hasMore: { type: Boolean, From 437d1e61774a4b1ced0955668d2049894aa6bf88 Mon Sep 17 00:00:00 2001 From: ing <104059491+yuanningning@users.noreply.github.com> Date: Fri, 12 May 2023 20:43:16 -0700 Subject: [PATCH 05/25] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8DBreadcrumb?= =?UTF-8?q?=E9=85=8D=E7=BD=AEtextField=E7=9A=84demo=E4=B8=8D=E6=98=BE?= =?UTF-8?q?=E7=A4=BA=E9=9D=A2=E5=8C=85=E5=B1=91=E5=86=85=E5=AE=B9=20#207?= =?UTF-8?q?=20(#210)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/docs/resources/pc/api/en-US/breadcrumb.json | 6 +++--- examples/docs/resources/pc/api/zh-CN/breadcrumb.json | 6 +++--- examples/docs/resources/pc/demo/breadcrumb/options.vue | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/examples/docs/resources/pc/api/en-US/breadcrumb.json b/examples/docs/resources/pc/api/en-US/breadcrumb.json index 5331fc953..9cf76f7e6 100644 --- a/examples/docs/resources/pc/api/en-US/breadcrumb.json +++ b/examples/docs/resources/pc/api/en-US/breadcrumb.json @@ -22,11 +22,11 @@ "defaultValue": "[]" }, { - "name": "textField", + "name": "text-field", "sample": "options", - "type": "Array", + "type": "String", "desc": "Specify the breadcrumb display field. This field is used together with options. The component defaults to label.", - "defaultValue": "[]" + "defaultValue": "label" } ], "events": [ diff --git a/examples/docs/resources/pc/api/zh-CN/breadcrumb.json b/examples/docs/resources/pc/api/zh-CN/breadcrumb.json index d1d7d0091..29b68eb32 100644 --- a/examples/docs/resources/pc/api/zh-CN/breadcrumb.json +++ b/examples/docs/resources/pc/api/zh-CN/breadcrumb.json @@ -22,11 +22,11 @@ "defaultValue": "[]" }, { - "name": "textField", + "name": "text-field", "sample": "options", - "type": "Array", + "type": "String", "desc": "指定面包屑的显示字段,结合 options 使用,组件默认 label ", - "defaultValue": "[]" + "defaultValue": "label" } ], "events": [ diff --git a/examples/docs/resources/pc/demo/breadcrumb/options.vue b/examples/docs/resources/pc/demo/breadcrumb/options.vue index e11fb1c78..e156488c5 100644 --- a/examples/docs/resources/pc/demo/breadcrumb/options.vue +++ b/examples/docs/resources/pc/demo/breadcrumb/options.vue @@ -1,7 +1,7 @@ From 50723613fc31d3ba58313e512dfcb8bef42a28d5 Mon Sep 17 00:00:00 2001 From: wwttff <32888622+wwttff@users.noreply.github.com> Date: Fri, 12 May 2023 20:43:55 -0700 Subject: [PATCH 06/25] =?UTF-8?q?fix(rate)=20=E4=BF=AE=E5=A4=8D=E7=BB=84?= =?UTF-8?q?=E4=BB=B6Rate=E5=8D=8A=E9=80=89=E5=8A=A0=E7=A6=81=E9=80=89?= =?UTF-8?q?=E5=90=8E=EF=BC=8C2.5=E4=B8=8E3=E6=98=9F=E5=AE=9E=E9=99=85?= =?UTF-8?q?=E4=B8=8D=E5=8C=B9=E9=85=8D=E7=9A=84=E9=97=AE=E9=A2=98=20(#200)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/docs/resources/pc/demo/rate/dynamic-disable.vue | 4 ++-- packages/renderless/src/rate/index.ts | 5 ++++- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/examples/docs/resources/pc/demo/rate/dynamic-disable.vue b/examples/docs/resources/pc/demo/rate/dynamic-disable.vue index 5da0f4298..b1f514f63 100644 --- a/examples/docs/resources/pc/demo/rate/dynamic-disable.vue +++ b/examples/docs/resources/pc/demo/rate/dynamic-disable.vue @@ -1,5 +1,5 @@ diff --git a/examples/docs/newsrc/mobile.vue b/examples/docs/newsrc/mobile.vue index 7e759f843..b0ca518e3 100644 --- a/examples/docs/newsrc/mobile.vue +++ b/examples/docs/newsrc/mobile.vue @@ -1,73 +1,85 @@ diff --git a/examples/docs/resources/mobile-first/app/action-sheet/basic-usage.vue b/examples/docs/resources/mobile-first/app/action-sheet/basic-usage.vue new file mode 100644 index 000000000..fbb1e2bb1 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/action-sheet/basic-usage.vue @@ -0,0 +1,29 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/action-sheet/ellipsis.vue b/examples/docs/resources/mobile-first/app/action-sheet/ellipsis.vue new file mode 100644 index 000000000..f54fd4184 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/action-sheet/ellipsis.vue @@ -0,0 +1,82 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/action-sheet/mask-event.vue b/examples/docs/resources/mobile-first/app/action-sheet/mask-event.vue new file mode 100644 index 000000000..f609a4c2f --- /dev/null +++ b/examples/docs/resources/mobile-first/app/action-sheet/mask-event.vue @@ -0,0 +1,29 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/action-sheet/mask.vue b/examples/docs/resources/mobile-first/app/action-sheet/mask.vue new file mode 100644 index 000000000..a6d9152f1 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/action-sheet/mask.vue @@ -0,0 +1,29 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/action-sheet/multiple.vue b/examples/docs/resources/mobile-first/app/action-sheet/multiple.vue new file mode 100644 index 000000000..b3419fd48 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/action-sheet/multiple.vue @@ -0,0 +1,64 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/action-sheet/show.vue b/examples/docs/resources/mobile-first/app/action-sheet/show.vue new file mode 100644 index 000000000..5e163a872 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/action-sheet/show.vue @@ -0,0 +1,58 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/action-sheet/slot.vue b/examples/docs/resources/mobile-first/app/action-sheet/slot.vue new file mode 100644 index 000000000..7471631b3 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/action-sheet/slot.vue @@ -0,0 +1,81 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/alert/base.vue b/examples/docs/resources/mobile-first/app/alert/base.vue new file mode 100644 index 000000000..4b6984814 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/alert/base.vue @@ -0,0 +1,19 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/alert/center.vue b/examples/docs/resources/mobile-first/app/alert/center.vue new file mode 100644 index 000000000..2feb5dc64 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/alert/center.vue @@ -0,0 +1,13 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/alert/closable.vue b/examples/docs/resources/mobile-first/app/alert/closable.vue new file mode 100644 index 000000000..e6cf3141b --- /dev/null +++ b/examples/docs/resources/mobile-first/app/alert/closable.vue @@ -0,0 +1,16 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/alert/close-text.vue b/examples/docs/resources/mobile-first/app/alert/close-text.vue new file mode 100644 index 000000000..7a1ac6f1d --- /dev/null +++ b/examples/docs/resources/mobile-first/app/alert/close-text.vue @@ -0,0 +1,22 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/alert/close.vue b/examples/docs/resources/mobile-first/app/alert/close.vue new file mode 100644 index 000000000..daf24f75d --- /dev/null +++ b/examples/docs/resources/mobile-first/app/alert/close.vue @@ -0,0 +1,18 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/alert/custom-description.vue b/examples/docs/resources/mobile-first/app/alert/custom-description.vue new file mode 100644 index 000000000..3318972ea --- /dev/null +++ b/examples/docs/resources/mobile-first/app/alert/custom-description.vue @@ -0,0 +1,19 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/alert/feedback-of-result.vue b/examples/docs/resources/mobile-first/app/alert/feedback-of-result.vue new file mode 100644 index 000000000..66c70983e --- /dev/null +++ b/examples/docs/resources/mobile-first/app/alert/feedback-of-result.vue @@ -0,0 +1,26 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/alert/icon.vue b/examples/docs/resources/mobile-first/app/alert/icon.vue new file mode 100644 index 000000000..34a25dcc5 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/alert/icon.vue @@ -0,0 +1,25 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/alert/show-foldable.vue b/examples/docs/resources/mobile-first/app/alert/show-foldable.vue new file mode 100644 index 000000000..841c36730 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/alert/show-foldable.vue @@ -0,0 +1,48 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/alert/show-icon.vue b/examples/docs/resources/mobile-first/app/alert/show-icon.vue new file mode 100644 index 000000000..e86f0eed3 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/alert/show-icon.vue @@ -0,0 +1,16 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/alert/size.vue b/examples/docs/resources/mobile-first/app/alert/size.vue new file mode 100644 index 000000000..b36b27aa7 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/alert/size.vue @@ -0,0 +1,16 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/alert/slot-default.vue b/examples/docs/resources/mobile-first/app/alert/slot-default.vue new file mode 100644 index 000000000..d24a0a122 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/alert/slot-default.vue @@ -0,0 +1,68 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/alert/title.vue b/examples/docs/resources/mobile-first/app/alert/title.vue new file mode 100644 index 000000000..80689d0ef --- /dev/null +++ b/examples/docs/resources/mobile-first/app/alert/title.vue @@ -0,0 +1,19 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/alert/type.vue b/examples/docs/resources/mobile-first/app/alert/type.vue new file mode 100644 index 000000000..40ab511b1 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/alert/type.vue @@ -0,0 +1,19 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/alert/webdoc/alert.cn.md b/examples/docs/resources/mobile-first/app/alert/webdoc/alert.cn.md new file mode 100644 index 000000000..3d59cb11d --- /dev/null +++ b/examples/docs/resources/mobile-first/app/alert/webdoc/alert.cn.md @@ -0,0 +1,9 @@ +--- +title: Alert 警告 +--- + +# Alert 警告 + +
+ +
diff --git a/examples/docs/resources/mobile-first/app/alert/webdoc/alert.en.md b/examples/docs/resources/mobile-first/app/alert/webdoc/alert.en.md new file mode 100644 index 000000000..3d59cb11d --- /dev/null +++ b/examples/docs/resources/mobile-first/app/alert/webdoc/alert.en.md @@ -0,0 +1,9 @@ +--- +title: Alert 警告 +--- + +# Alert 警告 + +
+ +
diff --git a/examples/docs/resources/mobile-first/app/alert/webdoc/alert.js b/examples/docs/resources/mobile-first/app/alert/webdoc/alert.js new file mode 100644 index 000000000..4af2d761b --- /dev/null +++ b/examples/docs/resources/mobile-first/app/alert/webdoc/alert.js @@ -0,0 +1,117 @@ +export default { + column: '2', + owner: '', + demos: [ + { + demoId: 'type', + name: { + 'zh-CN': '类型', + 'en-US': 'basic usage' + }, + desc: { + 'zh-CN': '

通过type设置不同的类型。可选值:success、warning、info、error,默认值:info 。

', + 'en-US': '

button type

' + }, + codeFiles: ['type.vue'] + }, + { + demoId: 'size', + name: { + 'zh-CN': '大尺寸', + 'en-US': 'button round' + }, + desc: { + 'zh-CN': '

通过 size 属性设置不同的尺寸,可选值:nomal、large,默认值:nomal 。

', + 'en-US': '

button round

' + }, + codeFiles: ['size.vue'] + }, + { + demoId: 'title', + name: { + 'zh-CN': '自定义标题', + 'en-US': 'events' + }, + desc: { + 'zh-CN': + '

size为 large 时显示标题,可设置 titleslot 自定义标题。默认标题根据设置的 type 显示。

', + 'en-US': '

bbutton click

' + }, + codeFiles: ['title.vue'] + }, + { + demoId: 'closable', + name: { + 'zh-CN': '不可关闭', + 'en-US': 'events' + }, + desc: { + 'zh-CN': '

通过 closable 属性可设置是否显示关闭按钮,没有关闭按钮,警告框将不可关闭。

', + 'en-US': '

bbutton click

' + }, + codeFiles: ['closable.vue'] + }, + { + demoId: 'custom-description', + name: { + 'zh-CN': '自定义提示内容', + 'en-US': 'events' + }, + desc: { + 'zh-CN': '

可通过 description 属性或插槽设置自定义提示内容。

', + 'en-US': '

bbutton click

' + }, + codeFiles: ['custom-description.vue'] + }, + { + demoId: 'slot-default', + name: { + 'zh-CN': '自定义交互操作', + 'en-US': 'events' + }, + desc: { + 'zh-CN': '

size 为 large 时,设置默认插槽自定义交互操作。

', + 'en-US': '

bbutton click

' + }, + codeFiles: ['slot-default.vue'] + }, + { + demoId: 'close', + name: { + 'zh-CN': '关闭事件', + 'en-US': 'events' + }, + desc: { + 'zh-CN': '

close 事件,关闭警告框时触发。

', + 'en-US': '

bbutton click

' + }, + codeFiles: ['close.vue'] + }, + { + demoId: 'feedback-of-result', + name: { + 'zh-CN': '表单提交结果反馈', + 'en-US': 'events' + }, + desc: { + 'zh-CN': + '

size 为 large 时,属性 description 和默认插槽结合使用,可渲染提交反馈界面。

', + 'en-US': '

bbutton click

' + }, + codeFiles: ['feedback-of-result.vue'] + }, + { + demoId: 'show-icon', + name: { + 'zh-CN': '是否显示图标', + 'en-US': 'events' + }, + desc: { + 'zh-CN': '

通过配置 show-icon 属性,控制图标是否显示。

', + 'en-US': '

bbutton click

' + }, + codeFiles: ['show-icon.vue'] + } + ], + apis: [] +} diff --git a/examples/docs/resources/mobile-first/app/badge/base.vue b/examples/docs/resources/mobile-first/app/badge/base.vue new file mode 100644 index 000000000..163d626bd --- /dev/null +++ b/examples/docs/resources/mobile-first/app/badge/base.vue @@ -0,0 +1,65 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/badge/dynamic-hidden.vue b/examples/docs/resources/mobile-first/app/badge/dynamic-hidden.vue new file mode 100644 index 000000000..8be8a545e --- /dev/null +++ b/examples/docs/resources/mobile-first/app/badge/dynamic-hidden.vue @@ -0,0 +1,34 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/badge/is-dot.vue b/examples/docs/resources/mobile-first/app/badge/is-dot.vue new file mode 100644 index 000000000..c9542e49c --- /dev/null +++ b/examples/docs/resources/mobile-first/app/badge/is-dot.vue @@ -0,0 +1,15 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/badge/max.vue b/examples/docs/resources/mobile-first/app/badge/max.vue new file mode 100644 index 000000000..123c26a32 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/badge/max.vue @@ -0,0 +1,15 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/badge/slot-content.vue b/examples/docs/resources/mobile-first/app/badge/slot-content.vue new file mode 100644 index 000000000..5c3bc733c --- /dev/null +++ b/examples/docs/resources/mobile-first/app/badge/slot-content.vue @@ -0,0 +1,18 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/badge/slot-default.vue b/examples/docs/resources/mobile-first/app/badge/slot-default.vue new file mode 100644 index 000000000..1c1273716 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/badge/slot-default.vue @@ -0,0 +1,17 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/badge/target.vue b/examples/docs/resources/mobile-first/app/badge/target.vue new file mode 100644 index 000000000..823f21ea9 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/badge/target.vue @@ -0,0 +1,21 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/badge/type-left.vue b/examples/docs/resources/mobile-first/app/badge/type-left.vue new file mode 100644 index 000000000..0170cbd4e --- /dev/null +++ b/examples/docs/resources/mobile-first/app/badge/type-left.vue @@ -0,0 +1,33 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/badge/type.vue b/examples/docs/resources/mobile-first/app/badge/type.vue new file mode 100644 index 000000000..f3da4a12d --- /dev/null +++ b/examples/docs/resources/mobile-first/app/badge/type.vue @@ -0,0 +1,20 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/button-group/base.vue b/examples/docs/resources/mobile-first/app/button-group/base.vue new file mode 100644 index 000000000..e3b916306 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/button-group/base.vue @@ -0,0 +1,26 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/button-group/data.vue b/examples/docs/resources/mobile-first/app/button-group/data.vue new file mode 100644 index 000000000..01a935e1b --- /dev/null +++ b/examples/docs/resources/mobile-first/app/button-group/data.vue @@ -0,0 +1,22 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/button-group/disabled.vue b/examples/docs/resources/mobile-first/app/button-group/disabled.vue new file mode 100644 index 000000000..020780b09 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/button-group/disabled.vue @@ -0,0 +1,22 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/button-group/plain.vue b/examples/docs/resources/mobile-first/app/button-group/plain.vue new file mode 100644 index 000000000..5f75a3570 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/button-group/plain.vue @@ -0,0 +1,22 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/button-group/size.vue b/examples/docs/resources/mobile-first/app/button-group/size.vue new file mode 100644 index 000000000..b226422cf --- /dev/null +++ b/examples/docs/resources/mobile-first/app/button-group/size.vue @@ -0,0 +1,26 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/button-group/slot-default.vue b/examples/docs/resources/mobile-first/app/button-group/slot-default.vue new file mode 100644 index 000000000..1b2708fa5 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/button-group/slot-default.vue @@ -0,0 +1,18 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/button-group/text-value-field.vue b/examples/docs/resources/mobile-first/app/button-group/text-value-field.vue new file mode 100644 index 000000000..4d5a0a8b0 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/button-group/text-value-field.vue @@ -0,0 +1,24 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/button/autofocus.vue b/examples/docs/resources/mobile-first/app/button/autofocus.vue new file mode 100644 index 000000000..3d2a71b0d --- /dev/null +++ b/examples/docs/resources/mobile-first/app/button/autofocus.vue @@ -0,0 +1,24 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/button/base-saas.vue b/examples/docs/resources/mobile-first/app/button/base-saas.vue new file mode 100644 index 000000000..0d6bca37b --- /dev/null +++ b/examples/docs/resources/mobile-first/app/button/base-saas.vue @@ -0,0 +1,71 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/button/base.vue b/examples/docs/resources/mobile-first/app/button/base.vue new file mode 100644 index 000000000..5bc0cad62 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/button/base.vue @@ -0,0 +1,71 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/button/button-class.vue b/examples/docs/resources/mobile-first/app/button/button-class.vue new file mode 100644 index 000000000..a99fc1cbf --- /dev/null +++ b/examples/docs/resources/mobile-first/app/button/button-class.vue @@ -0,0 +1,18 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/button/circle.vue b/examples/docs/resources/mobile-first/app/button/circle.vue new file mode 100644 index 000000000..bc56576fa --- /dev/null +++ b/examples/docs/resources/mobile-first/app/button/circle.vue @@ -0,0 +1,61 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/button/click.vue b/examples/docs/resources/mobile-first/app/button/click.vue new file mode 100644 index 000000000..7b581969f --- /dev/null +++ b/examples/docs/resources/mobile-first/app/button/click.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/button/dynamic-disabled.vue b/examples/docs/resources/mobile-first/app/button/dynamic-disabled.vue new file mode 100644 index 000000000..e9e87078b --- /dev/null +++ b/examples/docs/resources/mobile-first/app/button/dynamic-disabled.vue @@ -0,0 +1,52 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/button/icon.vue b/examples/docs/resources/mobile-first/app/button/icon.vue new file mode 100644 index 000000000..c4b6be925 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/button/icon.vue @@ -0,0 +1,31 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/button/image.vue b/examples/docs/resources/mobile-first/app/button/image.vue new file mode 100644 index 000000000..c78a38bcb --- /dev/null +++ b/examples/docs/resources/mobile-first/app/button/image.vue @@ -0,0 +1,21 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/button/link.vue b/examples/docs/resources/mobile-first/app/button/link.vue new file mode 100644 index 000000000..51829075b --- /dev/null +++ b/examples/docs/resources/mobile-first/app/button/link.vue @@ -0,0 +1,17 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/button/loading.vue b/examples/docs/resources/mobile-first/app/button/loading.vue new file mode 100644 index 000000000..de1f181fb --- /dev/null +++ b/examples/docs/resources/mobile-first/app/button/loading.vue @@ -0,0 +1,32 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/button/plain.vue b/examples/docs/resources/mobile-first/app/button/plain.vue new file mode 100644 index 000000000..555d9cdaf --- /dev/null +++ b/examples/docs/resources/mobile-first/app/button/plain.vue @@ -0,0 +1,38 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/button/reset-time.vue b/examples/docs/resources/mobile-first/app/button/reset-time.vue new file mode 100644 index 000000000..b7f3d05d7 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/button/reset-time.vue @@ -0,0 +1,27 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/button/round.vue b/examples/docs/resources/mobile-first/app/button/round.vue new file mode 100644 index 000000000..9beea86c5 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/button/round.vue @@ -0,0 +1,32 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/button/size.vue b/examples/docs/resources/mobile-first/app/button/size.vue new file mode 100644 index 000000000..6d9f3bb34 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/button/size.vue @@ -0,0 +1,30 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/button/slot-default.vue b/examples/docs/resources/mobile-first/app/button/slot-default.vue new file mode 100644 index 000000000..8c7a2b569 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/button/slot-default.vue @@ -0,0 +1,30 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/button/text.vue b/examples/docs/resources/mobile-first/app/button/text.vue new file mode 100644 index 000000000..0b2b848a2 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/button/text.vue @@ -0,0 +1,24 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/button/type.vue b/examples/docs/resources/mobile-first/app/button/type.vue new file mode 100644 index 000000000..73ecf2af6 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/button/type.vue @@ -0,0 +1,39 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/button/webdoc/button.cn.md b/examples/docs/resources/mobile-first/app/button/webdoc/button.cn.md new file mode 100644 index 000000000..718e2a7b0 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/button/webdoc/button.cn.md @@ -0,0 +1,11 @@ +--- +title: Button 按钮 +--- + +# Button 按钮 + +
+ +常用的操作按钮,提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型。 + +
diff --git a/examples/docs/resources/mobile-first/app/button/webdoc/button.en.md b/examples/docs/resources/mobile-first/app/button/webdoc/button.en.md new file mode 100644 index 000000000..718e2a7b0 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/button/webdoc/button.en.md @@ -0,0 +1,11 @@ +--- +title: Button 按钮 +--- + +# Button 按钮 + +
+ +常用的操作按钮,提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型。 + +
diff --git a/examples/docs/resources/mobile-first/app/button/webdoc/button.js b/examples/docs/resources/mobile-first/app/button/webdoc/button.js new file mode 100644 index 000000000..d631247df --- /dev/null +++ b/examples/docs/resources/mobile-first/app/button/webdoc/button.js @@ -0,0 +1,131 @@ +export default { + column: '2', + owner: '', + demos: [ + { + demoId: 'text', + name: { + 'zh-CN': '文字按钮', + 'en-US': 'basic usage' + }, + desc: { + 'zh-CN': + '

设置type 属性为 text 即为文字按钮,可在标签子级或者通过 text 属性设置显示内容。

', + 'en-US': '

button type

' + }, + codeFiles: ['text.vue'] + }, + { + demoId: 'button-class', + name: { + 'zh-CN': '定制样式类', + 'en-US': 'button round' + }, + desc: { + 'zh-CN': '

设置 button-class 属性定制按钮样式

', + 'en-US': '

button round

' + }, + codeFiles: ['button-class.vue'] + }, + { + demoId: 'plain', + name: { + 'zh-CN': '线性按钮', + 'en-US': 'events' + }, + desc: { + 'zh-CN': '

配置 plain 属性为 true,即可展示为线性按钮的形式。

', + 'en-US': '

bbutton click

' + }, + codeFiles: ['plain.vue'] + }, + { + demoId: 'link', + name: { + 'zh-CN': '超链接按钮', + 'en-US': 'events' + }, + desc: { + 'zh-CN': '

通过设置href 属性可跳转到指定页面。

', + 'en-US': '

bbutton click

' + }, + codeFiles: ['link.vue'] + }, + { + demoId: 'type', + name: { + 'zh-CN': '主题样式', + 'en-US': 'events' + }, + desc: { + 'zh-CN': + '

通过 type 属性可以设置不同的主题样式,主要包括 primary、success、info、warning、danger、text。

', + 'en-US': '

bbutton click

' + }, + codeFiles: ['type.vue'] + }, + { + demoId: 'size', + name: { + 'zh-CN': '尺寸', + 'en-US': 'events' + }, + desc: { + 'zh-CN': + '

通过 size 属性设置按钮不同的大小尺寸,包括 medium、small、mini 三种不同大小。不设置时为默认尺寸。

', + 'en-US': '

bbutton click

' + }, + codeFiles: ['size.vue'] + }, + { + demoId: 'autofocus', + name: { + 'zh-CN': '聚焦', + 'en-US': 'events' + }, + desc: { + 'zh-CN': '

通过 autofocus 属性设置是否默认聚焦。

', + 'en-US': '

bbutton click

' + }, + codeFiles: ['autofocus.vue'] + }, + { + demoId: 'reset-time', + name: { + 'zh-CN': '防止表单重复提交', + 'en-US': 'events' + }, + desc: { + 'zh-CN': + '

通过 reset-time 属性可设置单击后按钮禁用的时长,默认的禁用时长为 1000 毫秒。
可用于防止按钮连续点击出现表单重复提交的问题。

', + 'en-US': '

bbutton click

' + }, + codeFiles: ['reset-time.vue'] + }, + { + demoId: 'click', + name: { + 'zh-CN': '事件', + 'en-US': 'events' + }, + desc: { + 'zh-CN': '

按钮的单击事件,该示例中单击按钮将会出现提示信息。

', + 'en-US': '

bbutton click

' + }, + codeFiles: ['click.vue'] + }, + { + demoId: 'dynamic-disable-button', + name: { + 'zh-CN': '动态禁用按钮', + 'en-US': 'events' + }, + desc: { + 'zh-CN': '

设置 disabled属性为 true 后,可以禁用按钮。

', + 'en-US': '

bbutton click

' + }, + codeFiles: ['dynamic-disable-button.vue'] + } + ], + apis: [] +} diff --git a/examples/docs/resources/mobile-first/app/calendar-bar/basic-usage.vue b/examples/docs/resources/mobile-first/app/calendar-bar/basic-usage.vue new file mode 100644 index 000000000..bf0d0e55b --- /dev/null +++ b/examples/docs/resources/mobile-first/app/calendar-bar/basic-usage.vue @@ -0,0 +1,18 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/calendar-bar/disabled.vue b/examples/docs/resources/mobile-first/app/calendar-bar/disabled.vue new file mode 100644 index 000000000..1e1674fad --- /dev/null +++ b/examples/docs/resources/mobile-first/app/calendar-bar/disabled.vue @@ -0,0 +1,34 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/calendar-bar/marked.vue b/examples/docs/resources/mobile-first/app/calendar-bar/marked.vue new file mode 100644 index 000000000..f669876f6 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/calendar-bar/marked.vue @@ -0,0 +1,33 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/calendar-bar/render-current.vue b/examples/docs/resources/mobile-first/app/calendar-bar/render-current.vue new file mode 100644 index 000000000..6a532f27f --- /dev/null +++ b/examples/docs/resources/mobile-first/app/calendar-bar/render-current.vue @@ -0,0 +1,22 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/calendar-bar/render-today.vue b/examples/docs/resources/mobile-first/app/calendar-bar/render-today.vue new file mode 100644 index 000000000..f95412b01 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/calendar-bar/render-today.vue @@ -0,0 +1,31 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/calendar-bar/webdoc/calendar-bar.cn.md b/examples/docs/resources/mobile-first/app/calendar-bar/webdoc/calendar-bar.cn.md new file mode 100644 index 000000000..229259be1 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/calendar-bar/webdoc/calendar-bar.cn.md @@ -0,0 +1,11 @@ +--- +title: CalendarBar 日历栏 +--- + +# CalendarBar 日历栏 + +
+ +CalendarBar 日历栏 + +
diff --git a/examples/docs/resources/mobile-first/app/calendar-bar/webdoc/calendar-bar.en.md b/examples/docs/resources/mobile-first/app/calendar-bar/webdoc/calendar-bar.en.md new file mode 100644 index 000000000..229259be1 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/calendar-bar/webdoc/calendar-bar.en.md @@ -0,0 +1,11 @@ +--- +title: CalendarBar 日历栏 +--- + +# CalendarBar 日历栏 + +
+ +CalendarBar 日历栏 + +
diff --git a/examples/docs/resources/mobile-first/app/calendar-bar/webdoc/calendar-bar.js b/examples/docs/resources/mobile-first/app/calendar-bar/webdoc/calendar-bar.js new file mode 100644 index 000000000..cb4897003 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/calendar-bar/webdoc/calendar-bar.js @@ -0,0 +1,96 @@ +export default { + column: '2', + owner: '', + demos: [ + { + demoId: 'basic-usage', + name: { + 'zh-CN': '基本用法', + 'en-US': 'basic usage' + }, + desc: { + 'zh-CN': '

组件 v-model 只接受字符串值,例如 2022-12-18

', + 'en-US': '

button type

' + }, + codeFiles: ['basic-usage.vue'] + }, + { + demoId: 'disabled', + name: { + 'zh-CN': '禁用', + 'en-US': 'button round' + }, + desc: { + 'zh-CN': + '

使用 config.disabled 配置一个方法,用于判断参数日期是否禁用。 使用 config.disabledColorClass 配置禁用日期的字体颜色类名。 使用 config.disabledBackgroundColorClass 配置禁用日期的背景颜色类名。

', + 'en-US': '

button round

' + }, + codeFiles: ['disabled.vue'] + }, + { + demoId: 'marked', + name: { + 'zh-CN': '日期标记', + 'en-US': 'events' + }, + desc: { + 'zh-CN': + '

使用 config.mark 配置一个方法,用于判断参数日期是否存在标记。 此方法返回空字符串表示不存在标记,返回非空字符串表示存在标记,且标记内容就是该字符串。 使用 config.markBackgroundColorClass 配置标记的颜色类名。 使用 config.showMarkMessage 配置是否开启标记 title 提示,默认值为 false

', + 'en-US': '

bbutton click

' + }, + codeFiles: ['marked.vue'] + }, + { + demoId: 'render-current', + name: { + 'zh-CN': '当前日期', + 'en-US': 'events' + }, + desc: { + 'zh-CN': + '

用户传入的日期为 当前日期 。 使用 config.currentColorClass 配置 当前日期 的字体颜色类名; 使用 config.currentBackgroundColorClass 配置 当前日期 的背景颜色类名。

', + 'en-US': '

bbutton click

' + }, + codeFiles: ['render-current.vue'] + }, + { + demoId: 'render-today', + name: { + 'zh-CN': '今天', + 'en-US': 'events' + }, + desc: { + 'zh-CN': '

使用 config.renderItem 可以配置一个方法,对日期面板的某些项进行定制渲染。

', + 'en-US': '

bbutton click

' + }, + codeFiles: ['render-today.vue'] + }, + { + demoId: 'week-first', + name: { + 'zh-CN': '周起始', + 'en-US': 'events' + }, + desc: { + 'zh-CN': + '

使用 config.weekFirst 配置每周的起始天。默认值为 0,表示周起始为 周日。也可以配置为 1 ~ 6,分别表示 周一 ~ 周六

', + 'en-US': '

bbutton click

' + }, + codeFiles: ['week-first.vue'] + }, + { + demoId: 'workday', + name: { + 'zh-CN': '工作日', + 'en-US': 'events' + }, + desc: { + 'zh-CN': + '

用户传入的日期为 当前日期,当前日期所在月份为 当前月份,当前月份周六周日为 周末,非周六周日为 工作日。 使用 config.workday 配置一个方法,用于判断 工作日 是否作为真正的工作日; 使用 config.holiday 配置一个方法,用于判断 周末 是否作为真正的周末; 使用 config.workdayColorClass 和 config.holidayColorClass 配置工作日和周末的字体颜色类。

', + 'en-US': '

bbutton click

' + }, + codeFiles: ['marked.vue'] + } + ], + apis: [] +} diff --git a/examples/docs/resources/mobile-first/app/calendar-bar/week-first.vue b/examples/docs/resources/mobile-first/app/calendar-bar/week-first.vue new file mode 100644 index 000000000..36deb554e --- /dev/null +++ b/examples/docs/resources/mobile-first/app/calendar-bar/week-first.vue @@ -0,0 +1,21 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/calendar-bar/workday.vue b/examples/docs/resources/mobile-first/app/calendar-bar/workday.vue new file mode 100644 index 000000000..f4a85a094 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/calendar-bar/workday.vue @@ -0,0 +1,44 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/card/basic-usage.vue b/examples/docs/resources/mobile-first/app/card/basic-usage.vue new file mode 100644 index 000000000..8eb3dc0bd --- /dev/null +++ b/examples/docs/resources/mobile-first/app/card/basic-usage.vue @@ -0,0 +1,21 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/card/card-disabled.vue b/examples/docs/resources/mobile-first/app/card/card-disabled.vue new file mode 100644 index 000000000..2f8ef4f21 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/card/card-disabled.vue @@ -0,0 +1,46 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/card/card-events.vue b/examples/docs/resources/mobile-first/app/card/card-events.vue new file mode 100644 index 000000000..2663a96e5 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/card/card-events.vue @@ -0,0 +1,60 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/card/card-group.vue b/examples/docs/resources/mobile-first/app/card/card-group.vue new file mode 100644 index 000000000..2a099cd89 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/card/card-group.vue @@ -0,0 +1,70 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/card/card-size.vue b/examples/docs/resources/mobile-first/app/card/card-size.vue new file mode 100644 index 000000000..d098600f2 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/card/card-size.vue @@ -0,0 +1,60 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/card/card-status.vue b/examples/docs/resources/mobile-first/app/card/card-status.vue new file mode 100644 index 000000000..7f2659aef --- /dev/null +++ b/examples/docs/resources/mobile-first/app/card/card-status.vue @@ -0,0 +1,44 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/card/card-type.vue b/examples/docs/resources/mobile-first/app/card/card-type.vue new file mode 100644 index 000000000..a70bacc3b --- /dev/null +++ b/examples/docs/resources/mobile-first/app/card/card-type.vue @@ -0,0 +1,41 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/card/check-type-checkbox.vue b/examples/docs/resources/mobile-first/app/card/check-type-checkbox.vue new file mode 100644 index 000000000..aff36deb7 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/card/check-type-checkbox.vue @@ -0,0 +1,32 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/card/check-type-radio.vue b/examples/docs/resources/mobile-first/app/card/check-type-radio.vue new file mode 100644 index 000000000..ef00ed845 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/card/check-type-radio.vue @@ -0,0 +1,32 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/card/custom-class.vue b/examples/docs/resources/mobile-first/app/card/custom-class.vue new file mode 100644 index 000000000..289f26575 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/card/custom-class.vue @@ -0,0 +1,52 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/card/operate-bar.vue b/examples/docs/resources/mobile-first/app/card/operate-bar.vue new file mode 100644 index 000000000..36b28dc40 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/card/operate-bar.vue @@ -0,0 +1,45 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/card/slot.vue b/examples/docs/resources/mobile-first/app/card/slot.vue new file mode 100644 index 000000000..85925e6f8 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/card/slot.vue @@ -0,0 +1,82 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/carousel/aspect-ratio.vue b/examples/docs/resources/mobile-first/app/carousel/aspect-ratio.vue new file mode 100644 index 000000000..1cfa157c1 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/carousel/aspect-ratio.vue @@ -0,0 +1,28 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/carousel/autoplay.vue b/examples/docs/resources/mobile-first/app/carousel/autoplay.vue new file mode 100644 index 000000000..8fdb55f0c --- /dev/null +++ b/examples/docs/resources/mobile-first/app/carousel/autoplay.vue @@ -0,0 +1,28 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/carousel/basic-usage.vue b/examples/docs/resources/mobile-first/app/carousel/basic-usage.vue new file mode 100644 index 000000000..81c94a4b6 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/carousel/basic-usage.vue @@ -0,0 +1,28 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/carousel/carousel-arrow-always.vue b/examples/docs/resources/mobile-first/app/carousel/carousel-arrow-always.vue new file mode 100644 index 000000000..6baf1e640 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/carousel/carousel-arrow-always.vue @@ -0,0 +1,28 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/carousel/carousel-arrow-hover.vue b/examples/docs/resources/mobile-first/app/carousel/carousel-arrow-hover.vue new file mode 100644 index 000000000..9cc1b8b85 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/carousel/carousel-arrow-hover.vue @@ -0,0 +1,28 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/carousel/carousel-arrow-never.vue b/examples/docs/resources/mobile-first/app/carousel/carousel-arrow-never.vue new file mode 100644 index 000000000..b28c04b59 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/carousel/carousel-arrow-never.vue @@ -0,0 +1,28 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/carousel/close-loop.vue b/examples/docs/resources/mobile-first/app/carousel/close-loop.vue new file mode 100644 index 000000000..b30701758 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/carousel/close-loop.vue @@ -0,0 +1,29 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/carousel/custom-height.vue b/examples/docs/resources/mobile-first/app/carousel/custom-height.vue new file mode 100644 index 000000000..487ad55b6 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/carousel/custom-height.vue @@ -0,0 +1,36 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/carousel/indicator-style.vue b/examples/docs/resources/mobile-first/app/carousel/indicator-style.vue new file mode 100644 index 000000000..5f61d5e76 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/carousel/indicator-style.vue @@ -0,0 +1,28 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/carousel/indicator-trigger.vue b/examples/docs/resources/mobile-first/app/carousel/indicator-trigger.vue new file mode 100644 index 000000000..25cf5ae77 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/carousel/indicator-trigger.vue @@ -0,0 +1,28 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/carousel/initial-index.vue b/examples/docs/resources/mobile-first/app/carousel/initial-index.vue new file mode 100644 index 000000000..f137acfc9 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/carousel/initial-index.vue @@ -0,0 +1,28 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/carousel/manual-play.vue b/examples/docs/resources/mobile-first/app/carousel/manual-play.vue new file mode 100644 index 000000000..fb60a6ef5 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/carousel/manual-play.vue @@ -0,0 +1,55 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/carousel/play-interval.vue b/examples/docs/resources/mobile-first/app/carousel/play-interval.vue new file mode 100644 index 000000000..2873d9d52 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/carousel/play-interval.vue @@ -0,0 +1,28 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/carousel/show-title.vue b/examples/docs/resources/mobile-first/app/carousel/show-title.vue new file mode 100644 index 000000000..50517f462 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/carousel/show-title.vue @@ -0,0 +1,28 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/carousel/up-down-carousel.vue b/examples/docs/resources/mobile-first/app/carousel/up-down-carousel.vue new file mode 100644 index 000000000..6c9e2de92 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/carousel/up-down-carousel.vue @@ -0,0 +1,28 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/cascader-select/basic-usage.vue b/examples/docs/resources/mobile-first/app/cascader-select/basic-usage.vue new file mode 100644 index 000000000..3a07b01df --- /dev/null +++ b/examples/docs/resources/mobile-first/app/cascader-select/basic-usage.vue @@ -0,0 +1,98 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/cascader-select/cities.vue b/examples/docs/resources/mobile-first/app/cascader-select/cities.vue new file mode 100644 index 000000000..db6456516 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/cascader-select/cities.vue @@ -0,0 +1,56 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/cascader-select/cycle-roll.vue b/examples/docs/resources/mobile-first/app/cascader-select/cycle-roll.vue new file mode 100644 index 000000000..873dc3547 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/cascader-select/cycle-roll.vue @@ -0,0 +1,98 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/cascader-select/disabled-array.vue b/examples/docs/resources/mobile-first/app/cascader-select/disabled-array.vue new file mode 100644 index 000000000..04b6218af --- /dev/null +++ b/examples/docs/resources/mobile-first/app/cascader-select/disabled-array.vue @@ -0,0 +1,106 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/cascader-select/disabled.vue b/examples/docs/resources/mobile-first/app/cascader-select/disabled.vue new file mode 100644 index 000000000..1e01583c8 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/cascader-select/disabled.vue @@ -0,0 +1,58 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/cascader-select/object-option.vue b/examples/docs/resources/mobile-first/app/cascader-select/object-option.vue new file mode 100644 index 000000000..8d52b9111 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/cascader-select/object-option.vue @@ -0,0 +1,55 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/cascader-select/text-color-class.vue b/examples/docs/resources/mobile-first/app/cascader-select/text-color-class.vue new file mode 100644 index 000000000..850db6dd3 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/cascader-select/text-color-class.vue @@ -0,0 +1,112 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/checkbox/basic-usage.vue b/examples/docs/resources/mobile-first/app/checkbox/basic-usage.vue new file mode 100644 index 000000000..9b39dfc4b --- /dev/null +++ b/examples/docs/resources/mobile-first/app/checkbox/basic-usage.vue @@ -0,0 +1,20 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/checkbox/button-chek-box.vue b/examples/docs/resources/mobile-first/app/checkbox/button-chek-box.vue new file mode 100644 index 000000000..ff8063b1e --- /dev/null +++ b/examples/docs/resources/mobile-first/app/checkbox/button-chek-box.vue @@ -0,0 +1,36 @@ + + + + + \ No newline at end of file diff --git a/examples/docs/resources/mobile-first/app/checkbox/checkbox-button.vue b/examples/docs/resources/mobile-first/app/checkbox/checkbox-button.vue new file mode 100644 index 000000000..de69b5179 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/checkbox/checkbox-button.vue @@ -0,0 +1,33 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/checkbox/checkbox-events.vue b/examples/docs/resources/mobile-first/app/checkbox/checkbox-events.vue new file mode 100644 index 000000000..9de996c39 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/checkbox/checkbox-events.vue @@ -0,0 +1,31 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/checkbox/checkbox-group.vue b/examples/docs/resources/mobile-first/app/checkbox/checkbox-group.vue new file mode 100644 index 000000000..eb6b6344b --- /dev/null +++ b/examples/docs/resources/mobile-first/app/checkbox/checkbox-group.vue @@ -0,0 +1,22 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/checkbox/checkbox-slot.vue b/examples/docs/resources/mobile-first/app/checkbox/checkbox-slot.vue new file mode 100644 index 000000000..0d6f3c167 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/checkbox/checkbox-slot.vue @@ -0,0 +1,30 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/checkbox/checked.vue b/examples/docs/resources/mobile-first/app/checkbox/checked.vue new file mode 100644 index 000000000..5bb87e2be --- /dev/null +++ b/examples/docs/resources/mobile-first/app/checkbox/checked.vue @@ -0,0 +1,22 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/checkbox/content-overflow.vue b/examples/docs/resources/mobile-first/app/checkbox/content-overflow.vue new file mode 100644 index 000000000..edd9b89f7 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/checkbox/content-overflow.vue @@ -0,0 +1,33 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/checkbox/dynamic-create-checkbox.vue b/examples/docs/resources/mobile-first/app/checkbox/dynamic-create-checkbox.vue new file mode 100644 index 000000000..7a94467f2 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/checkbox/dynamic-create-checkbox.vue @@ -0,0 +1,68 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/checkbox/group-options.vue b/examples/docs/resources/mobile-first/app/checkbox/group-options.vue new file mode 100644 index 000000000..88a6d8b4f --- /dev/null +++ b/examples/docs/resources/mobile-first/app/checkbox/group-options.vue @@ -0,0 +1,27 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/checkbox/indeterminate.vue b/examples/docs/resources/mobile-first/app/checkbox/indeterminate.vue new file mode 100644 index 000000000..718c74dd1 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/checkbox/indeterminate.vue @@ -0,0 +1,47 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/checkbox/min-max.vue b/examples/docs/resources/mobile-first/app/checkbox/min-max.vue new file mode 100644 index 000000000..c6dab83ce --- /dev/null +++ b/examples/docs/resources/mobile-first/app/checkbox/min-max.vue @@ -0,0 +1,24 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/checkbox/text.vue b/examples/docs/resources/mobile-first/app/checkbox/text.vue new file mode 100644 index 000000000..374b7a215 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/checkbox/text.vue @@ -0,0 +1,36 @@ + + + + + \ No newline at end of file diff --git a/examples/docs/resources/mobile-first/app/checkbox/vertical-checkbox.vue b/examples/docs/resources/mobile-first/app/checkbox/vertical-checkbox.vue new file mode 100644 index 000000000..cbdfbab7a --- /dev/null +++ b/examples/docs/resources/mobile-first/app/checkbox/vertical-checkbox.vue @@ -0,0 +1,24 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/checkbox/with-border.vue b/examples/docs/resources/mobile-first/app/checkbox/with-border.vue new file mode 100644 index 000000000..7bd87cda2 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/checkbox/with-border.vue @@ -0,0 +1,52 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/collapse/accordion.vue b/examples/docs/resources/mobile-first/app/collapse/accordion.vue new file mode 100644 index 000000000..432f4fedd --- /dev/null +++ b/examples/docs/resources/mobile-first/app/collapse/accordion.vue @@ -0,0 +1,45 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/collapse/basic-usage.vue b/examples/docs/resources/mobile-first/app/collapse/basic-usage.vue new file mode 100644 index 000000000..c4eb3e300 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/collapse/basic-usage.vue @@ -0,0 +1,37 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/collapse/block-close.vue b/examples/docs/resources/mobile-first/app/collapse/block-close.vue new file mode 100644 index 000000000..6ca635ae6 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/collapse/block-close.vue @@ -0,0 +1,43 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/collapse/collapse-events.vue b/examples/docs/resources/mobile-first/app/collapse/collapse-events.vue new file mode 100644 index 000000000..db848d775 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/collapse/collapse-events.vue @@ -0,0 +1,45 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/collapse/custom-collapse-title-right.vue b/examples/docs/resources/mobile-first/app/collapse/custom-collapse-title-right.vue new file mode 100644 index 000000000..05b968b02 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/collapse/custom-collapse-title-right.vue @@ -0,0 +1,44 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/collapse/custom-collapse-title.vue b/examples/docs/resources/mobile-first/app/collapse/custom-collapse-title.vue new file mode 100644 index 000000000..a5fe9b173 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/collapse/custom-collapse-title.vue @@ -0,0 +1,49 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/collapse/dynamic-disable.vue b/examples/docs/resources/mobile-first/app/collapse/dynamic-disable.vue new file mode 100644 index 000000000..19950ed3b --- /dev/null +++ b/examples/docs/resources/mobile-first/app/collapse/dynamic-disable.vue @@ -0,0 +1,37 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/collapse/nested-form.vue b/examples/docs/resources/mobile-first/app/collapse/nested-form.vue new file mode 100644 index 000000000..2a6cc90b6 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/collapse/nested-form.vue @@ -0,0 +1,49 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/collapse/nested-grid.vue b/examples/docs/resources/mobile-first/app/collapse/nested-grid.vue new file mode 100644 index 000000000..618c7d1ba --- /dev/null +++ b/examples/docs/resources/mobile-first/app/collapse/nested-grid.vue @@ -0,0 +1,87 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/collapse/slot-icon.vue b/examples/docs/resources/mobile-first/app/collapse/slot-icon.vue new file mode 100644 index 000000000..95ef23b11 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/collapse/slot-icon.vue @@ -0,0 +1,39 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/collapse/slot-title-right.vue b/examples/docs/resources/mobile-first/app/collapse/slot-title-right.vue new file mode 100644 index 000000000..9238a1395 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/collapse/slot-title-right.vue @@ -0,0 +1,39 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/collapse/slot-title.vue b/examples/docs/resources/mobile-first/app/collapse/slot-title.vue new file mode 100644 index 000000000..26afc8ad6 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/collapse/slot-title.vue @@ -0,0 +1,49 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/column-list-item/basic-usage.vue b/examples/docs/resources/mobile-first/app/column-list-item/basic-usage.vue new file mode 100644 index 000000000..5b3aff023 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/column-list-item/basic-usage.vue @@ -0,0 +1,141 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/column-list-item/content-slot.vue b/examples/docs/resources/mobile-first/app/column-list-item/content-slot.vue new file mode 100644 index 000000000..771b0ccd7 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/column-list-item/content-slot.vue @@ -0,0 +1,87 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/column-list-item/custom-width.vue b/examples/docs/resources/mobile-first/app/column-list-item/custom-width.vue new file mode 100644 index 000000000..13f974c30 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/column-list-item/custom-width.vue @@ -0,0 +1,62 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/column-list-item/icon-click-event.vue b/examples/docs/resources/mobile-first/app/column-list-item/icon-click-event.vue new file mode 100644 index 000000000..dc3a6c8c2 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/column-list-item/icon-click-event.vue @@ -0,0 +1,74 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/column-list-item/icon-disabled.vue b/examples/docs/resources/mobile-first/app/column-list-item/icon-disabled.vue new file mode 100644 index 000000000..284380b59 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/column-list-item/icon-disabled.vue @@ -0,0 +1,81 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/column-list-item/image-operate-slot.vue b/examples/docs/resources/mobile-first/app/column-list-item/image-operate-slot.vue new file mode 100644 index 000000000..f293a8e25 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/column-list-item/image-operate-slot.vue @@ -0,0 +1,58 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/column-list-item/list-group.vue b/examples/docs/resources/mobile-first/app/column-list-item/list-group.vue new file mode 100644 index 000000000..cd4968f22 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/column-list-item/list-group.vue @@ -0,0 +1,85 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/column-list-item/show-checkbox.vue b/examples/docs/resources/mobile-first/app/column-list-item/show-checkbox.vue new file mode 100644 index 000000000..38d01072a --- /dev/null +++ b/examples/docs/resources/mobile-first/app/column-list-item/show-checkbox.vue @@ -0,0 +1,52 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/column-list-item/size.vue b/examples/docs/resources/mobile-first/app/column-list-item/size.vue new file mode 100644 index 000000000..9c90dd7cb --- /dev/null +++ b/examples/docs/resources/mobile-first/app/column-list-item/size.vue @@ -0,0 +1,87 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/date-picker-mobile/basic-usage.vue b/examples/docs/resources/mobile-first/app/date-picker-mobile/basic-usage.vue new file mode 100644 index 000000000..a18312de9 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/date-picker-mobile/basic-usage.vue @@ -0,0 +1,39 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/date-picker-mobile/date-range.vue b/examples/docs/resources/mobile-first/app/date-picker-mobile/date-range.vue new file mode 100644 index 000000000..cea32ebe4 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/date-picker-mobile/date-range.vue @@ -0,0 +1,41 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/date-picker-mobile/datetime-range.vue b/examples/docs/resources/mobile-first/app/date-picker-mobile/datetime-range.vue new file mode 100644 index 000000000..cdcfd4f40 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/date-picker-mobile/datetime-range.vue @@ -0,0 +1,49 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/date-picker-mobile/datetime.vue b/examples/docs/resources/mobile-first/app/date-picker-mobile/datetime.vue new file mode 100644 index 000000000..70fc0eb09 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/date-picker-mobile/datetime.vue @@ -0,0 +1,48 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/drawer/basic-usage.vue b/examples/docs/resources/mobile-first/app/drawer/basic-usage.vue new file mode 100644 index 000000000..4c7ba866f --- /dev/null +++ b/examples/docs/resources/mobile-first/app/drawer/basic-usage.vue @@ -0,0 +1,29 @@ + + + \ No newline at end of file diff --git a/examples/docs/resources/mobile-first/app/drawer/dragable.vue b/examples/docs/resources/mobile-first/app/drawer/dragable.vue new file mode 100644 index 000000000..faaed9cbc --- /dev/null +++ b/examples/docs/resources/mobile-first/app/drawer/dragable.vue @@ -0,0 +1,33 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/drawer/event.vue b/examples/docs/resources/mobile-first/app/drawer/event.vue new file mode 100644 index 000000000..0f388e094 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/drawer/event.vue @@ -0,0 +1,35 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/drawer/mask-event.vue b/examples/docs/resources/mobile-first/app/drawer/mask-event.vue new file mode 100644 index 000000000..e188b2f0d --- /dev/null +++ b/examples/docs/resources/mobile-first/app/drawer/mask-event.vue @@ -0,0 +1,29 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/drawer/mask.vue b/examples/docs/resources/mobile-first/app/drawer/mask.vue new file mode 100644 index 000000000..dd74d5413 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/drawer/mask.vue @@ -0,0 +1,29 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/drawer/placement.vue b/examples/docs/resources/mobile-first/app/drawer/placement.vue new file mode 100644 index 000000000..90f9320c6 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/drawer/placement.vue @@ -0,0 +1,35 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/drawer/show.vue b/examples/docs/resources/mobile-first/app/drawer/show.vue new file mode 100644 index 000000000..d191e7dac --- /dev/null +++ b/examples/docs/resources/mobile-first/app/drawer/show.vue @@ -0,0 +1,36 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/drawer/slot.vue b/examples/docs/resources/mobile-first/app/drawer/slot.vue new file mode 100644 index 000000000..22690849a --- /dev/null +++ b/examples/docs/resources/mobile-first/app/drawer/slot.vue @@ -0,0 +1,32 @@ + + + \ No newline at end of file diff --git a/examples/docs/resources/mobile-first/app/drawer/width.vue b/examples/docs/resources/mobile-first/app/drawer/width.vue new file mode 100644 index 000000000..9eae8afea --- /dev/null +++ b/examples/docs/resources/mobile-first/app/drawer/width.vue @@ -0,0 +1,33 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/dropdown/arrow-button.vue b/examples/docs/resources/mobile-first/app/dropdown/arrow-button.vue new file mode 100644 index 000000000..dabf88e97 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/dropdown/arrow-button.vue @@ -0,0 +1,25 @@ + + diff --git a/examples/docs/resources/mobile-first/app/dropdown/basic-usage.vue b/examples/docs/resources/mobile-first/app/dropdown/basic-usage.vue new file mode 100644 index 000000000..e1494dfcf --- /dev/null +++ b/examples/docs/resources/mobile-first/app/dropdown/basic-usage.vue @@ -0,0 +1,25 @@ + + diff --git a/examples/docs/resources/mobile-first/app/dropdown/border-size.vue b/examples/docs/resources/mobile-first/app/dropdown/border-size.vue new file mode 100644 index 000000000..1f46f8ed4 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/dropdown/border-size.vue @@ -0,0 +1,25 @@ + + diff --git a/examples/docs/resources/mobile-first/app/dropdown/button-dropdown.vue b/examples/docs/resources/mobile-first/app/dropdown/button-dropdown.vue new file mode 100644 index 000000000..935f50a42 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/dropdown/button-dropdown.vue @@ -0,0 +1,23 @@ + + diff --git a/examples/docs/resources/mobile-first/app/dropdown/button-size.vue b/examples/docs/resources/mobile-first/app/dropdown/button-size.vue new file mode 100644 index 000000000..4d7deaaf5 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/dropdown/button-size.vue @@ -0,0 +1,25 @@ + + diff --git a/examples/docs/resources/mobile-first/app/dropdown/button-type.vue b/examples/docs/resources/mobile-first/app/dropdown/button-type.vue new file mode 100644 index 000000000..1258c7441 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/dropdown/button-type.vue @@ -0,0 +1,23 @@ + + diff --git a/examples/docs/resources/mobile-first/app/dropdown/checked-status.vue b/examples/docs/resources/mobile-first/app/dropdown/checked-status.vue new file mode 100644 index 000000000..9fb1a95a2 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/dropdown/checked-status.vue @@ -0,0 +1,26 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/dropdown/events-button-click.vue b/examples/docs/resources/mobile-first/app/dropdown/events-button-click.vue new file mode 100644 index 000000000..c873e015d --- /dev/null +++ b/examples/docs/resources/mobile-first/app/dropdown/events-button-click.vue @@ -0,0 +1,28 @@ + + diff --git a/examples/docs/resources/mobile-first/app/dropdown/events-item-click.vue b/examples/docs/resources/mobile-first/app/dropdown/events-item-click.vue new file mode 100644 index 000000000..9587d2297 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/dropdown/events-item-click.vue @@ -0,0 +1,30 @@ + + diff --git a/examples/docs/resources/mobile-first/app/dropdown/events-visible-change.vue b/examples/docs/resources/mobile-first/app/dropdown/events-visible-change.vue new file mode 100644 index 000000000..5b9b2aefb --- /dev/null +++ b/examples/docs/resources/mobile-first/app/dropdown/events-visible-change.vue @@ -0,0 +1,33 @@ + + diff --git a/examples/docs/resources/mobile-first/app/dropdown/label-over.vue b/examples/docs/resources/mobile-first/app/dropdown/label-over.vue new file mode 100644 index 000000000..ff2ac7a2a --- /dev/null +++ b/examples/docs/resources/mobile-first/app/dropdown/label-over.vue @@ -0,0 +1,24 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/dropdown/many-dropdown.vue b/examples/docs/resources/mobile-first/app/dropdown/many-dropdown.vue new file mode 100644 index 000000000..0cf4f43dd --- /dev/null +++ b/examples/docs/resources/mobile-first/app/dropdown/many-dropdown.vue @@ -0,0 +1,25 @@ + + diff --git a/examples/docs/resources/mobile-first/app/dropdown/max-height.vue b/examples/docs/resources/mobile-first/app/dropdown/max-height.vue new file mode 100644 index 000000000..b256af7fb --- /dev/null +++ b/examples/docs/resources/mobile-first/app/dropdown/max-height.vue @@ -0,0 +1,51 @@ + + diff --git a/examples/docs/resources/mobile-first/app/dropdown/multi-stage.vue b/examples/docs/resources/mobile-first/app/dropdown/multi-stage.vue new file mode 100644 index 000000000..c7a95d2c1 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/dropdown/multi-stage.vue @@ -0,0 +1,30 @@ + + diff --git a/examples/docs/resources/mobile-first/app/dropdown/pop-direction.vue b/examples/docs/resources/mobile-first/app/dropdown/pop-direction.vue new file mode 100644 index 000000000..21b406e84 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/dropdown/pop-direction.vue @@ -0,0 +1,60 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/dropdown/trigger-event.vue b/examples/docs/resources/mobile-first/app/dropdown/trigger-event.vue new file mode 100644 index 000000000..3a2acd6f3 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/dropdown/trigger-event.vue @@ -0,0 +1,85 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/exception/button-text.vue b/examples/docs/resources/mobile-first/app/exception/button-text.vue new file mode 100644 index 000000000..b861e117c --- /dev/null +++ b/examples/docs/resources/mobile-first/app/exception/button-text.vue @@ -0,0 +1,21 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/exception/component-empty.vue b/examples/docs/resources/mobile-first/app/exception/component-empty.vue new file mode 100644 index 000000000..8828d5f3f --- /dev/null +++ b/examples/docs/resources/mobile-first/app/exception/component-empty.vue @@ -0,0 +1,59 @@ + + + + diff --git a/examples/docs/resources/mobile-first/app/exception/message.vue b/examples/docs/resources/mobile-first/app/exception/message.vue new file mode 100644 index 000000000..6a283b244 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/exception/message.vue @@ -0,0 +1,13 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/exception/page-empty.vue b/examples/docs/resources/mobile-first/app/exception/page-empty.vue new file mode 100644 index 000000000..dd5e7e0ff --- /dev/null +++ b/examples/docs/resources/mobile-first/app/exception/page-empty.vue @@ -0,0 +1,13 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/exception/sub-message.vue b/examples/docs/resources/mobile-first/app/exception/sub-message.vue new file mode 100644 index 000000000..081a167ea --- /dev/null +++ b/examples/docs/resources/mobile-first/app/exception/sub-message.vue @@ -0,0 +1,18 @@ + + + + diff --git a/examples/docs/resources/mobile-first/app/form/form-clear-validate.vue b/examples/docs/resources/mobile-first/app/form/form-clear-validate.vue new file mode 100644 index 000000000..95730ad97 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/form/form-clear-validate.vue @@ -0,0 +1,107 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/form/form-disabled.vue b/examples/docs/resources/mobile-first/app/form/form-disabled.vue new file mode 100644 index 000000000..410567532 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/form/form-disabled.vue @@ -0,0 +1,192 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/form/form-display-only.vue b/examples/docs/resources/mobile-first/app/form/form-display-only.vue new file mode 100644 index 000000000..f7dd79385 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/form/form-display-only.vue @@ -0,0 +1,181 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/form/form-in-row.vue b/examples/docs/resources/mobile-first/app/form/form-in-row.vue new file mode 100644 index 000000000..d5a18607f --- /dev/null +++ b/examples/docs/resources/mobile-first/app/form/form-in-row.vue @@ -0,0 +1,114 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/form/form-item-tip.vue b/examples/docs/resources/mobile-first/app/form/form-item-tip.vue new file mode 100644 index 000000000..2b3ca8906 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/form/form-item-tip.vue @@ -0,0 +1,68 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/form/form-validation.vue b/examples/docs/resources/mobile-first/app/form/form-validation.vue new file mode 100644 index 000000000..ad6b77ebb --- /dev/null +++ b/examples/docs/resources/mobile-first/app/form/form-validation.vue @@ -0,0 +1,103 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/form/frequently-used-form.vue b/examples/docs/resources/mobile-first/app/form/frequently-used-form.vue new file mode 100644 index 000000000..9d4ee51ff --- /dev/null +++ b/examples/docs/resources/mobile-first/app/form/frequently-used-form.vue @@ -0,0 +1,114 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/form/no-validate-to-add.vue b/examples/docs/resources/mobile-first/app/form/no-validate-to-add.vue new file mode 100644 index 000000000..ae0f815ec --- /dev/null +++ b/examples/docs/resources/mobile-first/app/form/no-validate-to-add.vue @@ -0,0 +1,137 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/form/popper-options-bubbling.vue b/examples/docs/resources/mobile-first/app/form/popper-options-bubbling.vue new file mode 100644 index 000000000..8c2886d61 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/form/popper-options-bubbling.vue @@ -0,0 +1,81 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/form/size.vue b/examples/docs/resources/mobile-first/app/form/size.vue new file mode 100644 index 000000000..0dcb938cc --- /dev/null +++ b/examples/docs/resources/mobile-first/app/form/size.vue @@ -0,0 +1,71 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/form/slot-label.vue b/examples/docs/resources/mobile-first/app/form/slot-label.vue new file mode 100644 index 000000000..5d6ed3b22 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/form/slot-label.vue @@ -0,0 +1,103 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/form/switch-from-item.vue b/examples/docs/resources/mobile-first/app/form/switch-from-item.vue new file mode 100644 index 000000000..9891476c7 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/form/switch-from-item.vue @@ -0,0 +1,97 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/form/validate-debounce.vue b/examples/docs/resources/mobile-first/app/form/validate-debounce.vue new file mode 100644 index 000000000..a2c6175c0 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/form/validate-debounce.vue @@ -0,0 +1,87 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/form/validate-type.vue b/examples/docs/resources/mobile-first/app/form/validate-type.vue new file mode 100644 index 000000000..b5701a4a9 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/form/validate-type.vue @@ -0,0 +1,85 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/form/validation-position.vue b/examples/docs/resources/mobile-first/app/form/validation-position.vue new file mode 100644 index 000000000..98aaad071 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/form/validation-position.vue @@ -0,0 +1,89 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/grid/basicUsage-conf.vue b/examples/docs/resources/mobile-first/app/grid/basicUsage-conf.vue new file mode 100644 index 000000000..644b2cbd0 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/grid/basicUsage-conf.vue @@ -0,0 +1,127 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/grid/basicUsage.vue b/examples/docs/resources/mobile-first/app/grid/basicUsage.vue new file mode 100644 index 000000000..649562222 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/grid/basicUsage.vue @@ -0,0 +1,179 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/grid/column-anchor.vue b/examples/docs/resources/mobile-first/app/grid/column-anchor.vue new file mode 100644 index 000000000..deac44b4f --- /dev/null +++ b/examples/docs/resources/mobile-first/app/grid/column-anchor.vue @@ -0,0 +1,144 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/grid/operation-column.vue b/examples/docs/resources/mobile-first/app/grid/operation-column.vue new file mode 100644 index 000000000..9c7135a10 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/grid/operation-column.vue @@ -0,0 +1,83 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/grid/toolbar-custom-teleport.vue b/examples/docs/resources/mobile-first/app/grid/toolbar-custom-teleport.vue new file mode 100644 index 000000000..8dd6d7dab --- /dev/null +++ b/examples/docs/resources/mobile-first/app/grid/toolbar-custom-teleport.vue @@ -0,0 +1,94 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/image/auto-fit-container-size.vue b/examples/docs/resources/mobile-first/app/image/auto-fit-container-size.vue new file mode 100644 index 000000000..6874e5a1a --- /dev/null +++ b/examples/docs/resources/mobile-first/app/image/auto-fit-container-size.vue @@ -0,0 +1,24 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/image/basic-usage.vue b/examples/docs/resources/mobile-first/app/image/basic-usage.vue new file mode 100644 index 000000000..6560be34d --- /dev/null +++ b/examples/docs/resources/mobile-first/app/image/basic-usage.vue @@ -0,0 +1,22 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/image/preview-src-list.vue b/examples/docs/resources/mobile-first/app/image/preview-src-list.vue new file mode 100644 index 000000000..e931e1c21 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/image/preview-src-list.vue @@ -0,0 +1,24 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/image/show-hover.vue b/examples/docs/resources/mobile-first/app/image/show-hover.vue new file mode 100644 index 000000000..68cf6daef --- /dev/null +++ b/examples/docs/resources/mobile-first/app/image/show-hover.vue @@ -0,0 +1,22 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/input/autocomplete.vue b/examples/docs/resources/mobile-first/app/input/autocomplete.vue new file mode 100644 index 000000000..903027123 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/input/autocomplete.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/input/autofocus.vue b/examples/docs/resources/mobile-first/app/input/autofocus.vue new file mode 100644 index 000000000..e2d8b51c0 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/input/autofocus.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/input/autosize.vue b/examples/docs/resources/mobile-first/app/input/autosize.vue new file mode 100644 index 000000000..2ebb67124 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/input/autosize.vue @@ -0,0 +1,27 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/input/basic-usage.vue b/examples/docs/resources/mobile-first/app/input/basic-usage.vue new file mode 100644 index 000000000..ae4767dd6 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/input/basic-usage.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/input/clearable.vue b/examples/docs/resources/mobile-first/app/input/clearable.vue new file mode 100644 index 000000000..974d706f6 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/input/clearable.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/input/cols.vue b/examples/docs/resources/mobile-first/app/input/cols.vue new file mode 100644 index 000000000..f832586e9 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/input/cols.vue @@ -0,0 +1,29 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/input/counter.vue b/examples/docs/resources/mobile-first/app/input/counter.vue new file mode 100644 index 000000000..b19b35bea --- /dev/null +++ b/examples/docs/resources/mobile-first/app/input/counter.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/input/disabled.vue b/examples/docs/resources/mobile-first/app/input/disabled.vue new file mode 100644 index 000000000..85105edae --- /dev/null +++ b/examples/docs/resources/mobile-first/app/input/disabled.vue @@ -0,0 +1,21 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/input/event-blur.vue b/examples/docs/resources/mobile-first/app/input/event-blur.vue new file mode 100644 index 000000000..e8a49bb69 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/input/event-blur.vue @@ -0,0 +1,31 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/input/event-change.vue b/examples/docs/resources/mobile-first/app/input/event-change.vue new file mode 100644 index 000000000..f02a4808e --- /dev/null +++ b/examples/docs/resources/mobile-first/app/input/event-change.vue @@ -0,0 +1,31 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/input/event-clear.vue b/examples/docs/resources/mobile-first/app/input/event-clear.vue new file mode 100644 index 000000000..b7d570166 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/input/event-clear.vue @@ -0,0 +1,31 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/input/event-focus.vue b/examples/docs/resources/mobile-first/app/input/event-focus.vue new file mode 100644 index 000000000..7880d815d --- /dev/null +++ b/examples/docs/resources/mobile-first/app/input/event-focus.vue @@ -0,0 +1,31 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/input/event-input.vue b/examples/docs/resources/mobile-first/app/input/event-input.vue new file mode 100644 index 000000000..125ff0ae6 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/input/event-input.vue @@ -0,0 +1,31 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/input/form.vue b/examples/docs/resources/mobile-first/app/input/form.vue new file mode 100644 index 000000000..e264a03c7 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/input/form.vue @@ -0,0 +1,28 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/input/label.vue b/examples/docs/resources/mobile-first/app/input/label.vue new file mode 100644 index 000000000..105107e21 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/input/label.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/input/max.vue b/examples/docs/resources/mobile-first/app/input/max.vue new file mode 100644 index 000000000..6ce5bdd7b --- /dev/null +++ b/examples/docs/resources/mobile-first/app/input/max.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/input/maxlength.vue b/examples/docs/resources/mobile-first/app/input/maxlength.vue new file mode 100644 index 000000000..0b81d899c --- /dev/null +++ b/examples/docs/resources/mobile-first/app/input/maxlength.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/input/method-addMemory.vue b/examples/docs/resources/mobile-first/app/input/method-addMemory.vue new file mode 100644 index 000000000..45ace489d --- /dev/null +++ b/examples/docs/resources/mobile-first/app/input/method-addMemory.vue @@ -0,0 +1,37 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/input/method-blur.vue b/examples/docs/resources/mobile-first/app/input/method-blur.vue new file mode 100644 index 000000000..e941fe673 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/input/method-blur.vue @@ -0,0 +1,31 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/input/method-focus.vue b/examples/docs/resources/mobile-first/app/input/method-focus.vue new file mode 100644 index 000000000..d1bea664f --- /dev/null +++ b/examples/docs/resources/mobile-first/app/input/method-focus.vue @@ -0,0 +1,35 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/input/method-select.vue b/examples/docs/resources/mobile-first/app/input/method-select.vue new file mode 100644 index 000000000..9d84efb68 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/input/method-select.vue @@ -0,0 +1,35 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/input/min.vue b/examples/docs/resources/mobile-first/app/input/min.vue new file mode 100644 index 000000000..72719776f --- /dev/null +++ b/examples/docs/resources/mobile-first/app/input/min.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/input/name.vue b/examples/docs/resources/mobile-first/app/input/name.vue new file mode 100644 index 000000000..e99035a2d --- /dev/null +++ b/examples/docs/resources/mobile-first/app/input/name.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/input/placeholder.vue b/examples/docs/resources/mobile-first/app/input/placeholder.vue new file mode 100644 index 000000000..dad7eb89b --- /dev/null +++ b/examples/docs/resources/mobile-first/app/input/placeholder.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/input/prefix-icon.vue b/examples/docs/resources/mobile-first/app/input/prefix-icon.vue new file mode 100644 index 000000000..45c059607 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/input/prefix-icon.vue @@ -0,0 +1,28 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/input/readonly.vue b/examples/docs/resources/mobile-first/app/input/readonly.vue new file mode 100644 index 000000000..19fb5fe57 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/input/readonly.vue @@ -0,0 +1,21 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/input/resize.vue b/examples/docs/resources/mobile-first/app/input/resize.vue new file mode 100644 index 000000000..af0819e67 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/input/resize.vue @@ -0,0 +1,38 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/input/rows.vue b/examples/docs/resources/mobile-first/app/input/rows.vue new file mode 100644 index 000000000..3d1681b2a --- /dev/null +++ b/examples/docs/resources/mobile-first/app/input/rows.vue @@ -0,0 +1,29 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/input/show-password.vue b/examples/docs/resources/mobile-first/app/input/show-password.vue new file mode 100644 index 000000000..93f871916 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/input/show-password.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/input/show-word-limit.vue b/examples/docs/resources/mobile-first/app/input/show-word-limit.vue new file mode 100644 index 000000000..cc6722e7a --- /dev/null +++ b/examples/docs/resources/mobile-first/app/input/show-word-limit.vue @@ -0,0 +1,34 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/input/size.vue b/examples/docs/resources/mobile-first/app/input/size.vue new file mode 100644 index 000000000..eb0b58c96 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/input/size.vue @@ -0,0 +1,29 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/input/slot-append.vue b/examples/docs/resources/mobile-first/app/input/slot-append.vue new file mode 100644 index 000000000..31c213043 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/input/slot-append.vue @@ -0,0 +1,28 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/input/slot-prefix.vue b/examples/docs/resources/mobile-first/app/input/slot-prefix.vue new file mode 100644 index 000000000..29a52de6d --- /dev/null +++ b/examples/docs/resources/mobile-first/app/input/slot-prefix.vue @@ -0,0 +1,32 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/input/slot-prepend.vue b/examples/docs/resources/mobile-first/app/input/slot-prepend.vue new file mode 100644 index 000000000..1e8a5088c --- /dev/null +++ b/examples/docs/resources/mobile-first/app/input/slot-prepend.vue @@ -0,0 +1,28 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/input/slot-suffix.vue b/examples/docs/resources/mobile-first/app/input/slot-suffix.vue new file mode 100644 index 000000000..45d8f368a --- /dev/null +++ b/examples/docs/resources/mobile-first/app/input/slot-suffix.vue @@ -0,0 +1,32 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/input/step.vue b/examples/docs/resources/mobile-first/app/input/step.vue new file mode 100644 index 000000000..0ea10e120 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/input/step.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/input/suffix-icon.vue b/examples/docs/resources/mobile-first/app/input/suffix-icon.vue new file mode 100644 index 000000000..04b1c4db0 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/input/suffix-icon.vue @@ -0,0 +1,28 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/input/tabindex.vue b/examples/docs/resources/mobile-first/app/input/tabindex.vue new file mode 100644 index 000000000..108364a25 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/input/tabindex.vue @@ -0,0 +1,27 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/input/type.vue b/examples/docs/resources/mobile-first/app/input/type.vue new file mode 100644 index 000000000..17358115b --- /dev/null +++ b/examples/docs/resources/mobile-first/app/input/type.vue @@ -0,0 +1,89 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/input/validate-event.vue b/examples/docs/resources/mobile-first/app/input/validate-event.vue new file mode 100644 index 000000000..09194f9d3 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/input/validate-event.vue @@ -0,0 +1,38 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/loading/background.vue b/examples/docs/resources/mobile-first/app/loading/background.vue new file mode 100644 index 000000000..d39253309 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/loading/background.vue @@ -0,0 +1,23 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/loading/basic-usage.vue b/examples/docs/resources/mobile-first/app/loading/basic-usage.vue new file mode 100644 index 000000000..6970d203a --- /dev/null +++ b/examples/docs/resources/mobile-first/app/loading/basic-usage.vue @@ -0,0 +1,31 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/loading/body.vue b/examples/docs/resources/mobile-first/app/loading/body.vue new file mode 100644 index 000000000..b0387082a --- /dev/null +++ b/examples/docs/resources/mobile-first/app/loading/body.vue @@ -0,0 +1,46 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/loading/custom-class.vue b/examples/docs/resources/mobile-first/app/loading/custom-class.vue new file mode 100644 index 000000000..b1b820550 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/loading/custom-class.vue @@ -0,0 +1,24 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/loading/fullscreen.vue b/examples/docs/resources/mobile-first/app/loading/fullscreen.vue new file mode 100644 index 000000000..164cebda2 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/loading/fullscreen.vue @@ -0,0 +1,44 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/loading/loading-size.vue b/examples/docs/resources/mobile-first/app/loading/loading-size.vue new file mode 100644 index 000000000..d8dcea6ad --- /dev/null +++ b/examples/docs/resources/mobile-first/app/loading/loading-size.vue @@ -0,0 +1,29 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/loading/loading-tip-text.vue b/examples/docs/resources/mobile-first/app/loading/loading-tip-text.vue new file mode 100644 index 000000000..60a7b45d5 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/loading/loading-tip-text.vue @@ -0,0 +1,22 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/loading/spinner.vue b/examples/docs/resources/mobile-first/app/loading/spinner.vue new file mode 100644 index 000000000..d0cd1bde4 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/loading/spinner.vue @@ -0,0 +1,25 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/loading/target.vue b/examples/docs/resources/mobile-first/app/loading/target.vue new file mode 100644 index 000000000..84ad671ce --- /dev/null +++ b/examples/docs/resources/mobile-first/app/loading/target.vue @@ -0,0 +1,27 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/message/base.vue b/examples/docs/resources/mobile-first/app/message/base.vue new file mode 100644 index 000000000..f4acf8f7a --- /dev/null +++ b/examples/docs/resources/mobile-first/app/message/base.vue @@ -0,0 +1,20 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/message/duration.vue b/examples/docs/resources/mobile-first/app/message/duration.vue new file mode 100644 index 000000000..41bb28335 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/message/duration.vue @@ -0,0 +1,36 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/message/id.vue b/examples/docs/resources/mobile-first/app/message/id.vue new file mode 100644 index 000000000..e50070f96 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/message/id.vue @@ -0,0 +1,18 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/message/status.vue b/examples/docs/resources/mobile-first/app/message/status.vue new file mode 100644 index 000000000..63ee66157 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/message/status.vue @@ -0,0 +1,32 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/modal/base.vue b/examples/docs/resources/mobile-first/app/modal/base.vue new file mode 100644 index 000000000..c643de9b8 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/modal/base.vue @@ -0,0 +1,36 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/modal/before-close.vue b/examples/docs/resources/mobile-first/app/modal/before-close.vue new file mode 100644 index 000000000..05f21e0f6 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/modal/before-close.vue @@ -0,0 +1,69 @@ + + diff --git a/examples/docs/resources/mobile-first/app/modal/cancel-event.vue b/examples/docs/resources/mobile-first/app/modal/cancel-event.vue new file mode 100644 index 000000000..7a085652b --- /dev/null +++ b/examples/docs/resources/mobile-first/app/modal/cancel-event.vue @@ -0,0 +1,31 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/modal/close-event.vue b/examples/docs/resources/mobile-first/app/modal/close-event.vue new file mode 100644 index 000000000..e223ff32a --- /dev/null +++ b/examples/docs/resources/mobile-first/app/modal/close-event.vue @@ -0,0 +1,31 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/modal/confirm-event.vue b/examples/docs/resources/mobile-first/app/modal/confirm-event.vue new file mode 100644 index 000000000..b04955487 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/modal/confirm-event.vue @@ -0,0 +1,31 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/modal/div-button-content.vue b/examples/docs/resources/mobile-first/app/modal/div-button-content.vue new file mode 100644 index 000000000..774c857a9 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/modal/div-button-content.vue @@ -0,0 +1,33 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/modal/duration.vue b/examples/docs/resources/mobile-first/app/modal/duration.vue new file mode 100644 index 000000000..a5e006bda --- /dev/null +++ b/examples/docs/resources/mobile-first/app/modal/duration.vue @@ -0,0 +1,36 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/modal/esc-closable.vue b/examples/docs/resources/mobile-first/app/modal/esc-closable.vue new file mode 100644 index 000000000..c1447490c --- /dev/null +++ b/examples/docs/resources/mobile-first/app/modal/esc-closable.vue @@ -0,0 +1,18 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/modal/footer-slot.vue b/examples/docs/resources/mobile-first/app/modal/footer-slot.vue new file mode 100644 index 000000000..352376169 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/modal/footer-slot.vue @@ -0,0 +1,26 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/modal/fullscreen.vue b/examples/docs/resources/mobile-first/app/modal/fullscreen.vue new file mode 100644 index 000000000..6a505d879 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/modal/fullscreen.vue @@ -0,0 +1,18 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/modal/grid.vue b/examples/docs/resources/mobile-first/app/modal/grid.vue new file mode 100644 index 000000000..26bdf5c7c --- /dev/null +++ b/examples/docs/resources/mobile-first/app/modal/grid.vue @@ -0,0 +1,59 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/modal/hide-event.vue b/examples/docs/resources/mobile-first/app/modal/hide-event.vue new file mode 100644 index 000000000..162dee51c --- /dev/null +++ b/examples/docs/resources/mobile-first/app/modal/hide-event.vue @@ -0,0 +1,31 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/modal/id.vue b/examples/docs/resources/mobile-first/app/modal/id.vue new file mode 100644 index 000000000..7c1cff617 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/modal/id.vue @@ -0,0 +1,18 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/modal/lock-scroll.vue b/examples/docs/resources/mobile-first/app/modal/lock-scroll.vue new file mode 100644 index 000000000..9921a341a --- /dev/null +++ b/examples/docs/resources/mobile-first/app/modal/lock-scroll.vue @@ -0,0 +1,22 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/modal/lock-view.vue b/examples/docs/resources/mobile-first/app/modal/lock-view.vue new file mode 100644 index 000000000..31d88f37d --- /dev/null +++ b/examples/docs/resources/mobile-first/app/modal/lock-view.vue @@ -0,0 +1,22 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/modal/mask-closable.vue b/examples/docs/resources/mobile-first/app/modal/mask-closable.vue new file mode 100644 index 000000000..41f708f3d --- /dev/null +++ b/examples/docs/resources/mobile-first/app/modal/mask-closable.vue @@ -0,0 +1,18 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/modal/message-jsx.vue b/examples/docs/resources/mobile-first/app/modal/message-jsx.vue new file mode 100644 index 000000000..0b27edbf0 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/modal/message-jsx.vue @@ -0,0 +1,102 @@ + + diff --git a/examples/docs/resources/mobile-first/app/modal/message.vue b/examples/docs/resources/mobile-first/app/modal/message.vue new file mode 100644 index 000000000..bcf1371e4 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/modal/message.vue @@ -0,0 +1,18 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/modal/min-height.vue b/examples/docs/resources/mobile-first/app/modal/min-height.vue new file mode 100644 index 000000000..77026a6f4 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/modal/min-height.vue @@ -0,0 +1,22 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/modal/min-width.vue b/examples/docs/resources/mobile-first/app/modal/min-width.vue new file mode 100644 index 000000000..9f3da5ff4 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/modal/min-width.vue @@ -0,0 +1,22 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/modal/resize.vue b/examples/docs/resources/mobile-first/app/modal/resize.vue new file mode 100644 index 000000000..127e355ae --- /dev/null +++ b/examples/docs/resources/mobile-first/app/modal/resize.vue @@ -0,0 +1,23 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/modal/show-event.vue b/examples/docs/resources/mobile-first/app/modal/show-event.vue new file mode 100644 index 000000000..b13bd1cbc --- /dev/null +++ b/examples/docs/resources/mobile-first/app/modal/show-event.vue @@ -0,0 +1,31 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/modal/showFooter.vue b/examples/docs/resources/mobile-first/app/modal/showFooter.vue new file mode 100644 index 000000000..594e8da09 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/modal/showFooter.vue @@ -0,0 +1,18 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/modal/showHeader.vue b/examples/docs/resources/mobile-first/app/modal/showHeader.vue new file mode 100644 index 000000000..c420ceabf --- /dev/null +++ b/examples/docs/resources/mobile-first/app/modal/showHeader.vue @@ -0,0 +1,18 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/modal/status.vue b/examples/docs/resources/mobile-first/app/modal/status.vue new file mode 100644 index 000000000..5cd983a0c --- /dev/null +++ b/examples/docs/resources/mobile-first/app/modal/status.vue @@ -0,0 +1,47 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/modal/title.vue b/examples/docs/resources/mobile-first/app/modal/title.vue new file mode 100644 index 000000000..a97f4aa3b --- /dev/null +++ b/examples/docs/resources/mobile-first/app/modal/title.vue @@ -0,0 +1,18 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/modal/type.vue b/examples/docs/resources/mobile-first/app/modal/type.vue new file mode 100644 index 000000000..223bc28eb --- /dev/null +++ b/examples/docs/resources/mobile-first/app/modal/type.vue @@ -0,0 +1,28 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/modal/value.vue b/examples/docs/resources/mobile-first/app/modal/value.vue new file mode 100644 index 000000000..9d1e3580f --- /dev/null +++ b/examples/docs/resources/mobile-first/app/modal/value.vue @@ -0,0 +1,26 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/modal/zIndex.vue b/examples/docs/resources/mobile-first/app/modal/zIndex.vue new file mode 100644 index 000000000..f03864359 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/modal/zIndex.vue @@ -0,0 +1,18 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/modal/zoom-event.vue b/examples/docs/resources/mobile-first/app/modal/zoom-event.vue new file mode 100644 index 000000000..180225e3a --- /dev/null +++ b/examples/docs/resources/mobile-first/app/modal/zoom-event.vue @@ -0,0 +1,31 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/numeric/about-step.vue b/examples/docs/resources/mobile-first/app/numeric/about-step.vue new file mode 100644 index 000000000..47115e578 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/numeric/about-step.vue @@ -0,0 +1,19 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/numeric/basic-usage.vue b/examples/docs/resources/mobile-first/app/numeric/basic-usage.vue new file mode 100644 index 000000000..be45bcd33 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/numeric/basic-usage.vue @@ -0,0 +1,18 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/numeric/blur-event.vue b/examples/docs/resources/mobile-first/app/numeric/blur-event.vue new file mode 100644 index 000000000..01338666f --- /dev/null +++ b/examples/docs/resources/mobile-first/app/numeric/blur-event.vue @@ -0,0 +1,23 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/numeric/change-event.vue b/examples/docs/resources/mobile-first/app/numeric/change-event.vue new file mode 100644 index 000000000..c87e8a816 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/numeric/change-event.vue @@ -0,0 +1,26 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/numeric/dynamic-disabled.vue b/examples/docs/resources/mobile-first/app/numeric/dynamic-disabled.vue new file mode 100644 index 000000000..5778ee91c --- /dev/null +++ b/examples/docs/resources/mobile-first/app/numeric/dynamic-disabled.vue @@ -0,0 +1,20 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/numeric/focus-event.vue b/examples/docs/resources/mobile-first/app/numeric/focus-event.vue new file mode 100644 index 000000000..78548e458 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/numeric/focus-event.vue @@ -0,0 +1,23 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/numeric/max-min.vue b/examples/docs/resources/mobile-first/app/numeric/max-min.vue new file mode 100644 index 000000000..55c1fd040 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/numeric/max-min.vue @@ -0,0 +1,18 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/numeric/numeric-size.vue b/examples/docs/resources/mobile-first/app/numeric/numeric-size.vue new file mode 100644 index 000000000..4c7306620 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/numeric/numeric-size.vue @@ -0,0 +1,20 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/numeric/unit.vue b/examples/docs/resources/mobile-first/app/numeric/unit.vue new file mode 100644 index 000000000..9126438d8 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/numeric/unit.vue @@ -0,0 +1,18 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/pager/basic-usage.vue b/examples/docs/resources/mobile-first/app/pager/basic-usage.vue new file mode 100644 index 000000000..95ef3891f --- /dev/null +++ b/examples/docs/resources/mobile-first/app/pager/basic-usage.vue @@ -0,0 +1,17 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/pager/before-page-change.vue b/examples/docs/resources/mobile-first/app/pager/before-page-change.vue new file mode 100644 index 000000000..608bc03f4 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/pager/before-page-change.vue @@ -0,0 +1,31 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/pager/current-page.vue b/examples/docs/resources/mobile-first/app/pager/current-page.vue new file mode 100644 index 000000000..321ea4c86 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/pager/current-page.vue @@ -0,0 +1,13 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/pager/custom-layout.vue b/examples/docs/resources/mobile-first/app/pager/custom-layout.vue new file mode 100644 index 000000000..0b7f09d55 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/pager/custom-layout.vue @@ -0,0 +1,17 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/pager/custom-next-prev-text.vue b/examples/docs/resources/mobile-first/app/pager/custom-next-prev-text.vue new file mode 100644 index 000000000..7c7337e86 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/pager/custom-next-prev-text.vue @@ -0,0 +1,13 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/pager/hide-on-single-page.vue b/examples/docs/resources/mobile-first/app/pager/hide-on-single-page.vue new file mode 100644 index 000000000..7bdf8c4d6 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/pager/hide-on-single-page.vue @@ -0,0 +1,16 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/pager/page-append-to-body.vue b/examples/docs/resources/mobile-first/app/pager/page-append-to-body.vue new file mode 100644 index 000000000..472eb9232 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/pager/page-append-to-body.vue @@ -0,0 +1,13 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/pager/page-count.vue b/examples/docs/resources/mobile-first/app/pager/page-count.vue new file mode 100644 index 000000000..2def35b89 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/pager/page-count.vue @@ -0,0 +1,13 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/pager/page-size.vue b/examples/docs/resources/mobile-first/app/pager/page-size.vue new file mode 100644 index 000000000..3102b0c10 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/pager/page-size.vue @@ -0,0 +1,13 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/pager/pager-count.vue b/examples/docs/resources/mobile-first/app/pager/pager-count.vue new file mode 100644 index 000000000..67d3324da --- /dev/null +++ b/examples/docs/resources/mobile-first/app/pager/pager-count.vue @@ -0,0 +1,13 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/pager/pager-custom-total.vue b/examples/docs/resources/mobile-first/app/pager/pager-custom-total.vue new file mode 100644 index 000000000..99f3581a1 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/pager/pager-custom-total.vue @@ -0,0 +1,27 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/pager/pager-events-current-change.vue b/examples/docs/resources/mobile-first/app/pager/pager-events-current-change.vue new file mode 100644 index 000000000..68c307e2f --- /dev/null +++ b/examples/docs/resources/mobile-first/app/pager/pager-events-current-change.vue @@ -0,0 +1,27 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/pager/pager-events-nextclick.vue b/examples/docs/resources/mobile-first/app/pager/pager-events-nextclick.vue new file mode 100644 index 000000000..bd0516e37 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/pager/pager-events-nextclick.vue @@ -0,0 +1,27 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/pager/pager-events-prev-click.vue b/examples/docs/resources/mobile-first/app/pager/pager-events-prev-click.vue new file mode 100644 index 000000000..8b2c6814c --- /dev/null +++ b/examples/docs/resources/mobile-first/app/pager/pager-events-prev-click.vue @@ -0,0 +1,27 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/pager/pager-events.vue b/examples/docs/resources/mobile-first/app/pager/pager-events.vue new file mode 100644 index 000000000..61f09048f --- /dev/null +++ b/examples/docs/resources/mobile-first/app/pager/pager-events.vue @@ -0,0 +1,27 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/pager/pager-in-grid.vue b/examples/docs/resources/mobile-first/app/pager/pager-in-grid.vue new file mode 100644 index 000000000..0e739852c --- /dev/null +++ b/examples/docs/resources/mobile-first/app/pager/pager-in-grid.vue @@ -0,0 +1,417 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/pager/pager-mode-fixed.vue b/examples/docs/resources/mobile-first/app/pager/pager-mode-fixed.vue new file mode 100644 index 000000000..6a6e23c79 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/pager/pager-mode-fixed.vue @@ -0,0 +1,21 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/pager/pager-mode-number.vue b/examples/docs/resources/mobile-first/app/pager/pager-mode-number.vue new file mode 100644 index 000000000..a5478bf4d --- /dev/null +++ b/examples/docs/resources/mobile-first/app/pager/pager-mode-number.vue @@ -0,0 +1,21 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/pager/pager-mode-simple.vue b/examples/docs/resources/mobile-first/app/pager/pager-mode-simple.vue new file mode 100644 index 000000000..cde1da631 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/pager/pager-mode-simple.vue @@ -0,0 +1,21 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/pager/pager-mode.vue b/examples/docs/resources/mobile-first/app/pager/pager-mode.vue new file mode 100644 index 000000000..d31abb37b --- /dev/null +++ b/examples/docs/resources/mobile-first/app/pager/pager-mode.vue @@ -0,0 +1,21 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/pager/pager-show-total-loading.vue b/examples/docs/resources/mobile-first/app/pager/pager-show-total-loading.vue new file mode 100644 index 000000000..b185577b4 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/pager/pager-show-total-loading.vue @@ -0,0 +1,33 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/popconfirm/basic-usage.vue b/examples/docs/resources/mobile-first/app/popconfirm/basic-usage.vue new file mode 100644 index 000000000..2eeed1f14 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/popconfirm/basic-usage.vue @@ -0,0 +1,50 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/popover/arrow-offset.vue b/examples/docs/resources/mobile-first/app/popover/arrow-offset.vue new file mode 100644 index 000000000..f64a4dfbe --- /dev/null +++ b/examples/docs/resources/mobile-first/app/popover/arrow-offset.vue @@ -0,0 +1,30 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/popover/basic-usage.vue b/examples/docs/resources/mobile-first/app/popover/basic-usage.vue new file mode 100644 index 000000000..f26b864e7 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/popover/basic-usage.vue @@ -0,0 +1,18 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/popover/close-delay.vue b/examples/docs/resources/mobile-first/app/popover/close-delay.vue new file mode 100644 index 000000000..6dbda665f --- /dev/null +++ b/examples/docs/resources/mobile-first/app/popover/close-delay.vue @@ -0,0 +1,23 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/popover/custom-tip-text.vue b/examples/docs/resources/mobile-first/app/popover/custom-tip-text.vue new file mode 100644 index 000000000..6139bf957 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/popover/custom-tip-text.vue @@ -0,0 +1,36 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/popover/dynamic-disable.vue b/examples/docs/resources/mobile-first/app/popover/dynamic-disable.vue new file mode 100644 index 000000000..ed279b843 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/popover/dynamic-disable.vue @@ -0,0 +1,26 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/popover/frame-offset.vue b/examples/docs/resources/mobile-first/app/popover/frame-offset.vue new file mode 100644 index 000000000..d4b9ada55 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/popover/frame-offset.vue @@ -0,0 +1,30 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/popover/hidden-arrow.vue b/examples/docs/resources/mobile-first/app/popover/hidden-arrow.vue new file mode 100644 index 000000000..ea670cf09 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/popover/hidden-arrow.vue @@ -0,0 +1,25 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/popover/open-delay.vue b/examples/docs/resources/mobile-first/app/popover/open-delay.vue new file mode 100644 index 000000000..28c11a367 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/popover/open-delay.vue @@ -0,0 +1,23 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/popover/popover-content.vue b/examples/docs/resources/mobile-first/app/popover/popover-content.vue new file mode 100644 index 000000000..6cc0341e2 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/popover/popover-content.vue @@ -0,0 +1,18 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/popover/popover-events.vue b/examples/docs/resources/mobile-first/app/popover/popover-events.vue new file mode 100644 index 000000000..b508a451a --- /dev/null +++ b/examples/docs/resources/mobile-first/app/popover/popover-events.vue @@ -0,0 +1,53 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/popover/popover-placement.vue b/examples/docs/resources/mobile-first/app/popover/popover-placement.vue new file mode 100644 index 000000000..cc64c6df1 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/popover/popover-placement.vue @@ -0,0 +1,43 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/popover/popover-width.vue b/examples/docs/resources/mobile-first/app/popover/popover-width.vue new file mode 100644 index 000000000..c7d19ad13 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/popover/popover-width.vue @@ -0,0 +1,22 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/popover/popper-class.vue b/examples/docs/resources/mobile-first/app/popover/popper-class.vue new file mode 100644 index 000000000..553e4ed0e --- /dev/null +++ b/examples/docs/resources/mobile-first/app/popover/popper-class.vue @@ -0,0 +1,30 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/popover/popper-options.vue b/examples/docs/resources/mobile-first/app/popover/popper-options.vue new file mode 100644 index 000000000..61fd994db --- /dev/null +++ b/examples/docs/resources/mobile-first/app/popover/popper-options.vue @@ -0,0 +1,23 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/popover/trigger-mode.vue b/examples/docs/resources/mobile-first/app/popover/trigger-mode.vue new file mode 100644 index 000000000..718eb17ab --- /dev/null +++ b/examples/docs/resources/mobile-first/app/popover/trigger-mode.vue @@ -0,0 +1,40 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/popover/trigger-reference.vue b/examples/docs/resources/mobile-first/app/popover/trigger-reference.vue new file mode 100644 index 000000000..deef21278 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/popover/trigger-reference.vue @@ -0,0 +1,18 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/progress/basic-usage.vue b/examples/docs/resources/mobile-first/app/progress/basic-usage.vue new file mode 100644 index 000000000..36add9de4 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/progress/basic-usage.vue @@ -0,0 +1,22 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/progress/custom-color.vue b/examples/docs/resources/mobile-first/app/progress/custom-color.vue new file mode 100644 index 000000000..2a9828b0b --- /dev/null +++ b/examples/docs/resources/mobile-first/app/progress/custom-color.vue @@ -0,0 +1,42 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/progress/dynamic-control-changes.vue b/examples/docs/resources/mobile-first/app/progress/dynamic-control-changes.vue new file mode 100644 index 000000000..ebe9a911c --- /dev/null +++ b/examples/docs/resources/mobile-first/app/progress/dynamic-control-changes.vue @@ -0,0 +1,44 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/progress/format-text.vue b/examples/docs/resources/mobile-first/app/progress/format-text.vue new file mode 100644 index 000000000..86d841d63 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/progress/format-text.vue @@ -0,0 +1,35 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/progress/progress-size.vue b/examples/docs/resources/mobile-first/app/progress/progress-size.vue new file mode 100644 index 000000000..194c1d281 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/progress/progress-size.vue @@ -0,0 +1,24 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/progress/progress-status.vue b/examples/docs/resources/mobile-first/app/progress/progress-status.vue new file mode 100644 index 000000000..1728286a2 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/progress/progress-status.vue @@ -0,0 +1,19 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/progress/progress-type-circle.vue b/examples/docs/resources/mobile-first/app/progress/progress-type-circle.vue new file mode 100644 index 000000000..6eec89a27 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/progress/progress-type-circle.vue @@ -0,0 +1,13 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/progress/progress-type.vue b/examples/docs/resources/mobile-first/app/progress/progress-type.vue new file mode 100644 index 000000000..101a8510b --- /dev/null +++ b/examples/docs/resources/mobile-first/app/progress/progress-type.vue @@ -0,0 +1,13 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/progress/progress-width.vue b/examples/docs/resources/mobile-first/app/progress/progress-width.vue new file mode 100644 index 000000000..bffba8c00 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/progress/progress-width.vue @@ -0,0 +1,20 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/progress/text-inside-or-no-text.vue b/examples/docs/resources/mobile-first/app/progress/text-inside-or-no-text.vue new file mode 100644 index 000000000..9c95633d3 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/progress/text-inside-or-no-text.vue @@ -0,0 +1,27 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/radio-block/basic-usage.vue b/examples/docs/resources/mobile-first/app/radio-block/basic-usage.vue new file mode 100644 index 000000000..9f3282937 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/radio-block/basic-usage.vue @@ -0,0 +1,29 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/radio-block/dynamic-disable.vue b/examples/docs/resources/mobile-first/app/radio-block/dynamic-disable.vue new file mode 100644 index 000000000..90ac8c7db --- /dev/null +++ b/examples/docs/resources/mobile-first/app/radio-block/dynamic-disable.vue @@ -0,0 +1,36 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/radio-block/group-options.vue b/examples/docs/resources/mobile-first/app/radio-block/group-options.vue new file mode 100644 index 000000000..40e30b1de --- /dev/null +++ b/examples/docs/resources/mobile-first/app/radio-block/group-options.vue @@ -0,0 +1,27 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/radio-block/radio-button.vue b/examples/docs/resources/mobile-first/app/radio-block/radio-button.vue new file mode 100644 index 000000000..02a26de52 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/radio-block/radio-button.vue @@ -0,0 +1,23 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/radio-block/radio-events.vue b/examples/docs/resources/mobile-first/app/radio-block/radio-events.vue new file mode 100644 index 000000000..5aa0b3fbe --- /dev/null +++ b/examples/docs/resources/mobile-first/app/radio-block/radio-events.vue @@ -0,0 +1,36 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/radio-block/radio-size.vue b/examples/docs/resources/mobile-first/app/radio-block/radio-size.vue new file mode 100644 index 000000000..345125c4e --- /dev/null +++ b/examples/docs/resources/mobile-first/app/radio-block/radio-size.vue @@ -0,0 +1,34 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/radio-block/radio-tips.vue b/examples/docs/resources/mobile-first/app/radio-block/radio-tips.vue new file mode 100644 index 000000000..1cc71d0ae --- /dev/null +++ b/examples/docs/resources/mobile-first/app/radio-block/radio-tips.vue @@ -0,0 +1,23 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/radio/active-color.vue b/examples/docs/resources/mobile-first/app/radio/active-color.vue new file mode 100644 index 000000000..ab546510d --- /dev/null +++ b/examples/docs/resources/mobile-first/app/radio/active-color.vue @@ -0,0 +1,23 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/radio/basic-usage.vue b/examples/docs/resources/mobile-first/app/radio/basic-usage.vue new file mode 100644 index 000000000..dd895ee12 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/radio/basic-usage.vue @@ -0,0 +1,23 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/radio/dynamic-disable.vue b/examples/docs/resources/mobile-first/app/radio/dynamic-disable.vue new file mode 100644 index 000000000..10bf8ce1e --- /dev/null +++ b/examples/docs/resources/mobile-first/app/radio/dynamic-disable.vue @@ -0,0 +1,41 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/radio/group-options.vue b/examples/docs/resources/mobile-first/app/radio/group-options.vue new file mode 100644 index 000000000..40e30b1de --- /dev/null +++ b/examples/docs/resources/mobile-first/app/radio/group-options.vue @@ -0,0 +1,27 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/radio/radio-button.vue b/examples/docs/resources/mobile-first/app/radio/radio-button.vue new file mode 100644 index 000000000..f8b90472f --- /dev/null +++ b/examples/docs/resources/mobile-first/app/radio/radio-button.vue @@ -0,0 +1,23 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/radio/radio-default.vue b/examples/docs/resources/mobile-first/app/radio/radio-default.vue new file mode 100644 index 000000000..882170e73 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/radio/radio-default.vue @@ -0,0 +1,27 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/radio/radio-events.vue b/examples/docs/resources/mobile-first/app/radio/radio-events.vue new file mode 100644 index 000000000..65987db7b --- /dev/null +++ b/examples/docs/resources/mobile-first/app/radio/radio-events.vue @@ -0,0 +1,35 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/radio/radio-size.vue b/examples/docs/resources/mobile-first/app/radio/radio-size.vue new file mode 100644 index 000000000..0b8585f2c --- /dev/null +++ b/examples/docs/resources/mobile-first/app/radio/radio-size.vue @@ -0,0 +1,57 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/radio/radio-text.vue b/examples/docs/resources/mobile-first/app/radio/radio-text.vue new file mode 100644 index 000000000..4f554f1cd --- /dev/null +++ b/examples/docs/resources/mobile-first/app/radio/radio-text.vue @@ -0,0 +1,21 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/radio/radio-value.vue b/examples/docs/resources/mobile-first/app/radio/radio-value.vue new file mode 100644 index 000000000..c56f57b0b --- /dev/null +++ b/examples/docs/resources/mobile-first/app/radio/radio-value.vue @@ -0,0 +1,29 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/radio/read-only.vue b/examples/docs/resources/mobile-first/app/radio/read-only.vue new file mode 100644 index 000000000..eae2303d7 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/radio/read-only.vue @@ -0,0 +1,25 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/radio/vertical.vue b/examples/docs/resources/mobile-first/app/radio/vertical.vue new file mode 100644 index 000000000..a98ece199 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/radio/vertical.vue @@ -0,0 +1,34 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/radio/with-border.vue b/examples/docs/resources/mobile-first/app/radio/with-border.vue new file mode 100644 index 000000000..9ff193543 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/radio/with-border.vue @@ -0,0 +1,28 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/rate/allow-half.vue b/examples/docs/resources/mobile-first/app/rate/allow-half.vue new file mode 100644 index 000000000..87cc5bad6 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/rate/allow-half.vue @@ -0,0 +1,18 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/rate/basic-usage.vue b/examples/docs/resources/mobile-first/app/rate/basic-usage.vue new file mode 100644 index 000000000..15da32337 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/rate/basic-usage.vue @@ -0,0 +1,18 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/rate/custom-3-threshold-colors.vue b/examples/docs/resources/mobile-first/app/rate/custom-3-threshold-colors.vue new file mode 100644 index 000000000..cc67b8be3 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/rate/custom-3-threshold-colors.vue @@ -0,0 +1,18 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/rate/custom-3-threshold-icon.vue b/examples/docs/resources/mobile-first/app/rate/custom-3-threshold-icon.vue new file mode 100644 index 000000000..c654054c0 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/rate/custom-3-threshold-icon.vue @@ -0,0 +1,19 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/rate/disabled-not-selected-class.vue b/examples/docs/resources/mobile-first/app/rate/disabled-not-selected-class.vue new file mode 100644 index 000000000..34a690854 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/rate/disabled-not-selected-class.vue @@ -0,0 +1,19 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/rate/disabled-not-selected-color.vue b/examples/docs/resources/mobile-first/app/rate/disabled-not-selected-color.vue new file mode 100644 index 000000000..808d5a97e --- /dev/null +++ b/examples/docs/resources/mobile-first/app/rate/disabled-not-selected-color.vue @@ -0,0 +1,19 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/rate/dynamic-disable.vue b/examples/docs/resources/mobile-first/app/rate/dynamic-disable.vue new file mode 100644 index 000000000..8af22c842 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/rate/dynamic-disable.vue @@ -0,0 +1,18 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/rate/max-score.vue b/examples/docs/resources/mobile-first/app/rate/max-score.vue new file mode 100644 index 000000000..495432505 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/rate/max-score.vue @@ -0,0 +1,18 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/rate/not-selected-class.vue b/examples/docs/resources/mobile-first/app/rate/not-selected-class.vue new file mode 100644 index 000000000..90e6e3ad9 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/rate/not-selected-class.vue @@ -0,0 +1,19 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/rate/not-selected-color.vue b/examples/docs/resources/mobile-first/app/rate/not-selected-color.vue new file mode 100644 index 000000000..454cea8bb --- /dev/null +++ b/examples/docs/resources/mobile-first/app/rate/not-selected-color.vue @@ -0,0 +1,19 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/rate/radio-rate.vue b/examples/docs/resources/mobile-first/app/rate/radio-rate.vue new file mode 100644 index 000000000..0d4f1252b --- /dev/null +++ b/examples/docs/resources/mobile-first/app/rate/radio-rate.vue @@ -0,0 +1,18 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/rate/rate-events.vue b/examples/docs/resources/mobile-first/app/rate/rate-events.vue new file mode 100644 index 000000000..0ca1a362d --- /dev/null +++ b/examples/docs/resources/mobile-first/app/rate/rate-events.vue @@ -0,0 +1,23 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/rate/show-score.vue b/examples/docs/resources/mobile-first/app/rate/show-score.vue new file mode 100644 index 000000000..410b9f360 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/rate/show-score.vue @@ -0,0 +1,18 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/rate/size.vue b/examples/docs/resources/mobile-first/app/rate/size.vue new file mode 100644 index 000000000..bd2b67da3 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/rate/size.vue @@ -0,0 +1,18 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/rate/text-on-bottom.vue b/examples/docs/resources/mobile-first/app/rate/text-on-bottom.vue new file mode 100644 index 000000000..a7fd3bd6f --- /dev/null +++ b/examples/docs/resources/mobile-first/app/rate/text-on-bottom.vue @@ -0,0 +1,18 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/rate/texts-and-text-color.vue b/examples/docs/resources/mobile-first/app/rate/texts-and-text-color.vue new file mode 100644 index 000000000..537483f36 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/rate/texts-and-text-color.vue @@ -0,0 +1,18 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/rate/threshold-value.vue b/examples/docs/resources/mobile-first/app/rate/threshold-value.vue new file mode 100644 index 000000000..9535e7df3 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/rate/threshold-value.vue @@ -0,0 +1,18 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/record/basic-usage.vue b/examples/docs/resources/mobile-first/app/record/basic-usage.vue new file mode 100644 index 000000000..1fd6f91b5 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/record/basic-usage.vue @@ -0,0 +1,32 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/scrollbar/basic-usage.vue b/examples/docs/resources/mobile-first/app/scrollbar/basic-usage.vue new file mode 100644 index 000000000..bec29eb33 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/scrollbar/basic-usage.vue @@ -0,0 +1,30 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/scrollbar/horizon.vue b/examples/docs/resources/mobile-first/app/scrollbar/horizon.vue new file mode 100644 index 000000000..104bd3f46 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/scrollbar/horizon.vue @@ -0,0 +1,31 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/search/basic-usage.vue b/examples/docs/resources/mobile-first/app/search/basic-usage.vue new file mode 100644 index 000000000..013f04d09 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/search/basic-usage.vue @@ -0,0 +1,21 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/search/button-search.vue b/examples/docs/resources/mobile-first/app/search/button-search.vue new file mode 100644 index 000000000..013f04d09 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/search/button-search.vue @@ -0,0 +1,21 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/search/change-bg.vue b/examples/docs/resources/mobile-first/app/search/change-bg.vue new file mode 100644 index 000000000..064d4648b --- /dev/null +++ b/examples/docs/resources/mobile-first/app/search/change-bg.vue @@ -0,0 +1,20 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/search/change-events.vue b/examples/docs/resources/mobile-first/app/search/change-events.vue new file mode 100644 index 000000000..de5a08e20 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/search/change-events.vue @@ -0,0 +1,18 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/search/clearable.vue b/examples/docs/resources/mobile-first/app/search/clearable.vue new file mode 100644 index 000000000..da935df36 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/search/clearable.vue @@ -0,0 +1,20 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/search/custom-search-types.vue b/examples/docs/resources/mobile-first/app/search/custom-search-types.vue new file mode 100644 index 000000000..8b0bdbd6d --- /dev/null +++ b/examples/docs/resources/mobile-first/app/search/custom-search-types.vue @@ -0,0 +1,37 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/search/default-value.vue b/examples/docs/resources/mobile-first/app/search/default-value.vue new file mode 100644 index 000000000..de056226c --- /dev/null +++ b/examples/docs/resources/mobile-first/app/search/default-value.vue @@ -0,0 +1,18 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/search/enter-search.vue b/examples/docs/resources/mobile-first/app/search/enter-search.vue new file mode 100644 index 000000000..514956189 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/search/enter-search.vue @@ -0,0 +1,18 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/search/mini-mode.vue b/examples/docs/resources/mobile-first/app/search/mini-mode.vue new file mode 100644 index 000000000..6b42852f0 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/search/mini-mode.vue @@ -0,0 +1,13 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/search/search-events.vue b/examples/docs/resources/mobile-first/app/search/search-events.vue new file mode 100644 index 000000000..d7802be4f --- /dev/null +++ b/examples/docs/resources/mobile-first/app/search/search-events.vue @@ -0,0 +1,18 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/search/search-types.vue b/examples/docs/resources/mobile-first/app/search/search-types.vue new file mode 100644 index 000000000..ba8338fd5 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/search/search-types.vue @@ -0,0 +1,39 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/search/select-events.vue b/examples/docs/resources/mobile-first/app/search/select-events.vue new file mode 100644 index 000000000..ae110d363 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/search/select-events.vue @@ -0,0 +1,44 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/search/show-selected-types.vue b/examples/docs/resources/mobile-first/app/search/show-selected-types.vue new file mode 100644 index 000000000..1dce17016 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/search/show-selected-types.vue @@ -0,0 +1,37 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/search/transparent-mode.vue b/examples/docs/resources/mobile-first/app/search/transparent-mode.vue new file mode 100644 index 000000000..f2529d24f --- /dev/null +++ b/examples/docs/resources/mobile-first/app/search/transparent-mode.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/select-mobile/basic-usage.vue b/examples/docs/resources/mobile-first/app/select-mobile/basic-usage.vue new file mode 100644 index 000000000..cfe3ca156 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/select-mobile/basic-usage.vue @@ -0,0 +1,73 @@ + + + + diff --git a/examples/docs/resources/mobile-first/app/select-mobile/ellipsis.vue b/examples/docs/resources/mobile-first/app/select-mobile/ellipsis.vue new file mode 100644 index 000000000..8666d2787 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/select-mobile/ellipsis.vue @@ -0,0 +1,63 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/select-mobile/multiple.vue b/examples/docs/resources/mobile-first/app/select-mobile/multiple.vue new file mode 100644 index 000000000..999a68649 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/select-mobile/multiple.vue @@ -0,0 +1,75 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/select-view/basic-usage.vue b/examples/docs/resources/mobile-first/app/select-view/basic-usage.vue new file mode 100644 index 000000000..852c9dc75 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/select-view/basic-usage.vue @@ -0,0 +1,70 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/select-view/field.vue b/examples/docs/resources/mobile-first/app/select-view/field.vue new file mode 100644 index 000000000..c4674020c --- /dev/null +++ b/examples/docs/resources/mobile-first/app/select-view/field.vue @@ -0,0 +1,70 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/select-view/infinit-scroll.vue b/examples/docs/resources/mobile-first/app/select-view/infinit-scroll.vue new file mode 100644 index 000000000..e2b52ec48 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/select-view/infinit-scroll.vue @@ -0,0 +1,124 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/select-view/multiple-required.vue b/examples/docs/resources/mobile-first/app/select-view/multiple-required.vue new file mode 100644 index 000000000..1a6d8181f --- /dev/null +++ b/examples/docs/resources/mobile-first/app/select-view/multiple-required.vue @@ -0,0 +1,77 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/select-view/multiple.vue b/examples/docs/resources/mobile-first/app/select-view/multiple.vue new file mode 100644 index 000000000..7f77f0756 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/select-view/multiple.vue @@ -0,0 +1,76 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/select-view/required.vue b/examples/docs/resources/mobile-first/app/select-view/required.vue new file mode 100644 index 000000000..da13213a3 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/select-view/required.vue @@ -0,0 +1,86 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/select-view/slot.vue b/examples/docs/resources/mobile-first/app/select-view/slot.vue new file mode 100644 index 000000000..7f3d378eb --- /dev/null +++ b/examples/docs/resources/mobile-first/app/select-view/slot.vue @@ -0,0 +1,73 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/select-view/text.vue b/examples/docs/resources/mobile-first/app/select-view/text.vue new file mode 100644 index 000000000..6f386ca6f --- /dev/null +++ b/examples/docs/resources/mobile-first/app/select-view/text.vue @@ -0,0 +1,80 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/selected-box/basic-usage.vue b/examples/docs/resources/mobile-first/app/selected-box/basic-usage.vue new file mode 100644 index 000000000..beba7e87b --- /dev/null +++ b/examples/docs/resources/mobile-first/app/selected-box/basic-usage.vue @@ -0,0 +1,49 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/selected-box/inverse.vue b/examples/docs/resources/mobile-first/app/selected-box/inverse.vue new file mode 100644 index 000000000..87bbbdb75 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/selected-box/inverse.vue @@ -0,0 +1,49 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/selected-box/slots.vue b/examples/docs/resources/mobile-first/app/selected-box/slots.vue new file mode 100644 index 000000000..58aa5b694 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/selected-box/slots.vue @@ -0,0 +1,72 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/slider/about-step.vue b/examples/docs/resources/mobile-first/app/slider/about-step.vue new file mode 100644 index 000000000..41a9b4a26 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/slider/about-step.vue @@ -0,0 +1,20 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/slider/basic-usage.vue b/examples/docs/resources/mobile-first/app/slider/basic-usage.vue new file mode 100644 index 000000000..51e57fe24 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/slider/basic-usage.vue @@ -0,0 +1,20 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/slider/dynamic-disable.vue b/examples/docs/resources/mobile-first/app/slider/dynamic-disable.vue new file mode 100644 index 000000000..c89270fcc --- /dev/null +++ b/examples/docs/resources/mobile-first/app/slider/dynamic-disable.vue @@ -0,0 +1,20 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/slider/format-tooltip.vue b/examples/docs/resources/mobile-first/app/slider/format-tooltip.vue new file mode 100644 index 000000000..5798d477e --- /dev/null +++ b/examples/docs/resources/mobile-first/app/slider/format-tooltip.vue @@ -0,0 +1,25 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/slider/left-right-slot.vue b/examples/docs/resources/mobile-first/app/slider/left-right-slot.vue new file mode 100644 index 000000000..6adead441 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/slider/left-right-slot.vue @@ -0,0 +1,30 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/slider/max-min.vue b/examples/docs/resources/mobile-first/app/slider/max-min.vue new file mode 100644 index 000000000..df8fb1e48 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/slider/max-min.vue @@ -0,0 +1,20 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/slider/range-select.vue b/examples/docs/resources/mobile-first/app/slider/range-select.vue new file mode 100644 index 000000000..dd671a7ab --- /dev/null +++ b/examples/docs/resources/mobile-first/app/slider/range-select.vue @@ -0,0 +1,20 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/slider/show-graduate.vue b/examples/docs/resources/mobile-first/app/slider/show-graduate.vue new file mode 100644 index 000000000..23cff5330 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/slider/show-graduate.vue @@ -0,0 +1,20 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/slider/show-input.vue b/examples/docs/resources/mobile-first/app/slider/show-input.vue new file mode 100644 index 000000000..7e7006734 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/slider/show-input.vue @@ -0,0 +1,20 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/slider/show-label.vue b/examples/docs/resources/mobile-first/app/slider/show-label.vue new file mode 100644 index 000000000..f0c2a9e96 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/slider/show-label.vue @@ -0,0 +1,25 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/slider/show-tip.vue b/examples/docs/resources/mobile-first/app/slider/show-tip.vue new file mode 100644 index 000000000..379df7a13 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/slider/show-tip.vue @@ -0,0 +1,20 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/slider/slider-event-change.vue b/examples/docs/resources/mobile-first/app/slider/slider-event-change.vue new file mode 100644 index 000000000..1ffff20b2 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/slider/slider-event-change.vue @@ -0,0 +1,29 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/slider/slider-event-start.vue b/examples/docs/resources/mobile-first/app/slider/slider-event-start.vue new file mode 100644 index 000000000..ff71ff840 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/slider/slider-event-start.vue @@ -0,0 +1,29 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/slider/slider-event-stop.vue b/examples/docs/resources/mobile-first/app/slider/slider-event-stop.vue new file mode 100644 index 000000000..6f5fecbc7 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/slider/slider-event-stop.vue @@ -0,0 +1,29 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/slider/slider-slot.vue b/examples/docs/resources/mobile-first/app/slider/slider-slot.vue new file mode 100644 index 000000000..237973805 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/slider/slider-slot.vue @@ -0,0 +1,24 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/standard-list-item/basic-usage.vue b/examples/docs/resources/mobile-first/app/standard-list-item/basic-usage.vue new file mode 100644 index 000000000..e38050897 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/standard-list-item/basic-usage.vue @@ -0,0 +1,60 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/standard-list-item/content-slot.vue b/examples/docs/resources/mobile-first/app/standard-list-item/content-slot.vue new file mode 100644 index 000000000..b24267de6 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/standard-list-item/content-slot.vue @@ -0,0 +1,48 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/standard-list-item/icon-click-event.vue b/examples/docs/resources/mobile-first/app/standard-list-item/icon-click-event.vue new file mode 100644 index 000000000..ee44e5c9a --- /dev/null +++ b/examples/docs/resources/mobile-first/app/standard-list-item/icon-click-event.vue @@ -0,0 +1,52 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/standard-list-item/icon-disabled.vue b/examples/docs/resources/mobile-first/app/standard-list-item/icon-disabled.vue new file mode 100644 index 000000000..8bc71dc8d --- /dev/null +++ b/examples/docs/resources/mobile-first/app/standard-list-item/icon-disabled.vue @@ -0,0 +1,59 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/standard-list-item/image-operate-slot.vue b/examples/docs/resources/mobile-first/app/standard-list-item/image-operate-slot.vue new file mode 100644 index 000000000..45ffb4759 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/standard-list-item/image-operate-slot.vue @@ -0,0 +1,31 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/standard-list-item/type.vue b/examples/docs/resources/mobile-first/app/standard-list-item/type.vue new file mode 100644 index 000000000..6c8168c93 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/standard-list-item/type.vue @@ -0,0 +1,62 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/steps/advanced-flex.vue b/examples/docs/resources/mobile-first/app/steps/advanced-flex.vue new file mode 100644 index 000000000..7b489ec8e --- /dev/null +++ b/examples/docs/resources/mobile-first/app/steps/advanced-flex.vue @@ -0,0 +1,43 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/steps/advanced-no-arrow.vue b/examples/docs/resources/mobile-first/app/steps/advanced-no-arrow.vue new file mode 100644 index 000000000..70b389ae4 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/steps/advanced-no-arrow.vue @@ -0,0 +1,45 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/steps/advanced-steps.vue b/examples/docs/resources/mobile-first/app/steps/advanced-steps.vue new file mode 100644 index 000000000..0ffc12285 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/steps/advanced-steps.vue @@ -0,0 +1,46 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/steps/complicated.vue b/examples/docs/resources/mobile-first/app/steps/complicated.vue new file mode 100644 index 000000000..5f2fec14d --- /dev/null +++ b/examples/docs/resources/mobile-first/app/steps/complicated.vue @@ -0,0 +1,81 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/steps/data-resource-saas.vue b/examples/docs/resources/mobile-first/app/steps/data-resource-saas.vue new file mode 100644 index 000000000..9282ac0a4 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/steps/data-resource-saas.vue @@ -0,0 +1,60 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/steps/data-resource.vue b/examples/docs/resources/mobile-first/app/steps/data-resource.vue new file mode 100644 index 000000000..f33ac4475 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/steps/data-resource.vue @@ -0,0 +1,42 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/steps/duration.vue b/examples/docs/resources/mobile-first/app/steps/duration.vue new file mode 100644 index 000000000..00ae32bb4 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/steps/duration.vue @@ -0,0 +1,39 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/steps/slot-bottom.vue b/examples/docs/resources/mobile-first/app/steps/slot-bottom.vue new file mode 100644 index 000000000..ef319b05a --- /dev/null +++ b/examples/docs/resources/mobile-first/app/steps/slot-bottom.vue @@ -0,0 +1,76 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/steps/slot-item.vue b/examples/docs/resources/mobile-first/app/steps/slot-item.vue new file mode 100644 index 000000000..beb239a56 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/steps/slot-item.vue @@ -0,0 +1,56 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/steps/slot.vue b/examples/docs/resources/mobile-first/app/steps/slot.vue new file mode 100644 index 000000000..23fd5c479 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/steps/slot.vue @@ -0,0 +1,54 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/steps/vertical.vue b/examples/docs/resources/mobile-first/app/steps/vertical.vue new file mode 100644 index 000000000..fcb092040 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/steps/vertical.vue @@ -0,0 +1,42 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/switch/basic-usage.vue b/examples/docs/resources/mobile-first/app/switch/basic-usage.vue new file mode 100644 index 000000000..38e19f1fe --- /dev/null +++ b/examples/docs/resources/mobile-first/app/switch/basic-usage.vue @@ -0,0 +1,21 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/switch/custom-open-close.vue b/examples/docs/resources/mobile-first/app/switch/custom-open-close.vue new file mode 100644 index 000000000..10fe0f7bb --- /dev/null +++ b/examples/docs/resources/mobile-first/app/switch/custom-open-close.vue @@ -0,0 +1,25 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/switch/custom-true-false-value.vue b/examples/docs/resources/mobile-first/app/switch/custom-true-false-value.vue new file mode 100644 index 000000000..99eac25cf --- /dev/null +++ b/examples/docs/resources/mobile-first/app/switch/custom-true-false-value.vue @@ -0,0 +1,28 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/switch/dynamic-disable.vue b/examples/docs/resources/mobile-first/app/switch/dynamic-disable.vue new file mode 100644 index 000000000..836bf9b96 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/switch/dynamic-disable.vue @@ -0,0 +1,26 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/switch/enent.vue b/examples/docs/resources/mobile-first/app/switch/enent.vue new file mode 100644 index 000000000..68c8f76a7 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/switch/enent.vue @@ -0,0 +1,18 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/switch/icon-mode.vue b/examples/docs/resources/mobile-first/app/switch/icon-mode.vue new file mode 100644 index 000000000..7900a791b --- /dev/null +++ b/examples/docs/resources/mobile-first/app/switch/icon-mode.vue @@ -0,0 +1,21 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/switch/loading-mode.vue b/examples/docs/resources/mobile-first/app/switch/loading-mode.vue new file mode 100644 index 000000000..ad758db90 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/switch/loading-mode.vue @@ -0,0 +1,21 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/switch/mini-mode.vue b/examples/docs/resources/mobile-first/app/switch/mini-mode.vue new file mode 100644 index 000000000..9374b9dd6 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/switch/mini-mode.vue @@ -0,0 +1,13 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/switch/word-mode.vue b/examples/docs/resources/mobile-first/app/switch/word-mode.vue new file mode 100644 index 000000000..d5808707a --- /dev/null +++ b/examples/docs/resources/mobile-first/app/switch/word-mode.vue @@ -0,0 +1,21 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/tabs/align-center.vue b/examples/docs/resources/mobile-first/app/tabs/align-center.vue new file mode 100644 index 000000000..728f2a794 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/tabs/align-center.vue @@ -0,0 +1,24 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/tabs/basic-usage.vue b/examples/docs/resources/mobile-first/app/tabs/basic-usage.vue new file mode 100644 index 000000000..4a614cb19 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/tabs/basic-usage.vue @@ -0,0 +1,32 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/tabs/before-leave.vue b/examples/docs/resources/mobile-first/app/tabs/before-leave.vue new file mode 100644 index 000000000..a0ae91ee7 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/tabs/before-leave.vue @@ -0,0 +1,37 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/tabs/change-title.vue b/examples/docs/resources/mobile-first/app/tabs/change-title.vue new file mode 100644 index 000000000..6f5f8a5c0 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/tabs/change-title.vue @@ -0,0 +1,40 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/tabs/custom-tab-content.vue b/examples/docs/resources/mobile-first/app/tabs/custom-tab-content.vue new file mode 100644 index 000000000..0101f1d63 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/tabs/custom-tab-content.vue @@ -0,0 +1,32 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/tabs/custom-tab-title.vue b/examples/docs/resources/mobile-first/app/tabs/custom-tab-title.vue new file mode 100644 index 000000000..c0323c490 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/tabs/custom-tab-title.vue @@ -0,0 +1,47 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/tabs/mobile-first.vue b/examples/docs/resources/mobile-first/app/tabs/mobile-first.vue new file mode 100644 index 000000000..a3ab2fac5 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/tabs/mobile-first.vue @@ -0,0 +1,109 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/tabs/position-bottom.vue b/examples/docs/resources/mobile-first/app/tabs/position-bottom.vue new file mode 100644 index 000000000..eca01b9a5 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/tabs/position-bottom.vue @@ -0,0 +1,50 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/tabs/position-left.vue b/examples/docs/resources/mobile-first/app/tabs/position-left.vue new file mode 100644 index 000000000..fa0527441 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/tabs/position-left.vue @@ -0,0 +1,50 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/tabs/position-right.vue b/examples/docs/resources/mobile-first/app/tabs/position-right.vue new file mode 100644 index 000000000..c305bcf32 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/tabs/position-right.vue @@ -0,0 +1,50 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/tabs/position.vue b/examples/docs/resources/mobile-first/app/tabs/position.vue new file mode 100644 index 000000000..094243d7d --- /dev/null +++ b/examples/docs/resources/mobile-first/app/tabs/position.vue @@ -0,0 +1,50 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/tabs/prevent-tab-switching.vue b/examples/docs/resources/mobile-first/app/tabs/prevent-tab-switching.vue new file mode 100644 index 000000000..4247c9f8d --- /dev/null +++ b/examples/docs/resources/mobile-first/app/tabs/prevent-tab-switching.vue @@ -0,0 +1,37 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/tabs/show-different-grid-data.vue b/examples/docs/resources/mobile-first/app/tabs/show-different-grid-data.vue new file mode 100644 index 000000000..3e647bb94 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/tabs/show-different-grid-data.vue @@ -0,0 +1,100 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/tabs/show-echarts.vue b/examples/docs/resources/mobile-first/app/tabs/show-echarts.vue new file mode 100644 index 000000000..7bfb22a73 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/tabs/show-echarts.vue @@ -0,0 +1,52 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/tabs/stretch-wh.vue b/examples/docs/resources/mobile-first/app/tabs/stretch-wh.vue new file mode 100644 index 000000000..23b393731 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/tabs/stretch-wh.vue @@ -0,0 +1,28 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/tabs/tab-style-bordercard.vue b/examples/docs/resources/mobile-first/app/tabs/tab-style-bordercard.vue new file mode 100644 index 000000000..c155b2300 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/tabs/tab-style-bordercard.vue @@ -0,0 +1,50 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/tabs/tab-style-card.vue b/examples/docs/resources/mobile-first/app/tabs/tab-style-card.vue new file mode 100644 index 000000000..77f168d64 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/tabs/tab-style-card.vue @@ -0,0 +1,50 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/tabs/tabdata-title.vue b/examples/docs/resources/mobile-first/app/tabs/tabdata-title.vue new file mode 100644 index 000000000..c35e692a5 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/tabs/tabdata-title.vue @@ -0,0 +1,66 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/tabs/tabs-draggable.vue b/examples/docs/resources/mobile-first/app/tabs/tabs-draggable.vue new file mode 100644 index 000000000..02320826b --- /dev/null +++ b/examples/docs/resources/mobile-first/app/tabs/tabs-draggable.vue @@ -0,0 +1,67 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/tabs/tabs-events-add.vue b/examples/docs/resources/mobile-first/app/tabs/tabs-events-add.vue new file mode 100644 index 000000000..eb1b3a371 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/tabs/tabs-events-add.vue @@ -0,0 +1,60 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/tabs/tabs-events-click.vue b/examples/docs/resources/mobile-first/app/tabs/tabs-events-click.vue new file mode 100644 index 000000000..4b3a8c6b6 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/tabs/tabs-events-click.vue @@ -0,0 +1,34 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/tabs/tabs-events-close.vue b/examples/docs/resources/mobile-first/app/tabs/tabs-events-close.vue new file mode 100644 index 000000000..03911cb3c --- /dev/null +++ b/examples/docs/resources/mobile-first/app/tabs/tabs-events-close.vue @@ -0,0 +1,62 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/tabs/tabs-events-edit.vue b/examples/docs/resources/mobile-first/app/tabs/tabs-events-edit.vue new file mode 100644 index 000000000..d6df8efb3 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/tabs/tabs-events-edit.vue @@ -0,0 +1,57 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/tabs/tabs-size.vue b/examples/docs/resources/mobile-first/app/tabs/tabs-size.vue new file mode 100644 index 000000000..95bb31062 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/tabs/tabs-size.vue @@ -0,0 +1,26 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/tabs/tabs-tabs.vue b/examples/docs/resources/mobile-first/app/tabs/tabs-tabs.vue new file mode 100644 index 000000000..fef4c2e93 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/tabs/tabs-tabs.vue @@ -0,0 +1,62 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/tabs/with-add.vue b/examples/docs/resources/mobile-first/app/tabs/with-add.vue new file mode 100644 index 000000000..329ffe3a0 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/tabs/with-add.vue @@ -0,0 +1,48 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/tag-group/basic-usage.vue b/examples/docs/resources/mobile-first/app/tag-group/basic-usage.vue new file mode 100644 index 000000000..6418301b3 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/tag-group/basic-usage.vue @@ -0,0 +1,107 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/tag-group/tag-group-effect.vue b/examples/docs/resources/mobile-first/app/tag-group/tag-group-effect.vue new file mode 100644 index 000000000..1dad882ac --- /dev/null +++ b/examples/docs/resources/mobile-first/app/tag-group/tag-group-effect.vue @@ -0,0 +1,38 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/tag-group/tag-group-size.vue b/examples/docs/resources/mobile-first/app/tag-group/tag-group-size.vue new file mode 100644 index 000000000..a41ce6a57 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/tag-group/tag-group-size.vue @@ -0,0 +1,38 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/tag-group/tag-group-type.vue b/examples/docs/resources/mobile-first/app/tag-group/tag-group-type.vue new file mode 100644 index 000000000..6436b337b --- /dev/null +++ b/examples/docs/resources/mobile-first/app/tag-group/tag-group-type.vue @@ -0,0 +1,56 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/tag/basic-usage.vue b/examples/docs/resources/mobile-first/app/tag/basic-usage.vue new file mode 100644 index 000000000..0c58659f4 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/tag/basic-usage.vue @@ -0,0 +1,13 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/tag/closeable.vue b/examples/docs/resources/mobile-first/app/tag/closeable.vue new file mode 100644 index 000000000..16b7f341c --- /dev/null +++ b/examples/docs/resources/mobile-first/app/tag/closeable.vue @@ -0,0 +1,40 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/tag/color3.vue b/examples/docs/resources/mobile-first/app/tag/color3.vue new file mode 100644 index 000000000..0c921a778 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/tag/color3.vue @@ -0,0 +1,15 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/tag/colorful-tag.vue b/examples/docs/resources/mobile-first/app/tag/colorful-tag.vue new file mode 100644 index 000000000..9bc9b4bc8 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/tag/colorful-tag.vue @@ -0,0 +1,38 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/tag/create.vue b/examples/docs/resources/mobile-first/app/tag/create.vue new file mode 100644 index 000000000..8c57c64e3 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/tag/create.vue @@ -0,0 +1,70 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/tag/effect.vue b/examples/docs/resources/mobile-first/app/tag/effect.vue new file mode 100644 index 000000000..5f588cfdd --- /dev/null +++ b/examples/docs/resources/mobile-first/app/tag/effect.vue @@ -0,0 +1,54 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/tag/hit.vue b/examples/docs/resources/mobile-first/app/tag/hit.vue new file mode 100644 index 000000000..0b055dac9 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/tag/hit.vue @@ -0,0 +1,35 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/tag/tag-event-click.vue b/examples/docs/resources/mobile-first/app/tag/tag-event-click.vue new file mode 100644 index 000000000..9f22dc61e --- /dev/null +++ b/examples/docs/resources/mobile-first/app/tag/tag-event-click.vue @@ -0,0 +1,40 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/tag/tag-event-close.vue b/examples/docs/resources/mobile-first/app/tag/tag-event-close.vue new file mode 100644 index 000000000..442161e2a --- /dev/null +++ b/examples/docs/resources/mobile-first/app/tag/tag-event-close.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/tag/tag-selectable.vue b/examples/docs/resources/mobile-first/app/tag/tag-selectable.vue new file mode 100644 index 000000000..56156065c --- /dev/null +++ b/examples/docs/resources/mobile-first/app/tag/tag-selectable.vue @@ -0,0 +1,29 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/tag/tag-size.vue b/examples/docs/resources/mobile-first/app/tag/tag-size.vue new file mode 100644 index 000000000..82b71f837 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/tag/tag-size.vue @@ -0,0 +1,24 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/time-line/auto-slot.vue b/examples/docs/resources/mobile-first/app/time-line/auto-slot.vue new file mode 100644 index 000000000..4faf6c7ac --- /dev/null +++ b/examples/docs/resources/mobile-first/app/time-line/auto-slot.vue @@ -0,0 +1,48 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/time-line/basic-usage.vue b/examples/docs/resources/mobile-first/app/time-line/basic-usage.vue new file mode 100644 index 000000000..009b1de1b --- /dev/null +++ b/examples/docs/resources/mobile-first/app/time-line/basic-usage.vue @@ -0,0 +1,23 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/time-line/fold-time.vue b/examples/docs/resources/mobile-first/app/time-line/fold-time.vue new file mode 100644 index 000000000..cf19e09a6 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/time-line/fold-time.vue @@ -0,0 +1,29 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/time-line/many-status.vue b/examples/docs/resources/mobile-first/app/time-line/many-status.vue new file mode 100644 index 000000000..c06e86148 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/time-line/many-status.vue @@ -0,0 +1,25 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/time-line/node-toset.vue b/examples/docs/resources/mobile-first/app/time-line/node-toset.vue new file mode 100644 index 000000000..e07084ce0 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/time-line/node-toset.vue @@ -0,0 +1,32 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/time-line/single-status.vue b/examples/docs/resources/mobile-first/app/time-line/single-status.vue new file mode 100644 index 000000000..c04b8e775 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/time-line/single-status.vue @@ -0,0 +1,40 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/time-line/sub-field.vue b/examples/docs/resources/mobile-first/app/time-line/sub-field.vue new file mode 100644 index 000000000..8831a88d9 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/time-line/sub-field.vue @@ -0,0 +1,23 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/time-picker-mobile/basic-usage.vue b/examples/docs/resources/mobile-first/app/time-picker-mobile/basic-usage.vue new file mode 100644 index 000000000..89f29b3a4 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/time-picker-mobile/basic-usage.vue @@ -0,0 +1,43 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/tooltip/basic-usage.vue b/examples/docs/resources/mobile-first/app/tooltip/basic-usage.vue new file mode 100644 index 000000000..65ffb787c --- /dev/null +++ b/examples/docs/resources/mobile-first/app/tooltip/basic-usage.vue @@ -0,0 +1,59 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/tooltip/content-pre.vue b/examples/docs/resources/mobile-first/app/tooltip/content-pre.vue new file mode 100644 index 000000000..1560b45eb --- /dev/null +++ b/examples/docs/resources/mobile-first/app/tooltip/content-pre.vue @@ -0,0 +1,28 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/tooltip/content-render.vue b/examples/docs/resources/mobile-first/app/tooltip/content-render.vue new file mode 100644 index 000000000..cd2f3cdbd --- /dev/null +++ b/examples/docs/resources/mobile-first/app/tooltip/content-render.vue @@ -0,0 +1,37 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/tooltip/dynamic-disable.vue b/examples/docs/resources/mobile-first/app/tooltip/dynamic-disable.vue new file mode 100644 index 000000000..96b75d62f --- /dev/null +++ b/examples/docs/resources/mobile-first/app/tooltip/dynamic-disable.vue @@ -0,0 +1,23 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/tooltip/enterable.vue b/examples/docs/resources/mobile-first/app/tooltip/enterable.vue new file mode 100644 index 000000000..7f8603a43 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/tooltip/enterable.vue @@ -0,0 +1,23 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/tooltip/manual-control-tip.vue b/examples/docs/resources/mobile-first/app/tooltip/manual-control-tip.vue new file mode 100644 index 000000000..6db272793 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/tooltip/manual-control-tip.vue @@ -0,0 +1,33 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/tooltip/open-delay.vue b/examples/docs/resources/mobile-first/app/tooltip/open-delay.vue new file mode 100644 index 000000000..937fc8e47 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/tooltip/open-delay.vue @@ -0,0 +1,28 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/tooltip/popper-class.vue b/examples/docs/resources/mobile-first/app/tooltip/popper-class.vue new file mode 100644 index 000000000..e5cc5b21b --- /dev/null +++ b/examples/docs/resources/mobile-first/app/tooltip/popper-class.vue @@ -0,0 +1,23 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/tooltip/popper-options-bubbling.vue b/examples/docs/resources/mobile-first/app/tooltip/popper-options-bubbling.vue new file mode 100644 index 000000000..1498b3046 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/tooltip/popper-options-bubbling.vue @@ -0,0 +1,58 @@ + + + + + diff --git a/examples/docs/resources/mobile-first/app/tooltip/popper-options.vue b/examples/docs/resources/mobile-first/app/tooltip/popper-options.vue new file mode 100644 index 000000000..64dbcc59f --- /dev/null +++ b/examples/docs/resources/mobile-first/app/tooltip/popper-options.vue @@ -0,0 +1,26 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/tooltip/tabindex.vue b/examples/docs/resources/mobile-first/app/tooltip/tabindex.vue new file mode 100644 index 000000000..d8ac3ed2b --- /dev/null +++ b/examples/docs/resources/mobile-first/app/tooltip/tabindex.vue @@ -0,0 +1,16 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/tooltip/tooltip-content.vue b/examples/docs/resources/mobile-first/app/tooltip/tooltip-content.vue new file mode 100644 index 000000000..7380c6a07 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/tooltip/tooltip-content.vue @@ -0,0 +1,28 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/tooltip/tooltip-offset.vue b/examples/docs/resources/mobile-first/app/tooltip/tooltip-offset.vue new file mode 100644 index 000000000..d2e5a2717 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/tooltip/tooltip-offset.vue @@ -0,0 +1,21 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/tooltip/tooltip-theme.vue b/examples/docs/resources/mobile-first/app/tooltip/tooltip-theme.vue new file mode 100644 index 000000000..c219b62e8 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/tooltip/tooltip-theme.vue @@ -0,0 +1,21 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/tooltip/visible-arrow.vue b/examples/docs/resources/mobile-first/app/tooltip/visible-arrow.vue new file mode 100644 index 000000000..2e3021315 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/tooltip/visible-arrow.vue @@ -0,0 +1,23 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/tooltip/z-index.vue b/examples/docs/resources/mobile-first/app/tooltip/z-index.vue new file mode 100644 index 000000000..22b067e10 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/tooltip/z-index.vue @@ -0,0 +1,40 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/user-head/basic-usage.vue b/examples/docs/resources/mobile-first/app/user-head/basic-usage.vue new file mode 100644 index 000000000..8a5b6e5c8 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/user-head/basic-usage.vue @@ -0,0 +1,38 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/user-head/user-head-group.vue b/examples/docs/resources/mobile-first/app/user-head/user-head-group.vue new file mode 100644 index 000000000..42699e507 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/user-head/user-head-group.vue @@ -0,0 +1,211 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/user-head/user-head-size.vue b/examples/docs/resources/mobile-first/app/user-head/user-head-size.vue new file mode 100644 index 000000000..f30430dd2 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/user-head/user-head-size.vue @@ -0,0 +1,40 @@ + + + diff --git a/examples/docs/resources/mobile-first/app/user-head/user-head-style.vue b/examples/docs/resources/mobile-first/app/user-head/user-head-style.vue new file mode 100644 index 000000000..ccb9988d8 --- /dev/null +++ b/examples/docs/resources/mobile-first/app/user-head/user-head-style.vue @@ -0,0 +1,16 @@ + + + diff --git a/examples/docs/resources/mobile-first/md/action-sheet/action-sheet-mf.md b/examples/docs/resources/mobile-first/md/action-sheet/action-sheet-mf.md new file mode 100644 index 000000000..ec88301f8 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/action-sheet/action-sheet-mf.md @@ -0,0 +1,54 @@ +
+

+ +

+ +## ActionSheet 动作面板组件 + + +
+ +### 基本用法 + + + +### 操作列表模式 + +设置 `type` 为 `action` 启用操作列表模式,设置 `title` 显示提示语。 + + + +### 显示隐藏 + +:::tip 显示隐藏说明 + +- show-header: 显示头部,默认值为 true; +- show-search: 显示头部搜索功能,默认值为 true; +- show-footer: 显示底部,默认值为 false; + ::: + + + +### 遮罩层 + +添加 `mask` 属性可以关闭遮罩层,默认值为 `true` 。 + + + +默认弹窗打开后,可以单击遮罩层关闭弹窗,设置 `mask-closable` 为 `false` 后将禁用该功能,默认值为 `true` 。 + + + +### 插槽 + +:::tip 插槽说明 + +- header: 头部插槽,默认显示头部,设置 show-header="true" 时有效; +- header-left: 头部左侧插槽,默认显示搜索功能; +- header-right: 头部右侧插槽,默认显示关闭功能; +- footer: 头部插槽,默认隐藏底部,设置 show-footer="true" 时有效; + ::: + + + +
\ No newline at end of file diff --git a/examples/docs/resources/mobile-first/md/action-sheet/action-sheet-slot.md b/examples/docs/resources/mobile-first/md/action-sheet/action-sheet-slot.md new file mode 100644 index 000000000..21efac396 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/action-sheet/action-sheet-slot.md @@ -0,0 +1,26 @@ +
+

+ +

+ +## ActionSheet 动作面板组件 + + + +
+ +### 插槽 + +:::tip 插槽说明 + +- header: 头部插槽,默认显示头部,设置 show-header="true" 时有效; +- header-left: 头部左侧插槽,默认显示搜索功能; +- header-right: 头部右侧插槽,默认显示关闭功能; +- footer: 头部插槽,默认隐藏底部,设置 show-footer="true" 时有效; + ::: + + + +
+ + diff --git a/examples/docs/resources/mobile-first/md/action-sheet/basic-usage.md b/examples/docs/resources/mobile-first/md/action-sheet/basic-usage.md new file mode 100644 index 000000000..d833de87f --- /dev/null +++ b/examples/docs/resources/mobile-first/md/action-sheet/basic-usage.md @@ -0,0 +1,52 @@ +
+

+ +

+ +## ActionSheet 动作面板组件 + + +
+ +### 基本用法 + + + +### 操作列表模式 + +设置 `type` 为 `action` 启用操作列表模式,设置 `title` 显示提示语。 + + + +### 显示隐藏 + +:::tip 显示隐藏说明 + +- show-header: 显示头部,默认值为 true; +- show-search: 显示头部搜索功能,默认值为 true; +- show-footer: 显示底部,默认值为 false; + ::: + + + +### 遮罩层 + +添加 `mask` 属性可以关闭遮罩层,默认值为 `true` 。 + + + +默认弹窗打开后,可以单击遮罩层关闭弹窗,设置 `mask-closable` 为 `false` 后将禁用该功能,默认值为 `true` 。 + + + +### 插槽 + +:::tip 插槽说明 + +- header: 头部插槽,默认显示头部,设置 show-header="true" 时有效; +- header-left: 头部左侧插槽,默认显示搜索功能; +- header-right: 头部右侧插槽,默认显示关闭功能; +- footer: 头部插槽,默认隐藏底部,设置 show-footer="true" 时有效; + ::: + + diff --git a/examples/docs/resources/mobile-first/md/action-sheet/ellipsis.md b/examples/docs/resources/mobile-first/md/action-sheet/ellipsis.md new file mode 100644 index 000000000..b83063445 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/action-sheet/ellipsis.md @@ -0,0 +1,18 @@ +
+

+ +

+ +## ActionSheet 动作面板组件 + + +
+ +### 插槽 + +添加属性 `ellipsis` 选项内容会超出隐藏。 + + +
+ + diff --git a/examples/docs/resources/mobile-first/md/action-sheet/multiple.md b/examples/docs/resources/mobile-first/md/action-sheet/multiple.md new file mode 100644 index 000000000..a09cd8b10 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/action-sheet/multiple.md @@ -0,0 +1,18 @@ +
+

+ +

+ +## ActionSheet 动作面板组件 + + +
+ +### 插槽 + +通过添加属性 `multiple`,开启多选功能。 + + +
+ + diff --git a/examples/docs/resources/mobile-first/md/action-sheet/show.md b/examples/docs/resources/mobile-first/md/action-sheet/show.md new file mode 100644 index 000000000..80175865f --- /dev/null +++ b/examples/docs/resources/mobile-first/md/action-sheet/show.md @@ -0,0 +1,24 @@ +
+

+ +

+ +## ActionSheet 动作面板组件 + + +
+ +### 插槽 + +:::tip 显示隐藏说明 + +- show-header: 显示头部,默认值为 true; +- show-search: 显示头部搜索功能,默认值为 true; +- show-footer: 显示底部,默认值为 false; + ::: + + + +
+ + diff --git a/examples/docs/resources/mobile-first/md/action-sheet/slot.md b/examples/docs/resources/mobile-first/md/action-sheet/slot.md new file mode 100644 index 000000000..29585b646 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/action-sheet/slot.md @@ -0,0 +1,24 @@ +
+

+ +

+ +## ActionSheet 动作面板组件 + + +
+ +### 插槽 + +:::tip 插槽说明 +- header: 头部插槽,默认显示头部,设置 show-header="true" 时有效; +- header-left: 头部左侧插槽,默认显示搜索功能; +- header-right: 头部右侧插槽,默认显示关闭功能; +- footer: 头部插槽,默认隐藏底部,设置 show-footer="true" 时有效; +::: + + + +
+ + diff --git a/examples/docs/resources/mobile-first/md/alert/alert-close-event.md b/examples/docs/resources/mobile-first/md/alert/alert-close-event.md new file mode 100644 index 000000000..5d49004a3 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/alert/alert-close-event.md @@ -0,0 +1,18 @@ +
+

+ +

+ +## Alert 警告 + + + +
+ +### 关闭事件 + +`close` 事件,关闭警告框时触发。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/alert/alert-type.md b/examples/docs/resources/mobile-first/md/alert/alert-type.md new file mode 100644 index 000000000..9feef3fe7 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/alert/alert-type.md @@ -0,0 +1,18 @@ +
+

+ +

+ +## Alert 警告 + + + +
+ +### 类型 + +通过 `type` 设置不同的类型。可选值:success、warning、info、error,默认值:info 。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/alert/align-center.md b/examples/docs/resources/mobile-first/md/alert/align-center.md new file mode 100644 index 000000000..63e9202b4 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/alert/align-center.md @@ -0,0 +1,18 @@ +
+

+ +

+ +## Alert 警告 + + + +
+ +### 文字居中 + +通过 `center` 属性可使文字显示居中。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/alert/basic-usage.md b/examples/docs/resources/mobile-first/md/alert/basic-usage.md new file mode 100644 index 000000000..ed3ffcebc --- /dev/null +++ b/examples/docs/resources/mobile-first/md/alert/basic-usage.md @@ -0,0 +1,18 @@ +
+

+ +

+ +## Alert 警告 + + + +
+ +### 基本用法 + + + +
+ + diff --git a/examples/docs/resources/mobile-first/md/alert/custom-alert-icon.md b/examples/docs/resources/mobile-first/md/alert/custom-alert-icon.md new file mode 100644 index 000000000..976062f7f --- /dev/null +++ b/examples/docs/resources/mobile-first/md/alert/custom-alert-icon.md @@ -0,0 +1,18 @@ +
+

+ +

+ +## Alert 警告 + + + +
+ +### 自定义警告图标 + +通过 `icon` 属性自定义图标。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/alert/custom-close-text.md b/examples/docs/resources/mobile-first/md/alert/custom-close-text.md new file mode 100644 index 000000000..d646225f3 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/alert/custom-close-text.md @@ -0,0 +1,18 @@ +
+

+ +

+ +## Alert 警告 + + + +
+ +### 自定义关闭按钮文本 + +通过属性 `close-text` 自定义关闭按钮文本。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/alert/custom-description.md b/examples/docs/resources/mobile-first/md/alert/custom-description.md new file mode 100644 index 000000000..6955f01f3 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/alert/custom-description.md @@ -0,0 +1,18 @@ +
+

+ +

+ +## Alert 警告 + + + +
+ +### 自定义提示内容 + +可通过 `description` 属性或插槽设置自定义提示内容。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/alert/custom-title.md b/examples/docs/resources/mobile-first/md/alert/custom-title.md new file mode 100644 index 000000000..78bf191e5 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/alert/custom-title.md @@ -0,0 +1,18 @@ +
+

+ +

+ +## Alert 警告 + + + +
+ +### 自定义标题 + +当 `size` 为 large 时显示标题,可设置 `title` 或 `slot` 自定义标题。默认标题根据设置的 `type` 显示。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/alert/feedback-of-result.md b/examples/docs/resources/mobile-first/md/alert/feedback-of-result.md new file mode 100644 index 000000000..f834822b4 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/alert/feedback-of-result.md @@ -0,0 +1,18 @@ +
+

+ +

+ +## Alert 警告 + + + +
+ +### 表单提交结果反馈 + +当 `size` 为 large 时,属性 `description` 和默认插槽结合使用,可渲染提交反馈界面。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/alert/interactive-operation.md b/examples/docs/resources/mobile-first/md/alert/interactive-operation.md new file mode 100644 index 000000000..a42d418b3 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/alert/interactive-operation.md @@ -0,0 +1,18 @@ +
+

+ +

+ +## Alert 警告 + + + +
+ +### 自定义交互操作 + +当 `size` 为 large 时,设置默认插槽自定义交互操作。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/alert/large-size.md b/examples/docs/resources/mobile-first/md/alert/large-size.md new file mode 100644 index 000000000..ddf81af7b --- /dev/null +++ b/examples/docs/resources/mobile-first/md/alert/large-size.md @@ -0,0 +1,18 @@ +
+

+ +

+ +## Alert 警告 + + + +
+ +### 大尺寸 + +通过 `size` 属性设置不同的尺寸,可选值:nomal、large,默认值:nomal 。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/alert/not-closable.md b/examples/docs/resources/mobile-first/md/alert/not-closable.md new file mode 100644 index 000000000..17209e05d --- /dev/null +++ b/examples/docs/resources/mobile-first/md/alert/not-closable.md @@ -0,0 +1,18 @@ +
+

+ +

+ +## Alert 警告 + + + +
+ +### 不可关闭 + +通过 `closable` 属性可设置是否显示关闭按钮,没有关闭按钮,警告框将不可关闭。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/alert/show-icon.md b/examples/docs/resources/mobile-first/md/alert/show-icon.md new file mode 100644 index 000000000..75f7a60f0 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/alert/show-icon.md @@ -0,0 +1,18 @@ +
+

+ +

+ +## Alert 警告 + + + +
+ +### 是否显示图标 + +通过配置 `show-icon` 属性,控制图标是否显示。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/badge/badge-style.md b/examples/docs/resources/mobile-first/md/badge/badge-style.md new file mode 100644 index 000000000..f90bfebd0 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/badge/badge-style.md @@ -0,0 +1,25 @@ +
+

+ +

+ +## Badge 标记 + + + +Badge 展示指定数据信息,如:我的待办数、新任务数等。 + +
+ +### 默认主題样式 + +`type` 设置显示主题,可选值:danger(默认)、primary、success、warning、info + + + +### 圆点向左排列样式 + +`show-left` 设置是否向左展示,仅对圆点生效 + + +
diff --git a/examples/docs/resources/mobile-first/md/badge/basic-usage.md b/examples/docs/resources/mobile-first/md/badge/basic-usage.md new file mode 100644 index 000000000..06593881b --- /dev/null +++ b/examples/docs/resources/mobile-first/md/badge/basic-usage.md @@ -0,0 +1,21 @@ +
+

+ +

+ +## Badge 标记 + + + +Badge 展示指定数据信息,如:我的待办数、新任务数等。 + +
+ +### 基本用法 + +

Badge 展示指定数据信息,如:我的待办数、新任务数等。

+ + +
+ + diff --git a/examples/docs/resources/mobile-first/md/badge/custom-badge-target.md b/examples/docs/resources/mobile-first/md/badge/custom-badge-target.md new file mode 100644 index 000000000..d2bef7c06 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/badge/custom-badge-target.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## Badge 标记 + + + +Badge 展示指定数据信息,如:我的待办数、新任务数等。 + +
+ +### 自定义标记目标 + +`default slot` 标记内容自定义 + + + +
diff --git a/examples/docs/resources/mobile-first/md/badge/custom-tip-text.md b/examples/docs/resources/mobile-first/md/badge/custom-tip-text.md new file mode 100644 index 000000000..bc20d50da --- /dev/null +++ b/examples/docs/resources/mobile-first/md/badge/custom-tip-text.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## Badge 标记 + + + +Badge 展示指定数据信息,如:我的待办数、新任务数等。 + +
+ +### 自定义提示内容 + +`content slot` 自定义提示内容 + + + +
diff --git a/examples/docs/resources/mobile-first/md/badge/hidden-badge-while-read-message.md b/examples/docs/resources/mobile-first/md/badge/hidden-badge-while-read-message.md new file mode 100644 index 000000000..ad2543963 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/badge/hidden-badge-while-read-message.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## Badge 标记 + + + +Badge 展示指定数据信息,如:我的待办数、新任务数等。 + +
+ +### 消息已读动态隐藏标记 + +`hidden` 隐藏标记 + + + +
diff --git a/examples/docs/resources/mobile-first/md/badge/href-target.md b/examples/docs/resources/mobile-first/md/badge/href-target.md new file mode 100644 index 000000000..a1557bcc5 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/badge/href-target.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## Badge 标记 + + + +Badge 展示指定数据信息,如:我的待办数、新任务数等。 + +
+ +### 跳转链接 + +`href`定义跳转链接 + + + +
diff --git a/examples/docs/resources/mobile-first/md/badge/is-dot.md b/examples/docs/resources/mobile-first/md/badge/is-dot.md new file mode 100644 index 000000000..dc95baf38 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/badge/is-dot.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## Badge 标记 + + + +Badge 展示指定数据信息,如:我的待办数、新任务数等。 + +
+ +### 小圆点标记 + +通过`is-dot` 显示小圆点标记 + + + +
diff --git a/examples/docs/resources/mobile-first/md/badge/max-num.md b/examples/docs/resources/mobile-first/md/badge/max-num.md new file mode 100644 index 000000000..758607c3c --- /dev/null +++ b/examples/docs/resources/mobile-first/md/badge/max-num.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## Badge 标记 + + + +Badge 展示指定数据信息,如:我的待办数、新任务数等。 + +
+ +### 计数最大值 + +`max` 超过最大值会显示 '{max}+' + + + +
diff --git a/examples/docs/resources/mobile-first/md/badge/props-content.md b/examples/docs/resources/mobile-first/md/badge/props-content.md new file mode 100644 index 000000000..2082f716b --- /dev/null +++ b/examples/docs/resources/mobile-first/md/badge/props-content.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## Badge 标记 + + + +Badge 展示指定数据信息,如:我的待办数、新任务数等。 + +
+ +### 属性传值显示内容 + +通过绑定`data`属性传入自定义内容 + + + +
diff --git a/examples/docs/resources/mobile-first/md/button-group/basic-usage.md b/examples/docs/resources/mobile-first/md/button-group/basic-usage.md new file mode 100644 index 000000000..e7a5c9204 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/button-group/basic-usage.md @@ -0,0 +1,21 @@ +
+

+ +

+ +## ButtonGroup 按钮组 + + + +以按钮组的方式出现,常用于多项类似操作。 +
+ +### 基本用法 + +通过 `v-model` 设置默认选中的按钮,并实现双向绑定。通过 `value` 也可设置默认选中按钮,但不能进行双向绑定。 + + + +
+ + diff --git a/examples/docs/resources/mobile-first/md/button-group/button-group-data.md b/examples/docs/resources/mobile-first/md/button-group/button-group-data.md new file mode 100644 index 000000000..809515eda --- /dev/null +++ b/examples/docs/resources/mobile-first/md/button-group/button-group-data.md @@ -0,0 +1,19 @@ +
+

+ +

+ +## Buttongroup 按钮组 + + + +以按钮组的方式出现,常用于多项类似操作。 +
+ +### 按钮组数据 + +通过 `data` 属性设置按钮组数据,对象中的 text 为按钮显示文本,value 用于双向绑定时指定的值。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/button-group/default-slot-usage.md b/examples/docs/resources/mobile-first/md/button-group/default-slot-usage.md new file mode 100644 index 000000000..b73fa99d7 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/button-group/default-slot-usage.md @@ -0,0 +1,21 @@ +
+

+ +

+ +## Buttongroup 按钮组 + + + +以按钮组的方式出现,常用于多项类似操作。 +
+ +### 默认插槽 + +使用默认插槽的方式时,ButtonGroup 的 `data、text-field、value-field、value / v-model、size` 属性对插槽中的按钮将不再生效。 + +但可根据使用场景在 Button 组件标签上对不同按钮设置不同的属性,具体参考 Button 组件属性。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/button-group/dynamic-disable.md b/examples/docs/resources/mobile-first/md/button-group/dynamic-disable.md new file mode 100644 index 000000000..8a9f09755 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/button-group/dynamic-disable.md @@ -0,0 +1,19 @@ +
+

+ +

+ +## Buttongroup 按钮组 + + + +以按钮组的方式出现,常用于多项类似操作。 +
+ +### 禁用状态 + +设置 `disabled` 属性为 true 可禁用整个按钮组。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/button-group/plain-button-group.md b/examples/docs/resources/mobile-first/md/button-group/plain-button-group.md new file mode 100644 index 000000000..c835feb21 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/button-group/plain-button-group.md @@ -0,0 +1,19 @@ +
+

+ +

+ +## Buttongroup 按钮组 + + + +以按钮组的方式出现,常用于多项类似操作。 +
+ +### 朴素按钮 + +设置 `plain` 属性为 true 可显示为朴素按钮样式。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/button-group/size.md b/examples/docs/resources/mobile-first/md/button-group/size.md new file mode 100644 index 000000000..926767f24 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/button-group/size.md @@ -0,0 +1,16 @@ +
+

+ +

+ +## ButtonGroup 按钮组 + + + +以按钮组的方式出现,常用于多项类似操作。 +
+ +### 设置组件大小 + +可以设置为:`medium`,`small`,`mini` + diff --git a/examples/docs/resources/mobile-first/md/button-group/text-value-field.md b/examples/docs/resources/mobile-first/md/button-group/text-value-field.md new file mode 100644 index 000000000..67ab73b46 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/button-group/text-value-field.md @@ -0,0 +1,19 @@ +
+

+ +

+ +## Buttongroup 按钮组 + + + +以按钮组的方式出现,常用于多项类似操作。 +
+ +### 数据字段映射 + +若按钮组数据对象中的字段不是默认的 text 和 value ,则可通过 `text-field`、`value-field` 属性进行映射。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/button/autofocus.md b/examples/docs/resources/mobile-first/md/button/autofocus.md new file mode 100644 index 000000000..c75bf6a17 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/button/autofocus.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## Button 按钮 + + + +常用的操作按钮,提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型。 + +
+ +### 聚焦 + +通过 `autofocus` 属性设置是否默认聚焦。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/button/basic-usage-saas.md b/examples/docs/resources/mobile-first/md/button/basic-usage-saas.md new file mode 100644 index 000000000..54c2c5039 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/button/basic-usage-saas.md @@ -0,0 +1,21 @@ +
+

+ +

+ +## Button 按钮 + + + +常用的操作按钮,提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型。 +
+ +### 基本用法 + + + +
+ + + +
diff --git a/examples/docs/resources/mobile-first/md/button/basic-usage.md b/examples/docs/resources/mobile-first/md/button/basic-usage.md new file mode 100644 index 000000000..575050b79 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/button/basic-usage.md @@ -0,0 +1,21 @@ +
+

+ +

+ +## Button 按钮 + + + +常用的操作按钮,提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型。 +
+ +### 基本用法 + + + +
+ + + +
diff --git a/examples/docs/resources/mobile-first/md/button/button-events.md b/examples/docs/resources/mobile-first/md/button/button-events.md new file mode 100644 index 000000000..efec78b87 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/button/button-events.md @@ -0,0 +1,19 @@ +
+

+ +

+ +## Button 按钮 + + + +常用的操作按钮,提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型。 +
+ +### 事件 + +按钮的单击事件,该示例中单击按钮将会出现提示信息。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/button/button-group.md b/examples/docs/resources/mobile-first/md/button/button-group.md new file mode 100644 index 000000000..39a1ed623 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/button/button-group.md @@ -0,0 +1,17 @@ +
+

+ +

+ +## Button 按钮 + + + +常用的操作按钮,提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型。 +
+ +### 按钮组 + + + +
diff --git a/examples/docs/resources/mobile-first/md/button/button-mf.md b/examples/docs/resources/mobile-first/md/button/button-mf.md new file mode 100644 index 000000000..625b912fb --- /dev/null +++ b/examples/docs/resources/mobile-first/md/button/button-mf.md @@ -0,0 +1,74 @@ +
+

+ +

+ +## Button 按钮 + + + +常用的操作按钮,提供包括默认按钮、图标按钮、下拉按钮等类型。 + +
+ +### 基本用法 + + + +### 文字按钮 + +设置 `type` 属性为 `text` 即为文字按钮,可在标签子级或者通过 `text` 属性设置显示内容。 + + + +### 线性按钮 + +配置 `plain` 属性为 true,即可展示为线性按钮的形式。 + + + +### 超链接按钮 + +通过设置 `href` 属性可跳转到指定页面。 + + + +### 主题样式 + +通过 `type` 属性可以设置不同的主题样式,主要包括 primary、success、info、warning、danger、text。 + + + +### 尺寸 + +通过 `size` 属性设置按钮不同的大小尺寸,包括 medium、small、mini 三种不同大小。不设置时为默认尺寸。 + + + +### 聚焦 + +通过 `autofocus` 属性设置是否默认聚焦。 + + + +### 防止表单重复提交 + +通过 `reset-time` 属性可设置单击后按钮禁用的时长,默认的禁用时长为 1000 毫秒。 + +可用于防止按钮连续点击出现表单重复提交的问题。 + + + +### 事件 + +按钮的单击事件,该示例中单击按钮将会出现提示信息。 + + + +### 动态禁用按钮 + +设置 `disabled` 属性为 true 后,可以禁用按钮。 + + + +
\ No newline at end of file diff --git a/examples/docs/resources/mobile-first/md/button/button-size.md b/examples/docs/resources/mobile-first/md/button/button-size.md new file mode 100644 index 000000000..e8ad80f30 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/button/button-size.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## Button 按钮 + + + +常用的操作按钮,提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型。 + +
+ +### 尺寸 + +通过 `size` 属性设置按钮不同的大小尺寸,包括 medium、small、mini 三种不同大小。不设置时为默认尺寸。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/button/button-style.md b/examples/docs/resources/mobile-first/md/button/button-style.md new file mode 100644 index 000000000..5fe2aa6f8 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/button/button-style.md @@ -0,0 +1,19 @@ +
+

+ +

+ +## Button 按钮 + + + +常用的操作按钮,提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型。 +
+ +### 主题样式 + +通过 `type` 属性可以设置不同的主题样式,主要包括 primary、success、info、warning、danger、text。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/button/circle-button.md b/examples/docs/resources/mobile-first/md/button/circle-button.md new file mode 100644 index 000000000..0188292de --- /dev/null +++ b/examples/docs/resources/mobile-first/md/button/circle-button.md @@ -0,0 +1,19 @@ +
+

+ +

+ +## Button 按钮 + + + +常用的操作按钮,提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型。 +
+ +### 圆形按钮 + +直接配置 `circle` 属性为 true,即可展示为圆形按钮的形式。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/button/dynamic-disable-button.md b/examples/docs/resources/mobile-first/md/button/dynamic-disable-button.md new file mode 100644 index 000000000..fd3be8c8e --- /dev/null +++ b/examples/docs/resources/mobile-first/md/button/dynamic-disable-button.md @@ -0,0 +1,19 @@ +
+

+ +

+ +## Button 按钮 + + + +常用的操作按钮,提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型。 +
+ +### 动态禁用按钮 + +设置 `disabled` 属性为 true 后,可以禁用按钮。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/button/icon-button.md b/examples/docs/resources/mobile-first/md/button/icon-button.md new file mode 100644 index 000000000..ebe995383 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/button/icon-button.md @@ -0,0 +1,24 @@ +
+

+ +

+ +## Button 按钮 + + + +常用的操作按钮,提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型。 +
+ +### 图标按钮 + +指定 `icon` 属性值为需要的 Icon 图标即可展示为图标按钮。 + +:::tip Icon 图标用法 +先从 `@aurora/vue-icon` 中导入需要的 Icon,再在 data 函数中初始化 Icon 组件并赋值给一个属性。最后在模板中通过 `icon` 属性进行引用。点击这里查看更多图标。 +通过 `native-type` 设置 button、image 两种按钮的表单类型。该属性仅当属性 type 为 button 或 image 时使用。该属性的可选值为 button / submit / reset。 +::: + + + +
diff --git a/examples/docs/resources/mobile-first/md/button/img-button.md b/examples/docs/resources/mobile-first/md/button/img-button.md new file mode 100644 index 000000000..6dc06e409 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/button/img-button.md @@ -0,0 +1,19 @@ +
+

+ +

+ +## Button 按钮 + + + +常用的操作按钮,提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型。 +
+ +### 图片按钮 + +以默认插槽的用法嵌入 img 标签,并引入图片。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/button/link-button.md b/examples/docs/resources/mobile-first/md/button/link-button.md new file mode 100644 index 000000000..3d1dd5632 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/button/link-button.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## Button 按钮 + + + +常用的操作按钮,提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型。 + +
+ +### 超链接按钮 + +通过设置 `href` 属性可跳转到指定页面。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/button/plain-button.md b/examples/docs/resources/mobile-first/md/button/plain-button.md new file mode 100644 index 000000000..45c756fe9 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/button/plain-button.md @@ -0,0 +1,19 @@ +
+

+ +

+ +## Button 按钮 + + + +常用的操作按钮,提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型。 +
+ +### 线性按钮 + +配置 `plain` 属性为 true,即可展示为线性按钮的形式。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/button/reset-time.md b/examples/docs/resources/mobile-first/md/button/reset-time.md new file mode 100644 index 000000000..335dc52fd --- /dev/null +++ b/examples/docs/resources/mobile-first/md/button/reset-time.md @@ -0,0 +1,21 @@ +
+

+ +

+ +## Button 按钮 + + + +常用的操作按钮,提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型。 +
+ +### 防止表单重复提交 + +通过 `reset-time` 属性可设置单击后按钮禁用的时长,默认的禁用时长为 1000 毫秒。 + +可用于防止按钮连续点击出现表单重复提交的问题。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/button/round.md b/examples/docs/resources/mobile-first/md/button/round.md new file mode 100644 index 000000000..74c07114a --- /dev/null +++ b/examples/docs/resources/mobile-first/md/button/round.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## Button 按钮 + + + +常用的操作按钮,提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型。 + +
+ +### 防止表单重复提交 + +通过 `round` 属性设置是否圆角按钮。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/button/show-loading.md b/examples/docs/resources/mobile-first/md/button/show-loading.md new file mode 100644 index 000000000..ea134ccc8 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/button/show-loading.md @@ -0,0 +1,19 @@ +
+

+ +

+ +## Button 按钮 + + + +常用的操作按钮,提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型。 +
+ +### 显示加载中 + +直接配置 `loading` 属性为 true,即可展示为加载中的样式。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/button/text-button.md b/examples/docs/resources/mobile-first/md/button/text-button.md new file mode 100644 index 000000000..268106747 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/button/text-button.md @@ -0,0 +1,28 @@ +
+

+ +

+ +## Button 按钮 + + + +常用的操作按钮,提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型。 + +
+ +### 文字按钮 + +设置 `type` 属性为 `text` 即为文字按钮,可在标签子级或者通过 `text` 属性设置显示内容。 + + + +
+ +### 定制样式类 + +设置 `button-class` 属性定制按钮样式 + + + +
diff --git a/examples/docs/resources/mobile-first/md/calendar-bar/basic-usage.md b/examples/docs/resources/mobile-first/md/calendar-bar/basic-usage.md new file mode 100644 index 000000000..af78186c0 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/calendar-bar/basic-usage.md @@ -0,0 +1,61 @@ +
+

+ +

+ +## CalendarBar 日历栏 + +
+ +### 基本用法 + +组件 `v-model` 只接受字符串值,例如 `2022-12-18` + + + +### 禁用 + +使用 `config.disabled` 配置一个方法,用于判断参数日期是否禁用。 +使用 `config.disabledColorClass` 配置禁用日期的字体颜色类名。 +使用 `config.disabledBackgroundColorClass` 配置禁用日期的背景颜色类名。 + + + + +### 日期标记 + +使用 `config.mark` 配置一个方法,用于判断参数日期是否存在标记。 +此方法返回空字符串表示不存在标记,返回非空字符串表示存在标记,且标记内容就是该字符串。 +使用 `config.markBackgroundColorClass` 配置标记的颜色类名。 +使用 `config.showMarkMessage` 配置是否开启标记 `title` 提示,默认值为 `false`。 + + + +### 当前日期 + +用户传入的日期为 `当前日期`。 +使用 `config.currentColorClass` 配置 `当前日期` 的字体颜色类名; +使用 `config.currentBackgroundColorClass` 配置 `当前日期` 的背景颜色类名。 + + + +### 今天 + +使用 `config.renderItem` 可以配置一个方法,对日期面板的某些项进行定制渲染。 + + + +### 周起始 + +使用 `config.weekFirst` 配置每周的起始天。默认值为 `0`,表示周起始为 `周日`。也可以配置为 `1 ~ 6`,分别表示 `周一 ~ 周六`。 + + + +### 工作日 + +用户传入的日期为 `当前日期`,当前日期所在月份为 `当前月份`,当前月份周六周日为 `周末`,非周六周日为 `工作日`。 +使用 `config.workday` 配置一个方法,用于判断 `工作日` 是否作为真正的工作日; +使用 `config.holiday` 配置一个方法,用于判断 `周末` 是否作为真正的周末; +使用 `config.workdayColorClass` 和 `config.holidayColorClass` 配置工作日和周末的字体颜色类。 + + diff --git a/examples/docs/resources/mobile-first/md/card/basic-usage.md b/examples/docs/resources/mobile-first/md/card/basic-usage.md new file mode 100644 index 000000000..4c87abc4f --- /dev/null +++ b/examples/docs/resources/mobile-first/md/card/basic-usage.md @@ -0,0 +1,18 @@ +
+

+ +

+ +## Card 卡片 + + + +基础容器,可承载文字、列表、图片、段落等 + +
+ +### 基本用法 + + + +
diff --git a/examples/docs/resources/mobile-first/md/card/card-disabled.md b/examples/docs/resources/mobile-first/md/card/card-disabled.md new file mode 100644 index 000000000..8ff3f5e10 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/card/card-disabled.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## Card 卡片 + + + +基础容器,可承载文字、列表、图片、段落等 + +
+ +### 禁用 + +通过设置属性`disabled`禁用卡片 + + + +
diff --git a/examples/docs/resources/mobile-first/md/card/card-events.md b/examples/docs/resources/mobile-first/md/card/card-events.md new file mode 100644 index 000000000..b91380f62 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/card/card-events.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## Card 卡片 + + + +基础容器,可承载文字、列表、图片、段落等 + +
+ +### 事件 + +`change` 事件:卡片勾选和取消勾选时触发 +`icon-click` 事件:操作栏按钮点击时触发 + + +
diff --git a/examples/docs/resources/mobile-first/md/card/card-group.md b/examples/docs/resources/mobile-first/md/card/card-group.md new file mode 100644 index 000000000..08bdb0337 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/card/card-group.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## Card 卡片 + + + +基础容器,可承载文字、列表、图片、段落等 + +
+ +### 卡片组 + +`card-group` 与 `card` 结合一起使用,提供响应式布局的能力 + + + +
diff --git a/examples/docs/resources/mobile-first/md/card/card-size.md b/examples/docs/resources/mobile-first/md/card/card-size.md new file mode 100644 index 000000000..bbead6ea4 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/card/card-size.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## Card 卡片 + + + +基础容器,可承载文字、列表、图片、段落等 + +
+ +### 尺寸 + +支持`mini small medium large`4 个尺寸的卡片 + + + +
diff --git a/examples/docs/resources/mobile-first/md/card/card-status.md b/examples/docs/resources/mobile-first/md/card/card-status.md new file mode 100644 index 000000000..91b8693d7 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/card/card-status.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## Card 卡片 + + + +基础容器,可承载文字、列表、图片、段落等 + +
+ +### 卡片状态 + +支持 `success warning alerting danger` 4 种状态 + + + +
diff --git a/examples/docs/resources/mobile-first/md/card/card-type.md b/examples/docs/resources/mobile-first/md/card/card-type.md new file mode 100644 index 000000000..881efc4d8 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/card/card-type.md @@ -0,0 +1,19 @@ +
+

+ +

+ +## Card 卡片 + + + +基础容器,可承载文字、列表、图片、段落等 + +
+ +### 卡片类型 + +支持 `text image video logo` 4 种类型 + + +
diff --git a/examples/docs/resources/mobile-first/md/card/check-type.md b/examples/docs/resources/mobile-first/md/card/check-type.md new file mode 100644 index 000000000..1f61ead72 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/card/check-type.md @@ -0,0 +1,27 @@ +
+

+ +

+ +## Card 卡片 + + + +基础容器,可承载文字、列表、图片、段落等 + +
+ +### 单选 + +通过属性`check-type='radio'`设置卡片单选,需同时设置 label。 +注意:目前仅支持在 text 类型开启单选 + + +
+ +### 多选 + +通过属性`check-type='checkbox'`设置卡片多选,需同时设置 label。 +注意:目前仅支持在 text 类型开启多选 + + diff --git a/examples/docs/resources/mobile-first/md/card/custom-class.md b/examples/docs/resources/mobile-first/md/card/custom-class.md new file mode 100644 index 000000000..4a11c86ae --- /dev/null +++ b/examples/docs/resources/mobile-first/md/card/custom-class.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## Card 卡片 + + + +基础容器,可承载文字、列表、图片、段落等 + +
+ +### 自定义 class + +属性`card-class`可自定义卡片的 class,属性`height`可设置卡片内容区的高度。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/card/operate-bar.md b/examples/docs/resources/mobile-first/md/card/operate-bar.md new file mode 100644 index 000000000..ca0d38225 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/card/operate-bar.md @@ -0,0 +1,19 @@ +
+

+ +

+ +## Card 卡片 + + + +基础容器,可承载文字、列表、图片、段落等 + +
+ +### 操作栏选项配置 + +通过`options`属性配置操作栏,支持按钮的禁用(`disabled: true`)与隐藏(`hidden: true`) + + +
diff --git a/examples/docs/resources/mobile-first/md/card/slot.md b/examples/docs/resources/mobile-first/md/card/slot.md new file mode 100644 index 000000000..9441d1b02 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/card/slot.md @@ -0,0 +1,19 @@ +
+

+ +

+ +## Card 卡片 + + + +基础容器,可承载文字、列表、图片、段落等 + +
+ +### 插槽 + +组件提供`default、title-left、title-right、footer`4 个插槽 + + +
diff --git a/examples/docs/resources/mobile-first/md/carousel/aspect-ratio.md b/examples/docs/resources/mobile-first/md/carousel/aspect-ratio.md new file mode 100644 index 000000000..018255812 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/carousel/aspect-ratio.md @@ -0,0 +1,21 @@ +
+

+ +

+ +## Carousel 走马灯 + + + +常用于一组图片或卡片轮播,当内容空间不足时,可以用走马灯的形式进行收纳,进行轮播展现。 + +
+ +### 宽高比 + +`aspect-ratio` 属性可以设置轮播图的宽高比,如果设置了 height,会以 height 为主,默认值为 16:2,可以设置任意的整数宽高比例。 +设置了`aspect-ratio`之后页面缩放时会按照设定的比例自动调整轮播器的高度。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/carousel/autoplay.md b/examples/docs/resources/mobile-first/md/carousel/autoplay.md new file mode 100644 index 000000000..6de0936f7 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/carousel/autoplay.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## Carousel 走马灯 + + + +常用于一组图片或卡片轮播,当内容空间不足时,可以用走马灯的形式进行收纳,进行轮播展现。 + +
+ +### 自动切换 + +配置 `autoplay` 属性为 true 后,走马灯的幻灯片内容将自动轮播切换。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/carousel/basic-usage.md b/examples/docs/resources/mobile-first/md/carousel/basic-usage.md new file mode 100644 index 000000000..5e6ea30de --- /dev/null +++ b/examples/docs/resources/mobile-first/md/carousel/basic-usage.md @@ -0,0 +1,30 @@ +
+

+ +

+ +## Carousel 走马灯 + + + +常用于一组图片或卡片轮播,当内容空间不足时,可以用走马灯的形式进行收纳,进行轮播展现。 + +
+ +### 基本用法 + + + +
+ +### Carousel 属性 + + + +
+ +### Carousel-Item 属性 + + + +
diff --git a/examples/docs/resources/mobile-first/md/carousel/carousel-arrow.md b/examples/docs/resources/mobile-first/md/carousel/carousel-arrow.md new file mode 100644 index 000000000..d945ae87d --- /dev/null +++ b/examples/docs/resources/mobile-first/md/carousel/carousel-arrow.md @@ -0,0 +1,26 @@ +
+

+ +

+ +## Carousel 走马灯 + + + +常用于一组图片或卡片轮播,当内容空间不足时,可以用走马灯的形式进行收纳,进行轮播展现。 + +
+ +### 总是显示切换箭头 + + + +### hover 时显示切换箭头 + + + +### 隐藏切换箭头 + + + +
diff --git a/examples/docs/resources/mobile-first/md/carousel/carousel-mf.md b/examples/docs/resources/mobile-first/md/carousel/carousel-mf.md new file mode 100644 index 000000000..21b251ec3 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/carousel/carousel-mf.md @@ -0,0 +1,130 @@ +
+

+ +

+ +## Carousel 走马灯 + + + +常用于一组图片或卡片轮播,当内容空间不足时,可以用走马灯的形式进行收纳,进行轮播展现。 + +
+ +### 基本用法 + + + +
+ +### Carousel 属性 + + + +
+ +### Carousel-Item 属性 + + + +
+ +### 自动切换 + +配置 `autoplay` 属性为 true 后,走马灯的幻灯片内容将自动轮播切换。 + + + +
+ +### 总是显示切换箭头 + + + +### hover 时显示切换箭头 + + + +### 隐藏切换箭头 + + + +
+ +### 宽高比 + +`aspect-ratio` 属性可以设置轮播图的宽高比,如果设置了 height,会以 height 为主,默认值为 16:2,可以设置任意的整数宽高比例。 +设置了`aspect-ratio`之后页面缩放时会按照设定的比例自动调整轮播器的高度。 + + + +
+ +### 关闭循环轮播 + +配置 `loop` 属性为 false 后,若走马灯幻灯片已切换到最后一项,则将不能再从第一项开始循环切换。即切换到最后一项时,右侧切换箭头不再显示,切换到第一项时,左侧切换箭头不再显示。 + + + +
+ +### 设置高度 + + + +
+ +### 指示器样式 + +`indicator-style` 属性可以设置轮播图指示器样式,支持 light 与 dark 两种类型,默认为 light。 + + + +
+ +### 指示器和触发方式 + +走马灯指示器默认显示在幻灯片内容上,配置 `indicator-position` 为 outside 后,将显示在外部。
+ +配置 `trigger` 为 click ,可以修改指示器触发方式为单击,默认鼠标悬停到指示器时,走马灯幻灯片就会对应切换。 + + + +
+ +### 播放开始位置 + + + +
+ +### 手动轮播 + +调用 `setActiveItem()`、`next()`、`prev()` 方法可根据需要进行轮播。`initial-index` 属性可以指定初始激活的幻灯片索引。 + + + +
+ +### 轮播间隔时间 + +走马灯幻灯片轮播间隔时间默认为 3000 毫秒,通过 `interval` 属性可以自定义。 + + + +
+ +### 显示标题 + +通过 `title` 配置显示标题,需要与 `show-title` 结合使用。 + + +
+ +### 纵向轮播 + +配置 `type` 属性为 vertical 即可实现纵向轮播。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/carousel/close-loop.md b/examples/docs/resources/mobile-first/md/carousel/close-loop.md new file mode 100644 index 000000000..c193dc691 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/carousel/close-loop.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## Carousel 走马灯 + + + +常用于一组图片或卡片轮播,当内容空间不足时,可以用走马灯的形式进行收纳,进行轮播展现。 + +
+ +### 关闭循环轮播 + +配置 `loop` 属性为 false 后,若走马灯幻灯片已切换到最后一项,则将不能再从第一项开始循环切换。即切换到最后一项时,右侧切换箭头不再显示,切换到第一项时,左侧切换箭头不再显示。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/carousel/custom-height.md b/examples/docs/resources/mobile-first/md/carousel/custom-height.md new file mode 100644 index 000000000..545e246be --- /dev/null +++ b/examples/docs/resources/mobile-first/md/carousel/custom-height.md @@ -0,0 +1,18 @@ +
+

+ +

+ +## Carousel 走马灯 + + + +常用于一组图片或卡片轮播,当内容空间不足时,可以用走马灯的形式进行收纳,进行轮播展现。 + +
+ +### 设置高度 + + + +
diff --git a/examples/docs/resources/mobile-first/md/carousel/indicator-style.md b/examples/docs/resources/mobile-first/md/carousel/indicator-style.md new file mode 100644 index 000000000..8330eb49e --- /dev/null +++ b/examples/docs/resources/mobile-first/md/carousel/indicator-style.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## Carousel 走马灯 + + + +常用于一组图片或卡片轮播,当内容空间不足时,可以用走马灯的形式进行收纳,进行轮播展现。 + +
+ +### 指示器样式 + +`indicator-style` 属性可以设置轮播图指示器样式,支持 light 与 dark 两种类型,默认为 light。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/carousel/indicator-trigger.md b/examples/docs/resources/mobile-first/md/carousel/indicator-trigger.md new file mode 100644 index 000000000..861b00ff9 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/carousel/indicator-trigger.md @@ -0,0 +1,22 @@ +
+

+ +

+ +## Carousel 走马灯 + + + +常用于一组图片或卡片轮播,当内容空间不足时,可以用走马灯的形式进行收纳,进行轮播展现。 + +
+ +### 指示器和触发方式 + +走马灯指示器默认显示在幻灯片内容上,配置 `indicator-position` 为 outside 后,将显示在外部。
+ +配置 `trigger` 为 click ,可以修改指示器触发方式为单击,默认鼠标悬停到指示器时,走马灯幻灯片就会对应切换。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/carousel/initial-index.md b/examples/docs/resources/mobile-first/md/carousel/initial-index.md new file mode 100644 index 000000000..7f4bd6fa1 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/carousel/initial-index.md @@ -0,0 +1,18 @@ +
+

+ +

+ +## Carousel 走马灯 + + + +常用于一组图片或卡片轮播,当内容空间不足时,可以用走马灯的形式进行收纳,进行轮播展现。 + +
+ +### 播放开始位置 + + + +
diff --git a/examples/docs/resources/mobile-first/md/carousel/manual-play.md b/examples/docs/resources/mobile-first/md/carousel/manual-play.md new file mode 100644 index 000000000..c7c4bfdc6 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/carousel/manual-play.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## Carousel 走马灯 + + + +常用于一组图片或卡片轮播,当内容空间不足时,可以用走马灯的形式进行收纳,进行轮播展现。 + +
+ +### 手动轮播 + +调用 `setActiveItem()`、`next()`、`prev()` 方法可根据需要进行轮播。`initial-index` 属性可以指定初始激活的幻灯片索引。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/carousel/play-interval.md b/examples/docs/resources/mobile-first/md/carousel/play-interval.md new file mode 100644 index 000000000..b8e4f5a31 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/carousel/play-interval.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## Carousel 走马灯 + + + +常用于一组图片或卡片轮播,当内容空间不足时,可以用走马灯的形式进行收纳,进行轮播展现。 + +
+ +### 轮播间隔时间 + +走马灯幻灯片轮播间隔时间默认为 3000 毫秒,通过 `interval` 属性可以自定义。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/carousel/show-title.md b/examples/docs/resources/mobile-first/md/carousel/show-title.md new file mode 100644 index 000000000..ba52ddee5 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/carousel/show-title.md @@ -0,0 +1,19 @@ +
+

+ +

+ +## Carousel 走马灯 + + + +常用于一组图片或卡片轮播,当内容空间不足时,可以用走马灯的形式进行收纳,进行轮播展现。 + +
+ +### 显示标题 + +通过 `title` 配置显示标题,需要与 `show-title` 结合使用。 + + +
diff --git a/examples/docs/resources/mobile-first/md/carousel/up-down-carousel.md b/examples/docs/resources/mobile-first/md/carousel/up-down-carousel.md new file mode 100644 index 000000000..a04c57553 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/carousel/up-down-carousel.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## Carousel 走马灯 + + + +常用于一组图片或卡片轮播,当内容空间不足时,可以用走马灯的形式进行收纳,进行轮播展现。 + +
+ +### 纵向轮播 + +配置 `type` 属性为 vertical 即可实现纵向轮播。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/cascader-select/basic-usage.md b/examples/docs/resources/mobile-first/md/cascader-select/basic-usage.md new file mode 100644 index 000000000..cad8e1d35 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/cascader-select/basic-usage.md @@ -0,0 +1,51 @@ +
+

+ +

+ +## CascaderSelect 级联选择 + +
+ +### 基本用法 + +使用 `v-model` 绑定组件 `当前值`,使用 `options` 绑定组件 `选项列表`,这两个数组长度必须相同。 + + + +### 循环滚动 + +设置属性 `cycle-roll` 为 `true` 打开选项循环滚动功能。默认值为 `false`。 + + + +### 数组选项禁用 + +如果组件 `选项列表` 是数组值,可以使用属性 `disabled` 配置一个方法判断选项是否禁用。 +此方法的第一个参数是可见选项的当前值,其它参数是组件当前聚焦值,返回 `true` 则禁用选项。 + + + +### 对象选项禁用 + +如果组件 `选项列表` 是对象值,使用 `optionMethod` 生成选项时即可指定是否禁用。 +`optionMethod` 方法的第一个参数是可见选项的当前值,其它参数是组件当前聚焦值,设置返回值的 `disabled` 为 `true` 则禁用选项。 + + + +### 对象选项 + +组件的 `选项列表` 可以是对象值。此方式更方便生成动态选项值,但是选项值必须为数字值。 +此对象需配置选项范围 `range`,和生成方法 `optionMethod`。选项范围也可以指定为生成方法 `rangeMethod`。 +`rangeMethod` 的参数是组件当前聚焦值。 +`optionMethod` 的第一个参数是可见选项的当前值,其它参数是组件当前聚焦值。 + + + +### 文字颜色 + + + +### 城市级联 + + diff --git a/examples/docs/resources/mobile-first/md/checkbox/basic-usage.md b/examples/docs/resources/mobile-first/md/checkbox/basic-usage.md new file mode 100644 index 000000000..4d884847b --- /dev/null +++ b/examples/docs/resources/mobile-first/md/checkbox/basic-usage.md @@ -0,0 +1,33 @@ +
+

+ +

+ +## Checkbox 复选框 + + + +用于配置不同场景的选项,提供用户可在一组选项中进行多选。 +
+ +### 基本用法 + + + +
+ +### Checkbox 属性 + + + +
+ +### Checkbox-Button 属性 + + + +
+ +### Checkbox-Group 属性 + + diff --git a/examples/docs/resources/mobile-first/md/checkbox/checkbox-button.md b/examples/docs/resources/mobile-first/md/checkbox/checkbox-button.md new file mode 100644 index 000000000..cb44fab4e --- /dev/null +++ b/examples/docs/resources/mobile-first/md/checkbox/checkbox-button.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## Checkbox 复选框 + + + +用于配置不同场景的选项,提供用户可在一组选项中进行多选。 +
+ +### 按钮形式复选框 + +在 `checkbox-group` 元素中嵌入 `checkbox-button` 即可实现按钮形式的复选框组。 +通过 `fill` 按钮形式的 Checkbox 激活时的填充色和边框色,默认值为:#409EFF。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/checkbox/checkbox-events.md b/examples/docs/resources/mobile-first/md/checkbox/checkbox-events.md new file mode 100644 index 000000000..2efe721d9 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/checkbox/checkbox-events.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## Checkbox 复选框 + + + +用于配置不同场景的选项,提供用户可在一组选项中进行多选。 + +
+ +### 事件 + +勾选值改变后将触发 `change` 事件。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/checkbox/checkbox-group.md b/examples/docs/resources/mobile-first/md/checkbox/checkbox-group.md new file mode 100644 index 000000000..2528aecfa --- /dev/null +++ b/examples/docs/resources/mobile-first/md/checkbox/checkbox-group.md @@ -0,0 +1,34 @@ +
+

+ +

+ +## Checkbox 复选框 + + + +用于配置不同场景的选项,提供用户可在一组选项中进行多选。 + +
+ +### 复选框组 + +通过 `checkbox-group` 元素把多个 `checkbox` 元素管理为一组,在 `checkbox-group` 中使用 `v-model` 绑定 Array 类型的变量即可实现双向绑定。 `checkbox` 的 `label` 属性是其对应的值,若该标签中无内容,则该属性也充当 checkbox 后的介绍。`label` 与数组中的元素值相对应,如果存在指定的值则为选中状态,否则为不选中。 + + + +### 配置式复选框组 + +提供 `options` 属性,支持通过配置对象数组数据的形式来渲染多选框组。使用该属性后,可以不用再在标签中以插槽的形式插入 `checkbox` 或 `checkbox-button` 元素。 + +
+ +`options` 对象数组中包括三个字段:`label`、`text`、`events`。 + +
+ +另外还提供 `type` 属性,配合 `options` 属性一起使用,默认值为 `checkbox`。还可以配置为 `button`,配置后复选框组将以按钮的形式展示。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/checkbox/checkbox-mf.md b/examples/docs/resources/mobile-first/md/checkbox/checkbox-mf.md new file mode 100644 index 000000000..ccd842602 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/checkbox/checkbox-mf.md @@ -0,0 +1,90 @@ +
+

+ +

+ +## Checkbox 复选框 + + + +用于配置不同场景的选项,提供用户可在一组选项中进行多选。 + +
+ +### 基本用法 + + + +
+ +### 复选框组 + +通过 `checkbox-group` 元素把多个 `checkbox` 元素管理为一组,在 `checkbox-group` 中使用 `v-model` 绑定 Array 类型的变量即可实现双向绑定。 `checkbox` 的 `label` 属性是其对应的值,若该标签中无内容,则该属性也充当 checkbox 后的介绍。`label` 与数组中的元素值相对应,如果存在指定的值则为选中状态,否则为不选中。 + + + +### 配置式复选框组 + +提供 `options` 属性,支持通过配置对象数组数据的形式来渲染多选框组。使用该属性后,可以不用再在标签中以插槽的形式插入 `checkbox` 或 `checkbox-button` 元素。 + +
+ +`options` 对象数组中包括三个字段:`label`、`text`、`events`。 + +
+ +另外还提供 `type` 属性,配合 `options` 属性一起使用,默认值为 `checkbox`。还可以配置为 `button`,配置后复选框组将以按钮的形式展示。 + + + +### 全选与半选 + +在 `checkbox` 元素中配置 `indeterminate` 属性为 true 后,勾选框将展示为半选的样式。 + + + +
+ +### 可选数量限制 + +在 `checkbox-group` 上可通过 `min`、`max` 属性指定可勾选项目的最小、最大值。 + + + +
+ +### 当前是否勾选 + +在 `checked` 当前是否勾选,通过 `disabled` 设置组件是否禁用。 + + + +
+ +### 垂直布局 + +在 `checkbox-group` 元素上设置 `vertical` 为 true,则其管理的 `checkbox-button` 或 `checkbox` 将展示为垂直布局。 + + + +
+ +### 内容超出时的提示信息 + +若复选框后的介绍文字超出时,可以通过 Tooltip 组件增加提示信息,鼠标悬停时可提示所有内容。 + +
+ +在 `checkbox` 元素上配置 `border` 属性为 true,可显示边框。 + + + +
+ +### 插槽 + +Checkbox 的内容 + + + +
\ No newline at end of file diff --git a/examples/docs/resources/mobile-first/md/checkbox/checkbox-slot.md b/examples/docs/resources/mobile-first/md/checkbox/checkbox-slot.md new file mode 100644 index 000000000..fe819b2a5 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/checkbox/checkbox-slot.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## Checkbox 复选框 + + + +用于配置不同场景的选项,提供用户可在一组选项中进行多选。 + +
+ +### 插槽 + +Checkbox 的内容 + + + +
diff --git a/examples/docs/resources/mobile-first/md/checkbox/checkbox-text.md b/examples/docs/resources/mobile-first/md/checkbox/checkbox-text.md new file mode 100644 index 000000000..15a4b6ecd --- /dev/null +++ b/examples/docs/resources/mobile-first/md/checkbox/checkbox-text.md @@ -0,0 +1,27 @@ +
+

+ +

+ +## Checkbox 复选框 + + + +用于配置不同场景的选项,提供用户可在一组选项中进行多选。 + +
+ +### 文本 + +在 `text` 属性设置文本内容 +通过 `true-label` 设置选中的值, `false-label` 设置未选中的值。 + + + +
+ +### 文本选择 + +通过 `true-label` 设置选中的值, `false-label` 设置未选中的值。 + + diff --git a/examples/docs/resources/mobile-first/md/checkbox/content-overflow.md b/examples/docs/resources/mobile-first/md/checkbox/content-overflow.md new file mode 100644 index 000000000..8b7799d97 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/checkbox/content-overflow.md @@ -0,0 +1,23 @@ +
+

+ +

+ +## Checkbox 复选框 + + + +用于配置不同场景的选项,提供用户可在一组选项中进行多选。 +
+ +### 内容超出时的提示信息 + +若复选框后的介绍文字超出时,可以通过 Tooltip 组件增加提示信息,鼠标悬停时可提示所有内容。 + +
+ +在 `checkbox` 元素上配置 `border` 属性为 true,可显示边框。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/checkbox/dynamic-create-checkbox.md b/examples/docs/resources/mobile-first/md/checkbox/dynamic-create-checkbox.md new file mode 100644 index 000000000..1bd2c3a10 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/checkbox/dynamic-create-checkbox.md @@ -0,0 +1,19 @@ +
+

+ +

+ +## Checkbox 复选框 + + + +用于配置不同场景的选项,提供用户可在一组选项中进行多选。 +
+ +### 动态生成复选框组 + +复选框组所需数据可通过请求服务从后台取得,然后动态生成。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/checkbox/indeterminate.md b/examples/docs/resources/mobile-first/md/checkbox/indeterminate.md new file mode 100644 index 000000000..ddb8c660f --- /dev/null +++ b/examples/docs/resources/mobile-first/md/checkbox/indeterminate.md @@ -0,0 +1,19 @@ +
+

+ +

+ +## Checkbox 复选框 + + + +用于配置不同场景的选项,提供用户可在一组选项中进行多选。 +
+ +### 全选与半选 + +在 `checkbox` 元素中配置 `indeterminate` 属性为 true 后,勾选框将展示为半选的样式。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/checkbox/min-max.md b/examples/docs/resources/mobile-first/md/checkbox/min-max.md new file mode 100644 index 000000000..d86ac3661 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/checkbox/min-max.md @@ -0,0 +1,28 @@ +
+

+ +

+ +## Checkbox 复选框 + + + +用于配置不同场景的选项,提供用户可在一组选项中进行多选。 + +
+ +### 可选数量限制 + +在 `checkbox-group` 上可通过 `min`、`max` 属性指定可勾选项目的最小、最大值。 + + + +
+ +### 当前是否勾选 + +在 `checked` 当前是否勾选,通过 `disabled` 设置组件是否禁用。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/checkbox/text.md b/examples/docs/resources/mobile-first/md/checkbox/text.md new file mode 100644 index 000000000..bcf41c08a --- /dev/null +++ b/examples/docs/resources/mobile-first/md/checkbox/text.md @@ -0,0 +1,28 @@ +
+

+ +

+ +## Checkbox 复选框 + + + +用于配置不同场景的选项,提供用户可在一组选项中进行多选。 + +
+ +### 文本 + +在 `text` 属性设置文本内容 +通过 `true-label` 设置选中的值, `false-label` 设置未选中的值。 + + + +
+ +### 文本选择 + +通过 `true-label` 设置选中的值, `false-label` 设置未选中的值。 + + + diff --git a/examples/docs/resources/mobile-first/md/checkbox/vertical-checkbox.md b/examples/docs/resources/mobile-first/md/checkbox/vertical-checkbox.md new file mode 100644 index 000000000..3e3b85540 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/checkbox/vertical-checkbox.md @@ -0,0 +1,19 @@ +
+

+ +

+ +## Checkbox 复选框 + + + +用于配置不同场景的选项,提供用户可在一组选项中进行多选。 +
+ +### 垂直布局 + +在 `checkbox-group` 元素上设置 `vertical` 为 true,则其管理的 `checkbox-button` 或 `checkbox` 将展示为垂直布局。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/checkbox/with-border.md b/examples/docs/resources/mobile-first/md/checkbox/with-border.md new file mode 100644 index 000000000..54525bce3 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/checkbox/with-border.md @@ -0,0 +1,23 @@ +
+

+ +

+ +## Checkbox 复选框 + + + +用于配置不同场景的选项,提供用户可在一组选项中进行多选。 +
+ +### 尺寸 + +当复选框为按钮形式时,通过 `size` 属性可以设置按钮复选框的尺寸,可选项有 medium、small、mini。 + +
+ +在 `checkbox-button` 上设置 `disabled` 属性,将禁用某一个复选按钮,若在 `checkbox-group` 标签上配置 `disabled` 属性,则禁用所有复选按钮。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/collapse/accordion.md b/examples/docs/resources/mobile-first/md/collapse/accordion.md new file mode 100644 index 000000000..022ceb679 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/collapse/accordion.md @@ -0,0 +1,23 @@ +
+

+ +

+ +## Collapse 折叠面板 + + + +内容区可指定动态页面或自定义 html 等,支持展开收起操作。 + +
+ +### 手风琴效果 + +配置 `accordion` 属性为 true 后,折叠面板将展示手风琴效果。 +配置 `v-model` 设置当前激活的面板(如果是手风琴模式,绑定值类型需要为 string ,否则为 array ) +`change` 事件,在当前激活面板改变时触发,参数为当前的 value 值 +配置 `name` 属性作为每个 collapse-item 的唯一标志符 + + + +
diff --git a/examples/docs/resources/mobile-first/md/collapse/basic-usage.md b/examples/docs/resources/mobile-first/md/collapse/basic-usage.md new file mode 100644 index 000000000..2a140bf57 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/collapse/basic-usage.md @@ -0,0 +1,27 @@ +
+

+ +

+ +## Collapse 折叠面板 + + + +内容区可指定动态页面或自定义 html 等,支持展开收起操作。 +
+ +### 基本用法 + + + +
+ +### Collapse 属性 + + + +
+ +### Collapse-Item 属性 + + diff --git a/examples/docs/resources/mobile-first/md/collapse/block-close.md b/examples/docs/resources/mobile-first/md/collapse/block-close.md new file mode 100644 index 000000000..e260ba813 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/collapse/block-close.md @@ -0,0 +1,19 @@ +
+

+ +

+ +## Collapse 折叠面板 + + + +内容区可指定动态页面或自定义 html 等,支持展开收起操作。 +
+ +### 阻止折叠面板关闭事件 + +:before-close 折叠面板关闭前事件,方法里面 return true/false,表示是否可以关闭 + + + +
diff --git a/examples/docs/resources/mobile-first/md/collapse/collapse-events.md b/examples/docs/resources/mobile-first/md/collapse/collapse-events.md new file mode 100644 index 000000000..95ea19ab9 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/collapse/collapse-events.md @@ -0,0 +1,19 @@ +
+

+ +

+ +## Collapse 折叠面板 + + + +内容区可指定动态页面或自定义 html 等,支持展开收起操作。 +
+ +### 折叠面板事件 + +激活面板的值改变时将触发 `change` 事件。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/collapse/collapse-mf.md b/examples/docs/resources/mobile-first/md/collapse/collapse-mf.md new file mode 100644 index 000000000..ad6deca9d --- /dev/null +++ b/examples/docs/resources/mobile-first/md/collapse/collapse-mf.md @@ -0,0 +1,87 @@ +
+

+ +

+ +## Collapse 折叠面板 + + + +内容区可指定动态页面或自定义 html 等,支持展开收起操作。 + +
+ +### 手风琴效果 + +配置 `accordion` 属性为 true 后,折叠面板将展示手风琴效果。 +配置 `v-model` 设置当前激活的面板(如果是手风琴模式,绑定值类型需要为 string ,否则为 array ) +`change` 事件,在当前激活面板改变时触发,参数为当前的 value 值 +配置 `name` 属性作为每个 collapse-item 的唯一标志符 + + + +
+ +### 禁用状态 + +在 `collapse-item` 元素上配置 `disabled` 属性为 true 后,将禁用指定的折叠面板项。 + + + +
+ +### 自定义面板标题 + +在 `collapse-item` 元素上配置 `title` 属性可以指定每个折叠面板项的标题。但同时也可以通过 `title` 插槽的方式自定义面板标题,比如在标题前增加图标。 + + + +
+ +### 折叠面板事件 + +激活面板的值改变时将触发 `change` 事件。 + + + +
+ +### 阻止折叠面板关闭事件 + +:before-close 折叠面板关闭前事件,方法里面 return true/false,表示是否可以关闭 + + + +
+ +### 嵌套表格 + +通过 `collapse-item` 元素的默认插槽嵌入表格。 + + + +
+ +### 嵌套表单 + +通过 `collapse-item` 元素的默认插槽嵌入表单。 + + + +
+ +### 自定义 Title 展示 + +通过配置 Collapse 内置的 title 插槽实现自定义标题展示 + + + +
+ +### 自定义 Title 右侧内容展示 + +通过配置 Collapse 内置的 title-right 插槽实现自定义标题右侧内容展示 + + + +
\ No newline at end of file diff --git a/examples/docs/resources/mobile-first/md/collapse/collapse-slot.md b/examples/docs/resources/mobile-first/md/collapse/collapse-slot.md new file mode 100644 index 000000000..5bdebf1b7 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/collapse/collapse-slot.md @@ -0,0 +1,36 @@ +
+

+ +

+ +## Collapse 折叠面板 + + + +内容区可指定动态页面或自定义 html 等,支持展开收起操作。 + +
+ +### 自定义 Title 展示 + +通过配置 Collapse 内置的 title 插槽实现自定义标题展示 + + + +
+ +### 自定义 Title 右侧内容展示 + +通过配置 Collapse 内置的 title-right 插槽实现自定义标题右侧内容展示 + + + +
+ +### 自定义 icon 图标 + +通过配置 Collapse 内置的 icon 插槽实现图标 + + + +
diff --git a/examples/docs/resources/mobile-first/md/collapse/custom-collapse-title.md b/examples/docs/resources/mobile-first/md/collapse/custom-collapse-title.md new file mode 100644 index 000000000..1cd3edcc2 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/collapse/custom-collapse-title.md @@ -0,0 +1,28 @@ +
+

+ +

+ +## Collapse 折叠面板 + + + +内容区可指定动态页面或自定义 html 等,支持展开收起操作。 + +
+ +### 自定义面板标题 + +在 `collapse-item` 元素上配置 `title` 属性可以指定每个折叠面板项的标题。但同时也可以通过 `title` 插槽的方式自定义面板标题,比如在标题前增加图标。 + + + +
+ +### 自定义面板标题右侧内容 + +在 `collapse-item` 元素上配置 `title-right` 属性可以指定每个折叠面板项标题的右侧内容。但同时也可以通过 `title-right` 插槽的方式自定义面板标题右侧内容,比如在标题右侧增加图标。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/collapse/dynamic-disable.md b/examples/docs/resources/mobile-first/md/collapse/dynamic-disable.md new file mode 100644 index 000000000..e8702cf49 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/collapse/dynamic-disable.md @@ -0,0 +1,19 @@ +
+

+ +

+ +## Collapse 折叠面板 + + + +内容区可指定动态页面或自定义 html 等,支持展开收起操作。 +
+ +### 禁用状态 + +在 `collapse-item` 元素上配置 `disabled` 属性为 true 后,将禁用指定的折叠面板项。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/collapse/nested-form.md b/examples/docs/resources/mobile-first/md/collapse/nested-form.md new file mode 100644 index 000000000..f758d295a --- /dev/null +++ b/examples/docs/resources/mobile-first/md/collapse/nested-form.md @@ -0,0 +1,19 @@ +
+

+ +

+ +## Collapse 折叠面板 + + + +内容区可指定动态页面或自定义 html 等,支持展开收起操作。 +
+ +### 嵌套表单 + +通过 `collapse-item` 元素的默认插槽嵌入表单。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/collapse/nested-grid.md b/examples/docs/resources/mobile-first/md/collapse/nested-grid.md new file mode 100644 index 000000000..ff99ca92d --- /dev/null +++ b/examples/docs/resources/mobile-first/md/collapse/nested-grid.md @@ -0,0 +1,19 @@ +
+

+ +

+ +## Collapse 折叠面板 + + + +内容区可指定动态页面或自定义 html 等,支持展开收起操作。 +
+ +### 嵌套表格 + +通过 `collapse-item` 元素的默认插槽嵌入表格。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/collapse/slot.md b/examples/docs/resources/mobile-first/md/collapse/slot.md new file mode 100644 index 000000000..c35ed5806 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/collapse/slot.md @@ -0,0 +1,28 @@ +
+

+ +

+ +## Collapse 折叠面板 + + + +内容区可指定动态页面或自定义 html 等,支持展开收起操作。 + +
+ +### 自定义 Title 展示 + +通过配置 Collapse 内置的 title 插槽实现自定义标题展示 + + + +
+ +### 自定义 Title 右侧内容展示 + +通过配置 Collapse 内置的 title-right 插槽实现自定义标题右侧内容展示 + + + +
diff --git a/examples/docs/resources/mobile-first/md/column-list-item/basic-usage.md b/examples/docs/resources/mobile-first/md/column-list-item/basic-usage.md new file mode 100644 index 000000000..c6bcb1bf0 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/column-list-item/basic-usage.md @@ -0,0 +1,18 @@ +
+

+ +

+ +## ColumnListItem 分区列表项 + + + +分区列表项 Column List Item + +
+ +### 基本用法 + + + +
diff --git a/examples/docs/resources/mobile-first/md/column-list-item/column-list-item-mf.md b/examples/docs/resources/mobile-first/md/column-list-item/column-list-item-mf.md new file mode 100644 index 000000000..6ee5621a2 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/column-list-item/column-list-item-mf.md @@ -0,0 +1,85 @@ +
+

+ +

+ +## ColumnListItem 分区列表项 + + + +分区列表项 Column List Item + +
+ +### 基本用法 + + + +
+ +### 内容区插槽 + +通过 `#column1、#column2、#column3、#column4` 可以设置内容区插槽,最多支持 4 个内容插槽。 + + + +
+ +### 操作列按钮点击事件 + +通过 `icon-click` 给按钮加点击事件。 + + + +
+ +### 操作列按钮隐藏与禁用 + +操作列配置项 options 中添加属性 hidden 可以隐藏按钮,可以通过 disabled 属性禁用操作按钮。 + + + +
+ +### 图片和操作列插槽 + +通过 `#image` 可以设置图片插槽,通过 `#operate` 可以设置操作列插槽。 + + + +
+ +### 单选 + +通过属性`show-radio`设置卡片单选,需同时设置 label,`disabled` 属性可以禁用单选按钮 。 + + + +
+ +### 多选 + +通过属性`show-checkbox`设置卡片多选,需同时设置 label,`disabled` 属性可以禁用复选按钮 。 + + + +
+ +### 设置尺寸 + +通过 `size` 属性可以设置分区列表项的大小,支持 small 和 medium 两种尺寸。 + + + +
+ +### 自定义内容插槽宽度 + +通过 `flex-basis` 属性可以设置内容插槽的宽度,flex-basis 类型为数组,最多能传入 4 个值,支持百分比,固定宽度及固有的尺寸关键词,默认为 auto,详情见 flex 的 flex-basis 属性。
+通过设置`flex-grow`属性可以设置每一项在 flex 容器中分配剩余空间的相对比例,默认为 1。如果不想自动撑满主容器,可以设为 0,详情见 flex 的 flex-grow 属性。
+flex-grow 举例:`:flex-grow="[0, 0]" :flex-grow="[2, 1]" :flex-grow="[2, 1,1,1]"`
+flex-basis 举例:`:flex-basis="['200px', '100px','300px']" :flex-basis="['75%', '25%']" :flex-basis="['40%', '20%', '20%', '20%']"` + + + +
diff --git a/examples/docs/resources/mobile-first/md/column-list-item/content-slot.md b/examples/docs/resources/mobile-first/md/column-list-item/content-slot.md new file mode 100644 index 000000000..623a5a98c --- /dev/null +++ b/examples/docs/resources/mobile-first/md/column-list-item/content-slot.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## ColumnListItem 分区列表项 + + + +分区列表项 Column List Item + +
+ +### 内容区插槽 + +通过 `#column1、#column2、#column3、#column4` 可以设置内容区插槽,最多支持 4 个内容插槽。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/column-list-item/custom-width.md b/examples/docs/resources/mobile-first/md/column-list-item/custom-width.md new file mode 100644 index 000000000..a6d2d5ca8 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/column-list-item/custom-width.md @@ -0,0 +1,23 @@ +
+

+ +

+ +## ColumnListItem 分区列表项 + + + +分区列表项 Column List Item + +
+ +### 自定义内容插槽宽度 + +通过 `flex-basis` 属性可以设置内容插槽的宽度,flex-basis 类型为数组,最多能传入 4 个值,支持百分比,固定宽度及固有的尺寸关键词,默认为 auto,详情见 flex 的 flex-basis 属性。
+通过设置`flex-grow`属性可以设置每一项在 flex 容器中分配剩余空间的相对比例,默认为 1。如果不想自动撑满主容器,可以设为 0,详情见 flex 的 flex-grow 属性。
+flex-grow 举例:`:flex-grow="[0, 0]" :flex-grow="[2, 1]" :flex-grow="[2, 1,1,1]"`
+flex-basis 举例:`:flex-basis="['200px', '100px','300px']" :flex-basis="['75%', '25%']" :flex-basis="['40%', '20%', '20%', '20%']"` + + + +
diff --git a/examples/docs/resources/mobile-first/md/column-list-item/icon-click-event.md b/examples/docs/resources/mobile-first/md/column-list-item/icon-click-event.md new file mode 100644 index 000000000..c2f7f1385 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/column-list-item/icon-click-event.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## ColumnListItem 分区列表项 + + + +分区列表项 Column List Item + +
+ +### 操作列按钮点击事件 + +通过 `icon-click` 给按钮加点击事件。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/column-list-item/icon-disabled.md b/examples/docs/resources/mobile-first/md/column-list-item/icon-disabled.md new file mode 100644 index 000000000..8aa389b64 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/column-list-item/icon-disabled.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## ColumnListItem 分区列表项 + + + +分区列表项 Column List Item + +
+ +### 操作列按钮隐藏与禁用 + +操作列配置项 options 中添加属性 hidden 可以隐藏按钮,可以通过 disabled 属性禁用操作按钮。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/column-list-item/image-operate-slot.md b/examples/docs/resources/mobile-first/md/column-list-item/image-operate-slot.md new file mode 100644 index 000000000..dbbc009e7 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/column-list-item/image-operate-slot.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## ColumnListItem 分区列表项 + + + +分区列表项 Column List Item + +
+ +### 图片和操作列插槽 + +通过 `#image` 可以设置图片插槽,通过 `#operate` 可以设置操作列插槽。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/column-list-item/list-group.md b/examples/docs/resources/mobile-first/md/column-list-item/list-group.md new file mode 100644 index 000000000..66fa5ef70 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/column-list-item/list-group.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## ColumnListItem 分区列表项 + + + +分区列表项 Column List Item + +
+ +### 列表组 + +通过引入`column-list-group`组件来对列表进行分组,使用列表组结合复选功能时,需要给 item 设置 label,以此来记录选中的列表项。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/column-list-item/show-checkbox.md b/examples/docs/resources/mobile-first/md/column-list-item/show-checkbox.md new file mode 100644 index 000000000..76cd04b6d --- /dev/null +++ b/examples/docs/resources/mobile-first/md/column-list-item/show-checkbox.md @@ -0,0 +1,25 @@ +
+

+ +

+ +## ColumnListItem 分区列表项 + + + +分区列表项 Column List Item + +
+ +### 单选 + +通过属性`show-radio`设置卡片单选,需同时设置 label,`disabled` 属性可以禁用单选按钮 。 + + +
+ +### 多选 + +通过属性`show-checkbox`设置卡片多选,需同时设置 label,`disabled` 属性可以禁用复选按钮 。 + + diff --git a/examples/docs/resources/mobile-first/md/column-list-item/size.md b/examples/docs/resources/mobile-first/md/column-list-item/size.md new file mode 100644 index 000000000..68c109475 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/column-list-item/size.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## ColumnListItem 分区列表项 + + + +分区列表项 Column List Item + +
+ +### 设置尺寸 + +通过 `size` 属性可以设置分区列表项的大小,支持 small 和 medium 两种尺寸。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/date-picker-mobile/basic-usage.md b/examples/docs/resources/mobile-first/md/date-picker-mobile/basic-usage.md new file mode 100644 index 000000000..600cac535 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/date-picker-mobile/basic-usage.md @@ -0,0 +1,36 @@ +
+

+ +

+ +## DatePickerMobile 日期选择器组件 + + + +
+ +### 基本用法 + +设置 `type` 属性默认值为 `date`,以日期的形式进行选择。 + + + +### 选择日期时间 + +设置 `type` 属性为 `datetime`,以日期时间的形式进行选择。 + + + +### 选择日期范围 + +设置 `type` 属性为 `daterange`,以日期范围的形式进行选择。 + + + +### 选择日期时间范围 + +设置 `type` 属性为 `datetimerange`,以日期时间范围的形式进行选择。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/drawer/basic-usage.md b/examples/docs/resources/mobile-first/md/drawer/basic-usage.md new file mode 100644 index 000000000..e7cbd470a --- /dev/null +++ b/examples/docs/resources/mobile-first/md/drawer/basic-usage.md @@ -0,0 +1,71 @@ +
+

+ +

+ +## Drawer 抽屉组件 + + + +
+ +### 基本用法 + + + +### 抽屉方向 + +添加 `placement` 属性设置抽屉的方向,可选值有 `left|right|top|bottom`,默认值为 `right`。 + + + +### 抽屉宽度 + +添加 `width` 属性设置抽屉的宽度,默认值为 `300px`。 + + + +添加 `dragable` 属性开启抽屉宽度拖拽功能,默认值为 `false`。 + + + +### 遮罩层 + +添加 `mask` 属性可以关闭遮罩层,默认值为 `true` 。 + + + +默认弹窗打开后,可以单击遮罩层关闭弹窗,设置 `mask-closable` 为 `false` 后将禁用该功能,默认值为 `true` 。 + + + +### 显示隐藏 + +:::tip 显示隐藏说明 + +- show-header: 显示头部,默认值为 true; +- show-footer: 显示底部,默认值为 false; + ::: + + + +### 插槽 + +:::tip 插槽说明 + +- header: 头部插槽,默认显示头部,设置 :show-header="true" 时有效; +- header-right: 头部右侧插槽,默认显示关闭功能; +- footer: 头部插槽,默认隐藏底部,设置 :show-footer="true" 时有效; + ::: + + + +### 事件 + +:::tip 事件说明 + +- hide: 关闭抽屉事件; +- confirm: 确认事件,设置 :show-footer="true" 时有效; + ::: + + diff --git a/examples/docs/resources/mobile-first/md/dropdown/arrow-button.md b/examples/docs/resources/mobile-first/md/dropdown/arrow-button.md new file mode 100644 index 000000000..c1b921cd3 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/dropdown/arrow-button.md @@ -0,0 +1,28 @@ +
+

+ +

+ +## Dropdown 下拉菜单 + + + +将动作或菜单折叠到下拉菜单中。 + +
+ +### 箭头按钮 + +通过添加`border`属性可实现箭头按钮 + + + +
+ +通过 size 属性设置按钮不同的大小尺寸,包括 medium、small、mini 三种不同大小。不设置时为默认尺寸。 + + + +
+ + diff --git a/examples/docs/resources/mobile-first/md/dropdown/basic-usage.md b/examples/docs/resources/mobile-first/md/dropdown/basic-usage.md new file mode 100644 index 000000000..f737a7810 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/dropdown/basic-usage.md @@ -0,0 +1,26 @@ +
+

+ +

+ +## Dropdown 下拉菜单 + + + +
+ +### 基本用法 + + + +
+ +### 通过添加`checked-status`属性实现选中态,其中必须添加索引值`current-index`和选中态`selected`属性 + + + +### 当文字超出规定范围展示全部信息 + + + + diff --git a/examples/docs/resources/mobile-first/md/dropdown/button-dropdown.md b/examples/docs/resources/mobile-first/md/dropdown/button-dropdown.md new file mode 100644 index 000000000..7b2a98bb1 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/dropdown/button-dropdown.md @@ -0,0 +1,34 @@ +
+

+ +

+ +## Dropdown 下拉菜单 + + + +将动作或菜单折叠到下拉菜单中。 + +
+ +### 下拉按钮菜单 + +可以通过 `split-button` 属性设置按钮下拉菜单。 + + + +
+ +可以通过 `type` 属性设置下拉菜单按钮类型,仅支持`primary`类型。 + + + +
+ +通过 size 属性设置按钮不同的大小尺寸,包括 medium、small、mini 三种不同大小。不设置时为默认尺寸。 + + + +
+ + diff --git a/examples/docs/resources/mobile-first/md/dropdown/dropdown-mf.md b/examples/docs/resources/mobile-first/md/dropdown/dropdown-mf.md new file mode 100644 index 000000000..b071e966a --- /dev/null +++ b/examples/docs/resources/mobile-first/md/dropdown/dropdown-mf.md @@ -0,0 +1,52 @@ +
+

+ +

+ +## Dropdown 下拉菜单 + + + +将动作或菜单折叠到下拉菜单中。(暂不支持多级菜单) + +
+ +### 基本用法 + +通过添加`checked-status`属性实现选中态 + + + +
+ +### 下拉按钮菜单 + +可以通过 `split-button` 属性设置按钮下拉菜单。 + + + +
+ +### 触发对象 + +可以通过 `multi-stage` 属性设置二级下拉菜单。 + + + +
+ +### 更多图标下拉菜单 + +通过添加`show-self-icon`属性或者添加`:show-icon='false'`,用户图标自定义。 + + + +
+ +### 箭头按钮 + +通过添加`border`属性可实现箭头按钮 + + + +
\ No newline at end of file diff --git a/examples/docs/resources/mobile-first/md/dropdown/events.md b/examples/docs/resources/mobile-first/md/dropdown/events.md new file mode 100644 index 000000000..99599d8cb --- /dev/null +++ b/examples/docs/resources/mobile-first/md/dropdown/events.md @@ -0,0 +1,39 @@ +
+

+ +

+ +## Dropdown 下拉菜单 + + + +将动作或菜单折叠到下拉菜单中。 + +
+ +### 内置事件 + +内置事件包含:`button-click`、`item-click`、`visible-change` 事件。 + +### visible-change 事件 + +下拉框出现/隐藏时触发 + + + +### item-click 事件 + +点击菜单项时触发的事件回调 +可以通过`itemData`,获取菜单项中设置的`item-data`属性 + + + +### button-click 事件 + +当下拉触发元素呈现为按钮组,即`split-button`属性为`true`时,点击左侧按钮的事件回调 + + + +
+ + diff --git a/examples/docs/resources/mobile-first/md/dropdown/many-dropdown.md b/examples/docs/resources/mobile-first/md/dropdown/many-dropdown.md new file mode 100644 index 000000000..041dfa15c --- /dev/null +++ b/examples/docs/resources/mobile-first/md/dropdown/many-dropdown.md @@ -0,0 +1,22 @@ +
+

+ +

+ +## Dropdown 下拉菜单 + + + +将动作或菜单折叠到下拉菜单中。 + +
+ +### 更多图标下拉菜单 + +通过添加`show-self-icon`属性自定义用户图标,无旋旋转动画; +通过添加`:show-icon='false'`属性自定义用户图标,有旋旋转动画。 + + +
+ + diff --git a/examples/docs/resources/mobile-first/md/dropdown/max-height.md b/examples/docs/resources/mobile-first/md/dropdown/max-height.md new file mode 100644 index 000000000..779ea72af --- /dev/null +++ b/examples/docs/resources/mobile-first/md/dropdown/max-height.md @@ -0,0 +1,22 @@ +
+

+ +

+ +## Dropdown 下拉菜单 + + + +将动作或菜单折叠到下拉菜单中。 + +
+ +### 最大高度 + +通过添加`max-height`属性可设置下拉最大高度 + + + +
+ + diff --git a/examples/docs/resources/mobile-first/md/dropdown/multi-stage.md b/examples/docs/resources/mobile-first/md/dropdown/multi-stage.md new file mode 100644 index 000000000..56a54b150 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/dropdown/multi-stage.md @@ -0,0 +1,21 @@ +
+

+ +

+ +## Dropdown 下拉菜单 + + + +将动作或菜单折叠到下拉菜单中。(暂不支持三级菜单) + +
+ +### 触发对象 + +可以通过 `multi-stage` 属性设置二级下拉菜单,通过添加`level="2"`以便区分二级层级。 + + +
+ + diff --git a/examples/docs/resources/mobile-first/md/dropdown/pop-direction.md b/examples/docs/resources/mobile-first/md/dropdown/pop-direction.md new file mode 100644 index 000000000..5016298d9 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/dropdown/pop-direction.md @@ -0,0 +1,34 @@ +
+

+ +

+ +## Dropdown 下拉菜单 + + + +
+ +### 弹出方向 + +通过属性`palcement`来设置菜单弹出位置。可选值(top/top-start/top-end/bottom/bottom-start/bottom-end),默认:bottom-start + +:::tip 提示 +top:上居中 + +top-start:上偏左 + +top-end:上偏右 + +bottom 下居中 + +bottom-start 下偏左 + +bottom-end 下偏右 +::: + + + +
+ + diff --git a/examples/docs/resources/mobile-first/md/dropdown/trigger-event.md b/examples/docs/resources/mobile-first/md/dropdown/trigger-event.md new file mode 100644 index 000000000..00c4b8bc4 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/dropdown/trigger-event.md @@ -0,0 +1,22 @@ +
+

+ +

+ +## Dropdown 下拉菜单 + + + +将动作或菜单折叠到下拉菜单中。 + +
+ +### 触发方式 + +可以配置 `click` 激活或者 `hover` 激活。 + + + +
+ + diff --git a/examples/docs/resources/mobile-first/md/exception/button-text.md b/examples/docs/resources/mobile-first/md/exception/button-text.md new file mode 100644 index 000000000..bb9df99d1 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/exception/button-text.md @@ -0,0 +1,22 @@ +
+

+ +

+ +## Exception 缺省页 + + + +
+ +### 自定义插槽 + +:::warning +已去除`button-text`自定义按钮文本,直接可以通过插槽自定义 +::: + + + +
+ + diff --git a/examples/docs/resources/mobile-first/md/exception/component-empty.md b/examples/docs/resources/mobile-first/md/exception/component-empty.md new file mode 100644 index 000000000..58d9f9ce7 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/exception/component-empty.md @@ -0,0 +1,29 @@ +
+

+ +

+ +## Exception 缺省页 + + + +
+ +### 组件级空态 + +通过添加`component-empty`属性展示组件级空态,其中 type 类型有`noperm、 nodata、 weaknet、noresult、 nonews`, + +:::tip +对应场景: +`noperm` :无访问权限 +`nodata` :暂无数据 +`weaknet` :网络不给力 +`noresult`:无相关搜索结果 +`nonews`:暂无最新消息 +::: + + + +
+ + diff --git a/examples/docs/resources/mobile-first/md/exception/exception-mf.md b/examples/docs/resources/mobile-first/md/exception/exception-mf.md new file mode 100644 index 000000000..5e91ca25d --- /dev/null +++ b/examples/docs/resources/mobile-first/md/exception/exception-mf.md @@ -0,0 +1,64 @@ +
+

+ +

+ +## Exception 缺省页 + + + +
+ +### 页面级空态 + +通过添加`page-empty`属性展示页面级空态,其中 type 类型有`pagenoperm`、 `pageweaknet`、 `pagenothing`、 `pageservererror`, + +:::tip +对应场景: +`pagenoperm` :无访问权限 +`pageweaknet` :网络异常 +`pagenothing` :你访问的页面不存在 +`pageservererror`:服务器异常 +::: + + + +
+ +### 组件级空态 + +通过添加`component-empty`属性展示组件级空态,其中 type 类型有`noperm、 nodata、 weaknet、noresult、 nonews`, + +:::tip +对应场景: +`noperm` :无访问权限 +`nodata` :暂无数据 +`weaknet` :网络不给力 +`noresult`:无相关搜索结果 +`nonews`:暂无最新消息 +::: + + + +
+ +### 自定义二级标题内容 + +通过`sub-message`自定义二级标题 + + + +
+ +### 自定义按钮文本 + +通过`button-text`自定义按钮文本 + +:::warning +页面级空态通过设置 type 值为`pagenoperm`展示按钮 +组件级空态通过设置 type 值为`nodata`展示按钮 +::: + + + +
\ No newline at end of file diff --git a/examples/docs/resources/mobile-first/md/exception/message.md b/examples/docs/resources/mobile-first/md/exception/message.md new file mode 100644 index 000000000..d4d298066 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/exception/message.md @@ -0,0 +1,18 @@ +
+

+ +

+ +## Exception 缺省页 + + + +
+ +### Exception 基本用法 + + + +
+ + diff --git a/examples/docs/resources/mobile-first/md/exception/page-empty.md b/examples/docs/resources/mobile-first/md/exception/page-empty.md new file mode 100644 index 000000000..397a8d8e2 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/exception/page-empty.md @@ -0,0 +1,28 @@ +
+

+ +

+ +## Exception 缺省页 + + + +
+ +### 页面级空态 + +通过添加`page-empty`属性展示页面级空态,其中 type 类型有`pagenoperm`、 `pageweaknet`、 `pagenothing`、 `pageservererror`, + +:::tip +对应场景: +`pagenoperm` :无访问权限 +`pageweaknet` :网络异常 +`pagenothing` :你访问的页面不存在 +`pageservererror`:服务器异常 +::: + + + +
+ + diff --git a/examples/docs/resources/mobile-first/md/exception/sub-message.md b/examples/docs/resources/mobile-first/md/exception/sub-message.md new file mode 100644 index 000000000..c1be49ede --- /dev/null +++ b/examples/docs/resources/mobile-first/md/exception/sub-message.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## Exception 缺省页 + + + +
+ +### 自定义二级标题内容 + +通过`sub-message`自定义二级标题 + + + +
+ + diff --git a/examples/docs/resources/mobile-first/md/file-upload/accept-file-type.md b/examples/docs/resources/mobile-first/md/file-upload/accept-file-type.md new file mode 100644 index 000000000..5dd05250c --- /dev/null +++ b/examples/docs/resources/mobile-first/md/file-upload/accept-file-type.md @@ -0,0 +1,19 @@ +
+

+ +

+ +## FileUpload 文件上传 + + + +可以设定文件的类型与上传的个数等。可自定义上传服务。 + +
+ +### 可上传的文件类型 + +通过配置 `accept(.doc,.docx)` 来限制上传文件的格式为 `.doc .docx` + + +
diff --git a/examples/docs/resources/mobile-first/md/file-upload/basic-usage.md b/examples/docs/resources/mobile-first/md/file-upload/basic-usage.md new file mode 100644 index 000000000..968907a2e --- /dev/null +++ b/examples/docs/resources/mobile-first/md/file-upload/basic-usage.md @@ -0,0 +1,21 @@ +
+

+ +

+ +## FileUpload 文件上传 + + + +可以设定文件的类型与上传的个数等。可自定义上传服务。 + +
+ +### 基本用法 + +属性 action(type:String) 上传服务器地址。 + + +
+ + diff --git a/examples/docs/resources/mobile-first/md/file-upload/display-only.md b/examples/docs/resources/mobile-first/md/file-upload/display-only.md new file mode 100644 index 000000000..1f46291ee --- /dev/null +++ b/examples/docs/resources/mobile-first/md/file-upload/display-only.md @@ -0,0 +1,29 @@ +
+

+ +

+ +## FileUpload 文件上传 + + + +可以设定文件的类型与上传的个数等。可自定义上传服务。 + +
+ +### 只读模式 + +文件上传模式,通过 `display-only` 设置组件是否只读。 + + +
+ +图片上传模式,通过 `display-only` 设置组件是否只读。 + + +
+ +音视频上传模式,通过 `display-only` 设置组件是否只读。 + + +
diff --git a/examples/docs/resources/mobile-first/md/file-upload/download.md b/examples/docs/resources/mobile-first/md/file-upload/download.md new file mode 100644 index 000000000..78d8b0721 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/file-upload/download.md @@ -0,0 +1,29 @@ +
+

+ +

+ +## FileUpload 文件上传 + + + +可以设定文件的类型与上传的个数等。可自定义上传服务。 + +
+ +### 下载全部 + +文件上传模式,配置 `download-all` 事件,会显示下载全部按钮,点击下载全部按钮会触发 `download-all` 事件 + + +### 文件下载 + +文件上传模式,配置 `download-file` 事件,已上传的文件会显示下载按钮,点击下载按钮会触发 `download-file` 事件 + + +
+ +图片上传模式,配置 `download-file` 事件,已上传的文件会显示下载图标,点击下载按钮会触发 `download-file` 事件 + + +
diff --git a/examples/docs/resources/mobile-first/md/file-upload/drag.md b/examples/docs/resources/mobile-first/md/file-upload/drag.md new file mode 100644 index 000000000..839917c05 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/file-upload/drag.md @@ -0,0 +1,24 @@ +
+

+ +

+ +## FileUpload 文件上传 + + + +可以设定文件的类型与上传的个数等。可自定义上传服务。 + +
+ +### 拖拽上传 + +设置 `list-type` 为 `drag-single`,开启单文件拖拽上传。 + + +
+ +可配置 `file-list` 属性展示对应的文件 + + +
diff --git a/examples/docs/resources/mobile-first/md/file-upload/file-upload-mobile-mf.md b/examples/docs/resources/mobile-first/md/file-upload/file-upload-mobile-mf.md new file mode 100644 index 000000000..1e0c7207e --- /dev/null +++ b/examples/docs/resources/mobile-first/md/file-upload/file-upload-mobile-mf.md @@ -0,0 +1,15 @@ +
+

+ +

+ +## FileUpload 文件上传 + + +
+ +### 基本用法 + + + +
\ No newline at end of file diff --git a/examples/docs/resources/mobile-first/md/file-upload/multi-media.md b/examples/docs/resources/mobile-first/md/file-upload/multi-media.md new file mode 100644 index 000000000..c198ca37b --- /dev/null +++ b/examples/docs/resources/mobile-first/md/file-upload/multi-media.md @@ -0,0 +1,22 @@ +
+

+ +

+ +## FileUpload 文件上传 + + + +可以设定文件的类型与上传的个数等。可自定义上传服务。 + +
+ +### 多媒体上传 + +在 `list-type` 为 `picture-card` 时,设置 `source-type` 为 `video/audio/picture` 时进行视频、音频、图片上传,`source-type` 支持 `video、audio、picture` 的互相组合 + + +同时在多媒体上传模式下,可配置hwh5属性,进行原生上传。可在 `trigger-click` 事件中进行文件选取操作并上传,可在 `play` 事件中进行音视频播放操作 + + +
diff --git a/examples/docs/resources/mobile-first/md/file-upload/picture.md b/examples/docs/resources/mobile-first/md/file-upload/picture.md new file mode 100644 index 000000000..80ac530fd --- /dev/null +++ b/examples/docs/resources/mobile-first/md/file-upload/picture.md @@ -0,0 +1,29 @@ +
+

+ +

+ +## FileUpload 文件上传 + + + +可以设定文件的类型与上传的个数等。可自定义上传服务。 + +
+ +### 图片上传 + +设置 `list-type` 为 `picture-single`,展示单图片模式。可配置 `file-list` 属性展示对应的图片 + + +
+ +设置 `list-type` 为 `picture-card`,展示图片墙模式。可配置 `file-list` 属性展示对应的图片 + + +
+ +设置 `show-name` 控制是否展示图片名字 + + +
diff --git a/examples/docs/resources/mobile-first/md/file-upload/preview.md b/examples/docs/resources/mobile-first/md/file-upload/preview.md new file mode 100644 index 000000000..04103a883 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/file-upload/preview.md @@ -0,0 +1,24 @@ +
+

+ +

+ +## FileUpload 文件上传 + + + +可以设定文件的类型与上传的个数等。可自定义上传服务。 + +
+ +### 文件预览 + +文件上传模式,配置 `preview` 事件,已上传的文件会显示预览按钮,点击预览图标会触发 `preview` 事件。 + + +
+ +图片上传模式,配置 `preview` 事件,已上传的文件会显示预览图标,点击预览图标会触发 `preview` 事件。 + + +
diff --git a/examples/docs/resources/mobile-first/md/file-upload/re-upload.md b/examples/docs/resources/mobile-first/md/file-upload/re-upload.md new file mode 100644 index 000000000..8851286d7 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/file-upload/re-upload.md @@ -0,0 +1,24 @@ +
+

+ +

+ +## FileUpload 文件上传 + + + +可以设定文件的类型与上传的个数等。可自定义上传服务。 + +
+ +### 文件重新上传 + +文件上传模式,配置 `re-upload` 事件,上传失败的文件会显示重新上传按钮,点击重新上传按钮会触发 `re-upload` 事件 + + +
+ +图片上传模式,配置 `re-upload` 事件,上传失败的文件会显示重新上传图标,点击重新上传按钮会触发 `re-upload` 事件 + + +
diff --git a/examples/docs/resources/mobile-first/md/file-upload/show-title.md b/examples/docs/resources/mobile-first/md/file-upload/show-title.md new file mode 100644 index 000000000..6289ebd3d --- /dev/null +++ b/examples/docs/resources/mobile-first/md/file-upload/show-title.md @@ -0,0 +1,24 @@ +
+

+ +

+ +## FileUpload 文件上传 + + + +可以设定文件的类型与上传的个数等。可自定义上传服务。 + +
+ +### 隐藏标题 + +配置 `show-title` 为 `false` 隐藏标题,默认为 `true`。 + + +
+ +通过 `title` 可自定义标题。 + + +
diff --git a/examples/docs/resources/mobile-first/md/file-upload/slots.md b/examples/docs/resources/mobile-first/md/file-upload/slots.md new file mode 100644 index 000000000..7648e389d --- /dev/null +++ b/examples/docs/resources/mobile-first/md/file-upload/slots.md @@ -0,0 +1,19 @@ +
+

+ +

+ +## FileUpload 文件上传 + + + +可以设定文件的类型与上传的个数等。可自定义上传服务。 + +
+ +### 插槽 + +`assist-content` 辅助内容插槽 + + +
diff --git a/examples/docs/resources/mobile-first/md/file-upload/upload-event.md b/examples/docs/resources/mobile-first/md/file-upload/upload-event.md new file mode 100644 index 000000000..0fb242d45 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/file-upload/upload-event.md @@ -0,0 +1,24 @@ +
+

+ +

+ +## FileUpload 文件上传 + + + +可以设定文件的类型与上传的个数等。可自定义上传服务。 + +
+ +### 事件 + +`trigger-click` 点击文件上传时触发的事件 +`preview` 点击预览时触发的事件 +`download-file` 点击下载时触发的事件 +`download-all` 点击全部下载时触发的事件 +`re-upload` 点击重新上传时触发的事件 +`click-file-list` 点击上传的文件列表时触发的事件 + + +
diff --git a/examples/docs/resources/mobile-first/md/file-upload/upload-file-list.md b/examples/docs/resources/mobile-first/md/file-upload/upload-file-list.md new file mode 100644 index 000000000..d705298ff --- /dev/null +++ b/examples/docs/resources/mobile-first/md/file-upload/upload-file-list.md @@ -0,0 +1,19 @@ +
+

+ +

+ +## FileUpload 文件上传 + + + +可以设定文件的类型与上传的个数等。可自定义上传服务。 + +
+ +### 上传的文件列表 + +通过 `fileList` 配置需要显示的文件列表。 + + +
diff --git a/examples/docs/resources/mobile-first/md/file-upload/video-audio.md b/examples/docs/resources/mobile-first/md/file-upload/video-audio.md new file mode 100644 index 000000000..0d23329e2 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/file-upload/video-audio.md @@ -0,0 +1,24 @@ +
+

+ +

+ +## FileUpload 文件上传 + + + +可以设定文件的类型与上传的个数等。可自定义上传服务。 + +
+ +### 音视频上传 + +在 `list-type` 为 `picture-single` 时,设置 `source-type` 为 `video` 时展示视频 + + +
+ +在 `list-type` 为 `picture-single` 时,设置 `source-type` 为 `audio` 时展示视频 + + +
diff --git a/examples/docs/resources/mobile-first/md/filter-bar/basic-usage.md b/examples/docs/resources/mobile-first/md/filter-bar/basic-usage.md new file mode 100644 index 000000000..97b565e97 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/filter-bar/basic-usage.md @@ -0,0 +1,28 @@ +
+

+ +

+ +## FilterBar 过滤栏 + + + +FilterBar 过滤栏。 + +
+ +### 基本用法 + + + +### 选中项只读 + +点击事件不改变选中项。 + + + +### 插槽 + +可使用右侧 `icon` 自定义插槽。 + + \ No newline at end of file diff --git a/examples/docs/resources/mobile-first/md/filter-bar/filter-bar-mf.md b/examples/docs/resources/mobile-first/md/filter-bar/filter-bar-mf.md new file mode 100644 index 000000000..97b565e97 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/filter-bar/filter-bar-mf.md @@ -0,0 +1,28 @@ +
+

+ +

+ +## FilterBar 过滤栏 + + + +FilterBar 过滤栏。 + +
+ +### 基本用法 + + + +### 选中项只读 + +点击事件不改变选中项。 + + + +### 插槽 + +可使用右侧 `icon` 自定义插槽。 + + \ No newline at end of file diff --git a/examples/docs/resources/mobile-first/md/filter/basic-usage.md b/examples/docs/resources/mobile-first/md/filter/basic-usage.md new file mode 100644 index 000000000..bf01614ee --- /dev/null +++ b/examples/docs/resources/mobile-first/md/filter/basic-usage.md @@ -0,0 +1,38 @@ +
+

+ +

+ +## Filter 过滤器 + + + +Filter 过滤器。 +
+ +### 基本用法 + +过滤类型 `type` 包括 `单选、多选、枚举单选 (radio | checkbox | enum-radio)`。 + + + +### 面板每行标签数 + +通过 `column-num` 属性设置面板每行标签数,默认值为 3。 + + + +### 过滤组 + +通过 `filter-group` 属性开启过滤组功能,`filter-value` 绑定过滤组的值。过滤组类型 `type` 包括 `单选、多选 (radio | checkbox)`。 + + + + + +### 枚举单选 + +设置过滤类型 `type: 'enum-radio'` 时,当前数据为枚举单选,通过 `showAll: true` 显示 `全部` 选择项。 + + + \ No newline at end of file diff --git a/examples/docs/resources/mobile-first/md/filter/filter-mf.md b/examples/docs/resources/mobile-first/md/filter/filter-mf.md new file mode 100644 index 000000000..bf01614ee --- /dev/null +++ b/examples/docs/resources/mobile-first/md/filter/filter-mf.md @@ -0,0 +1,38 @@ +
+

+ +

+ +## Filter 过滤器 + + + +Filter 过滤器。 +
+ +### 基本用法 + +过滤类型 `type` 包括 `单选、多选、枚举单选 (radio | checkbox | enum-radio)`。 + + + +### 面板每行标签数 + +通过 `column-num` 属性设置面板每行标签数,默认值为 3。 + + + +### 过滤组 + +通过 `filter-group` 属性开启过滤组功能,`filter-value` 绑定过滤组的值。过滤组类型 `type` 包括 `单选、多选 (radio | checkbox)`。 + + + + + +### 枚举单选 + +设置过滤类型 `type: 'enum-radio'` 时,当前数据为枚举单选,通过 `showAll: true` 显示 `全部` 选择项。 + + + \ No newline at end of file diff --git a/examples/docs/resources/mobile-first/md/flowchart/basic-usage.md b/examples/docs/resources/mobile-first/md/flowchart/basic-usage.md new file mode 100644 index 000000000..ce1eec842 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/flowchart/basic-usage.md @@ -0,0 +1,72 @@ +
+

+ +

+ +## Flowchart 流程图 + + + +
+ +### 基本用法 + +该组件可以用来定制流程图,不依赖其它库或组件。默认的实现支持有状态的节点和连线,支持节点和连线以及空白区域的点击事件。 + +### 垂直图形 + + + +### 水平图形 + + + +节点属性: +|名称|类型|描述|值| +|--|--|--|--| +|node.name|string|节点唯一标识|必选| +|node.info|Object|节点属性|必选| +|node.info.row|number|节点所在的行|必选| +|node.info.col|number|节点所在的列|必选| +|node.info.width|number|节点宽度或节点直径|shape 为 circle 时为 40,为 rectangle 时为 160| +|node.info.height|number|节点高度|shape 为 rectangle 时有效为 56| +|node.info.shape|string|节点形状| rectangle 或 circle| +|node.info.status|number|节点状态|无默认值,可以为 config.status 所有 key 值| +|node.info.other|Object|节点扩展|必选| +|node.info.other.main|string|节点主描述|必选| +|node.info.other.auxi|string|节点辅描述|必选| +|node.info.other.error|string|失败节点 Tip 提示|必选| +|node.hidden|boolean|节点是否隐藏|false| +|node.renderOuter|function|节点的定制渲染,覆盖状态边框|undefined| +|node.renderInner|function|节点的定制渲染,不覆盖状态边框|undefined| + +连线属性: +|名称|类型|描述|值| +|--|--|--|--| +|link.from|string|连线起始节点|起始节点的 name| +|link.to|string|连线结束节点|结束节点的 name| +|link.fromJoint|string|连线在起始节点的出发位置|默认为 bottom,表示起始节点底部中间| +|link.to|string|连线在结束节点的终止位置|默认为 top,表示结束节点顶部中间| +|link.info|Object|连线属性|必选| +|link.info.status|number|连线状态|必选| +|link.info.style|string|连线样式|必选,为 solid 或 dashed| + +fromJoint、toJoint 连接点配置: +值可以为 bottom、top、left、right,表示从底部中间、顶部中间、左侧中间、右侧中间; +值也可以为变体 bottom-1/2、bottom-2/2,表示从底部左半部分中间、底部右半部分中间; +值也可以为变体 bottom-1/3、bottom-2/3、bottom-3/3 等 + +图形属性: +|名称|类型|描述|值| +|--|--|--|--| +|config.width|number|图形宽度|如果配置宽度够用,就使用此配置宽度,否则使用图形实际需要宽度| +|config.height|number|图形高度|如果配置高度够用,就使用此配置高度,否则使用图形实际需要高度| +|config.gap|number|节点间距|大于 0 数字| +|config.padding|number|图形内边距|大于 0 数字| +|config.prior|string|折线优先方向|vertical 或 horizontal,对于水平图形,应使用 horizontal| +|config.align|string|同行节点水平居中|不配置或 center| +|config.status|Object|状态值和名称映射|必选| +|config.colors|Object|状态值和颜色映射|必选,作为连线和节点边框颜色| +|config.ongoingBackgroundColor|string|进行中节点背景色|必选| +|config.popoverPlacement|string|Tip 提示位置|必选| +
diff --git a/examples/docs/resources/mobile-first/md/flowchart/dot-mode.md b/examples/docs/resources/mobile-first/md/flowchart/dot-mode.md new file mode 100644 index 000000000..7650f51be --- /dev/null +++ b/examples/docs/resources/mobile-first/md/flowchart/dot-mode.md @@ -0,0 +1,22 @@ +
+

+ +

+ +## Flowchart 流程图 + + + +
+ +### 点模式 + +提供了节点组件 Node 用于定制多端流程图的节点样式 + +### 点模式-垂直图形 + + + +### 点模式-水平图形 + + diff --git a/examples/docs/resources/mobile-first/md/flowchart/flowchart-mf.md b/examples/docs/resources/mobile-first/md/flowchart/flowchart-mf.md new file mode 100644 index 000000000..19287b058 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/flowchart/flowchart-mf.md @@ -0,0 +1,72 @@ +
+

+ +

+ +## Flowchart 流程图 + + + +
+ +### 基本用法 + +该组件可以用来定制流程图,不依赖其它库或组件。默认的实现支持有状态的节点和连线,支持节点和连线以及空白区域的点击事件。 + +### 垂直图形 + + + +### 水平图形 + + + +节点属性: +|名称|类型|描述|值| +|--|--|--|--| +|node.name|string|节点唯一标识|必选| +|node.info|Object|节点属性|必选| +|node.info.row|number|节点所在的行|必选| +|node.info.col|number|节点所在的列|必选| +|node.info.width|number|节点宽度或节点直径|shape 为 circle 时为 40,为 rectangle 时为 160| +|node.info.height|number|节点高度|shape 为 rectangle 时有效为 56| +|node.info.shape|string|节点形状| rectangle 或 circle| +|node.info.status|number|节点状态|无默认值,可以为 config.status 所有 key 值| +|node.info.other|Object|节点扩展|必选| +|node.info.other.main|string|节点主描述|必选| +|node.info.other.auxi|string|节点辅描述|必选| +|node.info.other.error|string|失败节点 Tip 提示|必选| +|node.hidden|boolean|节点是否隐藏|false| +|node.renderOuter|function|节点的定制渲染,覆盖状态边框|undefined| +|node.renderInner|function|节点的定制渲染,不覆盖状态边框|undefined| + +连线属性: +|名称|类型|描述|值| +|--|--|--|--| +|link.from|string|连线起始节点|起始节点的 name| +|link.to|string|连线结束节点|结束节点的 name| +|link.fromJoint|string|连线在起始节点的出发位置|默认为 bottom,表示起始节点底部中间| +|link.to|string|连线在结束节点的终止位置|默认为 top,表示结束节点顶部中间| +|link.info|Object|连线属性|必选| +|link.info.status|number|连线状态|必选| +|link.info.style|string|连线样式|必选,为 solid 或 dashed| + +fromJoint、toJoint 连接点配置: +值可以为 bottom、top、left、right,表示从底部中间、顶部中间、左侧中间、右侧中间; +值也可以为变体 bottom-1/2、bottom-2/2,表示从底部左半部分中间、底部右半部分中间; +值也可以为变体 bottom-1/3、bottom-2/3、bottom-3/3 等 + +图形属性: +|名称|类型|描述|值| +|--|--|--|--| +|config.width|number|图形宽度|如果配置宽度够用,就使用此配置宽度,否则使用图形实际需要宽度| +|config.height|number|图形高度|如果配置高度够用,就使用此配置高度,否则使用图形实际需要高度| +|config.gap|number|节点间距|大于 0 数字| +|config.padding|number|图形内边距|大于 0 数字| +|config.prior|string|折线优先方向|vertical 或 horizontal,对于水平图形,应使用 horizontal| +|config.align|string|同行节点水平居中|不配置或 center| +|config.status|Object|状态值和名称映射|必选| +|config.colors|Object|状态值和颜色映射|必选,作为连线和节点边框颜色| +|config.ongoingBackgroundColor|string|进行中节点背景色|必选| +|config.popoverPlacement|string|Tip 提示位置|必选| +
\ No newline at end of file diff --git a/examples/docs/resources/mobile-first/md/form/form-auto-width.md b/examples/docs/resources/mobile-first/md/form/form-auto-width.md new file mode 100644 index 000000000..e08c934dd --- /dev/null +++ b/examples/docs/resources/mobile-first/md/form/form-auto-width.md @@ -0,0 +1,14 @@ +
+

+ +

+ +## Form 表单 + + + +### 表单自适应 + +通过添加`show-auto-width`属性实现表单内元素宽度 100%自适应 + + diff --git a/examples/docs/resources/mobile-first/md/form/form-clear-validate.md b/examples/docs/resources/mobile-first/md/form/form-clear-validate.md new file mode 100644 index 000000000..580777b18 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/form/form-clear-validate.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## 移除表单项的校验结果 + + + +Form 组件下的移除表单项的校验结果的方法。 + +
+ +### 移除表单项的校验结果 + +调用 `clearValidate` 方法移除表单项的校验结果。传入待移除的表单项的 `prop` 属性或者 `prop` 组成的数组,如不传则移除整个表单的校验结果。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/form/form-disabled.md b/examples/docs/resources/mobile-first/md/form/form-disabled.md new file mode 100644 index 000000000..7d96cbe64 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/form/form-disabled.md @@ -0,0 +1,17 @@ +
+

+ +

+ +## Form 表单 + + + +由按钮、输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据。 +
+ +### 校验提示的形式 + +通过 `disabled` 可设置表单是否禁用,默认为 `false`。 + + diff --git a/examples/docs/resources/mobile-first/md/form/form-display-only.md b/examples/docs/resources/mobile-first/md/form/form-display-only.md new file mode 100644 index 000000000..e662b409d --- /dev/null +++ b/examples/docs/resources/mobile-first/md/form/form-display-only.md @@ -0,0 +1,18 @@ +
+

+ +

+ +## FormItem 表单项 + + + +
+ +### 只读 display-only + +通过 `display-only` 属性,开启只读模式 + + + +
diff --git a/examples/docs/resources/mobile-first/md/form/form-form.md b/examples/docs/resources/mobile-first/md/form/form-form.md new file mode 100644 index 000000000..8f596039a --- /dev/null +++ b/examples/docs/resources/mobile-first/md/form/form-form.md @@ -0,0 +1,22 @@ +
+

+ +

+ +## Form 表单 + + + +由按钮、输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据。 + +
+ +### 常用表单 + +在 Form 组件中,每一个表单域由一个 FormItem 组件构成,表单域中可以放置各种类型的表单控件,包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker。 + + + +
+ + diff --git a/examples/docs/resources/mobile-first/md/form/form-item-tip.md b/examples/docs/resources/mobile-first/md/form/form-item-tip.md new file mode 100644 index 000000000..1a633cc95 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/form/form-item-tip.md @@ -0,0 +1,18 @@ +
+

+ +

+ +## Form 表单 + + + +
+ +### 给表单项 label 添加提示 + +通过给 form-item 添加 tip-content 属性给 label 添加提示信息 + + + +
diff --git a/examples/docs/resources/mobile-first/md/form/form-saas-mf.md b/examples/docs/resources/mobile-first/md/form/form-saas-mf.md new file mode 100644 index 000000000..c48d5dc67 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/form/form-saas-mf.md @@ -0,0 +1,444 @@ +
+

+ +

+ +## 表单组件 + + + +由按钮、输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据。 + +
+ +### 常用表单 + +在 Form 组件中,每一个表单域由一个 FormItem 组件构成,表单域中可以放置各种类型的表单控件,包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker。 + + + +
+ +## FormItem 表单项 + + + +Form 组件下的 FormItem 配置。 + +
+ +### 行内表单 + +当垂直方向空间受限且表单较简单时,可以在一行内放置表单,设置 `inline` 属性可以让表单域变为行内的表单域。 + + + +
+ + +## 移除表单项的校验结果 + + + +Form 组件下的移除表单项的校验结果的方法。 + + + +### 移除表单项的校验结果 + +调用 `clearValidate` 方法移除表单项的校验结果。传入待移除的表单项的 `prop` 属性或者 `prop` 组成的数组,如不传则移除整个表单的校验结果。 + + + +
+ +### 校验提示的形式 + +通过 `disabled` 可设置表单是否禁用,默认为 `false`。 + + + +### 只读 display-only + +通过 `display-only` 属性,开启只读模式 + + + +
+ +### 给表单项 label 添加提示 + +通过给 form-item 添加 tip-content 属性给 label 添加提示信息 + + + +
+ +### 标签文本插槽 + +通过在 `label` 插槽,自定义标签文本的内容 + + + +
+ +### 防抖处理 + +设置 FormItem 的属性 `validate-debounce` 为 `true`,可以开启校验防抖,在连续输入的情况下,会在最后一次输入结束时才开始校验。默认为 `false` 不开启。 + + + +
+ +### 校验提示的形式 + +通过 `validate-type` 可设置校验提示信息是以 `text` 文本显示还是以 `tip` 提示框的形式显示,默认为 `tip` 。也可直接配置在某一个 `` 上控制某一项的校验提示形式。 + + + +### 表单校验 + +包括常用的必填、日期、时间、URL、邮件等校验规则。通过 `trigger` 配置触发校验规则的方式,为 `change` 时,当输入框值改变即触发校验,为 `blur` 时则失焦后触发校验。 + + + +:::tip 注意 + +校验时若校验类型为 `date`,则需要使用 `DatePicker` 组件进行日期选择,若使用 `Input` 组件进行日期输入,建议使用自定义校验规则。 + +::: + +### 自定义校验规则 + +通过 `validator` 选项进行自定义校验,校验方法中 `callback` 必须被调用。通过配置 `validate-on-rule-change` 属性,设置是否在 `rules` 属性改变后立即触发一次验证 + + + +### 校验提示位置 + +通过 `validate-position` 可自定义错误提示出现的位置,在 `Form` 组件上设置后,子组件`FormItem`会继承父组件设置。单独在 `FormItem` 组件上进行设置优先级高于在 `From`上的设置。 + + + +#### 校验提示跟随表单项移动 + +通过配置 `popperOptions.bubbling` 为 `true` ,可实现表单的校验提示跟随 Form 表单外部的滚动条滚动。 + + + +### 动态切换 FormItem + +:::warning +在表单中通过 `v-if` 切换两个 `FormItem` 控制页面元素时,会存在错误提示错位问题,原因时 Vue 复用了 ToolTip 组件,这时需要将 form-item 上加上 `key` 属性标识 +::: + + + +### RichText 等无校验的组件添加校验的方法 + + + +## 表单校验配置 + +
+
+ +表单校验是基于 `async-validator` 封装的,主要用到 `validate` 函数和 `rules` 的配置规则。 + +### API + +#### validate + +常用于提交表单的时候,对整个表单需校验字段进行校验,得到校验结果,使用示例如下所示: + +```js +this.$refs[formName].validate((valid, error) => {}) +``` + +参数说明: + +- `valid`:Boolean 类型,值为 `true` 时表示表单所有字段都校验通过,可提交表单。值为 `false` 时表示有字段没校验通过。 + +- `error`:Array 类型,包含校验不通过的字段。 + +### Rules + +用于设置表单每个需校验字段的校验规则,可设置每个字段的校验类型,是否必填,校验不成功的提示信息等。 + +#### type + +通过 `type` 设置需校验字段的校验类型,使用这个,我们就可以对一些特定的字段进行校验,而不用再像以前一样写正则,做判断。使用示例如下所示: + +```js +rules: { + name: { type: 'string', required: true } +} +``` + +可设置的值如下: + +- `string`:字符串类型(默认值) + +- `number`:数字类型 + +- `boolean`:布尔类型 + +- `method`:函数类型 + +- `regexp`:正则表达式 + +- `integer`:整型 + +- `float`:双精度浮点型数字 + +- `array`:数组类型 + +- `object`:对象类型 + +- `enum`:枚举值 + +- `date`:值必须是由日期决定的有效值 + +- `url`:网址格式 + +- `hex`:16 进制数字 + +- `email`:电子邮箱类型 + +- `any`:任意类型 + +#### required + +`required` 的属性值为 Boolean 类型,用于设置字段是否为必填项,即非空验证。 + +- `true`:设置为 `true`,表示该字段为必填项,且 label 会带红色 \* 号 + +- `false`:默认值,表示该字段不是必填项,label 不会带红色 \* 号 + +#### pattern + +配置用于校验该字段的正则表达式。使用示例如下所示: + +```js +rules: { + name: { required: true, pattern: /^[a-z]+$/ } +} +``` + +#### min + +对于 string 和 array 类型,将对长度进行比较,对于 number 类型,数字不能小于 `min`。使用示例如下所示: + +```js +rules: { + users: { min: 2, message: '长度必须不小于2' } +} +``` + +#### max + +对于 string 和 array 类型,将对长度进行比较,对于 number 类型,数字不能大于 `max`。使用示例如下所示: + +```js +rules: { + users: { max: 11, message: '长度必须不大于11' } +} +``` + +#### len + +要验证字段的确切长度,请指定 `len` 属性。对于 string 和 array 类型,将对 length 属性进行比较。对于 number 类型,此属性表示该数字的精确匹配,即,它只能严格等于 `len`。如果 `len` 属性与 `min` 和 `max` 属性一起使用,则 `len` 优先。使用示例如下所示: + +```js +rules: { + users: { len: 2, message: '长度必须为2' } +} +``` + +#### trigger + +通过 `trigger` 配置触发校验规则的方式,为 `change` 时,当输入框值改变即触发校验,为 `blur` 时则失焦后触发校验。使用示例如下所示: + +```js +rules: { + users: { len: 2, message: '长度必须为2', trigger: 'change' } +} +``` + +可配置的值如下: + +- `blur`:则失焦后触发校验。 + +- `change`:当输入框值改变即触发校验 + +#### enum + +枚举值验证,验证字段的值是否在 `enum` 属性配置的数组 `['admin', 'user', 'guest']` 中。例如: + +```js +rules: { + role: { type: 'enum', enum: ['admin', 'user', 'guest'] } +} +``` + +#### whitespace + +验证必填字段是否只有空格。通常将只包含空白的必填字段视为错误。若要将仅由空格组成的字符串视为错误,则可设置 `whitespace` 为 `true` ,如果没有该配置,则全空格的输入值也是有效的。 + +```js +rules: { + name: { required: true, whitespace: true, message: '相对人名称不能为空' } +} +``` + +#### fields + +深层规则。如果需要验证深层对象属性,可以通过将嵌套规则分配给规则的 `fields` 属性来验证 object 或 array 类型的验证规则。请注意,如果不在父规则上指定 `required` 属性,则不在源对象上声明字段是完全有效的,并且深度验证规则将不会执行,因为没有任何可验证的对象。例如: + +- object 类型: + +```js +rules: { + address: { + type: 'object', required: true, // 父规则上必须指定 required 为 true + fields: { + street: { type: 'string', required: true }, + city: { type: 'string', required: true }, + zip: { type: 'string', required: true, len: 8, message: 'invalid zip' } + } + }, + name: { type: 'string', required: true } +} +``` + +- array 类型: + +```js +rules: { + roles: { + type: 'array', required: true, len: 3, + fields: { + 0: { type: 'string', required: true }, + 1: { type: 'string', required: true }, + 2: { type: 'string', required: true } + } + } +} +``` + +#### defaultField + +`defaultField` 属性可与 array 或 object 类型一起使用,以验证容器的所有值。它可以是包含验证规则的 object 或 array。例如: + +```js +rules: { + urls: { + type: 'array', required: true, + defaultField: { type: 'url' } + } +} +``` + +#### transform + +有时有必要在验证之前转换值,以强制或以某种方式对其进行清理。为此 `transform` ,向验证规则添加一个功能。在验证之前,先转换属性,然后将其重新分配给源对象,以更改该属性的值。使用场景比如:去除用户输入的空格。 + +```js +rules: { + name: { + type: 'string', + required: true, + pattern: /^[a-z]+$/, + transform(value) { + return value.trim(); + } + } +} +``` + +#### messages + +用于配置字段校验不成功时的提示信息,支持国际化。 + +- 实现此目的最简单的方法是将消息分配给规则 + +```js +rules: { + name: { type: 'string', required: true, message: 'Name is required' } +} +``` + +- 消息可以是任何类型,例如 jsx 格式 + +```js +rules: { + name: { type: 'string', required: true, message: 'Name is required' } +} +``` + +- 消息也可以是一个函数,例如,如果使用 vue-i18n + +```js +rules: { + name: { type: 'string', required: true, message: () => this.$t( 'name is required' ) } +} +``` + +#### validator + +通过 `validator` 选项为某个字段进行自定义校验,校验方法中 `callback` 必须被调用。 + +如下所示,先在 `methods` 对象中定义一个自定义校验的方法: + +```js +// 自定义的校验password的方法 +validatePass(rule, value, callback) { + if (!/^(?=._[a-z])(?=._[A-Z])(?=.\*\\d)[a-zA-Z\d]{8,}$/.test(value)) { + callback(new Error('最少八个字符,至少包含一个大写字母,一个小写字母和一个数字')) + } else { + callback() + } +} +``` + +然后在对应的需要校验的规则中配置 `validator: this.validatePass`: + +```js +rules: { + password: [ + { required: true, message: '必填', trigger: 'blur' }, + { validator: this.validatePass, trigger: 'blur' } + ] +} +``` + +#### asyncValidator + +通过 `asyncValidator` 选项为某个字段进行自定义异步校验,校验方法中 `callback` 必须被调用。 + +如下所示,先在 `methods` 对象中定义一个自定义的异步校验的方法: + +```js +// 自定义异步校验password的方法 +promiseField(rule, value, callback) { + ajax({ + url: 'xx', + value: value + }).then(function(data) { + callback(); + }, function(error) { + callback(new Error(error)) + }) +} +``` + +然后在对应的需要校验的规则中配置 `asyncValidator: this.promiseField`: + +```js +rules: { + password: [ + { required: true, message: '必填', trigger: 'blur' }, + { asyncValidator: this.promiseField, trigger: 'blur' } + ] +} +``` diff --git a/examples/docs/resources/mobile-first/md/form/form-validate-setting.md b/examples/docs/resources/mobile-first/md/form/form-validate-setting.md new file mode 100644 index 000000000..03417a511 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/form/form-validate-setting.md @@ -0,0 +1,304 @@ +## 表单校验配置 + +
+
+ +表单校验是基于 `async-validator` 封装的,主要用到 `validate` 函数和 `rules` 的配置规则。 + +### API + +#### validate + +常用于提交表单的时候,对整个表单需校验字段进行校验,得到校验结果,使用示例如下所示: + +```js +this.$refs[formName].validate((valid, error) => {}) +``` + +参数说明: + +- `valid`:Boolean 类型,值为 `true` 时表示表单所有字段都校验通过,可提交表单。值为 `false` 时表示有字段没校验通过。 + +- `error`:Array 类型,包含校验不通过的字段。 + +### Rules + +用于设置表单每个需校验字段的校验规则,可设置每个字段的校验类型,是否必填,校验不成功的提示信息等。 + +#### type + +通过 `type` 设置需校验字段的校验类型,使用这个,我们就可以对一些特定的字段进行校验,而不用再像以前一样写正则,做判断。使用示例如下所示: + +```js +rules: { + name: { type: 'string', required: true } +} +``` + +可设置的值如下: + +- `string`:字符串类型(默认值) + +- `number`:数字类型 + +- `boolean`:布尔类型 + +- `method`:函数类型 + +- `regexp`:正则表达式 + +- `integer`:整型 + +- `float`:双精度浮点型数字 + +- `array`:数组类型 + +- `object`:对象类型 + +- `enum`:枚举值 + +- `date`:值必须是由日期决定的有效值 + +- `url`:网址格式 + +- `hex`:16 进制数字 + +- `email`:电子邮箱类型 + +- `any`:任意类型 + +#### required + +`required` 的属性值为 Boolean 类型,用于设置字段是否为必填项,即非空验证。 + +- `true`:设置为 `true`,表示该字段为必填项,且 label 会带红色 \* 号 + +- `false`:默认值,表示该字段不是必填项,label 不会带红色 \* 号 + +#### pattern + +配置用于校验该字段的正则表达式。使用示例如下所示: + +```js +rules: { + name: { required: true, pattern: /^[a-z]+$/ } +} +``` + +#### min + +对于 string 和 array 类型,将对长度进行比较,对于 number 类型,数字不能小于 `min`。使用示例如下所示: + +```js +rules: { + users: { min: 2, message: '长度必须不小于2' } +} +``` + +#### max + +对于 string 和 array 类型,将对长度进行比较,对于 number 类型,数字不能大于 `max`。使用示例如下所示: + +```js +rules: { + users: { max: 11, message: '长度必须不大于11' } +} +``` + +#### len + +要验证字段的确切长度,请指定 `len` 属性。对于 string 和 array 类型,将对 length 属性进行比较。对于 number 类型,此属性表示该数字的精确匹配,即,它只能严格等于 `len`。如果 `len` 属性与 `min` 和 `max` 属性一起使用,则 `len` 优先。使用示例如下所示: + +```js +rules: { + users: { len: 2, message: '长度必须为2' } +} +``` + +#### trigger + +通过 `trigger` 配置触发校验规则的方式,为 `change` 时,当输入框值改变即触发校验,为 `blur` 时则失焦后触发校验。使用示例如下所示: + +```js +rules: { + users: { len: 2, message: '长度必须为2', trigger: 'change' } +} +``` + +可配置的值如下: + +- `blur`:则失焦后触发校验。 + +- `change`:当输入框值改变即触发校验 + +#### enum + +枚举值验证,验证字段的值是否在 `enum` 属性配置的数组 `['admin', 'user', 'guest']` 中。例如: + +```js +rules: { + role: { type: 'enum', enum: ['admin', 'user', 'guest'] } +} +``` + +#### whitespace + +验证必填字段是否只有空格。通常将只包含空白的必填字段视为错误。若要将仅由空格组成的字符串视为错误,则可设置 `whitespace` 为 `true` ,如果没有该配置,则全空格的输入值也是有效的。 + +```js +rules: { + name: { required: true, whitespace: true, message: '相对人名称不能为空' } +} +``` + +#### fields + +深层规则。如果需要验证深层对象属性,可以通过将嵌套规则分配给规则的 `fields` 属性来验证 object 或 array 类型的验证规则。请注意,如果不在父规则上指定 `required` 属性,则不在源对象上声明字段是完全有效的,并且深度验证规则将不会执行,因为没有任何可验证的对象。例如: + +- object 类型: + +```js +rules: { + address: { + type: 'object', required: true, // 父规则上必须指定 required 为 true + fields: { + street: { type: 'string', required: true }, + city: { type: 'string', required: true }, + zip: { type: 'string', required: true, len: 8, message: 'invalid zip' } + } + }, + name: { type: 'string', required: true } +} +``` + +- array 类型: + +```js +rules: { + roles: { + type: 'array', required: true, len: 3, + fields: { + 0: { type: 'string', required: true }, + 1: { type: 'string', required: true }, + 2: { type: 'string', required: true } + } + } +} +``` + +#### defaultField + +`defaultField` 属性可与 array 或 object 类型一起使用,以验证容器的所有值。它可以是包含验证规则的 object 或 array。例如: + +```js +rules: { + urls: { + type: 'array', required: true, + defaultField: { type: 'url' } + } +} +``` + +#### transform + +有时有必要在验证之前转换值,以强制或以某种方式对其进行清理。为此 `transform` ,向验证规则添加一个功能。在验证之前,先转换属性,然后将其重新分配给源对象,以更改该属性的值。使用场景比如:去除用户输入的空格。 + +```js +rules: { + name: { + type: 'string', + required: true, + pattern: /^[a-z]+$/, + transform(value) { + return value.trim(); + } + } +} +``` + +#### messages + +用于配置字段校验不成功时的提示信息,支持国际化。 + +- 实现此目的最简单的方法是将消息分配给规则 + +```js +rules: { + name: { type: 'string', required: true, message: 'Name is required' } +} +``` + +- 消息可以是任何类型,例如 jsx 格式 + +```js +rules: { + name: { type: 'string', required: true, message: 'Name is required' } +} +``` + +- 消息也可以是一个函数,例如,如果使用 vue-i18n + +```js +rules: { + name: { type: 'string', required: true, message: () => this.$t( 'name is required' ) } +} +``` + +#### validator + +通过 `validator` 选项为某个字段进行自定义校验,校验方法中 `callback` 必须被调用。 + +如下所示,先在 `methods` 对象中定义一个自定义校验的方法: + +```js +// 自定义的校验password的方法 +validatePass(rule, value, callback) { + if (!/^(?=._[a-z])(?=._[A-Z])(?=.\*\\d)[a-zA-Z\d]{8,}$/.test(value)) { + callback(new Error('最少八个字符,至少包含一个大写字母,一个小写字母和一个数字')) + } else { + callback() + } +} +``` + +然后在对应的需要校验的规则中配置 `validator: this.validatePass`: + +```js +rules: { + password: [ + { required: true, message: '必填', trigger: 'blur' }, + { validator: this.validatePass, trigger: 'blur' } + ] +} +``` + +#### asyncValidator + +通过 `asyncValidator` 选项为某个字段进行自定义异步校验,校验方法中 `callback` 必须被调用。 + +如下所示,先在 `methods` 对象中定义一个自定义的异步校验的方法: + +```js +// 自定义异步校验password的方法 +promiseField(rule, value, callback) { + ajax({ + url: 'xx', + value: value + }).then(function(data) { + callback(); + }, function(error) { + callback(new Error(error)) + }) +} +``` + +然后在对应的需要校验的规则中配置 `asyncValidator: this.promiseField`: + +```js +rules: { + password: [ + { required: true, message: '必填', trigger: 'blur' }, + { asyncValidator: this.promiseField, trigger: 'blur' } + ] +} +``` diff --git a/examples/docs/resources/mobile-first/md/form/form-validation.md b/examples/docs/resources/mobile-first/md/form/form-validation.md new file mode 100644 index 000000000..acae0bff2 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/form/form-validation.md @@ -0,0 +1,54 @@ +
+

+ +

+ +## Form 表单 + + + +由按钮、输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据。 + +
+ +### 表单校验 + +包括常用的必填、日期、时间、URL、邮件等校验规则。通过 `trigger` 配置触发校验规则的方式,为 `change` 时,当输入框值改变即触发校验,为 `blur` 时则失焦后触发校验。 + + + +:::tip 注意 + +校验时若校验类型为 `date`,则需要使用 `DatePicker` 组件进行日期选择,若使用 `Input` 组件进行日期输入,建议使用自定义校验规则。 + +::: + +### 自定义校验规则 + +通过 `validator` 选项进行自定义校验,校验方法中 `callback` 必须被调用。通过配置 `validate-on-rule-change` 属性,设置是否在 `rules` 属性改变后立即触发一次验证 + + + +### 校验提示位置 + +通过 `validate-position` 可自定义错误提示出现的位置,在 `Form` 组件上设置后,子组件`FormItem`会继承父组件设置。单独在 `FormItem` 组件上进行设置优先级高于在 `From`上的设置。 + + + +#### 校验提示跟随表单项移动 + +通过配置 `popperOptions.bubbling` 为 `true` ,可实现表单的校验提示跟随 Form 表单外部的滚动条滚动。 + + + +### 动态切换 FormItem + +:::warning +在表单中通过 `v-if` 切换两个 `FormItem` 控制页面元素时,会存在错误提示错位问题,原因时 Vue 复用了 ToolTip 组件,这时需要将 form-item 上加上 `key` 属性标识 +::: + + + +### RichText 等无校验的组件添加校验的方法 + + diff --git a/examples/docs/resources/mobile-first/md/form/form.md b/examples/docs/resources/mobile-first/md/form/form.md new file mode 100644 index 000000000..8f596039a --- /dev/null +++ b/examples/docs/resources/mobile-first/md/form/form.md @@ -0,0 +1,22 @@ +
+

+ +

+ +## Form 表单 + + + +由按钮、输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据。 + +
+ +### 常用表单 + +在 Form 组件中,每一个表单域由一个 FormItem 组件构成,表单域中可以放置各种类型的表单控件,包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker。 + + + +
+ + diff --git a/examples/docs/resources/mobile-first/md/form/formitem.md b/examples/docs/resources/mobile-first/md/form/formitem.md new file mode 100644 index 000000000..c2998cc01 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/form/formitem.md @@ -0,0 +1,22 @@ +
+

+ +

+ +## FormItem 表单项 + + + +Form 组件下的 FormItem 配置。 + +
+ +### 行内表单 + +当垂直方向空间受限且表单较简单时,可以在一行内放置表单,设置 `inline` 属性可以让表单域变为行内的表单域。 + + + +
+ + diff --git a/examples/docs/resources/mobile-first/md/form/size.md b/examples/docs/resources/mobile-first/md/form/size.md new file mode 100644 index 000000000..89eec70a2 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/form/size.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## FormItem 表单项 + + + +由按钮、输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据。 + +
+ +### 表单尺寸 + +通过在 `aui-form` 标签上设置 `size` 属性可以改变表单内组件尺寸;设置 `disabled` 属性可以改变表单内组件禁用状态 + + + +
diff --git a/examples/docs/resources/mobile-first/md/form/slot-label.md b/examples/docs/resources/mobile-first/md/form/slot-label.md new file mode 100644 index 000000000..0d31fa78c --- /dev/null +++ b/examples/docs/resources/mobile-first/md/form/slot-label.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## FormItem 表单项 + + + +由按钮、输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据。 + +
+ +### 标签文本插槽 + +通过在 `label` 插槽,自定义标签文本的内容 + + + +
diff --git a/examples/docs/resources/mobile-first/md/form/validate-debounce.md b/examples/docs/resources/mobile-first/md/form/validate-debounce.md new file mode 100644 index 000000000..26fb69a0e --- /dev/null +++ b/examples/docs/resources/mobile-first/md/form/validate-debounce.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## Form 表单 + + + +由按钮、输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据。 + +
+ +### 防抖处理 + +设置 FormItem 的属性 `validate-debounce` 为 `true`,可以开启校验防抖,在连续输入的情况下,会在最后一次输入结束时才开始校验。默认为 `false` 不开启。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/form/validate-type.md b/examples/docs/resources/mobile-first/md/form/validate-type.md new file mode 100644 index 000000000..fc0eb0444 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/form/validate-type.md @@ -0,0 +1,17 @@ +
+

+ +

+ +## Form 表单 + + + +由按钮、输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据。 +
+ +### 校验提示的形式 + +通过 `validate-type` 可设置校验提示信息是以 `text` 文本显示还是以 `tip` 提示框的形式显示,默认为 `tip` 。也可直接配置在某一个 `` 上控制某一项的校验提示形式。 + + diff --git a/examples/docs/resources/mobile-first/md/grid/grid-basic-usage.md b/examples/docs/resources/mobile-first/md/grid/grid-basic-usage.md new file mode 100644 index 000000000..a4a40aeae --- /dev/null +++ b/examples/docs/resources/mobile-first/md/grid/grid-basic-usage.md @@ -0,0 +1,40 @@ +
+

+ +

+ +## Grid 表格 + + + +表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。 + +
+ +### 标签式 + + + +### 列锚点 + + + +### 操作列 + + + +### 表格属性说明 + + + +
+ +### 表格列属性说明 + + + +
+ +### 表格工具栏说明 + + diff --git a/examples/docs/resources/mobile-first/md/grid/grid-mf.md b/examples/docs/resources/mobile-first/md/grid/grid-mf.md new file mode 100644 index 000000000..a4539637f --- /dev/null +++ b/examples/docs/resources/mobile-first/md/grid/grid-mf.md @@ -0,0 +1,40 @@ +
+

+ +

+ +## Grid 表格 + + + +表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。 + +
+ +### 标签式 + + + +### 列锚点 + + + +### 操作列 + + + +### 表格属性说明 + + + +
+ +### 表格列属性说明 + + + +
+ +### 表格工具栏说明 + + \ No newline at end of file diff --git a/examples/docs/resources/mobile-first/md/image/auto-fit-container-size.md b/examples/docs/resources/mobile-first/md/image/auto-fit-container-size.md new file mode 100644 index 000000000..5bed7fff8 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/image/auto-fit-container-size.md @@ -0,0 +1,27 @@ +
+

+ +

+ +## Image 图片预览 + + + +图片容器,在保留原生 img 的特性下,支持懒加载,自定义占位、加载失败等功能。 + +
+
+ +### 自适应容器尺寸 + +可通过 `fit` 属性确定图片如何适应到容器框,同原生 css 的 object-fit 属性。 + +:::tip object-fit 说明 +fill:被替换的内容将被缩放,以在填充元素的内容框时保持其宽高比 +contain:被替换的内容大小可以填充元素的内容框 +cover:被替换的内容大小保持其宽高比,同时填充元素的整个内容框 +none:被替换的内容尺寸不会被改变 +scale-down:内容的尺寸就像是指定了 none 或 contain,取决于哪一个将导致更小的对象尺寸。 +::: + + diff --git a/examples/docs/resources/mobile-first/md/image/basic-usage.md b/examples/docs/resources/mobile-first/md/image/basic-usage.md new file mode 100644 index 000000000..89a1546b7 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/image/basic-usage.md @@ -0,0 +1,23 @@ +
+

+ +

+ +## Image 图片预览 + + + +图片容器,在保留原生 img 的特性下,支持懒加载,自定义占位、加载失败等功能。 + +
+
+ +### 基本用法 + +通过 `image-size` 设置预览的图片尺寸大小,通过`round`设置是否展示圆形。 + + + +
+ + diff --git a/examples/docs/resources/mobile-first/md/image/image-mf.md b/examples/docs/resources/mobile-first/md/image/image-mf.md new file mode 100644 index 000000000..a14b78b4d --- /dev/null +++ b/examples/docs/resources/mobile-first/md/image/image-mf.md @@ -0,0 +1,51 @@ +
+

+ +

+ +## Image 图片预览 + + + +图片容器,在保留原生 img 的特性下,支持懒加载,自定义占位、加载失败等功能。 + +
+
+ +### 基本用法 + +通过 `src` 设置预览的图片路径。 + + + +
+ +### 自适应容器尺寸 + +可通过 `fit` 属性确定图片如何适应到容器框,同原生 css 的 object-fit 属性。 + +:::tip object-fit 说明 +fill:被替换的内容将被缩放,以在填充元素的内容框时保持其宽高比 +contain:被替换的内容大小可以填充元素的内容框 +cover:被替换的内容大小保持其宽高比,同时填充元素的整个内容框 +none:被替换的内容尺寸不会被改变 +scale-down:内容的尺寸就像是指定了 none 或 contain,取决于哪一个将导致更小的对象尺寸。 +::: + +
+ + ### 预览大图 + +通过 `preview-src-list` 开启预览大图的功能,通过添加`show-index`开启图片序列号展示。 + + + +
+ +### 悬浮效果 + +通过 `show-hover` 设置预览的图片的悬浮效果。 + + + +
\ No newline at end of file diff --git a/examples/docs/resources/mobile-first/md/image/preview-src-list.md b/examples/docs/resources/mobile-first/md/image/preview-src-list.md new file mode 100644 index 000000000..bff71a3b1 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/image/preview-src-list.md @@ -0,0 +1,21 @@ +
+

+ +

+ +## Image 图片预览 + + + +图片容器,在保留原生 img 的特性下,支持懒加载,自定义占位、加载失败等功能。 + +
+
+ +### 预览大图 + +通过 `preview-src-list` 开启预览大图的功能,通过添加`show-index`开启图片序列号展示。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/image/show-hover.md b/examples/docs/resources/mobile-first/md/image/show-hover.md new file mode 100644 index 000000000..70c7c78e7 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/image/show-hover.md @@ -0,0 +1,23 @@ +
+

+ +

+ +## Image 图片预览 + + + +图片容器,在保留原生 img 的特性下,支持懒加载,自定义占位、加载失败等功能。 + +
+
+ +### 基本用法 + +通过 `show-hover` 设置预览的图片的悬浮效果。 + + + +
+ + diff --git a/examples/docs/resources/mobile-first/md/input/autofocus.md b/examples/docs/resources/mobile-first/md/input/autofocus.md new file mode 100644 index 000000000..026002e6f --- /dev/null +++ b/examples/docs/resources/mobile-first/md/input/autofocus.md @@ -0,0 +1,28 @@ +
+

+ +

+ +## Input 输入框 + + + +通过鼠标或键盘输入字符。 + +
+ +### 自动获取焦点 + +可通过 `autofocus` 属性设置自动获取焦点。`autofocus` 是原生属性。 + + + +
+ +### 自动补全 + +可通过 `autocomplete` 属性设置自动补全,默认值为 off ,可选 on 。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/input/autosize-textarea.md b/examples/docs/resources/mobile-first/md/input/autosize-textarea.md new file mode 100644 index 000000000..795b0c712 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/input/autosize-textarea.md @@ -0,0 +1,28 @@ +
+

+ +

+ +## Input 输入框 + + + +通过鼠标或键盘输入字符。 + +
+ +### 可自适应文本高度的文本域 + +可通过 `autosize` 属性设置文本域自适应内容高度。可传入对象,如`{ minRows: 2, maxRows: 6 }`。注意:只对 `type="textarea"` 有效。 + + + +
+ +### 输入框的 tabindex + +可通过 `tabindex` 属性设置输入框的 tabindex + + + +
diff --git a/examples/docs/resources/mobile-first/md/input/basic-usage.md b/examples/docs/resources/mobile-first/md/input/basic-usage.md new file mode 100644 index 000000000..1811dd7e1 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/input/basic-usage.md @@ -0,0 +1,19 @@ +
+

+ +

+ +## Input 输入框 + + + +通过鼠标或键盘输入字符。 +
+ +### 基本用法 + + + +
+ + diff --git a/examples/docs/resources/mobile-first/md/input/clearable.md b/examples/docs/resources/mobile-first/md/input/clearable.md new file mode 100644 index 000000000..b52dc6a3d --- /dev/null +++ b/examples/docs/resources/mobile-first/md/input/clearable.md @@ -0,0 +1,19 @@ +
+

+ +

+ +## Input 输入框 + + + +通过鼠标或键盘输入字符。 +
+ +### 可清空 + +可通过 `clearable` 属性设置输入框显示清空图标按钮。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/input/complicated-input.md b/examples/docs/resources/mobile-first/md/input/complicated-input.md new file mode 100644 index 000000000..aa492e571 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/input/complicated-input.md @@ -0,0 +1,44 @@ +
+

+ +

+ +## Input 输入框 + + + +通过鼠标或键盘输入字符。 + +
+ +### 前置内容 + +配置 `prepend` slot,设置输入框前置内容,注意:只对 `type="text"` 有效。 + + + +
+ +### 后置内容 + +配置 `append` slot,设置输入框后置内容,注意:只对 `type="text"` 有效。 + + + +
+ +### 头部内容 + +配置 `prefix` slot,设置输入框头部内容,注意:只对 `type="text"` 有效。 + + + +
+ +### 尾部内容 + +配置 `suffix` slot,设置输入框尾部内容,注意:只对 `type="text"` 有效。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/input/counter.md b/examples/docs/resources/mobile-first/md/input/counter.md new file mode 100644 index 000000000..ceb0b5926 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/input/counter.md @@ -0,0 +1,19 @@ +
+

+ +

+ +## Input 输入框 + + + +通过鼠标或键盘输入字符。 +
+ +### 计数器 + +可通过 `counter` 属性设置显示输入框字符计数器。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/input/custom-prefix-suffix-icon.md b/examples/docs/resources/mobile-first/md/input/custom-prefix-suffix-icon.md new file mode 100644 index 000000000..5aff35804 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/input/custom-prefix-suffix-icon.md @@ -0,0 +1,43 @@ +
+

+ +

+ +## Input 输入框 + + + +通过鼠标或键盘输入字符。 +
+ +### 头部图标 + +可通过 `prefix-icon` 属性设置输入框头部图标。 + + + +
+ +### 尾部图标 + +可通过 `suffix-icon` 属性设置输入框尾部图标。 + + + +
+ +### 可通过 slot="prefix" 设置头部图标 + +可通过 `slot="prefix"` 设置输入框头部图标。 + + + +
+ +### 可通过 slot="suffix" 设置尾部图标 + +可通过 `slot="suffix"` 设置输入框尾部图标。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/input/disabled-readonly.md b/examples/docs/resources/mobile-first/md/input/disabled-readonly.md new file mode 100644 index 000000000..924347b60 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/input/disabled-readonly.md @@ -0,0 +1,32 @@ +
+

+ +

+ +## Input 输入框 + + + +通过鼠标或键盘输入字符。 +
+ +### 禁用 + +可通过 `disabled` 属性设置禁用输入框。`disabled` 是原生属性。 + + + +
+ +### 只读 + +可通过 `readonly` 属性设置输入框只读。`readonly` 是原生属性。 + + + +
+ +:::warning 配置`readonly`属性后,在 IE 下输入框仍然有光标闪烁问题 +配置 `readonly` 属性后,在 IE 下输入框仍然有光标闪烁问题,可在输入框配置`unselectable="on"`解决,但存在如下缺陷,请根据需求慎重修改。 +在 IE 浏览器下屏蔽了 input 的 blur 事件,若用到 blur 事件,请用 click 事件来代替。 +::: diff --git a/examples/docs/resources/mobile-first/md/input/input-events.md b/examples/docs/resources/mobile-first/md/input/input-events.md new file mode 100644 index 000000000..5ba13942a --- /dev/null +++ b/examples/docs/resources/mobile-first/md/input/input-events.md @@ -0,0 +1,43 @@ +
+

+ +

+ +## Input 输入框 + + + +通过鼠标或键盘输入字符。 +
+ +### 失焦事件 + +输入框失去焦点时触发 `blur` 事件。 + + + +
+ +### 值改变事件 + +输入框值改变时触发 `change` 事件。 + + + +
+ +### 清除事件 + +点击输入框清除按钮时触发 `clear` 事件。 + + + +
+ +### 聚焦事件 + +输入框获取焦点时触发 `focus` 事件。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/input/input-methods.md b/examples/docs/resources/mobile-first/md/input/input-methods.md new file mode 100644 index 000000000..f7851711d --- /dev/null +++ b/examples/docs/resources/mobile-first/md/input/input-methods.md @@ -0,0 +1,35 @@ +
+

+ +

+ +## Input 输入框 + + + +通过鼠标或键盘输入字符。 +
+ +### 记忆历史输入 + + + +
+ +### 失去焦点 + + + +
+ +### 获取焦点 + + + +
+ +### 选中输入框文本 + + + +
diff --git a/examples/docs/resources/mobile-first/md/input/input-mf.md b/examples/docs/resources/mobile-first/md/input/input-mf.md new file mode 100644 index 000000000..7e8d78799 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/input/input-mf.md @@ -0,0 +1,120 @@ +
+

+ +

+ +## Input 输入框 + + + +通过鼠标或键盘输入字符。 + +
+ +### 基本用法 + + + +### 可清空 + +可通过 `clearable` 属性设置输入框显示清空图标按钮。 + + + +
+ +### 密码显示 + +当 `type` 为 `password` 时,可通过 `show-password` 属性设置输入框显示密码显示/隐藏切换图标按钮。 + + + +
+ +### type 属性 + +通对应的 type 属性,可以设置为对应的类型。默认为 text,可选值为 text,textarea 和其他 原生 input 的 type 值 + + + +
+ +### 尺寸 + +可通过 `size` 属性设置尺寸大小,可选值:`medium / small / mini`。注意:只在 `type!="textarea"` 时有效。 + + + +
+ +### 前置内容 + +配置 `prepend` slot,设置输入框前置内容,注意:只对 `type="text"` 有效。 + + + +
+ +### 后置内容 + +配置 `append` slot,设置输入框后置内容,注意:只对 `type="text"` 有效。 + + + +
+ +### 头部内容 + +配置 `prefix` slot,设置输入框头部内容,注意:只对 `type="text"` 有效。 + + + +
+ +### 尾部内容 + +配置 `suffix` slot,设置输入框尾部内容,注意:只对 `type="text"` 有效。 + + + +
+ +### 输入时触发表单校验 + +可通过 `validate-event` 属性设置输入时触发表单校验。通过 `trigger` 配置触发校验规则的方式,为 `change` 时,当输入框值改变即触发校验,为 `blur` 时则失焦后触发校验。 + + + +
+ +### 失焦事件 + +输入框失去焦点时触发 `blur` 事件。 + + + +
+ +### 值改变事件 + +输入框值改变时触发 `change` 事件。 + + + +
+ +### 清除事件 + +点击输入框清除按钮时触发 `clear` 事件。 + + + +
+ +### 聚焦事件 + +输入框获取焦点时触发 `focus` 事件。 + + + +
\ No newline at end of file diff --git a/examples/docs/resources/mobile-first/md/input/input-size.md b/examples/docs/resources/mobile-first/md/input/input-size.md new file mode 100644 index 000000000..25aa6e098 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/input/input-size.md @@ -0,0 +1,44 @@ +
+

+ +

+ +## Input 输入框 + + + +通过鼠标或键盘输入字符。 + +
+ +### 尺寸 + +可通过 `size` 属性设置尺寸大小,可选值:`medium / small / mini`。注意:只在 `type!="textarea"` 时有效。 + + + +
+ +### form + +可通过 `form` 属性设置原生属性 form 。 + + + +
+ +### name + +可通过 `name` 原生属性。 + + + +
+ +### 输入框关联文字 + +可通过 `label` 属性设置输入框关联的 label 文字。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/input/max-min-length.md b/examples/docs/resources/mobile-first/md/input/max-min-length.md new file mode 100644 index 000000000..7eac2fdd3 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/input/max-min-length.md @@ -0,0 +1,28 @@ +
+

+ +

+ +## Input 输入框 + + + +通过鼠标或键盘输入字符。 + +
+ +### 最大输入长度 + +可通过 `maxlength` 属性设置输入框最大输入长度。`maxlength` 是原生属性。 + + + +
+ +### 输入字数统计 + +可通过 `show-word-limit` 属性设置是否显示输入字数统计,只在 type = "text" 或 type = "textarea" 时有效 + + + +
diff --git a/examples/docs/resources/mobile-first/md/input/max-min.md b/examples/docs/resources/mobile-first/md/input/max-min.md new file mode 100644 index 000000000..6888a60d2 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/input/max-min.md @@ -0,0 +1,27 @@ +
+

+ +

+ +## Input 输入框 + + + +通过鼠标或键盘输入字符。 +
+ +### 最大值 + +可通过 `max` 属性设置输入框最大值。`max` 是原生属性。 + + + +
+ +### 最小值 + +可通过 `min` 属性设置输入框最小值。`min` 是原生属性。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/input/placeholder.md b/examples/docs/resources/mobile-first/md/input/placeholder.md new file mode 100644 index 000000000..770535bda --- /dev/null +++ b/examples/docs/resources/mobile-first/md/input/placeholder.md @@ -0,0 +1,19 @@ +
+

+ +

+ +## Input 输入框 + + + +通过鼠标或键盘输入字符。 +
+ +### 占位文本 + +可通过 `placeholder` 属性设置自定义输入框的占位文本内容。`placeholder` 是原生属性。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/input/resize-textarea.md b/examples/docs/resources/mobile-first/md/input/resize-textarea.md new file mode 100644 index 000000000..9d8d5842f --- /dev/null +++ b/examples/docs/resources/mobile-first/md/input/resize-textarea.md @@ -0,0 +1,19 @@ +
+

+ +

+ +## Input 输入框 + + + +通过鼠标或键盘输入字符。 +
+ +### 可缩放文本域 + +可通过 `resize` 属性设置文本域的缩放。可选值:`none / both / horizontal / vertical`。注意:只在 `type="textarea"` 时有效。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/input/show-password.md b/examples/docs/resources/mobile-first/md/input/show-password.md new file mode 100644 index 000000000..948f51bfc --- /dev/null +++ b/examples/docs/resources/mobile-first/md/input/show-password.md @@ -0,0 +1,28 @@ +
+

+ +

+ +## Input 输入框 + + + +通过鼠标或键盘输入字符。 + +
+ +### 密码显示 + +当 `type` 为 `password` 时,可通过 `show-password` 属性设置输入框显示密码显示/隐藏切换图标按钮。 + + + +
+ +### type 属性 + +通对应的 type 属性,可以设置为对应的类型。默认为 text,可选值为 text,textarea 和其他 原生 input 的 type 值 + + + +
diff --git a/examples/docs/resources/mobile-first/md/input/step.md b/examples/docs/resources/mobile-first/md/input/step.md new file mode 100644 index 000000000..199099a24 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/input/step.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## Input 输入框 + + + +通过鼠标或键盘输入字符。 + +
+ +### 输入字段的合法数字间隔 + +可通过 `step` 属性设置输入字段的合法数字间隔。`step` 是原生属性。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/input/textarea-limit-rows.md b/examples/docs/resources/mobile-first/md/input/textarea-limit-rows.md new file mode 100644 index 000000000..9e59cee8f --- /dev/null +++ b/examples/docs/resources/mobile-first/md/input/textarea-limit-rows.md @@ -0,0 +1,28 @@ +
+

+ +

+ +## Input 输入框 + + + +通过鼠标或键盘输入字符。 + +
+ +### 文本域行数 + +可通过 `rows` 属性设置文本域显示行数。注意:只在 `text="textarea"` 时有效。 + + + +
+ +### 文本域宽度 + +可通过 `cols` 属性设置文本域显示宽度。注意:只在 `text="textarea"` 时有效。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/input/validate-event.md b/examples/docs/resources/mobile-first/md/input/validate-event.md new file mode 100644 index 000000000..7af3d8059 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/input/validate-event.md @@ -0,0 +1,19 @@ +
+

+ +

+ +## Input 输入框 + + + +通过鼠标或键盘输入字符。 +
+ +### 输入时触发表单校验 + +可通过 `validate-event` 属性设置输入时触发表单校验。通过 `trigger` 配置触发校验规则的方式,为 `change` 时,当输入框值改变即触发校验,为 `blur` 时则失焦后触发校验。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/loading/basic-usage.md b/examples/docs/resources/mobile-first/md/loading/basic-usage.md new file mode 100644 index 000000000..842a93044 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/loading/basic-usage.md @@ -0,0 +1,23 @@ +
+

+ +

+ +## Loading 加载 + + + +加载数据时显示的动画效果。 + +
+
+ +### 基本用法 + +通过静态方法 `Loading.service` 在指定 `target` 上设置加载。 + + + +
+ + diff --git a/examples/docs/resources/mobile-first/md/loading/body-lock.md b/examples/docs/resources/mobile-first/md/loading/body-lock.md new file mode 100644 index 000000000..dfc4a39d6 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/loading/body-lock.md @@ -0,0 +1,19 @@ +
+

+ +

+ +## Loading 加载 + + + +加载数据时显示的动画效果。 + +
+
+ +### 修饰符 + + + +
diff --git a/examples/docs/resources/mobile-first/md/loading/custom-background.md b/examples/docs/resources/mobile-first/md/loading/custom-background.md new file mode 100644 index 000000000..583c711f2 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/loading/custom-background.md @@ -0,0 +1,21 @@ +
+

+ +

+ +## Loading 加载 + + + +加载数据时显示的动画效果。 + +
+
+ +### 自定义遮罩背景色 + +通过 `background` 自定义背景颜色和透明度。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/loading/custom-class.md b/examples/docs/resources/mobile-first/md/loading/custom-class.md new file mode 100644 index 000000000..fb61e9764 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/loading/custom-class.md @@ -0,0 +1,21 @@ +
+

+ +

+ +## Loading 加载 + + + +加载数据时显示的动画效果。 + +
+
+ +### 自定义样式 + +通过 `customClass` 指定类名进行样式修改。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/loading/custom-loading-target.md b/examples/docs/resources/mobile-first/md/loading/custom-loading-target.md new file mode 100644 index 000000000..20e1be5e0 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/loading/custom-loading-target.md @@ -0,0 +1,21 @@ +
+

+ +

+ +## Loading 加载 + + + +加载数据时显示的动画效果。 + +
+
+ +### 区域加载 + +通过 `target` 指定 Loading 需要覆盖的 DOM 节点。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/loading/custom-spinner.md b/examples/docs/resources/mobile-first/md/loading/custom-spinner.md new file mode 100644 index 000000000..3b98bea52 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/loading/custom-spinner.md @@ -0,0 +1,21 @@ +
+

+ +

+ +## Loading 加载 + + + +加载数据时显示的动画效果。 + +
+
+ +### 自定义加载图标 + +通过 `spinner` 自定义加载图标。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/loading/fullscreen-loading.md b/examples/docs/resources/mobile-first/md/loading/fullscreen-loading.md new file mode 100644 index 000000000..9dcdd34a1 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/loading/fullscreen-loading.md @@ -0,0 +1,23 @@ +
+

+ +

+ +## Loading 加载 + + + +加载数据时显示的动画效果。 + +
+
+ +### 全局加载 + +通过 `v-loading.lock.fullscreen` 指令方式或者服务方式进行全局加载,如需使用指令方式全局加载需要如下操作: +在 `Vue 2` 版本环境中添加 `Vue.use(Loading)` +在 `Vue 3` 版本环境中添加 `app.use(Loading)` + + + +
diff --git a/examples/docs/resources/mobile-first/md/loading/loading-size.md b/examples/docs/resources/mobile-first/md/loading/loading-size.md new file mode 100644 index 000000000..af3acff51 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/loading/loading-size.md @@ -0,0 +1,21 @@ +
+

+ +

+ +## Loading 加载 + + + +加载数据时显示的动画效果。 + +
+
+ +### 尺寸 + +通过在 `Loading.service` 中设置 `size` 属性加载不同的大小尺寸,包括 large、medium、small、mini 四种不同大小。不设置时为默认尺寸。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/loading/loading-tip-text.md b/examples/docs/resources/mobile-first/md/loading/loading-tip-text.md new file mode 100644 index 000000000..7637851ca --- /dev/null +++ b/examples/docs/resources/mobile-first/md/loading/loading-tip-text.md @@ -0,0 +1,21 @@ +
+

+ +

+ +## Loading 加载 + + + +加载数据时显示的动画效果。 + +
+
+ +### 自定义加载提示文本 + +通过 `text` 自定义加载文字的提示文本。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/message/basic-usage.md b/examples/docs/resources/mobile-first/md/message/basic-usage.md new file mode 100644 index 000000000..693f70ead --- /dev/null +++ b/examples/docs/resources/mobile-first/md/message/basic-usage.md @@ -0,0 +1,19 @@ +
+

+ +

+ +## Message 提示框 + + +
+ +### 基本用法 + +可通过 `this.$message` 弹出信息提示框。 + + + +
+ + diff --git a/examples/docs/resources/mobile-first/md/message/message-duration.md b/examples/docs/resources/mobile-first/md/message/message-duration.md new file mode 100644 index 000000000..3a2e7dd86 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/message/message-duration.md @@ -0,0 +1,17 @@ +
+

+ +

+ +## Message 提示框 + + +
+ +### 自动关闭延时 + +可通过 `duration` 属性设置自动关闭的延迟时间,只对 type=message 有效。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/message/message-id.md b/examples/docs/resources/mobile-first/md/message/message-id.md new file mode 100644 index 000000000..8c6b4525c --- /dev/null +++ b/examples/docs/resources/mobile-first/md/message/message-id.md @@ -0,0 +1,15 @@ +
+

+ +

+ +## Message 提示框 + + +
+ +### 防止重复提示 + +如果不想窗口重复点击,可以设置唯一的 `id` 防止重复提示,只对 type=message 有效。 + + diff --git a/examples/docs/resources/mobile-first/md/message/message-mf.md b/examples/docs/resources/mobile-first/md/message/message-mf.md new file mode 100644 index 000000000..24077dad5 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/message/message-mf.md @@ -0,0 +1,36 @@ +
+

+ +

+ +## 提示条 Message + + +
+ +### 基本用法 + +可通过 `this.$message` 弹出信息提示框。 + + + +### 自动关闭延时 + +可通过 `duration` 属性设置自动关闭的延迟时间,只对 type=message 有效。 + + + +### 防止重复提示 + +如果不想窗口重复点击,可以设置唯一的 `id` 防止重复提示,只对 type=message 有效。 + + + +### 消息状态 + +可通过 `status` 属性设置消息状态,可选值有 `info | success | warning | error | loading`。 +可通过 `isclose` 属性设置关闭事件,可选值有 `ture | false`。 + + + +
\ No newline at end of file diff --git a/examples/docs/resources/mobile-first/md/message/message-status.md b/examples/docs/resources/mobile-first/md/message/message-status.md new file mode 100644 index 000000000..6adf5fb4a --- /dev/null +++ b/examples/docs/resources/mobile-first/md/message/message-status.md @@ -0,0 +1,19 @@ +
+

+ +

+ +## Message 提示框 + + + +
+ +### 消息状态 + +可通过 `status` 属性设置消息状态,可选值有 `info | success | warning | error `。 +可通过 `showClose` 属性控制弹窗是否显示关闭图标,可选值有 `ture | false`。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/modal/basic-usage.md b/examples/docs/resources/mobile-first/md/modal/basic-usage.md new file mode 100644 index 000000000..60cea6a23 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/modal/basic-usage.md @@ -0,0 +1,28 @@ +
+

+ +

+ +## Modal 模态框 + + + +
+ +### 基本用法 + +可通过 `Modal.alert` 方法设置弹出框,通过 `Modal.confirm` 方法设置确认弹出框。 + + + +
+ + + +可在 `Modal.alert` 方法里通过添加 `confirmContent` 属性设置确定按钮内容,通过 `cancelContent` 属性设置取消按钮内容。 + + + +
+ + diff --git a/examples/docs/resources/mobile-first/md/modal/before-close.md b/examples/docs/resources/mobile-first/md/modal/before-close.md new file mode 100644 index 000000000..869d11f0b --- /dev/null +++ b/examples/docs/resources/mobile-first/md/modal/before-close.md @@ -0,0 +1,31 @@ +
+

+ +

+ +## Modal 模态框 + + + +
+ +### 拦截弹窗关闭 + +通过 `before-close` 属性可以配置一个拦截弹窗关闭的方法。如果方法返回 false 值,则拦截弹窗关闭;否则不拦截 +:::tip +可以通过该拦截方法传入的参数获取关闭的操作类型 +confirm 弹窗有以下关闭类型: + +- confirm:点击确认时关闭 +- cancel:点击取消时关闭 +- close:点击关闭按钮时关闭 +- mask: 点击遮罩时关闭 +- esc:通过按钮 esc 时关闭 + +alert 弹窗比 confirm 弹窗少了 `confirm` 类型 +message 弹窗只有 `show` 一种关闭类型 +::: + + + +
diff --git a/examples/docs/resources/mobile-first/md/modal/modal-duration.md b/examples/docs/resources/mobile-first/md/modal/modal-duration.md new file mode 100644 index 000000000..2a9fa2683 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/modal/modal-duration.md @@ -0,0 +1,17 @@ +
+

+ +

+ +## Modal 模态框 + + +
+ +### 自动关闭延时 + +可通过 `duration` 属性设置自动关闭的延迟时间,只对 type=message 有效。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/modal/modal-esc-closable.md b/examples/docs/resources/mobile-first/md/modal/modal-esc-closable.md new file mode 100644 index 000000000..8b2db43dd --- /dev/null +++ b/examples/docs/resources/mobile-first/md/modal/modal-esc-closable.md @@ -0,0 +1,17 @@ +
+

+ +

+ +## Modal 模态框 + + +
+ +### 按 Esc 键关闭弹出框 + +可通过 `esc-closable` 属性设置是否允许按 Esc 键关闭窗口,默认为 `false`。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/modal/modal-event.md b/examples/docs/resources/mobile-first/md/modal/modal-event.md new file mode 100644 index 000000000..7166699ae --- /dev/null +++ b/examples/docs/resources/mobile-first/md/modal/modal-event.md @@ -0,0 +1,57 @@ +
+

+ +

+ +## Modal 模态框 + + +
+ +### 取消按钮事件 + +点击取消按钮时触发 `cancel` 事件。 + + + +
+ +### 关闭按钮事件 + +点击关闭按钮时会触发 `close` 事件。 + + + +
+ +### 确定按钮事件 + +点击确定按钮时会触发 `confirm` 事件。 + + + +
+ +### 窗口关闭事件 + +窗口关闭时会触发 `hide` 事件。 + + + +
+ +### 窗口显示事件 + +在窗口显示时会触发 `show` 事件。 + + + +
+ +### 窗口缩放事件 + +窗口缩放时会触发 `zoom` 事件。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/modal/modal-fullscreen.md b/examples/docs/resources/mobile-first/md/modal/modal-fullscreen.md new file mode 100644 index 000000000..2c2222516 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/modal/modal-fullscreen.md @@ -0,0 +1,17 @@ +
+

+ +

+ +## Modal 模态框 + + +
+ +### 最大化显示 + +可通过 `fullscreen` 属性设置是否最大化显示。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/modal/modal-id.md b/examples/docs/resources/mobile-first/md/modal/modal-id.md new file mode 100644 index 000000000..d228ea1c9 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/modal/modal-id.md @@ -0,0 +1,17 @@ +
+

+ +

+ +## Modal 模态框 + + +
+ +### 防止重复提示 + +如果不想窗口重复点击,可以设置唯一的 `id` 防止重复提示,只对 type=message 有效。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/modal/modal-lock-scroll.md b/examples/docs/resources/mobile-first/md/modal/modal-lock-scroll.md new file mode 100644 index 000000000..0785b5685 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/modal/modal-lock-scroll.md @@ -0,0 +1,17 @@ +
+

+ +

+ +## Modal 模态框 + + +
+ +### 锁住滚动条 + +可通过 `lock-scroll` 属性设置是否锁住滚动条,不允许页面滚动。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/modal/modal-lock-view.md b/examples/docs/resources/mobile-first/md/modal/modal-lock-view.md new file mode 100644 index 000000000..0b4cb536e --- /dev/null +++ b/examples/docs/resources/mobile-first/md/modal/modal-lock-view.md @@ -0,0 +1,17 @@ +
+

+ +

+ +## Modal 模态框 + + +
+ +### 锁住页面 + +可通过 `lock-view` 属性设置是否锁住页面,不允许窗口之外的任何操作。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/modal/modal-mask-closable.md b/examples/docs/resources/mobile-first/md/modal/modal-mask-closable.md new file mode 100644 index 000000000..d0b65d130 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/modal/modal-mask-closable.md @@ -0,0 +1,17 @@ +
+

+ +

+ +## Modal 模态框 + + +
+ +### 点击遮罩层关闭窗口 + +可通过 `mask-closable` 属性设置是否允许点击遮罩层关闭窗口。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/modal/modal-mask.md b/examples/docs/resources/mobile-first/md/modal/modal-mask.md new file mode 100644 index 000000000..7ef623a69 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/modal/modal-mask.md @@ -0,0 +1,17 @@ +
+

+ +

+ +## Modal 模态框 + + +
+ +### 显示遮罩层 + +可通过 `mask` 属性设置是否显示遮罩层,默认为 `true`。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/modal/modal-message.md b/examples/docs/resources/mobile-first/md/modal/modal-message.md new file mode 100644 index 000000000..c083aedb4 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/modal/modal-message.md @@ -0,0 +1,18 @@ +
+

+ +

+ +## Modal 模态框 + + + +
+ +### 自定义内容 + +可通过 `message` 属性设置窗口的内容。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/modal/modal-mf.md b/examples/docs/resources/mobile-first/md/modal/modal-mf.md new file mode 100644 index 000000000..900c874a5 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/modal/modal-mf.md @@ -0,0 +1,217 @@ +
+

+ +

+ +## 反馈对话框 Feedback Dialog + + + +
+ +### 基本用法 + +可通过 `Modal.alert` 方法设置弹出框,通过 `Modal.confirm` 方法设置确认弹出框。 + + + +
+ + +可在 `Modal.alert` 方法里通过添加 `confirmContent` 属性设置确定按钮内容,通过 `cancelContent` 属性设置取消按钮内容。 + + + +### 最大化显示 + +可通过 `fullscreen` 属性设置是否最大化显示。 + + + +### 按 Esc 键关闭弹出框 + +可通过 `esc-closable` 属性设置是否允许按 Esc 键关闭窗口,默认为 `false`。 + + + +### 自动关闭延时 + +可通过 `duration` 属性设置自动关闭的延迟时间,只对 type=message 有效。 + + + +### 防止重复提示 + +如果不想窗口重复点击,可以设置唯一的 `id` 防止重复提示,只对 type=message 有效。 + + + +### 锁住滚动条 + +可通过 `lock-scroll` 属性设置是否锁住滚动条,不允许页面滚动。 + + + +### 锁住页面 + +可通过 `lock-view` 属性设置是否锁住页面,不允许窗口之外的任何操作。 + + + +### 显示遮罩层 + +可通过 `mask` 属性设置是否显示遮罩层,默认为 `true`。 + + + +### 点击遮罩层关闭窗口 + +可通过 `mask-closable` 属性设置是否允许点击遮罩层关闭窗口。 + + + +### 自定义内容 + +可通过 `message` 属性设置窗口的内容。 + + + +
+ +### 内容支持 JSX + +可通过 `message` 属性设置窗口的内容为 `JSX`。 + + + +### 不显示底部 + +可通过 `showFooter` 属性设置是否显示底部,默认为 `true`。 + + + +### 不显示头部 + +可通过 `showHeader` 属性设置是否显示头部,默认为 `true`。 + + + +### 消息状态 + +可通过 `status` 属性设置消息状态,可选值有 `info | success | warning | error | loading | 自定义组件`,`status` 可以是自定义组件。 + + + +### 标题 + +可通过 `title` 属性设置窗口的标题。 + + + +### 窗口类型 + +可通过 `type` 属性设置窗口类型,可选值 `alert | confirm | message`。 + + + +### 绑定值 + +可通过 `v-model` 属性绑定值。 + + + +### 自定义堆叠顺序 + +可通过 `zIndex` 属性设置自定义堆叠顺序(对于某些特殊场景,比如被遮挡时可能会用到)。 + + + +### 取消按钮事件 + +点击取消按钮时触发 `cancel` 事件。 + + + +
+ +### 关闭按钮事件 + +点击关闭按钮时会触发 `close` 事件。 + + + +
+ +### 确定按钮事件 + +点击确定按钮时会触发 `confirm` 事件。 + + + +
+ +### 窗口关闭事件 + +窗口关闭时会触发 `hide` 事件。 + + + +
+ +### 窗口显示事件 + +在窗口显示时会触发 `show` 事件。 + + + +
+ +### 窗口缩放事件 + +窗口缩放时会触发 `zoom` 事件。 + + + +### 默认插槽 + +可通过 `templete` 设置默认插槽。 + + + +
+ +### 底部插槽 + +可通过 `slot="footer"` 设置底部插槽。 + + + +
+ +### 嵌套 grid + +可通过插槽嵌套 grid + + + +### 拦截弹窗关闭 + +通过 `before-close` 属性可以配置一个拦截弹窗关闭的方法。如果方法返回 false 值,则拦截弹窗关闭;否则不拦截 +:::tip +可以通过该拦截方法传入的参数获取关闭的操作类型 +confirm 弹窗有以下关闭类型: +* confirm:点击确认时关闭 +* cancel:点击取消时关闭 +* close:点击关闭按钮时关闭 +* mask: 点击遮罩时关闭 +* esc:通过按钮esc时关闭 + +alert 弹窗比confirm 弹窗少了 `confirm` 类型 +message 弹窗只有 `show` 一种关闭类型 +::: + + + + +
+ diff --git a/examples/docs/resources/mobile-first/md/modal/modal-resize.md b/examples/docs/resources/mobile-first/md/modal/modal-resize.md new file mode 100644 index 000000000..3aa5b3e6c --- /dev/null +++ b/examples/docs/resources/mobile-first/md/modal/modal-resize.md @@ -0,0 +1,34 @@ +
+

+ +

+ +## Modal 模态框 + + + +
+ +### 调整窗口大小 + +可通过和`width`和`height`设置窗口的宽高,而通过 `resize` 设置是否允许拖动调整窗口大小。 + + + +
+ +### 调整窗口大小后窗口显示的最小宽度 + +配置 `resize` 可拖拽属性为 `true`后,可通过 `min-width` 属性设置拖拽后窗口的最小宽度。 + + + +
+ +### 调整窗口大小后窗口显示的最小高度 + +配置 `resize` 可拖拽属性为 `true`后,可通过 `min-height` 属性设置拖拽后窗口的最小高度。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/modal/modal-showFooter.md b/examples/docs/resources/mobile-first/md/modal/modal-showFooter.md new file mode 100644 index 000000000..a3b325338 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/modal/modal-showFooter.md @@ -0,0 +1,17 @@ +
+

+ +

+ +## Modal 模态框 + + +
+ +### 不显示底部 + +可通过 `showFooter` 属性设置是否显示底部,默认为 `true`。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/modal/modal-showHeader.md b/examples/docs/resources/mobile-first/md/modal/modal-showHeader.md new file mode 100644 index 000000000..98d18f522 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/modal/modal-showHeader.md @@ -0,0 +1,17 @@ +
+

+ +

+ +## Modal 模态框 + + +
+ +### 不显示头部 + +可通过 `showHeader` 属性设置是否显示头部,默认为 `true`。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/modal/modal-slots.md b/examples/docs/resources/mobile-first/md/modal/modal-slots.md new file mode 100644 index 000000000..eec0dfaf2 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/modal/modal-slots.md @@ -0,0 +1,34 @@ +
+

+ +

+ +## Modal 模态框 + + + +
+ +### 默认插槽 + +可通过 `templete` 设置默认插槽。 + + + +
+ +### 底部插槽 + +可通过 `slot="footer"` 设置底部插槽。 + + + +
+ +### 嵌套 grid + +可通过插槽嵌套 grid + + + +
diff --git a/examples/docs/resources/mobile-first/md/modal/modal-status.md b/examples/docs/resources/mobile-first/md/modal/modal-status.md new file mode 100644 index 000000000..bb6f2e8ad --- /dev/null +++ b/examples/docs/resources/mobile-first/md/modal/modal-status.md @@ -0,0 +1,17 @@ +
+

+ +

+ +## Modal 模态框 + + +
+ +### 消息状态 + +可通过 `status` 属性设置消息状态,可选值有 `info | success | warning | error | loading | 自定义组件`,`status` 可以是自定义组件。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/modal/modal-title.md b/examples/docs/resources/mobile-first/md/modal/modal-title.md new file mode 100644 index 000000000..5f21e97e1 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/modal/modal-title.md @@ -0,0 +1,17 @@ +
+

+ +

+ +## Modal 模态框 + + +
+ +### 标题 + +可通过 `title` 属性设置窗口的标题。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/modal/modal-type.md b/examples/docs/resources/mobile-first/md/modal/modal-type.md new file mode 100644 index 000000000..7cdcc9eec --- /dev/null +++ b/examples/docs/resources/mobile-first/md/modal/modal-type.md @@ -0,0 +1,17 @@ +
+

+ +

+ +## Modal 模态框 + + +
+ +### 窗口类型 + +可通过 `type` 属性设置窗口类型,可选值 `alert | confirm | message`。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/modal/modal-value.md b/examples/docs/resources/mobile-first/md/modal/modal-value.md new file mode 100644 index 000000000..0600ad282 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/modal/modal-value.md @@ -0,0 +1,18 @@ +
+

+ +

+ +## Modal 模态框 + + + +
+ +### 绑定值 + +可通过 `v-model` 属性绑定值。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/modal/modal-zIndex.md b/examples/docs/resources/mobile-first/md/modal/modal-zIndex.md new file mode 100644 index 000000000..8c1c00218 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/modal/modal-zIndex.md @@ -0,0 +1,17 @@ +
+

+ +

+ +## Modal 模态框 + + +
+ +### 自定义堆叠顺序 + +可通过 `zIndex` 属性设置自定义堆叠顺序(对于某些特殊场景,比如被遮挡时可能会用到)。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/numeric/about-step.md b/examples/docs/resources/mobile-first/md/numeric/about-step.md new file mode 100644 index 000000000..7f0ff8fab --- /dev/null +++ b/examples/docs/resources/mobile-first/md/numeric/about-step.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## Numeric 计数器 + + + +Numeric 计数器可用于输入数字,可自定义数值范围,步进大小。支持鼠标键盘增减。 + +
+ +### 步长 + +可通过 `step` 属性设置计数器的步长。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/numeric/basic-usage.md b/examples/docs/resources/mobile-first/md/numeric/basic-usage.md new file mode 100644 index 000000000..c956035bc --- /dev/null +++ b/examples/docs/resources/mobile-first/md/numeric/basic-usage.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## Numeric 计数器 + + + +Numeric 计数器可用于输入数字,可自定义数值范围,步进大小。支持鼠标键盘增减。 + +
+ +### 基本用法 + + + +
+ + diff --git a/examples/docs/resources/mobile-first/md/numeric/dynamic-disabled.md b/examples/docs/resources/mobile-first/md/numeric/dynamic-disabled.md new file mode 100644 index 000000000..99f6dca88 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/numeric/dynamic-disabled.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## Numeric 计数器 + + + +Numeric 计数器可用于输入数字,可自定义数值范围,步进大小。支持鼠标键盘增减。 + +
+ +### 禁用 + +通过设置 disabled 控制是否禁用计数器 + + + +
diff --git a/examples/docs/resources/mobile-first/md/numeric/max-min.md b/examples/docs/resources/mobile-first/md/numeric/max-min.md new file mode 100644 index 000000000..a1da43f4c --- /dev/null +++ b/examples/docs/resources/mobile-first/md/numeric/max-min.md @@ -0,0 +1,21 @@ +
+

+ +

+ +## Numeric 计数器 + + + +Numeric 计数器可用于输入数字,可自定义数值范围,步进大小。支持鼠标键盘增减。 + +
+ +### 数值循环 + +可通过设置 `max` 属性设置计数器允许的最大值,通过设置 `min` 属性设置计数器允许的最小值 +通过设置 `circulate` 属性设置是否循环,即数组首尾相连 + + + +
diff --git a/examples/docs/resources/mobile-first/md/numeric/numeric-events.md b/examples/docs/resources/mobile-first/md/numeric/numeric-events.md new file mode 100644 index 000000000..7500bef77 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/numeric/numeric-events.md @@ -0,0 +1,36 @@ +
+

+ +

+ +## Numeric 计数器 + + + +Numeric 计数器可用于输入数字,可自定义数值范围,步进大小。支持鼠标键盘增减。 + +
+ +### 聚焦事件 + +输入框获得焦点时触发 `focus` 事件。 + + + +
+ +### 失焦事件 + +输入框失去焦点时触发 `blur` 事件。 + + + +
+ +### 值改变事件 + +输入框值被改变时触发 `change` 事件。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/numeric/numeric-mf.md b/examples/docs/resources/mobile-first/md/numeric/numeric-mf.md new file mode 100644 index 000000000..f320f8c0f --- /dev/null +++ b/examples/docs/resources/mobile-first/md/numeric/numeric-mf.md @@ -0,0 +1,83 @@ +
+

+ +

+ +## Numeric 计数器 + + + +Numeric 计数器可用于输入数字,可自定义数值范围,步进大小。支持鼠标键盘增减。 + +
+ +### 基本用法 + + + +
+ +### 步长 + +可通过 `step` 属性设置计数器的步长。 + + + +
+ +### 禁用 + +通过设置 disabled 控制是否禁用计数器 + + + +
+ +### 数值循环 + +可通过设置 `max` 属性设置计数器允许的最大值,通过设置 `min` 属性设置计数器允许的最小值 +通过设置 `circulate` 属性设置是否循环,即数组首尾相连 + + + +
+ +### 聚焦事件 + +输入框获得焦点时触发 `focus` 事件。 + + + +
+ +### 失焦事件 + +输入框失去焦点时触发 `blur` 事件。 + + + +
+ +### 值改变事件 + +输入框值被改变时触发 `change` 事件。 + + + +
+ +### 尺寸 + +可通过 `size` 属性设置计数器尺寸。可取值 `medium`。 + + + +
+ +### 数值单位 + +可通过 `unit` 属性设置计数器的单位 + + + +
diff --git a/examples/docs/resources/mobile-first/md/numeric/numeric-size.md b/examples/docs/resources/mobile-first/md/numeric/numeric-size.md new file mode 100644 index 000000000..c717ff2d3 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/numeric/numeric-size.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## Numeric 计数器 + + + +Numeric 计数器可用于输入数字,可自定义数值范围,步进大小。支持鼠标键盘增减。 + +
+ +### 尺寸 + +可通过 `size` 属性设置计数器尺寸。可取值 `medium`。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/numeric/unit.md b/examples/docs/resources/mobile-first/md/numeric/unit.md new file mode 100644 index 000000000..53a31b913 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/numeric/unit.md @@ -0,0 +1,21 @@ +
+

+ +

+ +## Numeric 计数器 + + + +Numeric 计数器可用于输入数字,可自定义数值范围,步进大小。支持鼠标键盘增减。 + +
+ +### 数值单位 + +可通过 `unit` 属性设置计数器的单位 + + + +
+ diff --git a/examples/docs/resources/mobile-first/md/pager/basic-usage.md b/examples/docs/resources/mobile-first/md/pager/basic-usage.md new file mode 100644 index 000000000..c3e40e18e --- /dev/null +++ b/examples/docs/resources/mobile-first/md/pager/basic-usage.md @@ -0,0 +1,19 @@ +
+

+ +

+ +## Pager 分页 + + + +当数据量过多时,使用分页分解数据,常用于 Grid 和 Repeater 组件。 +
+ +### 基本用法 + + + +
+ + diff --git a/examples/docs/resources/mobile-first/md/pager/current-page.md b/examples/docs/resources/mobile-first/md/pager/current-page.md new file mode 100644 index 000000000..b420a2dd8 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/pager/current-page.md @@ -0,0 +1,19 @@ +
+

+ +

+ +## Pager 分页 + + + +当数据量过多时,使用分页分解数据,常用于 Grid 和 Repeater 组件。 +
+ +### 当前页 + +通过 `current-page` 设置初始加载页码数, 通过 `total` 设置总条数 + + + +
diff --git a/examples/docs/resources/mobile-first/md/pager/custom-layout.md b/examples/docs/resources/mobile-first/md/pager/custom-layout.md new file mode 100644 index 000000000..817af1aa8 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/pager/custom-layout.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## Pager 分页 + + + +当数据量过多时,使用分页分解数据,常用于 Grid 和 Repeater 组件。 + +
+ +### 自定义分页布局 + +`layout` 设置分页布局,通过在`layout`里调整`slot`的位置,从而调整插槽内容渲染的位置 + + + +
diff --git a/examples/docs/resources/mobile-first/md/pager/custom-next-prev-text.md b/examples/docs/resources/mobile-first/md/pager/custom-next-prev-text.md new file mode 100644 index 000000000..d39eb598d --- /dev/null +++ b/examples/docs/resources/mobile-first/md/pager/custom-next-prev-text.md @@ -0,0 +1,19 @@ +
+

+ +

+ +## Pager 分页 + + + +当数据量过多时,使用分页分解数据,常用于 Grid 和 Repeater 组件。 +
+ +### 自定义上下页按钮文本 + +`prev-text` ,`next-text` 自定义上下页按钮文本 + + + +
diff --git a/examples/docs/resources/mobile-first/md/pager/hide-on-single-page.md b/examples/docs/resources/mobile-first/md/pager/hide-on-single-page.md new file mode 100644 index 000000000..fe13e9fb9 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/pager/hide-on-single-page.md @@ -0,0 +1,19 @@ +
+

+ +

+ +## Pager 分页 + + + +当数据量过多时,使用分页分解数据,常用于 Grid 和 Repeater 组件。 +
+ +### 只有一页时隐藏分页 + +`hide-on-single-page` 只有一页时隐藏分页 + + + +
diff --git a/examples/docs/resources/mobile-first/md/pager/page-count.md b/examples/docs/resources/mobile-first/md/pager/page-count.md new file mode 100644 index 000000000..bbff93a52 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/pager/page-count.md @@ -0,0 +1,19 @@ +
+

+ +

+ +## Pager 分页 + + + +当数据量过多时,使用分页分解数据,常用于 Grid 和 Repeater 组件。 +
+ +### 总页数 + +通过 `page-count` 设置总页数 + + + +
diff --git a/examples/docs/resources/mobile-first/md/pager/page-size.md b/examples/docs/resources/mobile-first/md/pager/page-size.md new file mode 100644 index 000000000..f701abc80 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/pager/page-size.md @@ -0,0 +1,19 @@ +
+

+ +

+ +## Pager 分页 + + + +当数据量过多时,使用分页分解数据,常用于 Grid 和 Repeater 组件。 +
+ +### 每页显示数量 + +`page-sizes` 和 `page-size` 结合使用调整每页显示数量 + + + +
diff --git a/examples/docs/resources/mobile-first/md/pager/pager-append-to-body.md b/examples/docs/resources/mobile-first/md/pager/pager-append-to-body.md new file mode 100644 index 000000000..076265867 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/pager/pager-append-to-body.md @@ -0,0 +1,19 @@ +
+

+ +

+ +## Pager 分页 + + + +当数据量过多时,使用分页分解数据,常用于 Grid 和 Repeater 组件。 +
+ +### 分页下拉框显示位置 + +`popper-append-to-body` 分页下拉框元素是否追加到 body 元素节点下,默认值为 `true` 。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/pager/pager-count.md b/examples/docs/resources/mobile-first/md/pager/pager-count.md new file mode 100644 index 000000000..50507d6f2 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/pager/pager-count.md @@ -0,0 +1,19 @@ +
+

+ +

+ +## Pager 分页 + + + +当数据量过多时,使用分页分解数据,常用于 Grid 和 Repeater 组件。 +
+ +### 页码按钮数量 + +`pager-count` 设置页码数量 + + + +
diff --git a/examples/docs/resources/mobile-first/md/pager/pager-custom-total.md b/examples/docs/resources/mobile-first/md/pager/pager-custom-total.md new file mode 100644 index 000000000..5b50aa4a5 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/pager/pager-custom-total.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## Pager 分页 + + + +当数据量过多时,使用分页分解数据,常用于 Grid 和 Repeater 组件。 + +
+ +### 使用组件内置总条数显示规则 + +`custom-total` 为 true 时使用组件内置总条数显示规则:0 ~ 99999,显示具体数值;100000 ~ 999999 显示 10 万+;1000000 ~ 9999999 显示 100 万+;超过 10000000,1 千万+。默认值为 `false`,也可以传入一个字符串类型的数据显示指定内容 。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/pager/pager-events.md b/examples/docs/resources/mobile-first/md/pager/pager-events.md new file mode 100644 index 000000000..a8e0c9eb8 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/pager/pager-events.md @@ -0,0 +1,35 @@ +
+

+ +

+ +## Pager 分页 + + + +当数据量过多时,使用分页分解数据,常用于 Grid 和 Repeater 组件。 +
+ +### 分页事件 + +`size-change` 每页条数改变时触发 + +
+ +`current-change` 切换当前页码时触发 + +
+ +`prev-click` 切换至前一页时触发 + +
+ +`next-click` 切换至后一页时触发 + +
+ +`before-page-change` 切换分页前事件 + + + +
diff --git a/examples/docs/resources/mobile-first/md/pager/pager-in-grid.md b/examples/docs/resources/mobile-first/md/pager/pager-in-grid.md new file mode 100644 index 000000000..d66c7032e --- /dev/null +++ b/examples/docs/resources/mobile-first/md/pager/pager-in-grid.md @@ -0,0 +1,23 @@ +
+

+ +

+ +## Pager 分页 + + + +当数据量过多时,使用分页分解数据,常用于 Grid 和 Repeater 组件。 +
+ +### Grid 表格分页 + +Grid 表格使用分页组件 + +:::warning +该示例中的 `services/getGridMockData` 服务需要自行实现,示例模拟了远程服务返回的数据 +::: + + + +
diff --git a/examples/docs/resources/mobile-first/md/pager/pager-mf.md b/examples/docs/resources/mobile-first/md/pager/pager-mf.md new file mode 100644 index 000000000..62bcf02c7 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/pager/pager-mf.md @@ -0,0 +1,156 @@ +
+

+ +

+ +## Pager 分页 + + + +当数据量过多时,使用分页分解数据,常用于 Grid 和 Repeater 组件。 +
+ +### 基本用法 + + + +
+ +### 当前页 + +通过 `current-page` 设置初始加载页码数, 通过 `total` 设置总条数 + + + +
+ +### number 模式 + +通过 `mode="number"` 设置组件渲染模式 + + + +
+ +### fixed 模式 + +通过 `mode="fixed"` 设置组件渲染模式 + + + +
+ +### simple 模式 + +通过 `mode="simple"` 设置组件渲染模式 + + + +
+ +### complete 模式 + +通过 `mode="complete"` 设置组件渲染模式 + + + +
+ +## Pager 分页 + + + +当数据量过多时,使用分页分解数据,常用于 Grid 和 Repeater 组件。 + + +### 总页数 + +通过 `page-count` 设置总页数 + + + +
+ +### 分页事件 + +`size-change` 每页条数改变时触发 + +
+ +`current-change` 切换当前页码时触发 + +
+ +`prev-click` 切换至前一页时触发 + +
+ +`next-click` 切换至后一页时触发 + +
+ +`before-page-change` 切换分页前事件 + + + +
+ +### 分页下拉框显示位置 + +`popper-append-to-body` 分页下拉框元素是否追加到 body 元素节点下,默认值为 `true` 。 + + + +
+ +### 自定义分页布局 + +`layout` 设置分页布局,通过在`layout`里调整`slot`的位置,从而调整插槽内容渲染的位置 + + + +
+ +### 页码按钮数量 + +`pager-count` 设置页码数量 + + + +
+ +### 每页显示数量 + +`page-sizes` 和 `page-size` 结合使用调整每页显示数量 + + + +
+ +### 只有一页时隐藏分页 + +`hide-on-single-page` 只有一页时隐藏分页 + + + +
+ +### 自定义上下页按钮文本 + +`prev-text` ,`next-text` 自定义上下页按钮文本 + + + +
+ +### Grid 表格分页 + +Grid 表格使用分页组件 + +:::warning +该示例中的 `services/getGridMockData` 服务需要自行实现,示例模拟了远程服务返回的数据 +::: + + + +
\ No newline at end of file diff --git a/examples/docs/resources/mobile-first/md/pager/pager-mode.md b/examples/docs/resources/mobile-first/md/pager/pager-mode.md new file mode 100644 index 000000000..10b592213 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/pager/pager-mode.md @@ -0,0 +1,43 @@ +
+

+ +

+ +## Pager 分页 + + + +当数据量过多时,使用分页分解数据,常用于 Grid 和 Repeater 组件。 +
+ +### number 模式 + +通过 `mode="number"` 设置组件渲染模式 + + + +
+ +### fixed 模式 + +通过 `mode="fixed"` 设置组件渲染模式 + + + +
+ +### simple 模式 + +通过 `mode="simple"` 设置组件渲染模式 + + + +
+ +### complete 模式 + +通过 `mode="complete"` 设置组件渲染模式 + + + +
diff --git a/examples/docs/resources/mobile-first/md/pager/pager-show-total-loading.md b/examples/docs/resources/mobile-first/md/pager/pager-show-total-loading.md new file mode 100644 index 000000000..ce97c0453 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/pager/pager-show-total-loading.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## Pager 分页 + + + +当数据量过多时,使用分页分解数据,常用于 Grid 和 Repeater 组件。 + +
+ +### 总页数显示加载中的效果 + +`show-total-loading` 在获取总页数 total 的过程中是否显示加载中的效果,默认值为 `false` 。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/popconfirm/basic-usage.md b/examples/docs/resources/mobile-first/md/popconfirm/basic-usage.md new file mode 100644 index 000000000..8ebfa7b41 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/popconfirm/basic-usage.md @@ -0,0 +1,17 @@ +
+

+ +

+ +## Popconfirm 气泡确认框组件 + + +
+ +### 基本用法 + + + +
+ + diff --git a/examples/docs/resources/mobile-first/md/popconfirm/popconfirm-mf.md b/examples/docs/resources/mobile-first/md/popconfirm/popconfirm-mf.md new file mode 100644 index 000000000..5ac3b9908 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/popconfirm/popconfirm-mf.md @@ -0,0 +1,15 @@ +
+

+ +

+ +## Popconfirm 气泡确认框组件 + + +
+ +### 基本用法 + + + +
\ No newline at end of file diff --git a/examples/docs/resources/mobile-first/md/popover/arrow-offset.md b/examples/docs/resources/mobile-first/md/popover/arrow-offset.md new file mode 100644 index 000000000..56debfbb2 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/popover/arrow-offset.md @@ -0,0 +1,18 @@ +
+

+ +

+ +## Popover + + + +Popover 可通过对一个触发源操作触发弹出框,支持自定义弹出内容,延迟触发和渐变动画 + +
+ +### 箭头偏移 + +`arrow-offset` 在 Popover 的范围内,设置箭头的偏移量,来改变箭头的位置。 + +
diff --git a/examples/docs/resources/mobile-first/md/popover/basic-usage.md b/examples/docs/resources/mobile-first/md/popover/basic-usage.md new file mode 100644 index 000000000..fbebf71b6 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/popover/basic-usage.md @@ -0,0 +1,18 @@ +
+

+ +

+ +## Popover + + + +Popover 可通过对一个触发源操作触发弹出框,支持自定义弹出内容,延迟触发和渐变动画 + +
+ +### 基本用法 + + +
+ diff --git a/examples/docs/resources/mobile-first/md/popover/close-delay.md b/examples/docs/resources/mobile-first/md/popover/close-delay.md new file mode 100644 index 000000000..baa502f1c --- /dev/null +++ b/examples/docs/resources/mobile-first/md/popover/close-delay.md @@ -0,0 +1,19 @@ +
+

+ +

+ +## Popover + + + +Popover 可通过对一个触发源操作触发弹出框,支持自定义弹出内容,延迟触发和渐变动画 + +
+ +### 延迟隐藏 + +`close-delay` 弹出框延迟隐藏单位为毫秒(Number) + + +
diff --git a/examples/docs/resources/mobile-first/md/popover/custom-tip-text.md b/examples/docs/resources/mobile-first/md/popover/custom-tip-text.md new file mode 100644 index 000000000..9f61ffe63 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/popover/custom-tip-text.md @@ -0,0 +1,19 @@ +
+

+ +

+ +## Popover + + + +Popover 可通过对一个触发源操作触发弹出框,支持自定义弹出内容,延迟触发和渐变动画 + +
+ +### 自定义提示文本 + +`content` 设置自定义文本,也可在标签内直接嵌套默认插槽为自定义文本 + + +
diff --git a/examples/docs/resources/mobile-first/md/popover/dynamic-disable.md b/examples/docs/resources/mobile-first/md/popover/dynamic-disable.md new file mode 100644 index 000000000..7cfa6b05f --- /dev/null +++ b/examples/docs/resources/mobile-first/md/popover/dynamic-disable.md @@ -0,0 +1,18 @@ +
+

+ +

+ +## Popover + + + +Popover 可通过对一个触发源操作触发弹出框,支持自定义弹出内容,延迟触发和渐变动画 + +
+ +### 禁用 + +`disabled` 设置是否禁用弹出框。 + + diff --git a/examples/docs/resources/mobile-first/md/popover/frame-offset.md b/examples/docs/resources/mobile-first/md/popover/frame-offset.md new file mode 100644 index 000000000..f014d6fcb --- /dev/null +++ b/examples/docs/resources/mobile-first/md/popover/frame-offset.md @@ -0,0 +1,17 @@ +
+

+ +

+ +## Popover + + + +Popover 可通过对一个触发源操作触发弹出框,支持自定义弹出内容,延迟触发和渐变动画 + +
+ +### 弹出框偏移 + +`offset` 在触发源的范围内,设置弹框的偏移量,来改变弹框的位置。 + diff --git a/examples/docs/resources/mobile-first/md/popover/hidden-arrow.md b/examples/docs/resources/mobile-first/md/popover/hidden-arrow.md new file mode 100644 index 000000000..98e2e814e --- /dev/null +++ b/examples/docs/resources/mobile-first/md/popover/hidden-arrow.md @@ -0,0 +1,18 @@ +
+

+ +

+ +## Popover + + + +Popover 可通过对一个触发源操作触发弹出框,支持自定义弹出内容,延迟触发和渐变动画 + +
+ +### 隐藏提示框箭头 + +`visible-arrow` 设定是否显示提示框的箭头 + + diff --git a/examples/docs/resources/mobile-first/md/popover/open-delay.md b/examples/docs/resources/mobile-first/md/popover/open-delay.md new file mode 100644 index 000000000..927adb0f6 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/popover/open-delay.md @@ -0,0 +1,18 @@ +
+

+ +

+ +## Popover + + + +Popover 可通过对一个触发源操作触发弹出框,支持自定义弹出内容,延迟触发和渐变动画 + +
+ +### 延迟显示 + +`open-delay`,设置延迟时间 ( type:number,单位毫秒 ) + + diff --git a/examples/docs/resources/mobile-first/md/popover/popover-content.md b/examples/docs/resources/mobile-first/md/popover/popover-content.md new file mode 100644 index 000000000..d3fc512d1 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/popover/popover-content.md @@ -0,0 +1,18 @@ +
+

+ +

+ +## Popover + + + +Popover 可通过对一个触发源操作触发弹出框,支持自定义弹出内容,延迟触发和渐变动画 + +
+ +### 添加内容 + +`content` 设置要显示的内容。 + + diff --git a/examples/docs/resources/mobile-first/md/popover/popover-events.md b/examples/docs/resources/mobile-first/md/popover/popover-events.md new file mode 100644 index 000000000..4aa7388dc --- /dev/null +++ b/examples/docs/resources/mobile-first/md/popover/popover-events.md @@ -0,0 +1,30 @@ +
+

+ +

+ +## Popover + + + +Popover 可通过对一个触发源操作触发弹出框,支持自定义弹出内容,延迟触发和渐变动画 + +
+ +### 事件 + +`hide` 隐藏时触发回调 + +
+ +`show` 显示时触发回调 + +
+ +`after-leave` 隐藏动画播放完毕后触发回调 + +
+ +`after-enter` 显示动画播放完毕后触发回调 + + diff --git a/examples/docs/resources/mobile-first/md/popover/popover-mf.md b/examples/docs/resources/mobile-first/md/popover/popover-mf.md new file mode 100644 index 000000000..95e323f8c --- /dev/null +++ b/examples/docs/resources/mobile-first/md/popover/popover-mf.md @@ -0,0 +1,120 @@ +
+

+ +

+ +## Popover + + + +Popover 可通过对一个触发源操作触发弹出框,支持自定义弹出内容,延迟触发和渐变动画 + +
+ +### 基本用法 + + +
+ +### 箭头偏移 + +`arrow-offset` 在 Popover 的范围内,设置箭头的偏移量,来改变箭头的位置。 + +
+ +### 延迟隐藏 + +`close-delay` 弹出框延迟隐藏单位为毫秒(Number) + + +
+ +### 自定义提示文本 + +`content` 设置自定义文本,也可在标签内直接嵌套默认插槽为自定义文本 + + +
+ +### 禁用 + +`disabled` 设置是否禁用弹出框。 + + + +### 弹出框偏移 + +`offset` 在触发源的范围内,设置弹框的偏移量,来改变弹框的位置。 + + +### 隐藏提示框箭头 + +`visible-arrow` 设定是否显示提示框的箭头 + + + +### 延迟显示 + +`open-delay`,设置延迟时间 ( type:number,单位毫秒 ) + + + +### 添加内容 + +`content` 设置要显示的内容。 + + + +### 事件 + +`hide` 隐藏时触发回调 + +
+ +`show` 显示时触发回调 + +
+ +`after-leave` 隐藏动画播放完毕后触发回调 + +
+ +`after-enter` 显示动画播放完毕后触发回调 + + + +### 显示位置 + +`placement` 设置弹出框的的位置,可选值为(to/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end) + + + +### 宽度 + +`width` 弹出框的宽度 + + + +### 自定义样式 + +`popper-class` 可配置单个或多个 class + + + +### 弹出框选项 + +`popper-options` 配置弹出框选项 + + + +### 触发方式 + +`trigger`设定弹出框的触发方式
`click` 点击触发
`focus` 鼠标长按触发
`hover` 鼠标悬浮触发
`manual` 点击触发,再次点击隐藏 + + + +### 触发源 + +`slot` 设置弹出框的触发源 + + \ No newline at end of file diff --git a/examples/docs/resources/mobile-first/md/popover/popover-placement.md b/examples/docs/resources/mobile-first/md/popover/popover-placement.md new file mode 100644 index 000000000..1a4ce8b96 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/popover/popover-placement.md @@ -0,0 +1,18 @@ +
+

+ +

+ +## Popover + + + +Popover 可通过对一个触发源操作触发弹出框,支持自定义弹出内容,延迟触发和渐变动画 + +
+ +### 显示位置 + +`placement` 设置弹出框的的位置,可选值为(to/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end) + + diff --git a/examples/docs/resources/mobile-first/md/popover/popover-width.md b/examples/docs/resources/mobile-first/md/popover/popover-width.md new file mode 100644 index 000000000..362314558 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/popover/popover-width.md @@ -0,0 +1,18 @@ +
+

+ +

+ +## Popover + + + +Popover 可通过对一个触发源操作触发弹出框,支持自定义弹出内容,延迟触发和渐变动画 + +
+ +### 宽度 + +`width` 弹出框的宽度 + + diff --git a/examples/docs/resources/mobile-first/md/popover/popper-class.md b/examples/docs/resources/mobile-first/md/popover/popper-class.md new file mode 100644 index 000000000..28e19c67f --- /dev/null +++ b/examples/docs/resources/mobile-first/md/popover/popper-class.md @@ -0,0 +1,18 @@ +
+

+ +

+ +## Popover + + + +Popover 可通过对一个触发源操作触发弹出框,支持自定义弹出内容,延迟触发和渐变动画 + +
+ +### 自定义样式 + +`popper-class` 可配置单个或多个 class + + diff --git a/examples/docs/resources/mobile-first/md/popover/popper-options.md b/examples/docs/resources/mobile-first/md/popover/popper-options.md new file mode 100644 index 000000000..a08cc3191 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/popover/popper-options.md @@ -0,0 +1,18 @@ +
+

+ +

+ +## Popover + + + +Popover 可通过对一个触发源操作触发弹出框,支持自定义弹出内容,延迟触发和渐变动画 + +
+ +### 弹出框选项 + +`popper-options` 配置弹出框选项 + + diff --git a/examples/docs/resources/mobile-first/md/popover/trigger-mode.md b/examples/docs/resources/mobile-first/md/popover/trigger-mode.md new file mode 100644 index 000000000..7ed686f5b --- /dev/null +++ b/examples/docs/resources/mobile-first/md/popover/trigger-mode.md @@ -0,0 +1,18 @@ +
+

+ +

+ +## Popover + + + +Popover 可通过对一个触发源操作触发弹出框,支持自定义弹出内容,延迟触发和渐变动画 + +
+ +### 触发方式 + +`trigger`设定弹出框的触发方式
`click` 点击触发
`focus` 鼠标长按触发
`hover` 鼠标悬浮触发
`manual` 点击触发,再次点击隐藏 + + diff --git a/examples/docs/resources/mobile-first/md/popover/trigger-reference.md b/examples/docs/resources/mobile-first/md/popover/trigger-reference.md new file mode 100644 index 000000000..68bf255d3 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/popover/trigger-reference.md @@ -0,0 +1,18 @@ +
+

+ +

+ +## Popover + + + +Popover 可通过对一个触发源操作触发弹出框,支持自定义弹出内容,延迟触发和渐变动画 + +
+ +### 触发源 + +`slot` 设置弹出框的触发源 + + diff --git a/examples/docs/resources/mobile-first/md/progress/basic-usage.md b/examples/docs/resources/mobile-first/md/progress/basic-usage.md new file mode 100644 index 000000000..24b9fccd0 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/progress/basic-usage.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## Progress + + + +用于展示操作进度,告知用户当前状态和预期。 + +
+ +### 基本用法 + + + +
+ + diff --git a/examples/docs/resources/mobile-first/md/progress/custom-color.md b/examples/docs/resources/mobile-first/md/progress/custom-color.md new file mode 100644 index 000000000..20aa5658b --- /dev/null +++ b/examples/docs/resources/mobile-first/md/progress/custom-color.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## Progress + + + +用于展示操作进度,告知用户当前状态和预期。 + +
+ +### 自定义颜色 + +通过 `color` 设置进度条颜色。color 进度条背景色(会覆盖 status 状态颜色) + + + +
diff --git a/examples/docs/resources/mobile-first/md/progress/dynamic-control-changes.md b/examples/docs/resources/mobile-first/md/progress/dynamic-control-changes.md new file mode 100644 index 000000000..cd38dbfe3 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/progress/dynamic-control-changes.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## Progress + + + +用于展示操作进度,告知用户当前状态和预期。 + +
+ +### 动态控制进度条变化 + +通过设置 `percentage` 动态控制进度条变化 + + + +
diff --git a/examples/docs/resources/mobile-first/md/progress/format-text.md b/examples/docs/resources/mobile-first/md/progress/format-text.md new file mode 100644 index 000000000..5a890e6fc --- /dev/null +++ b/examples/docs/resources/mobile-first/md/progress/format-text.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## Progress + + + +用于展示操作进度,告知用户当前状态和预期。 + +
+ +### 自定义显示文字 + +`text-inside` 进度条显示文字内置在进度条内(只在 type=line 时可用),`format`自定义进度条的文字 + + + +
diff --git a/examples/docs/resources/mobile-first/md/progress/progress-size.md b/examples/docs/resources/mobile-first/md/progress/progress-size.md new file mode 100644 index 000000000..86ad5c6ac --- /dev/null +++ b/examples/docs/resources/mobile-first/md/progress/progress-size.md @@ -0,0 +1,18 @@ +
+

+ +

+ +## Progress + + + +用于展示操作进度,告知用户当前状态和预期。 + +
+ +### 尺寸 + +`size` 进度条的大小(small/medium/large) + + diff --git a/examples/docs/resources/mobile-first/md/progress/progress-status.md b/examples/docs/resources/mobile-first/md/progress/progress-status.md new file mode 100644 index 000000000..dc20133bf --- /dev/null +++ b/examples/docs/resources/mobile-first/md/progress/progress-status.md @@ -0,0 +1,18 @@ +
+

+ +

+ +## Progress + + + +用于展示操作进度,告知用户当前状态和预期。 + +
+ +### 状态 + +`status` 进度条当前状态(success/exception/warning) + + diff --git a/examples/docs/resources/mobile-first/md/progress/progress-type.md b/examples/docs/resources/mobile-first/md/progress/progress-type.md new file mode 100644 index 000000000..51794db7c --- /dev/null +++ b/examples/docs/resources/mobile-first/md/progress/progress-type.md @@ -0,0 +1,28 @@ +
+

+ +

+ +## Progress + + + +用于展示操作进度,告知用户当前状态和预期。 + +
+ +取值 line:线性进度条。取值 circle:环形进度条 + +
+ +### line 类型 + +`type="line"` 显示为 line 类型 + + + +### circle 类型 + +`type="circle"` 显示为 circle 类型。`width`可以调整环形进度条画布宽度,默认值为 96px。 + + diff --git a/examples/docs/resources/mobile-first/md/progress/progress-width.md b/examples/docs/resources/mobile-first/md/progress/progress-width.md new file mode 100644 index 000000000..e1a8e69a8 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/progress/progress-width.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## Progress + + + +用于展示操作进度,告知用户当前状态和预期。 + +
+ +### 自定义宽度 + +`stroke-width`自定义进度条的宽度,单位 px + + + +
diff --git a/examples/docs/resources/mobile-first/md/progress/text-inside-or-no-text.md b/examples/docs/resources/mobile-first/md/progress/text-inside-or-no-text.md new file mode 100644 index 000000000..7a62f2ba3 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/progress/text-inside-or-no-text.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## Progress + + + +用于展示操作进度,告知用户当前状态和预期。 + +
+ +### 文字内显或不显 + +`show-text` 是否显示进度条文字内容 + + + +
diff --git a/examples/docs/resources/mobile-first/md/radio/active-color.md b/examples/docs/resources/mobile-first/md/radio/active-color.md new file mode 100644 index 000000000..7337a2adc --- /dev/null +++ b/examples/docs/resources/mobile-first/md/radio/active-color.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## Radio 单选框 + + + +用于配置不同场景的选项,在一组备选项中进行单选。 + +
+ +### 颜色设置 + +按钮形式的 Radio 激活时可通过 `text-color` 属性设置文本颜色,通过 `fill` 属性设置填充色和边框色。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/radio/basic-usage.md b/examples/docs/resources/mobile-first/md/radio/basic-usage.md new file mode 100644 index 000000000..9973bc48a --- /dev/null +++ b/examples/docs/resources/mobile-first/md/radio/basic-usage.md @@ -0,0 +1,56 @@ +
+

+ +

+ +## Radio 单选框 + + + +用于配置不同场景的选项,在一组备选项中进行单选。 + +
+ +### 基本用法 + +通过 `v-model` 绑定变量,设置的变量值为默认选中的 Radio,变量值对应 `label` 属性的值。通过 `text` 也可以配置显示文本,与默认插槽配置纯文本的结果一致 + +
+ +`label` 可以是 `String`、`Number` 或 `Boolean`。 + + + +
+ +### 配置式单选组 + +提供 `options` 属性,支持通过配置对象数组数据的形式来渲染单选组。使用该属性后,可以不用再在标签中以插槽的形式插入 `` 或 `` 标签。 + +
+ +`options` 对象数组中包括三个字段:`label`、`text`、`events`。 + +
+ +另外还提供 `type` 属性,配合 `options` 属性一起使用,默认值为 `radio`。还可以配置为 `button`,配置后单选组将以按钮的形式展示。 + + + +
+ +### Radio + + + +
+ +### RadioGroup + + + +
+ +### RadioButton + + diff --git a/examples/docs/resources/mobile-first/md/radio/dynamic-disable.md b/examples/docs/resources/mobile-first/md/radio/dynamic-disable.md new file mode 100644 index 000000000..5fc85fadf --- /dev/null +++ b/examples/docs/resources/mobile-first/md/radio/dynamic-disable.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## Radio 单选框 + + + +用于配置不同场景的选项,在一组备选项中进行单选。 + +
+ +### 禁用状态 + +设置 `disabled` 属性即可启动禁用状态,默认为 false 。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/radio/group-options.md b/examples/docs/resources/mobile-first/md/radio/group-options.md new file mode 100644 index 000000000..3dc97853f --- /dev/null +++ b/examples/docs/resources/mobile-first/md/radio/group-options.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## Radio 单选框 + + + +用于配置不同场景的选项,在一组备选项中进行单选。 + +
+ +### 单选框事件 + +可在 RadioGroup 组件上设置 `options ` 属性,可循环配置 Radio。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/radio/radio-default.md b/examples/docs/resources/mobile-first/md/radio/radio-default.md new file mode 100644 index 000000000..a400578b7 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/radio/radio-default.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## Radio 单选框 + + + +用于配置不同场景的选项,在一组备选项中进行单选。 + +
+ +### 默认插槽 + +通过 `default` 默认插槽列表。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/radio/radio-events.md b/examples/docs/resources/mobile-first/md/radio/radio-events.md new file mode 100644 index 000000000..ba104be94 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/radio/radio-events.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## Radio 单选框 + + + +用于配置不同场景的选项,在一组备选项中进行单选。 + +
+ +### 单选框事件 + +可在 Radio、RadioGroup 组件上设置 `change` 事件,当绑定值变化时触发,回调函数为选中的 Radio label 值。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/radio/radio-size.md b/examples/docs/resources/mobile-first/md/radio/radio-size.md new file mode 100644 index 000000000..4f75ba6b2 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/radio/radio-size.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## Radio 单选框 + + + +用于配置不同场景的选项,在一组备选项中进行单选。 + +
+ +### 尺寸设置 + +可对按钮形式的 Radio 或带有边框的 Radio 设置 `size` 属性,以改变其尺寸,包括 medium、small、mini 三个选项。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/radio/radio-text.md b/examples/docs/resources/mobile-first/md/radio/radio-text.md new file mode 100644 index 000000000..725ce4526 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/radio/radio-text.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## Radio 单选框 + + + +用于配置不同场景的选项,在一组备选项中进行单选。 + +
+ +### 文字内容 + +可在 Radio 组件上设置 `text` 属性,设置内容。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/radio/radio-value.md b/examples/docs/resources/mobile-first/md/radio/radio-value.md new file mode 100644 index 000000000..f699fcd91 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/radio/radio-value.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## Radio 单选框 + + + +用于配置不同场景的选项,在一组备选项中进行单选。 + +
+ +### 垂直布局 + +可在 RadioGroup 组件上设置 `value/v-model` 属性,绑定值。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/radio/vertical.md b/examples/docs/resources/mobile-first/md/radio/vertical.md new file mode 100644 index 000000000..626e004c9 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/radio/vertical.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## Radio 单选框 + + + +用于配置不同场景的选项,在一组备选项中进行单选。 + +
+ +### 垂直布局 + +可在 RadioGroup 组件上设置 `vertical` 属性,使单选框垂直布局。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/radio/with-border.md b/examples/docs/resources/mobile-first/md/radio/with-border.md new file mode 100644 index 000000000..9b7dd641b --- /dev/null +++ b/examples/docs/resources/mobile-first/md/radio/with-border.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## Radio 单选框 + + + +用于配置不同场景的选项,在一组备选项中进行单选。 + +
+ +### 带有边框 + +可通过设置 `border` 属性,给单选框增加边框。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/rate/allow-half.md b/examples/docs/resources/mobile-first/md/rate/allow-half.md new file mode 100644 index 000000000..7bf66b5c1 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/rate/allow-half.md @@ -0,0 +1,19 @@ +
+

+ +

+ +## Rate 评分 + + + +Rate 快速评级,对评价进行展示。 +
+ +### 半选 + +可通过 `allow-half` 定义是否支持半选。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/rate/basic-usage.md b/examples/docs/resources/mobile-first/md/rate/basic-usage.md new file mode 100644 index 000000000..1721582c5 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/rate/basic-usage.md @@ -0,0 +1,19 @@ +
+

+ +

+ +## Rate 评分 + + + +Rate 快速评级,对评价进行展示。 +
+ +### 基本用法 + + + +
+ + diff --git a/examples/docs/resources/mobile-first/md/rate/custom-3-threshold-colors.md b/examples/docs/resources/mobile-first/md/rate/custom-3-threshold-colors.md new file mode 100644 index 000000000..da9d0d8b8 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/rate/custom-3-threshold-colors.md @@ -0,0 +1,19 @@ +
+

+ +

+ +## Rate 评分 + + + +Rate 快速评级,对评价进行展示。 +
+ +### 自定义 3 分段颜色 + +可通过 `colors` 定义 3 分段颜色。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/rate/custom-3-threshold-icon.md b/examples/docs/resources/mobile-first/md/rate/custom-3-threshold-icon.md new file mode 100644 index 000000000..cbe904951 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/rate/custom-3-threshold-icon.md @@ -0,0 +1,19 @@ +
+

+ +

+ +## Rate 评分 + + + +Rate 快速评级,对评价进行展示。 +
+ +### 自定义 3 分段图标样式 + +可通过 `icon-classes` 自定义 3 分段图标样式。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/rate/disabled-not-selected-style.md b/examples/docs/resources/mobile-first/md/rate/disabled-not-selected-style.md new file mode 100644 index 000000000..773c06bb9 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/rate/disabled-not-selected-style.md @@ -0,0 +1,26 @@ +
+

+ +

+ +## Rate 评分 + + + +Rate 快速评级,对评价进行展示。 + +
+ +### 自定义禁用时未选中图标颜色 + +可通过 `disabled-void-color` 自定义禁用时未选中图标颜色。 + + + +### 自定义禁用时未选中图标类名 + +可通过 `disabled-void-icon-class` 自定义禁用时未选中图标类名。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/rate/dynamic-disable.md b/examples/docs/resources/mobile-first/md/rate/dynamic-disable.md new file mode 100644 index 000000000..255de5e8c --- /dev/null +++ b/examples/docs/resources/mobile-first/md/rate/dynamic-disable.md @@ -0,0 +1,19 @@ +
+

+ +

+ +## Rate 评分 + + + +Rate 快速评级,对评价进行展示。 +
+ +### 禁用 + +可通过 `disabled` 定义是否禁用。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/rate/max-score.md b/examples/docs/resources/mobile-first/md/rate/max-score.md new file mode 100644 index 000000000..86be9a8da --- /dev/null +++ b/examples/docs/resources/mobile-first/md/rate/max-score.md @@ -0,0 +1,19 @@ +
+

+ +

+ +## Rate 评分 + + + +Rate 快速评级,对评价进行展示。 +
+ +### 最大分值 + +可通过 `max` 设置最大分值。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/rate/not-selected-style.md b/examples/docs/resources/mobile-first/md/rate/not-selected-style.md new file mode 100644 index 000000000..e88de382b --- /dev/null +++ b/examples/docs/resources/mobile-first/md/rate/not-selected-style.md @@ -0,0 +1,26 @@ +
+

+ +

+ +## Rate 评分 + + + +Rate 快速评级,对评价进行展示。 + +
+ +### 自定义未选中图标颜色 + +可通过 `void-color` 定义未选中图标颜色。 + + + +### 自定义未选中图标类名 + +可通过 `void-icon-class` 定义未选中图标类名。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/rate/radio-rate.md b/examples/docs/resources/mobile-first/md/rate/radio-rate.md new file mode 100644 index 000000000..6df709b5a --- /dev/null +++ b/examples/docs/resources/mobile-first/md/rate/radio-rate.md @@ -0,0 +1,19 @@ +
+

+ +

+ +## Rate 评分 + + + +Rate 快速评级,对评价进行展示。 +
+ +### 单选模式 + +可通过 `radio` 设置单选模式。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/rate/rate-events.md b/examples/docs/resources/mobile-first/md/rate/rate-events.md new file mode 100644 index 000000000..e09b2e191 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/rate/rate-events.md @@ -0,0 +1,19 @@ +
+

+ +

+ +## Rate 评分 + + + +Rate 快速评级,对评价进行展示。 +
+ +### 事件 + +监听 `change` 事件触发处理方法。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/rate/rate-mf.md b/examples/docs/resources/mobile-first/md/rate/rate-mf.md new file mode 100644 index 000000000..eb6d5b38d --- /dev/null +++ b/examples/docs/resources/mobile-first/md/rate/rate-mf.md @@ -0,0 +1,114 @@ +
+

+ +

+ +## Rate 评分 + + + +Rate 快速评级,对评价进行展示。 +
+ +### 基本用法 + + + +### 自定义 3 分段颜色 + +可通过 `colors` 定义 3 分段颜色。 + + + +### 自定义禁用时未选中图标颜色 + +可通过 `disabled-default-color` 自定义禁用时未选中图标颜色。 + + + +### 自定义禁用时未选中图标类名 + +可通过 `disabled-default-icon-class` 自定义禁用时未选中图标类名。 + + + +### 自定义 3 分段图标样式 + +可通过 `icon-classes` 自定义 3 分段图标样式。 + + + +### 辅助文字及颜色 + +可通过 `texts show-text text-color` 三个属性分别设置辅助文字内容、是否显示辅助文字及辅助文字颜色。 + + + + +### 尺寸 + +可通过 `type` 设置尺寸 `big small(默认)` 。 + + + +### 自定义未选中图标颜色 + +可通过 `default-color` 定义未选中图标颜色。 + + + +### 自定义未选中图标类名 + +可通过 `default-icon-class` 定义未选中图标类名。 + + + +### 图标下文字提示 + +可通过 `text-on-bottom` 定义是否在图标下显示文字提示。 + + + +### 半选 + +可通过 `allow-half` 定义是否支持半选。 + + + +### 禁用 + +可通过 `disabled` 定义是否禁用。 + + + +### 分数显示 + +可通过 `show-score score-template` 分别定义是否显示分数和显示的模板。 + + + +### 单选模式 + +可通过 `radio` 设置单选模式。 + + + +### 最大分值 + +可通过 `max` 设置最大分值。 + + + +### 界限值 + +可通过 `low-threshold high-threshold` 分别设置下限值和上限值,通过`colors`配置显示星的颜色 + + + +### 事件 + +监听 `change` 事件触发处理方法。 + + + +
\ No newline at end of file diff --git a/examples/docs/resources/mobile-first/md/rate/show-score.md b/examples/docs/resources/mobile-first/md/rate/show-score.md new file mode 100644 index 000000000..db52a7649 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/rate/show-score.md @@ -0,0 +1,19 @@ +
+

+ +

+ +## Rate 评分 + + + +Rate 快速评级,对评价进行展示。 +
+ +### 分数显示 + +可通过 `show-score score-template` 分别定义是否显示分数和显示的模板。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/rate/size.md b/examples/docs/resources/mobile-first/md/rate/size.md new file mode 100644 index 000000000..bc6b2af27 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/rate/size.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## Rate 评分 + + + +Rate 快速评级,对评价进行展示。 + +
+ +### 尺寸 + +可通过 `type` 设置尺寸 `large small(默认)` 。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/rate/text-on-bottom.md b/examples/docs/resources/mobile-first/md/rate/text-on-bottom.md new file mode 100644 index 000000000..c85f51815 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/rate/text-on-bottom.md @@ -0,0 +1,19 @@ +
+

+ +

+ +## Rate 评分 + + + +Rate 快速评级,对评价进行展示。 +
+ +### 图标下文字提示 + +可通过 `text-on-bottom` 定义是否在图标下显示文字提示。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/rate/texts-and-text-color.md b/examples/docs/resources/mobile-first/md/rate/texts-and-text-color.md new file mode 100644 index 000000000..d9296f98f --- /dev/null +++ b/examples/docs/resources/mobile-first/md/rate/texts-and-text-color.md @@ -0,0 +1,19 @@ +
+

+ +

+ +## Rate 评分 + + + +Rate 快速评级,对评价进行展示。 +
+ +### 辅助文字及颜色 + +可通过 `texts show-text text-color` 三个属性分别设置辅助文字内容、是否显示辅助文字及辅助文字颜色。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/rate/threshold-value.md b/examples/docs/resources/mobile-first/md/rate/threshold-value.md new file mode 100644 index 000000000..032bf22ce --- /dev/null +++ b/examples/docs/resources/mobile-first/md/rate/threshold-value.md @@ -0,0 +1,19 @@ +
+

+ +

+ +## Rate 评分 + + + +Rate 快速评级,对评价进行展示。 +
+ +### 界限值 + +可通过 `low-threshold high-threshold` 分别设置下限值和上限值,通过`colors`配置显示星的颜色 + + + +
diff --git a/examples/docs/resources/mobile-first/md/record/basic-usage.md b/examples/docs/resources/mobile-first/md/record/basic-usage.md new file mode 100644 index 000000000..9d733f9be --- /dev/null +++ b/examples/docs/resources/mobile-first/md/record/basic-usage.md @@ -0,0 +1,18 @@ +
+

+ +

+ +## Record 录音 + + + +Record 语音录入。 + +
+ +### 基本用法 + + + +
diff --git a/examples/docs/resources/mobile-first/md/scrollbar/basic-usage.md b/examples/docs/resources/mobile-first/md/scrollbar/basic-usage.md new file mode 100644 index 000000000..f5169ebb8 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/scrollbar/basic-usage.md @@ -0,0 +1,16 @@ +
+

+ +

+ +## Scrollbar 滚动条 + + + +提供各个浏览器下,风格统一,更美观的滚动条。 + +
+ +### 基本用法 + + diff --git a/examples/docs/resources/mobile-first/md/scrollbar/horizon.md b/examples/docs/resources/mobile-first/md/scrollbar/horizon.md new file mode 100644 index 000000000..9932a40a2 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/scrollbar/horizon.md @@ -0,0 +1,16 @@ +
+

+ +

+ +## Scrollbar 滚动条 + + + +提供各个浏览器下,风格统一,更美观的滚动条。 + +
+ +### 水平滚动条 + + diff --git a/examples/docs/resources/mobile-first/md/scrollbar/scrollbar-mf.md b/examples/docs/resources/mobile-first/md/scrollbar/scrollbar-mf.md new file mode 100644 index 000000000..36818a8bd --- /dev/null +++ b/examples/docs/resources/mobile-first/md/scrollbar/scrollbar-mf.md @@ -0,0 +1,20 @@ +
+

+ +

+ +## Scrollbar 滚动条 + + + +提供各个浏览器下,风格统一,更美观的滚动条。 + +
+ +### 基本用法 + + + +### 水平滚动条 + + \ No newline at end of file diff --git a/examples/docs/resources/mobile-first/md/search/basic-usage.md b/examples/docs/resources/mobile-first/md/search/basic-usage.md new file mode 100644 index 000000000..e602ae451 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/search/basic-usage.md @@ -0,0 +1,27 @@ + +
+

+ +

+ +## Search 搜索 + + + +指定条件对象进行搜索数据。 +
+ +### 基本用法 + + + +
+ + diff --git a/examples/docs/resources/mobile-first/md/search/button-search.md b/examples/docs/resources/mobile-first/md/search/button-search.md new file mode 100644 index 000000000..24afd7be6 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/search/button-search.md @@ -0,0 +1,26 @@ + +
+

+ +

+ +## Search 搜索 + + + +指定条件对象进行搜索数据。 + +
+ +### 按钮搜索 + +可通过 `show-button` 属性对移动端设置按钮搜索。 + + diff --git a/examples/docs/resources/mobile-first/md/search/change-bg.md b/examples/docs/resources/mobile-first/md/search/change-bg.md new file mode 100644 index 000000000..deb5bfef5 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/search/change-bg.md @@ -0,0 +1,26 @@ + +
+

+ +

+ +## Search 搜索 + + + +指定条件对象进行搜索数据。 + +
+ +### 切换背景色(只针对移动端有效) + +可通过 `change-bg-color` 属性切换背景色。 + + diff --git a/examples/docs/resources/mobile-first/md/search/clearable.md b/examples/docs/resources/mobile-first/md/search/clearable.md new file mode 100644 index 000000000..2478034cc --- /dev/null +++ b/examples/docs/resources/mobile-first/md/search/clearable.md @@ -0,0 +1,27 @@ + +
+

+ +

+ +## Search 搜索 + + + +指定条件对象进行搜索数据。 +
+ +### 可清除 + +可通过 `clearable` 属性设置显示清空图标按钮。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/search/custom-search-types.md b/examples/docs/resources/mobile-first/md/search/custom-search-types.md new file mode 100644 index 000000000..f8efe4f44 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/search/custom-search-types.md @@ -0,0 +1,25 @@ + +
+

+ +

+ +## Search 搜索 + + + +指定条件对象进行搜索数据。 +
+ +### 自定义搜索类型的内容 + + + +
diff --git a/examples/docs/resources/mobile-first/md/search/default-value.md b/examples/docs/resources/mobile-first/md/search/default-value.md new file mode 100644 index 000000000..e1fd2acb0 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/search/default-value.md @@ -0,0 +1,27 @@ + +
+

+ +

+ +## Search 搜索 + + + +指定条件对象进行搜索数据。 +
+ +### 默认值搜索 + +可通过 `v-model` 配置组件默认搜索条件。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/search/enter-search.md b/examples/docs/resources/mobile-first/md/search/enter-search.md new file mode 100644 index 000000000..5874227b2 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/search/enter-search.md @@ -0,0 +1,28 @@ + +
+

+ +

+ +## Search 搜索 + + + +指定条件对象进行搜索数据。 + +
+ +### 回车搜索 + +可通过 `is-enter-search` 属性设置按回车键后触发搜索。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/search/mini-mode.md b/examples/docs/resources/mobile-first/md/search/mini-mode.md new file mode 100644 index 000000000..70825b2c1 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/search/mini-mode.md @@ -0,0 +1,28 @@ + +
+

+ +

+ +## Search 搜索 + + + +指定条件对象进行搜索数据。 + +
+ +### 迷你模式 + +可通过 `mini` 设置组件为 mini 模式。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/search/search-events.md b/examples/docs/resources/mobile-first/md/search/search-events.md new file mode 100644 index 000000000..837f16e47 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/search/search-events.md @@ -0,0 +1,35 @@ + +
+

+ +

+ +## Search 搜索 + + + +指定条件对象进行搜索数据。 +
+ +### 自定义 search 事件 + + + +### 自定义 change 事件 + + + +
+ +### 自定义 select 事件 + + + +
diff --git a/examples/docs/resources/mobile-first/md/search/search-in-navigation-menu.md b/examples/docs/resources/mobile-first/md/search/search-in-navigation-menu.md new file mode 100644 index 000000000..991a84270 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/search/search-in-navigation-menu.md @@ -0,0 +1,26 @@ + + +
+

+ +

+ +## Search 搜索 + + + +指定条件对象进行搜索数据。 +
+ +### 事件 + + + +
diff --git a/examples/docs/resources/mobile-first/md/search/search-mf.md b/examples/docs/resources/mobile-first/md/search/search-mf.md new file mode 100644 index 000000000..931b0d7e8 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/search/search-mf.md @@ -0,0 +1,47 @@ + +
+

+ +

+ +## Search 搜索 + + + +指定条件对象进行搜索数据。 +
+ +### 基本用法 + + + +### 回车搜索 + +可通过 `is-enter-search` 属性设置按回车键后触发搜索。 + + + +### 自定义 search 事件 + + + +### 自定义 change 事件 + + + +
+ +### 按钮搜索 + +可通过 `show-button` 属性对移动端设置按钮搜索。 + + + +
\ No newline at end of file diff --git a/examples/docs/resources/mobile-first/md/search/search-types.md b/examples/docs/resources/mobile-first/md/search/search-types.md new file mode 100644 index 000000000..7df5ba708 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/search/search-types.md @@ -0,0 +1,27 @@ + +
+

+ +

+ +## Search 搜索 + + + +指定条件对象进行搜索数据。 +
+ +### 搜索类型 + +可通过 `search-types` 配置组件可选的搜索类型。 + + + +
diff --git a/examples/docs/resources/mobile-first/md/search/show-selected-types.md b/examples/docs/resources/mobile-first/md/search/show-selected-types.md new file mode 100644 index 000000000..a2e0bdc2b --- /dev/null +++ b/examples/docs/resources/mobile-first/md/search/show-selected-types.md @@ -0,0 +1,27 @@ + +
+

+ +

+ +## Search 搜索 + + + +指定条件对象进行搜索数据。 +
+ +### 自定义搜索类型 + + + + + +
diff --git a/examples/docs/resources/mobile-first/md/search/transparent-mode.md b/examples/docs/resources/mobile-first/md/search/transparent-mode.md new file mode 100644 index 000000000..793774968 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/search/transparent-mode.md @@ -0,0 +1,29 @@ + +
+

+ +

+ +## Search 搜索 + + + +指定条件对象进行搜索数据。 +
+ +### 透明模式 + +可通过 `transparent` 设置组件为透明模式(`mini`模式下有效)。 + + + + + +
diff --git a/examples/docs/resources/mobile-first/md/select-mobile/basic-usage.md b/examples/docs/resources/mobile-first/md/select-mobile/basic-usage.md new file mode 100644 index 000000000..56e50596a --- /dev/null +++ b/examples/docs/resources/mobile-first/md/select-mobile/basic-usage.md @@ -0,0 +1,17 @@ +
+

+ +

+ +## SelectMobile 面板选择器组件 + + +
+ +### 基本用法 + + + +
+ + diff --git a/examples/docs/resources/mobile-first/md/select-mobile/ellipsis.md b/examples/docs/resources/mobile-first/md/select-mobile/ellipsis.md new file mode 100644 index 000000000..5e8aca6db --- /dev/null +++ b/examples/docs/resources/mobile-first/md/select-mobile/ellipsis.md @@ -0,0 +1,18 @@ +
+

+ +

+ +## SelectMobile 面板选择器组件 + + +
+ +### 插槽 + +添加属性 `ellipsis` 选项内容会超出隐藏。 + + +
+ + diff --git a/examples/docs/resources/mobile-first/md/select-mobile/multiple.md b/examples/docs/resources/mobile-first/md/select-mobile/multiple.md new file mode 100644 index 000000000..cb0faef6c --- /dev/null +++ b/examples/docs/resources/mobile-first/md/select-mobile/multiple.md @@ -0,0 +1,19 @@ +
+

+ +

+ +## SelectMobile 面板选择器组件 + + +
+ +### 插槽 + +通过添加属性 `multiple`,开启多选功能。 +通过 `@update:text` 事件接收选中项的 `textField` 文本信息,`text-split` 设置文本分隔符,默认值为 `; `。 + + +
+ + diff --git a/examples/docs/resources/mobile-first/md/select-mobile/select-mobile-mf.md b/examples/docs/resources/mobile-first/md/select-mobile/select-mobile-mf.md new file mode 100644 index 000000000..10d359f75 --- /dev/null +++ b/examples/docs/resources/mobile-first/md/select-mobile/select-mobile-mf.md @@ -0,0 +1,29 @@ +
+

+ +

+ +## SelectMobile 面板选择器组件 + + +
+ +### 基本用法 + + + +
+ +### 插槽 + +添加属性 `ellipsis` 选项内容会超出隐藏。 + + +
+ +### 插槽 + +通过添加属性 `multiple`,开启多选功能。 + + +
\ No newline at end of file diff --git a/examples/docs/resources/mobile-first/md/select-view/basic-usage.md b/examples/docs/resources/mobile-first/md/select-view/basic-usage.md new file mode 100644 index 000000000..cbaea4a0c --- /dev/null +++ b/examples/docs/resources/mobile-first/md/select-view/basic-usage.md @@ -0,0 +1,41 @@ +
+

+ +

+ +## SelectView 页面选择器组件 + + +
+ +### 基本用法 + + + +### 显示三个字段两行 + + + +### 多选 + + + +### 必选项 + +添加 `required-selected-list` 属性开启必选项列表,开启 `multiple` 多选时有效。可通过事件 `search-click` 的第二个返回参数判断是否操作成功,必选项不能取消勾选。 + + + +### 文本信息 + +通过 `@update:text` 事件接收选中项的 `textField` 文本信息,`text-split` 设置文本分隔符,默认值为 `;`。 + + + +### 无限滚动 + +配置 `infinite-scroll` 属性开启无限滚动,配置参数 `{ load: () => {}, delay: 200, disabled: false, distance: 0, immediate: true }`,可参考 `InfiniteScroll 无限滚动` 组件文档。 + + + + diff --git a/examples/docs/resources/mobile-first/menus.js b/examples/docs/resources/mobile-first/menus.js new file mode 100644 index 000000000..d943aec0f --- /dev/null +++ b/examples/docs/resources/mobile-first/menus.js @@ -0,0 +1,103 @@ +export const standaloneMenus = [ + { + label: '组件总览', + key: 'overview' + } +] + +export const docMenus = [] + +export const cmpMenus = [ + { + label: '导航组件', + labelEn: 'Navigation', + key: 'cmp_navigation', + children: [ + { name: 'CalendarBar', nameCn: '日历栏', key: 'calendar-bar' }, + { name: 'Filter', nameCn: '过滤器', key: 'filter' }, + { name: 'FilterBar', nameCn: '过滤栏', key: 'filter-bar' }, + { name: 'Steps ', nameCn: '步骤条', key: 'steps' }, + { name: 'Tabs ', nameCn: '标签页', key: 'tabs' }, + + { name: 'TimeLine ', nameCn: '时间线', key: 'time-line' }, + { name: 'Dropdown ', nameCn: '下拉菜单', key: 'dropdown' }, + { name: 'Flowchart ', nameCn: '流程图', key: 'flowchart' } + ] + }, + { + label: '容器组件', + labelEn: 'Container', + key: 'cmp_container', + children: [ + { name: 'ActionSheet', nameCn: '动作面板', key: 'action-sheet' }, + { name: 'Drawer', nameCn: '抽屉', key: 'drawer' }, + { name: 'Card', nameCn: '卡片', key: 'card' }, + { name: 'Carousel', nameCn: '走马灯', key: 'carousel' }, + { name: 'Collapse', nameCn: '折叠面板', key: 'collapse' }, + { name: 'Scrollbar', nameCn: '滚动条', key: 'scrollbar' }, + { name: 'CascaderSelect', nameCn: '级联选择', key: 'cascader-select' } + ] + }, + { + label: '表单组件', + labelEn: 'Form', + key: 'cmp_form', + children: [ + { name: 'DatePickerMobile', nameCn: '日期选择器', key: 'date-picker-mobile' }, + { name: 'TimePickerMobile', nameCn: '时间选择器', key: 'time-picker-mobile' }, + { name: 'Button', nameCn: '按钮', key: 'button' }, + { name: 'Checkbox', nameCn: '复选框', key: 'checkbox' }, + { name: 'Form', nameCn: '表单', key: 'form' }, + { name: 'Input', nameCn: '输入框', key: 'input' }, + { name: 'Numeric', nameCn: '计数器', key: 'numeric' }, + { name: 'Radio', nameCn: '单选框', key: 'radio' }, + { name: 'Search', nameCn: '搜索', key: 'search' }, + { name: 'SelectMobile', nameCn: '面板选择器', key: 'select-mobile' }, + { name: 'SelectView', nameCn: '页面选择器', key: 'select-view' }, + { name: 'Slider', nameCn: '滑块', key: 'slider' }, + { name: 'Switch', nameCn: '开关', key: 'switch' }, + { name: 'FileUpload', nameCn: '文件上传', key: 'file-upload' }, + { name: 'Record', nameCn: '语音录入', key: 'record' } + ] + }, + { + label: '数据组件', + labelEn: 'Data', + key: 'cmp_data', + children: [ + { name: 'Grid', nameCn: '表格', key: 'grid' }, + { name: 'ColumnListItem', nameCn: '分区列表项', key: 'column-list-item' }, + { name: 'StandardListItem', nameCn: '标准列表项', key: 'standard-list-item' }, + { name: 'Progress', nameCn: '进度条', key: 'progress' } + ] + }, + { + label: '提示组件', + labelEn: 'Tooltip', + key: 'cmp_tooltip', + children: [ + { name: 'Alert', nameCn: '警告', key: 'alert' }, + { name: 'Badge', nameCn: '标记', key: 'badge' }, + { name: 'Loading', nameCn: '加载', key: 'loading' }, + { name: 'Tooltip', nameCn: '文字提示', key: 'tooltip' }, + { name: 'Popover', nameCn: '气泡框', key: 'popover' }, + + { name: 'Popconfirm', nameCn: '气泡确认框', key: 'popconfirm' }, + { name: 'Message', nameCn: '提示框', key: 'message' }, + { name: 'Modal', nameCn: '模态框', key: 'modal' } + ] + }, + { + label: '其它组件', + labelEn: 'Others', + key: 'cmp_others', + children: [ + { name: 'Exception', nameCn: '缺省页', key: 'exception' }, + { name: 'Image', nameCn: '图片预览', key: 'image' }, + { name: 'Rate', nameCn: '评分', key: 'rate' }, + { name: 'Tag', nameCn: '标签', key: 'tag' }, + { name: 'TagGroup', nameCn: '标签组', key: 'tag-group' }, + { name: 'UserHead', nameCn: '用户头像', key: 'user-head' } + ] + } +] diff --git a/examples/docs/resources/mobile/app/alert/custom-close.vue b/examples/docs/resources/mobile/app/alert/custom-close.vue index 46364cd4c..8797978b2 100644 --- a/examples/docs/resources/mobile/app/alert/custom-close.vue +++ b/examples/docs/resources/mobile/app/alert/custom-close.vue @@ -1,9 +1,13 @@ diff --git a/examples/docs/resources/mobile/app/multi-select/basic-usage.vue b/examples/docs/resources/mobile/app/multi-select/basic-usage.vue index 97880e8ba..1e009246a 100644 --- a/examples/docs/resources/mobile/app/multi-select/basic-usage.vue +++ b/examples/docs/resources/mobile/app/multi-select/basic-usage.vue @@ -245,4 +245,5 @@ export default { .page__content { width: 375px; height: 48px; + background-color: #fff; } diff --git a/examples/docs/resources/mobile/app/tabs/tabs-events.vue b/examples/docs/resources/mobile/app/tabs/tabs-events.vue index d7f7f36b7..8291acf41 100644 --- a/examples/docs/resources/mobile/app/tabs/tabs-events.vue +++ b/examples/docs/resources/mobile/app/tabs/tabs-events.vue @@ -1,6 +1,6 @@ - diff --git a/packages/vue/src/currency/src/pc.vue b/packages/vue/src/currency/src/pc.vue index c531ca587..e302197a7 100644 --- a/packages/vue/src/currency/src/pc.vue +++ b/packages/vue/src/currency/src/pc.vue @@ -15,7 +15,7 @@ - diff --git a/packages/vue/src/date-picker-mobile-first/index.ts b/packages/vue/src/date-picker-mobile-first/index.ts new file mode 100644 index 000000000..9f82be602 --- /dev/null +++ b/packages/vue/src/date-picker-mobile-first/index.ts @@ -0,0 +1,23 @@ +import DatePickerMobile from './src/mobile-first.vue' +import { version } from './package.json' + +DatePickerMobile.model = { + prop: 'modelValue', + event: 'update:modelValue' +} + +/* istanbul ignore next */ +DatePickerMobile.install = function (Vue) { + Vue.component(DatePickerMobile.name, DatePickerMobile) +} + +DatePickerMobile.version = version + +/* istanbul ignore next */ +if (process.env.BUILD_TARGET === 'runtime') { + if (typeof window !== 'undefined' && window.Vue) { + DatePickerMobile.install(window.Vue) + } +} + +export default DatePickerMobile diff --git a/packages/vue/src/date-picker-mobile-first/package.json b/packages/vue/src/date-picker-mobile-first/package.json new file mode 100644 index 000000000..6ed466039 --- /dev/null +++ b/packages/vue/src/date-picker-mobile-first/package.json @@ -0,0 +1,24 @@ +{ + "name": "@opentiny/vue-date-picker-mobile-first", + "version": "3.7.0", + "description": "", + "main": "lib/index.js", + "module": "index.ts", + "sideEffects": false, + "dependencies": { + "@opentiny/vue-action-sheet": "workspace:~", + "@opentiny/vue-button": "workspace:~", + "@opentiny/vue-common": "workspace:~", + "@opentiny/vue-time-picker-mobile": "workspace:~", + "@opentiny/vue-renderless": "workspace:~" + }, + "license": "MIT", + "devDependencies": { + "@opentiny-internal/vue-test-utils": "workspace:*", + "vitest": "^0.25.7" + }, + "scripts": { + "build": "pnpm -w build:ui $npm_package_name", + "//postversion": "pnpm build" + } +} diff --git a/packages/vue/src/date-picker-mobile-first/src/mobile-first.vue b/packages/vue/src/date-picker-mobile-first/src/mobile-first.vue new file mode 100644 index 000000000..149d704cc --- /dev/null +++ b/packages/vue/src/date-picker-mobile-first/src/mobile-first.vue @@ -0,0 +1,128 @@ + + + diff --git a/packages/vue/src/date-picker-mobile-first/src/option.vue b/packages/vue/src/date-picker-mobile-first/src/option.vue new file mode 100644 index 000000000..0ae065a41 --- /dev/null +++ b/packages/vue/src/date-picker-mobile-first/src/option.vue @@ -0,0 +1,17 @@ + + + diff --git a/packages/vue/src/date-picker/src/mobile.vue b/packages/vue/src/date-picker/src/mobile.vue index 550fa91b9..d093d87e6 100644 --- a/packages/vue/src/date-picker/src/mobile.vue +++ b/packages/vue/src/date-picker/src/mobile.vue @@ -25,7 +25,7 @@
- diff --git a/packages/vue/src/date-table/index.ts b/packages/vue/src/date-table/index.ts index c31539c3a..ba937db3d 100644 --- a/packages/vue/src/date-table/index.ts +++ b/packages/vue/src/date-table/index.ts @@ -9,7 +9,7 @@ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS. * */ -import DateTable from './src/index.vue' +import DateTable from './src/pc.vue' import '@opentiny/vue-theme/date-table/index.less' import { version } from './package.json' diff --git a/packages/vue/src/date-table/src/pc.vue b/packages/vue/src/date-table/src/pc.vue new file mode 100644 index 000000000..86784c4f9 --- /dev/null +++ b/packages/vue/src/date-table/src/pc.vue @@ -0,0 +1,91 @@ + + + + diff --git a/packages/vue/src/dept/src/index.ts b/packages/vue/src/dept/src/index.ts index 0b01448f5..cb9865440 100644 --- a/packages/vue/src/dept/src/index.ts +++ b/packages/vue/src/dept/src/index.ts @@ -22,6 +22,10 @@ export default defineComponent({ title: { type: String, default: '' + }, + displayOnly: { + type: Boolean, + default: false } }, setup(props, context) { diff --git a/packages/vue/src/dept/src/pc.vue b/packages/vue/src/dept/src/pc.vue index 0fdb75c4e..116ef92fe 100644 --- a/packages/vue/src/dept/src/pc.vue +++ b/packages/vue/src/dept/src/pc.vue @@ -1,6 +1,6 @@ - diff --git a/packages/vue/src/dropdown-item/src/mobile.vue b/packages/vue/src/dropdown-item/src/mobile.vue index e8911d848..ce125e3ce 100644 --- a/packages/vue/src/dropdown-item/src/mobile.vue +++ b/packages/vue/src/dropdown-item/src/mobile.vue @@ -57,7 +57,7 @@
- diff --git a/packages/vue/src/dropdown-menu/src/mobile.vue b/packages/vue/src/dropdown-menu/src/mobile.vue index fe260555e..96db063c1 100644 --- a/packages/vue/src/dropdown-menu/src/mobile.vue +++ b/packages/vue/src/dropdown-menu/src/mobile.vue @@ -53,7 +53,7 @@ - diff --git a/packages/vue/src/dropdown/src/pc.vue b/packages/vue/src/dropdown/src/pc.vue new file mode 100644 index 000000000..b795bf476 --- /dev/null +++ b/packages/vue/src/dropdown/src/pc.vue @@ -0,0 +1,146 @@ + + + diff --git a/packages/vue/src/dynamic-scroller-item/index.ts b/packages/vue/src/dynamic-scroller-item/index.ts new file mode 100644 index 000000000..ce9dbb11c --- /dev/null +++ b/packages/vue/src/dynamic-scroller-item/index.ts @@ -0,0 +1,17 @@ +import DynamicScrollerItem from './src/index' + +/* istanbul ignore next */ +DynamicScrollerItem.install = function (Vue) { + Vue.component(DynamicScrollerItem.name, DynamicScrollerItem) +} + +DynamicScrollerItem.version = process.env.COMPONENT_VERSION + +/* istanbul ignore next */ +if (process.env.BUILD_TARGET === 'runtime') { + if (typeof window !== 'undefined' && window.Vue) { + DynamicScrollerItem.install(window.Vue) + } +} + +export default DynamicScrollerItem diff --git a/packages/vue/src/dynamic-scroller-item/package.json b/packages/vue/src/dynamic-scroller-item/package.json new file mode 100644 index 000000000..01943f1f6 --- /dev/null +++ b/packages/vue/src/dynamic-scroller-item/package.json @@ -0,0 +1,12 @@ +{ + "name": "@opentiny/vue-dynamic-scroller-item", + "version": "5.0.0-mf.0", + "description": "", + "main": "lib/index.js", + "module": "index.ts", + "dependencies": { + "@opentiny/vue-common": "workspace:~", + "@opentiny/vue-renderless": "workspace:~" + }, + "license": "MIT" +} diff --git a/packages/vue/src/dynamic-scroller-item/src/index.ts b/packages/vue/src/dynamic-scroller-item/src/index.ts new file mode 100644 index 000000000..9abcd03d4 --- /dev/null +++ b/packages/vue/src/dynamic-scroller-item/src/index.ts @@ -0,0 +1,21 @@ +import { $props, $setup, $prefix, defineComponent } from '@opentiny/vue-common' +import template from 'virtual-template?pc' + +export default defineComponent({ + name: $prefix + 'DynamicScrollerItem', + props: { + ...$props, + // eslint-disable-next-line vue/require-prop-types + item: { required: true }, + watchData: { type: Boolean, default: false }, + // Indicates if the view is actively used to display an item. + active: { type: Boolean, required: true }, + index: { type: Number, default: undefined }, + sizeDependencies: { type: [Array, Object], default: null }, + emitResize: { type: Boolean, default: false }, + tag: { type: String, default: 'div' } + }, + setup(props, context) { + return $setup({ props, context, template }) + } +}) diff --git a/packages/vue/src/dynamic-scroller-item/src/pc.vue b/packages/vue/src/dynamic-scroller-item/src/pc.vue new file mode 100644 index 000000000..3cdd85ffc --- /dev/null +++ b/packages/vue/src/dynamic-scroller-item/src/pc.vue @@ -0,0 +1,16 @@ + diff --git a/packages/vue/src/dynamic-scroller/index.ts b/packages/vue/src/dynamic-scroller/index.ts new file mode 100644 index 000000000..ecfc356e1 --- /dev/null +++ b/packages/vue/src/dynamic-scroller/index.ts @@ -0,0 +1,20 @@ +import DynamicScroller from './src/index' +import RecycleScroller from '@opentiny/vue-recycle-scroller' + +DynamicScroller.IdState = RecycleScroller.IdState + +/* istanbul ignore next */ +DynamicScroller.install = function (Vue) { + Vue.component(DynamicScroller.name, DynamicScroller) +} + +DynamicScroller.version = process.env.COMPONENT_VERSION + +/* istanbul ignore next */ +if (process.env.BUILD_TARGET === 'runtime') { + if (typeof window !== 'undefined' && window.Vue) { + DynamicScroller.install(window.Vue) + } +} + +export default DynamicScroller diff --git a/packages/vue/src/dynamic-scroller/package.json b/packages/vue/src/dynamic-scroller/package.json new file mode 100644 index 000000000..5a5c68899 --- /dev/null +++ b/packages/vue/src/dynamic-scroller/package.json @@ -0,0 +1,13 @@ +{ + "name": "@opentiny/vue-dynamic-scroller", + "version": "5.0.0-mf.0", + "description": "", + "main": "lib/index.js", + "module": "index.ts", + "dependencies": { + "@opentiny/vue-common": "workspace:~", + "@opentiny/vue-renderless": "workspace:~", + "@opentiny/vue-recycle-scroller": "workspace:~" + }, + "license": "MIT" +} diff --git a/packages/vue/src/dynamic-scroller/src/index.ts b/packages/vue/src/dynamic-scroller/src/index.ts new file mode 100644 index 000000000..4da18d37d --- /dev/null +++ b/packages/vue/src/dynamic-scroller/src/index.ts @@ -0,0 +1,22 @@ +import { $props, $setup, $prefix, defineComponent} from '@opentiny/vue-common' +import template from 'virtual-template?pc' + +export default defineComponent({ + name: $prefix + 'DynamicScroller', + props: { + ...$props, + items: { type: Array, required: true }, + keyField: { type: String, default: 'id' }, + direction: { + type: String, + default: 'vertical', + validator: (value) => ['vertical', 'horizontal'].includes(value) + }, + listTag: { type: String, default: 'div' }, + itemTag: { type: String, default: 'div' }, + minItemSize: { type: [Number, String], required: true } + }, + setup(props, context) { + return $setup({ props, context, template }) + } +}) diff --git a/packages/vue/src/dynamic-scroller/src/pc.vue b/packages/vue/src/dynamic-scroller/src/pc.vue new file mode 100644 index 000000000..2ba656528 --- /dev/null +++ b/packages/vue/src/dynamic-scroller/src/pc.vue @@ -0,0 +1,34 @@ + + + diff --git a/packages/vue/src/espace/src/pc.vue b/packages/vue/src/espace/src/pc.vue index 0b57495ed..dcc6c85d2 100644 --- a/packages/vue/src/espace/src/pc.vue +++ b/packages/vue/src/espace/src/pc.vue @@ -13,7 +13,7 @@ - diff --git a/packages/vue/src/exception/src/mobile.vue b/packages/vue/src/exception/src/mobile.vue new file mode 100644 index 000000000..f204d6e4a --- /dev/null +++ b/packages/vue/src/exception/src/mobile.vue @@ -0,0 +1,64 @@ + + + + diff --git a/packages/vue/src/fall-menu/src/pc.vue b/packages/vue/src/fall-menu/src/pc.vue index 4f6ac4ae8..3732a6210 100644 --- a/packages/vue/src/fall-menu/src/pc.vue +++ b/packages/vue/src/fall-menu/src/pc.vue @@ -76,7 +76,7 @@ - diff --git a/packages/vue/src/filter-bar/index.ts b/packages/vue/src/filter-bar/index.ts new file mode 100644 index 000000000..ac3c1000f --- /dev/null +++ b/packages/vue/src/filter-bar/index.ts @@ -0,0 +1,23 @@ +import FilterBar from './src/index' +import { version } from './package.json' + +FilterBar.model = { + prop: 'modelValue', + event: 'update:modelValue' +} + +/* istanbul ignore next */ +FilterBar.install = function (Vue) { + Vue.component(FilterBar.name, FilterBar) +} + +FilterBar.version = version + +/* istanbul ignore next */ +if (process.env.BUILD_TARGET === 'runtime') { + if (typeof window !== 'undefined' && window.Vue) { + FilterBar.install(window.Vue) + } +} + +export default FilterBar diff --git a/packages/vue/src/filter-bar/package.json b/packages/vue/src/filter-bar/package.json new file mode 100644 index 000000000..76da46d95 --- /dev/null +++ b/packages/vue/src/filter-bar/package.json @@ -0,0 +1,21 @@ +{ + "name": "@opentiny/vue-filter-bar", + "version": "3.7.0", + "description": "", + "main": "lib/index.js", + "module": "index.ts", + "sideEffects": false, + "dependencies": { + "@opentiny/vue-common": "workspace:~", + "@opentiny/vue-renderless": "workspace:~" + }, + "license": "MIT", + "devDependencies": { + "@opentiny-internal/vue-test-utils": "workspace:*", + "vitest": "^0.25.7" + }, + "scripts": { + "build": "pnpm -w build:ui $npm_package_name", + "//postversion": "pnpm build" + } +} diff --git a/packages/vue/src/filter-bar/src/index.ts b/packages/vue/src/filter-bar/src/index.ts new file mode 100644 index 000000000..da4f41044 --- /dev/null +++ b/packages/vue/src/filter-bar/src/index.ts @@ -0,0 +1,14 @@ +import { $props, $prefix, $setup, defineComponent } from '@opentiny/vue-common' +import template from 'virtual-template?mobile-first' + +export default defineComponent({ + name: $prefix + 'FilterBar', + props: { + ...$props, + modelValue: Number, + data: Array + }, + setup(props, context) { + return $setup({ props, context, template }) + } +}) diff --git a/packages/vue/src/filter-bar/src/mobile-first.vue b/packages/vue/src/filter-bar/src/mobile-first.vue new file mode 100644 index 000000000..dca65a3b4 --- /dev/null +++ b/packages/vue/src/filter-bar/src/mobile-first.vue @@ -0,0 +1,59 @@ + + + diff --git a/packages/vue/src/filter-box/index.ts b/packages/vue/src/filter-box/index.ts new file mode 100644 index 000000000..4526d7fae --- /dev/null +++ b/packages/vue/src/filter-box/index.ts @@ -0,0 +1,19 @@ +import FilterBox from './src/pc.vue' +import '@opentiny/vue-theme/filter-box/index.less' +import { version } from './package.json' + +/* istanbul ignore next */ +FilterBox.install = function (Vue) { + Vue.component(FilterBox.name, FilterBox) +} + +FilterBox.version = version + +/* istanbul ignore next */ +if (process.env.BUILD_TARGET === 'runtime') { + if (typeof window !== 'undefined' && window.Vue) { + FilterBox.install(window.Vue) + } +} + +export default FilterBox diff --git a/packages/vue/src/filter-box/package.json b/packages/vue/src/filter-box/package.json new file mode 100644 index 000000000..faaf5ff1b --- /dev/null +++ b/packages/vue/src/filter-box/package.json @@ -0,0 +1,14 @@ +{ + "name": "@opentiny/vue-filter-box", + "version": "5.0.0-mf.0", + "description": "", + "main": "lib/index.js", + "module": "index.ts", + "dependencies": { + "@opentiny/vue-renderless": "workspace:~", + "@opentiny/vue-common": "workspace:~", + "@opentiny/vue-icon": "workspace:~", + "@opentiny/vue-tooltip": "workspace:~" + }, + "license": "MIT" +} diff --git a/packages/vue/src/filter-box/src/pc.vue b/packages/vue/src/filter-box/src/pc.vue new file mode 100644 index 000000000..91de10c28 --- /dev/null +++ b/packages/vue/src/filter-box/src/pc.vue @@ -0,0 +1,60 @@ + + + diff --git a/packages/vue/src/filter-panel/index.ts b/packages/vue/src/filter-panel/index.ts new file mode 100644 index 000000000..2a5bae7bc --- /dev/null +++ b/packages/vue/src/filter-panel/index.ts @@ -0,0 +1,19 @@ +import FilterPanel from './src/pc.vue' +import '@opentiny/vue-theme/filter-panel/index.less' +import { version } from './package.json' + +/* istanbul ignore next */ +FilterPanel.install = function (Vue) { + Vue.component(FilterPanel.name, FilterPanel) +} + +FilterPanel.version = version + +/* istanbul ignore next */ +if (process.env.BUILD_TARGET === 'runtime') { + if (typeof window !== 'undefined' && window.Vue) { + FilterPanel.install(window.Vue) + } +} + +export default FilterPanel diff --git a/packages/vue/src/filter-panel/package.json b/packages/vue/src/filter-panel/package.json new file mode 100644 index 000000000..e5315abfb --- /dev/null +++ b/packages/vue/src/filter-panel/package.json @@ -0,0 +1,14 @@ +{ + "name": "@opentiny/vue-filter-panel", + "version": "5.0.0-mf.0", + "description": "", + "main": "lib/index.js", + "module": "index.ts", + "dependencies": { + "@opentiny/vue-renderless": "workspace:~", + "@opentiny/vue-common": "workspace:~", + "@opentiny/vue-filter-box": "workspace:~", + "@opentiny/vue-popover": "workspace:~" + }, + "license": "MIT" +} diff --git a/packages/vue/src/filter-panel/src/pc.vue b/packages/vue/src/filter-panel/src/pc.vue new file mode 100644 index 000000000..b5bc8beef --- /dev/null +++ b/packages/vue/src/filter-panel/src/pc.vue @@ -0,0 +1,63 @@ + + + diff --git a/packages/vue/src/filter/index.ts b/packages/vue/src/filter/index.ts new file mode 100644 index 000000000..6735bc1a4 --- /dev/null +++ b/packages/vue/src/filter/index.ts @@ -0,0 +1,23 @@ +import Filter from './src/index' +import { version } from './package.json' + +Filter.model = { + prop: 'modelValue', + event: 'update:modelValue' +} + +/* istanbul ignore next */ +Filter.install = function (Vue) { + Vue.component(Filter.name, Filter) +} + +Filter.version = version + +/* istanbul ignore next */ +if (process.env.BUILD_TARGET === 'runtime') { + if (typeof window !== 'undefined' && window.Vue) { + Filter.install(window.Vue) + } +} + +export default Filter diff --git a/packages/vue/src/filter/package.json b/packages/vue/src/filter/package.json new file mode 100644 index 000000000..f461d3f5d --- /dev/null +++ b/packages/vue/src/filter/package.json @@ -0,0 +1,23 @@ +{ + "name": "@opentiny/vue-filter", + "version": "3.7.0", + "description": "", + "main": "lib/index.js", + "module": "index.ts", + "sideEffects": false, + "dependencies": { + "@opentiny/vue-button": "workspace:~", + "@opentiny/vue-common": "workspace:~", + "@opentiny/vue-filter-bar": "workspace:~", + "@opentiny/vue-renderless": "workspace:~" + }, + "license": "MIT", + "devDependencies": { + "@opentiny-internal/vue-test-utils": "workspace:*", + "vitest": "^0.25.7" + }, + "scripts": { + "build": "pnpm -w build:ui $npm_package_name", + "//postversion": "pnpm build" + } +} diff --git a/packages/vue/src/filter/src/index.ts b/packages/vue/src/filter/src/index.ts new file mode 100644 index 000000000..950d6491f --- /dev/null +++ b/packages/vue/src/filter/src/index.ts @@ -0,0 +1,22 @@ +import { $props, $prefix, $setup, defineComponent } from '@opentiny/vue-common' +import template from 'virtual-template?mobile-first' + +export default defineComponent({ + name: $prefix + 'Filter', + props: { + ...$props, + data: Array, + modelValue: Array, + columnNum: { + type: Number, + default: 3 + }, + filterGroup: Array, + filterValue: Array, + panelClass: String, + customClass: String + }, + setup(props, context) { + return $setup({ props, context, template }) + } +}) diff --git a/packages/vue/src/filter/src/mobile-first.vue b/packages/vue/src/filter/src/mobile-first.vue new file mode 100644 index 000000000..6844f9ecc --- /dev/null +++ b/packages/vue/src/filter/src/mobile-first.vue @@ -0,0 +1,81 @@ + + + diff --git a/packages/vue/src/filter/src/tag-group.vue b/packages/vue/src/filter/src/tag-group.vue new file mode 100644 index 000000000..db162d3c7 --- /dev/null +++ b/packages/vue/src/filter/src/tag-group.vue @@ -0,0 +1,49 @@ + + + diff --git a/packages/vue/src/floatbar/src/index.ts b/packages/vue/src/floatbar/src/index.ts index 0fab49980..6cee72355 100644 --- a/packages/vue/src/floatbar/src/index.ts +++ b/packages/vue/src/floatbar/src/index.ts @@ -20,5 +20,4 @@ export default defineComponent({ setup(props, context) { return $setup({ props, context, template }) } -} -) +}) diff --git a/packages/vue/src/floatbar/src/pc.vue b/packages/vue/src/floatbar/src/pc.vue index 357424bf5..36ef006a4 100644 --- a/packages/vue/src/floatbar/src/pc.vue +++ b/packages/vue/src/floatbar/src/pc.vue @@ -22,7 +22,7 @@ - diff --git a/packages/vue/src/flowchart/src/pc.vue b/packages/vue/src/flowchart/src/pc.vue new file mode 100644 index 000000000..6503035e7 --- /dev/null +++ b/packages/vue/src/flowchart/src/pc.vue @@ -0,0 +1,133 @@ + diff --git a/packages/vue/src/form-item/index.ts b/packages/vue/src/form-item/index.ts index 8cd362cb3..b89059ccb 100644 --- a/packages/vue/src/form-item/index.ts +++ b/packages/vue/src/form-item/index.ts @@ -9,7 +9,7 @@ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS. * */ -import FormItem from './src/index.vue' +import FormItem from './src/index' /* istanbul ignore next */ FormItem.install = function (Vue) { diff --git a/packages/vue/src/form-item/src/index.ts b/packages/vue/src/form-item/src/index.ts new file mode 100644 index 000000000..7466af5b0 --- /dev/null +++ b/packages/vue/src/form-item/src/index.ts @@ -0,0 +1,67 @@ +import { $props, $prefix, $setup, defineComponent } from '@opentiny/vue-common' +import template from 'virtual-template?pc|mobile-first' + +const $constants = { + FORM_NAME: 'Form', + FORM_ITEM_NAME: 'FormItem' +} + +export default defineComponent({ + name: $prefix + 'FormItem', + componentName: 'FormItem', + props: { + ...$props, + _constants: { + type: Object, + default: () => $constants + }, + appendToBody: { + type: Boolean, + default: undefined + }, + error: String, + for: String, + inlineMessage: { + type: [String, Boolean], + default: '' + }, + label: String, + labelWidth: String, + manual: Boolean, + popperOptions: { + type: Object, + default: () => ({}) + }, + prop: String, + required: { + type: Boolean, + default: undefined + }, + rules: [Object, Array], + showMessage: { + type: Boolean, + default: true + }, + size: String, + tipContent: String, + validateDebounce: Boolean, + validatePosition: String, + validateStatus: String, + validateType: String, + validateIcon: { + type: Object, + default: null + }, + ellipsis: { + type: Boolean, + default: false + }, + vertical: { + type: Boolean, + default: false + } + }, + setup(props, context) { + return $setup({ props, context, template }) + } +}) diff --git a/packages/vue/src/form-item/src/index.vue b/packages/vue/src/form-item/src/index.vue index 2e4033069..3de683552 100644 --- a/packages/vue/src/form-item/src/index.vue +++ b/packages/vue/src/form-item/src/index.vue @@ -91,13 +91,6 @@ export default defineComponent({ const formItemClass = `${classPrefix}form-item--${state.sizeClass ? state.sizeClass : ''}` const isShowError = state.validateState === 'error' && showMessage && state.form.showMessage const isErrorInline = typeof inlineMessage === 'boolean' ? inlineMessage : (state.formInstance && state.formInstance.inlineMessage) || false - - // 设置只读下label的样式 - const isReadonly = defaultSlots.some((vnode) => { - const props = parseVnode(vnode)?.props - return props && (props['readonly'] === '' || props['readonly']) - }) - let validateMessage = null const FormContent = defaultSlots @@ -168,10 +161,7 @@ export default defineComponent({ return h( 'div', { - class: { - [`${classPrefix}form-item__value`]: true, - 'is-readonly': isMobile && props && (props['readonly'] === '' || props['readonly']) - }, + class: `${classPrefix}form-item__value`, style: state.valueStyle }, [item] @@ -237,8 +227,7 @@ export default defineComponent({ { class: { [`${classPrefix}form-item__label`]: true, - 'is-ellipsis': isMobile && ellipsis, - 'is-readonly': isMobile && isReadonly + 'is-ellipsis': isMobile && ellipsis }, style: state.labelStyle, attrs: { @@ -261,8 +250,7 @@ export default defineComponent({ 'is-success': state.validateState === 'success', 'is-required': state.isRequired || required, 'is-no-asterisk': state.formInstance && state.formInstance.hideRequiredAsterisk, - [formItemClass]: true, - 'is-readonly': isMobile && isReadonly + [formItemClass]: true } }, [ diff --git a/packages/vue/src/form-item/src/mobile-first.vue b/packages/vue/src/form-item/src/mobile-first.vue new file mode 100644 index 000000000..4f3cfd0cf --- /dev/null +++ b/packages/vue/src/form-item/src/mobile-first.vue @@ -0,0 +1,181 @@ + + + diff --git a/packages/vue/src/form-item/src/pc.vue b/packages/vue/src/form-item/src/pc.vue new file mode 100644 index 000000000..ddebd1138 --- /dev/null +++ b/packages/vue/src/form-item/src/pc.vue @@ -0,0 +1,286 @@ + + diff --git a/packages/vue/src/form/index.ts b/packages/vue/src/form/index.ts index f986b4610..9959fce9d 100644 --- a/packages/vue/src/form/index.ts +++ b/packages/vue/src/form/index.ts @@ -10,12 +10,15 @@ * */ import Form from './src/index' +import { version } from './package.json' /* istanbul ignore next */ Form.install = function (Vue) { Vue.component(Form.name, Form) } +Form.version = version + /* istanbul ignore next */ if (process.env.BUILD_TARGET === 'runtime') { if (typeof window !== 'undefined' && window.Vue) { diff --git a/packages/vue/src/form/src/index.ts b/packages/vue/src/form/src/index.ts index 0b3fca549..a1022e352 100644 --- a/packages/vue/src/form/src/index.ts +++ b/packages/vue/src/form/src/index.ts @@ -10,7 +10,7 @@ * */ import { $props, $prefix, $setup, defineComponent } from '@opentiny/vue-common' -import template from 'virtual-template?pc|mobile' +import template from 'virtual-template?pc|mobile|mobile-first' export default defineComponent({ name: $prefix + 'Form', @@ -83,6 +83,18 @@ export default defineComponent({ popperOptions: { type: Object, default: () => ({}) + }, + displayOnly: { + type: Boolean, + default: false + }, + valueSplit: { + type: String, + default: '; ' + }, + showAutoWidth: { + type: Boolean, + default: false } }, setup(props, context) { diff --git a/packages/vue/src/form/src/mobile-first.vue b/packages/vue/src/form/src/mobile-first.vue new file mode 100644 index 000000000..38fc685c7 --- /dev/null +++ b/packages/vue/src/form/src/mobile-first.vue @@ -0,0 +1,66 @@ + + + diff --git a/packages/vue/src/fullscreen/index.ts b/packages/vue/src/fullscreen/index.ts index 749d47bcf..ab7b2df4b 100644 --- a/packages/vue/src/fullscreen/index.ts +++ b/packages/vue/src/fullscreen/index.ts @@ -9,7 +9,7 @@ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS. * */ -import Fullscreen from './src/index.vue' +import Fullscreen from './src/pc.vue' import FullscreenApi from '@opentiny/vue-renderless/common/deps/fullscreen/apis' import '@opentiny/vue-theme/fullscreen/index.less' import { version } from './package.json' diff --git a/packages/vue/src/fullscreen/src/pc.vue b/packages/vue/src/fullscreen/src/pc.vue new file mode 100644 index 000000000..b023f557c --- /dev/null +++ b/packages/vue/src/fullscreen/src/pc.vue @@ -0,0 +1,63 @@ + + + + diff --git a/packages/vue/src/grid-toolbar/src/custom-saas.vue b/packages/vue/src/grid-toolbar/src/custom-saas.vue new file mode 100644 index 000000000..d10437a4f --- /dev/null +++ b/packages/vue/src/grid-toolbar/src/custom-saas.vue @@ -0,0 +1,926 @@ + + + diff --git a/packages/vue/src/grid-toolbar/src/index.ts b/packages/vue/src/grid-toolbar/src/index.ts index 6fc76ee64..acb6ec0ed 100644 --- a/packages/vue/src/grid-toolbar/src/index.ts +++ b/packages/vue/src/grid-toolbar/src/index.ts @@ -35,6 +35,7 @@ import { } from '@opentiny/vue-renderless/grid/utils' import GridCustom from './custom.vue' import GridCustomSelect from './custom-select.vue' +import GridCustomSaas from './custom-saas.vue' import { GridButton, GridConfig, GridAdapter, GridTools } from '@opentiny/vue-grid' const classMap = { @@ -90,19 +91,19 @@ function renderCustomWrapper({ _vm, settingStore, settingsBtnOns, tableFullColum h('div', { class: 'tiny-grid-custom__setting-btn', on: settingsBtnOns }, [ setting?.simple ? h('tiny-grid-custom-select', { - on: { - saveSettings: _vm.handleSaveSettings - }, - props: { - data: tableFullColumn, - setting, - value: settingStore.customVisible - } - }) + on: { + saveSettings: _vm.handleSaveSettings + }, + props: { + data: tableFullColumn, + setting, + value: settingStore.customVisible + } + }) : h(GridConfig.icon.custom, { class: 'tiny-svg-size' }) ]), h('div', { class: 'tiny-grid-custom__option-wrapper' }, [ - h('tiny-grid-custom', { + h(_vm.customMode === 'saas' ? 'tiny-grid-custom-saas' : 'tiny-grid-custom', { on: { showModal: (modalVisible) => (settingStore.customVisible = modalVisible), saveSettings: _vm.handleSaveSettings, @@ -110,9 +111,11 @@ function renderCustomWrapper({ _vm, settingStore, settingsBtnOns, tableFullColum cancelSettings: () => _vm.$emit('cancel-setting') }, props: { + customMode: _vm.customMode, data: tableFullColumn, value: settingStore.customVisible, other: setting.other, + search: setting.search, keys: setting.keys, sortable: setting.sortable, filter: setting.filter, @@ -121,7 +124,10 @@ function renderCustomWrapper({ _vm, settingStore, settingsBtnOns, tableFullColum refresh: setting.refresh, numberSorting: setting.numberSorting, multipleHistory: setting.multipleHistory, - initSettings + initSettings, + resetMethod: _vm.resetMethod, + alwaysShowColumns: setting.alwaysShowColumns, + columnsGroup: setting.columnsGroup }, ref: 'custom' }) @@ -202,6 +208,7 @@ export default defineComponent({ components: { TinyGridCustom: GridCustom, TinyGridCustomSelect: GridCustomSelect, + TinyGridCustomSaas: GridCustomSaas, IconFullscreen: iconFullscreen(), IconMinscreen: iconMinscreen() }, @@ -226,7 +233,8 @@ export default defineComponent({ data: Array, customs: Array, beforeOpenFullScreen: Function, - beforeCloseFullScreen: Function + beforeCloseFullScreen: Function, + resetMethod: Function }, inject: { $grid: { @@ -588,7 +596,7 @@ export default defineComponent({ this.saveColumnWidth(isReset) tableComp.analyColumnWidth() - return tableComp.recalculate(true) + return tableComp.recalculate() }, updateSetting() { const tableComp = this.$grid || this.table @@ -608,7 +616,7 @@ export default defineComponent({ // 处理表格数据,否则列排序不生效 this.$grid.handleTableData(true).then(() => { // 重新计算内部元素的位置 - this.$grid.recalculate(true) + this.$grid.recalculate() }) }) } diff --git a/packages/vue/src/grid/index.ts b/packages/vue/src/grid/index.ts index 5f9649a32..afce7c139 100644 --- a/packages/vue/src/grid/index.ts +++ b/packages/vue/src/grid/index.ts @@ -28,17 +28,17 @@ import GridButton from './src/button' import * as GridTools from './src/tools' import { version } from './package.json' +// 右键菜单、内置编辑器、导出、键盘操作、校验、响应式改变表格宽高(auto-resize)、筛选 const components = [Menu, Edit, Export, Keyboard, Validator, Resize, Filter] -function install() { - GridAdapter.setup({ i18n: t }) +// 设置全局参数,配置GlobalConfig,提供比如国际化方法 +GridAdapter.setup({ i18n: t }) +GridAdapter.t = t - GridAdapter.t = t +// 把各个插件的方法都合并会$table +components.map((component) => component.install(Table)) - components.map((component) => component.install(Table)) -} -install() Grid.version = version @@ -54,5 +54,5 @@ if (process.env.BUILD_TARGET === 'runtime') { } export default Grid - +// 按需引入插件 export { GridColumn, GridConfig, GridAdapter, GridRadio, GridButton, GridTools } diff --git a/packages/vue/src/grid/src/body/src/body.tsx b/packages/vue/src/grid/src/body/src/body.tsx index 6c3aaa190..d6edf4ffd 100644 --- a/packages/vue/src/grid/src/body/src/body.tsx +++ b/packages/vue/src/grid/src/body/src/body.tsx @@ -22,6 +22,7 @@ * SOFTWARE. * */ + import { isFunction, find } from '@opentiny/vue-renderless/grid/static/' import { isNull } from '@opentiny/vue-renderless/common/type' import { @@ -37,8 +38,9 @@ import GlobalConfig from '../../config' import { iconChevronRight, iconChevronDown } from '@opentiny/vue-icon' import { h, hooks, $prefix } from '@opentiny/vue-common' import { getTreeChildrenKey, getTreeShowKey, getTableCellKey } from '../../table/src/strategy' +import { generateFixedClassName } from '../../table/src/utils/handleFixedColumn' -// 滚动、拖动过程中不需要触发 +// 滚动、拖动过程中不需要触发鼠标移入移出事件 const isOperateMouse = ($table) => $table._isResize || ($table.lastScrollTime && Date.now() < $table.lastScrollTime + $table.optimizeOpts.delayHover) @@ -50,7 +52,7 @@ const classMap = { colSelection: 'col__selection', colEllipsis: 'col__ellipsis', editVisible: 'edit__visible', - fixedHidden: 'fixed__hidden', + fixedColumn: 'fixed__column', colDirty: 'col__dirty', colActived: 'col__actived', rowNew: 'row__new', @@ -90,6 +92,7 @@ const renderBorder = (h, type) => { function buildColumnProps(args) { let { attrs, cellAlign, cellClassName, className, column, columnActived, columnIndex, columnKey, editor } = args let { fixedHiddenColumn, hasEllipsis, isDirty, params, tdOns, validError, validated } = args + return { class: [ 'tiny-grid-body__column', @@ -102,7 +105,7 @@ function buildColumnProps(args) { [classMap.colSelection]: column.type === 'selection', [classMap.colEllipsis]: hasEllipsis, [classMap.editVisible]: editor && editor.type === 'visible', - [classMap.fixedHidden]: fixedHiddenColumn, + [classMap.fixedColumn]: fixedHiddenColumn, [classMap.colDirty]: isDirty, [classMap.colActived]: columnActived, 'col__valid-error': validError && validated, @@ -121,13 +124,13 @@ function buildColumnChildren(args) { let { h, hasDefaultTip, params, row, validError } = args let { allColumnOverflow, column, fixedHiddenColumn } = args let { showEllipsis, showTip, showTitle, showTooltip, validStore } = args - let res = [] + let cellNode: any[] = [] if (!allColumnOverflow || !fixedHiddenColumn) { - let res1 = null + let validNode: any = null if (hasDefaultTip) { - res1 = [null] + validNode = [null] if (validError) { - res1 = h( + validNode = h( 'div', { class: 'tiny-grid-cell__valid', @@ -137,7 +140,7 @@ function buildColumnChildren(args) { ) } } - res = [ + cellNode = [ h( 'div', { @@ -152,12 +155,13 @@ function buildColumnChildren(args) { attrs: { title: showTitle ? getCellLabel(row, column, params) : null }, key: getTableCellKey(params) }, + // 调用column组件的renderCell渲染单元格内部的内容 column.renderCell(h, params) ), - res1 + validNode ] } - return res + return cellNode } function modifyCellAlign({ cellAlign, column }) { @@ -315,14 +319,14 @@ function isCellDirty({ $table, column, editConfig, fixedHiddenColumn, isDirty, r const setColumnEvents = (args1) => { let { $columnIndex, $rowIndex, $table, column, columnIndex } = args1 - let { fixedType, row, rowIndex, rowLevel, seq } = args1 + let { row, rowIndex, rowLevel, seq } = args1 let { editConfig, expandConfig = {} } = $table let { radioConfig = {}, showOverflow: allColumnOverflow } = $table let { highlightCurrentRow, mouseConfig = {}, overflowX } = $table let { scrollXLoad, scrollYLoad, selectConfig = {} } = $table let { tableListeners, treeConfig = {} } = $table let tdOns = {} - let fixedHiddenColumn = fixedType ? column.fixed !== fixedType : column.fixed && overflowX + let fixedHiddenColumn = column.fixed && overflowX let { editor, showOverflow, showTip } = column let cellOverflow = isNull(showOverflow) ? allColumnOverflow : showOverflow let showTitle = cellOverflow === 'title' @@ -331,15 +335,15 @@ const setColumnEvents = (args1) => { let hasEllipsis = showTitle || showTooltip || showEllipsis let triggerDblclick = editor && editConfig && editConfig.trigger === 'dblclick' - let commonParams = { $columnIndex, $rowIndex, $table, column, columnIndex, fixed: fixedType } + let commonParams = { $columnIndex, $rowIndex, $table, column, columnIndex } Object.assign(commonParams, { isHidden: fixedHiddenColumn, level: rowLevel, row, rowIndex, seq }) let evntParams = { showTip, ...commonParams } // 滚动的渲染不支持动态行高 showEllipsis = modifyShowEllipsis({ hasEllipsis, scrollXLoad, scrollYLoad, showEllipsis }) - // hover 进入事件 + // 单元格hover 进入事件 addListenerMouseenter({ $table, evntParams, showTip, showTitle, showTooltip, tableListeners, tdOns }) - // hover 退出事件 + // 单元格hover 退出事件 addListenerMouseleave({ $table, evntParams, showTip, showTooltip, tableListeners, tdOns }) // 按下事件处理 addListenerMousedown({ $table, evntParams, mouseConfig, tdOns }) @@ -364,9 +368,7 @@ const setColumnEvents = (args1) => { } } -/** - * 渲染列 - */ +// 渲染列 function renderColumn(args1) { let { $seq, $table, column, columnIndex } = args1 let { h, row } = args1 @@ -403,22 +405,25 @@ function renderColumn(args1) { if (!doSpan({ attrs, params, rowSpan, spanMethod })) { return } - // 如果显示状态 + // 编辑后的显示状态(是否该单元格数据被更改)此处如果是树表大数据虚拟滚动+表格编辑器,会造成卡顿,这里需要递归树表数据 isDirty = isCellDirty({ $table, column, editConfig, fixedHiddenColumn, isDirty, row }) args = { attrs, cellAlign, cellClassName, className, column, columnActived, columnIndex, columnKey, editor } Object.assign(args, { fixedHiddenColumn, hasEllipsis, isDirty, params, tdOns, validError, validated }) - let colProps = buildColumnProps(args) + // 组装渲染单元格td所需要的props属性 + const colProps = buildColumnProps(args) args = { allColumnOverflow, column, fixedHiddenColumn, h, hasDefaultTip, params, row } Object.assign(args, { showEllipsis, showTip, showTitle, showTooltip, validError, validStore }) - let colChildren = buildColumnChildren(args) + + // 渲染td单元格中的div元素(自定义渲染和编辑器) + const colChildren = buildColumnChildren(args) return h('td', colProps, colChildren) } function renderRowGroupTds(args) { - let { closeable, currentIcon, field, group, render } = args - let { row, tableColumn, targetColumn, tds, title } = args + const { closeable, currentIcon, field, group, render } = args + const { row, tableColumn, targetColumn, tds, title } = args for (let index in tableColumn) { if (Object.prototype.hasOwnProperty.call(tableColumn, index)) { const column = tableColumn[index] @@ -454,19 +459,6 @@ function renderRowGroupTds(args) { } } -function addRowListenerMouseenter({ $table, highlightHoverRow, row, rowIndex, trOn }) { - if (!highlightHoverRow) { - return - } - - trOn.mouseenter = (event) => { - if (isOperateMouse($table)) { - return - } - $table.triggerHoverEvent(event, { row, rowIndex }) - } -} - function renderRowGroupData({ groupData, groupFolds, row, rowGroup, rowid, rows, tableColumn }) { if (!groupData[rowid]) { return @@ -509,7 +501,7 @@ function renderRowGroupData({ groupData, groupFolds, row, rowGroup, rowid, rows, function renderRow(args) { let { $rowIndex, $seq, $table, _vm, editStore } = args - let { fixedType, groupFolds, h, row, rowActived } = args + let { groupFolds, h, row, rowActived } = args let { rowClassName, rowIndex, rowKey, rowLevel, rowid, rows } = args let { selection, seq, tableColumn, trOn, treeConfig } = args let { scrollYLoad } = $table @@ -534,7 +526,7 @@ function renderRow(args) { }, rowClassName ? isFunction(rowClassName) - ? rowClassName({ $table, $seq, seq, fixedType, rowLevel, row, rowIndex, $rowIndex }) + ? rowClassName({ $table, $seq, seq, rowLevel, row, rowIndex, $rowIndex }) : rowClassName : '' ], @@ -548,7 +540,7 @@ function renderRow(args) { let columnIndex = $table.getColumnIndex(column) let args1 = { $columnIndex, $rowIndex, $seq, $table, _vm, column, columnIndex } - Object.assign(args1, { fixedType, h, row, rowIndex, rowLevel, seq }) + Object.assign(args1, { h, row, rowIndex, rowLevel, seq }) return renderColumn(args1) }) @@ -562,12 +554,12 @@ function renderRowAfter({ $table, h, row, rowIndex, rows, tableData }) { } function renderRowExpanded(args) { - let { $table, expandMethod, expandeds, fixedType, h, row, rowIndex } = args - let { rowLevel, rowid, rows, seq, tableColumn, trOn, treeConfig } = args + const { $table, expandMethod, expandeds, h, row, rowIndex } = args + const { rowLevel, rowid, rows, seq, tableColumn, trOn, treeConfig } = args if (expandeds.length && expandeds.includes(row) && (typeof expandMethod === 'function' ? expandMethod(row) : true)) { - let column = find(tableColumn, (column) => column.type === 'expand') - let columnIndex = $table.getColumnIndex(column) + const column = find(tableColumn, (column) => column.type === 'expand') + const columnIndex = $table.getColumnIndex(column) let cellStyle if (treeConfig) { @@ -575,7 +567,7 @@ function renderRowExpanded(args) { } if (column) { - const renderData = { $table, seq, row, rowIndex, column, columnIndex, fixed: fixedType, level: rowLevel } + const renderData = { $table, seq, row, rowIndex, column, columnIndex, level: rowLevel } rows.push( h( 'tr', @@ -595,7 +587,7 @@ function renderRowExpanded(args) { h( 'div', { - class: ['tiny-grid-body__expanded-cell', { [classMap.fixedHidden]: fixedType }], + class: 'tiny-grid-body__expanded-cell', style: cellStyle }, [column.renderData(h, renderData)] @@ -610,7 +602,7 @@ function renderRowExpanded(args) { } function renderRowTree(args, renderRows) { - let { $seq, $table, _vm, fixedType, h, row, rowLevel } = args + let { $seq, $table, _vm, h, row, rowLevel } = args let { rows, seq, seqCount, tableColumn, treeConfig, treeExpandeds } = args let { scrollYLoad } = $table @@ -631,7 +623,6 @@ function renderRowTree(args, renderRows) { Object.assign(args1, { rowLevel: rowLevel + 1, - fixedType, tableData: rowChildren, tableColumn, seqCount @@ -640,17 +631,17 @@ function renderRowTree(args, renderRows) { rows.push.apply(rows, renderRows(args1)) } -function renderRows({ h, _vm, $table, $seq, rowLevel, fixedType, tableData, tableColumn, seqCount }) { - let { rowKey, highlightHoverRow, rowClassName, treeConfig, treeExpandeds, groupFolds } = $table +function renderRows({ h, _vm, $table, $seq, rowLevel, tableData, tableColumn, seqCount }) { + let { rowKey, rowClassName, treeConfig, treeExpandeds, groupFolds } = $table let { groupData, scrollYLoad, scrollYStore, editConfig, editStore } = $table let { expandConfig = {}, expandeds, selection, rowGroup } = $table let rows = [] let expandMethod = expandConfig.activeMethod let startIndex = scrollYStore.startIndex - let isOrdered = treeConfig ? !!treeConfig.ordered : false - + let isOrdered = treeConfig ? Boolean(treeConfig.ordered) : false seqCount = seqCount || { value: 0 } + // 循环表格数据,生成表格主体内容VNode,此处也是性能优化的整改点 tableData.forEach((row, $rowIndex) => { let trOn = {} let rowIndex = $rowIndex @@ -665,27 +656,25 @@ function renderRows({ h, _vm, $table, $seq, rowLevel, fixedType, tableData, tabl // 确保任何情况下 rowIndex 都精准指向真实 data 索引 rowIndex = $table.getRowIndex(row) - // 事件绑定 - addRowListenerMouseenter({ $table, highlightHoverRow, row, rowIndex, trOn }) let rowid = getRowid($table, row) // 如果有表格分组信息,则执行分组逻辑 renderRowGroupData({ groupData, groupFolds, row, rowGroup, rowid, rows, tableColumn }) - let args = { $rowIndex, $seq, $table, _vm, editStore, fixedType, groupFolds, h, row, rowActived } + let args = { $rowIndex, $seq, $table, _vm, editStore, groupFolds, h, row, rowActived } Object.assign(args, { rowClassName, rowIndex, rowKey, rowLevel, rowid, rows, selection, seq }) Object.assign(args, { tableColumn, trOn, treeConfig }) - // 输入表格行列的vnode节点列表 + // 输出表格行列的vnode节点列表 renderRow(args) // 允许用户自定义表格行渲染后的逻辑 renderRowAfter({ $table, h, row, rowIndex, rows, tableData }) - args = { $table, expandMethod, expandeds, fixedType, h, row, rowIndex, rowLevel } + args = { $table, expandMethod, expandeds, h, row, rowIndex, rowLevel } Object.assign(args, { rowid, rows, seq, tableColumn, trOn, treeConfig }) // 如果行被展开了,这里渲染展开行的vnode节点 renderRowExpanded(args) - args = { $seq, $table, _vm, fixedType, h, row, rowLevel, rows } + args = { $seq, $table, _vm, h, row, rowLevel, rows } Object.assign(args, { seq, seqCount, tableColumn, treeConfig, treeExpandeds }) // 如果是树形表格,则会递归渲染已展开行的子节点 @@ -695,34 +684,6 @@ function renderRows({ h, _vm, $table, $seq, rowLevel, fixedType, tableData, tabl return rows } -/** - * 同步滚动条 - * scroll 方式:可以使固定列与内容保持一致的滚动效果,处理相对麻烦 - * mousewheel 方式:对于同步滚动效果就略差了,左右滚动,内容跟随即可 - */ -let handlerScrollTimeout - -function syncBodyScroll(scrollTop, elemDist1, elemDist2) { - if (elemDist1) { - elemDist1.onscroll = null - elemDist1.scrollTop = scrollTop - } - - if (elemDist2) { - elemDist2.onscroll = null - elemDist2.scrollTop = scrollTop - } - - clearTimeout(handlerScrollTimeout) - - handlerScrollTimeout = setTimeout(() => { - elemDist1 && (elemDist1.onscroll = elemDist1._onscroll) - elemDist2 && (elemDist2.onscroll = elemDist2._onscroll) - elemDist1 && (elemDist1.scrollTop = scrollTop) - elemDist2 && (elemDist2.scrollTop = scrollTop) - }, 100) -} - function renderDefEmpty(h) { return [ h('p', { @@ -738,61 +699,20 @@ function renderDefEmpty(h) { ] } -function syncScrollTop(args) { - let { $table, bodyElem, fixedType, footerElem, headerElem } = args - let { isX, isY, leftElem, rightElem, scrollTop } = args - let ruleChains = [ - { - match: () => leftElem && fixedType === 'left', - action: () => { - scrollTop = leftElem.scrollTop - syncBodyScroll(scrollTop, bodyElem, rightElem) - } - }, - { - match: () => rightElem && fixedType === 'right', - action: () => { - scrollTop = rightElem.scrollTop - syncBodyScroll(scrollTop, bodyElem, leftElem) - } - }, - { - match: () => true, - action: () => { - if (isX && headerElem) { - headerElem.scrollLeft = bodyElem.scrollLeft - } - if (isX && footerElem) { - footerElem.scrollLeft = bodyElem.scrollLeft - } - - let fixedElem = leftElem || rightElem - - if (fixedElem) { - $table.checkScrolling() - } - - if (fixedElem && isY) { - syncBodyScroll(scrollTop, leftElem, rightElem) - } - } - } - ] - - for (let i = 0; i < ruleChains.length; i++) { - if (ruleChains[i].match()) { - ruleChains[i].action() - break - } +const syncHeaderAndFooterScroll = ({ bodyElem, footerElem, headerElem, isX }) => { + if (isX && headerElem) { + headerElem.scrollLeft = bodyElem.scrollLeft + } + if (isX && footerElem) { + footerElem.scrollLeft = bodyElem.scrollLeft } - - return scrollTop } function doScrollLoad({ $table, _vm, bodyElem, event, headerElem, isX, isY, scrollLeft, scrollXLoad, scrollYLoad }) { let isScrollX = scrollXLoad && isX if (isScrollX) { + // 处理x轴方法虚拟滚动加载数据逻辑 $table.triggerScrollXEvent(event) } @@ -806,31 +726,27 @@ function doScrollLoad({ $table, _vm, bodyElem, event, headerElem, isX, isY, scro } if (scrollYLoad && isY) { + // 处理y轴方法虚拟滚动加载数据逻辑 $table.triggerScrollYEvent(event) } } -function renderEmptyBlock({ $slots, $table, _vm, fixedType, isCenterCls, renderEmpty, tableData }) { - let res = null - - if (!fixedType) { - res = h( - 'div', - { - class: `tiny-grid__empty-block${tableData.length ? '' : ' is__visible'} ${isCenterCls}`, - ref: 'emptyBlock' - }, - $slots.empty ? $slots.empty.call(_vm, { $table }, h) : renderEmpty ? [renderEmpty(h, $table)] : renderDefEmpty(h) - ) - } - - return res +function renderEmptyBlock({ $slots, $table, _vm, isCenterCls, renderEmpty, tableData }) { + return h( + 'div', + { + class: `tiny-grid__empty-block${tableData.length ? '' : ' is__visible'} ${isCenterCls}`, + ref: 'emptyBlock' + }, + $slots.empty ? $slots.empty.call(_vm, { $table }, h) : renderEmpty ? [renderEmpty(h, $table)] : renderDefEmpty(h) + ) } -function renderBorders({ fixedType, keyboardConfig, mouseConfig }) { - let res = null +function renderBorders({ keyboardConfig, mouseConfig }) { + let res: any = null - if (!fixedType && (mouseConfig.checked || keyboardConfig.isCut)) { + // 如果用户配置了鼠标和键盘配置项 + if (mouseConfig.checked || keyboardConfig.isCut) { res = h('div', { class: 'tiny-grid__borders' }, [ mouseConfig.checked ? renderBorder(h, 'check') : null, keyboardConfig.isCut ? renderBorder(h, 'copy') : null @@ -840,7 +756,7 @@ function renderBorders({ fixedType, keyboardConfig, mouseConfig }) { return res } -function renderTable({ $table, _vm, clearHoverRow, fixedType, tableColumn, tableData, tableLayout }) { +function renderTable({ $table, _vm, tableColumn, tableData, tableLayout }) { return h( 'table', { @@ -850,38 +766,30 @@ function renderTable({ $table, _vm, clearHoverRow, fixedType, tableColumn, table ref: 'table' }, [ - // 列宽 + // 渲染colgroup标签,设置表格列宽度,保证表头的表格和表体的表格每列宽相同 h( 'colgroup', { ref: 'colgroup' }, tableColumn.map((column, columnIndex) => h('col', { attrs: { name: column.id }, key: columnIndex })) ), - // 内容 - h( - 'tbody', - { ref: 'tbody', on: { mouseleave: clearHoverRow } }, - renderRows({ h, _vm, $table, $seq: '', rowLevel: 0, fixedType, tableData, tableColumn }) - ) + // 表格每次数据改变都会触发renderRow重新执行,会造成性能损失,此处待优化 + h('tbody', { ref: 'tbody' }, renderRows({ h, _vm, $table, $seq: '', rowLevel: 0, tableData, tableColumn })) ] ) } +// 如果scrollLoad存在,标识开启了滚动分页功能 function renderYSpace({ scrollLoad }) { return h('div', { class: 'tiny-grid-body__y-space visual', ref: 'ySpace' }, [ scrollLoad ? h('div', { class: 'tiny-grid-body__y-scrollbar' }) : [null] ]) } -function renderXSpace({ fixedType }) { - return fixedType ? [null] : h('div', { class: 'tiny-grid-body__x-space', ref: 'xSpace' }) -} - export default { name: `${$prefix}GridBody`, props: { collectColumn: Array, fixedColumn: Array, - fixedType: String, isGroup: Boolean, size: String, tableColumn: Array, @@ -889,10 +797,11 @@ export default { visibleColumn: Array }, mounted() { - let { $el, $parent: $table, $refs, fixedType } = this - let { elemStore } = $table - let keyPrefix = `${fixedType || 'main'}-body-` + const { $el, $parent: $table, $refs } = this as any + const { elemStore } = $table + const keyPrefix = 'main-body-' + // 缓存一些重要组件的refs elemStore[`${keyPrefix}wrapper`] = $el elemStore[`${keyPrefix}table`] = $refs.table elemStore[`${keyPrefix}colgroup`] = $refs.colgroup @@ -915,49 +824,44 @@ export default { return { slots } }, render() { - let { $parent: $table, fixedColumn, fixedType } = this - let { $grid, clearHoverRow, isCenterEmpty, keyboardConfig = {}, mouseConfig = {}, renderEmpty } = $table - let { scrollLoad, scrollXLoad, showOverflow: allColumnOverflow, tableColumn, tableData, tableLayout } = $table + let { $parent: $table } = this as any + let { $grid, isCenterEmpty, keyboardConfig = {}, mouseConfig = {}, renderEmpty } = $table + let { scrollLoad, tableColumn, tableData, tableLayout } = $table let $slots = $grid.slots let isCenterCls = isCenterEmpty ? 'is__center' : '' - // 如果是固定列与设置了超出隐藏 - if (fixedType && (allColumnOverflow || scrollXLoad)) { - tableColumn = fixedColumn - } + return h( 'div', { ref: 'body', - class: [ - 'tiny-grid__body-wrapper', - fixedType ? `fixed-${fixedType}__wrapper` : 'body__wrapper', - { [classMap.isScrollload]: scrollLoad } - ] + class: ['tiny-grid__body-wrapper', 'body__wrapper', { [classMap.isScrollload]: scrollLoad }] }, [ - renderXSpace({ fixedType }), + // 表格主体内容x轴方向虚拟滚动条占位元素 + h('div', { class: 'tiny-grid-body__x-space', ref: 'xSpace' }), renderYSpace({ scrollLoad }), - renderTable({ $table, _vm: this, clearHoverRow, fixedType, tableColumn, tableData, tableLayout }), - // 选中边框线 - renderBorders({ fixedType, keyboardConfig, mouseConfig }), + renderTable({ $table, _vm: this, tableColumn, tableData, tableLayout }), + // 开启鼠标或者配置项选中边框线 + renderBorders({ keyboardConfig, mouseConfig }), // 空数据 - renderEmptyBlock({ $slots, $table, _vm: this, fixedType, isCenterCls, renderEmpty, tableData }) + renderEmptyBlock({ $slots, $table, _vm: this, isCenterCls, renderEmpty, tableData }) ] ) }, methods: { // 滚动处理,如果存在列固定右侧,同步更新滚动状态 scrollEvent(event) { - let { $parent: $table, fixedType } = this - let { $refs, highlightHoverRow, lastScrollLeft, lastScrollTop, scrollXLoad, scrollYLoad } = $table - let { leftBody, rightBody, tableBody, tableFooter, tableHeader } = $refs + let { $parent: $table } = this as any + let { $refs, lastScrollLeft, lastScrollTop, scrollXLoad, scrollYLoad, columnStore } = $table + let { leftList, rightList } = columnStore + let { tableBody, tableFooter, tableHeader } = $refs let headerElem = tableHeader ? tableHeader.$el : null let bodyElem = tableBody.$el let footerElem = tableFooter ? tableFooter.$el : null let scrollLeft = bodyElem.scrollLeft - let leftElem = leftBody ? leftBody.$el : null - let rightElem = rightBody ? rightBody.$el : null let scrollTop = bodyElem.scrollTop + + // 对比当前滚动位置和最后一次滚动位置,来得到当前滚动的是哪个方向上的滚动条 let isY = scrollTop !== lastScrollTop let isX = scrollLeft !== lastScrollLeft @@ -966,15 +870,19 @@ export default { $table.lastScrollTop = scrollTop $table.scrollDirection = isX ? 'X' : 'Y' - if (highlightHoverRow) { - $table.clearHoverRow() + // 同步滚动条状态,只同步表头(表尾)滚动条状态,冻结列已优化为sticky方式 + syncHeaderAndFooterScroll({ bodyElem, footerElem, headerElem, isX }) + + // 处理关于冻结列最外层div类名 + if (leftList.length || rightList.length) { + generateFixedClassName({ $table, bodyElem, leftList, rightList }) } - let args = { $table, bodyElem, fixedType, footerElem, headerElem } - Object.assign(args, { isX, isY, leftElem, rightElem, scrollTop }) - scrollTop = syncScrollTop(args) + // 处理x和y轴方法虚拟滚动数据加载逻辑 doScrollLoad({ $table, _vm: this, bodyElem, event, headerElem, isX, isY, scrollLeft, scrollXLoad, scrollYLoad }) - emitEvent($table, 'scroll', [{ type: 'body', fixed: fixedType, scrollTop, scrollLeft, isX, isY, $table }, event]) + + // 触发用户监听的表格滚动事件 + emitEvent($table, 'scroll', [{ type: 'body', scrollTop, scrollLeft, isX, isY, $table }, event]) } } } diff --git a/packages/vue/src/grid/src/cell/src/cell.ts b/packages/vue/src/grid/src/cell/src/cell.ts index ff5e6170c..964c34faf 100644 --- a/packages/vue/src/grid/src/cell/src/cell.ts +++ b/packages/vue/src/grid/src/cell/src/cell.ts @@ -312,8 +312,7 @@ export const Cell = { return [title(h, params)] } - // 在 v3.0 中废弃 label - return [formatText(getFuncText(own.title || own.label), 1)] + return [formatText(getFuncText(own.title), 1)] }, renderCell(h, params) { let { $table, row, column } = params @@ -654,37 +653,37 @@ export const Cell = { isColGroup ? [] : [ - column.order === 'asc' ? - h(icon.sortDesc, { - class: [ - 'tiny-svg-size tiny-grid-sort__asc-btn', - { - 'sort__active': column.order === 'asc' - } - ], - on: { click(event) { $table.triggerSortEvent(event, column, 'desc') } } - }) - : '', - column.order === 'desc' ? - h(icon.sortAsc, { - class: [ - 'tiny-svg-size tiny-grid-sort__desc-btn', - { - 'sort__active': column.order === 'desc' - } - ], - on: { click(event) { $table.triggerSortEvent(event, column, '') } } - }) - : '', - column.order - ? '' - : h(icon.sortDefault, { - class: [ - 'tiny-svg-size tiny-grid-sort__desc-btn' - ], - on: { click(event) { $table.triggerSortEvent(event, column, 'asc') } } - }) - ] + column.order === 'asc' ? + h(icon.sortDesc, { + class: [ + 'tiny-svg-size tiny-grid-sort__asc-btn', + { + 'sort__active': column.order === 'asc' + } + ], + on: { click(event) { $table.triggerSortEvent(event, column, 'desc') } } + }) + : '', + column.order === 'desc' ? + h(icon.sortAsc, { + class: [ + 'tiny-svg-size tiny-grid-sort__desc-btn', + { + 'sort__active': column.order === 'desc' + } + ], + on: { click(event) { $table.triggerSortEvent(event, column, '') } } + }) + : '', + column.order + ? '' + : h(icon.sortDefault, { + class: [ + 'tiny-svg-size tiny-grid-sort__desc-btn' + ], + on: { click(event) { $table.triggerSortEvent(event, column, 'asc') } } + }) + ] ) ] }, diff --git a/packages/vue/src/grid/src/config.ts b/packages/vue/src/grid/src/config.ts index b61e9bd39..395b98fa0 100644 --- a/packages/vue/src/grid/src/config.ts +++ b/packages/vue/src/grid/src/config.ts @@ -42,6 +42,7 @@ const GlobalConfig = { sortConfig: {}, // 默认不开启隔行换色和行高亮,不暴露此配置 stripe: false, + // 鼠标移入表格行是否高亮显示 highlightHoverRow: true, resizable: true, fit: true, diff --git a/packages/vue/src/grid/src/footer/src/footer.ts b/packages/vue/src/grid/src/footer/src/footer.ts index 0acf8b276..43bd444fd 100644 --- a/packages/vue/src/grid/src/footer/src/footer.ts +++ b/packages/vue/src/grid/src/footer/src/footer.ts @@ -29,7 +29,7 @@ import { isNull } from '@opentiny/vue-renderless/common/type' import { h, $prefix } from '@opentiny/vue-common' const classMap = { - fixedHidden: 'fixed__hidden', + fixedHidden: 'fixed__column', colEllipsis: 'col__ellipsis', filterActive: 'filter__active', cellSummary: 'cell__summary' @@ -93,7 +93,7 @@ function renderColgroup(tableColumn) { } const renderfoots = (opt) => { - const { $table, allAlign, allColumnOverflow, allFooterAlign, buildParamFunc, columnKey, fixedType } = opt + const { $table, allAlign, allColumnOverflow, allFooterAlign, buildParamFunc, columnKey } = opt const { footerCellClassName, footerData, footerRowClassName, footerSpanMethod, overflowX, tableColumn, tableListeners } = opt return (list, $rowIndex) => h( @@ -101,13 +101,13 @@ const renderfoots = (opt) => { { class: [ 'tiny-grid-footer__row', - footerRowClassName ? (isFunction(footerRowClassName) ? footerRowClassName({ $table, $rowIndex, fixed: fixedType }) : footerRowClassName) : '' + footerRowClassName ? (isFunction(footerRowClassName) ? footerRowClassName({ $table, $rowIndex }) : footerRowClassName) : '' ] }, tableColumn .map((column, $columnIndex) => { const arg1 = { $columnIndex, $rowIndex, $table, allAlign, allColumnOverflow, allFooterAlign } - const arg2 = { column, fixedType, footerData, footerSpanMethod, overflowX, tableListeners } + const arg2 = { column, footerData, footerSpanMethod, overflowX, tableListeners } const { attrs, columnIndex, fixedHiddenColumn, footAlign, footerClassName, hasEllipsis, params, tfOns } = buildParamFunc(Object.assign(arg1, arg2)) return h( 'td', @@ -151,16 +151,15 @@ export default { name: `${$prefix}GridFooter`, props: { fixedColumn: Array, - fixedType: String, footerData: Array, size: String, tableColumn: Array, visibleColumn: Array }, mounted() { - let { $el, $parent: $table, $refs, fixedType } = this + let { $el, $parent: $table, $refs } = this let { elemStore } = $table - let keyPrefix = `${fixedType || 'main'}-footer-` + let keyPrefix = 'main-footer-' elemStore[`${keyPrefix}wrapper`] = $el elemStore[`${keyPrefix}table`] = $refs.table @@ -169,32 +168,24 @@ export default { elemStore[`${keyPrefix}x-space`] = $refs.xSpace }, render() { - let { $parent: $table, buildParamFunc, fixedColumn, fixedType, footerData, tableColumn } = this + let { $parent: $table, buildParamFunc, footerData, tableColumn } = this let { align: allAlign, columnKey, footerAlign: allFooterAlign, footerCellClassName, footerRowClassName, footerSpanMethod } = $table - let { overflowX, scrollXLoad, showOverflow: allColumnOverflow, tableLayout, tableListeners } = $table - - // 如果是使用优化模式 - if (fixedType && allColumnOverflow) { - tableColumn = fixedColumn - } - if (fixedType && !allColumnOverflow && scrollXLoad) { - tableColumn = fixedColumn - } + let { overflowX, showOverflow: allColumnOverflow, tableLayout, tableListeners } = $table let tableAttrs = { cellspacing: 0, cellpadding: 0, border: 0 } let colgroupVNode = renderColgroup(tableColumn) - let arg1 = { $table, allAlign, allColumnOverflow, allFooterAlign, buildParamFunc, columnKey, fixedType } + let arg1 = { $table, allAlign, allColumnOverflow, allFooterAlign, buildParamFunc, columnKey } let arg2 = { footerCellClassName, footerData, footerRowClassName, footerSpanMethod, overflowX, tableColumn, tableListeners } let tfootVNode = renderTfoot(Object.assign(arg1, arg2)) return h( 'div', { - class: ['tiny-grid__footer-wrapper', fixedType ? `fixed-${fixedType}__wrapper` : 'body__wrapper'], + class: ['tiny-grid__footer-wrapper', 'body__wrapper'], on: { scroll: this.scrollEvent } }, [ - fixedType ? [null] : h('div', { class: 'tiny-grid-body__x-space', ref: 'xSpace' }), + h('div', { class: 'tiny-grid-body__x-space', ref: 'xSpace' }), h( 'table', { @@ -216,7 +207,7 @@ export default { methods: { scrollEvent(event) { // 滚动处理: 如果存在列固定左侧,同步更新滚动状态;如果存在列固定右侧,同步更新滚动状态。 - let { $parent: $table, fixedType } = this + let { $parent: $table } = this let { $refs, lastScrollLeft, scrollXLoad } = $table let { tableBody, tableFooter, tableHeader } = $refs let headerElem = tableHeader ? tableHeader.$el : null @@ -229,7 +220,7 @@ export default { elem.scrollLeft = scrollLeft } } - let eventParams = [{ $table, fixed: fixedType, isX, isY: false, scrollLeft, scrollTop: bodyElem.scrollTop, type: 'footer' }, event] + let eventParams = [{ $table, isX, isY: false, scrollLeft, scrollTop: bodyElem.scrollTop, type: 'footer' }, event] $table.lastScrollTime = Date.now() $table.lastScrollLeft = scrollLeft @@ -245,10 +236,9 @@ export default { }, buildParamFunc(opt) { let { $columnIndex, $rowIndex, $table, allAlign, allColumnOverflow, allFooterAlign } = opt - let { column, fixedType, footerData, footerSpanMethod, overflowX, tableListeners } = opt + let { column, footerData, footerSpanMethod, overflowX, tableListeners } = opt let { showOverflow, footerAlign, align, footerClassName } = column - let isColGroup = column.children && column.children.length - let fixedHiddenColumn = fixedType ? column.fixed !== fixedType && !isColGroup : column.fixed && overflowX + let fixedHiddenColumn = column.fixed && overflowX let cellOverflowValue = isNull(showOverflow) ? allColumnOverflow : showOverflow let footAlign = footerAlign || align || allFooterAlign || allAlign let isShowEllipsis = cellOverflowValue === 'ellipsis' @@ -263,8 +253,7 @@ export default { $rowIndex, column, columnIndex, - $columnIndex, - fixed: fixedType + $columnIndex } addListenerMouseover({ $table, params, showTitle: isShowTitle, showTooltip, tfOns }) diff --git a/packages/vue/src/grid/src/grid/grid.ts b/packages/vue/src/grid/src/grid/grid.ts index 1bb7cca79..0b0be2479 100644 --- a/packages/vue/src/grid/src/grid/grid.ts +++ b/packages/vue/src/grid/src/grid/grid.ts @@ -40,6 +40,7 @@ import methods, { setBodyRecords, invokeSaveDataApi, doRemoveOrShowMsg } from '. const propKeys = Object.keys(Table.props) +// 表格工具栏渲染器 function getRenderedToolbar({ $slots, _vm, loading, tableLoading, toolbar }) { return (_vm.renderedToolbar = (() => { let res = null @@ -57,6 +58,7 @@ function getRenderedToolbar({ $slots, _vm, loading, tableLoading, toolbar }) { })()) } +// 表格内置分页渲染器 function renderPager({ $slots, _vm, loading, pager, pagerConfig, tableLoading, vSize }) { let res = null if ($slots.pager) { @@ -83,6 +85,7 @@ function renderPager({ $slots, _vm, loading, pager, pagerConfig, tableLoading, v return res } +// 渲染主入口,创建表格最外层节点 const createRender = (opt) => { const { h, _vm, vSize, props, selectToolbar, $slots, tableOns, renderedToolbar, loading, pagerConfig, pager, tableLoading } = opt return h( @@ -98,6 +101,7 @@ const createRender = (opt) => { }, [ selectToolbar ? null : renderedToolbar, + // 这里会渲染tiny-grid-column插槽内容,从而获取列配置 h('tiny-grid-table', { props, on: tableOns, ref: 'tinyTable' }, $slots.default && $slots.default()), renderPager({ $slots, @@ -174,6 +178,7 @@ export default { }, tableProps() { let rest = {} + // 这里收集table组件的props,然后提供给下层组件使用 propKeys.forEach((key) => (rest[key] = this[key])) return rest }, @@ -185,6 +190,7 @@ export default { } }, watch: { + // 监听配置式columns数组 columns(cols) { this.loadColumn(cols) }, @@ -196,15 +202,18 @@ export default { } }, created() { + // 初始化fetchApi选项 this.fetchOption = this.initFetchOption() this.pagerConfig = this.initPagerConfig() let { customs, events } = this + // 初始化表格个性化配置,用户可以配置customs if (customs) { this.tableCustoms = customs } + // 处理通过配置式方式传递过来的事件列表events if (events) { const listeners = {} @@ -255,31 +264,39 @@ export default { } }, setup(props, { slots, listeners, attrs }) { + // 处理表格用户传递过来的事件监听 const tableListeners = getListeners(attrs, listeners) return { slots, tableListeners } }, render() { - let { editConfig, fetchOption, listeners, loading, optimization, pager, pagerConfig, remoteFilter, remoteSort, selectToolbar } = this - let { seqIndex, slots: $slots, tableCustoms, tableData, tableListeners, tableLoading, tableProps, toolbar, vSize } = this + let { editConfig, fetchOption, listeners, loading, optimization, pager, pagerConfig, remoteFilter, remoteSort, selectToolbar } = this as any + let { seqIndex, slots: $slots, tableCustoms, tableData, tableListeners, tableLoading, tableProps, toolbar, vSize } = this as any + // 初始化虚拟滚动优化配置 let optimizOpt = { ...GlobalConfig.optimization, ...optimization } let props = { ...tableProps, optimization: optimizOpt, startIndex: seqIndex } let tableOns = { ...listeners, ...tableListeners } let { handleRowClassName: rowClassName, sortChangeEvent, filterChangeEvent } = this + // fetchApi状态下初始化 loading、remoteSort、remoteFilter fetchOption && Object.assign(props, { loading: loading || tableLoading, data: tableData, rowClassName }) fetchOption && remoteSort && (tableOns['sort-change'] = sortChangeEvent) fetchOption && remoteFilter && (tableOns['filter-change'] = filterChangeEvent) + // 处理表格工具栏和个性化数据 toolbar && !(toolbar.setting && toolbar.setting.storage) && (props.customs = tableCustoms) toolbar && (tableOns['update:customs'] = (value) => (this.tableCustoms = value)) + // 初始化表格编辑配置 let editConfigOpt = { trigger: 'click', mode: 'cell', showStatus: true, ...editConfig } + // 这里handleActiveMethod处理一些编辑器的声明周期的拦截,用户传递过来的activeMethod优先级最高 editConfig && (props.editConfig = Object.assign(editConfigOpt, { activeMethod: this.handleActiveMethod })) + // 获取工具栏的渲染器 let renderedToolbar = getRenderedToolbar({ $slots, _vm: this, loading, tableLoading, toolbar }) + // 创建表格最外层容器,并加载table组件 return createRender({ h, _vm: this, vSize, props, selectToolbar, renderedToolbar, tableOns, $slots, loading, pager, pagerConfig, tableLoading }) }, methods: { @@ -320,7 +337,7 @@ export default { }, getParentHeight() { let { $el, $refs } = this - + // 获取表格父级容器盒子的高度 return $el.parentNode.clientHeight - ($refs.toolbar ? $refs.toolbar.$el.clientHeight : 0) - ($refs.pager?.$el ? $refs.pager.$el.clientHeight : 0) }, handleRowClassName(params) { @@ -487,7 +504,7 @@ export default { show ? addClass(this.$el, cls) : removeClass(this.$el, cls) - this.recalculate(true) + this.recalculate() emitEvent(this, 'fullscreen', show) this.emitter.emit('fullscreen', show) diff --git a/packages/vue/src/grid/src/header/src/header.ts b/packages/vue/src/grid/src/header/src/header.ts index 9dddc78f3..c0db3980f 100644 --- a/packages/vue/src/grid/src/header/src/header.ts +++ b/packages/vue/src/grid/src/header/src/header.ts @@ -94,30 +94,14 @@ function modifyHeadAlign({ column, headAlign }) { } function computeDragLeft(args) { - let { cell, dragMinLeft, dragPosLeft, fixedOffsetWidth, isLeftFixed, isRightFixed } = args - let { left, leftContainer, minInterval, rightContainer, tableBodyElem } = args - - if (isLeftFixed) { - // 左固定列(不允许超过右侧固定列、不允许超过右边距) - left = Math.min(left, (rightContainer ? rightContainer.offsetLeft : tableBodyElem.clientWidth) - fixedOffsetWidth - minInterval) - } else if (isRightFixed) { - // 右侧固定列(不允许超过左侧固定列、不允许超过左边距) - dragMinLeft = (leftContainer ? leftContainer.clientWidth : 0) + fixedOffsetWidth + minInterval - left = Math.min(left, dragPosLeft + cell.clientWidth - minInterval) - } + let { dragMinLeft } = args + let { left } = args let dragLeft = Math.max(left, dragMinLeft) return { left, dragMinLeft, dragLeft } } -function computeDragPosLeft({ dragPosLeft, fixedOffsetWidth, isRightFixed, rightContainer }) { - if (isRightFixed && rightContainer) { - dragPosLeft = rightContainer.offsetLeft + fixedOffsetWidth - } - - return dragPosLeft -} function renderTableColgroup(tableColumn) { return h( 'colgroup', @@ -132,8 +116,8 @@ function renderRepair() { return h('div', { class: 'tiny-grid__repair', ref: 'repair' }) } -function renderXSpace({ fixedType }) { - return fixedType ? [null] : h('div', { class: 'tiny-grid-body__x-space', ref: 'xSpace' }) +function renderXSpace() { + return h('div', { class: 'tiny-grid-body__x-space', ref: 'xSpace' }) } const classMap = { @@ -143,7 +127,7 @@ const classMap = { colSelection: 'col__selection', colGroup: 'col__group', colEllipsis: 'col__ellipsis', - fixedHidden: 'fixed__hidden', + fixedHidden: 'fixed__column', isSortable: 'is__sortable', isEditable: 'is__editable', isFilter: 'is__filter', @@ -245,13 +229,13 @@ function renderThResize({ _vm, border, column, fixedHiddenColumn, isColGroup, pa } function getThHandler(args) { - let { $rowIndex, $table, _vm, allAlign, allColumnHeaderOverflow, allHeaderAlign, border, columnKey, fixedType, headerCellClassName } = args + let { $rowIndex, $table, _vm, allAlign, allColumnHeaderOverflow, allHeaderAlign, border, columnKey, headerCellClassName } = args let { headerSuffixIconAbsolute, highlightCurrentColumn, isDragHeaderSorting, mouseConfig, overflowX, resizable, sortOpts, tableListeners } = args return (column, $columnIndex) => { let { showHeaderOverflow, showHeaderTip, headerAlign, align, headerClassName } = column let isColGroup = column.children && column.children.length - let fixedHiddenColumn = fixedType ? column.fixed !== fixedType && !isColGroup : column.fixed && overflowX + let fixedHiddenColumn = column.fixed && overflowX let headOverflow = isNull(showHeaderOverflow) ? allColumnHeaderOverflow : showHeaderOverflow let showEllipsis = headOverflow === 'ellipsis' let showTitle = headOverflow === 'title' @@ -265,7 +249,7 @@ function getThHandler(args) { // 确保表格索引的准确性 let columnIndex = $table.getColumnIndex(column) let params = { $table, $rowIndex, column } - Object.assign(params, { columnIndex, $columnIndex, fixed: fixedType }) + Object.assign(params, { columnIndex, $columnIndex }) addListenerMouseover({ $table, params, showHeaderTip, showTitle, showTooltip, thOns }) addListenerMouseout({ $table, showHeaderTip, showTooltip, thOns }) @@ -292,7 +276,7 @@ function getThHandler(args) { function renderTableThead(args) { let { $table, _vm, allAlign, allColumnHeaderOverflow } = args - let { allHeaderAlign, border, columnKey, fixedType } = args + let { allHeaderAlign, border, columnKey } = args let { headerCellClassName, headerColumn, headerRowClassName, headerSuffixIconAbsolute } = args let { highlightCurrentColumn, isDragHeaderSorting, mouseConfig } = args let { overflowX, resizable, sortOpts, tableListeners } = args @@ -305,7 +289,7 @@ function renderTableThead(args) { headerColumn.map((cols, $rowIndex) => { let args1 = { $rowIndex, $table, _vm, allAlign, allColumnHeaderOverflow, allHeaderAlign, border, columnKey } - Object.assign(args1, { fixedType, headerCellClassName, headerSuffixIconAbsolute, highlightCurrentColumn }) + Object.assign(args1, { headerCellClassName, headerSuffixIconAbsolute, highlightCurrentColumn }) Object.assign(args1, { isDragHeaderSorting, mouseConfig, overflowX, resizable, sortOpts, tableListeners }) return h( @@ -313,7 +297,7 @@ function renderTableThead(args) { { class: [ 'tiny-grid-header__row', - headerRowClassName ? (isFunction(headerRowClassName) ? headerRowClassName({ $table, $rowIndex, fixed: fixedType }) : headerRowClassName) : '' + headerRowClassName ? (isFunction(headerRowClassName) ? headerRowClassName({ $table, $rowIndex }) : headerRowClassName) : '' ] }, cols.map(getThHandler(args1)).concat([h('th', { class: 'col__gutter' })]) @@ -321,22 +305,6 @@ function renderTableThead(args) { }) ) } -function computeFixedOffsetWidth({ fixedOffsetWidth, isLeftFixed, cell }) { - let siblingProp = isLeftFixed ? 'nextElementSibling' : 'previousElementSibling' - let tempCellElem = cell[siblingProp] - - while (tempCellElem) { - if (hasClass(tempCellElem, 'fixed__hidden')) { - break - } else if (!hasClass(tempCellElem, 'col__group')) { - fixedOffsetWidth += tempCellElem.offsetWidth - } - - tempCellElem = tempCellElem[siblingProp] - } - - return fixedOffsetWidth -} function updateResizableToolbar($table) { if ($table.$toolbar) { @@ -344,20 +312,12 @@ function updateResizableToolbar($table) { } } -function modifyTableColumn({ fixedColumn, fixedType, scrollXLoad, tableColumn }) { - if (scrollXLoad && fixedType) { - tableColumn = fixedColumn - } - - return tableColumn -} - function renderTable(args) { - let { $table, _vm, allAlign, allColumnHeaderOverflow, allHeaderAlign, border, columnKey, fixedType } = args + let { $table, _vm, allAlign, allColumnHeaderOverflow, allHeaderAlign, border, columnKey } = args let { headerCellClassName, headerColumn, headerRowClassName, headerSuffixIconAbsolute } = args let { highlightCurrentColumn, isDragHeaderSorting, mouseConfig, overflowX, resizable, sortOpts } = args let { tableColumn, tableLayout, tableListeners } = args - let args1 = { $table, _vm, allAlign, allColumnHeaderOverflow, allHeaderAlign, border, columnKey, fixedType } + let args1 = { $table, _vm, allAlign, allColumnHeaderOverflow, allHeaderAlign, border, columnKey } Object.assign(args1, { headerCellClassName, headerColumn, headerRowClassName, headerSuffixIconAbsolute }) Object.assign(args1, { highlightCurrentColumn, isDragHeaderSorting, mouseConfig }) @@ -380,11 +340,11 @@ function renderTable(args) { ) } -const documentOnmouseup = function ({ oldMousemove, oldMouseup, column, isRightFixed, dragPosLeft, dragLeft, resizeBarElem, $table, params }) { +const documentOnmouseup = function ({ oldMousemove, oldMouseup, column, dragPosLeft, dragLeft, resizeBarElem, $table, params }) { document.onmousemove = oldMousemove document.onmouseup = oldMouseup - let resizeWidth = column.renderWidth + (isRightFixed ? dragPosLeft - dragLeft : dragLeft - dragPosLeft) + let resizeWidth = column.renderWidth + dragLeft - dragPosLeft resizeWidth = typeof resizeWidth === 'number' ? resizeWidth : parseInt(resizeWidth, 10) || 40 column.resizeWidth = resizeWidth < 40 ? 40 : resizeWidth @@ -393,7 +353,7 @@ const documentOnmouseup = function ({ oldMousemove, oldMouseup, column, isRightF Object.assign($table, { _isResize: false, _lastResizeTime: Date.now() }) $table.analyColumnWidth() - $table.recalculate(true) + $table.recalculate() updateResizableToolbar($table) emitEvent($table, 'resizable-change', [params]) } @@ -403,7 +363,6 @@ export default { props: { collectColumn: Array, fixedColumn: Array, - fixedType: String, size: String, isGroup: Boolean, tableColumn: Array, @@ -421,9 +380,9 @@ export default { } }, mounted() { - let { $el, $parent: $table, $refs, fixedType } = this + let { $el, $parent: $table, $refs } = this let elemStore = $table.elemStore - let keyPrefix = `${fixedType || 'main'}-header-` + let keyPrefix = 'main-header-' elemStore[`${keyPrefix}wrapper`] = $el elemStore[`${keyPrefix}table`] = $refs.table @@ -436,16 +395,14 @@ export default { this.uploadColumn() }, render() { - let { $parent: $table, fixedColumn, fixedType, headerColumn, tableColumn } = this + let { $parent: $table, headerColumn, tableColumn } = this let { align: allAlign, border, columnKey, headerAlign: allHeaderAlign } = $table let { headerCellClassName, headerRowClassName, headerSuffixIconAbsolute } = $table let { highlightCurrentColumn, isDragHeaderSorting, mouseConfig = {}, overflowX } = $table - let { resizable, scrollXLoad, showHeaderOverflow: allColumnHeaderOverflow } = $table + let { resizable, showHeaderOverflow: allColumnHeaderOverflow } = $table let { sortOpts, tableLayout, tableListeners } = $table - // 横向滚动渲染 - tableColumn = modifyTableColumn({ fixedColumn, fixedType, scrollXLoad, tableColumn }) - let args = { $table, _vm: this, allAlign, allColumnHeaderOverflow, allHeaderAlign, border, columnKey, fixedType } + let args = { $table, _vm: this, allAlign, allColumnHeaderOverflow, allHeaderAlign, border, columnKey } Object.assign(args, { headerCellClassName, headerColumn, headerRowClassName, headerSuffixIconAbsolute }) Object.assign(args, { highlightCurrentColumn, isDragHeaderSorting, mouseConfig, overflowX, resizable, sortOpts }) @@ -454,47 +411,41 @@ export default { return h( 'div', { - class: ['tiny-grid__header-wrapper', fixedType ? `fixed-${fixedType}__wrapper` : 'body__wrapper'] + class: ['tiny-grid__header-wrapper', 'body__wrapper'] }, - [ - renderXSpace({ fixedType }), + [ // 表格主体内容x轴方向虚拟滚动条占位元素,在表头中属于无效元素,待删除 + renderXSpace(), renderTable(args), - // 其他 + // x轴方向虚拟滚动适配线 renderRepair() ] ) }, methods: { uploadColumn() { - this.headerColumn = this.isGroup ? convertToRows(this.collectColumn) : [this.$parent.scrollXLoad && this.fixedType ? this.fixedColumn : this.tableColumn] + this.headerColumn = this.isGroup ? convertToRows(this.collectColumn) : [this.tableColumn] }, resizeMousedown(event, params) { - let { $el, $parent: $table, fixedType } = this + let { $el, $parent: $table } = this let { clientX: dragClientX, target: dragBtnElem } = event let { column } = params let { dragLeft = 0, minInterval = 36, fixedOffsetWidth = 0 } = {} - let { leftContainer, resizeBar: resizeBarElem, rightContainer, tableBody } = $table.$refs + let { resizeBar: resizeBarElem, tableBody } = $table.$refs let { cell = dragBtnElem.parentNode, dragBtnWidth = dragBtnElem.clientWidth } = {} let { pos = getOffsetPos(dragBtnElem, $el), tableBodyElem = tableBody.$el } = {} let dragMinLeft = pos.left - cell.clientWidth + dragBtnWidth + minInterval let dragPosLeft = pos.left + Math.floor(dragBtnWidth / 2) - let { isRightFixed = fixedType === 'right', isLeftFixed = fixedType === 'left' } = {} let { oldMousemove = document.onmousemove, oldMouseup = document.onmouseup } = {} - if (isLeftFixed || isRightFixed) { - fixedOffsetWidth = computeFixedOffsetWidth({ fixedOffsetWidth, isLeftFixed, cell }) - dragPosLeft = computeDragPosLeft({ dragPosLeft, fixedOffsetWidth, isRightFixed, rightContainer }) - } - // 处理拖动事件 let handleMousemoveEvent = function (event) { event.stopPropagation() event.preventDefault() let { offsetX = event.clientX - dragClientX, left = offsetX + dragPosLeft } = {} - let scrollLeft = fixedType ? 0 : tableBodyElem.scrollLeft - let args = { cell, dragMinLeft, dragPosLeft, fixedOffsetWidth, isLeftFixed, isRightFixed } - Object.assign(args, { left, leftContainer, minInterval, rightContainer, tableBodyElem }) + let scrollLeft = tableBodyElem.scrollLeft + let args = { cell, dragMinLeft, dragPosLeft, fixedOffsetWidth } + Object.assign(args, { left, minInterval, tableBodyElem }) let ret = computeDragLeft(args) left = ret.left @@ -509,7 +460,7 @@ export default { document.onmousemove = handleMousemoveEvent document.onmouseup = () => { - documentOnmouseup({ oldMousemove, oldMouseup, column, isRightFixed, dragPosLeft, dragLeft, resizeBarElem, $table, params }) + documentOnmouseup({ oldMousemove, oldMouseup, column, dragPosLeft, dragLeft, resizeBarElem, $table, params }) } handleMousemoveEvent(event) } diff --git a/packages/vue/src/grid/src/table/src/events.ts b/packages/vue/src/grid/src/table/src/events.ts index 571c5313b..1feba81ca 100644 --- a/packages/vue/src/grid/src/table/src/events.ts +++ b/packages/vue/src/grid/src/table/src/events.ts @@ -95,14 +95,7 @@ export function handleEnterKeyDown({ event, selected, actived }) { let isRightArrow = event.keyCode === 39 // 如果是激活状态,退则出到下一行 if (selected.row || actived.row) { - this.moveSelected({ - args: selected.row ? selected.args : actived.args, - isLeftArrow, - isUpArrow, - isRightArrow, - isDwArrow: true, - event - }) + this.moveSelected({ args: selected.row ? selected.args : actived.args, isLeftArrow, isUpArrow, isRightArrow, isDwArrow: true, event }) } else if (treeConfig && highlightCurrentRow && currentRow) { // 如果是树形表格当前行回车移动到子节点 let childrens = currentRow[treeConfig.children] @@ -130,15 +123,7 @@ export function handleCtxMenu({ event }) { menuList: ctxMenuStore.selected.children }) } else { - this.moveCtxMenu({ - event, - keyCode: event.keyCode, - ctxMenuStore, - property: 'selected', - operKey: 39, - operRest: true, - menuList: this.ctxMenuList - }) + this.moveCtxMenu({ event, keyCode: event.keyCode, ctxMenuStore, property: 'selected', operKey: 39, operRest: true, menuList: this.ctxMenuList }) } } @@ -237,9 +222,9 @@ export function handleGlobalKeydownEvent(event) { }) } +// 监听全局的窗口尺寸改变事件,然后重新计算表格样式 export function handleGlobalResizeEvent() { - // 窗口尺寸改变时,实时计算表格的宽高 - this.recalculate(true) + this.recalculate() } // 触发表头 tooltip 事件 @@ -267,10 +252,7 @@ export function triggerTooltipEvent(event, params) { let { actived } = editStore let { row, column, showTip } = params if (editConfig) { - if ( - (editConfig.mode === 'row' && actived.row === row && column.editor) || - (actived.row === row && actived.column === column) - ) { + if ((editConfig.mode === 'row' && actived.row === row && column.editor) || (actived.row === row && actived.column === column)) { return } } diff --git a/packages/vue/src/grid/src/table/src/methods.ts b/packages/vue/src/grid/src/table/src/methods.ts index 80048a363..dd0669334 100644 --- a/packages/vue/src/grid/src/table/src/methods.ts +++ b/packages/vue/src/grid/src/table/src/methods.ts @@ -27,10 +27,8 @@ import { toDecimal } from '@opentiny/vue-renderless/common/string' import { getStyle } from '@opentiny/vue-renderless/common/deps/dom' import { addClass, removeClass } from '@opentiny/vue-renderless/common/deps/dom' import debounce from '@opentiny/vue-renderless/common/deps/debounce' -// prettier-ignore import { isNumber, filterTree, remove, isArray, isBoolean, findTree, set, get, has, eachTree, arrayEach, sortBy, isUndefined, toNumber, isEqual, mapTree, clone, destructuring, clear, sum, find, toStringJSON, toArray } from '@opentiny/vue-renderless/grid/static/' import browser from '@opentiny/vue-renderless/common/browser' -// prettier-ignore import { isPx, isScale, colToVisible, getCell, getEventTargetNode, rowToVisible, setCellValue, getRowid, emitEvent } from '@opentiny/vue-renderless/grid/utils' import Cell from '../../cell' import { error, warn } from '../../tools' @@ -39,7 +37,6 @@ import GlobalConfig from '../../config' import { handleLayout } from './utils/updateStyle' import { createTooltipRange, processContentMethod } from './utils/handleTooltip' import { hasCheckField, hasNoCheckField } from './utils/handleSelectRow' -// prettier-ignore import { isTargetRadioOrCheckbox, onClickExpandColumn, onClickTreeNodeColumn, onHighlightCurrentRow, onClickRadioColumn, onClickSelectColumn, onClickCellSelect } from './utils/triggerCellClickEvent' import { onGroupHeader, @@ -49,13 +46,13 @@ import { showGroupFixedError, onScrollXLoad } from './utils/refreshColumn' -// prettier-ignore import { handleFilterConditionCustom, handleFilterConditionExtend, handleFilterRelations, handleFilterCheckStr, handleFilterCheck } from './utils/handleLocalFilter' import { hasCheckFieldNoStrictly, hasNoCheckFieldNoStrictly, setSelectionNoStrictly } from './utils/setAllSelection' import { mapFetchColumnPromise } from './utils/handleResolveColumn' import { computeScrollYLoad, computeScrollXLoad } from './utils/computeScrollLoad' import { createHandlerOnEnd } from './utils/rowDrop' -import { calcTableWidth } from './utils/autoCellWidth' +import { calcTableWidth, calcFixedStickyPosition } from './utils/autoCellWidth' +import { generateFixedClassName } from './utils/handleFixedColumn' import { funcs, headerProps, onEndEvent, handleAllColumnPromises } from './funcs' import { triggerHeaderTooltipEvent, @@ -184,6 +181,7 @@ const Methods = { .then(() => this.updateFooter()) .then(() => this.recalculate()) }, + // 处理表格数据(过滤,排序,虚拟滚动需要渲染数据的条数) handleTableData(force) { let { scrollYLoad, scrollYStore, treeConfig, treeExpandeds, parentRowMap } = this let { renderSize, startIndex } = scrollYStore @@ -198,9 +196,11 @@ const Methods = { treeExpandeds, parentRowMap }) + run(['updateScrollStatus', 'buildGroupData'], this) return this.$nextTick() }, + // 全量加载表格数据 loadTableData(datas, notRefresh) { let { $refs, editStore, height, maxHeight } = this let { lastScrollLeft, lastScrollTop } = this @@ -216,6 +216,7 @@ const Methods = { // 原始数据 Object.assign(this, { tableSynchData: datas, + // 此处存在性能问题,如果用户表格数据量很大,这里深拷贝会带来性能问题, tableSourceData: clone(tableFullData, true), scrollYLoad }) @@ -224,7 +225,7 @@ const Methods = { error('ui.grid.error.scrollYHeight') } - // 如果notRefresh为true表示不刷新表格状态,所以也不需要清楚滚动状态 + // 如果notRefresh为true表示不刷新表格状态,所以也不需要清除滚动状态 if (!notRefresh) { this.clearScroll() } @@ -233,20 +234,24 @@ const Methods = { run(['reserveCheckSelection', 'checkSelectionStatus'], this) let first = () => !notRefresh && this.recalculate() let second = () => { + // 让表格滚动条滚动到最后一次滚动到的位置 if (lastScrollLeft || lastScrollTop) { return this.scrollTo(lastScrollLeft, lastScrollTop) } else { + // 重置表头滚动条位置 let headerElem = $refs.tableHeader ? $refs.tableHeader.$el : null headerElem && (headerElem.scrollLeft = 0) } } return this.$nextTick().then(first).then(second) }, + // 重新加载数据 reloadData(datas) { return this.clearAll() .then(() => this.loadTableData(datas)) .then(() => this.handleDefault()) }, + // 加载全量数据 loadData(datas) { return new Promise((resolve) => { this.loadTableData(datas) @@ -274,6 +279,7 @@ const Methods = { this.tableData = tableData.slice(0) return this.$nextTick() }, + // 从新加载列配置 reloadColumn(columns) { return this.clearAll().then(() => this.loadColumn(columns)) }, @@ -753,12 +759,6 @@ const Methods = { this.refreshColumn() this.handleTableData(true) $toolbar && $toolbar.updateColumn(fullColumn) - // 在v3.0中废弃prop、label - if (fullColumn.length) { - let cIndex = Math.floor((fullColumn.length - 1) / 2) - fullColumn[cIndex].prop && warn('ui.grid.error.delProp') - fullColumn[cIndex].label && warn('ui.grid.error.delLabel') - } if ( treeConfig && fullColumn.some((column) => column.fixed) && @@ -809,7 +809,7 @@ const Methods = { this.visibleColumn = visibleColumn return this.$nextTick().then(() => { this.updateFooter() - this.recalculate(true) + this.recalculate() }) }, // 指定列宽的列进行拆分 @@ -857,7 +857,7 @@ const Methods = { * 计算单元格列宽,动态分配可用剩余空间 * 支持(width=?、width=?px、width=?%、min-width=?、min-width=?px、min-width=?%) */ - recalculate(refull) { + recalculate() { let { tableBody, tableFooter, tableHeader } = this.$refs let getElem = (ref) => (ref ? ref.$el : null) let headerElem = getElem(tableHeader) @@ -867,13 +867,9 @@ const Methods = { return this.computeScrollLoad() } - // 虚拟滚动式需要等滚动条加载出来再进行样式调整 - if (refull !== true) { - return this.computeScrollLoad().then(() => this.autoCellWidth(headerElem, bodyElem, footerElem)) - } - // 初始化时需要在列计算之后再执行优化运算,达到最优显示效果 return this.computeScrollLoad().then(() => { + // 设置表格每列的尺寸(此时还没有设置colgroup的dom元素尺寸),这里执行之后还需要继续设置滚动条状态 this.autoCellWidth(headerElem, bodyElem, footerElem) this.computeScrollLoad() }) @@ -881,16 +877,21 @@ const Methods = { // 列宽计算 autoCellWidth(headerEl, bodyEl, footerEl) { // 列宽最少限制 40px - let { minCellWidth = 40, bodyW, remainWidth } = {} + let minCellWidth = 40 let { fit, columnStore } = this let tableHeight = bodyEl.offsetHeight let overflowY = bodyEl.scrollHeight > bodyEl.clientHeight - bodyW = bodyEl.clientWidth - remainWidth = bodyW - let tableWidth = calcTableWidth({ bodyWidth: bodyW, columnStore, fit, minCellWidth, remainWidth }) + let bodyW = bodyEl.clientWidth + let { leftList, rightList } = columnStore + + // 此处操作很重要,这里会计算所有列的宽度并且计算出表格整体宽度 + let tableWidth = calcTableWidth({ bodyWidth: bodyW, columnStore, fit, minCellWidth, remainWidth: bodyW }) let scrollbarWidth = overflowY ? bodyEl.offsetWidth - bodyW : 0 let parentHeight = this.getParentHeight() + // 经过calcTableWidth计算出了所有列的宽度,下一步进行所有冻结列sticky布局的left和right值 + calcFixedStickyPosition({ headerEl, bodyEl, columnStore }) + Object.assign(this, { overflowY, parentHeight, scrollbarWidth, tableHeight, tableWidth }) if (headerEl) { this.headerHeight = headerEl.offsetHeight @@ -904,34 +905,26 @@ const Methods = { this.scrollbarHeight = Math.max(tableHeight - bodyEl.clientHeight, 0) this.overflowX = tableWidth > bodyW } - if (this.overflowX) { - this.checkScrolling() + + if (leftList.length || rightList.length) { + // 处理冻结列类名 + generateFixedClassName({ $table: this, bodyElem: bodyEl, leftList, rightList }) } }, + // 同步headerHeight + syncHeaderHeight() { + let headerEl = this.$refs.tableHeader?.$el + if (headerEl) this.headerHeight = headerEl.offsetHeight + }, resetResizable() { let { $toolbar, visibleColumn } = this visibleColumn.forEach((col) => (col.resizeWidth = 0)) $toolbar && $toolbar.resetResizable() this.analyColumnWidth() - return this.recalculate(true) - }, - // 同步左右固定列的top值,修复在拖动列宽时出现横向滚动条导至固定列错位问题 - syncFixedTop() { - const { tableBody, leftBody, rightBody } = this.$refs - if (tableBody) { - const top = tableBody.$el.scrollTop - leftBody && (leftBody.$el.scrollTop = top) - rightBody && (rightBody.$el.scrollTop = top) - } - }, - //同步headerHeight - syncHeaderHeight() { - let headerEl = this.$refs.tableHeader?.$el - if (headerEl) this.headerHeight = headerEl.offsetHeight + return this.recalculate() }, updateStyle() { - let { $refs, columnStore, currentRow, height, maxHeight, minHeight, parentHeight, tableColumn } = this - let containerList = ['main', 'left', 'right'] + let { columnStore, currentRow, height, maxHeight, minHeight, parentHeight, tableColumn } = this let layoutList = ['header', 'body', 'footer'] let { customHeight, scaleToPx } = {} @@ -942,42 +935,19 @@ const Methods = { customHeight = isScale(height) ? scaleToPx : toNumber(height) } - containerList.forEach((name, index) => { - let fixedType = index > 0 ? name : '' - let fixedColumn = columnStore[`${fixedType}List`] - let fixedWrapperElem = $refs[`${fixedType}Container`] - layoutList.forEach((layout) => { - const args1 = { _vm: this, columnStore, customHeight, fixedColumn, fixedType } - const args2 = { fixedWrapperElem, layout, maxHeight, minHeight, name, parentHeight, tableColumn } - let ret = handleLayout(Object.assign(args1, args2)) - tableColumn = ret.tableColumn - maxHeight = ret.maxHeight - minHeight = ret.minHeight - }) + layoutList.forEach((layout) => { + const args1 = { _vm: this, columnStore, customHeight } + const args2 = { layout, maxHeight, minHeight, name: 'main', parentHeight, tableColumn } + let ret = handleLayout(Object.assign(args1, args2)) + tableColumn = ret.tableColumn + maxHeight = ret.maxHeight + minHeight = ret.minHeight }) currentRow && this.setCurrentRow(currentRow) - this.syncFixedTop() // Fixed issue #129 this.syncHeaderHeight() return this.$nextTick() }, - // 处理固定列的显示状态 - checkScrolling() { - let { leftContainer, rightContainer, tableBody } = this.$refs - let bodyElem = tableBody ? tableBody.$el : null - if (!bodyElem) { - return - } - let { clientWidth, scrollLeft, scrollWidth } = bodyElem - let showLeft = scrollLeft > 0 - let showRight = clientWidth < scrollWidth - scrollLeft - if (leftContainer) { - showLeft ? addClass(leftContainer, 'scrolling__middle') : removeClass(leftContainer, 'scrolling__middle') - } - if (rightContainer) { - showRight ? addClass(rightContainer, 'scrolling__middle') : removeClass(rightContainer, 'scrolling__middle') - } - }, preventEvent(event, type, args, next, end) { let eventList = Interceptor.get(type) if (!eventList.some((listener) => listener(args, event, this) === false)) { @@ -1303,22 +1273,6 @@ const Methods = { let { selectRow: radioRow } = this return radioRow }, - // 行hover事件 - triggerHoverEvent(event, { row }) { - this.setHoverRow(row) - }, - setHoverRow(row) { - let rowid = getRowid(this, row) - let rowElems = this.$el.querySelectorAll(`[data-rowid="${rowid}"]`) - this.clearHoverRow() - arrayEach(rowElems, (elem) => addClass(elem, 'row__hover')) - this.hoverRow = row - }, - clearHoverRow() { - let rowElems = this.$el.querySelectorAll('.tiny-grid-body__row.row__hover') - arrayEach(rowElems, (elem) => removeClass(elem, 'row__hover')) - this.hoverRow = null - }, triggerHeaderCellClickEvent(event, params) { let { _lastResizeTime: lastTime, highlightCurrentColumn } = this let { cell, column } = params @@ -1664,7 +1618,7 @@ const Methods = { // 横向 X 可视渲染事件处理 triggerScrollXEvent(event) { let { adaptive } = this.scrollXStore - // webkit 浏览器使用最佳的渲染方式 + // webkit 浏览器使用最佳的渲染方式(防抖操作) if (!isWebkit || !adaptive) { this.debounceScrollX(event) } else { @@ -1721,6 +1675,7 @@ const Methods = { debounceScrollY: debounce(debounceScrollDirDuration, function (event) { this.loadScrollYData(event) }), + // 处理滚动分页相关逻辑 debounceScrollLoad: debounce(debounceScrollLoadDuration, function (event) { const { scrollHeight, bodyHeight } = this.scrollLoadStore const { currentPage, pageSize } = this.$grid.tablePage @@ -1739,8 +1694,12 @@ const Methods = { }), // 纵向 Y 可视渲染处理 loadScrollYData(event) { - let { scrollYStore } = this - let { startIndex, renderSize, offsetSize, visibleIndex, visibleSize, rowHeight } = scrollYStore + const { scrollYStore, columnStore } = this + const { tableBody, tableHeader } = this.$refs + const { startIndex, renderSize, offsetSize, visibleIndex, visibleSize, rowHeight } = scrollYStore + const getElem = (ref) => (ref ? ref.$el : null) + const headerEl = getElem(tableHeader) + const bodyEl = getElem(tableBody) // 动态获取容器的scrollTop,这里有可能会造成卡顿,暂时没有好的方案 let { scrollTop } = event.target @@ -1768,7 +1727,13 @@ const Methods = { } scrollYStore.visibleIndex = toVisibleIndex this.$nextTick(() => { + const { leftList, rightList } = columnStore this.updateSelectedCls(true) + + // 虚拟滚动时,如果存在冻结列,则需要动态设置冻结列的状态 + if (leftList.length || rightList.length) { + calcFixedStickyPosition({ headerEl, bodyEl, columnStore }) + } }) }, getRowHeight() { @@ -1777,6 +1742,7 @@ const Methods = { let { tableBody, tableHeader } = $refs let rHeight = scrollY.rHeight if (!rHeight) { + // 获取表头或者表格体第一个tr的高度 let firstTrElem = (tableBody && tableBody.$el.querySelector('tbody>tr')) || (tableHeader && tableHeader.$el.querySelector('thead>tr')) || @@ -1788,6 +1754,7 @@ const Methods = { // 默认的行高,默认行高需要跟 css 样式一致 if (!rHeight) { let vSizeList = ['medium', 'small', 'mini'] + // 这里因为需要适配多套主题配置方案,所以这里的默认高度写死不合适,待整改 let defSizeList = [44, 40, 36] let i = vSizeList.indexOf(vSize) rHeight = ~i ? defSizeList[i] : 48 @@ -1811,10 +1778,11 @@ const Methods = { this.$nextTick(this.updateStyle) }) }, + // 处理x轴方向虚拟滚动列数据加载 updateScrollXData() { - let { scrollXLoad, scrollXStore, tableColumn, treeConfig, visibleColumn, visibleColumnChanged } = this + let { scrollXLoad, scrollXStore, tableColumn, treeConfig, visibleColumn, visibleColumnChanged, columnStore } = this let { lastStartIndex = -1, renderSize, startIndex } = scrollXStore - let args = { lastStartIndex, renderSize, scrollXLoad, startIndex, tableColumn } + let args = { lastStartIndex, renderSize, scrollXLoad, startIndex, tableColumn, columnStore } Object.assign(args, { treeConfig, visibleColumn, visibleColumnChanged }) @@ -1824,17 +1792,16 @@ const Methods = { this.tableColumn = ret.tableColumn this.visibleColumnChanged = ret.visibleColumnChanged - - if (ret.sliced) { - this.updateScrollXSpace() - this.updateScrollStatus() - } + // 初始化表格时也需要计算x轴方向滚动条占位符的尺寸 + this.updateScrollXSpace() + // 处理滚动条滚动后的异步渲染列逻辑 + this.updateScrollStatus() }, // 更新横向 X 可视渲染上下剩余空间大小 updateScrollXSpace() { - let { $refs, elemStore, scrollXLoad, scrollXStore, scrollbarWidth, tableWidth, visibleColumn } = this - let { tableBody, tableFooter, tableHeader } = $refs - let { startIndex } = scrollXStore + const { $refs, elemStore, scrollXLoad, scrollXStore, scrollbarWidth, tableWidth, visibleColumn } = this + const { tableBody, tableFooter, tableHeader } = $refs + const { startIndex } = scrollXStore let { bodyElem, footerElem, headerElem, leftSpaceWidth, marginLeft } = {} headerElem = tableHeader ? tableHeader.$el.querySelector('.tiny-grid__header') : null bodyElem = tableBody.$el.querySelector('.tiny-grid__body') @@ -1844,19 +1811,19 @@ const Methods = { headerElem && (headerElem.style.marginLeft = marginLeft) bodyElem.style.marginLeft = marginLeft footerElem && (footerElem.style.marginLeft = marginLeft) - let containerNames = ['main'] - let layouts = ['header', 'body', 'footer'] - containerNames.forEach((name) => { - layouts.forEach((layout) => { - let xSpaceElem = elemStore[`${name}-${layout}-xSpace`] - let extra = layout === 'header' ? scrollbarWidth : 0 - if (xSpaceElem) { - xSpaceElem.style.width = scrollXLoad ? `${tableWidth + extra}px` : '' - } - }) + const layouts = ['header', 'body', 'footer'] + layouts.forEach((layout) => { + const xSpaceElem = elemStore[`main-${layout}-xSpace`] + const extra = layout === 'header' ? scrollbarWidth : 0 + if (xSpaceElem) { + // 表格主体内容x轴方向虚拟滚动条占位元素 + xSpaceElem.style.width = scrollXLoad ? `${tableWidth + extra}px` : '' + } }) + this.$nextTick(this.updateStyle) }, + // 处理虚拟滚动加载数据,并更新YSpace位置 updateScrollYData() { run(['handleTableData', 'updateScrollYSpace'], this) }, @@ -1867,30 +1834,29 @@ const Methods = { let bodyHeight = getTotalRows(this) let isVScrollOrLoad = scrollYLoad || scrollLoad let { marginTop, ySpaceHeight } = {} - let containerNames = ['main', 'left', 'right'] let layouts = ['header', 'body', 'footer'] + // 通过开始渲染下标startIndex和表格的行高度来计算marginTop marginTop = isVScrollOrLoad && scrollYLoad ? `${Math.max(startIndex * rowHeight, 0)}px` : '' ySpaceHeight = isVScrollOrLoad ? `${bodyHeight * rowHeight}px` : '' - containerNames.forEach((name) => { - let tableElem = elemStore[`${name}-body-table`] + const tableElem = elemStore['main-body-table'] - // 这里最好使用transform3D,使用gpu加速,防止页面重绘 - if (tableElem) { - tableElem.style.transform = `translateY(${marginTop})` + // 这里最好使用transform3D,使用gpu加速,防止页面重绘 + if (tableElem) { + tableElem.style.transform = `translateY(${marginTop})` + } + + layouts.forEach((layout) => { + const ySpaceElem = elemStore[`main-${layout}-ySpace`] + ySpaceElem && (ySpaceElem.style.height = ySpaceHeight) + // 滚动分页加载逻辑 + if (ySpaceElem && scrollLoad && $grid) { + const scrollHeight = $grid.pagerConfig.total * rowHeight + Object.assign(scrollLoadStore, { bodyHeight, scrollHeight }) + ySpaceElem.firstChild.style.height = `${scrollHeight}px` + ySpaceElem.onscroll = this.debounceScrollLoad } - - layouts.forEach((layout) => { - let ySpaceElem = elemStore[`${name}-${layout}-ySpace`] - ySpaceElem && (ySpaceElem.style.height = ySpaceHeight) - if (ySpaceElem && scrollLoad && $grid) { - let scrollHeight = $grid.pagerConfig.total * rowHeight - Object.assign(scrollLoadStore, { bodyHeight, scrollHeight }) - ySpaceElem.firstChild.style.height = `${scrollHeight}px` - ySpaceElem.onscroll = this.debounceScrollLoad - } - }) }) this.$nextTick(this.updateStyle) }, @@ -1898,7 +1864,7 @@ const Methods = { let { $el, elemStore, scrollLoad, scrollLoadStore } = this if (scrollLoad && $el.contains(event.target)) { let wheelDelta = event.wheelDelta ? event.wheelDelta : -event.detail * 40 - let scrollElm = elemStore['right-body-ySpace'] || elemStore['main-body-ySpace'] + let scrollElm = elemStore['main-body-ySpace'] let { scrollHeight, bodyHeight } = scrollLoadStore let max = scrollHeight - bodyHeight let top = scrollElm.scrollTop - wheelDelta @@ -2168,7 +2134,7 @@ const Methods = { let selected = this.getSelectRecords() let position = typeof selectToolbar === 'object' ? selectToolbar.position : '' if (selectColumn && selected && selected.length) { - let selectTh = this.$el.querySelector('th.tiny-grid-header__column.col__selection:not(.fixed__hidden)') + let selectTh = this.$el.querySelector('th.tiny-grid-header__column.col__selection') let headerWrapper = this.$el.querySelector('.tiny-grid>.tiny-grid__header-wrapper') let tr = selectTh.parentNode let thArr = toArray(tr.childNodes) diff --git a/packages/vue/src/grid/src/table/src/strategy.ts b/packages/vue/src/grid/src/table/src/strategy.ts index eb006306d..25c9a75ac 100644 --- a/packages/vue/src/grid/src/table/src/strategy.ts +++ b/packages/vue/src/grid/src/table/src/strategy.ts @@ -219,31 +219,31 @@ const getTreeShowKey = ({ scrollYLoad, treeConfig }) => { } const sliceVisibleColumn = (args) => { - const { lastStartIndex, renderSize, scrollXLoad, startIndex, tableColumn } = args + const { lastStartIndex, renderSize, scrollXLoad, startIndex, tableColumn, columnStore } = args const { treeConfig, visibleColumn, visibleColumnChanged } = args + const { leftList, rightList } = columnStore let tableColumn2 = tableColumn let lastStartIndex2 = lastStartIndex let visibleColumnChanged2 = visibleColumnChanged - let sliced = false if (scrollXLoad && treeConfig) { if (visibleColumnChanged || !~lastStartIndex || lastStartIndex !== startIndex) { tableColumn2 = visibleColumn.slice(startIndex, startIndex + renderSize) lastStartIndex2 = startIndex visibleColumnChanged2 = false - sliced = true } } else { tableColumn2 = visibleColumn.slice(startIndex, startIndex + renderSize) - sliced = true } + // x轴虚拟滚动时,需要一直保持冻结列显示 + tableColumn2 = [...new Set([...leftList, ...tableColumn2, ...rightList])] + return { tableColumn: tableColumn2, lastStartIndex: lastStartIndex2, - visibleColumnChanged: visibleColumnChanged2, - sliced + visibleColumnChanged: visibleColumnChanged2 } } diff --git a/packages/vue/src/grid/src/table/src/table.ts b/packages/vue/src/grid/src/table/src/table.ts index a65c00d16..6bae89bb1 100644 --- a/packages/vue/src/grid/src/table/src/table.ts +++ b/packages/vue/src/grid/src/table/src/table.ts @@ -79,6 +79,7 @@ function loadStatic(data, _vm) { if (data && data.length > 0) { _vm.loadTableData(data, true).then(() => { _vm.handleDefault() + // 需要等到表格的vnode渲染完成后再去计算样式,计算每一列的宽度和滚动条位置,这里也是可以优化的点,这样会导致页面重排,重绘 _vm.updateStyle() }) } @@ -149,46 +150,6 @@ const renderFooterFn = (opt) => { } } -/** - * 渲染浮固定列 - */ -function renderFixed(h, $table, fixedType) { - let { - collectColumn, - columnStore, - footerData, - isGroup, - showFooter, - showHeader, - tableColumn, - tableData, - vSize, - visibleColumn - } = $table - let fixedColumn = columnStore[`${fixedType}List`] - - const props = { fixedType, tableData, tableColumn, visibleColumn, collectColumn, size: vSize, fixedColumn, isGroup } - - // prettier-ignore - return h( - 'div', - { - class: `tiny-grid__fixed-${fixedType}-wrapper`, - ref: `${fixedType}Container` - }, - [ - showHeader ? h(GridHeader, { props, ref: `${fixedType}Header` }) : null, - h(GridBody, { props, ref: `${fixedType}Body` }), - showFooter - ? h(GridFooter, { - props: { fixedType, footerData, tableColumn, visibleColumn, size: vSize, fixedColumn }, - ref: `${fixedType}Footer` - }) - : null - ] - ) -} - const renderResizeBarFn = (opt) => { const { isResizable, overflowX, scrollbarHeight } = opt return () => { @@ -288,11 +249,9 @@ function getRenderer(opt) { const { $slots, _vm, - leftList, optimizeOpts, overflowX, props, - rightList, showFooter, showHeader, tableColumn, @@ -316,12 +275,7 @@ function getRenderer(opt) { const renderHeader = () => (showHeader ? h(GridHeader, { ref: 'tableHeader', props }) : [null]) const renderEmptyPart = renderEmptyPartFn({ _vm, tableData, $slots, renderEmpty }) const renderFooter = renderFooterFn({ showFooter, footerData, footerMethod, tableColumn, visibleColumn, vSize }) - - const renderFixedLeft = () => (leftList && leftList.length && overflowX ? renderFixed(h, _vm, 'left') : [null]) - const renderFixedRight = () => (rightList && rightList.length && overflowX ? renderFixed(h, _vm, 'right') : [null]) - const renderResizeBar = renderResizeBarFn({ isResizable, overflowX, scrollbarHeight }) - const arg1 = { hasFilter, optimizeOpts, filterStore, isCtxMenu, ctxMenuStore, hasTip, tooltipContentOpts } const arg2 = { editRules, validOpts, height, tableData, vaildTipOpts, id, _vm } const renderPluginWrapper = renderPluginWrapperFn(Object.assign(arg1, arg2)) @@ -332,16 +286,15 @@ function getRenderer(opt) { renderHeader, renderEmptyPart, renderFooter, - renderFixedLeft, - renderFixedRight, renderResizeBar, renderPluginWrapper, renderSelectToolbar } } +// 设置表格最外层元素类名 function getTableAttrs(args) { - let { vSize, editConfig, showHeader, showFooter, overflowY, overflowX, leftList, rightList, showOverflow } = args + let { vSize, editConfig, showHeader, showFooter, overflowY, overflowX, showOverflow } = args let { showHeaderOverflow, highlightCell, optimizeOpts, stripe, border, isGroup, mouseConfig } = args let { loading, highlightHoverRow, highlightHoverColumn } = args @@ -350,8 +303,6 @@ function getTableAttrs(args) { showFooter: 'show__foot', overflowY: 'scroll__y', overflowX: 'scroll__x', - fixedLeft: 'fixed__left', - fixedRight: 'fixed__right', loading: 'is__loading', highlightHoverRow: 'row__highlight', highlightHoverColumn: 'column__highlight' @@ -366,8 +317,6 @@ function getTableAttrs(args) { [map.showFooter]: showFooter, [map.overflowY]: overflowY, [map.overflowX]: overflowX, - [map.fixedLeft]: leftList.length, - [map.fixedRight]: rightList.length, 'all-overflow': showOverflow, 'all-head-overflow': showHeaderOverflow, 'tiny-grid-cell__highlight': highlightCell, @@ -391,14 +340,22 @@ const gridData = { collectColumn: [], // 存放列相关的信息 columnStore: { + // 自适应的列表集合 autoList: [], centerList: [], + // 左侧冻结列表集合 leftList: [], - pxList: [], - pxMinList: [], - resizeList: [], + // 右侧冻结列表集合 rightList: [], + // 固定像素宽度列表集合 + pxList: [], + // 设置了最小宽度列表集合 + pxMinList: [], + // 可调整列宽列表集合 + resizeList: [], + // 百分比宽度列表集合 scaleList: [], + // 百分比最小宽度列表集合 scaleMinList: [] }, // 存放快捷菜单的信息 @@ -660,7 +617,7 @@ export default { rowKey: Boolean, // 行合并 rowSpan: Array, - // 滚动加载 + // 滚动加载(滚动分页加载) scrollLoad: Object, // 多选配置项 selectConfig: Object, @@ -769,6 +726,7 @@ export default { this.tooltipConfig ) }, + // 表格尺寸(medium|small|mini) vSize() { return this.size || (this.$parent && this.$parent.size) || (this.$parent && this.$parent.vSize) }, @@ -790,6 +748,7 @@ export default { }, watch: { collectColumn(value) { + // 这里在表格初始化的时候会触发两次(标签式),造成性能损失,待整改 this.watchColumn(value) }, customs(value) { @@ -797,6 +756,7 @@ export default { this.isUpdateCustoms = false }, data(value) { + // 此处监听只有当data的引用地址改变之后才会触发 if (Array.isArray(value)) { !this._isUpdateData && this.loadTableData(value, true).then(this.handleDefault) this._isUpdateData = false @@ -814,10 +774,13 @@ export default { height() { this.$nextTick(this.recalculate) }, + // 此属性暂时没有找到应用的demo,从语义上来说,觉得可以删除,官网有对应api但是没有对应的示例 syncResize(value) { + // 是否自动根据状态属性去更新响应式表格宽高 value && this.$nextTick(this.recalculate) }, tableColumn() { + // 对所有列的列宽进行分类:百分比/px this.analyColumnWidth() } }, @@ -844,9 +807,10 @@ export default { mounted() { this.$nextTick().then(() => { if (this.autoResize && TINYGrid._resize) { + // 使用ResizeObserver监听表格父元素尺寸,然后动态计算表格各种尺寸 this.bindResize() } - + // 在body上挂载弹出框类的表格内部组件:右键菜单、筛选框、提示 document.body.appendChild(this.$refs.tableWrapper) }) }, @@ -903,10 +867,10 @@ export default { return { slots, tableListeners } }, render() { - let { border, collectColumn, columnStore, editConfig, highlightCell, highlightHoverColumn } = this - let { highlightHoverRow, isGroup, loading, loadingComponent, mouseConfig = {}, optimizeOpts } = this - let { overflowX, overflowY, showFooter, showHeader, showHeaderOverflow, showOverflow } = this - let { stripe, tableColumn, tableData, vSize, visibleColumn } = this + let { border, collectColumn, columnStore, editConfig, highlightCell, highlightHoverColumn } = (this as any) + let { highlightHoverRow, isGroup, loading, loadingComponent, mouseConfig = {}, optimizeOpts } = (this as any) + let { overflowX, overflowY, showFooter, showHeader, showHeaderOverflow, showOverflow } = (this as any) + let { stripe, tableColumn, tableData, vSize, visibleColumn } = (this as any) let { leftList, rightList } = columnStore let $slots = this.slots const props = { tableData, tableColumn, visibleColumn, collectColumn, size: vSize, isGroup } @@ -914,10 +878,10 @@ export default { Object.assign(args, { showFooter, showHeader, tableColumn, tableData, vSize, visibleColumn }) const renders = getRenderer(args) - const { renderHeader, renderEmptyPart, renderFooter, renderFixedLeft } = renders - const { renderFixedRight, renderResizeBar, renderPluginWrapper, renderSelectToolbar } = renders + const { renderHeader, renderEmptyPart, renderFooter } = renders + const { renderResizeBar, renderPluginWrapper, renderSelectToolbar } = renders - args = { vSize, editConfig, showHeader, showFooter, overflowY, overflowX, leftList, rightList, showOverflow } + args = { vSize, editConfig, showHeader, showFooter, overflowY, overflowX, showOverflow } Object.assign(args, { showHeaderOverflow, highlightCell, optimizeOpts, stripe, border, isGroup, mouseConfig }) Object.assign(args, { loading, highlightHoverRow, highlightHoverColumn }) @@ -932,13 +896,9 @@ export default { h(GridBody, { ref: 'tableBody', props }), // 底部汇总 renderFooter(), - // 左侧固定列 - renderFixedLeft(), - // 右侧固定列 - renderFixedRight(), // 边框线 h('div', { class: 'tiny-grid__border-line', key: 'tinyGridBorderLine' }), - // 列宽线 + // 列拖拽参考线 renderResizeBar(), // 加载中 h(loadingComponent || GridLoading, { props: { visible: loading } }), diff --git a/packages/vue/src/grid/src/table/src/utils/autoCellWidth.ts b/packages/vue/src/grid/src/table/src/utils/autoCellWidth.ts index 6d9ccdbcb..438203b9b 100644 --- a/packages/vue/src/grid/src/table/src/utils/autoCellWidth.ts +++ b/packages/vue/src/grid/src/table/src/utils/autoCellWidth.ts @@ -23,6 +23,8 @@ * */ +import { addClass } from '@opentiny/vue-renderless/common/deps/dom' + // 自适应 const adaptive = ({ autoArr, meanWidth, minCellWidth, tableWidth, fit, bodyWidth }) => { autoArr.forEach((column, index) => { @@ -45,11 +47,11 @@ const adaptive = ({ autoArr, meanWidth, minCellWidth, tableWidth, fit, bodyWidth return tableWidth } +// 计算每一列的渲染宽度:renderWidth const initTableWidth = ({ remainWidth, columnStore }) => { let tableWidth = 0 let { resizeList: resizeArr, pxMinList: pxMinArr, pxList: pxArr } = columnStore let { scaleList: scaleArr, scaleMinList: scaleMinArr } = columnStore - // 最小宽 pxMinArr.forEach((column) => { let minWidth = parseInt(column.minWidth) @@ -109,5 +111,37 @@ export const calcTableWidth = ({ bodyWidth, columnStore, fit, minCellWidth, rema meanWidth = minCellWidth } + // 自适应修补一些列的宽度 return adaptive({ autoArr, meanWidth, minCellWidth, tableWidth, fit, bodyWidth }) } + +const setLeftOrRightPosition = ({ columnList, direction, headerEl, bodyEl }) => { + const colLength = columnList.length + columnList.reduce((pos, column, index) => { + // 可能存在没有表头的情况,所以需要兼容处理下 + const ths = headerEl?.querySelectorAll(`[data-colid=${column.id}]`) || [] + const tds = bodyEl.querySelectorAll(`[data-colid=${column.id}]`) + const allFixed = [...Array.from(ths), ...Array.from(tds)] + const isLastLeftFixed = direction === 'left' && index === colLength - 1 + const isFirstRightFixed = direction === 'right' && index === 0 + + allFixed.forEach(td => { + td.style[direction] = `${pos}px` + if (isLastLeftFixed) { + addClass(td, 'fixed-left-last__column') + } + if (isFirstRightFixed) { + addClass(td, 'fixed-right-first__column') + } + }) + pos += column.renderWidth + return pos + }, 0) +} + +export const calcFixedStickyPosition = ({ headerEl, bodyEl, columnStore }) => { + // 获取左侧和右侧冻结列 + const { leftList, rightList } = columnStore + setLeftOrRightPosition({ columnList: leftList, direction: 'left', headerEl, bodyEl }) + setLeftOrRightPosition({ columnList: rightList, direction: 'right', headerEl, bodyEl }) +} diff --git a/packages/vue/src/grid/src/table/src/utils/computeScrollLoad.ts b/packages/vue/src/grid/src/table/src/utils/computeScrollLoad.ts index 81939bbe3..34db7a5f6 100644 --- a/packages/vue/src/grid/src/table/src/utils/computeScrollLoad.ts +++ b/packages/vue/src/grid/src/table/src/utils/computeScrollLoad.ts @@ -29,10 +29,12 @@ let isWebkit = browser['-webkit'] && browser.name !== 'edge' export function computeScrollYLoad({ _vm, scrollLoad, scrollY, scrollYLoad, scrollYStore, tableBodyElem }) { if (scrollYLoad || scrollLoad) { + // 获取表格体默认第一行的高度 scrollYStore.rowHeight = _vm.getRowHeight() } if (scrollYLoad) { + // scrollY.vSize用户配置的可视区域渲染行数 let visibleYSize = toNumber(scrollY.vSize || Math.ceil(tableBodyElem.clientHeight / scrollYStore.rowHeight)) scrollYStore.visibleSize = visibleYSize @@ -42,12 +44,16 @@ export function computeScrollYLoad({ _vm, scrollLoad, scrollY, scrollYLoad, scro scrollYStore.offsetSize = visibleYSize } + // scrollY.rSize用户配置的每次渲染行数 if (!scrollY.rSize) { + // 如果是webkit内核浏览器则渲染行数*2否则就+2行(ie浏览器) scrollYStore.renderSize = visibleYSize + (isWebkit ? 2 : visibleYSize) } + // 计算需要渲染的表格数据,并更新YSpace元素高度用来显示正确的滚动条长度 _vm.updateScrollYData() } else { + // 滚动分页加载 _vm.updateScrollYSpace() } } diff --git a/packages/vue/src/grid/src/table/src/utils/handleFixedColumn.ts b/packages/vue/src/grid/src/table/src/utils/handleFixedColumn.ts new file mode 100644 index 000000000..26843be7d --- /dev/null +++ b/packages/vue/src/grid/src/table/src/utils/handleFixedColumn.ts @@ -0,0 +1,26 @@ +import { addClass, removeClass } from '@opentiny/vue-renderless/common/deps/dom' +export const generateFixedClassName = ({ $table, bodyElem, leftList, rightList, }) => { + if (!$table || !bodyElem) { + return + } + + const scrollLeft = bodyElem.scrollLeft + + if (leftList.length) { + if (scrollLeft === 0) { + removeClass($table.$el, 'tiny-grid-fixed__left') + } else { + addClass($table.$el, 'tiny-grid-fixed__left') + } + } + + if (rightList.length) { + const isShowRightFixed = bodyElem.scrollWidth - bodyElem.clientWidth - bodyElem.scrollLeft + + if (isShowRightFixed === 0) { + removeClass($table.$el, 'tiny-grid-fixed__right') + } else { + addClass($table.$el, 'tiny-grid-fixed__right') + } + } +} diff --git a/packages/vue/src/grid/src/table/src/utils/updateStyle.ts b/packages/vue/src/grid/src/table/src/utils/updateStyle.ts index 223fd6fe5..5925cac4d 100644 --- a/packages/vue/src/grid/src/table/src/utils/updateStyle.ts +++ b/packages/vue/src/grid/src/table/src/utils/updateStyle.ts @@ -24,7 +24,6 @@ */ import { arrayEach, toNumber } from '@opentiny/vue-renderless/grid/static/' import { isScale } from '@opentiny/vue-renderless/grid/utils' -import browser from '@opentiny/vue-renderless/common/browser' function setTableElemWidth({ scrollbarWidth, tWidth, tableElem }) { if (tableElem && tWidth === null) { @@ -36,19 +35,8 @@ function setTableElemWidth({ scrollbarWidth, tWidth, tableElem }) { } } -function getTableWidth({ allColumnOverflow, fixedColumn, fixedType, scrollXLoad, tWidth, tableColumn }) { - let isFixedAllColumnOverflow = fixedType && allColumnOverflow - - if (isFixedAllColumnOverflow) { - tableColumn = fixedColumn - tWidth = tableColumn.reduce((previous, column) => previous + column.renderWidth, 0) - } - - if (!isFixedAllColumnOverflow && scrollXLoad && fixedType) { - tableColumn = fixedColumn - } - - if (!isFixedAllColumnOverflow && scrollXLoad) { +function getTableWidth({ scrollXLoad, tWidth, tableColumn }) { + if (scrollXLoad) { tWidth = tableColumn.reduce((previous, column) => previous + column.renderWidth, 0) } @@ -57,9 +45,6 @@ function getTableWidth({ allColumnOverflow, fixedColumn, fixedType, scrollXLoad, function layoutFooter({ customHeight, - fixedColumn, - fixedType, - allColumnOverflow, footerHeight, headerHeight, scrollXLoad, @@ -75,7 +60,7 @@ function layoutFooter({ // 如果是使用优化模式 let tWidth = tableWidth // 如果是固定列与设置了超出隐藏 - let ret = getTableWidth({ allColumnOverflow, fixedColumn, fixedType, scrollXLoad, tWidth, tableColumn }) + let ret = getTableWidth({ scrollXLoad, tWidth, tableColumn }) tableColumn = ret.tableColumn tWidth = ret.tWidth @@ -93,9 +78,9 @@ function layoutFooter({ return tableColumn } +// 计算colgroup元素中每个col元素的width属性,保证表头和表格体保持对齐 function layoutColgroup({ elemStore, fullColumnIdData, layout, name, scrollbarWidth }) { let colgroupElem = elemStore[`${name}-${layout}-colgroup`] - let colElemHandler = (colElem) => { let colid = colElem.getAttribute('name') @@ -114,14 +99,10 @@ function layoutColgroup({ elemStore, fullColumnIdData, layout, name, scrollbarWi } } -function layoutHeader({ elemStore, fixedColumn, fixedType, layout, name, scrollXLoad, scrollbarWidth, tableColumn, tableElem, tableWidth }) { +function layoutHeader({ elemStore, layout, name, scrollXLoad, scrollbarWidth, tableColumn, tableElem, tableWidth }) { let tWidth = tableWidth let repairElem = elemStore[`${name}-${layout}-repair`] - if (scrollXLoad && fixedType) { - tableColumn = fixedColumn - } - if (scrollXLoad) { tWidth = tableColumn.reduce((previous, column) => previous + column.renderWidth, 0) } @@ -135,19 +116,13 @@ function layoutHeader({ elemStore, fixedColumn, fixedType, layout, name, scrollX return tableColumn } -function layoutTable({ fixedType, overflowY, scrollbarWidth, tWidth, tableElem }) { +function layoutTable({ tWidth, tableElem }) { if (tableElem) { tableElem.style.width = tWidth ? `${tWidth}px` : tWidth - - // 兼容性处理 - if (overflowY && fixedType && (browser['-moz'] || browser.name === 'safari')) { - tableElem.style.paddingRight = `${scrollbarWidth}px` - } } } function layoutBodyWrapper({ - fixedType, footerHeight, customHeight, headerHeight, @@ -165,7 +140,7 @@ function layoutBodyWrapper({ const barWidth = showFooter ? (overflowX ? scrollbarWidth : 0) : scrollbarHeight const contentHeight = customHeight - headerHeight - footerHeight - wrapperElem.style.height = `${fixedType ? contentHeight - barWidth : contentHeight}px` + wrapperElem.style.height = `${contentHeight}px` } if (maxHeight) { @@ -174,7 +149,7 @@ function layoutBodyWrapper({ const barHeight = showFooter ? 0 : scrollbarHeight const contentHeight = maxHeight - headerHeight - wrapperElem.style.maxHeight = `${fixedType ? contentHeight - barHeight : contentHeight}px` + wrapperElem.style.maxHeight = `${contentHeight}px` } if (minHeight) { @@ -201,44 +176,14 @@ function layoutEmptyBlock({ emptyBlockElem, tWidth }) { } } -function layoutBodyFixedWrapper({ - customHeight, - columnStore, - fixedWrapperElem, - footerHeight, - fixedType, - scrollbarWidth, - headerHeight, - tableHeight, - scrollbarHeight, - showFooter, - wrapperElem -}) { - if (fixedWrapperElem) { - let isRightFixed = fixedType === 'right' - let fixedColumn = columnStore[`${fixedType}List`] - - if (wrapperElem) { - wrapperElem.style.top = `${headerHeight}px` - } - - const contentHeight = customHeight > 0 ? customHeight - headerHeight - footerHeight : tableHeight - const barHeight = scrollbarHeight * (showFooter ? 2 : 1) - - fixedWrapperElem.style.height = `${contentHeight + headerHeight + footerHeight - barHeight}px` - fixedWrapperElem.style.width = `${fixedColumn.reduce((previous, column) => previous + column.renderWidth, isRightFixed ? scrollbarWidth : 0)}px` - } -} - function layoutBody(options) { - let { allColumnOverflow, columnStore, customHeight, elemStore, fixedColumn, fixedType, fixedWrapperElem, footerHeight, headerHeight, layout, name } = options - let { maxHeight, minHeight, overflowX, overflowY, parentHeight, scrollXLoad, scrollbarHeight } = options - let { scrollbarWidth, showFooter, tableColumn, tableElem, tableHeight, tableWidth, wrapperElem } = options + let { customHeight, elemStore, footerHeight, headerHeight, layout, name } = options + let { maxHeight, minHeight, overflowX, parentHeight, scrollXLoad, scrollbarHeight } = options + let { scrollbarWidth, showFooter, tableColumn, tableElem, tableWidth, wrapperElem } = options let emptyBlockElem = elemStore[`${name}-${layout}-emptyBlock`] let ret = layoutBodyWrapper({ customHeight, - fixedType, footerHeight, headerHeight, maxHeight, @@ -254,49 +199,34 @@ function layoutBody(options) { maxHeight = ret.maxHeight minHeight = ret.minHeight - // 如果是固定列 - layoutBodyFixedWrapper({ - columnStore, - customHeight, - fixedType, - fixedWrapperElem, - footerHeight, - headerHeight, - scrollbarHeight, - scrollbarWidth, - showFooter, - tableHeight, - wrapperElem - }) let tWidth = tableWidth // 如果是固定列与设置了超出隐藏 - ret = getTableWidth({ allColumnOverflow, fixedColumn, fixedType, scrollXLoad, tWidth, tableColumn }) + ret = getTableWidth({ scrollXLoad, tWidth, tableColumn }) tableColumn = ret.tableColumn tWidth = ret.tWidth - layoutTable({ fixedType, overflowY, scrollbarWidth, tWidth, tableElem }) + layoutTable({ tWidth, tableElem }) layoutEmptyBlock({ emptyBlockElem, tWidth }) return { maxHeight, minHeight, tableColumn } } export function handleLayout(params) { - let { _vm, columnStore, customHeight, fixedColumn, fixedType, fixedWrapperElem, layout, maxHeight, minHeight, name, parentHeight, tableColumn } = params - let { border, elemStore, footerHeight, fullColumnIdData, headerHeight, showFooter } = _vm - let { isGroup, overflowX, overflowY, scrollXLoad, scrollbarHeight, scrollbarWidth } = _vm - let { showHeaderOverflow: allColumnHeaderOverflow, showOverflow: allColumnOverflow, tableHeight, tableWidth } = _vm + let { _vm, columnStore, customHeight, fixedColumn, fixedWrapperElem, layout, maxHeight, minHeight, name, parentHeight, tableColumn } = params + let { elemStore, footerHeight, fullColumnIdData, headerHeight, showFooter } = _vm + let { overflowX, overflowY, scrollXLoad, scrollbarHeight, scrollbarWidth } = _vm + let { showOverflow: allColumnOverflow, tableHeight, tableWidth } = _vm let wrapperElem = elemStore[`${name}-${layout}-wrapper`] let tableElem = elemStore[`${name}-${layout}-table`] - /* * 表头体样式处理 * 横向滚动渲染 */ if (layout === 'header') { - tableColumn = layoutHeader({ elemStore, fixedColumn, fixedType, layout, name, scrollXLoad, scrollbarWidth, tableColumn, tableElem, tableWidth }) + tableColumn = layoutHeader({ elemStore, layout, name, scrollXLoad, scrollbarWidth, tableColumn, tableElem, tableWidth }) } else if (layout === 'body') { let ret = layoutBody({ - ...{ allColumnOverflow, columnStore, customHeight, elemStore, fixedColumn, fixedType, fixedWrapperElem }, + ...{ allColumnOverflow, columnStore, customHeight, elemStore, fixedColumn, fixedWrapperElem }, ...{ footerHeight, headerHeight, layout, maxHeight, minHeight, name, overflowX, overflowY }, ...{ parentHeight, scrollXLoad, scrollbarHeight, scrollbarWidth, showFooter, tableColumn, tableElem, tableHeight, tableWidth, wrapperElem } }) @@ -306,10 +236,7 @@ export function handleLayout(params) { tableColumn = ret.tableColumn } else if (layout === 'footer') { tableColumn = layoutFooter({ - allColumnOverflow, customHeight, - fixedColumn, - fixedType, fixedWrapperElem, footerHeight, headerHeight, @@ -324,7 +251,7 @@ export function handleLayout(params) { }) } - layoutColgroup({ allColumnHeaderOverflow, allColumnOverflow, border, elemStore, fullColumnIdData, isGroup, layout, name, scrollbarWidth }) + layoutColgroup({ elemStore, fullColumnIdData, layout, name, scrollbarWidth }) return { tableColumn, maxHeight, minHeight } } diff --git a/packages/vue/src/guide/index.ts b/packages/vue/src/guide/index.ts new file mode 100644 index 000000000..a4b3d40d3 --- /dev/null +++ b/packages/vue/src/guide/index.ts @@ -0,0 +1,23 @@ +import Guide from './src/index' +import { version } from './package.json' + +Guide.model = { + prop: 'modelValue', + event: 'update:modelValue' +} + +/* istanbul ignore next */ +Guide.install = function (Vue) { + Vue.component(Guide.name, Guide) +} + +Guide.version = version + +/* istanbul ignore next */ +if (process.env.BUILD_TARGET === 'runtime') { + if (typeof window !== 'undefined' && window.Vue) { + Guide.install(window.Vue) + } +} + +export default Guide diff --git a/packages/vue/src/guide/package.json b/packages/vue/src/guide/package.json new file mode 100644 index 000000000..c343a3320 --- /dev/null +++ b/packages/vue/src/guide/package.json @@ -0,0 +1,16 @@ +{ + "name": "@opentiny/vue-guide", + "version": "5.0.0-mf.0", + "description": "", + "main": "lib/index.js", + "module": "index.ts", + "dependencies": { + "@opentiny/vue-renderless": "workspace:~", + "@opentiny/vue-common": "workspace:~", + "shepherd.js": "11.0.1" + }, + "peerDependencies": { + "@floating-ui/dom": "^1.0.10" + }, + "license": "MIT" +} diff --git a/packages/vue/src/guide/src/index.ts b/packages/vue/src/guide/src/index.ts new file mode 100644 index 000000000..22ff2919e --- /dev/null +++ b/packages/vue/src/guide/src/index.ts @@ -0,0 +1,57 @@ +import { $props, $prefix, $setup } from '@opentiny/vue-common' +import template from 'virtual-template?pc' + +export default { + name: $prefix + 'Guide', + props: { + ...$props, + showStep: { + type: Boolean, + default: false + }, + domData: Array, + mainAxis: { + type: Number, + default: 18 + }, + crossAxis: { + type: Number, + default: null + }, + alignmentAxis: { + type: Number, + default: null + }, + popPosition: { + type: String, + default: 'bottom' + }, + arrow: { + type: Boolean, + default: true + }, + modalOverlayOpeningPadding: { + type: Number, + default: 0 + }, + modalOverlayOpeningRadius: { + type: Number, + default: 0 + }, + lightClass: { + type: String, + default: '' + }, + width: { + type: String, + default: '510' + }, + height: { + type: String, + default: '' + } + }, + setup(props, context) { + return $setup({ props, context, template }) + } +} diff --git a/packages/vue/src/guide/src/pc.vue b/packages/vue/src/guide/src/pc.vue new file mode 100644 index 000000000..1a6a082ff --- /dev/null +++ b/packages/vue/src/guide/src/pc.vue @@ -0,0 +1,43 @@ + + + diff --git a/packages/vue/src/hrapprover/src/pc.vue b/packages/vue/src/hrapprover/src/pc.vue index 86fc6226c..58fa02a30 100644 --- a/packages/vue/src/hrapprover/src/pc.vue +++ b/packages/vue/src/hrapprover/src/pc.vue @@ -43,7 +43,7 @@ - diff --git a/packages/vue/src/image/src/index.ts b/packages/vue/src/image/src/index.ts index 6888ee32b..a264788e5 100644 --- a/packages/vue/src/image/src/index.ts +++ b/packages/vue/src/image/src/index.ts @@ -10,7 +10,7 @@ * */ import { $props, $prefix, $setup, defineComponent } from '@opentiny/vue-common' -import template from 'virtual-template?pc' +import template from 'virtual-template?pc|mobile-first' const $constants = { NONE: 'none', @@ -40,6 +40,26 @@ export default defineComponent({ zIndex: { type: Number, default: $constants.DEFAULT_POPPER_ZINDEX + }, + showIndex: { + type: Boolean, + default: false + }, + showHover: { + type: Boolean, + default: false + }, + previewVisible: { + type: Boolean, + default: false + }, + round: { + type: Boolean, + default: false + }, + imageSize: { + type: Number, + default: 100 } }, setup(props, context) { diff --git a/packages/vue/src/image/src/mobile-first.vue b/packages/vue/src/image/src/mobile-first.vue new file mode 100644 index 000000000..a77cbd837 --- /dev/null +++ b/packages/vue/src/image/src/mobile-first.vue @@ -0,0 +1,101 @@ + + + diff --git a/packages/vue/src/image/src/pc.vue b/packages/vue/src/image/src/pc.vue index 441925905..9d6eb61d3 100644 --- a/packages/vue/src/image/src/pc.vue +++ b/packages/vue/src/image/src/pc.vue @@ -33,7 +33,7 @@ - diff --git a/packages/vue/src/input/src/mobile.vue b/packages/vue/src/input/src/mobile.vue index e676c93e0..0bbb955c7 100644 --- a/packages/vue/src/input/src/mobile.vue +++ b/packages/vue/src/input/src/mobile.vue @@ -10,33 +10,51 @@ * --> - diff --git a/packages/vue/src/logon-user/index.ts b/packages/vue/src/logon-user/index.ts index 913ea6c6a..d591cb804 100644 --- a/packages/vue/src/logon-user/index.ts +++ b/packages/vue/src/logon-user/index.ts @@ -1,4 +1,4 @@ -import LogonUser from './src/index.vue' +import LogonUser from './src/pc.vue' import { version } from './package.json' /* istanbul ignore next */ diff --git a/packages/vue/src/logon-user/src/pc.vue b/packages/vue/src/logon-user/src/pc.vue new file mode 100644 index 000000000..67362dfe6 --- /dev/null +++ b/packages/vue/src/logon-user/src/pc.vue @@ -0,0 +1,18 @@ + + + diff --git a/packages/vue/src/logout/src/pc.vue b/packages/vue/src/logout/src/pc.vue index 75fc5db93..25ea0e4a8 100644 --- a/packages/vue/src/logout/src/pc.vue +++ b/packages/vue/src/logout/src/pc.vue @@ -4,7 +4,7 @@ - diff --git a/packages/vue/src/modal/index.ts b/packages/vue/src/modal/index.ts index 51c3cf49d..df8362d2f 100644 --- a/packages/vue/src/modal/index.ts +++ b/packages/vue/src/modal/index.ts @@ -106,7 +106,10 @@ setupComponent.TINYModal = { // vue3 或 vue2 const isVue2 = !!Vue.component const tinyMode = isVue2 ? Vue.prototype.tiny_mode : Vue.config.globalProperties.tiny_mode + const tinyTheme = isVue2 ? Vue.prototype.tiny_theme : Vue.config.globalProperties.tiny_theme TINYModal.tiny_mode = process.env.TINY_MODE || (tinyMode && tinyMode.value) + TINYModal.tiny_theme = tinyTheme && tinyTheme.value + TINYModal.installed = true }, init(root) { diff --git a/packages/vue/src/modal/src/index.ts b/packages/vue/src/modal/src/index.ts index 487109ecd..cc698d001 100644 --- a/packages/vue/src/modal/src/index.ts +++ b/packages/vue/src/modal/src/index.ts @@ -10,7 +10,7 @@ * */ import { $props, $prefix, $setup, defineComponent } from '@opentiny/vue-common' -import template from 'virtual-template?pc|mobile' +import template from 'virtual-template?pc|mobile|mobile-first' const $constants = { MODAL_STATUS: { @@ -77,7 +77,12 @@ export default defineComponent({ vSize: String, width: [Number, String], zIndex: [Number, String], - mode: null + mode: null, + description: String, + options: Array, + showClose: { type: Boolean, default: true }, + confirmContent: String, + cancelContent: String }, setup(props, context) { return $setup({ props, context, template }) diff --git a/packages/vue/src/modal/src/mobile-first.vue b/packages/vue/src/modal/src/mobile-first.vue new file mode 100644 index 000000000..3ce259109 --- /dev/null +++ b/packages/vue/src/modal/src/mobile-first.vue @@ -0,0 +1,464 @@ + diff --git a/packages/vue/src/modal/src/pc.vue b/packages/vue/src/modal/src/pc.vue index 51d50394d..2f1d39a65 100644 --- a/packages/vue/src/modal/src/pc.vue +++ b/packages/vue/src/modal/src/pc.vue @@ -57,7 +57,9 @@ export default defineComponent({ 'type', 'vSize', 'width', - 'zIndex' + 'zIndex', + 'showClose', + 'messageClosable' ], components: { Button @@ -69,7 +71,7 @@ export default defineComponent({ return setup({ props, context, renderless, api }) }, render() { - let { state, scopedSlots, vSize, type, resize, animat, status, showHeader } = this + let { state, scopedSlots, vSize, type, resize, animat, status, showHeader, messageClosable } = this let { showFooter, title, message, lockScroll, lockView, mask, _constants: constants, t } = this let { zoomLocat, visible, contentVisible, modalTop, isMsg } = state let defaultSlot = scopedSlots.default @@ -201,7 +203,17 @@ export default defineComponent({ defaultSlot ? defaultSlot.call(this, { $modal: this }, h) : [h('div', { class: 'tiny-modal__text' }, typeof message === 'function' ? message.call(this, h) : message)] - ) + ), + messageClosable ? h('div', { + class: 'tiny-modal__close-wrapper' + }, + h(iconClose(), { + class: ['tiny-modal__close-btn'], + on: { + click: this.closeEvent + } + }) + ) : null ] ), showFooter @@ -213,30 +225,30 @@ export default defineComponent({ footerSlot ? footerSlot.call(this, { $modal: this, beforeClose: this.beforeClose }, h) : [ - h( + h( + Button, + { + props: { + type: 'primary' + }, + on: { + click: this.confirmEvent + } + }, + t('ui.button.confirm') + ), + type === 'confirm' + ? h( Button, { - props: { - type: 'primary' - }, on: { - click: this.confirmEvent + click: this.cancelEvent } }, - t('ui.button.confirm') - ), - type === 'confirm' - ? h( - Button, - { - on: { - click: this.cancelEvent - } - }, - t('ui.button.cancel') - ) - : null - ] + t('ui.button.cancel') + ) + : null + ] ) : null, !isMsg && resize diff --git a/packages/vue/src/month-range/index.ts b/packages/vue/src/month-range/index.ts index 01e7599ff..51025fc8d 100644 --- a/packages/vue/src/month-range/index.ts +++ b/packages/vue/src/month-range/index.ts @@ -9,7 +9,7 @@ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS. * */ -import MonthRange from './src/index.vue' +import MonthRange from './src/pc.vue' import '@opentiny/vue-theme/month-range/index.less' import { version } from './package.json' diff --git a/packages/vue/src/month-range/src/pc.vue b/packages/vue/src/month-range/src/pc.vue new file mode 100644 index 000000000..ec359dea8 --- /dev/null +++ b/packages/vue/src/month-range/src/pc.vue @@ -0,0 +1,127 @@ + + + + diff --git a/packages/vue/src/month-table/index.ts b/packages/vue/src/month-table/index.ts index 3e082fe33..a32053718 100644 --- a/packages/vue/src/month-table/index.ts +++ b/packages/vue/src/month-table/index.ts @@ -9,7 +9,7 @@ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS. * */ -import MonthTable from './src/index.vue' +import MonthTable from './src/pc.vue' import '@opentiny/vue-theme/month-table/index.less' import { version } from './package.json' diff --git a/packages/vue/src/month-table/src/pc.vue b/packages/vue/src/month-table/src/pc.vue new file mode 100644 index 000000000..7e1626c63 --- /dev/null +++ b/packages/vue/src/month-table/src/pc.vue @@ -0,0 +1,55 @@ + + + + diff --git a/packages/vue/src/multi-select/src/mobile.vue b/packages/vue/src/multi-select/src/mobile.vue index 56ec001ac..248368429 100644 --- a/packages/vue/src/multi-select/src/mobile.vue +++ b/packages/vue/src/multi-select/src/mobile.vue @@ -10,23 +10,18 @@ * --> - diff --git a/packages/vue/src/numeric/src/index.ts b/packages/vue/src/numeric/src/index.ts index b12903304..b5123a42d 100644 --- a/packages/vue/src/numeric/src/index.ts +++ b/packages/vue/src/numeric/src/index.ts @@ -10,7 +10,7 @@ * */ import { $props, $prefix, $setup, defineComponent } from '@opentiny/vue-common' -import template from 'virtual-template?pc|mobile' +import template from 'virtual-template?pc|mobile|mobile-first' const $constants = { MAX: 'aria-valuemax', @@ -111,6 +111,14 @@ export default defineComponent({ validateEvent: { type: Boolean, default: true + }, + displayOnly: { + type: Boolean, + default: false + }, + showLeft: { + type: Boolean, + default: false } }, setup(props, context) { diff --git a/packages/vue/src/numeric/src/mobile-first.vue b/packages/vue/src/numeric/src/mobile-first.vue new file mode 100644 index 000000000..c548529e5 --- /dev/null +++ b/packages/vue/src/numeric/src/mobile-first.vue @@ -0,0 +1,146 @@ + + + diff --git a/packages/vue/src/numeric/src/token.ts b/packages/vue/src/numeric/src/token.ts new file mode 100644 index 000000000..8867d5802 --- /dev/null +++ b/packages/vue/src/numeric/src/token.ts @@ -0,0 +1,23 @@ +export const classes = { + 'numeric': 'relative flex items-center w-24 h-7 text-sm', + 'numeric_size': 'sm:w-[6.625rem] sm:h-7 sm:text-xs', + 'numeric_medium': 'sm:w-[8.125rem] sm:h-8 sm:text-sm', + 'numeric_decrease': + 'absolute z-10 text-center cursor-pointer left-0 flex items-center justify-center bg-color-bg-2 active:bg-color-border-separator focus:bg-border-separator sm:bg-inherit sm:active:bg-inherit sm:focus:bg-inherit w-7 h-7 leading-7 border-0.5 border-color-border-separator rounded-l-sm sm:border-0', + 'numeric_increase': + 'absolute z-10 text-center cursor-pointer right-0 flex items-center justify-center bg-color-bg-2 active:bg-color-border-separator focus:bg-border-separator sm:bg-inherit sm:active:bg-inherit sm:focus:bg-inherit w-7 h-7 leading-7 border-0.5 border-color-border-separator rounded-r-sm sm:border-0', + 'numeric_crease_disabled': 'bg-color-bg-4 active:bg-color-bg-4 focus:bg-color-bg-4', + 'numeric_svg': + 'sm:w-4 sm:h-4 w-3.5 h-3.5 inline-block fill-color-icon-primary sm:hover:fill-color-brand-hover sm:active:fill-color-brand-active sm:focus:fill-color-brand-active', + 'numeric_svg_disabled': 'fill-color-text-disabled cursor-not-allowed', + 'numeric_svg_size': 'sm:w-7 sm:h-7 sm:leading-7 sm:text-xs', + 'numeric_svg_medium': 'sm:w-8 sm:h-8 sm:leading-8 sm:text-sm', + 'numeric_input': 'block leading-3', + 'numeric_input_inner': + 'w-full z-10 h-7 leading-7 sm:text-xs px-8 inline-block text-center border-0.5 sm:border border-solid rounded-sm border-color-border-separator sm:border-color-border overflow-hidden', + 'numeric_input_inner_size': 'h-7 leading-7 text-sm sm:px-8 px-9', + 'numeric_input_inner_medium': 'sm:h-8 sm:leading-8 text-sm sm:px-9 sm:text-sm', + 'numeric_input_inner_default': + 'sm:hover:border-color-text-primary sm:active:border-color-brand-active sm:focus:border-color-brand-active outline-none caret-color-brand', + 'numeric_input_inner_disabled': 'bg-inherit sm:bg-color-bg-4 cursor-not-allowed' +} diff --git a/packages/vue/src/option-group/index.ts b/packages/vue/src/option-group/index.ts index a04d6ced0..7174aa74b 100644 --- a/packages/vue/src/option-group/index.ts +++ b/packages/vue/src/option-group/index.ts @@ -9,7 +9,7 @@ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS. * */ -import OptionGroup from './src/index.vue' +import OptionGroup from './src/pc.vue' import '@opentiny/vue-theme/option-group/index.less' import { version } from './package.json' diff --git a/packages/vue/src/option-group/src/pc.vue b/packages/vue/src/option-group/src/pc.vue new file mode 100644 index 000000000..d90aba2e1 --- /dev/null +++ b/packages/vue/src/option-group/src/pc.vue @@ -0,0 +1,44 @@ + + + + diff --git a/packages/vue/src/option/index.ts b/packages/vue/src/option/index.ts index 0c5d5dbe4..56b770c91 100644 --- a/packages/vue/src/option/index.ts +++ b/packages/vue/src/option/index.ts @@ -9,7 +9,7 @@ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS. * */ -import Option from './src/index.vue' +import Option from './src/pc.vue' import '@opentiny/vue-theme/option/index.less' import { version } from './package.json' diff --git a/packages/vue/src/option/src/pc.vue b/packages/vue/src/option/src/pc.vue new file mode 100644 index 000000000..ab7b67906 --- /dev/null +++ b/packages/vue/src/option/src/pc.vue @@ -0,0 +1,79 @@ + + + + diff --git a/packages/vue/src/pager-item/index.ts b/packages/vue/src/pager-item/index.ts index 9a8b453a5..2d4c0c31c 100644 --- a/packages/vue/src/pager-item/index.ts +++ b/packages/vue/src/pager-item/index.ts @@ -9,7 +9,7 @@ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS. * */ -import PagerItem from './src/index.vue' +import PagerItem from './src/index' import { version } from './package.json' /* istanbul ignore next */ diff --git a/packages/vue/src/pager-item/src/index.ts b/packages/vue/src/pager-item/src/index.ts new file mode 100644 index 000000000..20f557cb6 --- /dev/null +++ b/packages/vue/src/pager-item/src/index.ts @@ -0,0 +1,33 @@ +import { $props, $prefix, $setup } from '@opentiny/vue-common' +import { IconPopup, IconDoubleLeft, IconDoubleRight } from '@opentiny/vue-icon' +import template from 'virtual-template?pc|mobile-first' + +export default { + name: $prefix + 'PagerItem', + props: { + ...$props, + disabled: { + type: Boolean, + default: false + }, + currentPage: Number, + pageCount: Number, + pagerCount: Number, + popupIcon: { + type: Object, + default: IconPopup + }, + doubleLeftIcon: { + type: Object, + default: IconDoubleLeft + }, + doubleRightIcon: { + type: Object, + default: IconDoubleRight + }, + isBeforePageChange: Boolean + }, + setup(props, context) { + return $setup({ props, context, template }) + } +} diff --git a/packages/vue/src/pager-item/src/mobile-first.vue b/packages/vue/src/pager-item/src/mobile-first.vue new file mode 100644 index 000000000..7ed6ad2e9 --- /dev/null +++ b/packages/vue/src/pager-item/src/mobile-first.vue @@ -0,0 +1,70 @@ + + + diff --git a/packages/vue/src/pager-item/src/pc.vue b/packages/vue/src/pager-item/src/pc.vue new file mode 100644 index 000000000..0032c374f --- /dev/null +++ b/packages/vue/src/pager-item/src/pc.vue @@ -0,0 +1,66 @@ + + + + diff --git a/packages/vue/src/pager-item/src/token.ts b/packages/vue/src/pager-item/src/token.ts new file mode 100644 index 000000000..0cf02bf66 --- /dev/null +++ b/packages/vue/src/pager-item/src/token.ts @@ -0,0 +1,8 @@ +export const classes = { + 'pager-group': 'inline-block align-middle text-xs h-7', + 'li': 'bg-left-top inline-block text-xs ml-2 cursor-pointer text-center h-7 leading-7 min-w-[1.75rem] rounded-sm text-color-text-primary px-1 box-border transition-all duration-300 ease-in', + 'li-hover': 'hover:text-color-brand-hover', + 'is-active': 'text-color-brand border border-solid border-color-brand', + 'quick-icon': 'h-7 w-3 fill-color-icon-primary hover:fill-color-brand', + 'dot': 'w-4 min-w-0 p-0 border-none' +} diff --git a/packages/vue/src/pager/index.ts b/packages/vue/src/pager/index.ts index 1977ab98f..4cdc2b4a4 100644 --- a/packages/vue/src/pager/index.ts +++ b/packages/vue/src/pager/index.ts @@ -9,7 +9,7 @@ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS. * */ -import Pager from './src/index.vue' +import Pager from './src/index' import '@opentiny/vue-theme/pager/index.less' import { version } from './package.json' diff --git a/packages/vue/src/pager/src/index.ts b/packages/vue/src/pager/src/index.ts new file mode 100644 index 000000000..09c03253d --- /dev/null +++ b/packages/vue/src/pager/src/index.ts @@ -0,0 +1,66 @@ +import { $props, $prefix, $setup, defineComponent } from '@opentiny/vue-common' +import template from 'virtual-template?pc|mobile-first' + +export default defineComponent({ + name: $prefix + 'Pager', + props: { + ...$props, + accurateJumper: { + type: Boolean, + default: () => true + }, + appendToBody: { + type: Boolean, + default: () => true + }, + currentPage: { + type: Number, + default: () => 1 + }, + disabled: { + type: Boolean, + default: () => false + }, + hideOnSinglePage: Boolean, + isBeforePageChange: Boolean, + layout: String, + mode: String, + nextText: String, + pageCount: Number, + pageSize: { + type: Number, + default: () => 10 + }, + pageSizes: { + type: Array, + default: () => [10, 20, 30, 40, 50, 100] + }, + pagerCount: { + type: Number, + validator: (value) => (value | 0) === value && value > 2 && value < 22 && value % 2 === 1, + default: () => 7 + }, + popperAppendToBody: { + type: Boolean, + default: () => true + }, + showTotalLoading: { + type: Boolean, + default: () => false + }, + customTotal: { + type: [Boolean, String], + default: () => false + }, + popperClass: String, + prevText: String, + total: Number, + size: { + type: String, + default: '' + } + }, + setup(props, context) { + return $setup({ props, context, template }) + } +}) diff --git a/packages/vue/src/pager/src/mobile-first.vue b/packages/vue/src/pager/src/mobile-first.vue new file mode 100644 index 000000000..8249fc957 --- /dev/null +++ b/packages/vue/src/pager/src/mobile-first.vue @@ -0,0 +1,692 @@ + diff --git a/packages/vue/src/pager/src/pc.vue b/packages/vue/src/pager/src/pc.vue new file mode 100644 index 000000000..f96802de8 --- /dev/null +++ b/packages/vue/src/pager/src/pc.vue @@ -0,0 +1,662 @@ + + diff --git a/packages/vue/src/panel/src/pc.vue b/packages/vue/src/panel/src/pc.vue index f33e49328..b0dcf6ef5 100644 --- a/packages/vue/src/panel/src/pc.vue +++ b/packages/vue/src/panel/src/pc.vue @@ -39,7 +39,7 @@ - diff --git a/packages/vue/src/picker/index.ts b/packages/vue/src/picker/index.ts index 4a02a1537..b9e6dbac3 100644 --- a/packages/vue/src/picker/index.ts +++ b/packages/vue/src/picker/index.ts @@ -9,7 +9,7 @@ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS. * */ -import Picker from './src/index.vue' +import Picker from './src/pc.vue' import '@opentiny/vue-theme/picker/index.less' import '@opentiny/vue-theme/input/index.less' import { version } from './package.json' diff --git a/packages/vue/src/picker/src/pc.vue b/packages/vue/src/picker/src/pc.vue new file mode 100644 index 000000000..415875148 --- /dev/null +++ b/packages/vue/src/picker/src/pc.vue @@ -0,0 +1,257 @@ + + + + diff --git a/packages/vue/src/pop-upload/src/pc.vue b/packages/vue/src/pop-upload/src/pc.vue index 335788b78..4f8eeda23 100644 --- a/packages/vue/src/pop-upload/src/pc.vue +++ b/packages/vue/src/pop-upload/src/pc.vue @@ -99,7 +99,7 @@ - diff --git a/packages/vue/src/popeditor/src/pc.vue b/packages/vue/src/popeditor/src/pc.vue index 08db4cf70..51f6cf17b 100644 --- a/packages/vue/src/popeditor/src/pc.vue +++ b/packages/vue/src/popeditor/src/pc.vue @@ -241,7 +241,7 @@ - diff --git a/packages/vue/src/popover/src/mobile.vue b/packages/vue/src/popover/src/mobile.vue index d2bfcc1b4..e5bb26ec1 100644 --- a/packages/vue/src/popover/src/mobile.vue +++ b/packages/vue/src/popover/src/mobile.vue @@ -39,7 +39,7 @@ - diff --git a/packages/vue/src/progress/src/index.ts b/packages/vue/src/progress/src/index.ts index 82f22c0a3..0b79e66f1 100644 --- a/packages/vue/src/progress/src/index.ts +++ b/packages/vue/src/progress/src/index.ts @@ -10,7 +10,7 @@ * */ import { $props, $prefix, $setup, defineComponent } from '@opentiny/vue-common' -import template from 'virtual-template?pc|mobile' +import template from 'virtual-template?pc|mobile|mobile-first' const $constants = { PROGRESS_TYPE: { @@ -18,6 +18,16 @@ const $constants = { CIRCLE: 'circle', DASHBOARD: 'dashboard' }, + PROGRESS_SIZE: { + SMALL: 'small', + MEDIUM: 'medium', + LARGE: 'large' + }, + PROGRESS_SIZE_WIDTH: { + SMALL: 48, + MEDIUM: 96, + LARGE: 160 + }, PROGRESS_STATUS: { SUCCESS: 'success', EXCEPTION: 'exception', @@ -34,7 +44,16 @@ const $constants = { ICON_CIRCLE_EXCEPTION: 'icon-error', ICON_SUCCESS: 'icon-yes', ICON_EXCEPTION: 'icon-close', - ICON_WARNING: 'icon-warning' + ICON_WARNING: 'icon-warning', + TEXT_XS: 12, + TEXT_SM: 14, + WIDTH_RATE_TWO: 2, + WIDTH_RATE_THREE: 3, + WIDTH_RATE_SIX: 6, + DEFAULT_STROKE_WIDTH: 6, + REL_STROKE_WIDTH: 4, + DEFAULT_WIDTH: 126, + STROKE_WIDTH_RATE: 0.4 } export default defineComponent({ diff --git a/packages/vue/src/progress/src/mobile-first.vue b/packages/vue/src/progress/src/mobile-first.vue new file mode 100644 index 000000000..aefe303df --- /dev/null +++ b/packages/vue/src/progress/src/mobile-first.vue @@ -0,0 +1,153 @@ + + + diff --git a/packages/vue/src/progress/src/mobile.vue b/packages/vue/src/progress/src/mobile.vue index be2229cbb..b04919014 100644 --- a/packages/vue/src/progress/src/mobile.vue +++ b/packages/vue/src/progress/src/mobile.vue @@ -62,7 +62,7 @@ - diff --git a/packages/vue/src/radio-button/src/index.ts b/packages/vue/src/radio-button/src/index.ts index 4737dff39..65949a4b2 100644 --- a/packages/vue/src/radio-button/src/index.ts +++ b/packages/vue/src/radio-button/src/index.ts @@ -10,7 +10,7 @@ * */ import { $props, $prefix, $setup, defineComponent } from '@opentiny/vue-common' -import template from 'virtual-template?pc' +import template from 'virtual-template?pc|mobile-first' const $constants = { RADIO_GROUP: 'RadioGroup' @@ -31,7 +31,8 @@ export default defineComponent({ default: () => ({}) }, label: {}, - disabled: Boolean + disabled: Boolean, + tipContent: String }, setup(props, context) { return $setup({ props, context, template }) diff --git a/packages/vue/src/radio-button/src/mobile-first.vue b/packages/vue/src/radio-button/src/mobile-first.vue new file mode 100644 index 000000000..45a9dc7dd --- /dev/null +++ b/packages/vue/src/radio-button/src/mobile-first.vue @@ -0,0 +1,95 @@ + + + diff --git a/packages/vue/src/radio-button/src/pc.vue b/packages/vue/src/radio-button/src/pc.vue index 9dd11ff3e..835aedea9 100644 --- a/packages/vue/src/radio-button/src/pc.vue +++ b/packages/vue/src/radio-button/src/pc.vue @@ -24,7 +24,7 @@ - diff --git a/packages/vue/src/radio-group/src/pc.vue b/packages/vue/src/radio-group/src/pc.vue index 0dc43b313..43b9c02c6 100644 --- a/packages/vue/src/radio-group/src/pc.vue +++ b/packages/vue/src/radio-group/src/pc.vue @@ -22,7 +22,7 @@ - diff --git a/packages/vue/src/radio/src/mobile.vue b/packages/vue/src/radio/src/mobile.vue index 9df9c5cb6..a14592e25 100644 --- a/packages/vue/src/radio/src/mobile.vue +++ b/packages/vue/src/radio/src/mobile.vue @@ -42,7 +42,7 @@ - diff --git a/packages/vue/src/rate/src/pc.vue b/packages/vue/src/rate/src/pc.vue index e4fe4cc49..7394c712b 100644 --- a/packages/vue/src/rate/src/pc.vue +++ b/packages/vue/src/rate/src/pc.vue @@ -38,7 +38,7 @@ - diff --git a/packages/vue/src/recycle-scroller/index.ts b/packages/vue/src/recycle-scroller/index.ts new file mode 100644 index 000000000..7cc20b8cb --- /dev/null +++ b/packages/vue/src/recycle-scroller/index.ts @@ -0,0 +1,21 @@ +import RecycleScroller from './src/index' +import IdState from './src/idState' +import { version } from './package.json' + +RecycleScroller.IdState = IdState + +/* istanbul ignore next */ +RecycleScroller.install = function (Vue) { + Vue.component(RecycleScroller.name, RecycleScroller) +} + +RecycleScroller.version = version + +/* istanbul ignore next */ +if (process.env.BUILD_TARGET === 'runtime') { + if (typeof window !== 'undefined' && window.Vue) { + RecycleScroller.install(window.Vue) + } +} + +export default RecycleScroller diff --git a/packages/vue/src/recycle-scroller/package.json b/packages/vue/src/recycle-scroller/package.json new file mode 100644 index 000000000..a39d731c3 --- /dev/null +++ b/packages/vue/src/recycle-scroller/package.json @@ -0,0 +1,12 @@ +{ + "name": "@opentiny/vue-recycle-scroller", + "version": "5.0.0-mf.0", + "description": "", + "main": "lib/index.js", + "module": "index.ts", + "dependencies": { + "@opentiny/vue-common": "workspace:~", + "@opentiny/vue-renderless": "workspace:~" + }, + "license": "MIT" +} diff --git a/packages/vue/src/recycle-scroller/src/idState.ts b/packages/vue/src/recycle-scroller/src/idState.ts new file mode 100644 index 000000000..b7bf9840c --- /dev/null +++ b/packages/vue/src/recycle-scroller/src/idState.ts @@ -0,0 +1,79 @@ +import { hooks } from '@opentiny/vue-common' +import { isNull } from '@opentiny/vue-renderless/common/type' + +const { reactive } = hooks + +const buildInstanceTemporary = (store) => { + const temporary = {} + + temporary.stateId = null + temporary.getId = null + temporary.updateIdState = (vm) => { + const id = temporary.getId() + + if (isNull(id)) { + console.warn('[TINY Error][Mixin IdState] No id found for IdState with idProp') + } + + if (id !== temporary.stateId) { + if (!store[id]) { + temporary.idStateInit(id, vm) + } + + vm.idState = store[id] + } + } + temporary.idStateInit = (id, vm) => { + const factory = vm.$options.idState + + if (typeof factory === 'function') { + const data = factory.call(vm, vm) + + store[id] = data + temporary.stateId = id + + return data + } else { + throw new Error('[TINY Error][Mixin IdState] Missing `idState` function on component definition') + } + } + + return temporary +} + +export default function ({ idProp, stateGetterName }) { + idProp = idProp || ((vm) => vm.item.id) + stateGetterName = stateGetterName || 'getIdState' + + const store = reactive({}) + + return { + data() { + return { idState: null } + }, + created() { + this.temporary = buildInstanceTemporary(store) + + if (typeof idProp === 'function') { + this.temporary.getId = () => idProp.call(this, this) + } else { + this.temporary.getId = () => this[idProp] + } + + this.$watch(this.temporary.getId, { + handler(value) { + this.$nextTick(() => (this.temporary.stateId = value)) + }, + immediate: true + }) + + this.temporary.updateIdState(this) + }, + beforeUpdate() { + this.temporary.updateIdState(this) + }, + [stateGetterName](id) { + return isNull(id) ? store : store[id] ? store[id] : null + } + } +} diff --git a/packages/vue/src/recycle-scroller/src/index.ts b/packages/vue/src/recycle-scroller/src/index.ts new file mode 100644 index 000000000..8281b0392 --- /dev/null +++ b/packages/vue/src/recycle-scroller/src/index.ts @@ -0,0 +1,36 @@ +import { $props, $setup, $prefix } from '@opentiny/vue-common' +import template from 'virtual-template?pc' + +export default { + name: $prefix + 'RecycleScroller', + props: { + ...$props, + items: { type: Array, required: true }, + keyField: { type: String, default: 'id' }, + direction: { + type: String, + default: 'vertical', + validator: (value) => ['vertical', 'horizontal'].includes(value) + }, + listTag: { type: String, default: 'div' }, + itemTag: { type: String, default: 'div' }, + itemSize: { type: Number, default: null }, + gridItems: { type: Number, default: undefined }, + itemSecondarySize: { type: Number, default: undefined }, + minItemSize: { type: [Number, String], default: null }, + sizeField: { type: String, default: 'size' }, + typeField: { type: String, default: 'type' }, + buffer: { type: Number, default: 200 }, + pageMode: { type: Boolean, default: false }, + prerender: { type: Number, default: 0 }, + emitUpdate: { type: Boolean, default: false }, + updateInterval: { type: Number, default: 0 }, + skipHover: { type: Boolean, default: false }, + listClass: { type: [String, Object, Array], default: '' }, + itemClass: { type: [String, Object, Array], default: '' }, + itemsLimit: { type: Number, default: 1000 } + }, + setup(props, context) { + return $setup({ props, context, template }) + } +} diff --git a/packages/vue/src/recycle-scroller/src/pc.vue b/packages/vue/src/recycle-scroller/src/pc.vue new file mode 100644 index 000000000..eb3be2330 --- /dev/null +++ b/packages/vue/src/recycle-scroller/src/pc.vue @@ -0,0 +1,68 @@ + + + diff --git a/packages/vue/src/river/index.ts b/packages/vue/src/river/index.ts new file mode 100644 index 000000000..de01b2ca2 --- /dev/null +++ b/packages/vue/src/river/index.ts @@ -0,0 +1,18 @@ +import River from './src/index' +import { version } from './package.json' + +/* istanbul ignore next */ +River.install = function (Vue) { + Vue.component(River.name, River) +} + +River.version = version + +/* istanbul ignore next */ +if (process.env.BUILD_TARGET === 'runtime') { + if (typeof window !== 'undefined' && window.Vue) { + River.install(window.Vue) + } +} + +export default River diff --git a/packages/vue/src/river/package.json b/packages/vue/src/river/package.json new file mode 100644 index 000000000..fe72222b7 --- /dev/null +++ b/packages/vue/src/river/package.json @@ -0,0 +1,24 @@ +{ + "name": "@opentiny/vue-river", + "version": "3.7.0", + "description": "", + "main": "lib/index.js", + "module": "index.ts", + "sideEffects": false, + "dependencies": { + "@opentiny/vue-common": "workspace:~", + "@opentiny/vue-renderless": "workspace:~", + "@opentiny/vue-theme": "workspace:~", + "@opentiny/vue-theme-mobile": "workspace:~", + "echarts": "5.2.1" + }, + "license": "MIT", + "devDependencies": { + "@opentiny-internal/vue-test-utils": "workspace:*", + "vitest": "^0.25.7" + }, + "scripts": { + "build": "pnpm -w build:ui $npm_package_name", + "//postversion": "pnpm build" + } +} diff --git a/packages/vue/src/river/src/index.ts b/packages/vue/src/river/src/index.ts new file mode 100644 index 000000000..6bd682ea0 --- /dev/null +++ b/packages/vue/src/river/src/index.ts @@ -0,0 +1,24 @@ +import { $props, $setup, $prefix, defineComponent } from '@opentiny/vue-common' +import template from 'virtual-template?pc' + +const $constants = {} + +export default defineComponent({ + name: $prefix + 'River', + props: { + ...$props, + _constants: { + type: Object, + default: () => $constants + }, + data: { + type: Object + }, + config: { + type: Object + } + }, + setup(props, context) { + return $setup({ props, context, template }) + } +}) diff --git a/packages/vue/src/river/src/pc.vue b/packages/vue/src/river/src/pc.vue new file mode 100644 index 000000000..9b5e04136 --- /dev/null +++ b/packages/vue/src/river/src/pc.vue @@ -0,0 +1,19 @@ + + + diff --git a/packages/vue/src/roles/src/pc.vue b/packages/vue/src/roles/src/pc.vue index 83fbbafa0..1525f8cfc 100644 --- a/packages/vue/src/roles/src/pc.vue +++ b/packages/vue/src/roles/src/pc.vue @@ -31,7 +31,7 @@ - diff --git a/packages/vue/src/search/src/index.ts b/packages/vue/src/search/src/index.ts index 6ea08cd0d..9655478c6 100644 --- a/packages/vue/src/search/src/index.ts +++ b/packages/vue/src/search/src/index.ts @@ -11,7 +11,7 @@ */ import { $prefix, $props, $setup, defineComponent } from '@opentiny/vue-common' import { t } from '@opentiny/vue-locale' -import template from 'virtual-template?pc|mobile' +import template from 'virtual-template?pc|mobile|mobile-first' export default defineComponent({ name: $prefix + 'Search', @@ -73,6 +73,14 @@ export default defineComponent({ type: String, default: 'primary', validator: (value: string) => ['primary', 'gray'].includes(value) + }, + showButton: { + type: Boolean, + default: false + }, + changeBgColor: { + type: Boolean, + default: false } }, setup(props, context) { diff --git a/packages/vue/src/search/src/mobile-first.vue b/packages/vue/src/search/src/mobile-first.vue new file mode 100644 index 000000000..c1353d083 --- /dev/null +++ b/packages/vue/src/search/src/mobile-first.vue @@ -0,0 +1,230 @@ + + + diff --git a/packages/vue/src/search/src/pc.vue b/packages/vue/src/search/src/pc.vue index bdfe38f08..e4e16ae34 100644 --- a/packages/vue/src/search/src/pc.vue +++ b/packages/vue/src/search/src/pc.vue @@ -12,7 +12,9 @@ - diff --git a/packages/vue/src/select-mobile/src/mobile-first.vue b/packages/vue/src/select-mobile/src/mobile-first.vue new file mode 100644 index 000000000..44022e076 --- /dev/null +++ b/packages/vue/src/select-mobile/src/mobile-first.vue @@ -0,0 +1,128 @@ + + + diff --git a/packages/vue/src/select-mobile/src/option.vue b/packages/vue/src/select-mobile/src/option.vue new file mode 100644 index 000000000..6f4920347 --- /dev/null +++ b/packages/vue/src/select-mobile/src/option.vue @@ -0,0 +1,23 @@ + + + diff --git a/packages/vue/src/select-view/index.ts b/packages/vue/src/select-view/index.ts new file mode 100644 index 000000000..15d1e8a4e --- /dev/null +++ b/packages/vue/src/select-view/index.ts @@ -0,0 +1,23 @@ +import SelectView from './src/mobile-first.vue' +import { version } from './package.json' + +SelectView.model = { + prop: 'modelValue', + event: 'update:modelValue' +} + +/* istanbul ignore next */ +SelectView.install = function (Vue) { + Vue.component(SelectView.name, SelectView) +} + +SelectView.version = version + +/* istanbul ignore next */ +if (process.env.BUILD_TARGET === 'runtime') { + if (typeof window !== 'undefined' && window.Vue) { + SelectView.install(window.Vue) + } +} + +export default SelectView diff --git a/packages/vue/src/select-view/package.json b/packages/vue/src/select-view/package.json new file mode 100644 index 000000000..386b811e8 --- /dev/null +++ b/packages/vue/src/select-view/package.json @@ -0,0 +1,22 @@ +{ + "name": "@opentiny/vue-select-view", + "version": "3.7.0", + "description": "", + "main": "lib/index.js", + "module": "index.ts", + "sideEffects": false, + "dependencies": { + "@opentiny/vue-button": "workspace:~", + "@opentiny/vue-common": "workspace:~", + "@opentiny/vue-renderless": "workspace:~" + }, + "license": "MIT", + "devDependencies": { + "@opentiny-internal/vue-test-utils": "workspace:*", + "vitest": "^0.25.7" + }, + "scripts": { + "build": "pnpm -w build:ui $npm_package_name", + "//postversion": "pnpm build" + } +} diff --git a/packages/vue/src/select-view/src/mobile-first.vue b/packages/vue/src/select-view/src/mobile-first.vue new file mode 100644 index 000000000..614f0268c --- /dev/null +++ b/packages/vue/src/select-view/src/mobile-first.vue @@ -0,0 +1,204 @@ + + + diff --git a/packages/vue/src/select-view/src/option.vue b/packages/vue/src/select-view/src/option.vue new file mode 100644 index 000000000..6ac6951df --- /dev/null +++ b/packages/vue/src/select-view/src/option.vue @@ -0,0 +1,31 @@ + + + diff --git a/packages/vue/src/select/src/index.ts b/packages/vue/src/select/src/index.ts index dc871d6eb..ff601ab03 100644 --- a/packages/vue/src/select/src/index.ts +++ b/packages/vue/src/select/src/index.ts @@ -46,6 +46,10 @@ const $constants = { TYPE: { Grid: 'grid', Tree: 'tree' + }, + InputBoxType: { + Input: 'input', + Underline: 'underline' } } @@ -218,10 +222,17 @@ export default defineComponent({ searchable: { type: Boolean, default: false + }, + showEmptyImage: { + type: Boolean, + default: false + }, + InputBoxType: { + type: String, + default: 'input' } }, setup(props, context) { return $setup({ props, context, template }) } -} -) +}) diff --git a/packages/vue/src/select/src/pc.vue b/packages/vue/src/select/src/pc.vue index ce6abb5ba..3b294f428 100644 --- a/packages/vue/src/select/src/pc.vue +++ b/packages/vue/src/select/src/pc.vue @@ -19,6 +19,7 @@ state.collapseTags ? 'tiny-select__collapse-tags' : '', filterable ? 'tiny-select__filterable' : '', multiple ? 'tiny-select__multiple' : '', + inputBoxType === 'underline' ? 'tiny-select__underline' : '', $parent.$attrs.class ]" @mouseleave.self=" @@ -39,7 +40,12 @@ >
-
+
- {{ state.selected[0].state ? state.selected[0].state.currentLabel : state.selected[0].currentLabel }} + + {{ state.selected[0].state ? state.selected[0].state.currentLabel : state.selected[0].currentLabel }} + - + + {{ state.selected.length - 1 }} @@ -62,14 +76,15 @@ :closable="!state.selectDisabled && !item.disabled" :size="state.collapseTagSize" :hit="item.state ? item.state.hitState : item.hitState" - type="info" @close="deleteTag($event, item)" disable-transitions > - {{ - item.state ? item.state.currentLabel + '... ' : item.currentLabel + '... ' - }} - {{ item.state ? item.state.currentLabel : item.currentLabel }} + + {{ item.state ? item.state.currentLabel + '... ' : item.currentLabel + '... ' }} + + + {{ item.state ? item.state.currentLabel : item.currentLabel }} + @@ -205,14 +220,22 @@ @update:modelValue="handleQueryChange(state.query)" @keydown.enter.prevent="handleQueryChange(state.query)" > + - - + + +
  • - - {{ t('ui.base.all') }} + + {{ t('ui.base.all') }} +
  • @@ -272,7 +307,7 @@
    - diff --git a/packages/vue/src/selected-box/src/pc.vue b/packages/vue/src/selected-box/src/pc.vue new file mode 100644 index 000000000..dedd110fe --- /dev/null +++ b/packages/vue/src/selected-box/src/pc.vue @@ -0,0 +1,65 @@ + + + diff --git a/packages/vue/src/slide-bar/src/pc.vue b/packages/vue/src/slide-bar/src/pc.vue index 8f813fb28..ce9e149a5 100644 --- a/packages/vue/src/slide-bar/src/pc.vue +++ b/packages/vue/src/slide-bar/src/pc.vue @@ -46,7 +46,7 @@
    - diff --git a/packages/vue/src/slider/src/mobile.vue b/packages/vue/src/slider/src/mobile.vue index 67e788292..3178cd07a 100644 --- a/packages/vue/src/slider/src/mobile.vue +++ b/packages/vue/src/slider/src/mobile.vue @@ -52,7 +52,7 @@
    - diff --git a/packages/vue/src/steps/src/index.ts b/packages/vue/src/steps/src/index.ts index f77f9ef3d..095c2dd61 100644 --- a/packages/vue/src/steps/src/index.ts +++ b/packages/vue/src/steps/src/index.ts @@ -10,7 +10,7 @@ * */ import { $props, $prefix, $setup, defineComponent } from '@opentiny/vue-common' -import template from 'virtual-template?pc' +import template from 'virtual-template?pc|mobile-first' export default defineComponent({ name: $prefix + 'Steps', diff --git a/packages/vue/src/steps/src/mobile-first.vue b/packages/vue/src/steps/src/mobile-first.vue new file mode 100644 index 000000000..49b79db37 --- /dev/null +++ b/packages/vue/src/steps/src/mobile-first.vue @@ -0,0 +1,53 @@ + diff --git a/packages/vue/src/steps/src/mobile-first/mobile-first-advanced.vue b/packages/vue/src/steps/src/mobile-first/mobile-first-advanced.vue new file mode 100644 index 000000000..1377e8f08 --- /dev/null +++ b/packages/vue/src/steps/src/mobile-first/mobile-first-advanced.vue @@ -0,0 +1,137 @@ + + + diff --git a/packages/vue/src/steps/src/mobile-first/mobile-first-normal.vue b/packages/vue/src/steps/src/mobile-first/mobile-first-normal.vue new file mode 100644 index 000000000..87c695c42 --- /dev/null +++ b/packages/vue/src/steps/src/mobile-first/mobile-first-normal.vue @@ -0,0 +1,254 @@ + + + diff --git a/packages/vue/src/steps/src/mobile-first/slide-bar.vue b/packages/vue/src/steps/src/mobile-first/slide-bar.vue new file mode 100644 index 000000000..53472c21d --- /dev/null +++ b/packages/vue/src/steps/src/mobile-first/slide-bar.vue @@ -0,0 +1,93 @@ + + + diff --git a/packages/vue/src/steps/src/pc.vue b/packages/vue/src/steps/src/pc.vue index f10da9333..a6d14057f 100644 --- a/packages/vue/src/steps/src/pc.vue +++ b/packages/vue/src/steps/src/pc.vue @@ -39,7 +39,7 @@ - diff --git a/packages/vue/src/switch/src/index.ts b/packages/vue/src/switch/src/index.ts index cd962c19f..6f165472f 100644 --- a/packages/vue/src/switch/src/index.ts +++ b/packages/vue/src/switch/src/index.ts @@ -10,7 +10,7 @@ * */ import { $props, $prefix, $setup, defineComponent } from '@opentiny/vue-common' -import template from 'virtual-template?pc|mobile' +import template from 'virtual-template?pc|mobile|mobile-first' const $constants = { PC_PREFIXCLS: 'tiny-switch', @@ -60,7 +60,11 @@ export default defineComponent({ type: [String, Number, Boolean], default: true }, - beforeChange: Function + beforeChange: Function, + displayOnly: { + type: Boolean, + default: false + } }, setup(props, context) { return $setup({ props, context, template }) diff --git a/packages/vue/src/switch/src/mobile-first.vue b/packages/vue/src/switch/src/mobile-first.vue new file mode 100644 index 000000000..4575bb984 --- /dev/null +++ b/packages/vue/src/switch/src/mobile-first.vue @@ -0,0 +1,146 @@ + + + diff --git a/packages/vue/src/switch/src/mobile.vue b/packages/vue/src/switch/src/mobile.vue index 9b8ed89a7..efb3a978b 100644 --- a/packages/vue/src/switch/src/mobile.vue +++ b/packages/vue/src/switch/src/mobile.vue @@ -13,7 +13,7 @@ - diff --git a/packages/vue/src/tab-item/src/pc.vue b/packages/vue/src/tab-item/src/pc.vue new file mode 100644 index 000000000..3d02e08cc --- /dev/null +++ b/packages/vue/src/tab-item/src/pc.vue @@ -0,0 +1,45 @@ + + + + diff --git a/packages/vue/src/tabbar-item/index.ts b/packages/vue/src/tabbar-item/index.ts index 8ce529c0f..22b5e1a04 100644 --- a/packages/vue/src/tabbar-item/index.ts +++ b/packages/vue/src/tabbar-item/index.ts @@ -9,7 +9,7 @@ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS. * */ -import TabbarItem from './src/index.vue' +import TabbarItem from './src/mobile.vue' import '@opentiny/vue-theme-mobile/tabbar-item/index.less' import { version } from './package.json' diff --git a/packages/vue/src/tabbar-item/src/mobile.vue b/packages/vue/src/tabbar-item/src/mobile.vue index 5317d1e6f..19437f180 100644 --- a/packages/vue/src/tabbar-item/src/mobile.vue +++ b/packages/vue/src/tabbar-item/src/mobile.vue @@ -25,12 +25,24 @@ - diff --git a/packages/vue/src/table/src/mobile.vue b/packages/vue/src/table/src/mobile.vue index a4ee64d05..b1ee6a4e8 100644 --- a/packages/vue/src/table/src/mobile.vue +++ b/packages/vue/src/table/src/mobile.vue @@ -63,7 +63,7 @@ - diff --git a/packages/vue/src/tabs/src/mobile-first/tab-bar.vue b/packages/vue/src/tabs/src/mobile-first/tab-bar.vue new file mode 100644 index 000000000..47a232e33 --- /dev/null +++ b/packages/vue/src/tabs/src/mobile-first/tab-bar.vue @@ -0,0 +1,104 @@ + diff --git a/packages/vue/src/tabs/src/mobile-first/tab-nav-item.vue b/packages/vue/src/tabs/src/mobile-first/tab-nav-item.vue new file mode 100644 index 000000000..e1f080420 --- /dev/null +++ b/packages/vue/src/tabs/src/mobile-first/tab-nav-item.vue @@ -0,0 +1,73 @@ + diff --git a/packages/vue/src/tabs/src/mobile-first/tab-nav.vue b/packages/vue/src/tabs/src/mobile-first/tab-nav.vue new file mode 100644 index 000000000..14fd9233b --- /dev/null +++ b/packages/vue/src/tabs/src/mobile-first/tab-nav.vue @@ -0,0 +1,40 @@ + diff --git a/packages/vue/src/tabs/src/mobile-first/tab-panel.vue b/packages/vue/src/tabs/src/mobile-first/tab-panel.vue new file mode 100644 index 000000000..52ff5ec31 --- /dev/null +++ b/packages/vue/src/tabs/src/mobile-first/tab-panel.vue @@ -0,0 +1,23 @@ + diff --git a/packages/vue/src/tabs/src/mobile-first/type.ts b/packages/vue/src/tabs/src/mobile-first/type.ts new file mode 100644 index 000000000..0dd06e654 --- /dev/null +++ b/packages/vue/src/tabs/src/mobile-first/type.ts @@ -0,0 +1,23 @@ +export interface NavItem { + visible?: boolean + title?: string + name: string + selected?: boolean + slotSetting?: Function + slotTitle?: Function +} + +export interface TabNavItemState { + withClose: boolean + tabSize: string +} + +export interface TabNavItemInstance { + name: string + title: string + selected: boolean + navItem: NavItem + handleNavItemClose: Function + handleNavItemClick: Function + state: TabNavItemState +} diff --git a/packages/vue/src/tabs/src/pc.vue b/packages/vue/src/tabs/src/pc.vue index 9c9e1b54a..843d94c10 100644 --- a/packages/vue/src/tabs/src/pc.vue +++ b/packages/vue/src/tabs/src/pc.vue @@ -17,7 +17,7 @@ import { iconPlus } from '@opentiny/vue-icon' import '@opentiny/vue-theme/tabs/index.less' export default defineComponent({ - emits: ['add', 'click', 'close', 'edit', 'update:modelValue'], + emits: ['add', 'click', 'close', 'edit', 'update:modelValue', 'tab-drag-start', 'tab-drag-over', 'tab-drag-end'], props: [ ...props, 'tabStyle', @@ -40,6 +40,11 @@ export default defineComponent({ TabNav, IconPlus: iconPlus() }, + provide() { + return { + moreIcon: this.$slots.moreIcon + } + }, setup(props, context) { return setup({ props, context, renderless, api }) }, @@ -130,9 +135,9 @@ export default defineComponent({ 'tiny-tabs--card': tabStyle === 'card', [`tiny-tabs--${position}`]: true, 'tiny-tabs--border-card': tabStyle === 'border-card', + 'tiny-tabs--button-card': tabStyle === 'button-card', 'tiny-tabs--small': size === 'small' - }} - > + }}> {position !== 'bottom' ? [header, panels] : [panels, header]} ) diff --git a/packages/vue/src/tabs/src/tab-nav/pc.vue b/packages/vue/src/tabs/src/tab-nav/pc.vue index 849ae783c..4fae5c8bc 100644 --- a/packages/vue/src/tabs/src/tab-nav/pc.vue +++ b/packages/vue/src/tabs/src/tab-nav/pc.vue @@ -13,7 +13,9 @@ import { $prefix, setup, h } from '@opentiny/vue-common' import { t } from '@opentiny/vue-locale' import { renderless, api } from '@opentiny/vue-renderless/tab-nav/vue' -import Popover from '@opentiny/vue-popover' +import Dropdown from '@opentiny/vue-dropdown' +import DropdownMenu from '@opentiny/vue-dropdown-menu' +import DropdownItem from '@opentiny/vue-dropdown-item' import Tooltip from '@opentiny/vue-tooltip' import { iconChevronLeft, iconChevronRight, iconClose } from '@opentiny/vue-icon' @@ -38,8 +40,14 @@ const getOrderedPanes = (state, panes) => { } tabVnodes.forEach(({ type, componentOptions, props, children }) => { - if (type && (type.toString() === 'Symbol(Fragment)' || type.toString() === 'Symbol()')) { - Array.isArray(children) && children.forEach(({ type, componentOptions, props }) => handler({ type, componentOptions, props })) + if ( + type && + (type.toString() === 'Symbol(Fragment)' || // vue@3.3之前的开发模式 + type.toString() === 'Symbol(v-fgt)' || // vue@3.3.1 的变更 + type.toString() === 'Symbol()') // 构建后 + ) { + Array.isArray(children) && + children.forEach(({ type, componentOptions, props }) => handler({ type, componentOptions, props })) } else { handler({ type, componentOptions, props }) } @@ -64,7 +72,9 @@ const getOrderedPanes = (state, panes) => { export default { name: $prefix + 'TabNav', components: { - Popover, + Dropdown, + DropdownMenu, + DropdownItem, Tooltip, IconChevronLeft: iconChevronLeft(), IconChevronRight: iconChevronRight(), @@ -100,36 +110,51 @@ export default { }, tooltipConfig: [String, Object] }, + inject: ['moreIcon'], setup(props, context) { return setup({ props, context, renderless, api, mono: true }) }, render() { - const { state, tabStyle, editable, stretch, showPanesCount, onTabClick, onTabRemove, scrollNext, scrollPrev, changeTab, tooltipConfig } = this - let { panes, setFocus, removeFocus, showMoreTabs, popperClass, popperAppendToBody } = this + const { + state, + tabStyle, + editable, + stretch, + showPanesCount, + onTabClick, + onTabRemove, + scrollNext, + scrollPrev, + changeTab, + tooltipConfig + } = this + let { panes, setFocus, removeFocus, showMoreTabs, popperClass, popperAppendToBody, moreIcon } = this const spans = [ , - !showMoreTabs - ? ( + !showMoreTabs ? ( - ) - : null + ) : null ] const scrollBtn = state.scrollable ? spans : null let moreTabs = null if (showMoreTabs && state.scrollable) { - const reference = () => {t('ui.tabs.moreItem')} + const reference = () => + moreIcon ? ( + {moreIcon() || t('ui.tabs.moreItem')} + ) : ( + {t('ui.tabs.moreItem')} + ) - const defaultSlot = () => ( - - ) + : null + + const dropdownSlot = () => + h(DropdownMenu, { + attrs: { + popperClass: 'tiny-tabs-dropdown tiny-tabs__more-dropdown' + (popperClass ? ' ' + popperClass : ''), + placement: 'bottom-start' + }, + scopedSlots: { default: menuSlot } + }) moreTabs = ( -
    +
    {' '} - {h(Popover, { + {h(Dropdown, { attrs: { - popperClass: 'tiny-tabs__more-popover' + (popperClass ? ' ' + popperClass : ''), - appendToBody: popperAppendToBody, - placement: 'bottom-start', - trigger: 'hover', - width: 200, - offset: -70, - visibleArrow: true + trigger: 'hover' }, - scopedSlots: { reference, default: defaultSlot } + scopedSlots: { default: reference, dropdown: dropdownSlot } })}{' '}
    ) @@ -184,8 +209,7 @@ export default { pane.state.index = `${index}` - const btnClose = withClose - ? ( + const btnClose = withClose ? ( { @@ -193,24 +217,24 @@ export default { }} /> - ) - : null + ) : null const tipComp = () => tooltipConfig === 'title' ? h('span', { class: 'tiny-tabs__item__title', attrs: { title: pane.title } }, [pane.title]) : h( - Tooltip, - { - class: 'tiny-tabs__item__title', - props: { - content: pane.title, - ...tooltipConfig - } - }, - [h('span', {}, [pane.title])] - ) - const toolTipComp = () => (tooltipConfig ? tipComp() : h('span', { class: 'tiny-tabs__item__title' }, [pane.title])) + Tooltip, + { + class: 'tiny-tabs__item__title', + props: { + content: pane.title, + ...tooltipConfig + } + }, + [h('span', {}, [pane.title])] + ) + const toolTipComp = () => + tooltipConfig ? tipComp() : h('span', { class: 'tiny-tabs__item__title' }, [pane.title]) const tabLabelContent = () => (pane.$slots.title ? pane.$slots.title() : toolTipComp()) const tabindex = pane.state.active ? 0 : -1 @@ -257,11 +281,18 @@ export default { ) }) + // 根据生成的子元素宽度动态设置tabslist盒子的padding-right + const paddingRight = this.$refs.more ? `${this.$refs.more.offsetWidth}px` : '46px' + return (
    + style={showMoreTabs ? { paddingRight } : {}} + class={[ + 'tiny-tabs__nav-wrap', + state.scrollable ? 'is-scrollable' : '', + showMoreTabs ? 'is-show-more' : '', + `is-${state.rootTabs.position}` + ]}> {[scrollBtn, moreTabs]}
    + on-keydown={changeTab}> {tabs}
    diff --git a/packages/vue/src/tag-group/index.ts b/packages/vue/src/tag-group/index.ts new file mode 100644 index 000000000..8d56eeb9d --- /dev/null +++ b/packages/vue/src/tag-group/index.ts @@ -0,0 +1,18 @@ +import TagGroup from './src/mobile-first.vue' +import { version } from './package.json' + +/* istanbul ignore next */ +TagGroup.install = function (Vue) { + Vue.component(TagGroup.name, TagGroup) +} + +TagGroup.version = version + +/* istanbul ignore next */ +if (process.env.BUILD_TARGET === 'runtime') { + if (typeof window !== 'undefined' && window.Vue) { + TagGroup.install(window.Vue) + } +} + +export default TagGroup diff --git a/packages/vue/src/tag-group/package.json b/packages/vue/src/tag-group/package.json new file mode 100644 index 000000000..cc228517e --- /dev/null +++ b/packages/vue/src/tag-group/package.json @@ -0,0 +1,24 @@ +{ + "name": "@opentiny/vue-tag-group", + "version": "3.7.0", + "description": "", + "main": "lib/index.js", + "module": "index.ts", + "sideEffects": false, + "dependencies": { + "@opentiny/vue-common": "workspace:~", + "@opentiny/vue-icon": "workspace:~", + "@opentiny/vue-popover": "workspace:~", + "@opentiny/vue-tag": "workspace:~", + "@opentiny/vue-renderless": "workspace:~" + }, + "license": "MIT", + "devDependencies": { + "@opentiny-internal/vue-test-utils": "workspace:*", + "vitest": "^0.25.7" + }, + "scripts": { + "build": "pnpm -w build:ui $npm_package_name", + "//postversion": "pnpm build" + } +} diff --git a/packages/vue/src/tag-group/src/mobile-first.vue b/packages/vue/src/tag-group/src/mobile-first.vue new file mode 100644 index 000000000..bcad53d32 --- /dev/null +++ b/packages/vue/src/tag-group/src/mobile-first.vue @@ -0,0 +1,50 @@ + + + diff --git a/packages/vue/src/tag/src/index.ts b/packages/vue/src/tag/src/index.ts index b49cae101..249411fdc 100644 --- a/packages/vue/src/tag/src/index.ts +++ b/packages/vue/src/tag/src/index.ts @@ -10,7 +10,7 @@ * */ import { $props, $prefix, $setup, defineComponent } from '@opentiny/vue-common' -import template from 'virtual-template?pc' +import template from 'virtual-template?pc|mobile-first' export default defineComponent({ name: $prefix + 'Tag', @@ -19,9 +19,17 @@ export default defineComponent({ hit: Boolean, text: String, type: String, + theme: String, size: String, color: String, closable: Boolean, + operable: Boolean, + disabled: Boolean, + selectable: Boolean, + customClass: { + type: String, + default: '' + }, effect: { type: String, default: 'light', diff --git a/packages/vue/src/tag/src/mobile-first.vue b/packages/vue/src/tag/src/mobile-first.vue new file mode 100644 index 000000000..d0aad8ed9 --- /dev/null +++ b/packages/vue/src/tag/src/mobile-first.vue @@ -0,0 +1,66 @@ + diff --git a/packages/vue/src/tag/src/pc.vue b/packages/vue/src/tag/src/pc.vue index e42778104..03adf6d28 100644 --- a/packages/vue/src/tag/src/pc.vue +++ b/packages/vue/src/tag/src/pc.vue @@ -24,9 +24,16 @@ export default defineComponent({ return setup({ props, context, renderless, api, h }) }, render() { - const { type, size, hit, effect, slots, closable, color, handleClose, handleClick } = this + const { type, size, hit, effect, slots, closable, color, handleClose, handleClick, disabled } = this - const classes = ['tiny-tag', type ? `tiny-tag--${type}` : '', size ? `tiny-tag--${size}` : '', effect ? `tiny-tag--${effect}` : '', hit && 'is-hit'] + const classes = [ + 'tiny-tag', + type ? `tiny-tag--${type}` : '', + size ? `tiny-tag--${size}` : '', + effect ? `tiny-tag--${effect}` : '', + hit && 'is-hit', + disabled ? 'is-disabled' : '' + ] const tagElement = ( diff --git a/packages/vue/src/tag/src/token.ts b/packages/vue/src/tag/src/token.ts new file mode 100644 index 000000000..e0570ad1c --- /dev/null +++ b/packages/vue/src/tag/src/token.ts @@ -0,0 +1,67 @@ +// effect: dark / light / plain +// type: success / alerting / warning / error / default / info +export const classes = { + 'dark-success': 'text-white bg-color-success', + 'dark-alerting': 'text-white bg-color-alert', + 'dark-warning': 'text-white bg-color-warning', + 'dark-error': 'text-white bg-color-error', + 'dark-default': 'text-white bg-color-info-primary', + 'dark-info': 'text-white bg-color-text-placeholder', + 'dark-pink': 'text-white bg-color-chart-17', + 'dark-purple': 'text-white bg-color-chart-11', + 'dark-cyan': 'text-white bg-color-chart-5', + + 'light-success': 'text-color-success bg-color-success-subtler', + 'light-alerting': 'text-color-alert bg-color-alert-subtler', + 'light-warning': 'text-color-warning-hover bg-color-warning-subtler', + 'light-error': 'text-color-error bg-color-error-subtler', + 'light-default': 'text-color-info-primary bg-color-info-primary-subtler', + 'light-info': 'text-color-text-primary bg-color-bg-2', + 'light-pink': 'text-color-chart-17 bg-color-chart-17-subtler', + 'light-purple': 'text-color-chart-11 bg-color-chart-11-subtler', + 'light-cyan': 'text-color-chart-5 bg-color-chart-5-subtler', + + 'plain-success': 'text-color-success bg-white', + 'plain-alerting': 'text-color-alert bg-white', + 'plain-warning': 'text-color-warning-hover bg-white', + 'plain-error': 'text-color-error bg-white', + 'plain-default': 'text-color-info-primary bg-white', + 'plain-info': 'text-color-text-primary bg-white', + 'plain-pink': 'text-color-chart-17 bg-white', + 'plain-purple': 'text-color-chart-11 bg-white', + 'plain-cyan': 'text-color-chart-5 bg-white', + + 'success-border': 'border-color-success-subtle', + 'alerting-border': 'border-color-alert-subtle', + 'warning-border': 'border-color-warning-subtle', + 'error-border': 'border-color-error-subtle', + 'default-border': 'border-color-info-primary-subtle', + 'info-border': 'border-color-none', + 'pink-border': 'border-color-chart-17-subtle', + 'purple-border': 'border-color-chart-11-subtle', + 'cyan-border': 'border-color-chart-5-subtle', + + 'fill-dark': 'fill-color-bg-6 hover:fill-white', + + 'fill-light-success': 'fill-color-success-subtle hover:fill-color-success', + 'fill-light-alerting': 'fill-color-alert-subtle hover:fill-color-alert', + 'fill-light-warning': 'fill-color-warning-subtle hover:fill-color-warning', + 'fill-light-error': 'fill-color-error-subtle hover:fill-color-error', + 'fill-light-default': 'fill-color-info-primary-subtle hover:fill-color-info-primary', + 'fill-light-info': 'fill-color-none hover:fill-color-none', + 'fill-light-pink': 'fill-color-chart-17-subtle hover:fill-color-chart-17', + 'fill-light-purple': 'fill-color-chart-11-subtle hover:fill-color-chart-11', + 'fill-light-cyan': 'fill-color-chart-5-subtle hover:fill-color-chart-5', + + 'selectable-unselect': + 'leading-[1.875rem] sm:leading-[1.625rem] text-color-text-primary bg-color-bg-4 cursor-pointer hover:bg-color-bg-3', + 'selectable-selected': + 'leading-[1.875rem] sm:leading-[1.625rem] text-color-brand border-current bg-color-info-secondary-subtle cursor-pointer hover:text-color-brand-hover', + 'tag-disabled': + 'leading-[1.875rem] sm:leading-[1.625rem] text-color-text-disabled bg-color-bg-4 border-transparent cursor-not-allowed hover:text-color-text-disabled hover:bg-color-bg-4', + 'tag-operable': 'leading-[1.625rem] sm:leading-[1.375rem] cursor-pointer', + + 'medium': 'leading-[1.625rem] px-3', + 'small': 'leading-[1.375rem] px-2', + 'mini': 'leading-[1.125rem] px-1' +} diff --git a/packages/vue/src/text-popup/src/pc.vue b/packages/vue/src/text-popup/src/pc.vue index 2d2dc2434..5eb63fba6 100644 --- a/packages/vue/src/text-popup/src/pc.vue +++ b/packages/vue/src/text-popup/src/pc.vue @@ -26,7 +26,7 @@
    - diff --git a/packages/vue/src/time-line/src/pc.vue b/packages/vue/src/time-line/src/pc.vue index 2c8306679..48505223b 100644 --- a/packages/vue/src/time-line/src/pc.vue +++ b/packages/vue/src/time-line/src/pc.vue @@ -10,55 +10,70 @@ * --> diff --git a/packages/vue/src/time-panel/index.ts b/packages/vue/src/time-panel/index.ts index d07bad59f..341558fc0 100644 --- a/packages/vue/src/time-panel/index.ts +++ b/packages/vue/src/time-panel/index.ts @@ -9,7 +9,7 @@ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS. * */ -import TimePanel from './src/index.vue' +import TimePanel from './src/pc.vue' import '@opentiny/vue-theme/date-panel/index.less' import { version } from './package.json' diff --git a/packages/vue/src/time-panel/src/pc.vue b/packages/vue/src/time-panel/src/pc.vue new file mode 100644 index 000000000..471901d7e --- /dev/null +++ b/packages/vue/src/time-panel/src/pc.vue @@ -0,0 +1,59 @@ + + + + diff --git a/packages/vue/src/time-picker-mobile/index.ts b/packages/vue/src/time-picker-mobile/index.ts new file mode 100644 index 000000000..636566695 --- /dev/null +++ b/packages/vue/src/time-picker-mobile/index.ts @@ -0,0 +1,23 @@ +import TimePickerMobile from './src/mobile-first.vue' +import { version } from './package.json' + +TimePickerMobile.model = { + prop: 'modelValue', + event: 'update:modelValue' +} + +/* istanbul ignore next */ +TimePickerMobile.install = function (Vue) { + Vue.component(TimePickerMobile.name, TimePickerMobile) +} + +TimePickerMobile.version = version + +/* istanbul ignore next */ +if (process.env.BUILD_TARGET === 'runtime') { + if (typeof window !== 'undefined' && window.Vue) { + TimePickerMobile.install(window.Vue) + } +} + +export default TimePickerMobile diff --git a/packages/vue/src/time-picker-mobile/package.json b/packages/vue/src/time-picker-mobile/package.json new file mode 100644 index 000000000..87527dabd --- /dev/null +++ b/packages/vue/src/time-picker-mobile/package.json @@ -0,0 +1,22 @@ +{ + "name": "@opentiny/vue-time-picker-mobile", + "version": "3.7.0", + "description": "", + "main": "lib/index.js", + "module": "index.ts", + "sideEffects": false, + "dependencies": { + "@opentiny/vue-cascader-select": "workspace:~", + "@opentiny/vue-common": "workspace:~", + "@opentiny/vue-renderless": "workspace:~" + }, + "license": "MIT", + "devDependencies": { + "@opentiny-internal/vue-test-utils": "workspace:*", + "vitest": "^0.25.7" + }, + "scripts": { + "build": "pnpm -w build:ui $npm_package_name", + "//postversion": "pnpm build" + } +} diff --git a/packages/vue/src/time-picker-mobile/src/mobile-first.vue b/packages/vue/src/time-picker-mobile/src/mobile-first.vue new file mode 100644 index 000000000..ca063bfd1 --- /dev/null +++ b/packages/vue/src/time-picker-mobile/src/mobile-first.vue @@ -0,0 +1,29 @@ + + + diff --git a/packages/vue/src/time-picker/src/pc.vue b/packages/vue/src/time-picker/src/pc.vue new file mode 100644 index 000000000..8f26d791a --- /dev/null +++ b/packages/vue/src/time-picker/src/pc.vue @@ -0,0 +1,11 @@ + diff --git a/packages/vue/src/time-range/index.ts b/packages/vue/src/time-range/index.ts index 357063dae..7a18bd343 100644 --- a/packages/vue/src/time-range/index.ts +++ b/packages/vue/src/time-range/index.ts @@ -9,7 +9,7 @@ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS. * */ -import TimeRange from './src/index.vue' +import TimeRange from './src/pc.vue' import '@opentiny/vue-theme/time-range/index.less' import { version } from './package.json' diff --git a/packages/vue/src/time-range/src/pc.vue b/packages/vue/src/time-range/src/pc.vue new file mode 100644 index 000000000..ed531d1c6 --- /dev/null +++ b/packages/vue/src/time-range/src/pc.vue @@ -0,0 +1,92 @@ + + + + + diff --git a/packages/vue/src/time-select/index.ts b/packages/vue/src/time-select/index.ts index afb4cbe32..db77ad7a7 100644 --- a/packages/vue/src/time-select/index.ts +++ b/packages/vue/src/time-select/index.ts @@ -12,6 +12,7 @@ import Picker from '@opentiny/vue-picker' import { extend } from '@opentiny/vue-renderless/common/object' import { $prefix } from '@opentiny/vue-common' +import '@opentiny/vue-theme/time-select/index.less' import { version } from './package.json' const TimeSelect = extend(true, { props: { componentName: { type: String, default: 'TimeSelect' } } }, Picker, { diff --git a/packages/vue/src/time-select/src/pc.vue b/packages/vue/src/time-select/src/pc.vue new file mode 100644 index 000000000..8f26d791a --- /dev/null +++ b/packages/vue/src/time-select/src/pc.vue @@ -0,0 +1,11 @@ + diff --git a/packages/vue/src/time-spinner/index.ts b/packages/vue/src/time-spinner/index.ts index 65315cdf5..cadb27934 100644 --- a/packages/vue/src/time-spinner/index.ts +++ b/packages/vue/src/time-spinner/index.ts @@ -9,7 +9,7 @@ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS. * */ -import TimeSpinner from './src/index.vue' +import TimeSpinner from './src/pc.vue' import '@opentiny/vue-theme/time-spinner/index.less' import { version } from './package.json' diff --git a/packages/vue/src/time-spinner/src/pc.vue b/packages/vue/src/time-spinner/src/pc.vue new file mode 100644 index 000000000..44c1dc5c4 --- /dev/null +++ b/packages/vue/src/time-spinner/src/pc.vue @@ -0,0 +1,177 @@ + + + + + diff --git a/packages/vue/src/time/index.ts b/packages/vue/src/time/index.ts index a8f4ce07b..4b5c23936 100644 --- a/packages/vue/src/time/index.ts +++ b/packages/vue/src/time/index.ts @@ -9,7 +9,7 @@ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS. * */ -import Time from './src/index.vue' +import Time from './src/pc.vue' import '@opentiny/vue-theme/time-panel/index.less' import { version } from './package.json' diff --git a/packages/vue/src/time/src/pc.vue b/packages/vue/src/time/src/pc.vue new file mode 100644 index 000000000..b60af2ed8 --- /dev/null +++ b/packages/vue/src/time/src/pc.vue @@ -0,0 +1,60 @@ + + + + diff --git a/packages/vue/src/toggle-menu/src/pc.vue b/packages/vue/src/toggle-menu/src/pc.vue index 05c52404d..ea8dac78b 100644 --- a/packages/vue/src/toggle-menu/src/pc.vue +++ b/packages/vue/src/toggle-menu/src/pc.vue @@ -79,7 +79,7 @@
    - diff --git a/packages/vue/src/tooltip/src/pc.vue b/packages/vue/src/tooltip/src/pc.vue new file mode 100644 index 000000000..7f1b3c4b8 --- /dev/null +++ b/packages/vue/src/tooltip/src/pc.vue @@ -0,0 +1,234 @@ + + + + diff --git a/packages/vue/src/tooltip/src/token.ts b/packages/vue/src/tooltip/src/token.ts new file mode 100644 index 000000000..288427ff8 --- /dev/null +++ b/packages/vue/src/tooltip/src/token.ts @@ -0,0 +1,23 @@ +export const classes = { + 'tooltip': + 'absolute -left-[9999px] py-2 px-3 sm:py-1.5 sm:px-2 text-sm sm:text-xs bg-color-text-primary text-color-text-inverse shadow-none sm:bg-color-bg-1 sm:text-color-text-primary sm:shadow-md leading-tight min-w-[3.75rem] max-w-[28.125rem] z-[2000] break-words rounded [&[x-placement^=top]]:mb-2.5 [&[x-placement^=bottom]]:mt-2.5 [&[x-placement^=right]]:ml-2.5 [&[x-placement^=left]]:mr-2.5', + 'arrow': + 'drop-shadow-none absolute block w-0 h-0 border-[0.375rem] border-transparent border-solid after:absolute after:block after:w-0 after:h-0 after:border-[0.3125rem] after:border-transparent after:border-solid after:content-[""]', + 'placement-top': + 'sm:drop-shadow-[0_2px_2px_rgba(0,0,0,0.08)] -bottom-3 border-t-color-text-primary sm:border-t-color-bg-1 border-b-w-0 sm:after:border-t-color-bg-1 after:-bottom-1 after:-ml-1.5 after:border-t-color-text-primary after:border-b-w-0', + 'placement-bottom': + 'sm:drop-shadow-[0_-2px_2px_rgba(0,0,0,0.08)] -top-3 border-t-w-0 border-b-color-text-primary sm:border-b-color-bg-1 sm:after:border-b-color-bg-1 after:-top-1 after:-ml-1.5 after:border-t-w-0 after:border-b-color-text-primary', + 'placement-right': + 'sm:drop-shadow-[-2px_0px_2px_rgba(0,0,0,0.08)] -left-3 border-r-color-text-primary border-l-w-0 sm:border-r-color-bg-1 sm:after:border-r-color-bg-1 after:-bottom-1 after:-left-1 after:border-r-color-text-primary after:border-l-w-0', + 'placement-left': + 'sm:drop-shadow-[2px_0_2px_rgba(0,0,0,0.08)] -right-1.5 border-l-color-text-primary border-r-0 sm:border-l-color-bg-1 sm:after:border-l-color-bg-1 after:-bottom-1 after:right-px after:-ml-1.5 after:border-l-color-text-primary after:border-r-0', + 'placement-top-light': 'border-t-color-bg-1 drop-shadow-[0_2px_2px_rgba(0,0,0,0.08)] after:border-t-color-bg-1', + 'placement-bottom-light': 'border-b-color-bg-1 drop-shadow-[0_-2px_2px_rgba(0,0,0,0.08)] after:border-b-color-bg-1', + 'placement-left-light': 'border-l-color-bg-1 drop-shadow-[2px_0_2px_rgba(0,0,0,0.08)] after:border-l-color-bg-1', + 'placement-right-light': 'border-r-color-bg-1 drop-shadow-[-2px_0px_2px_rgba(0,0,0,0.08)] after:border-r-color-bg-1', + + 'placement-top-dark': 'border-t-color-text-primary after:border-t-color-text-primary', + 'placement-bottom-dark': 'border-b-color-text-primary after:border-b-color-text-primary', + 'placement-left-dark': 'border-l-color-text-primary after:border-l-color-text-primary', + 'placement-right-dark': 'border-r-color-text-primary after:border-r-color-text-primary' +} diff --git a/packages/vue/src/transfer-panel/index.ts b/packages/vue/src/transfer-panel/index.ts index 675e4074b..03040e0e8 100644 --- a/packages/vue/src/transfer-panel/index.ts +++ b/packages/vue/src/transfer-panel/index.ts @@ -9,7 +9,7 @@ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS. * */ -import TransferPanel from './src/index.vue' +import TransferPanel from './src/pc.vue' import { version } from './package.json' /* istanbul ignore next */ diff --git a/packages/vue/src/transfer-panel/src/pc.vue b/packages/vue/src/transfer-panel/src/pc.vue new file mode 100644 index 000000000..9bd01721a --- /dev/null +++ b/packages/vue/src/transfer-panel/src/pc.vue @@ -0,0 +1,173 @@ + + + + + diff --git a/packages/vue/src/transfer/src/pc.vue b/packages/vue/src/transfer/src/pc.vue index eeaeccc59..d5d4b97cc 100644 --- a/packages/vue/src/transfer/src/pc.vue +++ b/packages/vue/src/transfer/src/pc.vue @@ -96,7 +96,7 @@ - diff --git a/packages/vue/src/upload-dragger/index.ts b/packages/vue/src/upload-dragger/index.ts index e81a320e1..a009b9a79 100644 --- a/packages/vue/src/upload-dragger/index.ts +++ b/packages/vue/src/upload-dragger/index.ts @@ -9,7 +9,7 @@ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS. * */ -import UploadDragger from './src/index.vue' +import UploadDragger from './src/index' import { version } from './package.json' /* istanbul ignore next */ diff --git a/packages/vue/src/upload-dragger/src/index.ts b/packages/vue/src/upload-dragger/src/index.ts new file mode 100644 index 000000000..9f39af07b --- /dev/null +++ b/packages/vue/src/upload-dragger/src/index.ts @@ -0,0 +1,14 @@ +import { $props, $prefix, $setup } from '@opentiny/vue-common' +import template from 'virtual-template?pc|mobile-first' + +export default { + name: $prefix + 'UploadDragger', + props: { + ...$props, + disabled: Boolean, + customClass: [String, Object, Array] + }, + setup(props, context) { + return $setup({ props, context, template }) + } +} diff --git a/packages/vue/src/upload-dragger/src/mobile-first.vue b/packages/vue/src/upload-dragger/src/mobile-first.vue new file mode 100644 index 000000000..54437fc95 --- /dev/null +++ b/packages/vue/src/upload-dragger/src/mobile-first.vue @@ -0,0 +1,29 @@ + + + diff --git a/packages/vue/src/upload-dragger/src/pc.vue b/packages/vue/src/upload-dragger/src/pc.vue new file mode 100644 index 000000000..bd3198241 --- /dev/null +++ b/packages/vue/src/upload-dragger/src/pc.vue @@ -0,0 +1,38 @@ + + + + + diff --git a/packages/vue/src/upload-list/index.ts b/packages/vue/src/upload-list/index.ts index d7e1c5c52..70f624fd6 100644 --- a/packages/vue/src/upload-list/index.ts +++ b/packages/vue/src/upload-list/index.ts @@ -9,7 +9,7 @@ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS. * */ -import UploadList from './src/index.vue' +import UploadList from './src/index' import { version } from './package.json' /* istanbul ignore next */ diff --git a/packages/vue/src/upload-list/src/index.ts b/packages/vue/src/upload-list/src/index.ts new file mode 100644 index 000000000..6dabcd4be --- /dev/null +++ b/packages/vue/src/upload-list/src/index.ts @@ -0,0 +1,84 @@ +import { $props, $prefix, $setup, defineComponent } from '@opentiny/vue-common' +import template from 'virtual-template?pc|mobile-first' + +export default defineComponent({ + name: $prefix + 'UploadList', + props: { + ...$props, + disabled: { + type: Boolean, + default: () => false + }, + display: { + type: Boolean, + default: () => true + }, + files: { + type: Array, + default: () => [] + }, + filesIcon: { + type: Array, + default: () => [] + }, + handlePreview: Function, + isEdm: { + type: Boolean, + default: () => false + }, + isFolder: { + type: Boolean, + default: () => false + }, + listType: String, + openDownloadFile: { + type: Boolean, + default: () => false + }, + srcList: { + type: Array, + default: () => [] + }, + isFolderTitle: { + type: Boolean, + default: false + }, + listOption: { + type: Object, + default: () => ({ + showUpdate: true, + showDel: true + }) + }, + maxNameLength: { + type: Number, + default: 20 + }, + scale: { + type: [Number, String], + default: 1 + }, + showName: { + type: Boolean, + default: false + }, + sourceType: { + type: String, + default: 'picture', + validator(val) { + return ~['picture', 'video', 'audio'].indexOf(val) + } + }, + displayOnly: { + type: Boolean, + default: false + }, + handleDownloadFile: Function, + handleReUpload: Function, + isDragover: Boolean, + selected: Object + }, + setup(props, context) { + return $setup({ props, context, template }) + } +}) diff --git a/packages/vue/src/upload-list/src/mobile-first.vue b/packages/vue/src/upload-list/src/mobile-first.vue new file mode 100644 index 000000000..b37f8aa77 --- /dev/null +++ b/packages/vue/src/upload-list/src/mobile-first.vue @@ -0,0 +1,573 @@ + + + diff --git a/packages/vue/src/upload-list/src/pc.vue b/packages/vue/src/upload-list/src/pc.vue new file mode 100644 index 000000000..b6293e147 --- /dev/null +++ b/packages/vue/src/upload-list/src/pc.vue @@ -0,0 +1,212 @@ + + + + + diff --git a/packages/vue/src/upload/index.ts b/packages/vue/src/upload/index.ts index 38b950b8d..207d598d6 100644 --- a/packages/vue/src/upload/index.ts +++ b/packages/vue/src/upload/index.ts @@ -9,7 +9,7 @@ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS. * */ -import Upload from './src/index.vue' +import Upload from './src/index' import { version } from './package.json' /* istanbul ignore next */ diff --git a/packages/vue/src/upload/src/index.ts b/packages/vue/src/upload/src/index.ts new file mode 100644 index 000000000..9ac594b37 --- /dev/null +++ b/packages/vue/src/upload/src/index.ts @@ -0,0 +1,83 @@ +import { $props, $prefix, $setup, defineComponent } from '@opentiny/vue-common' +import uploadAjax from '@opentiny/vue-renderless/common/deps/upload-ajax' +import template from 'virtual-template?pc|mobile-first' + +export default defineComponent({ + name: $prefix + 'Upload', + props: { + ...$props, + accept: String, + action: { + type: String, + default: '' + }, + autoUpload: Boolean, + beforeUpload: Function, + data: Object, + disabled: Boolean, + drag: Boolean, + edmToken: { + type: Object, + default: () => ({}) + }, + fileList: Array, + headers: Object, + httpRequest: { + type: Function, + default: uploadAjax + }, + isFolder: { + type: Boolean, + default: false + }, + limit: Number, + listType: String, + multiple: Boolean, + name: { + type: String, + default: 'file' + }, + onError: Function, + onExceed: Function, + onPreview: { + type: Function, + default: () => {} + }, + onProgress: Function, + onRemove: { + type: Function, + default: () => {} + }, + onStart: Function, + onSuccess: Function, + type: String, + withCredentials: Boolean, + isHidden: { + type: Boolean, + default: false + }, + scale: { + type: [Number, String], + default: 1 + }, + sourceType: { + type: String, + default: 'picture', + validator(val:string) { + return Boolean(~['picture', 'video', 'audio'].indexOf(val)) + } + }, + displayOnly: { + type: Boolean, + default: false + }, + customClass: [String, Object, Array], + handleTriggerClick: { + type: Function, + default: () => {} + } + }, + setup(props, context) { + return $setup({ props, context, template, extend: { ref: 'upload-inner-template' } }) + } +}) diff --git a/packages/vue/src/upload/src/mobile-first.vue b/packages/vue/src/upload/src/mobile-first.vue new file mode 100644 index 000000000..4b93be3f4 --- /dev/null +++ b/packages/vue/src/upload/src/mobile-first.vue @@ -0,0 +1,95 @@ + diff --git a/packages/vue/src/upload/src/pc.vue b/packages/vue/src/upload/src/pc.vue new file mode 100644 index 000000000..33820e567 --- /dev/null +++ b/packages/vue/src/upload/src/pc.vue @@ -0,0 +1,115 @@ + + + diff --git a/packages/vue/src/user-account/src/pc.vue b/packages/vue/src/user-account/src/pc.vue index 5fde3629e..cbfd882e7 100644 --- a/packages/vue/src/user-account/src/pc.vue +++ b/packages/vue/src/user-account/src/pc.vue @@ -26,7 +26,7 @@ - diff --git a/packages/vue/src/user-head/src/index.ts b/packages/vue/src/user-head/src/index.ts index 27f2fcb5f..ac11293b2 100644 --- a/packages/vue/src/user-head/src/index.ts +++ b/packages/vue/src/user-head/src/index.ts @@ -10,7 +10,7 @@ * */ import { $props, $prefix, $setup, defineComponent } from '@opentiny/vue-common' -import template from 'virtual-template?pc|mobile' +import template from 'virtual-template?pc|mobile|mobile-first' export default defineComponent({ name: $prefix + 'UserHead', diff --git a/packages/vue/src/user-head/src/mobile-first.vue b/packages/vue/src/user-head/src/mobile-first.vue new file mode 100644 index 000000000..c38796d24 --- /dev/null +++ b/packages/vue/src/user-head/src/mobile-first.vue @@ -0,0 +1,81 @@ + + + diff --git a/packages/vue/src/user-head/src/mobile.vue b/packages/vue/src/user-head/src/mobile.vue index 11de88ae8..1bbcc5631 100644 --- a/packages/vue/src/user-head/src/mobile.vue +++ b/packages/vue/src/user-head/src/mobile.vue @@ -28,7 +28,7 @@ - diff --git a/packages/vue/src/wizard/src/pc.vue b/packages/vue/src/wizard/src/pc.vue index 953656f76..11456798e 100644 --- a/packages/vue/src/wizard/src/pc.vue +++ b/packages/vue/src/wizard/src/pc.vue @@ -118,7 +118,7 @@ - diff --git a/packages/vue/src/year-table/index.ts b/packages/vue/src/year-table/index.ts index cb3b3c1de..5b54a4fc4 100644 --- a/packages/vue/src/year-table/index.ts +++ b/packages/vue/src/year-table/index.ts @@ -9,7 +9,7 @@ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS. * */ -import YearTable from './src/index.vue' +import YearTable from './src/pc.vue' import '@opentiny/vue-theme/year-table/index.less' import { version } from './package.json' diff --git a/packages/vue/src/year-table/src/pc.vue b/packages/vue/src/year-table/src/pc.vue new file mode 100644 index 000000000..b085326d0 --- /dev/null +++ b/packages/vue/src/year-table/src/pc.vue @@ -0,0 +1,60 @@ + + + + + + diff --git a/tsconfig.vue2.7.json b/tsconfig.vue2.7.json index 8f2be0a59..0402f91db 100644 --- a/tsconfig.vue2.7.json +++ b/tsconfig.vue2.7.json @@ -1,6 +1,7 @@ { "extends": "@vue/tsconfig/tsconfig.web.json", "compilerOptions": { + "allowJs": true , "noImplicitAny": false, "baseUrl": ".", "paths": { @@ -33,10 +34,7 @@ ] }, "vueCompilerOptions": { - "target": 2.7, - "_hooks": [ - "./linting/vue-tsc-hook.js" - ] + "target": 2.7 }, "include": [ "packages/**/*.ts", diff --git a/tsconfig.vue2.json b/tsconfig.vue2.json index 62e705b08..2f107f634 100644 --- a/tsconfig.vue2.json +++ b/tsconfig.vue2.json @@ -1,6 +1,7 @@ { "extends": "@vue/tsconfig/tsconfig.web.json", "compilerOptions": { + "allowJs": true , "noImplicitAny": false, "baseUrl": ".", "paths": { @@ -33,10 +34,7 @@ ] }, "vueCompilerOptions": { - "target": 2, - "_hooks": [ - "./linting/vue-tsc-hook.js" - ] + "target": 2 }, "include": [ "packages/**/*.ts", diff --git a/tsconfig.vue3.json b/tsconfig.vue3.json index a5b6612fe..c81cfd8b4 100644 --- a/tsconfig.vue3.json +++ b/tsconfig.vue3.json @@ -1,6 +1,7 @@ { "extends": "@vue/tsconfig/tsconfig.web.json", "compilerOptions": { + "allowJs": true , "noImplicitAny": false, "baseUrl": ".", "paths": { @@ -33,10 +34,7 @@ ] }, "vueCompilerOptions": { - "target": 3, - "_hooks": [ - "./linting/vue-tsc-hook.js" - ] + "target": 3 }, "include": [ "packages/**/*.ts",