admin/wot-design-uni
1
0
Fork 0
mirror of https://gitee.com/wot-design-uni/wot-design-uni.git synced 2025-12-06 09:08:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: ✨ typescript类型支持增强 (#192)

Browse Source 
* refactor: ♻️  typescript支持增强

* refactor: ♻️  typescript支持增强

* refactor: ♻️  typescript支持增强

* refactor: ♻️  typescript支持增强

* refactor: ♻️  typescript支持增强

---------

Co-authored-by: xuqingkai <xuqingkai@hd123.com>
This commit is contained in:
不如摸鱼去 2024-03-18 22:36:12 +08:00 committed by GitHub
parent 8a2945380c
commit 201e7a12b9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
267 changed files with 6698 additions and 4287 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGELOG.md
View File

@ -658,7 +658,7 @@
### ✨ Features | 新功能
* ✨ 新增 Table 表格组件 ([#98](https://github.com/Moonofweisheng/wot-design-uni/issues/98)) ([c8395f8](https://github.com/Moonofweisheng/wot-design-uni/commit/c8395f8a7e1ad041b003672081b715a7c755adc1))
* ✨ Collpase 折叠面板组件增加分割线 ([adc6633](https://github.com/Moonofweisheng/wot-design-uni/commit/adc6633ad80b74e801a48a50917c9a2d378de9e0)), closes [#97](https://github.com/Moonofweisheng/wot-design-uni/issues/97)
* ✨ Collapse 折叠面板组件增加分割线 ([adc6633](https://github.com/Moonofweisheng/wot-design-uni/commit/adc6633ad80b74e801a48a50917c9a2d378de9e0)), closes [#97](https://github.com/Moonofweisheng/wot-design-uni/issues/97)
### [0.1.38](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.37...v0.1.38) (2023-10-25)

2
build/buildThemeVars.js
View File

@ -69,7 +69,7 @@ const generateTSFileContent = (variables) => {
return tsContent
}
const tsFilePath = path.resolve(__dirname, '../src/uni_modules/wot-design-uni/components/wd-config-provider/types.ts')
const tsFilePath = path.resolve(__dirname, '../src/uni_modules/wot-design-uni/components/wd-config-provider/type.ts')
const scssFilePath = path.resolve(__dirname, '../src/uni_modules/wot-design-uni/components/common/abstracts/test.scss')
const variables = extractSCSSVariables(scssFilePath)

1
docs/component/calendar.md
View File

@ -393,7 +393,6 @@ function handleConfirm4({ value }) {
| before-confirm | 确定前校验函数，接收 { value, resolve } 参数，通过 resolve 继续执行，resolve 接收 1 个 boolean 参数 | function | - | - | - |
| use-default-slot | 使用默认插槽时设置该选项 | boolean | - | false | - |
| use-label-slot | 使用 label 插槽时设置该选项 | boolean | - | false | - |
| name | form 表单中的字段名 | string | - | - | - |
| close-on-click-modal | 点击遮罩是否关闭 | boolean | - | true | - |
| z-index | 弹窗层级 | number | - | 15 | - |
| safe-area-inset-bottom | 弹出面板是否设置底部安全距离（iphone X 类型的机型） | boolean | - | true | - |

2
docs/component/checkbox.md
View File

@ -171,7 +171,6 @@ const value = ref(['jd'])
| true-value | 选中值，在 checkbox-group 中使用无效，需同 false-value 一块使用 | string / number | - | true | - |
| false-value | 非选中时的值，在 checkbox-group 中使用无效，需同 true-value 一块使用 | string /number | - | false | - |
| size | 设置大小 | string | large | - | - |
| name | form 表单中的字段名 | string | - | - | - |
## CheckboxGroup Attributes
@ -186,7 +185,6 @@ const value = ref(['jd'])
| max | 最大选中的数量，0 为无限数量，默认为 0 | number | - | 0 | - |
| inline | 同行展示 | boolean | - | false | - |
| size | 设置大小 | string | large | - | - |
| name | form 表单中的字段名 | string | - | - | - |
## Checkbox Methods

1
docs/component/col-picker.md
View File

@ -519,7 +519,6 @@ const columnChange = ({ selectedItem, resolve, finish }) => {
| loading-color | loading 图标的颜色 | string | - | #4D80F0 | - |
| use-default-slot | 使用默认插槽时设置该选项 | boolean | - | false | - |
| use-label-slot | 使用 label 插槽时设置该选项 | boolean | - | false | - |
| name | form 表单中的字段名 | string | - | - | - |
| close-on-click-modal | 点击遮罩是否关闭 | boolean | - | true | - |
| auto-complete | 自动触发 column-change 事件来补全数据，当 columns 为空数组或者 columns 数组长度小于 value 数组长度时，会自动触发 column-change | - | false | - |
| z-index | 弹窗层级 | number | - | 15 | - |

2
docs/component/config-provider.md
View File

@ -127,5 +127,5 @@ const themeVars: ConfigProviderThemeVars = {
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
| ---------- | ------------------------------------------------ | ------ | -------------- | ------ | -------- |
| theme | 主题风格，设置为 `dark` 来开启深色模式，全局生效 | string | `dark`/`light` | - | - |
| theme-vars | 自定义主题变量 | object | - | - | - |
| theme-vars | 自定义主题变量 | `ConfigProviderThemeVars` | - | - | - |

9
docs/component/count-down.md
View File

@ -125,6 +125,15 @@ const onFinish = () => showToast('倒计时结束')
| finish | 倒计时结束时触发 | — | 0.1.58 |
| change | 倒计时变化时触发 | current: TimeData | 0.1.58 |
## Methods
| 方法名 | 说明 | 参数 | 最低版本 |
| -------- | ---------------- | --------------------- | -------- |
| start | 开始倒计时 | — | 0.1.58 |
| pause | 暂停倒计时 | — | 0.1.58 |
| reset | 重置倒计时，若 `auto-start` 为 `true`，重设后会自动开始倒计时 | — | 0.1.58 |
## Slots
| 名称 | 说明 | 最低版本 |

1
docs/component/datetime-picker.md
View File

@ -279,7 +279,6 @@ const displayFormatTabLabel = (items) => {
| use-label-slot | label 使用插槽 | boolean | - | false | - |
| use-default-slot | 使用默认插槽 | boolean | - | false | - |
| before-confirm | 确定前校验函数，接收 (value, resolve, picker) 参数，通过 resolve 继续执行 picker，resolve 接收1个boolean参数 | function | - | - | - |
| name | form 表单中的字段名 | string | - | - | - |
| close-on-click-modal | 点击遮罩是否关闭 | boolean | - | true | - |
| z-index | 弹窗层级 | number | - | 15 | - |
| safe-area-inset-bottom | 弹出面板是否设置底部安全距离（iphone X 类型的机型） | boolean | - | true | - |

2
docs/component/gap.md
View File

@ -40,7 +40,7 @@
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----------------|---------|---------|------------|-------------| -------- |
| height | 高度 | `string`/`number` | - | 15 | - |
| background | 背景颜色 | string | | transparent | - |
| bgColor | 背景颜色 | string | | transparent | - |
| safeAreaBbottom | 底部安全区 | boolean | true/false | false | - |
## 外部样式类

2
docs/component/img-cropper.md
View File

@ -65,7 +65,7 @@ function handleCancel(event) {
| 参数 | 说明 | 类型 | 可选值 | 默认值| 最低版本 |
|-----|------|-----|-------|-------|--------|
| show | 打开图片裁剪组件 | boolean | - | false | - |
| v-model | 打开图片裁剪组件 | boolean | - | false | - |
| img-src | 图片资源链接 | string | - | - | - |
| img-width | 截屏预览图片的初始宽度; `1、设置宽度不设置高度，按照宽度等比缩放；2、如果都不设置，预览时图片大小会根据裁剪框大小进行等比缩放，进行锁边处理；`; string 类型只支持 % 单位，number 类型时单位为 px | number / string | - | - | - |
| img-height | 截屏预览图片的初始高度; `1、设置高度不设置宽度，按照高度等比缩放；2、如果都不设置，预览时图片大小会根据裁剪框大小进行等比缩放，进行锁边处理；`; string 类型只支持 % 单位，number 类型时单位为 px | number / string | - | - | - |

1
docs/component/input-number.md
View File

@ -111,7 +111,6 @@ function handleChange1({ value }) {
| disabled | 禁用 | boolean | - | false | - |
| without-input | 不显示输入框 | boolean | - | false | - |
| input-width | 输入框宽度 | string | - | 36px | - |
| name | form 表单中的字段名 | string | - | - | - |
| allow-null | 允许空值 | boolean | - | false | - |
| placeholder | 占位文本 | string | - | - | - |
| disable-input | 禁用输入框 | boolean | - | false | 0.2.14 |

1
docs/component/picker-view.md
View File

@ -114,7 +114,6 @@ const onChangeDistrict = (pickerView, value, columnIndex, resolve) => {
| value-key | 选项对象中，value对应的 key | string | - | value | - |
| label-key | 选项对象中，展示的文本对应的 key | string | - | label | - |
| column-change | 接收 pickerView 实例、选中项、当前修改列的下标、resolve 作为入参，根据选中项和列下标进行判断，通过 pickerView 实例暴露出来的 `setColumnData` 方法修改其他列的数据源。 | function | - | - | - |
| name | form 表单中的字段名 | string | - | - | - |
## Methods

1
docs/component/picker.md
View File

@ -256,7 +256,6 @@ function handleConfirm({ value }) {
| use-label-slot | label 使用插槽 | boolean | - | false | - |
| use-default-slot | 使用默认插槽 | boolean | - | false | - |
| before-confirm | 确定前校验函数，接收 (value, resolve, picker) 参数，通过 resolve 继续执行 picker，resolve 接收1个boolean参数 | function | - | - | - |
| name | form 表单中的字段名 | string | - | - | - |
| close-on-click-modal | 点击遮罩是否关闭 | boolean | - | true | - |
| z-index | 弹窗层级 | number | - | 15 | - |
| safe-area-inset-bottom | 弹出面板是否设置底部安全距离（iphone X 类型的机型） | boolean | - | true | - |

1
docs/component/radio.md
View File

@ -146,7 +146,6 @@ radio设置的props优先级比radioGroup上设置的props优先级更高
| max-width | 文字位置最大宽度 | string | - | - | - |
| inline | 同行展示 | boolean | - | false | - |
| cell | 表单模式 | boolean | - | false | - |
| name | form 表单中的字段名 | string | - | - | - |
## RadioGroup Events

10
docs/component/rate.md
View File

@ -1,12 +1,3 @@
<!--
* @Author: weisheng
* @Date: 2023-08-27 18:05:52
* @LastEditTime: 2023-09-02 16:12:14
* @LastEditors: weisheng
* @Description:
* @FilePath: \wot-design-uni\docs\component\rate.md
* 记得注释
-->
<frame/>
# Rate 评分
@ -85,7 +76,6 @@ function changeValue({ value }) {
| active-icon | 选中的图标类名 | string | - | wd-icon-star-on | - |
| disabled | 是否禁用 | boolean | - | false | - |
| disabled-color | 禁用的图标颜色 | string | - | linear-gradient(315deg, rgba(177,177,177,1) 0%,rgba(199,199,199,1) 100%) | - |
| name | form 表单中的字段名 | string | - | - | - |
## Events

1
docs/component/search.md
View File

@ -169,7 +169,6 @@ function changeSearchType({ item, index }) {
| use-suffix-slot | 是否使用输入框右侧插槽 | boolean | - | false | - |
| focus | 是否自动聚焦 | boolean | - | false | 0.1.63 |
| focusWhenClear | 是否在点击清除按钮时聚焦输入框 | boolean | - | false | 0.1.63 |
| name | form 表单中的字段名 | string | - | - | - |
## Events

1
docs/component/select-picker.md
View File

@ -334,7 +334,6 @@ function handleConfirm({ value, selectedItems }) {
| checked-color | 选中的颜色（单/复选框） | string | - | #4D80F0 | - |
| use-default-slot | 使用默认插槽时设置该选项 | boolean | - | false | - |
| use-label-slot | 使用 label 插槽时设置该选项 | boolean | - | false | - |
| name | form 表单中的字段名 | string | - | - | - |
| close-on-click-modal | 点击遮罩是否关闭 | boolean | - | true | - |
| z-index | 弹窗层级 | number | - | 15 | - |
| safe-area-inset-bottom | 弹出面板是否设置底部安全距离（iphone X 类型的机型） | boolean | - | true | - |

1
docs/component/switch.md
View File

@ -79,7 +79,6 @@ const beforeChange = ({ value, resolve }) => {
| active-color | 打开时的背景色 | string | - | #4D80F0 | - |
| inactive-color | 关闭时的背景色，默认为白色，所以有灰色边框，如果设置了该值，则会自动去除灰色边框 | string | - | #fff | - |
| size | 开关大小，可以为任何单位的字符串尺寸 | string/number | - | 28px | - |
| name | form 表单中的字段名 | string | - | - | - |
| before-change | 修改前钩子 | function | - | - | - |
## Events

2
docs/guide/changelog.md
View File

@ -658,7 +658,7 @@
### ✨ Features | 新功能
* ✨ 新增 Table 表格组件 ([#98](https://github.com/Moonofweisheng/wot-design-uni/issues/98)) ([c8395f8](https://github.com/Moonofweisheng/wot-design-uni/commit/c8395f8a7e1ad041b003672081b715a7c755adc1))
* ✨ Collpase 折叠面板组件增加分割线 ([adc6633](https://github.com/Moonofweisheng/wot-design-uni/commit/adc6633ad80b74e801a48a50917c9a2d378de9e0)), closes [#97](https://github.com/Moonofweisheng/wot-design-uni/issues/97)
* ✨ Collapse 折叠面板组件增加分割线 ([adc6633](https://github.com/Moonofweisheng/wot-design-uni/commit/adc6633ad80b74e801a48a50917c9a2d378de9e0)), closes [#97](https://github.com/Moonofweisheng/wot-design-uni/issues/97)
### [0.1.38](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.37...v0.1.38) (2023-10-25)

2
package.json
View File

@ -113,7 +113,7 @@
"vite": "4.0.3",
"vitest": "^0.30.1",
"vue-eslint-parser": "^9.1.0",
"vue-tsc": "^1.0.24"
"vue-tsc": "^2.0.6"
},
"config": {
"commitizen": {

131
pnpm-lock.yaml generated
View File

@ -170,8 +170,8 @@ devDependencies:
specifier: ^9.1.0
version: 9.1.0(eslint@8.36.0)
vue-tsc:
specifier: ^1.0.24
version: 1.2.0(typescript@5.3.3)
specifier: ^2.0.6
version: 2.0.6(typescript@5.3.3)
packages:
@ -574,6 +574,14 @@ packages:
dependencies:
'@babel/types': 7.22.10
/@babel/parser@7.24.0:
resolution: {integrity: sha512-QuP/FxEAzMSjXygs8v4N9dvdXzEHN4W1oF3PxuWAtPo08UdM17u89RDMgjLn/mlc56iM0HlLmVkO/wgR+rDgHg==}
engines: {node: '>=6.0.0'}
hasBin: true
dependencies:
'@babel/types': 7.22.10
dev: true
/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.22.5(@babel/core@7.22.10):
resolution: {integrity: sha512-NP1M5Rf+u2Gw9qfSO4ihjcTGW5zXTi36ITLd4/EoAcEhIZ0yjMqmftDNl3QC19CX7olhrjpyU454g/2W7X0jvQ==}
engines: {node: '>=6.9.0'}
@ -4071,44 +4079,23 @@ packages:
pretty-format: 27.5.1
dev: true
/@volar/language-core@1.3.0-alpha.0:
resolution: {integrity: sha512-W3uMzecHPcbwddPu4SJpUcPakRBK/y/BP+U0U6NiPpUX1tONLC4yCawt+QBJqtgJ+sfD6ztf5PyvPL3hQRqfOA==}
/@volar/language-core@2.1.2:
resolution: {integrity: sha512-5qsDp0Gf6fE09UWCeK7bkVn6NxMwC9OqFWQkMMkeej8h8XjyABPdRygC2RCrqDrfVdGijqlMQeXs6yRS+vfZYA==}
dependencies:
'@volar/source-map': 1.3.0-alpha.0
'@volar/source-map': 2.1.2
dev: true
/@volar/source-map@1.3.0-alpha.0:
resolution: {integrity: sha512-jSdizxWFvDTvkPYZnO6ew3sBZUnS0abKCbuopkc0JrIlFbznWC/fPH3iPFIMS8/IIkRxq1Jh9VVG60SmtsdaMQ==}
/@volar/source-map@2.1.2:
resolution: {integrity: sha512-yFJqsuLm1OaWrsz9E3yd3bJcYIlHqdZ8MbmIoZLrAzMYQDcoF26/INIhgziEXSdyHc8xd7rd/tJdSnUyh0gH4Q==}
dependencies:
muggle-string: 0.2.2
muggle-string: 0.4.1
dev: true
/@volar/typescript@1.3.0-alpha.0:
resolution: {integrity: sha512-5UItyW2cdH2mBLu4RrECRNJRgtvvzKrSCn2y3v/D61QwIDkGx4aeil6x8RFuUL5TFtV6QvVHXnsOHxNgd+sCow==}
/@volar/typescript@2.1.2:
resolution: {integrity: sha512-lhTancZqamvaLvoz0u/uth8dpudENNt2LFZOWCw9JZiX14xRFhdhfzmphiCRb7am9E6qAJSbdS/gMt1utXAoHQ==}
dependencies:
'@volar/language-core': 1.3.0-alpha.0
dev: true
/@volar/vue-language-core@1.2.0:
resolution: {integrity: sha512-w7yEiaITh2WzKe6u8ZdeLKCUz43wdmY/OqAmsB/PGDvvhTcVhCJ6f0W/RprZL1IhqH8wALoWiwEh/Wer7ZviMQ==}
dependencies:
'@volar/language-core': 1.3.0-alpha.0
'@volar/source-map': 1.3.0-alpha.0
'@vue/compiler-dom': 3.3.4
'@vue/compiler-sfc': 3.3.4
'@vue/reactivity': 3.3.4
'@vue/shared': 3.3.4
minimatch: 6.2.0
muggle-string: 0.2.2
vue-template-compiler: 2.7.14
dev: true
/@volar/vue-typescript@1.2.0:
resolution: {integrity: sha512-zjmRi9y3J1EkG+pfuHp8IbHmibihrKK485cfzsHjiuvJMGrpkWvlO5WVEk8oslMxxeGC5XwBFE9AOlvh378EPA==}
deprecated: 'WARNING: This project has been renamed to @vue/typescript. Install using @vue/typescript instead.'
dependencies:
'@volar/typescript': 1.3.0-alpha.0
'@volar/vue-language-core': 1.2.0
'@volar/language-core': 2.1.2
path-browserify: 1.0.1
dev: true
/@vue/babel-helper-vue-transform-on@1.0.2:
@ -4148,6 +4135,16 @@ packages:
estree-walker: 2.0.2
source-map-js: 1.0.2
/@vue/compiler-core@3.4.21:
resolution: {integrity: sha512-MjXawxZf2SbZszLPYxaFCjxfibYrzr3eYbKxwpLR9EQN+oaziSu3qKVbwBERj1IFIB8OLUewxB5m/BFzi613og==}
dependencies:
'@babel/parser': 7.24.0
'@vue/shared': 3.4.21
entities: 4.5.0
estree-walker: 2.0.2
source-map-js: 1.0.2
dev: true
/@vue/compiler-dom@3.2.47:
resolution: {integrity: sha512-dBBnEHEPoftUiS03a4ggEig74J2YBZ2UIeyfpcRM2tavgMWo4bsEfgCGsu+uJIL/vax9S+JztH8NmQerUo7shQ==}
dependencies:
@ -4160,6 +4157,13 @@ packages:
'@vue/compiler-core': 3.3.4
'@vue/shared': 3.3.4
/@vue/compiler-dom@3.4.21:
resolution: {integrity: sha512-IZC6FKowtT1sl0CR5DpXSiEB5ayw75oT2bma1BEhV7RRR1+cfwLrxc2Z8Zq/RGFzJ8w5r9QtCOvTjQgdn0IKmA==}
dependencies:
'@vue/compiler-core': 3.4.21
'@vue/shared': 3.4.21
dev: true
/@vue/compiler-sfc@3.2.47:
resolution: {integrity: sha512-rog05W+2IFfxjMcFw10tM9+f7i/+FFpZJJ5XHX72NP9eC2uRD+42M3pYcQqDXVYoj74kHMSEdQ/WmCjt8JFksQ==}
dependencies:
@ -4204,6 +4208,24 @@ packages:
resolution: {integrity: sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==}
dev: false
/@vue/language-core@2.0.6(typescript@5.3.3):
resolution: {integrity: sha512-UzqU12tzf9XLqRO3TiWPwRNpP4fyUzE6MAfOQWQNZ4jy6a30ARRUpmODDKq6O8C4goMc2AlPqTmjOHPjHkilSg==}
peerDependencies:
typescript: '*'
peerDependenciesMeta:
typescript:
optional: true
dependencies:
'@volar/language-core': 2.1.2
'@vue/compiler-dom': 3.4.21
'@vue/shared': 3.4.21
computeds: 0.0.1
minimatch: 9.0.3
path-browserify: 1.0.1
typescript: 5.3.3
vue-template-compiler: 2.7.16
dev: true
/@vue/reactivity-transform@3.2.47:
resolution: {integrity: sha512-m8lGXw8rdnPVVIdIFhf0LeQ/ixyHkH5plYuS83yop5n7ggVJU+z5v0zecwEnX7fa7HNLBhh2qngJJkxpwEEmYA==}
dependencies:
@ -4264,6 +4286,10 @@ packages:
/@vue/shared@3.3.4:
resolution: {integrity: sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==}
/@vue/shared@3.4.21:
resolution: {integrity: sha512-PuJe7vDIi6VYSinuEbUIQgMIRZGgM8e4R+G+/dQTk0X1NEdvgvvgv7m+rfmDH1gZzyA1OjjoWskvHlfRNfQf3g==}
dev: true
/@vue/tsconfig@0.1.3(@types/node@18.15.3):
resolution: {integrity: sha512-kQVsh8yyWPvHpb8gIc9l/HIDiiVUy1amynLNpCy8p+FoCiZXCo6fQos5/097MmnNZc9AtseDsCrfkhqCrJ8Olg==}
peerDependencies:
@ -5068,6 +5094,10 @@ packages:
/compare-versions@3.6.0:
resolution: {integrity: sha512-W6Af2Iw1z4CB7q4uU4hv646dW9GQuBM+YpC0UvUCWSD8w90SJjp+ujJuXaEMtAXBtSqGfMPuFOVn4/+FlaqfBA==}
/computeds@0.0.1:
resolution: {integrity: sha512-7CEBgcMjVmitjYo5q8JTJVra6X5mQ20uTThdK+0kR7UEaDrAWEQcRiBtWJzga4eRpP6afNwwLsX2SET2JhVB1Q==}
dev: true
/concat-map@0.0.1:
resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
dev: true
@ -5657,6 +5687,11 @@ packages:
engines: {node: '>= 0.8'}
dev: true
/entities@4.5.0:
resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
engines: {node: '>=0.12'}
dev: true
/error-ex@1.3.2:
resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
dependencies:
@ -8054,13 +8089,6 @@ packages:
brace-expansion: 1.1.11
dev: true
/minimatch@6.2.0:
resolution: {integrity: sha512-sauLxniAmvnhhRjFwPNnJKaPFYyddAgbYdeUpHULtCT/GhzdCx/MDNy+Y40lBxTQUrMzDE8e0S43Z5uqfO0REg==}
engines: {node: '>=10'}
dependencies:
brace-expansion: 2.0.1
dev: true
/minimatch@7.4.2:
resolution: {integrity: sha512-xy4q7wou3vUoC9k1xGTXc+awNdGaGVHtFUaey8tiX4H1QRc04DZ/rmDFwNm2EBsuYEhAZ6SgMmYf3InGY6OauA==}
engines: {node: '>=10'}
@ -8142,8 +8170,8 @@ packages:
resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
dev: true
/muggle-string@0.2.2:
resolution: {integrity: sha512-YVE1mIJ4VpUMqZObFndk9CJu6DBJR/GB13p3tXuNbwD4XExaI5EOuRl6BHeIDxIqXZVxSfAC+y6U1Z/IxCfKUg==}
/muggle-string@0.4.1:
resolution: {integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==}
dev: true
/mute-stream@0.0.8:
@ -8198,7 +8226,7 @@ packages:
dependencies:
hosted-git-info: 4.1.0
is-core-module: 2.11.0
semver: 7.4.0
semver: 7.5.4
validate-npm-package-license: 3.0.4
dev: true
@ -8478,6 +8506,10 @@ packages:
engines: {node: '>= 0.8'}
dev: true
/path-browserify@1.0.1:
resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
dev: true
/path-exists@3.0.0:
resolution: {integrity: sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==}
engines: {node: '>=4'}
@ -10303,21 +10335,22 @@ packages:
vue: 3.3.4
dev: false
/vue-template-compiler@2.7.14:
resolution: {integrity: sha512-zyA5Y3ArvVG0NacJDkkzJuPQDF8RFeRlzV2vLeSnhSpieO6LK2OVbdLPi5MPPs09Ii+gMO8nY4S3iKQxBxDmWQ==}
/vue-template-compiler@2.7.16:
resolution: {integrity: sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==}
dependencies:
de-indent: 1.0.2
he: 1.2.0
dev: true
/vue-tsc@1.2.0(typescript@5.3.3):
resolution: {integrity: sha512-rIlzqdrhyPYyLG9zxsVRa+JEseeS9s8F2BbVVVWRRsTZvJO2BbhLEb2HW3MY+DFma0378tnIqs+vfTzbcQtRFw==}
/vue-tsc@2.0.6(typescript@5.3.3):
resolution: {integrity: sha512-kK50W4XqQL34vHRkxlRWLicrT6+F9xfgCgJ4KSmCHcytKzc1u3c94XXgI+CjmhOSxyw0krpExF7Obo7y4+0dVQ==}
hasBin: true
peerDependencies:
typescript: '*'
dependencies:
'@volar/vue-language-core': 1.2.0
'@volar/vue-typescript': 1.2.0
'@volar/typescript': 2.1.2
'@vue/language-core': 2.0.6(typescript@5.3.3)
semver: 7.5.4
typescript: 5.3.3
dev: true

4
src/components/wd-privacy-popup/wd-privacy-popup.vue
View File

@ -110,10 +110,10 @@ function handleDisagree() {
*/
function openPrivacyContract() {
;(wx as any).openPrivacyContract({
success: (res) => {
success: (res: any) => {
console.log('openPrivacyContract success')
},
fail: (res) => {
fail: (res: any) => {
console.error('openPrivacyContract fail', res)
}
})

4
src/pages/actionSheet/Index.vue
View File

@ -191,10 +191,10 @@ function close4() {
}
const toast = useToast()
function select({ item, index }) {
function select({ item, index }: { item: any; index: number }) {
toast.show(`当前选中项: ${item.title}, 下标: ${index}`)
}
function select1({ item, rowIndex, colIndex }) {
function select1({ item, rowIndex, colIndex }: { item: any; rowIndex: number; colIndex: number }) {
toast.show(`当前选中项: ${item.title}, 行下标: ${rowIndex}, 列下标: ${colIndex}`)
}
</script>

2
src/pages/button/Index.vue
View File

@ -113,7 +113,7 @@
</page-wraper>
</template>
<script lang="ts" setup>
function handleGetuserinfo(event) {
function handleGetuserinfo(event: any) {
// TODO
console.log(event)
}

32
src/pages/calendar/Index.vue
View File

@ -49,6 +49,8 @@
<script lang="ts" setup>
import { useToast } from '@/uni_modules/wot-design-uni'
import { dayjs } from '@/uni_modules/wot-design-uni'
import type { CalendarDayItem } from '@/uni_modules/wot-design-uni/components/wd-calendar-view/types'
import type { CalendarOnShortcutsClickOption } from '@/uni_modules/wot-design-uni/components/wd-calendar/types'
import { ref } from 'vue'
const minDate = ref<number>(new Date(new Date().getFullYear() - 20, new Date().getMonth() - 6, new Date().getDate()).getTime())
@ -70,7 +72,7 @@ const value14 = ref<number | null>(null)
const value15 = ref<number | null>(null)
const formatValue = ref<string>('')
const formatter = (day) => {
const formatter = (day: CalendarDayItem) => {
const date = new Date(day.date)
const now = new Date()
@ -123,24 +125,24 @@ const shortcuts = ref<Record<string, any>[]>([
])
const toast = useToast()
const onShortcutsClick = ({ item }) => {
const onShortcutsClick = ({ item }: CalendarOnShortcutsClickOption) => {
const dayDiff = item.id
const endDate = Date.now() - 24 * 60 * 60 * 1000
const startDate = endDate - dayDiff * 24 * 60 * 60 * 1000
return [startDate, endDate]
}
const displayFormat = (value) => {
const displayFormat = (value: any) => {
return dayjs(value[0]).format('YY年MM月DD日') + ' - ' + dayjs(value[1]).format('YY年MM月DD日')
}
const innerDisplayFormat = (value, rangeType) => {
const innerDisplayFormat = (value: string | number | Date | undefined, rangeType: string) => {
if (!value) {
return rangeType === 'start' ? '活动开始时间' : '活动结束时间'
}
return dayjs(value).format('YY年MM月DD日')
}
const beforeConfirm = ({ value, resolve }) => {
const beforeConfirm = ({ value, resolve }: any) => {
if (value > Date.now()) {
toast.error('该日期暂无数据')
resolve(false)
@ -149,26 +151,18 @@ const beforeConfirm = ({ value, resolve }) => {
}
}
function handleConfirm1({ value }) {
function handleConfirm1({ value }: any) {
console.log(value)
}
function handleConfirm2({ value }) {
// this.setData({
// value2: event.detail.value
// })
}
function handleConfirm3({ value }) {
function handleConfirm2({ value }: any) {
console.log(value)
// this.setData({
// value12: event.detail.value
// })
}
function handleConfirm4({ value }) {
function handleConfirm3({ value }: any) {
console.log(value)
}
function handleConfirm4({ value }: any) {
console.log(new Date(value).toString())
formatValue.value = new Date(value).toString()
// this.setData({
// formatValue: new Date(event.detail.value).toString()
// })
}
</script>
<style lang="scss" scoped></style>

24
src/pages/calendarView/Index.vue
View File

@ -26,7 +26,7 @@
<wd-calendar-view :type="type2" allow-same-day v-model="value3" @change="handleChange3"></wd-calendar-view>
</demo-block>
<demo-block title="时间类型" :hor="0">
<wd-calendar-view type="datetime" v-model="value4"></wd-calendar-view>
<wd-calendar-view type="datetime" v-model="value4" :time-filter="timeFilter"></wd-calendar-view>
</demo-block>
<demo-block title="时间范围类型" :hor="0">
<wd-calendar-view type="datetimerange" v-model="value5"></wd-calendar-view>
@ -57,7 +57,18 @@ const value6 = ref([Date.now() - 24 * 60 * 60 * 1000 * 3, Date.now() - 24 * 60 *
const value7 = ref([Date.now() - 24 * 60 * 60 * 1000 * 3, Date.now() - 24 * 60 * 60 * 1000])
const value8 = ref([Date.now() - 24 * 60 * 60 * 1000 * 3, Date.now() - 24 * 60 * 60 * 1000])
const formatter = (day) => {
const timeFilter = ({ type, values }: any) => {
if (type === 'minute') {
// 只展示 0,10,20,30,40,50 分钟选项
return values.filter((item: any) => {
return item.value % 10 === 0
})
}
return values
}
const formatter = (day: any) => {
const date = new Date(day.date)
const now = new Date()
@ -95,16 +106,17 @@ const formatter = (day) => {
return day
}
function handleTypeChange2({ value }) {
function handleTypeChange2({ value }: any) {
type2.value = value
}
function handleChange1({ value }) {
function handleChange1({ value }: any) {
console.log(value)
// value1.value = value
}
function handleChange2({ value }) {
function handleChange2({ value }: any) {
value2.value = value
}
function handleChange3({ value }) {
function handleChange3({ value }: any) {
value3.value = value
}
</script>

6
src/pages/cell/Index.vue
View File

@ -110,13 +110,13 @@ const rate = ref(0)
const slider = ref(0)
const switchValue = ref('')
function handleRateChange({ value }) {
function handleRateChange({ value }: any) {
console.log(value)
}
function handleSliderChange({ value }) {
function handleSliderChange({ value }: any) {
console.log(value)
}
function handleSwitchChange({ value }) {
function handleSwitchChange({ value }: any) {
console.log(value)
}
const toast = useToast()

2
src/pages/checkbox/Index.vue
View File

@ -112,7 +112,7 @@ const value8 = ref<number[]>([1])
const value9 = ref<string[]>([])
const value10 = ref<string[]>([])
function handleChange1(e) {
function handleChange1(e: any) {
console.log(e)
}
</script>

19
src/pages/colPicker/Index.vue
View File

@ -49,6 +49,7 @@
import { ref } from 'vue'
import { areaData } from '../../utils/area'
import { useToast } from '@/uni_modules/wot-design-uni'
import type { ColPickerColumnChangeOption } from '@/uni_modules/wot-design-uni/components/wd-col-picker/types'
const value1 = ref<any[]>([])
const value2 = ref<any[]>(['150000', '150100', '150121'])
@ -67,7 +68,7 @@ const value14 = ref<any[]>([])
const value15 = ref<any[]>([])
const displayValue = ref<string>('')
const areaData1 = ref<any[]>([
Object.keys(areaData[86]).map((key) => {
Object.keys(areaData[86]).map((key: string) => {
return {
value: key,
label: areaData[86][key]
@ -117,7 +118,7 @@ const areaData5 = ref<any[]>([
const toast = useToast()
const columnChange1 = ({ selectedItem, resolve, finish, index, rowIndex }) => {
const columnChange1 = ({ selectedItem, resolve, finish, index }: ColPickerColumnChangeOption) => {
const value = index === -1 ? 86 : selectedItem.value
if (areaData[value]) {
resolve(
@ -132,7 +133,7 @@ const columnChange1 = ({ selectedItem, resolve, finish, index, rowIndex }) => {
finish()
}
}
const columnChange2 = ({ selectedItem, resolve, finish }) => {
const columnChange2 = ({ selectedItem, resolve, finish }: ColPickerColumnChangeOption) => {
setTimeout(() => {
if (Math.random() > 0.7) {
finish(false)
@ -153,11 +154,11 @@ const columnChange2 = ({ selectedItem, resolve, finish }) => {
}
}, 300)
}
const displayFormat = (selectedItems) => {
const displayFormat = (selectedItems: Record<string, any>[]) => {
return selectedItems[selectedItems.length - 2].label + '-' + selectedItems[selectedItems.length - 1].label
}
const beforeConfirm = (value, selectedItems, resolve) => {
if (parseInt(value[2]) > 120000) {
const beforeConfirm = (value: (string | number)[], selectedItems: Record<string, any>[], resolve: (isPass: boolean) => void) => {
if (parseInt(String(value[2])) > 120000) {
toast.error('该地区库存不足')
resolve(false)
} else {
@ -165,14 +166,14 @@ const beforeConfirm = (value, selectedItems, resolve) => {
}
}
function handleConfirm({ selectedItems }) {
function handleConfirm({ selectedItems }: any) {
displayValue.value = selectedItems
.map((item) => {
.map((item: any) => {
return item.label
})
.join('')
}
function handleValue({ value }) {
function handleValue({ value }: any) {
console.log(value)
}
</script>

33
src/pages/collapse/Index.vue
View File

@ -2,7 +2,9 @@
<page-wraper>
<wd-toast></wd-toast>
<demo-block title="基础用法" transparent>
<wd-collapse v-model="value1" @change="handleChange1">
<wd-button @click="collapse?.toggleAll()">toggleAll</wd-button>
<wd-collapse ref="collapse" v-model="value1" @change="handleChange1">
<wd-collapse-item
v-for="(item, index) in itemList"
:before-expend="index === 2 ? beforeExpend : undefined"
@ -54,6 +56,7 @@
</template>
<script lang="ts" setup>
import { useToast } from '@/uni_modules/wot-design-uni'
import type { CollapseInstance } from '@/uni_modules/wot-design-uni/components/wd-collapse/types'
import { ref } from 'vue'
const toast = useToast()
@ -85,6 +88,8 @@ const itemList = ref<Record<string, any>[]>([
}
])
const collapse = ref<CollapseInstance>()
const value1 = ref<string[]>(['item1'])
const value2 = ref<string>('item1')
const value3 = ref<string[]>(['item1'])
@ -94,31 +99,31 @@ const value6 = ref<boolean>(false)
const accordion = ref<boolean>(true)
const name = ref<string>('item1')
function handleChange1({ value }) {
// console.log(value)
function handleChange1({ value }: any) {
console.log(value)
}
function handleChange2({ value }) {
// console.log(value)
function handleChange2({ value }: any) {
console.log(value)
}
function handleChange3({ value }) {
// console.log(value)
function handleChange3({ value }: any) {
console.log(value)
}
function handleChange4({ value }) {
// console.log(value)
function handleChange4({ value }: any) {
console.log(value)
}
function handleChange5({ value }) {
// console.log(value)
function handleChange5({ value }: any) {
console.log(value)
}
function handleChange6({ value }) {
// console.log(value)
function handleChange6({ value }: any) {
console.log(value)
}
/**
* 折叠面板展开前回调方法
* @param e
*/
function beforeExpend(name) {
function beforeExpend(name: string) {
const index = itemList.value.findIndex((item) => {
return item.name === name
})

29
src/pages/configProvider/Index.vue
View File

@ -110,6 +110,7 @@
</template>
<script setup lang="ts">
import { useToast, useMessage } from '@/uni_modules/wot-design-uni'
import type { ColPickerColumnChangeOption } from '@/uni_modules/wot-design-uni/components/wd-col-picker/types'
import { areaData } from '@/utils/area'
import { ref } from 'vue'
const showAction = ref<boolean>(false)
@ -174,7 +175,7 @@ const area = ref<any[]>([
}
})
])
const areaChange = ({ selectedItem, resolve, finish }) => {
const areaChange = ({ selectedItem, resolve, finish }: ColPickerColumnChangeOption) => {
if (areaData[selectedItem.value]) {
resolve(
Object.keys(areaData[selectedItem.value]).map((key) => {
@ -214,42 +215,42 @@ function showActions() {
]
}
function handleCouponName({ value }) {
function handleCouponName({ value }: any) {
console.log(value)
couponNameErr.value = false
}
function handlePlatform({ value }) {
function handlePlatform({ value }: any) {
console.log(value)
}
function handleThreshold({ value }) {
function handleThreshold({ value }: any) {
console.log(value)
}
function handlePrice({ value }) {
function handlePrice({ value }: any) {
console.log(value)
}
function handleAddress({ value }) {
function handleAddress({ value }: any) {
console.log(value)
}
function handleContent({ value }) {
function handleContent({ value }: any) {
console.log(value)
}
function handleCount({ value }) {
function handleCount({ value }: any) {
console.log(value)
}
function handleSwitch({ value }) {
function handleSwitch({ value }: any) {
console.log(value)
}
function handleRead({ value }) {
function handleRead({ value }: any) {
read.value = value
}
function handleCardId({ value }) {
function handleCardId({ value }: any) {
console.log(value)
}
function handlePhone({ value }) {
function handlePhone({ value }: any) {
console.log(value)
}
function formSubmit(event) {
function formSubmit(event: any) {
console.log(event)
if (!couponName.value) {
@ -261,7 +262,7 @@ function formSubmit(event) {
function handleIconClick() {
toast.info('优惠券提示信息')
}
function handleDate({ value }) {
function handleDate({ value }: any) {
console.log(value)
}
</script>

52
src/pages/datetimePicker/Index.vue
View File

@ -35,6 +35,16 @@
</template>
<script lang="ts" setup>
import { useToast } from '@/uni_modules/wot-design-uni'
import type {
DatetimePickerViewColumnType,
DatetimePickerViewFilter,
DatetimePickerViewFormatter
} from '@/uni_modules/wot-design-uni/components/wd-datetime-picker-view/types'
import type {
DatetimePickerDisplayFormat,
DatetimePickerDisplayFormatTabLabel,
DatetimePickerInstance
} from '@/uni_modules/wot-design-uni/components/wd-datetime-picker/types'
import { ref } from 'vue'
const type = ref<string>('date')
@ -55,7 +65,7 @@ const value14 = ref<any[]>(['', ''])
const value15 = ref<any[]>(['', Date.now()])
const defaultValue = ref<any[]>([Date.now() - 24 * 60 * 60 * 1000, Date.now()])
const showstart = ref<boolean>(false)
const formatter = (type, value) => {
const formatter: DatetimePickerViewFormatter = (type, value) => {
switch (type) {
case 'year':
return value + '年'
@ -71,21 +81,21 @@ const formatter = (type, value) => {
return value
}
}
const filter = (type, values) => {
const filter: DatetimePickerViewFilter = (type, values) => {
if (type === 'minute') {
return values.filter((value) => value % 5 === 0)
}
return values
}
const displayFormat = (items) => {
const displayFormat: DatetimePickerDisplayFormat = (items) => {
return `${items[0].label}年${items[1].label}月${items[2].label}日 ${items[3].label}:${items[4].label}`
}
const toast = useToast()
const beforeConfirm = (value, resolve, picker) => {
const beforeConfirm = (value: number | string | (number | string)[], resolve: (isPass: boolean) => void, picker: DatetimePickerInstance) => {
picker.setLoading(true)
setTimeout(() => {
picker.setLoading(false)
if (value > Date.now()) {
if ((value as number) > Date.now()) {
resolve(false)
toast.error('不能选择大于今天的日期')
} else {
@ -93,55 +103,55 @@ const beforeConfirm = (value, resolve, picker) => {
}
}, 2000)
}
const displayFormatTabLabel = (items) => {
const displayFormatTabLabel: DatetimePickerDisplayFormatTabLabel = (items) => {
return `${items[0].label}年${items[1].label}月${items[2].label}日 ${items[3].label}:${items[4].label}`
}
/** picker触发confirm事件，同步触发confirm事件 */
function handleConfirm1({ value }) {
function handleConfirm1({ value }: any) {
console.log(new Date(value))
}
function handleConfirm2({ value }) {
function handleConfirm2({ value }: any) {
console.log(value)
}
function handleConfirm3({ value }) {
function handleConfirm3({ value }: any) {
console.log(value)
}
function handleConfirm4({ value }) {
function handleConfirm4({ value }: any) {
console.log(value)
}
function handleConfirm5({ value }) {
function handleConfirm5({ value }: any) {
console.log(value)
}
function handleConfirm6({ value }) {
function handleConfirm6({ value }: any) {
console.log(value)
}
function handleConfirm7({ value }) {
function handleConfirm7({ value }: any) {
console.log(value)
}
function handleConfirm8({ value }) {
function handleConfirm8({ value }: any) {
console.log(value)
}
function handleConfirm9({ value }) {
function handleConfirm9({ value }: any) {
console.log(value)
}
function handleConfirm10({ value }) {
function handleConfirm10({ value }: any) {
console.log(value)
}
function handleConfirm11({ value }) {
function handleConfirm11({ value }: any) {
console.log(value)
}
function handleConfirm12({ value }) {
function handleConfirm12({ value }: any) {
console.log(value)
}
function handleConfirm13({ value }) {
function handleConfirm13({ value }: any) {
console.log(value)
}
function handleConfirm14({ value }) {
function handleConfirm14({ value }: any) {
console.log(value)
}
function handleConfirm15({ value }) {
function handleConfirm15({ value }: any) {
console.log(value)
}
/** picker触发cancel事件，同步触发cancel事件 */

17
src/pages/datetimePickerView/Index.vue
View File

@ -28,6 +28,7 @@
</template>
<script lang="ts" setup>
import { useToast } from '@/uni_modules/wot-design-uni'
import type { DatetimePickerViewFilter, DatetimePickerViewFormatter } from '@/uni_modules/wot-design-uni/components/wd-datetime-picker-view/types'
import { ref } from 'vue'
const value1 = ref<string>('')
@ -36,7 +37,7 @@ const value3 = ref<number>(Date.now())
const value4 = ref<string>('11:12')
const value5 = ref<number>(Date.now())
const value6 = ref<number>(Date.now())
const formatter = (type, value) => {
const formatter: DatetimePickerViewFormatter = (type, value) => {
switch (type) {
case 'year':
return value + '年'
@ -52,7 +53,7 @@ const formatter = (type, value) => {
return value
}
}
const filter = (type, values) => {
const filter: DatetimePickerViewFilter = (type, values) => {
if (type === 'minute') {
return values.filter((value) => value % 5 === 0)
}
@ -61,22 +62,22 @@ const filter = (type, values) => {
const toast = useToast()
function onChange1({ value }) {
function onChange1({ value }: any) {
toast.show('选择了' + new Date(value))
}
function onChange2({ value }) {
function onChange2({ value }: any) {
console.log(value)
}
function onChange3({ value }) {
function onChange3({ value }: any) {
console.log(value)
}
function onChange4({ value }) {
function onChange4({ value }: any) {
console.log(value)
}
function onChange5({ value }) {
function onChange5({ value }: any) {
console.log(value)
}
function onChange6({ value }) {
function onChange6({ value }: any) {
console.log(value)
}
</script>

18
src/pages/dropMenu/Index.vue
View File

@ -76,31 +76,31 @@ const option2 = ref<Record<string, any>[]>([
{ label: '上架时间', value: 2 }
])
function handleChange1({ value }) {
function handleChange1({ value }: any) {
console.log(value)
}
function handleChange2({ value }) {
function handleChange2({ value }: any) {
console.log(value)
}
function handleChange3({ value }) {
function handleChange3({ value }: any) {
console.log(value)
}
function handleChange4({ value }) {
function handleChange4({ value }: any) {
console.log(value)
}
function handleChange5({ value }) {
function handleChange5({ value }: any) {
console.log(value)
}
function handleChange6({ value }) {
function handleChange6({ value }: any) {
console.log(value)
}
function handleChange7({ value }) {
function handleChange7({ value }: any) {
console.log(value)
}
function handleChange8({ value }) {
function handleChange8({ value }: any) {
console.log(value)
}
function handleChange9({ value }) {
function handleChange9({ value }: any) {
console.log(value)
}

19
src/pages/form/Index.vue
View File

@ -108,6 +108,7 @@
</template>
<script lang="ts" setup>
import { useToast } from '@/uni_modules/wot-design-uni'
import type { FormInstance } from '@/uni_modules/wot-design-uni/components/wd-form/types'
import { reactive, ref } from 'vue'
const model1 = reactive<{
@ -131,14 +132,14 @@ const model2 = reactive<{
})
const { success: showSuccess, loading: showLoading, close: closeToast } = useToast()
const form1 = ref()
const form2 = ref()
const form1 = ref<FormInstance>()
const form2 = ref<FormInstance>()
const validatorMessage = (val) => {
const validatorMessage = (val: string) => {
return /1\d{10}/.test(val)
}
const validator = (val) => {
const validator = (val: any) => {
if (String(val).length >= 4) {
return Promise.resolve()
} else {
@ -147,7 +148,7 @@ const validator = (val) => {
}
// 校验函数可以返回 Promise，实现异步校验
const asyncValidator = (val) =>
const asyncValidator = (val: string) =>
new Promise((resolve) => {
showLoading('验证中...')
@ -158,8 +159,8 @@ const asyncValidator = (val) =>
})
function handleSubmit1() {
form1.value
.validate()
form1
.value!.validate()
.then(({ valid, errors }) => {
if (valid) {
showSuccess({
@ -173,8 +174,8 @@ function handleSubmit1() {
}
function handleSubmit2() {
form2.value
.validate()
form2
.value!.validate()
.then(({ valid, errors }) => {
if (valid) {
showSuccess({

7
src/pages/form/demo1.vue
View File

@ -37,6 +37,7 @@
</template>
<script lang="ts" setup>
import { useToast } from '@/uni_modules/wot-design-uni'
import type { FormInstance } from '@/uni_modules/wot-design-uni/components/wd-form/types'
import { reactive, ref } from 'vue'
interface PhoneItem {
@ -58,7 +59,7 @@ const model = reactive<{
})
const { success: showSuccess } = useToast()
const form = ref()
const form = ref<FormInstance>()
const removePhone = () => {
model.phoneNumbers.splice(model.phoneNumbers.length - 1, 1)
@ -72,11 +73,11 @@ const addPhone = () => {
}
const reset = () => {
form.value.reset()
form.value!.reset()
}
const submit = () => {
form.value.validate().then(({ valid, errors }) => {
form.value!.validate().then(({ valid, errors }) => {
if (valid) {
showSuccess('校验通过')
}

9
src/pages/form/demo2.vue
View File

@ -32,6 +32,7 @@
</template>
<script lang="ts" setup>
import { useToast } from '@/uni_modules/wot-design-uni'
import type { FormInstance } from '@/uni_modules/wot-design-uni/components/wd-form/types'
import { reactive, ref } from 'vue'
const model = reactive<{
@ -43,15 +44,15 @@ const model = reactive<{
})
const { success: showSuccess } = useToast()
const form = ref()
const form = ref<FormInstance>()
function handleBlur(prop: string) {
form.value.validate(prop)
form.value!.validate(prop)
}
function handleSubmit() {
form.value
.validate()
form
.value!.validate()
.then(({ valid }) => {
if (valid) {
showSuccess('校验通过')

17
src/pages/form/demo3.vue
View File

@ -111,7 +111,9 @@
<script lang="ts" setup>
import { useToast } from '@/uni_modules/wot-design-uni'
import { isArray } from '@/uni_modules/wot-design-uni/components/common/util'
import { type FormRules } from '@/uni_modules/wot-design-uni/components/wd-form/types'
import type { ColPickerColumnChange } from '@/uni_modules/wot-design-uni/components/wd-col-picker/types'
import { type FormInstance, type FormRules } from '@/uni_modules/wot-design-uni/components/wd-form/types'
import type { UploadFileItem } from '@/uni_modules/wot-design-uni/components/wd-upload/types'
import { areaData } from '@/utils/area'
import { reactive, ref } from 'vue'
@ -130,7 +132,7 @@ const model = reactive<{
cardId: string
phone: string
read: boolean
fileList: Record<string, string>[]
fileList: UploadFileItem[]
}>({
couponName: '',
platform: [],
@ -358,7 +360,7 @@ const area = ref<any[]>([
}
})
])
const areaChange = ({ selectedItem, resolve, finish }) => {
const areaChange: ColPickerColumnChange = ({ selectedItem, resolve, finish }) => {
if (areaData[selectedItem.value]) {
resolve(
Object.keys(areaData[selectedItem.value]).map((key) => {
@ -373,15 +375,15 @@ const areaChange = ({ selectedItem, resolve, finish }) => {
}
}
const toast = useToast()
const form = ref()
const form = ref<FormInstance>()
function handleFileChange({ fileList }) {
function handleFileChange({ fileList }: any) {
model.fileList = fileList
}
function handleSubmit() {
form.value
.validate()
form
.value!.validate()
.then(({ valid, errors }) => {
console.log(valid)
console.log(errors)
@ -424,3 +426,4 @@ function handleIconClick() {
font-size: 12px !important;
}
</style>
@/uni_modules/wot-design-uni/components/wd-form/type

12
src/pages/imgCropper/Index.vue
View File

@ -1,10 +1,10 @@
<!--
* @Author: weisheng
* @Date: 2023-09-20 11:10:41
* @LastEditTime: 2024-02-29 13:17:27
* @LastEditTime: 2024-03-17 19:53:11
* @LastEditors: weisheng
* @Description:
* @FilePath: \wot-design-uni\src\pages\imgCropper\Index.vue
* @FilePath: /wot-design-uni/src/pages/imgCropper/Index.vue
* 记得注释
-->
<template>
@ -48,17 +48,17 @@ function upload() {
}
})
}
function handleConfirm(event) {
function handleConfirm(event: any) {
const { tempFilePath } = event
imgSrc.value = tempFilePath
}
function imgLoaderror(res) {
function imgLoaderror(res: any) {
console.log('加载失败', res)
}
function imgLoaded(res) {
function imgLoaded(res: any) {
console.log('加载成功', res)
}
function handleCancel(event) {
function handleCancel(event: any) {
console.log('取消', event)
}
</script>

10
src/pages/input/Index.vue
View File

@ -70,19 +70,19 @@ const value17 = ref<string>('')
const value18 = ref<string>('')
const value19 = ref<string>('')
function handleChange(event) {
function handleChange(event: any) {
console.log(event)
}
function handleChange1(event) {
function handleChange1(event: any) {
console.log(event)
}
function handleChange2(event) {
function handleChange2(event: any) {
console.log(event)
}
function handleChange3(event) {
function handleChange3(event: any) {
console.log(event)
}
function handleBlur(event) {
function handleBlur(event: any) {
console.log('失焦', event)
}
</script>

18
src/pages/inputNumber/Index.vue
View File

@ -49,31 +49,31 @@ const value8 = ref<number>(2)
const value9 = ref<string>('')
const value10 = ref<number>(1)
function handleChange1({ value }) {
function handleChange1({ value }: any) {
console.log(value)
}
function handleChange2({ value }) {
function handleChange2({ value }: any) {
console.log(value)
}
function handleChange3({ value }) {
function handleChange3({ value }: any) {
console.log(value)
}
function handleChange4({ value }) {
function handleChange4({ value }: any) {
console.log(value)
}
function handleChange5({ value }) {
function handleChange5({ value }: any) {
console.log(value)
}
function handleChange6({ value }) {
function handleChange6({ value }: any) {
console.log(value)
}
function handleChange7({ value }) {
function handleChange7({ value }: any) {
console.log(value)
}
function handleChange8({ value }) {
function handleChange8({ value }: any) {
console.log(value)
}
function handleChange9({ value }) {
function handleChange9({ value }: any) {
console.log(value)
}
</script>

2
src/pages/notify/Index.vue
View File

@ -33,7 +33,7 @@
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { NotifyType } from '@/uni_modules/wot-design-uni/components/wd-notify/type'
import type { NotifyType } from '@/uni_modules/wot-design-uni/components/wd-notify/types'
import { useNotify } from '@/uni_modules/wot-design-uni'
let timer: ReturnType<typeof setTimeout>

2
src/pages/numberKeyboard/Index.vue
View File

@ -66,7 +66,7 @@ function showKeyBoard(index: number) {
visibleArr.forEach((item, i) => (i === index - 1 ? (item.value = true) : (item.value = false)))
}
const onInput = (value) => showToast(`${value}`)
const onInput = (value: string) => showToast(`${value}`)
const onDelete = () => showToast('删除')
</script>
<style lang="scss" scoped></style>

6
src/pages/pagination/Index.vue
View File

@ -21,13 +21,13 @@ const page3 = ref<number>(1)
const total3 = ref<number>(160)
const pageSize3 = ref<number>(20)
function handleChange1({ value }) {
function handleChange1({ value }: any) {
console.log(value)
}
function handleChange2({ value }) {
function handleChange2({ value }: any) {
console.log(value)
}
function handleChange3({ value }) {
function handleChange3({ value }: any) {
console.log(value)
}
</script>

18
src/pages/picker/Index.vue
View File

@ -40,11 +40,13 @@
</template>
<script lang="ts" setup>
import { useToast } from '@/uni_modules/wot-design-uni'
import type { ColumnItem, PickerViewColumnChange } from '@/uni_modules/wot-design-uni/components/wd-picker-view/types'
import type { PickerBeforeConfirm, PickerDisplayFormat } from '@/uni_modules/wot-design-uni/components/wd-picker/types'
import { ref } from 'vue'
const toast = useToast()
const district = {
const district: Record<string, Array<{ label: string; value: string }>> = {
0: [
{ label: '北京', value: '110000' },
{ label: '广东省', value: '440000' }
@ -111,8 +113,8 @@ const columns6 = ref([
const columns7 = ref(['选项1', '选项2', '选项3', '选项4', '选项5', '选项6', '选项7'])
const value7 = ref('')
const onChangeDistrict = (pickerView, value, columnIndex, resolve) => {
const item = value[columnIndex]
const onChangeDistrict: PickerViewColumnChange = (pickerView, value, columnIndex, resolve) => {
const item = (value as Record<string, any>[])[columnIndex]
if (columnIndex === 0) {
pickerView.setColumnData(1, district[item.value])
pickerView.setColumnData(2, district[district[item.value][0].value])
@ -122,19 +124,19 @@ const onChangeDistrict = (pickerView, value, columnIndex, resolve) => {
resolve()
}
const displayFormat = (items) => {
return items
const displayFormat: PickerDisplayFormat = (items) => {
return (items as ColumnItem[])
.map((item) => {
return item.label
})
.join('-')
}
const beforeConfirm = (value, resolve, picker) => {
const beforeConfirm: PickerBeforeConfirm = (value, resolve, picker) => {
picker.setLoading(true)
setTimeout(() => {
picker.setLoading(false)
if (['选项2', '选项3'].indexOf(value) > -1) {
if (['选项2', '选项3'].indexOf(value as string) > -1) {
resolve(false)
toast.error('选项校验不通过，请重新选择')
} else {
@ -143,7 +145,7 @@ const beforeConfirm = (value, resolve, picker) => {
}, 2000)
}
function handleConfirm({ value }) {
function handleConfirm({ value }: any) {
value8.value = value
}
</script>

12
src/pages/pickerView/Index.vue
View File

@ -1,6 +1,5 @@
<template>
<page-wraper>
<wd-toast />
<demo-block :title="`基本用法，数值: ${value1}`">
<wd-picker-view v-model="value1" :columns="columns1" @change="(e) => onChange(1, e)" />
</demo-block>
@ -23,11 +22,10 @@
</page-wraper>
</template>
<script lang="ts" setup>
import { useToast } from '@/uni_modules/wot-design-uni'
import type { PickerViewColumnChange } from '@/uni_modules/wot-design-uni/components/wd-picker-view/types'
import { ref } from 'vue'
const toast = useToast()
const district = {
const district: Record<string, Array<{ label: string; value: string }>> = {
0: [
{ label: '北京', value: '110000' },
{ label: '广东省', value: '440000' }
@ -97,8 +95,8 @@ const columns4 = ref([
const value5 = ref(['110000', '110100', '110102'])
const columns5 = ref([district[0], district[district[0][0].value], district[district[district[0][0].value][0].value]])
const onChangeDistrict = (picker, value, columnIndex, resolve) => {
const item = value[columnIndex]
const onChangeDistrict: PickerViewColumnChange = (picker, value, columnIndex, resolve) => {
const item = (value as Record<string, any>[])[columnIndex]
if (columnIndex === 0) {
picker.setColumnData(1, district[item.value])
picker.setColumnData(2, district[district[item.value][0].value])
@ -108,7 +106,7 @@ const onChangeDistrict = (picker, value, columnIndex, resolve) => {
resolve()
}
function onChange(index: number, e) {
function onChange(index: number, e: any) {
console.log(e)
if (index === 1) {
// toast.show(`当前选中项: ${value}, 下标: ${index}`)

8
src/pages/popover/Index.vue
View File

@ -64,7 +64,7 @@ const menu = ref<Array<Record<string, any>>>([
}
])
function link(e) {
function link(e: any) {
toast.show('选择了' + e.item.content)
}
@ -75,14 +75,14 @@ function showPop(index: number) {
// pop = selectComponent('#' + id)
}
function handleChange1(event) {
function handleChange1() {
// show1.value = event.detail.show
}
function handleChange2(event) {
function handleChange2() {
// show2.value = event.detail.show
}
function handleChange3(event) {
function handleChange3() {
// show3.value = event.detail.show
}
</script>

9
src/pages/popup/Index.vue
View File

@ -1,12 +1,3 @@
<!--
* @Author: weisheng
* @Date: 2023-08-01 11:12:05
* @LastEditTime: 2023-10-13 18:45:34
* @LastEditors: weisheng
* @Description:
* @FilePath: \wot-design-uni\src\pages\popup\Index.vue
* 记得注释
-->
<template>
<page-meta :page-style="`overflow:${show10 ? 'hidden' : 'visible'};`"></page-meta>
<view>

2
src/pages/radio/Index.vue
View File

@ -127,7 +127,7 @@ const value9 = ref<number>(1)
const value10 = ref<number>(1)
const value11 = ref<number>(1)
function change(e) {
function change(e: any) {
console.log(e)
}
</script>

8
src/pages/rate/Index.vue
View File

@ -1,10 +1,10 @@
<!--
* @Author: weisheng
* @Date: 2023-07-29 17:03:39
* @LastEditTime: 2023-08-07 20:28:16
* @LastEditTime: 2024-03-17 20:19:52
* @LastEditors: weisheng
* @Description:
* @FilePath: \wot-design-uni\src\pages\rate\Index.vue
* @FilePath: /wot-design-uni/src/pages/rate/Index.vue
* 记得注释
-->
<template>
@ -54,10 +54,10 @@ const value5 = ref<number>(4)
const value6 = ref<number>(3)
const value7 = ref<number>(5)
function changeValue1({ value }) {
function changeValue1({ value }: any) {
console.log(value)
}
function changeValue2({ value }) {
function changeValue2({ value }: any) {
console.log(value)
}
</script>

6
src/pages/search/Index.vue
View File

@ -78,7 +78,7 @@ const menu = ref([
}
])
function search(e) {
function search(e: any) {
uni.showToast({ title: '搜索' + e.value })
}
function clear() {
@ -87,10 +87,10 @@ function clear() {
function cancel() {
uni.showToast({ title: '取消' })
}
function change(e) {
function change(e: any) {
console.log(e.value)
}
function changeSearchType({ item, index }) {
function changeSearchType({ item, index }: any) {
// this.setData({
// searchType: e.detail.item.content
// })

49
src/pages/selectPicker/Index.vue
View File

@ -40,6 +40,7 @@
</template>
<script lang="ts" setup>
import { useToast } from '@/uni_modules/wot-design-uni'
import type { SelectPickerBeforeConfirm, SelectPickerDisplayFormat } from '@/uni_modules/wot-design-uni/components/wd-select-picker/types'
import { ref } from 'vue'
const columns1 = ref<Record<string, any>[]>([
@ -130,20 +131,20 @@ const customShow = ref<string>('奢侈品')
const toast = useToast()
const displayFormat = (items, columns) => {
const displayFormat: SelectPickerDisplayFormat = (items, columns) => {
let showValue = ''
columns.forEach((column) => {
items.forEach((item, index) => {
;(items as (string | number | boolean)[]).forEach((item, index) => {
if (column.value === item) {
showValue += `${item}: ${column.label} ${index + 1 < items.length ? '--' : ''} `
showValue += `${item}: ${column.label} ${index + 1 < (items as (string | number | boolean)[]).length ? '--' : ''} `
}
})
})
return showValue
}
const beforeConfirm = (value, resolve) => {
if (value.length > 0) {
const beforeConfirm: SelectPickerBeforeConfirm = (value, resolve) => {
if ((value as string[]).length > 0) {
toast.error('暂时无法选择商品')
resolve(false)
} else {
@ -151,61 +152,61 @@ const beforeConfirm = (value, resolve) => {
}
}
function handleChange({ value }) {
function handleChange({ value }: any) {
toast.show('选择了' + value)
}
function handleConfirm1({ value }) {
function handleConfirm1({ value }: any) {
console.log(value)
}
function handleConfirm2({ value }) {
function handleConfirm2({ value }: any) {
console.log(value)
}
function handleConfirm3({ value }) {
function handleConfirm3({ value }: any) {
console.log(value)
}
function handleConfirm4({ value }) {
function handleConfirm4({ value }: any) {
console.log(value)
}
function handleConfirm5({ value }) {
function handleConfirm5({ value }: any) {
console.log(value)
}
function handleConfirm6({ value }) {
function handleConfirm6({ value }: any) {
console.log(value)
}
function handleConfirm7({ value }) {
function handleConfirm7({ value }: any) {
console.log(value)
}
function handleConfirm8({ value }) {
function handleConfirm8({ value }: any) {
console.log(value)
}
function handleConfirm9({ value }) {
function handleConfirm9({ value }: any) {
console.log(value)
}
function handleConfirm10({ value }) {
function handleConfirm10({ value }: any) {
console.log(value)
}
function handleConfirm11({ value }) {
function handleConfirm11({ value }: any) {
console.log(value)
}
function handleConfirm12({ value }) {
function handleConfirm12({ value }: any) {
console.log(value)
}
function handleConfirm13({ value }) {
function handleConfirm13({ value }: any) {
console.log(value)
}
function handleConfirm14({ value }) {
function handleConfirm14({ value }: any) {
console.log(value)
}
function handleConfirm15({ value }) {
function handleConfirm15({ value }: any) {
console.log(value)
}
function handleConfirm16({ value }) {
function handleConfirm16({ value }: any) {
console.log(value)
}
function handleConfirm17({ value, selectedItems }) {
function handleConfirm17({ value, selectedItems }: any) {
console.log(value)
customShow.value = selectedItems
.map((item) => {
.map((item: any) => {
return item.label
})
.join(', ')

14
src/pages/sidebar/demo1.vue
View File

@ -1,10 +1,10 @@
<!--
* @Author: weisheng
* @Date: 2023-11-05 12:09:52
* @LastEditTime: 2023-11-05 22:23:03
* @LastEditTime: 2024-03-18 21:33:29
* @LastEditors: weisheng
* @Description:
* @FilePath: \wot-design-uni\src\pages\sidebar\demo1.vue
* @FilePath: /wot-design-uni/src/pages/sidebar/demo1.vue
* 记得注释
-->
<template>
@ -74,18 +74,16 @@ const categories = ref([
onMounted(() => {
getRect('.category', true).then((rects) => {
if (isArray(rects)) {
itemScrollTop.value = rects.map((item) => item.top || 0)
scrollTop.value = rects[active.value].top || 0
}
itemScrollTop.value = rects.map((item) => item.top || 0)
scrollTop.value = rects[active.value].top || 0
})
})
function handleChange({ value }) {
function handleChange({ value }: any) {
active.value = value
scrollTop.value = itemScrollTop.value[value]
}
function onScroll(e) {
function onScroll(e: any) {
const { scrollTop } = e.detail
const threshold = 50 // 下一个标题与顶部的距离
if (scrollTop < threshold) {

6
src/pages/sidebar/demo2.vue
View File

@ -1,10 +1,10 @@
<!--
* @Author: weisheng
* @Date: 2023-11-05 12:09:52
* @LastEditTime: 2023-11-05 22:22:15
* @LastEditTime: 2024-03-17 20:15:39
* @LastEditors: weisheng
* @Description:
* @FilePath: \wot-design-uni\src\pages\sidebar\demo2.vue
* @FilePath: /wot-design-uni/src/pages/sidebar/demo2.vue
* 记得注释
-->
<template>
@ -99,7 +99,7 @@ const categories = ref([
}
])
function handleChange({ value }) {
function handleChange({ value }: any) {
active.value = value
scrollTop.value = -1
nextTick(() => {

14
src/pages/sidebar/demo3.vue
View File

@ -1,10 +1,10 @@
<!--
* @Author: weisheng
* @Date: 2023-11-05 12:09:52
* @LastEditTime: 2023-11-05 22:21:45
* @LastEditTime: 2024-03-18 21:33:59
* @LastEditors: weisheng
* @Description:
* @FilePath: \wot-design-uni\src\pages\sidebar\demo3.vue
* @FilePath: /wot-design-uni/src/pages/sidebar/demo3.vue
* 记得注释
-->
<template>
@ -81,18 +81,16 @@ const categories = ref([
onMounted(() => {
getRect('.category', true).then((rects) => {
if (isArray(rects)) {
itemScrollTop.value = rects.map((item) => item.top || 0)
scrollTop.value = rects[active.value].top || 0
}
itemScrollTop.value = rects.map((item) => item.top || 0)
scrollTop.value = rects[active.value].top || 0
})
})
function handleChange({ value }) {
function handleChange({ value }: any) {
active.value = value
scrollTop.value = itemScrollTop.value[value]
}
function onScroll(e) {
function onScroll(e: any) {
const { scrollTop } = e.detail
const threshold = 50 // 下一个标题与顶部的距离
if (scrollTop < threshold) {

8
src/pages/sortButton/Index.vue
View File

@ -25,16 +25,16 @@ const value2 = ref<number>(0)
const value3 = ref<number>(0)
const value4 = ref<number>(0)
function handleChange1({ value }) {
function handleChange1({ value }: any) {
console.log(value)
}
function handleChange2({ value }) {
function handleChange2({ value }: any) {
console.log(value)
}
function handleChange3({ value }) {
function handleChange3({ value }: any) {
console.log(value)
}
function handleChange4({ value }) {
function handleChange4({ value }: any) {
console.log(value)
}
</script>

9
src/pages/swipeAction/Index.vue
View File

@ -103,14 +103,15 @@
</template>
<script lang="ts" setup>
import { useToast, useQueue } from '@/uni_modules/wot-design-uni'
import type { SwipeActionBeforeClose, SwipeActionStatus } from '@/uni_modules/wot-design-uni/components/wd-swipe-action/types'
const { closeOutside } = useQueue()
import { ref } from 'vue'
const toast = useToast()
const value = ref<string>('close')
const value = ref<SwipeActionStatus>('close')
const beforeClose = (reason, position) => {
const beforeClose: SwipeActionBeforeClose = (reason, position) => {
if (reason === 'click') {
toast.show(`${reason} ${position}导致滑动按钮关闭`)
} else {
@ -118,10 +119,10 @@ const beforeClose = (reason, position) => {
}
}
function changeState(position: string) {
function changeState(position: SwipeActionStatus) {
value.value = position
}
function handleClick({ value }) {
function handleClick({ value }: any) {
toast.show(`点击${value}关闭操作按钮`)
}
function handleAction(action: string) {

4
src/pages/swiper/Index.vue
View File

@ -99,10 +99,10 @@ const swiperList = ref([
'https://img.yzcdn.cn/vant/cat.jpeg',
'https://unpkg.com/wot-design-uni-assets/meng.jpg'
])
function handleClick(e) {
function handleClick(e: any) {
console.log(e)
}
function onChange(e) {
function onChange(e: any) {
console.log(e)
}
</script>

13
src/pages/switch/Index.vue
View File

@ -29,6 +29,7 @@
</template>
<script lang="ts" setup>
import { useMessage } from '@/uni_modules/wot-design-uni'
import type { SwitchBeforeChange } from '@/uni_modules/wot-design-uni/components/wd-switch/types'
import { ref } from 'vue'
const checked1 = ref<boolean>(true)
@ -41,7 +42,7 @@ const checked7 = ref<boolean>(false)
const message = useMessage()
const beforeChange = ({ value, resolve }) => {
const beforeChange: SwitchBeforeChange = ({ value, resolve }) => {
message
.confirm('是否切换开关')
.then(() => {
@ -51,19 +52,19 @@ const beforeChange = ({ value, resolve }) => {
resolve(false)
})
}
function handleChange1({ value }) {
function handleChange1({ value }: any) {
console.log(value)
}
function handleChange2({ value }) {
function handleChange2({ value }: any) {
console.log(value)
}
function handleChange3({ value }) {
function handleChange3({ value }: any) {
console.log(value)
}
function handleChange4({ value }) {
function handleChange4({ value }: any) {
console.log(value)
}
function handleChange5({ value }) {
function handleChange5({ value }: any) {
console.log(value)
}
</script>

4
src/pages/table/Index.vue
View File

@ -219,11 +219,11 @@ const dataList = ref<Record<string, any>[]>([
* 排序
* @param e
*/
function doSort(e) {
function doSort() {
dataList.value = dataList.value.reverse()
}
function handleRowClick({ rowIndex }) {
function handleRowClick({ rowIndex }: any) {
console.log(rowIndex)
}
</script>

4
src/pages/tabs/Index.vue
View File

@ -109,11 +109,11 @@ const tab6 = ref<number>(0)
const tab7 = ref<number>(0)
const tab8 = ref<number>(0)
const toast = useToast()
function handleClick({ index, name }) {
function handleClick({ index, name }: any) {
console.log('event', { index, name })
toast.show(`点击了标签${name}`)
}
function handleChange(event) {
function handleChange(event: any) {
console.log('change', event)
}
</script>

8
src/pages/tag/Index.vue
View File

@ -127,19 +127,19 @@ const tags = ref([
])
const dynamicTags = ref(['标签一', '标签二'])
function handleClick(index) {
function handleClick(index: number) {
console.log('click:index' + index)
}
function handleClose(order) {
function handleClose(order: number) {
tags.value = tags.value.filter((value, index) => index !== order)
console.log('close:index' + order)
}
function handleClose1(order) {
function handleClose1(order: number) {
dynamicTags.value = dynamicTags.value.filter((item, index) => {
return index !== order
})
}
function handleConfirm({ value }) {
function handleConfirm({ value }: any) {
if (!value) return
dynamicTags.value = [...dynamicTags.value, value]
}

68
src/pages/tooltip/Index.vue
View File

@ -136,56 +136,56 @@ function onShow() {
function onHide() {
toast.show('文字提示关闭')
}
function handleChange1(event) {
// this.setData({ show1: event.detail.show })
function handleChange1(event: any) {
console.log(event)
}
function handleChange2(event) {
// this.setData({ show2: event.detail.show })
function handleChange2(event: any) {
console.log(event)
}
function handleChange3(event) {
// this.setData({ show3: event.detail.show })
function handleChange3(event: any) {
console.log(event)
}
function handleChange4(event) {
// this.setData({ show4: event.detail.show })
function handleChange4(event: any) {
console.log(event)
}
function handleChange5(event) {
// this.setData({ show5: event.detail.show })
function handleChange5(event: any) {
console.log(event)
}
function handleChange6(event) {
// this.setData({ show6: event.detail.show })
function handleChange6(event: any) {
console.log(event)
}
function handleChange7(event) {
// this.setData({ show7: event.detail.show })
function handleChange7(event: any) {
console.log(event)
}
function handleChange8(event) {
// this.setData({ show8: event.detail.show })
function handleChange8(event: any) {
console.log(event)
}
function handleChange9(event) {
// this.setData({ show9: event.detail.show })
function handleChange9(event: any) {
console.log(event)
}
function handleChange10(event) {
// this.setData({ show10: event.detail.show })
function handleChange10(event: any) {
console.log(event)
}
function handleChange11(event) {
// this.setData({ show11: event.detail.show })
function handleChange11(event: any) {
console.log(event)
}
function handleChange12(event) {
// this.setData({ show12: event.detail.show })
function handleChange12(event: any) {
console.log(event)
}
function handleChange13(event) {
// this.setData({ show13: event.detail.show })
function handleChange13(event: any) {
console.log(event)
}
function handleChange14(event) {
// this.setData({ show14: event.detail.show })
function handleChange14(event: any) {
console.log(event)
}
function handleChange15(event) {
// this.setData({ show15: event.detail.show })
function handleChange15(event: any) {
console.log(event)
}
function handleChange16(event) {
// this.setData({ show16: event.detail.show })
function handleChange16(event: any) {
console.log(event)
}
function handleChange17(event) {
// this.setData({ show17: event.detail.show })
function handleChange17(event: any) {
console.log(event)
}
</script>
<style lang="scss" scoped>

2
src/pages/transition/Index.vue
View File

@ -80,7 +80,7 @@ function custom() {
customShow.value = false
}, 1200)
}
function transition(transition) {
function transition(transition: string) {
name.value = transition
show.value = true
setTimeout(() => {

62
src/pages/upload/Index.vue
View File

@ -65,20 +65,20 @@ const fileList2 = ref<any[]>([
url: 'https://img12.360buyimg.com//n0/jfs/t1/29118/6/4823/55969/5c35c16bE7c262192/c9fdecec4b419355.jpg'
}
])
const fileList3 = ref<Record<string, any>[]>([])
const fileList4 = ref<Record<string, any>[]>([])
const fileList5 = ref<Record<string, any>[]>([])
const fileList6 = ref<Record<string, any>[]>([])
const fileList7 = ref<Record<string, any>[]>([])
const fileList8 = ref<Record<string, any>[]>([])
const fileList9 = ref<Record<string, any>[]>([])
const fileList10 = ref<Record<string, any>[]>([])
const fileList11 = ref<Record<string, any>[]>([])
const fileList3 = ref([])
const fileList4 = ref([])
const fileList5 = ref([])
const fileList6 = ref([])
const fileList7 = ref([])
const fileList8 = ref([])
const fileList9 = ref([])
const fileList10 = ref([])
const fileList11 = ref([])
const messageBox = useMessage()
const toast = useToast()
const beforeChoose = (file, resolve) => {
const beforeChoose = ({ file, resolve }: any) => {
messageBox
.confirm({
msg: '是否选择',
@ -92,7 +92,7 @@ const beforeChoose = (file, resolve) => {
})
}
const beforePreview = ({ file, resolve }) => {
const beforePreview = ({ resolve }: any) => {
messageBox
.confirm({
msg: '是否预览图片',
@ -105,7 +105,7 @@ const beforePreview = ({ file, resolve }) => {
toast.show('取消预览操作')
})
}
const beforeUpload = ({ files, resolve }) => {
const beforeUpload = ({ files, resolve }: any) => {
messageBox
.confirm({
msg: '是否上传',
@ -119,7 +119,7 @@ const beforeUpload = ({ files, resolve }) => {
toast.show('取消上传操作')
})
}
const beforeRemove = ({ file, fileList, resolve }) => {
const beforeRemove = ({ file, fileList, resolve }: any) => {
messageBox
.confirm({
msg: '是否删除',
@ -134,7 +134,7 @@ const beforeRemove = ({ file, fileList, resolve }) => {
})
}
const buildFormData = ({ file, formData, resolve }) => {
const buildFormData = ({ file, formData, resolve }: any) => {
let imageName = file.url.substring(file.url.lastIndexOf('/') + 1)
// #ifdef H5
// h5端url中不包含扩展名，可以拼接一下name
@ -157,56 +157,56 @@ const buildFormData = ({ file, formData, resolve }) => {
resolve(formData)
}
const handleSuccess1 = (res) => {
const handleSuccess1 = (res: any) => {
console.log('成功', res)
}
const handleFail1 = (res) => {
const handleFail1 = (res: any) => {
console.log('失败', res)
}
const handleProgess1 = (res) => {
const handleProgess1 = (res: any) => {
console.log('加载中', res)
}
function handleSuccess(event) {
function handleSuccess(event: any) {
console.log('成功', event)
}
function handleFail(event) {
function handleFail(event: any) {
console.log('失败', event)
}
function handleProgess(event) {
function handleProgess(event: any) {
console.log('加载中', event)
}
function handleChange1({ fileList }) {
function handleChange1({ fileList }: any) {
fileList1.value = fileList
}
function handleChange2({ fileList }) {
function handleChange2({ fileList }: any) {
fileList2.value = fileList
}
function handleChange3({ fileList }) {
function handleChange3({ fileList }: any) {
fileList3.value = fileList
}
function handleChange4({ fileList }) {
function handleChange4({ fileList }: any) {
fileList4.value = fileList
}
function handleChange5({ fileList }) {
function handleChange5({ fileList }: any) {
fileList5.value = fileList
}
function handleChange6({ fileList }) {
function handleChange6({ fileList }: any) {
fileList6.value = fileList
}
function handleChange7({ fileList }) {
function handleChange7({ fileList }: any) {
fileList7.value = fileList
}
function handleChange8({ fileList }) {
function handleChange8({ fileList }: any) {
fileList8.value = fileList
}
function handleChange9({ fileList }) {
function handleChange9({ fileList }: any) {
fileList9.value = fileList
}
function handleChange10({ fileList }) {
function handleChange10({ fileList }: any) {
fileList10.value = fileList
}
function handleChange11({ fileList }) {
function handleChange11({ fileList }: any) {
fileList11.value = fileList
}
</script>

2
src/uni_modules/wot-design-uni/changelog.md
View File

@ -658,7 +658,7 @@
### ✨ Features | 新功能
* ✨ 新增 Table 表格组件 ([#98](https://github.com/Moonofweisheng/wot-design-uni/issues/98)) ([c8395f8](https://github.com/Moonofweisheng/wot-design-uni/commit/c8395f8a7e1ad041b003672081b715a7c755adc1))
* ✨ Collpase 折叠面板组件增加分割线 ([adc6633](https://github.com/Moonofweisheng/wot-design-uni/commit/adc6633ad80b74e801a48a50917c9a2d378de9e0)), closes [#97](https://github.com/Moonofweisheng/wot-design-uni/issues/97)
* ✨ Collapse 折叠面板组件增加分割线 ([adc6633](https://github.com/Moonofweisheng/wot-design-uni/commit/adc6633ad80b74e801a48a50917c9a2d378de9e0)), closes [#97](https://github.com/Moonofweisheng/wot-design-uni/issues/97)
### [0.1.38](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.37...v0.1.38) (2023-10-25)

20
src/uni_modules/wot-design-uni/components/common/base64.ts
View File

@ -1,6 +1,6 @@
const _b64chars = [...'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/']
const _mkUriSafe = (src) => src.replace(/[+/]/g, (m0) => (m0 === '+' ? '-' : '_')).replace(/=+$/m, '')
const fromUint8Array = (src, rfc4648 = false) => {
const _b64chars: string[] = [...'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/']
const _mkUriSafe = (src: string): string => src.replace(/[+/]/g, (m0: string) => (m0 === '+' ? '-' : '_')).replace(/=+\$/m, '')
const fromUint8Array = (src: Uint8Array, rfc4648 = false): string => {
let b64 = ''
for (let i = 0, l = src.length; i < l; i += 3) {
const [a0, a1, a2] = [src[i], src[i + 1], src[i + 2]]
@ -12,18 +12,18 @@ const fromUint8Array = (src, rfc4648 = false) => {
}
return rfc4648 ? _mkUriSafe(b64) : b64
}
const _btoa =
const _btoa: (s: string) => string =
typeof btoa === 'function'
? (s) => btoa(s)
: (s) => {
if (s.charCodeAt() > 255) {
? (s: string) => btoa(s)
: (s: string) => {
if (s.charCodeAt(0) > 255) {
throw new RangeError('The string contains invalid characters.')
}
return fromUint8Array(Uint8Array.from(s, (c: any) => c.charCodeAt(0)))
return fromUint8Array(Uint8Array.from(s, (c: string) => c.charCodeAt(0)))
}
const utob = (src) => unescape(encodeURIComponent(src))
const utob = (src: string): string => unescape(encodeURIComponent(src))
export default function encode(src, rfc4648 = false) {
export default function encode(src: string, rfc4648 = false): string {
const b64 = _btoa(utob(src))
return rfc4648 ? _mkUriSafe(b64) : b64
}

10
src/uni_modules/wot-design-uni/components/common/clickoutside.ts
View File

@ -1,25 +1,25 @@
/*
* @Author: weisheng
* @Date: 2023-07-02 22:51:06
* @LastEditTime: 2023-07-13 10:07:17
* @LastEditTime: 2024-03-16 19:59:07
* @LastEditors: weisheng
* @Description:
* @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\common\clickoutside.ts
* @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/common/clickoutside.ts
* 记得注释
*/
let queue: any[] = []
export function pushToQueue(comp) {
export function pushToQueue(comp: any) {
queue.push(comp)
}
export function removeFromQueue(comp) {
export function removeFromQueue(comp: any) {
queue = queue.filter((item) => {
return item.$.uid !== comp.$.uid
})
}
export function closeOther(comp) {
export function closeOther(comp: any) {
queue.forEach((item) => {
if (item.$.uid !== comp.$.uid) {
item.$.exposed.close()

16
src/uni_modules/wot-design-uni/components/common/dayjs.ts
View File

@ -11,7 +11,7 @@ class Dayjs {
mHour: any
mMinute: any
mSecond: any
constructor(dateStr) {
constructor(dateStr?: string | number | Date) {
this.utc = false
const parsedDate = this.parseConfig(dateStr)
this.date = new Date(parsedDate)
@ -26,17 +26,17 @@ class Dayjs {
this.mSecond = this.date.getSeconds()
}
parseConfig(dateStr) {
parseConfig(dateStr?:string | number | Date) {
if (!dateStr) return new Date()
if (dateStr instanceof Date) return dateStr
if (/^(\d){8}$/.test(dateStr)) {
if (/^(\d){8}$/.test(dateStr as string)) {
this.utc = true
return `${dateStr.substr(0, 4)}-${dateStr.substr(4, 2)}-${dateStr.substr(6, 2)}`
return `${(dateStr as string).substr(0, 4)}-${(dateStr as string).substr(4, 2)}-${(dateStr as string).substr(6, 2)}`
}
return dateStr
}
padNumber(num, length, padChar) {
padNumber(num:string, length:number, padChar:string) {
return !num || num.length >= length ? num : `${Array(length + 1 - num.length).join(padChar)}${num}`
}
@ -57,7 +57,7 @@ class Dayjs {
return this.date.toUTCString()
}
startOf(unit) {
startOf(unit:string) {
switch (unit) {
case 'year':
return new Dayjs(new Date(this.year(), 0, 1))
@ -68,7 +68,7 @@ class Dayjs {
}
}
add(amount, unit) {
add(amount:number, unit:string) {
let interval
switch (unit) {
case 'm':
@ -94,7 +94,7 @@ class Dayjs {
return new Dayjs(1000 * newUnixTime)
}
subtract(amount, unit) {
subtract(amount:number, unit:string) {
return this.add(-1 * amount, unit)
}

8
src/uni_modules/wot-design-uni/components/common/event.ts Normal file
View File

@ -0,0 +1,8 @@
export const UPDATE_MODEL_EVENT = 'update:modelValue'
export const CHANGE_EVENT = 'change'
export const INPUT_EVENT = 'input'
export const CLICK_EVENT = 'click'
export const CLOSE_EVENT = 'close'
export const OPEN_EVENT = 'open'
export const CONFIRM_EVENT = 'confirm'
export const CANCEL_EVENT = 'cancel'

51
src/uni_modules/wot-design-uni/components/common/props.ts Normal file
View File

@ -0,0 +1,51 @@
import type { PropType } from 'vue'
export const unknownProp = null as unknown as PropType<unknown>
export const numericProp = [Number, String]
export const truthProp = {
type: Boolean,
default: true as const
}
export const makeRequiredProp = <T>(type: T) => ({
type,
required: true as const
})
export const makeArrayProp = <T>() => ({
type: Array as PropType<T[]>,
default: () => []
})
export const makeBooleanProp = <T>(defaultVal: T) => ({
type: Boolean,
default: defaultVal
})
export const makeNumberProp = <T>(defaultVal: T) => ({
type: Number,
default: defaultVal
})
export const makeNumericProp = <T>(defaultVal: T) => ({
type: numericProp,
default: defaultVal
})
export const makeStringProp = <T>(defaultVal: T) => ({
type: String as unknown as PropType<T>,
default: defaultVal
})
export const baseProps = {
/**
* 自定义根节点样式
*/
customStyle: makeStringProp(''),
/**
* 自定义根节点样式类
*/
customClass: makeStringProp('')
}

30
src/uni_modules/wot-design-uni/components/common/util.ts
View File

@ -226,15 +226,17 @@ export const context = {
id: 1000
}
export type RectResultType<T extends boolean> = T extends true ? UniApp.NodeInfo[] : UniApp.NodeInfo
/**
* 获取节点信息
* @param selector 节点 #id,.class
* @param selector 节点选择器 #id,.class
* @param all 是否返回所有 selector 对应的节点
* @param scope 作用域（支付宝小程序无效）
* @returns
* @returns 节点信息或节点信息数组
*/
export function getRect(selector: string, all: boolean = false, scope?: any) {
return new Promise<UniApp.NodeInfo | UniApp.NodeInfo[]>((resolve) => {
export function getRect<T extends boolean>(selector: string, all: T, scope?: any): Promise<RectResultType<T>> {
return new Promise<RectResultType<T>>((resolve, reject) => {
let query: UniNamespace.SelectorQuery | null = null
if (scope) {
query = uni.createSelectorQuery().in(scope)
@ -243,11 +245,12 @@ export function getRect(selector: string, all: boolean = false, scope?: any) {
}
query[all ? 'selectAll' : 'select'](selector)
.boundingClientRect((rect) => {
if (all && Array.isArray(rect) && rect.length) {
resolve(rect)
}
if (!all && rect) {
resolve(rect)
if (all && isArray(rect) && rect.length > 0) {
resolve(rect as RectResultType<T>)
} else if (!all && rect) {
resolve(rect as RectResultType<T>)
} else {
reject(new Error('No nodes found'))
}
})
.exec()
@ -374,7 +377,7 @@ export function isBase64Image(url: string) {
* @param {object | object[]} styles 外部传入的样式对象或数组
* @returns {string} 格式化后的 CSS 样式字符串
*/
export function objToStyle(styles: object | object[]): string {
export function objToStyle(styles: Record<string, any> | Record<string, any>[]): string {
// 如果 styles 是数组类型
if (isArray(styles)) {
// 使用过滤函数去除空值和 null 值的元素
@ -633,3 +636,10 @@ export const getPropByPath = (obj: any, path: string): any => {
return undefined
}
}
/**
* 检查一个值是否为Date类型
* @param val 要检查的值
* @returns 如果值是Date类型，则返回true，否则返回false
*/
export const isDate = (val: unknown): val is Date => Object.prototype.toString.call(val) === '[object Date]' && !Number.isNaN((val as Date).getTime())

24
src/uni_modules/wot-design-uni/components/composables/usePopover.ts
View File

@ -47,26 +47,22 @@ export function usePopover() {
}
// 初始化数据获取
getRect('#target', false, proxy).then((rect: any) => {
getRect('#target', false, proxy).then((rect) => {
if (!rect) return
left.value = rect.left
bottom.value = rect.bottom
width.value = rect.width
height.value = rect.height
top.value = rect.top
left.value = rect.left as number
bottom.value = rect.bottom as number
width.value = rect.width as number
height.value = rect.height as number
top.value = rect.top as number
})
// 用透明度可在初始化时获取到pop尺寸
getRect('#pos', false, proxy).then((rect: any) => {
getRect('#pos', false, proxy).then((rect) => {
if (!rect) return
popWidth.value = rect.width
popHeight.value = rect.height
popWidth.value = rect.width as number
popHeight.value = rect.height as number
})
}
function checkType(value) {
return Object.prototype.toString.call(value).slice(8, -1)
}
function control(
placement:
| 'top'
@ -164,5 +160,5 @@ export function usePopover() {
arrowStyle.value = placements.get(placement)![1]
}
return { popStyle, arrowStyle, showStyle, arrowClass, init, control, noop, checkType }
return { popStyle, arrowStyle, showStyle, arrowClass, init, control, noop }
}

4
src/uni_modules/wot-design-uni/components/composables/useTouch.ts
View File

@ -9,7 +9,7 @@ export function useTouch() {
const startX = ref<number>(0)
const startY = ref<number>(0)
function touchStart(event) {
function touchStart(event: any) {
const touch = event.touches[0]
direction.value = ''
deltaX.value = 0
@ -20,7 +20,7 @@ export function useTouch() {
startY.value = touch.clientY
}
function touchMove(event) {
function touchMove(event: any) {
const touch = event.touches[0]
deltaX.value = touch.clientX - startX.value
deltaY.value = touch.clientY - startY.value

112
src/uni_modules/wot-design-uni/components/wd-action-sheet/types.ts Normal file
View File

@ -0,0 +1,112 @@
/*
* @Author: weisheng
* @Date: 2024-03-18 11:22:03
* @LastEditTime: 2024-03-18 13:17:22
* @LastEditors: weisheng
* @Description:
* @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-action-sheet\types.ts
* 记得注释
*/
import type { ExtractPropTypes } from 'vue'
import { baseProps, makeArrayProp, makeBooleanProp, makeRequiredProp, makeStringProp } from '../common/props'
export type Action = {
/**
* 选项名称
*/
name: string
/**
* 描述信息
*/
subname: string
/**
* 颜色
*/
color: string
/**
* 禁用
*/
disabled: boolean
/**
* 加载中状态
*/
loading: boolean
}
export type Panel = {
/**
* 图片地址
*/
iconUrl: string
/**
* 标题内容
*/
title: string
}
export const actionSheetProps = {
...baseProps,
/**
* header 头部样式
*/
customHeaderClass: makeStringProp(''),
/**
* 设置菜单显示隐藏
*/
modelValue: { ...makeBooleanProp(false), ...makeRequiredProp(Boolean) },
/**
* 菜单选项
*/
actions: makeArrayProp<Action>(),
/**
* 自定义面板项,可以为字符串数组，也可以为对象数组，如果为二维数组，则为多行展示
*/
panels: makeArrayProp<Panel | Panel[]>(),
/**
* 标题
*/
title: String,
/**
* 取消按钮文案
*/
cancelText: String,
/**
* 点击选项后是否关闭菜单
*/
closeOnClickAction: Boolean,
/**
* 点击遮罩是否关闭
*/
closeOnClickModal: Boolean,
/**
* 弹框动画持续时间
*/
duration: Number,
/**
* 菜单层级
*/
zIndex: Number,
/**
* 弹层内容懒渲染，触发展示时才渲染内容
*/
lazyRender: Boolean,
/**
* 弹出面板是否设置底部安全距离（iphone X 类型的机型）
*/
safeAreaInsetBottom: Boolean
}
export type ActionSheetProps = ExtractPropTypes<typeof actionSheetProps>
// export type SelectPanelOption = {
// item: Panel | Action
// index?: number
// rowIndex?: number
// colIndex?: number
// }
// export const actionSheetEmits = {
// [UPDATE_MODEL_EVENT]: (newValue: boolean) => isBoolean(newValue),
// select: (option: SelectPanelOption) => option !== undefined
// }
// export type ActionSheetEmits = typeof actionSheetEmits

59
src/uni_modules/wot-design-uni/components/wd-action-sheet/wd-action-sheet.vue
View File

@ -72,59 +72,10 @@ export default {
<script lang="ts" setup>
import { watch, ref } from 'vue'
import { actionSheetProps, type Panel } from './types'
interface Action {
// 选项名称
name: string
// 描述信息
subname: string
// 颜色
color: string
// 禁用
disabled: boolean
// 加载中状态
loading: boolean
}
interface Panel {
// 图片地址
iconUrl: string
// 标题内容
title: string
}
interface Props {
customClass?: string
customHeaderClass?: string
customStyle?: string
modelValue: boolean
actions?: Array<Action>
panels?: Array<Panel>
title?: string
cancelText?: string
closeOnClickAction?: boolean
closeOnClickModal?: boolean
duration?: number
zIndex?: number
lazyRender?: boolean
safeAreaInsetBottom?: boolean
}
const props = withDefaults(defineProps<Props>(), {
customClass: '',
customHeaderClass: '',
customStyle: '',
modelValue: false,
actions: () => [] as Array<Action>,
panels: () => [] as Array<Panel>,
closeOnClickAction: true,
closeOnClickModal: true,
duration: 200,
zIndex: 10,
lazyRender: true,
safeAreaInsetBottom: true
})
const formatPanels = ref<Array<Panel> | Array<Array<Panel>>>([])
const props = defineProps(actionSheetProps)
const formatPanels = ref<Array<Panel> | Array<Panel[]>>([])
const showPopup = ref<boolean>(false)
@ -144,7 +95,7 @@ function isArray() {
return props.panels.length && !(props.panels[0] instanceof Array)
}
function computedValue() {
formatPanels.value = isArray() ? [props.panels] : props.panels
formatPanels.value = isArray() ? [props.panels as Panel[]] : (props.panels as Panel[][])
}
function select(rowIndex: number, type: 'action' | 'panels', colIndex?: number) {
@ -160,7 +111,7 @@ function select(rowIndex: number, type: 'action' | 'panels', colIndex?: number)
})
} else {
emit('select', {
item: props.panels[rowIndex][Number(colIndex)],
item: (props.panels as Panel[][])[rowIndex][Number(colIndex)],
rowIndex,
colIndex
})

50
src/uni_modules/wot-design-uni/components/wd-badge/types.ts Normal file
View File

@ -0,0 +1,50 @@
/*
* @Author: weisheng
* @Date: 2024-03-15 11:36:12
* @LastEditTime: 2024-03-18 13:19:32
* @LastEditors: weisheng
* @Description:
* @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-badge\types.ts
* 记得注释
*/
import type { ExtractPropTypes } from 'vue'
import { baseProps, makeBooleanProp, makeNumericProp, makeStringProp } from '../common/props'
export type BadgeType = 'primary' | 'success' | 'warning' | 'danger' | 'info'
export const badgeProps = {
...baseProps,
/**
* 显示值
*/
modelValue: makeNumericProp(null),
/** 当数值为 0 时，是否展示徽标 */
showZero: makeBooleanProp(false),
bgColor: String,
/**
* 最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型
*/
max: Number,
/**
* 是否为红色点状标注
*/
isDot: Boolean,
/**
* 是否隐藏 badge
*/
hidden: Boolean,
/**
* badge类型，可选值primary / success / warning / danger / info
*/
type: makeStringProp<BadgeType | undefined>(undefined),
/**
* 为正时，角标向下偏移对应的像素
*/
top: Number,
/**
* 为正时，角标向左偏移对应的像素
*/
right: Number
}
export type BadgeProps = ExtractPropTypes<typeof badgeProps>

33
src/uni_modules/wot-design-uni/components/wd-badge/wd-badge.vue
View File

@ -1,12 +1,3 @@
<!--
* @Author: weisheng
* @Date: 2023-06-12 18:40:59
* @LastEditTime: 2024-03-08 23:55:25
* @LastEditors: weisheng
* @Description:
* @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-badge/wd-badge.vue
* 记得注释
-->
<template>
<view :class="['wd-badge', customClass]" :style="customStyle">
<slot></slot>
@ -31,27 +22,9 @@ export default {
</script>
<script lang="ts" setup>
import { computed, ref, watch } from 'vue'
type BadgeType = 'primary' | 'success' | 'warning' | 'danger' | 'info'
interface Props {
modelValue?: number | string | null
/** 当数值为 0 时，是否展示徽标 */
showZero?: boolean
bgColor?: string
max?: number
isDot?: boolean
hidden?: boolean
type?: BadgeType
top?: number
right?: number
customClass?: string
customStyle?: string
}
const props = withDefaults(defineProps<Props>(), {
customClass: '',
customStyle: '',
modelValue: null,
showZero: false
})
import { badgeProps } from './types'
const props = defineProps(badgeProps)
const content = ref<number | string | null>(null)
watch(

97
src/uni_modules/wot-design-uni/components/wd-button/types.ts Normal file
View File

@ -0,0 +1,97 @@
/*
* @Author: weisheng
* @Date: 2024-03-15 11:36:12
* @LastEditTime: 2024-03-18 13:24:34
* @LastEditors: weisheng
* @Description:
* @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-button\types.ts
* 记得注释
*/
import type { ExtractPropTypes } from 'vue'
import { baseProps, makeBooleanProp, makeStringProp } from '../common/props'
export type ButtonType = 'primary' | 'success' | 'info' | 'warning' | 'error' | 'default' | 'text' | 'icon'
export type ButtonSize = 'small' | 'medium' | 'large'
export const buttonProps = {
...baseProps,
/**
* 幽灵按钮
*/
plain: makeBooleanProp(false),
/**
* 圆角按钮
*/
round: makeBooleanProp(true),
/**
* 禁用按钮
*/
disabled: makeBooleanProp(false),
/**
* 是否细边框
*/
hairline: makeBooleanProp(false),
/**
* 块状按钮
*/
block: makeBooleanProp(false),
/**
* 按钮类型，可选值：primary / success / info / warning / error / text / icon
*/
type: makeStringProp<ButtonType>('primary'),
/**
* 按钮尺寸，可选值：small / medium / large
*/
size: makeStringProp<ButtonSize>('medium'),
/**
* 图标类名
*/
icon: String,
/**
* 加载中按钮
*/
loading: makeBooleanProp(false),
/**
* 加载图标颜色
*/
loadingColor: String,
/**
* 开放能力
*/
openType: String,
formType: String,
/**
* 指定是否阻止本节点的祖先节点出现点击态
*/
hoverStopPropagation: Boolean,
/**
* 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文
*/
lang: String,
/**
* 会话来源，open-type="contact"时有效
*/
sessionFrom: String,
/**
* 会话内消息卡片标题，open-type="contact"时有效
*/
sendMessageTitle: String,
/**
* 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效
*/
sendMessagePath: String,
/**
* 会话内消息卡片图片，open-type="contact"时有效
*/
sendMessageImg: String,
/**
* 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效
*/
appParameter: String,
/**
* 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效
*/
showMessageCard: Boolean
}
export type ButtonProps = ExtractPropTypes<typeof buttonProps>

59
src/uni_modules/wot-design-uni/components/wd-button/wd-button.vue
View File

@ -59,6 +59,7 @@ export default {
import { computed, watch } from 'vue'
import { ref } from 'vue'
import base64 from '../common/base64'
import { buttonProps } from './types'
const loadingIcon = (color = '#4D80F0', reverse = true) => {
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42"><defs><linearGradient x1="100%" y1="0%" x2="0%" y2="0%" id="a"><stop stop-color="${
@ -69,45 +70,7 @@ const loadingIcon = (color = '#4D80F0', reverse = true) => {
reverse ? '#fff' : color
}"/><path d="M4.599 21c0 9.044 7.332 16.376 16.376 16.376 9.045 0 16.376-7.332 16.376-16.376" stroke="url(#a)" stroke-width="3.5" stroke-linecap="round"/></g></svg>`
}
type ButtonType = 'primary' | 'success' | 'info' | 'warning' | 'error' | 'default' | 'text' | 'icon'
type ButtonSize = 'small' | 'medium' | 'large'
interface Props {
plain?: boolean
disabled?: boolean
round?: boolean
hairline?: boolean
block?: boolean
type?: ButtonType
size?: ButtonSize
icon?: string
loading?: boolean
loadingColor?: string
openType?: string
formType?: string
hoverStopPropagation?: boolean
lang?: string
sessionFrom?: string
sendMessageTitle?: string
sendMessagePath?: string
sendMessageImg?: string
appParameter?: string
showMessageCard?: boolean
customClass?: string
customStyle?: string
}
const props = withDefaults(defineProps<Props>(), {
type: 'primary',
size: 'medium',
round: true,
plain: false,
loading: false,
hairline: false,
block: false,
disabled: false,
customClass: '',
customStyle: ''
})
const props = defineProps(buttonProps)
const hoverStartTime = ref<number>(20)
const hoverStayTime = ref<number>(70)
@ -137,41 +100,41 @@ const emit = defineEmits([
'agreeprivacyauthorization'
])
function handleClick(event) {
function handleClick(event: any) {
if (!props.disabled && !props.loading) {
emit('click', event.detail)
}
}
function handleGetuserinfo(event) {
function handleGetuserinfo(event: any) {
emit('getuserinfo', event.detail)
}
function handleConcat(event) {
function handleConcat(event: any) {
emit('contact', event.detail)
}
function handleGetphonenumber(event) {
function handleGetphonenumber(event: any) {
emit('getphonenumber', event.detail)
}
function handleError(event) {
function handleError(event: any) {
emit('error', event.detail)
}
function handleLaunchapp(event) {
function handleLaunchapp(event: any) {
emit('launchapp', event.detail)
}
function handleOpensetting(event) {
function handleOpensetting(event: any) {
emit('opensetting', event.detail)
}
function handleChooseavatar(event) {
function handleChooseavatar(event: any) {
emit('chooseavatar', event.detail)
}
function handleAgreePrivacyAuthorization(event) {
function handleAgreePrivacyAuthorization(event: any) {
emit('agreeprivacyauthorization', event.detail)
}
function buildLoadingSvg() {

87
src/uni_modules/wot-design-uni/components/wd-calendar-view/month/month.vue
View File

@ -8,7 +8,7 @@
<view
v-for="(item, index) in days"
:key="index"
:class="`wd-month__day ${item.disabled ? 'is-disabled' : ''} ${item.type ? itemClass(item.type, value, type) : ''}`"
:class="`wd-month__day ${item.disabled ? 'is-disabled' : ''} ${item.type ? itemClass(item.type, value!, type) : ''}`"
:style="firstDayStyle(index, item.date, firstDayOfWeek)"
@click="handleDateClick(index)"
>
@ -52,37 +52,23 @@ import {
import { useToast } from '../../wd-toast'
import { deepClone, getType, isArray } from '../../common/util'
import { useTranslate } from '../../composables/useTranslate'
import type { CalendarDayItem, CalendarDayType, CalendarType } from '../types'
import { monthProps } from './types'
interface Props {
type: string
date: number
value: null | number | Array<number>
minDate: number
maxDate: number
firstDayOfWeek: number
// eslint-disable-next-line @typescript-eslint/ban-types
formatter?: Function
maxRange?: number
rangePrompt?: string
allowSameDay?: boolean
defaultTime: Array<number>
}
const props = withDefaults(defineProps<Props>(), {
allowSameDay: false
})
const props = defineProps(monthProps)
const { translate } = useTranslate('calendar-view')
const days = ref<Array<Record<string, any>>>([])
const days = ref<Array<CalendarDayItem>>([])
const itemClass = computed(() => {
return (monthType, value, type) => {
return (monthType: CalendarDayType, value: number | (number | null)[], type: CalendarType) => {
return getItemClass(monthType, value, type)
}
})
const monthTitle = computed(() => {
return (date) => {
return (date: number) => {
return formatMonthTitle(date)
}
})
@ -108,7 +94,7 @@ const toast = useToast('wd-month')
const emit = defineEmits(['change'])
function setDays() {
const dayList: Array<Record<string, any>> = []
const dayList: Array<CalendarDayItem> = []
const date = new Date(props.date)
const year = date.getFullYear()
const month = date.getMonth()
@ -120,7 +106,7 @@ function setDays() {
for (let day = 1; day <= totalDay; day++) {
const date = new Date(year, month, day).getTime()
let type = getDayType(date, value)
let type: CalendarDayType = getDayType(date, value as number | number[] | null)
if (!type && compareDate(date, Date.now()) === 0) {
type = 'current'
}
@ -129,7 +115,7 @@ function setDays() {
}
days.value = dayList
}
function getDayType(date, value) {
function getDayType(date: number, value: number | number[] | null): CalendarDayType {
switch (props.type) {
case 'date':
case 'datetime':
@ -147,23 +133,20 @@ function getDayType(date, value) {
return getDateType(date)
}
}
function getDateType(date) {
if (props.value && compareDate(date, props.value) === 0) {
function getDateType(date: number): CalendarDayType {
if (props.value && compareDate(date, props.value as number) === 0) {
return 'selected'
}
return ''
}
function getDatesType(date) {
if (!props.value) return ''
function getDatesType(date: number): CalendarDayType {
if (!isArray(props.value)) return ''
let type = ''
;(props.value as any).some((item) => {
let type: CalendarDayType = ''
props.value.some((item) => {
if (compareDate(date, item) === 0) {
type = 'selected'
return true
}
@ -172,8 +155,8 @@ function getDatesType(date) {
return type
}
function getDatetimeType(date, value) {
const [startDate, endDate] = value || []
function getDatetimeType(date: number, value: number | number[] | null) {
const [startDate, endDate] = isArray(value) ? value : []
if (startDate && compareDate(date, startDate) === 0) {
if (props.allowSameDay && endDate && compareDate(startDate, endDate) === 0) {
@ -188,8 +171,8 @@ function getDatetimeType(date, value) {
return ''
}
}
function getWeektimeType(date, value) {
const [startDate, endDate] = value || []
function getWeektimeType(date: number, value: number | number[] | null) {
const [startDate, endDate] = isArray(value) ? value : []
if (startDate && compareDate(date, startDate) === 0) {
return 'start'
@ -203,7 +186,7 @@ function getWeektimeType(date, value) {
}
function getWeekValue() {
if (props.type === 'week') {
return getWeekRange(props.value, props.firstDayOfWeek)
return getWeekRange(props.value as number, props.firstDayOfWeek)
} else {
const [startDate, endDate] = (props.value as any) || []
@ -224,7 +207,6 @@ function getWeekValue() {
}
function handleDateClick(index: number) {
const date = days.value[index]
switch (props.type) {
case 'date':
case 'datetime':
@ -247,7 +229,7 @@ function handleDateClick(index: number) {
handleDateChange(date)
}
}
function getDate(date, isEnd: boolean = false) {
function getDate(date: number, isEnd: boolean = false) {
date = props.defaultTime && props.defaultTime.length > 0 ? getDateByDefaultTime(date, isEnd ? props.defaultTime[1] : props.defaultTime[0]) : date
if (date < props.minDate) return props.minDate
@ -257,7 +239,7 @@ function getDate(date, isEnd: boolean = false) {
return date
}
function handleDateChange(date) {
function handleDateChange(date: CalendarDayItem) {
if (date.disabled) return
if (date.type !== 'selected') {
@ -267,7 +249,7 @@ function handleDateChange(date) {
})
}
}
function handleDatesChange(date) {
function handleDatesChange(date: CalendarDayItem) {
if (date.disabled) return
const value = deepClone(isArray(props.value) ? props.value : [])
if (date.type !== 'selected') {
@ -279,11 +261,11 @@ function handleDatesChange(date) {
value
})
}
function handleDateRangeChange(date) {
function handleDateRangeChange(date: CalendarDayItem) {
if (date.disabled) return
let value
let type
let value: (number | null)[] = []
let type: CalendarDayType = ''
const [startDate, endDate] = deepClone(isArray(props.value) ? props.value : [])
const compare = compareDate(date.date, startDate)
@ -307,10 +289,10 @@ function handleDateRangeChange(date) {
// 时间范围类型，且有开始时间和结束时间，需要支持重新点击开始日期和结束日期可以重新修改时间
if (compare === 0) {
type = 'start'
value = props.value
value = props.value as number[]
} else if (compareDate(date.date, endDate) === 0) {
type = 'end'
value = props.value
value = props.value as number[]
} else {
value = [getDate(date.date), null]
}
@ -323,7 +305,7 @@ function handleDateRangeChange(date) {
type: type || (value[1] ? 'end' : 'start')
})
}
function handleWeekChange(date) {
function handleWeekChange(date: CalendarDayItem) {
const [weekStart] = getWeekRange(date.date, props.firstDayOfWeek)
// 周的第一天如果是禁用状态，则不可选中
@ -333,13 +315,13 @@ function handleWeekChange(date) {
value: getDate(weekStart) + 24 * 60 * 60 * 1000
})
}
function handleWeekRangeChange(date) {
function handleWeekRangeChange(date: CalendarDayItem) {
const [weekStartDate] = getWeekRange(date.date, props.firstDayOfWeek)
// 周的第一天如果是禁用状态，则不可选中
if (getFormatterDate(weekStartDate, new Date(weekStartDate).getDate()).disabled) return
let value
let value: (number | null)[] = []
const [startDate, endDate] = deepClone(isArray(props.value) ? props.value : [])
const [startWeekStartDate] = startDate ? getWeekRange(startDate, props.firstDayOfWeek) : []
const compare = compareDate(weekStartDate, startWeekStartDate)
@ -356,8 +338,8 @@ function handleWeekRangeChange(date) {
value
})
}
function getFormatterDate(date, day, type?: string) {
let dayObj = {
function getFormatterDate(date: number, day: string | number, type?: CalendarDayType) {
let dayObj: CalendarDayItem = {
date: date,
text: day,
topInfo: '',
@ -372,7 +354,6 @@ function getFormatterDate(date, day, type?: string) {
console.error('[wot-design] error(wd-calendar-view): the formatter prop of wd-calendar-view should be a function')
}
}
return dayObj
}
</script>

19
src/uni_modules/wot-design-uni/components/wd-calendar-view/month/types.ts Normal file
View File

@ -0,0 +1,19 @@
import type { PropType } from 'vue'
import { makeBooleanProp, makeRequiredProp } from '../../common/props'
import type { CalendarFormatter, CalendarType } from '../types'
export const monthProps = {
type: makeRequiredProp(String as PropType<CalendarType>),
date: makeRequiredProp(Number),
value: makeRequiredProp([Number, Array, null] as PropType<number | (number | null)[] | null>),
minDate: makeRequiredProp(Number),
maxDate: makeRequiredProp(Number),
firstDayOfWeek: makeRequiredProp(Number),
formatter: Function as PropType<CalendarFormatter>,
maxRange: Number,
rangePrompt: String,
allowSameDay: makeBooleanProp(false),
defaultTime: {
type: [Array] as PropType<Array<number[]>>
}
}

94
src/uni_modules/wot-design-uni/components/wd-calendar-view/monthPanel/month-panel.vue
View File

@ -61,43 +61,22 @@ export default {
<script lang="ts" setup>
import { computed, nextTick, onMounted, ref, watch } from 'vue'
import { debounce, getType, isEqual } from '../../common/util'
import { debounce, isArray, isEqual, isNumber } from '../../common/util'
import { compareMonth, formatMonthTitle, getMonthEndDay, getMonths, getTimeData, getWeekLabel } from '../utils'
import Month from '../month/month.vue'
import type { MonthInfo } from './type'
import { monthPanelProps, type MonthInfo, type MonthPanelTimeType, type MonthPanelExpose } from './types'
import { useTranslate } from '../../composables/useTranslate'
import type { CalendarItem } from '../types'
interface Props {
type: string
value: Array<number> | number | null
minDate: number
maxDate: number
firstDayOfWeek: number
// eslint-disable-next-line @typescript-eslint/ban-types
formatter?: Function
maxRange?: number
rangePrompt?: string
allowSameDay?: boolean
showPanelTitle?: boolean
defaultTime: Array<number>
panelHeight: number
// eslint-disable-next-line @typescript-eslint/ban-types
timeFilter?: Function
hideSecond?: boolean
}
const props = withDefaults(defineProps<Props>(), {
allowSameDay: false,
showPanelTitle: false,
hideSecond: false
})
const props = defineProps(monthPanelProps)
const { translate } = useTranslate('calendar-view')
const title = ref<string>('')
const scrollTop = ref<number>(0) // 滚动位置
const timeValue = ref<Array<string>>([])
const timeData = ref<Array<string | string[]>>([])
const timeType = ref<string>('') // 当前时间类型，是开始还是结束
const innerValue = ref<string | number[]>('') // 内部保存一个值，用于判断新老值，避免监听器触发
const timeValue = ref<string[] | number[]>([])
const timeData = ref<Array<CalendarItem[]>>([])
const timeType = ref<MonthPanelTimeType>('') // 当前时间类型，是开始还是结束
const innerValue = ref<string | number | (number | null)[]>('') // 内部保存一个值，用于判断新老值，避免监听器触发
const weekLabel = computed(() => {
return (index: number) => {
@ -169,13 +148,15 @@ const handleChange = debounce((value) => {
})
}, 50)
/**
* 使当前日期或者选中日期滚动到可视区域
*/
function scrollIntoView() {
setTimeout(() => {
let activeDate
const type = getType(props.value)
if (type === 'array') {
let activeDate: number | null = 0
if (isArray(props.value)) {
activeDate = props.value![0]
} else if (type === 'number') {
} else if (isNumber(props.value)) {
activeDate = props.value
}
@ -203,22 +184,22 @@ function scrollIntoView() {
* @param {timestamp|array} value 当前时间
* @param {string} type 类型，是开始还是结束
*/
function getTime(value, type?: string) {
function getTime(value: number | (number | null)[], type?: string) {
if (!props.value) {
return []
}
if (props.type === 'datetime') {
return getTimeData({
date: value,
date: value as number,
minDate: props.minDate,
maxDate: props.maxDate,
filter: props.timeFilter,
isHideSecond: props.hideSecond
})
} else {
if (type === 'start' && typeof props.value === 'object') {
if (type === 'start' && isArray(props.value)) {
return getTimeData({
date: value[0],
date: (value as Array<number>)[0],
minDate: props.minDate,
maxDate: props.value[1] ? props.value[1] : props.maxDate,
filter: props.timeFilter,
@ -226,8 +207,8 @@ function getTime(value, type?: string) {
})
} else {
return getTimeData({
date: value[1],
minDate: value[0],
date: (value as Array<number>)[1],
minDate: (value as Array<number>)[0],
maxDate: props.maxDate,
filter: props.timeFilter,
isHideSecond: props.hideSecond
@ -240,33 +221,34 @@ function getTime(value, type?: string) {
* @param {timestamp} date 时间
* @param {string} type 类型，是开始还是结束
*/
function getTimeValue(date, type) {
function getTimeValue(date: number | (number | null)[], type: MonthPanelTimeType) {
let dateValue: Date = new Date()
if (props.type === 'datetime') {
date = new Date(date)
} else {
dateValue = new Date(date as number)
} else if (isArray(date)) {
if (type === 'start') {
date = new Date(date[0])
dateValue = new Date(date[0] || '')
} else {
date = new Date(date[1])
dateValue = new Date(date[1] || '')
}
}
const hour = date.getHours()
const minute = date.getMinutes()
const second = date.getSeconds()
const hour = dateValue.getHours()
const minute = dateValue.getMinutes()
const second = dateValue.getSeconds()
return props.hideSecond ? [hour, minute] : [hour, minute, second]
}
function setTime(value, type) {
if (getType(value) === 'array' && value[0] && value[1] && type === 'start' && timeType.value === 'start') {
function setTime(value: number | (number | null)[], type?: MonthPanelTimeType) {
if (isArray(value) && value[0] && value[1] && type === 'start' && timeType.value === 'start') {
type = 'end'
}
timeData.value = getTime(value, type) || []
timeValue.value = getTimeValue(value, type)
timeType.value = type
timeValue.value = getTimeValue(value, type || '')
timeType.value = type || ''
}
function handleDateChange({ value, type }) {
function handleDateChange({ value, type }: { value: number | (number | null)[]; type?: MonthPanelTimeType }) {
if (!isEqual(value, props.value)) {
// 内部保存一个值，用于判断新老值，避免监听器触发
innerValue.value = value
@ -277,7 +259,7 @@ function handleDateChange({ value, type }) {
setTime(value, type)
}
}
function handleTimeChange({ value }) {
function handleTimeChange({ value }: { value: any[] }) {
if (!props.value) {
return
}
@ -293,7 +275,7 @@ function handleTimeChange({ value }) {
} else if (typeof props.value === 'object') {
const [start, end] = props.value!
const dataValue = timeType.value === 'start' ? start : end
const date = new Date(dataValue)
const date = new Date(dataValue || '')
date.setHours(value[0])
date.setMinutes(value[1])
date.setSeconds(props.hideSecond ? 0 : value[2])
@ -345,7 +327,7 @@ function doSetSubtitle(scrollTop: number, monthsInfo: MonthInfo[]) {
}
}
defineExpose({
defineExpose<MonthPanelExpose>({
scrollIntoView
})
</script>

7
src/uni_modules/wot-design-uni/components/wd-calendar-view/monthPanel/type.ts
View File

@ -1,7 +0,0 @@
/**
* 月份信息
*/
export interface MonthInfo {
date: number
height: number
}

44
src/uni_modules/wot-design-uni/components/wd-calendar-view/monthPanel/types.ts Normal file
View File

@ -0,0 +1,44 @@
import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
import { makeBooleanProp, makeRequiredProp } from '../../common/props'
import type { CalendarFormatter, CalendarTimeFilter, CalendarType } from '../types'
/**
* 月份信息
*/
export interface MonthInfo {
date: number
height: number
}
export const monthPanelProps = {
type: makeRequiredProp(String as PropType<CalendarType>),
value: makeRequiredProp([Number, Array, null] as PropType<number | (number | null)[] | null>),
minDate: makeRequiredProp(Number),
maxDate: makeRequiredProp(Number),
firstDayOfWeek: makeRequiredProp(Number),
formatter: Function as PropType<CalendarFormatter>,
maxRange: Number,
rangePrompt: String,
allowSameDay: makeBooleanProp(false),
showPanelTitle: makeBooleanProp(false),
defaultTime: {
type: [Array] as PropType<Array<number[]>>
},
panelHeight: makeRequiredProp(Number),
// type 为 'datetime' 或 'datetimerange' 时有效，用于过滤时间选择器的数据
timeFilter: Function as PropType<CalendarTimeFilter>,
hideSecond: makeBooleanProp(false)
}
export type MonthPanelProps = ExtractPropTypes<typeof monthPanelProps>
export type MonthPanelTimeType = 'start' | 'end' | ''
export type MonthPanelExpose = {
/**
* 使当前日期或者选中日期滚动到可视区域
*/
scrollIntoView: () => void
}
export type MonthPanelInstance = ComponentPublicInstance<MonthPanelProps, MonthPanelExpose>

105
src/uni_modules/wot-design-uni/components/wd-calendar-view/types.ts
View File

@ -1,5 +1,104 @@
import type { ComponentPublicInstance } from 'vue'
import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
import { baseProps, makeBooleanProp, makeNumberProp, makeRequiredProp, makeStringProp } from '../common/props'
export type CalendarViewInstance = ComponentPublicInstance<{
export type CalendarType = 'date' | 'dates' | 'datetime' | 'week' | 'month' | 'daterange' | 'datetimerange' | 'weekrange' | 'monthrange'
export const calendarViewProps = {
...baseProps,
/**
* 选中值，为 13 位时间戳或时间戳数组
*/
modelValue: makeRequiredProp([Number, Array, null] as PropType<number | number[] | null>),
/**
* 日期类型
*/
type: makeStringProp<CalendarType>('date'),
/**
* 最小日期，为 13 位时间戳
*/
minDate: makeNumberProp(new Date(new Date().getFullYear(), new Date().getMonth() - 6, new Date().getDate()).getTime()),
/**
* 最大日期，为 13 位时间戳
*/
maxDate: makeNumberProp(new Date(new Date().getFullYear(), new Date().getMonth() + 6, new Date().getDate(), 23, 59, 59).getTime()),
/**
* 周起始天
*/
firstDayOfWeek: makeNumberProp(0),
/**
* 日期格式化函数
*/
formatter: Function as PropType<CalendarFormatter>,
/**
* type 为范围选择时有效，最大日期范围
*/
maxRange: Number,
/**
* type 为范围选择时有效，选择超出最大日期范围时的错误提示文案
*/
rangePrompt: String,
/**
* type 为范围选择时有效，是否允许选择同一天
*/
allowSameDay: makeBooleanProp(false),
// 是否展示面板标题，自动计算当前滚动的日期月份
showPanelTitle: makeBooleanProp(true),
/**
* 选中日期所使用的当日内具体时刻
*/
defaultTime: {
type: [String, Array] as PropType<string | string[]>,
default: '00:00:00'
},
/**
* 可滚动面板的高度
*/
panelHeight: makeNumberProp(378),
/**
* type 为 'datetime' 或 'datetimerange' 时有效，用于过滤时间选择器的数据
*/
timeFilter: Function as PropType<CalendarTimeFilter>,
/**
* type 为 'datetime' 或 'datetimerange' 时有效，是否不展示秒修改
*/
hideSecond: makeBooleanProp(false)
}
export type CalendarViewProps = ExtractPropTypes<typeof calendarViewProps>
export type CalendarDayType = '' | 'start' | 'middle' | 'end' | 'selected' | 'same' | 'current'
export type CalendarDayItem = {
date: number
text?: number | string
topInfo?: string
bottomInfo?: string
type?: CalendarDayType
disabled?: boolean
}
export type CalendarFormatter = (day: CalendarDayItem) => CalendarDayItem
export type CalendarTimeFilterOptionType = 'hour' | 'minute' | 'second'
export type CalendarTimeFilterOption = {
type: CalendarTimeFilterOptionType
values: CalendarItem[]
}
export type CalendarTimeFilter = (option: CalendarTimeFilterOption) => CalendarItem[]
export type CalendarItem = {
label: string
value: number
disabled: boolean
}
export type CalendarViewExpose = {
/**
* 使当前日期或者选中日期滚动到可视区域
*/
scrollIntoView: () => void
}>
}
export type CalendarViewInstance = ComponentPublicInstance<CalendarViewExpose, CalendarViewProps>

159
src/uni_modules/wot-design-uni/components/wd-calendar-view/utils.ts
View File

@ -1,6 +1,7 @@
import { dayjs } from '../common/dayjs'
import { getType, padZero } from '../common/util'
import { getType, isArray, padZero } from '../common/util'
import { useTranslate } from '../composables/useTranslate'
import type { CalendarDayType, CalendarItem, CalendarTimeFilter, CalendarType } from './types'
const { translate } = useTranslate('calendar-view')
const weeks: string[] = [
@ -18,16 +19,16 @@ const weeks: string[] = [
* @param {timestamp} date1
* @param {timestamp} date2
*/
export function compareDate(date1, date2) {
date1 = new Date(date1)
date2 = new Date(date2)
export function compareDate(date1: number, date2: number | null) {
const dateValue1 = new Date(date1)
const dateValue2 = new Date(date2 || '')
const year1 = date1.getFullYear()
const year2 = date2.getFullYear()
const month1 = date1.getMonth()
const month2 = date2.getMonth()
const day1 = date1.getDate()
const day2 = date2.getDate()
const year1 = dateValue1.getFullYear()
const year2 = dateValue2.getFullYear()
const month1 = dateValue1.getMonth()
const month2 = dateValue2.getMonth()
const day1 = dateValue1.getDate()
const day2 = dateValue2.getDate()
if (year1 === year2) {
if (month1 === month2) {
@ -43,7 +44,7 @@ export function compareDate(date1, date2) {
* 判断是否是范围选择
* @param {string} type
*/
export function isRange(type) {
export function isRange(type: CalendarType) {
return type.indexOf('range') > -1
}
@ -52,14 +53,14 @@ export function isRange(type) {
* @param {timestamp} date1
* @param {timestamp} date2
*/
export function compareMonth(date1, date2) {
date1 = new Date(date1)
date2 = new Date(date2)
export function compareMonth(date1: number, date2: number) {
const dateValue1 = new Date(date1)
const dateValue2 = new Date(date2)
const year1 = date1.getFullYear()
const year2 = date2.getFullYear()
const month1 = date1.getMonth()
const month2 = date2.getMonth()
const year1 = dateValue1.getFullYear()
const year2 = dateValue2.getFullYear()
const month1 = dateValue1.getMonth()
const month2 = dateValue2.getMonth()
if (year1 === year2) {
return month1 === month2 ? 0 : month1 > month2 ? 1 : -1
@ -73,12 +74,12 @@ export function compareMonth(date1, date2) {
* @param {timestamp} date1
* @param {timestamp} date2
*/
export function compareYear(date1, date2) {
date1 = new Date(date1)
date2 = new Date(date2)
export function compareYear(date1: number, date2: number) {
const dateValue1 = new Date(date1)
const dateValue2 = new Date(date2)
const year1 = date1.getFullYear()
const year2 = date2.getFullYear()
const year1 = dateValue1.getFullYear()
const year2 = dateValue2.getFullYear()
return year1 === year2 ? 0 : year1 > year2 ? 1 : -1
}
@ -88,7 +89,7 @@ export function compareYear(date1, date2) {
* @param {number} year
* @param {number} month
*/
export function getMonthEndDay(year, month) {
export function getMonthEndDay(year: number, month: number) {
return 32 - new Date(year, month - 1, 32).getDate()
}
@ -96,7 +97,7 @@ export function getMonthEndDay(year, month) {
* 格式化年月
* @param {timestamp} date
*/
export function formatMonthTitle(date) {
export function formatMonthTitle(date: number) {
return dayjs(date).format(translate('monthTitle'))
}
@ -104,7 +105,7 @@ export function formatMonthTitle(date) {
* 根据下标获取星期
* @param {number} index
*/
export function getWeekLabel(index) {
export function getWeekLabel(index: number) {
if (index >= 7) {
index = index % 7
}
@ -143,12 +144,12 @@ export function formatYearTitle(date: number) {
* @param {timestamp} minDate
* @param {timestamp} maxDate
*/
export function getMonths(minDate, maxDate) {
export function getMonths(minDate: number, maxDate: number) {
const months: number[] = []
const month = new Date(minDate)
month.setDate(1)
while (compareMonth(month, maxDate) < 1) {
while (compareMonth(month.getTime(), maxDate) < 1) {
months.push(month.getTime())
month.setMonth(month.getMonth() + 1)
}
@ -167,7 +168,7 @@ export function getYears(minDate: number, maxDate: number) {
year.setMonth(0)
year.setDate(1)
while (compareYear(year, maxDate) < 1) {
while (compareYear(year.getTime(), maxDate) < 1) {
years.push(year.getTime())
year.setFullYear(year.getFullYear() + 1)
}
@ -179,17 +180,17 @@ export function getYears(minDate: number, maxDate: number) {
* 获取一个日期所在周的第一天和最后一天
* @param {timestamp} date
*/
export function getWeekRange(date, firstDayOfWeek) {
export function getWeekRange(date: number, firstDayOfWeek: number) {
if (firstDayOfWeek >= 7) {
firstDayOfWeek = firstDayOfWeek % 7
}
date = new Date(date)
date.setHours(0, 0, 0, 0)
const year = date.getFullYear()
const month = date.getMonth()
const day = date.getDate()
const week = date.getDay()
const dateValue = new Date(date)
dateValue.setHours(0, 0, 0, 0)
const year = dateValue.getFullYear()
const month = dateValue.getMonth()
const day = dateValue.getDate()
const week = dateValue.getDay()
const weekStart = new Date(year, month, day - ((7 + week - firstDayOfWeek) % 7))
const weekEnd = new Date(year, month, day + 6 - ((7 + week - firstDayOfWeek) % 7))
@ -202,7 +203,7 @@ export function getWeekRange(date, firstDayOfWeek) {
* @param {timestamp} date1
* @param {timestamp} date2
*/
export function getDayOffset(date1, date2) {
export function getDayOffset(date1: number, date2: number) {
return (date1 - date2) / (24 * 60 * 60 * 1000) + 1
}
@ -211,11 +212,11 @@ export function getDayOffset(date1, date2) {
* @param {timestamp} date
* @param {number} offset
*/
export function getDayByOffset(date, offset) {
date = new Date(date)
date.setDate(date.getDate() + offset)
export function getDayByOffset(date: number, offset: number) {
const dateValue = new Date(date)
dateValue.setDate(dateValue.getDate() + offset)
return date.getTime()
return dateValue.getTime()
}
/**
@ -223,14 +224,14 @@ export function getDayByOffset(date, offset) {
* @param {timestamp} date1
* @param {timestamp} date2
*/
export function getMonthOffset(date1, date2) {
date1 = new Date(date1)
date2 = new Date(date2)
export function getMonthOffset(date1: number, date2: number) {
const dateValue1 = new Date(date1)
const dateValue2 = new Date(date2)
const year1 = date1.getFullYear()
const year2 = date2.getFullYear()
let month1 = date1.getMonth()
const month2 = date2.getMonth()
const year1 = dateValue1.getFullYear()
const year2 = dateValue2.getFullYear()
let month1 = dateValue1.getMonth()
const month2 = dateValue2.getMonth()
month1 = (year1 - year2) * 12 + month1
@ -242,20 +243,20 @@ export function getMonthOffset(date1, date2) {
* @param {timestamp} date
* @param {number} offset
*/
export function getMonthByOffset(date, offset) {
date = new Date(date)
date.setMonth(date.getMonth() + offset)
export function getMonthByOffset(date: number, offset: number) {
const dateValue = new Date(date)
dateValue.setMonth(dateValue.getMonth() + offset)
return date.getTime()
return dateValue.getTime()
}
/**
* 获取默认时间，格式化为数组
* @param {array|string|null} defaultTime
*/
export function getDefaultTime(defaultTime) {
if (getType(defaultTime) === 'array') {
const startTime = (defaultTime[0] || '00:00:00').split(':').map((item) => {
export function getDefaultTime(defaultTime: string[] | string | null) {
if (isArray(defaultTime)) {
const startTime = (defaultTime[0] || '00:00:00').split(':').map((item: string) => {
return parseInt(item)
})
const endTime = (defaultTime[1] || '00:00:00').split(':').map((item) => {
@ -276,13 +277,13 @@ export function getDefaultTime(defaultTime) {
* @param {timestamp} date
* @param {array} defaultTime
*/
export function getDateByDefaultTime(date, defaultTime) {
date = new Date(date)
date.setHours(defaultTime[0])
date.setMinutes(defaultTime[1])
date.setSeconds(defaultTime[2])
export function getDateByDefaultTime(date: number, defaultTime: number[]) {
const dateValue = new Date(date)
dateValue.setHours(defaultTime[0])
dateValue.setMinutes(defaultTime[1])
dateValue.setSeconds(defaultTime[2])
return date.getTime()
return dateValue.getTime()
}
/**
@ -290,9 +291,9 @@ export function getDateByDefaultTime(date, defaultTime) {
* @param {number} n
* @param {function} iteratee
*/
const times = (n, iteratee) => {
let index = -1
const result = Array(n < 0 ? 0 : n)
const times = (n: number, iteratee: (index: number) => CalendarItem) => {
let index: number = -1
const result: CalendarItem[] = Array(n < 0 ? 0 : n)
while (++index < n) {
result[index] = iteratee(index)
}
@ -303,16 +304,28 @@ const times = (n, iteratee) => {
* 获取时分秒
* @param {timestamp}} date
*/
const getTime = (date) => {
date = new Date(date)
return [date.getHours(), date.getMinutes(), date.getSeconds()]
const getTime = (date: number) => {
const dateValue = new Date(date)
return [dateValue.getHours(), dateValue.getMinutes(), dateValue.getSeconds()]
}
/**
* 根据最小最大日期获取时间数据，用于填入picker
* @param {*} param0
*/
export function getTimeData({ date, minDate, maxDate, isHideSecond, filter } = {} as any) {
export function getTimeData({
date,
minDate,
maxDate,
isHideSecond,
filter
}: {
date: number
minDate: number
maxDate: number
isHideSecond: boolean
filter?: CalendarTimeFilter
}) {
const compareMin = compareDate(date, minDate)
const compareMax = compareDate(date, maxDate)
@ -351,7 +364,7 @@ export function getTimeData({ date, minDate, maxDate, isHideSecond, filter } = {
}
}
let columns: any[] = []
let columns: CalendarItem[][] = []
let hours = times(24, (index) => {
return {
label: translate('hour', padZero(index)),
@ -366,7 +379,7 @@ export function getTimeData({ date, minDate, maxDate, isHideSecond, filter } = {
disabled: index < minMinute || index > maxMinute
}
})
let seconds
let seconds: CalendarItem[] = []
if (filter && getType(filter) === 'function') {
hours = filter({
type: 'hour',
@ -403,7 +416,7 @@ export function getTimeData({ date, minDate, maxDate, isHideSecond, filter } = {
* 获取当前是第几周
* @param {timestamp} date
*/
export function getWeekNumber(date) {
export function getWeekNumber(date: number | Date) {
date = new Date(date)
date.setHours(0, 0, 0, 0)
// Thursday in current week decides the year.
@ -415,10 +428,10 @@ export function getWeekNumber(date) {
return 1 + Math.round(((date.getTime() - week.getTime()) / 86400000 - 3 + ((week.getDay() + 6) % 7)) / 7)
}
export function getItemClass(monthType, value, type) {
export function getItemClass(monthType: CalendarDayType, value: number | (number | null)[], type: CalendarType) {
const classList = ['is-' + monthType]
if (type.indexOf('range') > -1) {
if (type.indexOf('range') > -1 && isArray(value)) {
if (!value || !value[1]) {
classList.push('is-without-end')
}

59
src/uni_modules/wot-design-uni/components/wd-calendar-view/wd-calendar-view.vue
View File

@ -55,56 +55,11 @@ import { ref, watch } from 'vue'
import { getDefaultTime } from './utils'
import yearPanel from './yearPanel/year-panel.vue'
import MonthPanel from './monthPanel/month-panel.vue'
import { calendarViewProps, type CalendarViewExpose } from './types'
type CalendarType = 'date' | 'dates' | 'datetime' | 'week' | 'month' | 'daterange' | 'datetimerange' | 'weekrange' | 'monthrange'
const props = defineProps(calendarViewProps)
interface Props {
customClass?: string
// 选中值，为 13 位时间戳或时间戳数组
modelValue: number | Array<number> | null
// 日期类型
type?: CalendarType
// 最小日期，为 13 位时间戳
minDate?: number
// 最大日期，为 13 位时间戳
maxDate?: number
// 周起始天
firstDayOfWeek?: number
// 日期格式化函数
// eslint-disable-next-line @typescript-eslint/ban-types
formatter?: Function
// type 为范围选择时有效，最大日期范围
maxRange?: number
// type 为范围选择时有效，选择超出最大日期范围时的错误提示文案
rangePrompt?: string
// type 为范围选择时有效，是否允许选择同一天
allowSameDay?: boolean
// 是否展示面板标题，自动计算当前滚动的日期月份
showPanelTitle?: boolean
// 选中日期所使用的当日内具体时刻
defaultTime?: string | Array<string>
// 可滚动面板的高度
panelHeight?: number
// type 为 'datetime' 或 'datetimerange' 时有效，用于过滤时间选择器的数据
// eslint-disable-next-line @typescript-eslint/ban-types
timeFilter?: Function
// type 为 'datetime' 或 'datetimerange' 时有效，是否不展示秒修改
hideSecond?: boolean
}
const props = withDefaults(defineProps<Props>(), {
customClass: '',
type: 'date',
minDate: new Date(new Date().getFullYear(), new Date().getMonth() - 6, new Date().getDate()).getTime(),
maxDate: new Date(new Date().getFullYear(), new Date().getMonth() + 6, new Date().getDate(), 23, 59, 59).getTime(),
firstDayOfWeek: 0,
allowSameDay: false,
showPanelTitle: true,
defaultTime: '00:00:00',
panelHeight: 378,
hideSecond: false
})
const formatDefauleTime = ref<number[]>([])
const formatDefauleTime = ref<number[][]>([])
const yearPanelRef = ref()
const monthPanelRef = ref()
@ -122,7 +77,9 @@ watch(
const emit = defineEmits(['change', 'update:modelValue', 'pickstart', 'pickend'])
// 对外暴露方法
/**
* 使当前日期或者选中日期滚动到可视区域
*/
function scrollIntoView() {
const panel = getPanel()
panel.scrollIntoView && panel.scrollIntoView()
@ -132,7 +89,7 @@ function getPanel() {
return props.type.indexOf('month') > -1 ? yearPanelRef.value : monthPanelRef.value
}
function handleChange({ value }) {
function handleChange({ value }: { value: number | number[] | null }) {
emit('update:modelValue', value)
emit('change', {
value
@ -145,7 +102,7 @@ function handlePickEnd() {
emit('pickend')
}
defineExpose({
defineExpose<CalendarViewExpose>({
scrollIntoView
})
</script>

19
src/uni_modules/wot-design-uni/components/wd-calendar-view/year/types.ts Normal file
View File

@ -0,0 +1,19 @@
import type { PropType } from 'vue'
import { makeBooleanProp, makeRequiredProp } from '../../common/props'
import type { CalendarFormatter, CalendarType } from '../types'
export const yearProps = {
type: makeRequiredProp(String as PropType<CalendarType>),
date: makeRequiredProp(Number),
value: makeRequiredProp([Number, Array] as PropType<number | (number | null)[] | null>),
minDate: makeRequiredProp(Number),
maxDate: makeRequiredProp(Number),
// 日期格式化函数
formatter: Function as PropType<CalendarFormatter>,
maxRange: Number,
rangePrompt: String,
allowSameDay: makeBooleanProp(false),
defaultTime: {
type: [Array] as PropType<Array<number[]>>
}
}

64
src/uni_modules/wot-design-uni/components/wd-calendar-view/year/year.vue
View File

@ -7,7 +7,7 @@
<view
v-for="(item, index) in months"
:key="index"
:class="`wd-year__month ${item.disabled ? 'is-disabled' : ''} ${item.type ? itemClass(item.type, value, type) : ''}`"
:class="`wd-year__month ${item.disabled ? 'is-disabled' : ''} ${item.type ? itemClass(item.type, value!, type) : ''}`"
@click="handleDateClick(index)"
>
<view class="wd-year__month-top">{{ item.topInfo }}</view>
@ -29,41 +29,28 @@ export default {
<script lang="ts" setup>
import { computed, ref, watch } from 'vue'
import { deepClone, getType, padZero } from '../../common/util'
import { deepClone, getType, isArray } from '../../common/util'
import { compareMonth, formatYearTitle, getDateByDefaultTime, getItemClass, getMonthByOffset, getMonthOffset } from '../utils'
import { useToast } from '../../wd-toast'
import { useTranslate } from '../../composables/useTranslate'
import { dayjs } from '../../common/dayjs'
import { yearProps } from './types'
import type { CalendarDayItem, CalendarDayType, CalendarType } from '../types'
interface Props {
type: string
date: number
value: null | number | Array<number>
minDate: number
maxDate: number
// eslint-disable-next-line @typescript-eslint/ban-types
formatter?: Function
maxRange?: number
rangePrompt?: string
allowSameDay?: boolean
defaultTime: Array<number>
}
const props = withDefaults(defineProps<Props>(), {
allowSameDay: false
})
const props = defineProps(yearProps)
const toast = useToast('wd-year')
const { translate } = useTranslate('calendar-view')
const months = ref<Record<string, any>[]>([])
const months = ref<CalendarDayItem[]>([])
const itemClass = computed(() => {
return (monthType, value, type) => {
return (monthType: CalendarDayType, value: number | (number | null)[], type: CalendarType) => {
return getItemClass(monthType, value, type)
}
})
const yearTitle = computed(() => {
return (date) => {
return (date: number) => {
return formatYearTitle(date)
}
})
@ -81,26 +68,24 @@ watch(
}
)
function getMonthLabel(date) {
function getMonthLabel(date: number) {
return dayjs(date).format(translate('month', date))
}
function setMonths() {
const monthList: Record<string, any>[] = []
const monthList: CalendarDayItem[] = []
const date = new Date(props.date)
const year = date.getFullYear()
const value = props.value
const valueType = getType(value)
if (props.type.indexOf('range') > -1 && value && valueType !== 'array') {
if (props.type.indexOf('range') > -1 && value && !isArray(value)) {
console.error('[wot-design] value should be array when type is range')
return
}
for (let month = 0; month < 12; month++) {
const date = new Date(year, month, 1).getTime()
let type = getMonthType(date)
let type: CalendarDayType = getMonthType(date)
if (!type && compareMonth(date, Date.now()) === 0) {
type = 'current'
}
@ -110,8 +95,8 @@ function setMonths() {
months.value = deepClone(monthList)
}
function getMonthType(date) {
if (props.type === 'monthrange' && typeof props.value === 'object') {
function getMonthType(date: number) {
if (props.type === 'monthrange' && isArray(props.value)) {
const [startDate, endDate] = props.value || []
if (startDate && compareMonth(date, startDate) === 0) {
@ -127,14 +112,14 @@ function getMonthType(date) {
return ''
}
} else {
if (props.value && compareMonth(date, props.value) === 0) {
if (props.value && compareMonth(date, props.value as number) === 0) {
return 'selected'
} else {
return ''
}
}
}
function handleDateClick(index) {
function handleDateClick(index: number) {
const date = months.value[index]
if (date.disabled) return
@ -150,20 +135,20 @@ function handleDateClick(index) {
handleMonthChange(date)
}
}
function getDate(date) {
function getDate(date: number) {
return props.defaultTime && props.defaultTime.length > 0 ? getDateByDefaultTime(date, props.defaultTime[0]) : date
}
function handleMonthChange(date) {
function handleMonthChange(date: CalendarDayItem) {
if (date.type !== 'selected') {
emit('change', {
value: getDate(date.date)
})
}
}
function handleMonthRangeChange(date) {
let value
const [startDate, endDate] = typeof props.value === 'object' ? props.value || [] : []
const compare = compareMonth(date.date, startDate)
function handleMonthRangeChange(date: CalendarDayItem) {
let value: (number | null)[] = []
const [startDate, endDate] = isArray(props.value) ? props.value || [] : []
const compare = compareMonth(date.date, startDate!)
// 禁止选择同个日期
if (!props.allowSameDay && !endDate && compare === 0) return
@ -185,8 +170,9 @@ function handleMonthRangeChange(date) {
value
})
}
function getFormatterDate(date, month, type) {
let monthObj = {
function getFormatterDate(date: number, month: number, type?: CalendarDayType) {
let monthObj: CalendarDayItem = {
date: date,
text: month + 1,
topInfo: '',

7
src/uni_modules/wot-design-uni/components/wd-calendar-view/yearPanel/type.ts
View File

@ -1,7 +0,0 @@
/**
* 月份信息
*/
export interface YearInfo {
date: number
height: number
}

38
src/uni_modules/wot-design-uni/components/wd-calendar-view/yearPanel/types.ts Normal file
View File

@ -0,0 +1,38 @@
import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
import { makeBooleanProp, makeRequiredProp } from '../../common/props'
import type { CalendarFormatter, CalendarType } from '../types'
/**
* 月份信息
*/
export interface YearInfo {
date: number
height: number
}
export const yearPanelProps = {
type: makeRequiredProp(String as PropType<CalendarType>),
value: makeRequiredProp([Number, Array] as PropType<number | (number | null)[] | null>),
minDate: makeRequiredProp(Number),
maxDate: makeRequiredProp(Number),
formatter: Function as PropType<CalendarFormatter>,
maxRange: Number,
rangePrompt: String,
allowSameDay: makeBooleanProp(false),
showPanelTitle: makeBooleanProp(false),
defaultTime: {
type: [Array] as PropType<Array<number[]>>
},
panelHeight: makeRequiredProp(Number)
}
export type YearPanelProps = ExtractPropTypes<typeof yearPanelProps>
export type YearPanelExpose = {
/**
* 使当前日期或者选中日期滚动到可视区域
*/
scrollIntoView: () => void
}
export type YearPanelInstance = ComponentPublicInstance<YearPanelProps, YearPanelExpose>

31
src/uni_modules/wot-design-uni/components/wd-calendar-view/yearPanel/year-panel.vue
View File

@ -33,28 +33,11 @@ export default {
<script lang="ts" setup>
import { computed, onMounted, ref, nextTick } from 'vue'
import { compareYear, formatYearTitle, getYears } from '../utils'
import { getType } from '../../common/util'
import { getType, isArray, isNumber } from '../../common/util'
import Year from '../year/year.vue'
import type { YearInfo } from './type'
import { yearPanelProps, type YearInfo, type YearPanelExpose } from './types'
interface Props {
type: string
value: Array<number> | number | null
minDate: number
maxDate: number
// eslint-disable-next-line @typescript-eslint/ban-types
formatter?: Function
maxRange?: number
rangePrompt?: string
allowSameDay?: boolean
showPanelTitle?: boolean
defaultTime: Array<number>
panelHeight: number
}
const props = withDefaults(defineProps<Props>(), {
allowSameDay: false,
showPanelTitle: false
})
const props = defineProps(yearPanelProps)
const title = ref<string>('')
const scrollTop = ref<number>(0) // 滚动位置
@ -100,9 +83,9 @@ function scrollIntoView() {
requestAnimationFrame().then(() => {
let activeDate
const type = getType(props.value)
if (type === 'array') {
if (isArray(props.value)) {
activeDate = props.value![0]
} else if (type === 'number') {
} else if (isNumber(props.value)) {
activeDate = props.value
}
@ -150,13 +133,13 @@ function doSetSubtitle(scrollTop: number, yearsInfo: YearInfo[]) {
}
}
function handleDateChange({ value }) {
function handleDateChange({ value }: { value: number[] }) {
emit('change', {
value
})
}
defineExpose({
defineExpose<YearPanelExpose>({
scrollIntoView
})
</script>

202
src/uni_modules/wot-design-uni/components/wd-calendar/types.ts Normal file
View File

@ -0,0 +1,202 @@
/*
* @Author: weisheng
* @Date: 2024-03-15 20:40:34
* @LastEditTime: 2024-03-18 13:37:40
* @LastEditors: weisheng
* @Description:
* @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-calendar\types.ts
* 记得注释
*/
import type { PropType } from 'vue'
import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, makeRequiredProp, makeStringProp } from '../common/props'
import type { CalendarFormatter, CalendarTimeFilter, CalendarType } from '../wd-calendar-view/types'
import type { FormItemRule } from '../wd-form/types'
export const calendarProps = {
...baseProps,
/**
* 选中值，为 13 位时间戳或时间戳数组
*/
modelValue: makeRequiredProp([Number, Array, null] as PropType<number | number[] | null>),
/**
* 日期类型，可选值：date / dates / datetime / week / month / daterange / datetimerange / weekrange / monthrange
*/
type: makeStringProp<CalendarType>('date'),
/**
* 最小日期，为 13 位时间戳
*/
minDate: makeNumberProp(new Date(new Date().getFullYear(), new Date().getMonth() - 6, new Date().getDate()).getTime()),
/**
* 最大日期，为 13 位时间戳
*/
maxDate: makeNumberProp(new Date(new Date().getFullYear(), new Date().getMonth() + 6, new Date().getDate(), 23, 59, 59).getTime()),
/**
* 周起始天
*/
firstDayOfWeek: makeNumberProp(0),
/**
* 日期格式化函数
*/
formatter: Function as PropType<CalendarFormatter>,
/**
* type 为范围选择时有效，最大日期范围
*/
maxRange: Number,
/**
* type 为范围选择时有效，选择超出最大日期范围时的错误提示文案
*/
rangePrompt: String,
/**
* type 为范围选择时有效，是否允许选择同一天
*/
allowSameDay: makeBooleanProp(false),
/**
* 选中日期所使用的当日内具体时刻
*/
defaultTime: {
type: [String, Array] as PropType<string | string[]>
},
/**
* type 为 'datetime' 或 'datetimerange' 时有效，用于过滤时间选择器的数据
*/
timeFilter: Function as PropType<CalendarTimeFilter>,
/**
* type 为 'datetime' 或 'datetimerange' 时有效，是否不展示秒修改
*/
hideSecond: makeBooleanProp(false),
/**
* 选择器左侧文案
*/
label: String,
/**
* 设置左侧标题宽度
*/
labelWidth: String,
/**
* 使用 label 插槽时设置该选项
*/
useLabelSlot: makeBooleanProp(false),
/**
* 使用默认插槽时设置该选项
*/
useDefaultSlot: makeBooleanProp(false),
/**
* 禁用
*/
disabled: makeBooleanProp(false),
/**
* 只读
*/
readonly: makeBooleanProp(false),
/**
* 选择器占位符
*/
placeholder: String,
/**
* 弹出层标题
*/
title: String,
/**
* 选择器的值靠右展示
*/
alignRight: makeBooleanProp(false),
/**
* 是否为错误状态，错误状态时右侧内容为红色
*/
error: makeBooleanProp(false),
/**
* 是否必填
*/
required: makeBooleanProp(false),
/**
* 设置选择器大小，可选值：large
*/
size: String,
/**
* 是否垂直居中
*/
center: makeBooleanProp(false),
/**
* 点击遮罩是否关闭
*/
closeOnClickModal: makeBooleanProp(true),
/**
* 弹框层级
*/
zIndex: makeNumberProp(15),
/**
* 是否显示确定按钮
*/
showConfirm: makeBooleanProp(true),
/**
* 确定按钮文字
*/
confirmText: String,
/**
* 自定义展示文案的格式化函数，返回一个字符串
*/
displayFormat: Function as PropType<CalendarDisplayFormat>,
/**
* 自定义范围选择类型的面板内部回显，返回一个字符串
*/
innerDisplayFormat: Function as PropType<CalendarInnerDisplayFormat>,
/**
* 是否超出隐藏
*/
ellipsis: makeBooleanProp(false),
/**
* 是否显示类型切换功能
*/
showTypeSwitch: makeBooleanProp(false),
/**
* 快捷选项，为对象数组，其中对象的 text 必传
*/
shortcuts: makeArrayProp<Record<string, any>>(),
/**
* 快捷操作点击回调
*/
onShortcutsClick: Function as PropType<CalendarOnShortcutsClick>,
/**
* 弹出面板是否设置底部安全距离（iphone X 类型的机型）
*/
safeAreaInsetBottom: makeBooleanProp(true),
/**
* 确定前校验函数，接收 { value, resolve } 参数，通过 resolve 继续执行，resolve 接收 1 个 boolean 参数
*/
beforeConfirm: Function as PropType<CalendarBeforeConfirm>,
/**
* 表单域 model 字段名，在使用表单校验功能的情况下，该属性是必填的
*/
prop: String,
/**
* 表单验证规则，结合wd-form组件使用
*/
rules: makeArrayProp<FormItemRule>(),
customViewClass: makeStringProp(''),
/**
* label 外部自定义样式
*/
customLabelClass: makeStringProp(''),
/**
* value 外部自定义样式
*/
customValueClass: makeStringProp('')
}
export type CalendarDisplayFormat = (value: number | number[], type: CalendarType) => string
export type CalendarInnerDisplayFormat = (value: number, rangeType: 'start' | 'end', type: CalendarType) => string
export type CalendarBeforeConfirmOption = {
value: number | number[] | null
resolve: (isPass: boolean) => void
}
export type CalendarBeforeConfirm = (option: CalendarBeforeConfirmOption) => void
export type CalendarOnShortcutsClickOption = {
item: Record<string, any>
index: number
}
export type CalendarOnShortcutsClick = (option: CalendarOnShortcutsClickOption) => number | number[]

149
src/uni_modules/wot-design-uni/components/wd-calendar/wd-calendar.vue
View File

@ -66,11 +66,14 @@
:class="`wd-calendar__view ${currentType.indexOf('range') > -1 ? 'is-range' : ''} ${showConfirm ? 'is-show-confirm' : ''}`"
>
<view v-if="range(type)" :class="`wd-calendar__range-label ${type === 'monthrange' ? 'is-monthrange' : ''}`">
<view :class="`wd-calendar__range-label-item ${!calendarValue || !calendarValue[0] ? 'is-placeholder' : ''}`" style="text-align: right">
<view
:class="`wd-calendar__range-label-item ${!calendarValue || !isArray(calendarValue) || !calendarValue[0] ? 'is-placeholder' : ''}`"
style="text-align: right"
>
{{ rangeLabel[0] }}
</view>
<view class="wd-calendar__range-sperator">/</view>
<view :class="`wd-calendar__range-label-item ${!calendarValue || !calendarValue[1] ? 'is-placeholder' : ''}`">
<view :class="`wd-calendar__range-label-item ${!calendarValue || !isArray(calendarValue) || !calendarValue[1] ? 'is-placeholder' : ''}`">
{{ rangeLabel[1] }}
</view>
</view>
@ -120,52 +123,54 @@ import { useCell } from '../composables/useCell'
import { FORM_KEY, type FormItemRule } from '../wd-form/types'
import { useParent } from '../composables/useParent'
import { useTranslate } from '../composables/useTranslate'
import { calendarProps } from './types'
import type { CalendarType } from '../wd-calendar-view/types'
const { translate } = useTranslate('calendar')
const defaultDisplayFormat = (value, type) => {
const defaultDisplayFormat = (value: number | number[], type: CalendarType): string => {
switch (type) {
case 'date':
return dayjs(value).format('YYYY-MM-DD')
return dayjs(value as number).format('YYYY-MM-DD')
case 'dates':
return value
return (value as number[])
.map((item) => {
return dayjs(item).format('YYYY-MM-DD')
})
.join(', ')
case 'daterange':
return `${value[0] ? dayjs(value[0]).format('YYYY-MM-DD') : translate('startTime')} ${translate('to')} ${
value[1] ? dayjs(value[1]).format('YYYY-MM-DD') : translate('endTime')
return `${(value as number[])[0] ? dayjs((value as number[])[0]).format('YYYY-MM-DD') : translate('startTime')} ${translate('to')} ${
(value as number[])[1] ? dayjs((value as number[])[1]).format('YYYY-MM-DD') : translate('endTime')
}`
case 'datetime':
return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
return dayjs(value as number).format('YYYY-MM-DD HH:mm:ss')
case 'datetimerange':
return `${value[0] ? dayjs(value[0]).format(translate('timeFormat')) : translate('startTime')} ${translate('to')}\n${
value[1] ? dayjs(value[1]).format(translate('timeFormat')) : translate('endTime')
}`
return `${(value as number[])[0] ? dayjs((value as number[])[0]).format(translate('timeFormat')) : translate('startTime')} ${translate(
'to'
)}\n${(value as number[])[1] ? dayjs((value as number[])[1]).format(translate('timeFormat')) : translate('endTime')}`
case 'week': {
const year = new Date(value).getFullYear()
const week = getWeekNumber(value)
const year = new Date(value as number).getFullYear()
const week = getWeekNumber(value as number)
return translate('weekFormat', year, padZero(week))
}
case 'weekrange': {
const year1 = new Date(value[0]).getFullYear()
const week1 = getWeekNumber(value[0])
const year2 = new Date(value[1]).getFullYear()
const week2 = getWeekNumber(value[1])
return `${value[0] ? translate('weekFormat', year1, padZero(week1)) : translate('startWeek')} - ${
value[1] ? translate('weekFormat', year2, padZero(week2)) : translate('endWeek')
const year1 = new Date((value as number[])[0]).getFullYear()
const week1 = getWeekNumber((value as number[])[0])
const year2 = new Date((value as number[])[1]).getFullYear()
const week2 = getWeekNumber((value as number[])[1])
return `${(value as number[])[0] ? translate('weekFormat', year1, padZero(week1)) : translate('startWeek')} - ${
(value as number[])[1] ? translate('weekFormat', year2, padZero(week2)) : translate('endWeek')
}`
}
case 'month':
return dayjs(value).format('YYYY / MM')
return dayjs(value as number).format('YYYY / MM')
case 'monthrange':
return `${value[0] ? dayjs(value[0]).format('YYYY / MM') : translate('startMonth')} ${translate('to')} ${
value[1] ? dayjs(value[1]).format('YYYY / MM') : translate('endMonth')
return `${(value as number[])[0] ? dayjs((value as number[])[0]).format('YYYY / MM') : translate('startMonth')} ${translate('to')} ${
(value as number[])[1] ? dayjs((value as number[])[1]).format('YYYY / MM') : translate('endMonth')
}`
}
}
const formatRange = (value, rangeType, type) => {
const formatRange = (value: number, rangeType: 'start' | 'end', type: CalendarType) => {
switch (type) {
case 'daterange':
if (!value) {
@ -194,87 +199,7 @@ const formatRange = (value, rangeType, type) => {
}
}
type CalendarType = 'date' | 'dates' | 'datetime' | 'week' | 'month' | 'daterange' | 'datetimerange' | 'weekrange' | 'monthrange'
interface Props {
customClass?: string
customViewClass?: string
customLabelClass?: string
customValueClass?: string
modelValue: null | number | Array<number>
type?: CalendarType
minDate?: number
maxDate?: number
firstDayOfWeek?: number
// eslint-disable-next-line @typescript-eslint/ban-types
formatter?: Function
maxRange?: number
rangePrompt?: string
allowSameDay?: boolean
defaultTime?: string | Array<string>
// eslint-disable-next-line @typescript-eslint/ban-types
timeFilter?: Function
hideSecond?: boolean
label?: string
labelWidth?: string
useLabelSlot?: boolean
useDefaultSlot?: boolean
disabled?: boolean
readonly?: boolean
placeholder?: string
title?: string
alignRight?: boolean
error?: boolean
required?: boolean
size?: string
center?: boolean
closeOnClickModal?: boolean
zIndex?: number
showConfirm?: boolean
confirmText?: string
// eslint-disable-next-line @typescript-eslint/ban-types
displayFormat?: Function
// eslint-disable-next-line @typescript-eslint/ban-types
innerDisplayFormat?: Function
ellipsis?: boolean
showTypeSwitch?: boolean
shortcuts?: Array<Record<string, any>>
// eslint-disable-next-line @typescript-eslint/ban-types
onShortcutsClick?: Function
safeAreaInsetBottom?: boolean
// eslint-disable-next-line @typescript-eslint/ban-types
beforeConfirm?: Function
prop?: string
rules?: FormItemRule[]
}
const props = withDefaults(defineProps<Props>(), {
customClass: '',
customViewClass: '',
customLabelClass: '',
customValueClass: '',
type: 'date',
minDate: new Date(new Date().getFullYear(), new Date().getMonth() - 6, new Date().getDate()).getTime(),
maxDate: new Date(new Date().getFullYear(), new Date().getMonth() + 6, new Date().getDate(), 23, 59, 59).getTime(),
firstDayOfWeek: 0,
allowSameDay: false,
hideSecond: false,
useLabelSlot: false,
useDefaultSlot: false,
disabled: false,
readonly: false,
alignRight: false,
error: false,
required: false,
center: false,
closeOnClickModal: true,
zIndex: 15,
showConfirm: true,
ellipsis: false,
showTypeSwitch: false,
shortcuts: () => [],
safeAreaInsetBottom: true,
rules: () => []
})
const props = defineProps(calendarProps)
const pickerShow = ref<boolean>(false)
const calendarValue = ref<null | number | number[]>(null)
@ -373,7 +298,7 @@ const isRequired = computed(() => {
})
const range = computed(() => {
return (type) => {
return (type: CalendarType) => {
return isRange(type)
}
})
@ -415,7 +340,7 @@ function close() {
}, 250)
emit('cancel')
}
function handleTypeChange({ index }) {
function handleTypeChange({ index }: { index: number }) {
const tabs = ['date', 'week', 'month']
const rangeTabs = ['daterange', 'weekrange', 'monthrange']
const type = props.type.indexOf('range') > -1 ? rangeTabs[index] : tabs[index]
@ -423,12 +348,12 @@ function handleTypeChange({ index }) {
currentTab.value = index
currentType.value = type as CalendarType
}
function getConfirmBtnStatus(value) {
function getConfirmBtnStatus(value: number | number[] | null) {
let confirmBtnDisabled = false
// 范围选择未选择满，或者多日期选择未选择日期，按钮置灰不可点击
if (
(props.type.indexOf('range') > -1 && (!value[0] || !value[1] || !value)) ||
(props.type === 'dates' && (value.length === 0 || !value)) ||
(props.type.indexOf('range') > -1 && (!isArray(value) || !value[0] || !value[1] || !value)) ||
(props.type === 'dates' && (!isArray(value) || value.length === 0 || !value)) ||
!value
) {
confirmBtnDisabled = true
@ -436,7 +361,7 @@ function getConfirmBtnStatus(value) {
return confirmBtnDisabled
}
function handleChange({ value }) {
function handleChange({ value }: { value: number | number[] | null }) {
calendarValue.value = deepClone(value)
confirmBtnDisabled.value = getConfirmBtnStatus(value)
@ -456,7 +381,7 @@ function handleConfirm() {
if (props.beforeConfirm) {
props.beforeConfirm({
value: calendarValue.value,
resolve: (isPass) => {
resolve: (isPass: boolean) => {
isPass && onConfirm()
}
})
@ -485,7 +410,7 @@ function setShowValue() {
showValue.value = ''
}
}
function handleShortcutClick(index) {
function handleShortcutClick(index: number) {
if (props.onShortcutsClick && typeof props.onShortcutsClick === 'function') {
calendarValue.value = deepClone(
props.onShortcutsClick({

30
src/uni_modules/wot-design-uni/components/wd-card/types.ts Normal file
View File

@ -0,0 +1,30 @@
import type { ExtractPropTypes, PropType } from 'vue'
import { baseProps, makeStringProp } from '../common/props'
export type CardType = 'rectangle'
export const cardProps = {
...baseProps,
/**
* 卡片类型
*/
type: String as PropType<CardType>,
/**
* 卡片标题
*/
title: String,
/**
* 标题自定义样式
*/
customTitleClass: makeStringProp(''),
/**
* 内容自定义样式
*/
customContentClass: makeStringProp(''),
/**
* 底部自定义样式
*/
customFooterClass: makeStringProp('')
}
export type CardProps = ExtractPropTypes<typeof cardProps>

17
src/uni_modules/wot-design-uni/components/wd-card/wd-card.vue
View File

@ -27,22 +27,9 @@ export default {
</script>
<script lang="ts" setup>
interface Props {
title?: string
type?: string
customClass?: string
customTitleClass?: string
customContentClass?: string
customFooterClass?: string
}
import { cardProps } from './types'
const props = withDefaults(defineProps<Props>(), {
type: '',
customClass: '',
customTitleClass: '',
customContentClass: '',
customFooterClass: ''
})
defineProps(cardProps)
</script>
<style lang="scss" scoped>

29
src/uni_modules/wot-design-uni/components/wd-cell-group/types.ts
View File

@ -1,13 +1,14 @@
/*
* @Author: weisheng
* @Date: 2023-12-14 11:21:58
* @LastEditTime: 2024-01-03 21:51:36
* @LastEditTime: 2024-03-18 13:57:14
* @LastEditors: weisheng
* @Description:
* @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-cell-group/types.ts
* @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-cell-group\types.ts
* 记得注释
*/
import { type InjectionKey } from 'vue'
import { type ExtractPropTypes, type InjectionKey } from 'vue'
import { baseProps, makeBooleanProp } from '../common/props'
export type CelllGroupProvide = {
props: {
@ -16,3 +17,25 @@ export type CelllGroupProvide = {
}
export const CELL_GROUP_KEY: InjectionKey<CelllGroupProvide> = Symbol('wd-cell-group')
export const cellGroupProps = {
...baseProps,
/**
* 分组标题
*/
title: String,
/**
* 分组右侧内容
*/
value: String,
/**
* 分组启用插槽
*/
useSlot: makeBooleanProp(false),
/**
* 是否展示边框线
*/
border: makeBooleanProp(false)
}
export type CellGroupProps = ExtractPropTypes<typeof cellGroupProps>

15
src/uni_modules/wot-design-uni/components/wd-cell-group/wd-cell-group.vue
View File

@ -31,20 +31,9 @@ export default {
<script lang="ts" setup>
import { useChildren } from '../composables/useChildren'
import { CELL_GROUP_KEY } from './types'
import { CELL_GROUP_KEY, cellGroupProps } from './types'
interface Props {
customClass?: string
title?: string
value?: string
useSlot?: boolean
border?: boolean
}
const props = withDefaults(defineProps<Props>(), {
useSlot: false,
border: false,
customClass: ''
})
const props = defineProps(cellGroupProps)
const { linkChildren } = useChildren(CELL_GROUP_KEY)

90
src/uni_modules/wot-design-uni/components/wd-cell/types.ts Normal file
View File

@ -0,0 +1,90 @@
import type { ExtractPropTypes } from 'vue'
import { baseProps, makeArrayProp, makeBooleanProp, makeStringProp } from '../common/props'
import { type FormItemRule } from '../wd-form/types'
export const cellProps = {
...baseProps,
/**
* 标题
*/
title: String,
/**
* 右侧内容
*/
value: String,
/**
* 图标类名
*/
icon: String,
/**
* 描述信息
*/
label: String,
/**
* 是否为跳转链接
*/
isLink: makeBooleanProp(false),
/**
* 跳转地址
*/
to: String,
/**
* 跳转时是否替换栈顶页面
*/
replace: makeBooleanProp(false),
/**
* 开启点击反馈，is-link 默认开启
*/
clickable: makeBooleanProp(false),
/**
* 设置单元格大小，可选值：large
*/
size: String,
/**
* 是否展示边框线
*/
border: Boolean,
/**
* 设置左侧标题宽度
*/
titleWidth: String,
/**
* 是否垂直居中，默认顶部居中
*/
center: makeBooleanProp(false),
/**
* 是否必填
*/
required: makeBooleanProp(false),
/**
* 表单属性，上下结构
*/
vertical: makeBooleanProp(false),
/**
* 表单域 model 字段名，在使用表单校验功能的情况下，该属性是必填的
*/
prop: String,
/**
* 表单验证规则，结合wd-form组件使用
*/
rules: makeArrayProp<FormItemRule>(),
/**
* icon 使用 slot 时的自定义样式
*/
customIconClass: makeStringProp(''),
/**
* label 使用 slot 时的自定义样式
*/
customLabelClass: makeStringProp(''),
/**
* value 使用 slot 时的自定义样式
*/
customValueClass: makeStringProp(''),
/**
* title 使用 slot 时的自定义样式
*/
customTitleClass: makeStringProp('')
}
export type CellProps = ExtractPropTypes<typeof cellProps>

Some files were not shown because too many files have changed in this diff Show More