diff --git a/packages/create-vant-cli-app/generators/vue3/src/demo-button/demo/index.vue b/packages/create-vant-cli-app/generators/vue3/src/demo-button/demo/index.vue index 013d97cbb..00fb47291 100644 --- a/packages/create-vant-cli-app/generators/vue3/src/demo-button/demo/index.vue +++ b/packages/create-vant-cli-app/generators/vue3/src/demo-button/demo/index.vue @@ -7,3 +7,7 @@ 按钮 + + diff --git a/packages/create-vant-cli-app/package.json b/packages/create-vant-cli-app/package.json index e04f80b47..bd4670691 100644 --- a/packages/create-vant-cli-app/package.json +++ b/packages/create-vant-cli-app/package.json @@ -1,6 +1,6 @@ { "name": "create-vant-cli-app", - "version": "2.0.0", + "version": "2.0.1", "description": "Create Vant CLI App", "main": "lib/index.js", "bin": { diff --git a/packages/vant-cli/changelog.md b/packages/vant-cli/changelog.md index 6b9188c62..59a1cc8aa 100644 --- a/packages/vant-cli/changelog.md +++ b/packages/vant-cli/changelog.md @@ -1,5 +1,10 @@ # 更新日志 +## v5.0.0 (未发布) + +- 升级 `vite` 3.0.0 +- 不再默认安装 `gh-pages` 依赖，请将 `package.json` 中的 `gh-pages -d site-dist` 替换为 `npx gh-pages -d site-dist` + ## v4.0.3 `2022-07-02` diff --git a/packages/vant-cli/package.json b/packages/vant-cli/package.json index 93b3d880e..8a31bf49d 100644 --- a/packages/vant-cli/package.json +++ b/packages/vant-cli/package.json @@ -57,8 +57,8 @@ "@vant/markdown-vetur": "^2.3.0", "@vant/stylelint-config": "^1.4.2", "@vant/touch-emulator": "^1.3.2", - "@vitejs/plugin-vue": "^2.0.0", - "@vitejs/plugin-vue-jsx": "^1.3.3", + "@vitejs/plugin-vue": "^3.0.1", + "@vitejs/plugin-vue-jsx": "^2.0.0", "@vue/babel-plugin-jsx": "^1.1.1", "autoprefixer": "^10.4.0", "commander": "^9.3.0", @@ -88,7 +88,7 @@ "stylelint": "^13.0.0", "transliteration": "^2.2.0", "typescript": "^4.7.4", - "vite": "^2.9.0", + "vite": "^3.0.0", "vite-plugin-html": "^2.1.1", "vite-plugin-md": "^0.11.4", "vue-router": "^4.0.12" diff --git a/packages/vant-cli/src/config/vite.site.ts b/packages/vant-cli/src/config/vite.site.ts index 38ad5c6eb..d0cd4b5d5 100644 --- a/packages/vant-cli/src/config/vite.site.ts +++ b/packages/vant-cli/src/config/vite.site.ts @@ -204,7 +204,7 @@ export function getViteConfigForSiteProd(): InlineConfig { base: publicPath, build: { outDir, - brotliSize: false, + reportCompressedSize: false, emptyOutDir: true, // https://github.com/youzan/vant/issues/9703 cssTarget: ['chrome53'], diff --git a/packages/vant/src/checkbox/README.md b/packages/vant/src/checkbox/README.md index af1ade474..207f1b769 100644 --- a/packages/vant/src/checkbox/README.md +++ b/packages/vant/src/checkbox/README.md @@ -250,7 +250,7 @@ export default { | Attribute | Description | Type | Default | | --- | --- | --- | --- | | v-model | Check status | _boolean_ | `false` | -| name | Checkbox name | _any_ | - | +| name | Checkbox name, usually a unique string or number | _any_ | - | | shape | Can be set to `square` | _string_ | `round` | | disabled | Disable checkbox | _boolean_ | `false` | | label-disabled | Whether to disable label click | _boolean_ | `false` | diff --git a/packages/vant/src/checkbox/README.zh-CN.md b/packages/vant/src/checkbox/README.zh-CN.md index 1c9ef8397..483e5a8ae 100644 --- a/packages/vant/src/checkbox/README.zh-CN.md +++ b/packages/vant/src/checkbox/README.zh-CN.md @@ -265,17 +265,17 @@ export default { ### Checkbox Props -| 参数 | 说明 | 类型 | 默认值 | -| -------------- | ------------------------- | ------------------ | --------- | -| v-model | 是否为选中状态 | _boolean_ | `false` | -| name | 标识符 | _any_ | - | -| shape | 形状，可选值为 `square` | _string_ | `round` | -| disabled | 是否禁用复选框 | _boolean_ | `false` | -| label-disabled | 是否禁用复选框文本点击 | _boolean_ | `false` | -| label-position | 文本位置，可选值为 `left` | _string_ | `right` | -| icon-size | 图标大小，默认单位为 `px` | _number \| string_ | `20px` | -| checked-color | 选中状态颜色 | _string_ | `#1989fa` | -| bind-group | 是否与复选框组绑定 | _boolean_ | `true` | +| 参数 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| v-model | 是否为选中状态 | _boolean_ | `false` | +| name | 标识符，通常为一个唯一的字符串或数字 | _any_ | - | +| shape | 形状，可选值为 `square` | _string_ | `round` | +| disabled | 是否禁用复选框 | _boolean_ | `false` | +| label-disabled | 是否禁用复选框文本点击 | _boolean_ | `false` | +| label-position | 文本位置，可选值为 `left` | _string_ | `right` | +| icon-size | 图标大小，默认单位为 `px` | _number \| string_ | `20px` | +| checked-color | 选中状态颜色 | _string_ | `#1989fa` | +| bind-group | 是否与复选框组绑定 | _boolean_ | `true` | ### CheckboxGroup Props diff --git a/packages/vant/src/composables/use-height.ts b/packages/vant/src/composables/use-height.ts index a6e650832..287bde84c 100644 --- a/packages/vant/src/composables/use-height.ts +++ b/packages/vant/src/composables/use-height.ts @@ -1,7 +1,10 @@ import { useRect } from '@vant/use'; import { Ref, ref, onMounted, nextTick } from 'vue'; -export const useHeight = (element: Element | Ref) => { +export const useHeight = ( + element: Element | Ref, + withSafeArea?: boolean +) => { const height = ref(); const setHeight = () => { @@ -10,8 +13,16 @@ export const useHeight = (element: Element | Ref) => { onMounted(() => { nextTick(setHeight); + + // If the element is using safe area, the system will not return the correct height on page load. + // So we need to wait for the height to be set. // https://github.com/youzan/vant/issues/10131 - setTimeout(setHeight, 100); + // https://stackoverflow.com/questions/64891541 + if (withSafeArea) { + for (let i = 1; i <= 3; i++) { + setTimeout(setHeight, 100 * i); + } + } }); return height; diff --git a/packages/vant/src/composables/use-placeholder.tsx b/packages/vant/src/composables/use-placeholder.tsx index f2c70f2bc..849550177 100644 --- a/packages/vant/src/composables/use-placeholder.tsx +++ b/packages/vant/src/composables/use-placeholder.tsx @@ -3,7 +3,7 @@ import { useHeight } from './use-height'; import type { BEM } from '../utils/create'; export function usePlaceholder(contentRef: Ref, bem: BEM) { - const height = useHeight(contentRef); + const height = useHeight(contentRef, true); return (renderContent: () => JSX.Element) => (
string_ | | validator | Custom validator | _(value, rule) => boolean \| string \| Promise_ | | pattern | Regex pattern | _RegExp_ | diff --git a/packages/vant/src/form/README.zh-CN.md b/packages/vant/src/form/README.zh-CN.md index 9cb83e155..621b618cc 100644 --- a/packages/vant/src/form/README.zh-CN.md +++ b/packages/vant/src/form/README.zh-CN.md @@ -545,7 +545,7 @@ export default { | 键名 | 说明 | 类型 | | --- | --- | --- | -| required | 是否为必选字段，当值为空字符串、空数组、`undefined`、`null` 时，校验不通过 | _boolean_ | +| required | 是否为必选字段，当值为空字符串、空数组、`false`、`undefined`、`null` 时，校验不通过 | _boolean_ | | message | 错误提示文案 | _string \| (value, rule) => string_ | | validator | 通过函数进行校验 | _(value, rule) => boolean \| string \| Promise_ | | pattern | 通过正则表达式进行校验 | _RegExp_ | diff --git a/packages/vant/src/popover/Popover.tsx b/packages/vant/src/popover/Popover.tsx index 78b10d6d9..69369f652 100644 --- a/packages/vant/src/popover/Popover.tsx +++ b/packages/vant/src/popover/Popover.tsx @@ -93,25 +93,31 @@ export default defineComponent({ const wrapperRef = ref(); const popoverRef = ref(); + const getPopoverOptions = () => ({ + placement: props.placement, + modifiers: [ + { + name: 'computeStyles', + options: { + adaptive: false, + gpuAcceleration: false, + }, + }, + extend({}, offsetModifier, { + options: { + offset: props.offset, + }, + }), + ], + }); + const createPopperInstance = () => { if (wrapperRef.value && popoverRef.value) { - return createPopper(wrapperRef.value, popoverRef.value.popupRef.value, { - placement: props.placement, - modifiers: [ - { - name: 'computeStyles', - options: { - adaptive: false, - gpuAcceleration: false, - }, - }, - extend({}, offsetModifier, { - options: { - offset: props.offset, - }, - }), - ], - }); + return createPopper( + wrapperRef.value, + popoverRef.value.popupRef.value, + getPopoverOptions() + ); } return null; }; @@ -125,9 +131,7 @@ export default defineComponent({ if (!popper) { popper = createPopperInstance(); } else { - popper.setOptions({ - placement: props.placement, - }); + popper.setOptions(getPopoverOptions()); } }); }; @@ -207,7 +211,7 @@ export default defineComponent({ } }); - watch(() => [props.show, props.placement], updateLocation); + watch(() => [props.show, props.offset, props.placement], updateLocation); useClickAway(wrapperRef, onClickAway, { eventName: 'touchstart' }); diff --git a/packages/vant/src/popover/demo/index.vue b/packages/vant/src/popover/demo/index.vue index 41caa28c7..0d46830ae 100644 --- a/packages/vant/src/popover/demo/index.vue +++ b/packages/vant/src/popover/demo/index.vue @@ -85,6 +85,17 @@ const show = ref({ const showPicker = ref(false); const currentPlacement = ref('top'); +const onClickChoosePlacement = () => { + showPicker.value = true; + + setTimeout(() => { + show.value = { + ...show.value, + placement: true, + }; + }, 300); +}; + const onPickerChange = (value: PopoverPlacement) => { setTimeout(() => { show.value.placement = true; @@ -129,7 +140,7 @@ const onSelect = (action: { text: string }) => showToast(action.text); readonly name="picker" :label="t('choosePlacement')" - @click="showPicker = true" + @click="onClickChoosePlacement" /> boolean \| Promise\_ | - | diff --git a/packages/vant/src/swipe-cell/README.zh-CN.md b/packages/vant/src/swipe-cell/README.zh-CN.md index 7fb987daa..d847da32a 100644 --- a/packages/vant/src/swipe-cell/README.zh-CN.md +++ b/packages/vant/src/swipe-cell/README.zh-CN.md @@ -114,7 +114,7 @@ export default { | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | -| name | 标识符，可以在事件参数中获取到 | _number \| string_ | `''` | +| name | 标识符，通常为一个唯一的字符串或数字，可以在事件参数中获取到 | _number \| string_ | `''` | | left-width | 指定左侧滑动区域宽度，单位为 `px` | _number \| string_ | `auto` | | right-width | 指定右侧滑动区域宽度，单位为 `px` | _number \| string_ | `auto` | | before-close | 关闭前的回调函数，返回 `false` 可阻止关闭，支持返回 Promise | _(args) => boolean \| Promise\_ | - | diff --git a/packages/vant/src/uploader/README.md b/packages/vant/src/uploader/README.md index 015f84362..51b78f800 100644 --- a/packages/vant/src/uploader/README.md +++ b/packages/vant/src/uploader/README.md @@ -308,7 +308,7 @@ export default { | --- | --- | --- | --- | | v-model | List of uploaded files | _FileListItem[]_ | - | | accept | Accepted [file type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#Unique_file_type_specifiers) | _string_ | `image/*` | -| name | Input name | _number \| string_ | - | +| name | Input name, usually a unique string or number | _number \| string_ | - | | preview-size | Size of preview image | _number \| string \| Array_ | `80px` | | preview-image | Whether to show image preview | _boolean_ | `true` | | preview-full-image | Whether to show full screen image preview when image is clicked | _boolean_ | `true` | diff --git a/packages/vant/src/uploader/README.zh-CN.md b/packages/vant/src/uploader/README.zh-CN.md index dddb8f1ba..569a1e4a4 100644 --- a/packages/vant/src/uploader/README.zh-CN.md +++ b/packages/vant/src/uploader/README.zh-CN.md @@ -327,7 +327,7 @@ export default { | --- | --- | --- | --- | | v-model | 已上传的文件列表 | _FileListItem[]_ | - | | accept | 允许上传的文件类型，[详细说明](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file#%E9%99%90%E5%88%B6%E5%85%81%E8%AE%B8%E7%9A%84%E6%96%87%E4%BB%B6%E7%B1%BB%E5%9E%8B) | _string_ | `image/*` | -| name | 标识符，可以在回调函数的第二项参数中获取 | _number \| string_ | - | +| name | 标识符，通常为一个唯一的字符串或数字，可以在回调函数的第二项参数中获取 | _number \| string_ | - | | preview-size | 预览图和上传区域的尺寸，默认单位为 `px` | _number \| string \| Array_ | `80px` | | preview-image | 是否在上传完成后展示预览图 | _boolean_ | `true` | | preview-full-image | 是否在点击预览图后展示全屏图片预览 | _boolean_ | `true` | diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5cb26eff5..aea155a55 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -101,8 +101,8 @@ importers: '@vant/markdown-vetur': ^2.3.0 '@vant/stylelint-config': ^1.4.2 '@vant/touch-emulator': ^1.3.2 - '@vitejs/plugin-vue': ^2.0.0 - '@vitejs/plugin-vue-jsx': ^1.3.3 + '@vitejs/plugin-vue': ^3.0.1 + '@vitejs/plugin-vue-jsx': ^2.0.0 '@vue/babel-plugin-jsx': ^1.1.1 autoprefixer: ^10.4.0 commander: ^9.3.0 @@ -134,7 +134,7 @@ importers: stylelint: ^13.0.0 transliteration: ^2.2.0 typescript: ^4.7.4 - vite: ^2.9.0 + vite: ^3.0.0 vite-plugin-html: ^2.1.1 vite-plugin-md: ^0.11.4 vue: ^3.2.27 @@ -149,8 +149,8 @@ importers: '@vant/markdown-vetur': link:../vant-markdown-vetur '@vant/stylelint-config': link:../vant-stylelint-config '@vant/touch-emulator': link:../vant-touch-emulator - '@vitejs/plugin-vue': 2.3.3_vite@2.9.13+vue@3.2.37 - '@vitejs/plugin-vue-jsx': 1.3.10 + '@vitejs/plugin-vue': 3.0.1_vite@3.0.2+vue@3.2.37 + '@vitejs/plugin-vue-jsx': 2.0.0_vite@3.0.2+vue@3.2.37 '@vue/babel-plugin-jsx': 1.1.1_@babel+core@7.18.6 autoprefixer: 10.4.7_postcss@8.4.14 commander: 9.3.0 @@ -180,9 +180,9 @@ importers: stylelint: 13.13.1 transliteration: 2.2.0 typescript: 4.7.4 - vite: 2.9.13_less@4.1.3 - vite-plugin-html: 2.1.2_vite@2.9.13 - vite-plugin-md: 0.11.9_vite@2.9.13 + vite: 3.0.2_less@4.1.3 + vite-plugin-html: 2.1.2_vite@3.0.2 + vite-plugin-md: 0.11.9_vite@3.0.2 vue-router: 4.0.16_vue@3.2.37 devDependencies: '@jest/types': 27.5.1 @@ -751,6 +751,20 @@ packages: - supports-color dev: false + /@babel/plugin-transform-typescript/7.18.8_@babel+core@7.18.6: + resolution: {integrity: sha512-p2xM8HI83UObjsZGofMV/EdYjamsDm6MoN3hXPYIT0+gxIoopE+B7rPYKAxfrz9K9PK7JafTTjqYC6qipLExYA==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.18.6 + '@babel/helper-create-class-features-plugin': 7.18.6_@babel+core@7.18.6 + '@babel/helper-plugin-utils': 7.18.6 + '@babel/plugin-syntax-typescript': 7.18.6_@babel+core@7.18.6 + transitivePeerDependencies: + - supports-color + dev: false + /@babel/preset-typescript/7.18.6_@babel+core@7.18.6: resolution: {integrity: sha512-s9ik86kXBAnD760aybBucdpnLsAt0jK1xqJn2juOn9lkOvSHV60os5hxoVJsPzMQxvnUJFAlkont2DvvaYEBtQ==} engines: {node: '>=6.9.0'} @@ -1601,28 +1615,31 @@ packages: eslint-visitor-keys: 3.3.0 dev: false - /@vitejs/plugin-vue-jsx/1.3.10: - resolution: {integrity: sha512-Cf5zznh4yNMiEMBfTOztaDVDmK1XXfgxClzOSUVUc8WAmHzogrCUeM8B05ABzuGtg0D1amfng+mUmSIOFGP3Pw==} - engines: {node: '>=12.0.0'} + /@vitejs/plugin-vue-jsx/2.0.0_vite@3.0.2+vue@3.2.37: + resolution: {integrity: sha512-WF9ApZ/ivyyW3volQfu0Td0KNPhcccYEaRNzNY1NxRLVJQLSX0nFqquv3e2g7MF74p1XZK4bGtDL2y5i5O5+1A==} + engines: {node: '>=14.18.0'} + peerDependencies: + vite: ^3.0.0 + vue: ^3.0.0 dependencies: '@babel/core': 7.18.6 '@babel/plugin-syntax-import-meta': 7.10.4_@babel+core@7.18.6 - '@babel/plugin-transform-typescript': 7.18.6_@babel+core@7.18.6 - '@rollup/pluginutils': 4.2.1 + '@babel/plugin-transform-typescript': 7.18.8_@babel+core@7.18.6 '@vue/babel-plugin-jsx': 1.1.1_@babel+core@7.18.6 - hash-sum: 2.0.0 + vite: 3.0.2_less@4.1.3 + vue: 3.2.37 transitivePeerDependencies: - supports-color dev: false - /@vitejs/plugin-vue/2.3.3_vite@2.9.13+vue@3.2.37: - resolution: {integrity: sha512-SmQLDyhz+6lGJhPELsBdzXGc+AcaT8stgkbiTFGpXPe8Tl1tJaBw1A6pxDqDuRsVkD8uscrkx3hA7QDOoKYtyw==} - engines: {node: '>=12.0.0'} + /@vitejs/plugin-vue/3.0.1_vite@3.0.2+vue@3.2.37: + resolution: {integrity: sha512-Ll9JgxG7ONIz/XZv3dssfoMUDu9qAnlJ+km+pBA0teYSXzwPCIzS/e1bmwNYl5dcQGs677D21amgfYAnzMl17A==} + engines: {node: ^14.18.0 || >=16.0.0} peerDependencies: - vite: ^2.5.10 + vite: ^3.0.0 vue: ^3.2.25 dependencies: - vite: 2.9.13_less@4.1.3 + vite: 3.0.2_less@4.1.3 vue: 3.2.37 dev: false @@ -7293,7 +7310,7 @@ packages: unist-util-stringify-position: 2.0.3 vfile-message: 2.0.4 - /vite-plugin-html/2.1.2_vite@2.9.13: + /vite-plugin-html/2.1.2_vite@3.0.2: resolution: {integrity: sha512-7HXkL6n7M2qDEaUV4Vnz8yM2glW4gV36d5HSBIM5gOoAG1PkuQb4Vv9FTPgPiQxq4sPRf/6IgABX0MeLVW+CyQ==} peerDependencies: vite: '>=2.0.0' @@ -7304,10 +7321,10 @@ packages: ejs: 3.1.8 fs-extra: 10.1.0 html-minifier-terser: 6.1.0 - vite: 2.9.13_less@4.1.3 + vite: 3.0.2_less@4.1.3 dev: false - /vite-plugin-md/0.11.9_vite@2.9.13: + /vite-plugin-md/0.11.9_vite@3.0.2: resolution: {integrity: sha512-0uD2BPIct3FbEA1hAm56hlrBByEn542HTsS/FoWf33lJIgijVBDDV6FE12ud0SHS6sculITKliF2ntog2kiHmQ==} peerDependencies: vite: ^2.0.0 @@ -7317,17 +7334,18 @@ packages: '@types/markdown-it': 12.2.3 gray-matter: 4.0.3 markdown-it: 12.3.2 - vite: 2.9.13_less@4.1.3 + vite: 3.0.2_less@4.1.3 dev: false - /vite/2.9.13_less@4.1.3: - resolution: {integrity: sha512-AsOBAaT0AD7Mhe8DuK+/kE4aWYFMx/i0ZNi98hJclxb4e0OhQcZYUrvLjIaQ8e59Ui7txcvKMiJC1yftqpQoDw==} - engines: {node: '>=12.2.0'} + /vite/3.0.2_less@4.1.3: + resolution: {integrity: sha512-TAqydxW/w0U5AoL5AsD9DApTvGb2iNbGs3sN4u2VdT1GFkQVUfgUldt+t08TZgi23uIauh1TUOQJALduo9GXqw==} + engines: {node: ^14.18.0 || >=16.0.0} hasBin: true peerDependencies: less: '*' sass: '*' stylus: '*' + terser: ^5.4.0 peerDependenciesMeta: less: optional: true @@ -7335,6 +7353,8 @@ packages: optional: true stylus: optional: true + terser: + optional: true dependencies: esbuild: 0.14.48 less: 4.1.3