From a1c79f42ff608a4330051a88e4ea9473510be9a1 Mon Sep 17 00:00:00 2001 From: neverland Date: Sat, 18 Jun 2022 18:26:08 +0800 Subject: [PATCH] feat(ActionBar): add placeholder prop (#10724) --- packages/vant/src/action-bar/ActionBar.tsx | 16 +++- packages/vant/src/action-bar/README.md | 1 + packages/vant/src/action-bar/README.zh-CN.md | 1 + .../test/__snapshots__/index.spec.ts.snap | 9 +++ .../vant/src/action-bar/test/index.spec.ts | 15 +++- pnpm-lock.yaml | 76 +++++++++---------- 6 files changed, 77 insertions(+), 41 deletions(-) diff --git a/packages/vant/src/action-bar/ActionBar.tsx b/packages/vant/src/action-bar/ActionBar.tsx index f1df59efb..e7343d554 100644 --- a/packages/vant/src/action-bar/ActionBar.tsx +++ b/packages/vant/src/action-bar/ActionBar.tsx @@ -1,12 +1,14 @@ -import { defineComponent, type ExtractPropTypes } from 'vue'; +import { defineComponent, ref, type ExtractPropTypes } from 'vue'; import { truthProp, createNamespace } from '../utils'; import { useChildren } from '@vant/use'; +import { usePlaceholder } from '../composables/use-placeholder'; const [name, bem] = createNamespace('action-bar'); export const ACTION_BAR_KEY = Symbol(name); const actionBarProps = { + placeholder: Boolean, safeAreaInsetBottom: truthProp, }; @@ -18,16 +20,26 @@ export default defineComponent({ props: actionBarProps, setup(props, { slots }) { + const root = ref(); + const renderPlaceholder = usePlaceholder(root, bem); const { linkChildren } = useChildren(ACTION_BAR_KEY); linkChildren(); - return () => ( + const renderActionBar = () => (
{slots.default?.()}
); + + return () => { + if (props.placeholder) { + return renderPlaceholder(renderActionBar); + } + return renderActionBar(); + }; }, }); diff --git a/packages/vant/src/action-bar/README.md b/packages/vant/src/action-bar/README.md index 3f8033317..cef219aa8 100644 --- a/packages/vant/src/action-bar/README.md +++ b/packages/vant/src/action-bar/README.md @@ -90,6 +90,7 @@ Use `badge` prop to show badge in icon. | Attribute | Description | Type | Default | | --- | --- | --- | --- | | safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `true` | +| placeholder `v3.5.1` | Whether to generate a placeholder element | _boolean_ | `false` | ### ActionBarIcon Props diff --git a/packages/vant/src/action-bar/README.zh-CN.md b/packages/vant/src/action-bar/README.zh-CN.md index d9e0b40e7..04c08b53a 100644 --- a/packages/vant/src/action-bar/README.zh-CN.md +++ b/packages/vant/src/action-bar/README.zh-CN.md @@ -94,6 +94,7 @@ export default { | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/advanced-usage#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` | +| placeholder `v3.5.1` | 是否在标签位置生成一个等高的占位元素 | _boolean_ | `false` | ### ActionBarIcon Props diff --git a/packages/vant/src/action-bar/test/__snapshots__/index.spec.ts.snap b/packages/vant/src/action-bar/test/__snapshots__/index.spec.ts.snap index 00a3012f5..eb736552a 100644 --- a/packages/vant/src/action-bar/test/__snapshots__/index.spec.ts.snap +++ b/packages/vant/src/action-bar/test/__snapshots__/index.spec.ts.snap @@ -4,3 +4,12 @@ exports[`should allow to disable safe-area-inset-bottom prop 1`] = `
`; + +exports[`should render placeholder element when using placeholder prop 1`] = ` +
+
+
+
+`; diff --git a/packages/vant/src/action-bar/test/index.spec.ts b/packages/vant/src/action-bar/test/index.spec.ts index b494fb8c6..0fea7cf8e 100644 --- a/packages/vant/src/action-bar/test/index.spec.ts +++ b/packages/vant/src/action-bar/test/index.spec.ts @@ -1,5 +1,5 @@ import { ActionBar } from '..'; -import { mount } from '../../../test'; +import { later, mockGetBoundingClientRect, mount } from '../../../test'; test('should allow to disable safe-area-inset-bottom prop', () => { const wrapper = mount(ActionBar, { @@ -10,3 +10,16 @@ test('should allow to disable safe-area-inset-bottom prop', () => { expect(wrapper.html()).toMatchSnapshot(); }); + +test('should render placeholder element when using placeholder prop', async () => { + const restore = mockGetBoundingClientRect({ height: 50 }); + const wrapper = mount(ActionBar, { + props: { + placeholder: true, + }, + }); + + await later(); + expect(wrapper.html()).toMatchSnapshot(); + restore(); +}); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2365b37fe..55b9c3940 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,4 +1,4 @@ -lockfileVersion: 5.4 +lockfileVersion: 5.3 importers: @@ -145,7 +145,7 @@ importers: '@babel/core': 7.18.0 '@babel/preset-typescript': 7.17.12_@babel+core@7.18.0 '@docsearch/css': 3.1.0 - '@docsearch/js': 3.1.0_ohobp6rpsmerwlq5ipwfh5yigy + '@docsearch/js': 3.1.0_71dc17fa2f93091b2e1d43ec53f70836 '@types/jest': 27.5.1 '@vant/eslint-config': link:../vant-eslint-config '@vant/markdown-vetur': link:../vant-markdown-vetur @@ -174,7 +174,7 @@ importers: less: 4.1.2 lint-staged: 12.4.1 markdown-it: 12.3.2 - markdown-it-anchor: 8.6.4_2zb4u3vubltivolgu556vv4aom + markdown-it-anchor: 8.6.4_d643ca6eb40ae68ab966a77bead78073 ora: 6.1.0 postcss: 8.4.14 postcss-load-config: 3.1.4_postcss@8.4.14 @@ -209,11 +209,11 @@ importers: eslint-plugin-vue: ^8.4.0 typescript: ~4.5.5 dependencies: - '@typescript-eslint/eslint-plugin': 5.25.0_dg3jhdzlymyucojlallgs3i2wy - '@typescript-eslint/parser': 5.25.0_els4elilzrtenp42wxa4dytc34 - eslint-config-airbnb-base: 15.0.0_btspkuwbqkl4adpiufzbathtpi + '@typescript-eslint/eslint-plugin': 5.25.0_19b6938f2bc33141392b02d6696d1ab6 + '@typescript-eslint/parser': 5.25.0_eslint@8.16.0+typescript@4.5.5 + eslint-config-airbnb-base: 15.0.0_0ce4f552c18297c00de8a172104cf37a eslint-config-prettier: 8.5.0_eslint@8.16.0 - eslint-plugin-import: 2.26.0_fpv4l7j2iomztwskn7bai2v6a4 + eslint-plugin-import: 2.26.0_2bebc5fd3a439999da4a6fc2046abe07 eslint-plugin-vue: 8.7.1_eslint@8.16.0 devDependencies: enhanced-resolve: 5.9.3 @@ -780,10 +780,10 @@ packages: resolution: {integrity: sha512-bh5IskwkkodbvC0FzSg1AxMykfDl95hebEKwxNoq4e5QaGzOXSBgW8+jnMFZ7JU4sTBiB04vZWoUSzNrPboLZA==} dev: false - /@docsearch/js/3.1.0_ohobp6rpsmerwlq5ipwfh5yigy: + /@docsearch/js/3.1.0_71dc17fa2f93091b2e1d43ec53f70836: resolution: {integrity: sha512-5XSK+xbP0hcTIp54MECqxkWLs6kf7Ug4nWdxWNtx8cUpLiFNFnKXDxCb35wnyNpjukmrx7Q9DkO5tFFsmNVxng==} dependencies: - '@docsearch/react': 3.1.0_ohobp6rpsmerwlq5ipwfh5yigy + '@docsearch/react': 3.1.0_71dc17fa2f93091b2e1d43ec53f70836 preact: 10.7.2 transitivePeerDependencies: - '@types/react' @@ -791,7 +791,7 @@ packages: - react-dom dev: false - /@docsearch/react/3.1.0_ohobp6rpsmerwlq5ipwfh5yigy: + /@docsearch/react/3.1.0_71dc17fa2f93091b2e1d43ec53f70836: resolution: {integrity: sha512-bjB6ExnZzf++5B7Tfoi6UXgNwoUnNOfZ1NyvnvPhWgCMy5V/biAtLL4o7owmZSYdAKeFSvZ5Lxm0is4su/dBWg==} peerDependencies: '@types/react': '>= 16.8.0 < 19.0.0' @@ -1222,7 +1222,7 @@ packages: '@sinonjs/commons': 1.8.3 dev: false - /@stylelint/postcss-css-in-js/0.37.3_j55xdkkcxc32kvnyvx3y7casfm: + /@stylelint/postcss-css-in-js/0.37.3_4f7b71a942b8b7a555b8adf78f88122b: resolution: {integrity: sha512-scLk3cSH1H9KggSniseb2KNAU5D9FWc3H7BxCSAIdtU9OWIyw0zkEZ9qEKHryRM+SExYXRKNb7tOOVNAsQ3iwg==} peerDependencies: postcss: '>=7.0.0' @@ -1230,11 +1230,11 @@ packages: dependencies: '@babel/core': 7.18.0 postcss: 7.0.39 - postcss-syntax: 0.36.2_kei4jy7wdgbhc236h4oijypxom + postcss-syntax: 0.36.2_5111c4e3f61982716b7e3f1c84e1f773 transitivePeerDependencies: - supports-color - /@stylelint/postcss-markdown/0.36.2_j55xdkkcxc32kvnyvx3y7casfm: + /@stylelint/postcss-markdown/0.36.2_4f7b71a942b8b7a555b8adf78f88122b: resolution: {integrity: sha512-2kGbqUVJUGE8dM+bMzXG/PYUWKkjLIkRLWNh39OaADkiabDRdw8ATFCgbMz5xdIcvwspPAluSL7uY+ZiTWdWmQ==} deprecated: 'Use the original unforked package instead: postcss-markdown' peerDependencies: @@ -1242,7 +1242,7 @@ packages: postcss-syntax: '>=0.36.2' dependencies: postcss: 7.0.39 - postcss-syntax: 0.36.2_kei4jy7wdgbhc236h4oijypxom + postcss-syntax: 0.36.2_5111c4e3f61982716b7e3f1c84e1f773 remark: 13.0.0 unist-util-find-all-after: 3.0.2 transitivePeerDependencies: @@ -1419,7 +1419,7 @@ packages: dependencies: '@types/yargs-parser': 21.0.0 - /@typescript-eslint/eslint-plugin/5.25.0_dg3jhdzlymyucojlallgs3i2wy: + /@typescript-eslint/eslint-plugin/5.25.0_19b6938f2bc33141392b02d6696d1ab6: resolution: {integrity: sha512-icYrFnUzvm+LhW0QeJNKkezBu6tJs9p/53dpPLFH8zoM9w1tfaKzVurkPotEpAqQ8Vf8uaFyL5jHd0Vs6Z0ZQg==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: @@ -1430,10 +1430,10 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/parser': 5.25.0_els4elilzrtenp42wxa4dytc34 + '@typescript-eslint/parser': 5.25.0_eslint@8.16.0+typescript@4.5.5 '@typescript-eslint/scope-manager': 5.25.0 - '@typescript-eslint/type-utils': 5.25.0_els4elilzrtenp42wxa4dytc34 - '@typescript-eslint/utils': 5.25.0_els4elilzrtenp42wxa4dytc34 + '@typescript-eslint/type-utils': 5.25.0_eslint@8.16.0+typescript@4.5.5 + '@typescript-eslint/utils': 5.25.0_eslint@8.16.0+typescript@4.5.5 debug: 4.3.4 eslint: 8.16.0 functional-red-black-tree: 1.0.1 @@ -1446,7 +1446,7 @@ packages: - supports-color dev: false - /@typescript-eslint/parser/5.25.0_els4elilzrtenp42wxa4dytc34: + /@typescript-eslint/parser/5.25.0_eslint@8.16.0+typescript@4.5.5: resolution: {integrity: sha512-r3hwrOWYbNKP1nTcIw/aZoH+8bBnh/Lh1iDHoFpyG4DnCpvEdctrSl6LOo19fZbzypjQMHdajolxs6VpYoChgA==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: @@ -1474,7 +1474,7 @@ packages: '@typescript-eslint/visitor-keys': 5.25.0 dev: false - /@typescript-eslint/type-utils/5.25.0_els4elilzrtenp42wxa4dytc34: + /@typescript-eslint/type-utils/5.25.0_eslint@8.16.0+typescript@4.5.5: resolution: {integrity: sha512-B6nb3GK3Gv1Rsb2pqalebe/RyQoyG/WDy9yhj8EE0Ikds4Xa8RR28nHz+wlt4tMZk5bnAr0f3oC8TuDAd5CPrw==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: @@ -1484,7 +1484,7 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/utils': 5.25.0_els4elilzrtenp42wxa4dytc34 + '@typescript-eslint/utils': 5.25.0_eslint@8.16.0+typescript@4.5.5 debug: 4.3.4 eslint: 8.16.0 tsutils: 3.21.0_typescript@4.5.5 @@ -1519,7 +1519,7 @@ packages: - supports-color dev: false - /@typescript-eslint/utils/5.25.0_els4elilzrtenp42wxa4dytc34: + /@typescript-eslint/utils/5.25.0_eslint@8.16.0+typescript@4.5.5: resolution: {integrity: sha512-qNC9bhnz/n9Kba3yI6HQgQdBLuxDoMgdjzdhSInZh6NaDnFpTUlwNGxplUFWfY260Ya0TRPvkg9dd57qxrJI9g==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: @@ -3168,7 +3168,7 @@ packages: source-map: 0.6.1 dev: false - /eslint-config-airbnb-base/15.0.0_btspkuwbqkl4adpiufzbathtpi: + /eslint-config-airbnb-base/15.0.0_0ce4f552c18297c00de8a172104cf37a: resolution: {integrity: sha512-xaX3z4ZZIcFLvh2oUNvcX5oEofXda7giYmuplVxoOg5A7EXJMrUyqRgR+mhDhPK8LZ4PttFOBvCYDbX3sUoUig==} engines: {node: ^10.12.0 || >=12.0.0} peerDependencies: @@ -3177,7 +3177,7 @@ packages: dependencies: confusing-browser-globals: 1.0.11 eslint: 8.16.0 - eslint-plugin-import: 2.26.0_fpv4l7j2iomztwskn7bai2v6a4 + eslint-plugin-import: 2.26.0_2bebc5fd3a439999da4a6fc2046abe07 object.assign: 4.1.2 object.entries: 1.1.5 semver: 6.3.0 @@ -3201,7 +3201,7 @@ packages: - supports-color dev: false - /eslint-module-utils/2.7.3_mcjqbk7r2nrqjiufidliyvmmpu: + /eslint-module-utils/2.7.3_609300abf1d36304a28540d68c558c7d: resolution: {integrity: sha512-088JEC7O3lDZM9xGe0RerkOMd0EjFl+Yvd1jPWIkMT5u3H9+HC34mWWPnqPrN13gieT9pBOO+Qt07Nb/6TresQ==} engines: {node: '>=4'} peerDependencies: @@ -3219,7 +3219,7 @@ packages: eslint-import-resolver-webpack: optional: true dependencies: - '@typescript-eslint/parser': 5.25.0_els4elilzrtenp42wxa4dytc34 + '@typescript-eslint/parser': 5.25.0_eslint@8.16.0+typescript@4.5.5 debug: 3.2.7 eslint-import-resolver-node: 0.3.6 find-up: 2.1.0 @@ -3227,7 +3227,7 @@ packages: - supports-color dev: false - /eslint-plugin-import/2.26.0_fpv4l7j2iomztwskn7bai2v6a4: + /eslint-plugin-import/2.26.0_2bebc5fd3a439999da4a6fc2046abe07: resolution: {integrity: sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==} engines: {node: '>=4'} peerDependencies: @@ -3237,14 +3237,14 @@ packages: '@typescript-eslint/parser': optional: true dependencies: - '@typescript-eslint/parser': 5.25.0_els4elilzrtenp42wxa4dytc34 + '@typescript-eslint/parser': 5.25.0_eslint@8.16.0+typescript@4.5.5 array-includes: 3.1.5 array.prototype.flat: 1.3.0 debug: 2.6.9 doctrine: 2.1.0 eslint: 8.16.0 eslint-import-resolver-node: 0.3.6 - eslint-module-utils: 2.7.3_mcjqbk7r2nrqjiufidliyvmmpu + eslint-module-utils: 2.7.3_609300abf1d36304a28540d68c558c7d has: 1.0.3 is-core-module: 2.9.0 is-glob: 4.0.3 @@ -5369,7 +5369,7 @@ packages: resolution: {integrity: sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==} engines: {node: '>=8'} - /markdown-it-anchor/8.6.4_2zb4u3vubltivolgu556vv4aom: + /markdown-it-anchor/8.6.4_d643ca6eb40ae68ab966a77bead78073: resolution: {integrity: sha512-Ul4YVYZNxMJYALpKtu+ZRdrryYt/GlQ5CK+4l1bp/gWXOG2QWElt6AqF3Mih/wfUKdZbNAZVXGR73/n6U/8img==} peerDependencies: '@types/markdown-it': '*' @@ -6026,7 +6026,7 @@ packages: find-up: 4.1.0 dev: false - /postcss-html/0.36.0_j55xdkkcxc32kvnyvx3y7casfm: + /postcss-html/0.36.0_4f7b71a942b8b7a555b8adf78f88122b: resolution: {integrity: sha512-HeiOxGcuwID0AFsNAL0ox3mW6MHH5cstWN1Z3Y+n6H+g12ih7LHdYxWwEA/QmrebctLjo79xz9ouK3MroHwOJw==} peerDependencies: postcss: '>=5.0.0' @@ -6034,7 +6034,7 @@ packages: dependencies: htmlparser2: 3.10.1 postcss: 7.0.39 - postcss-syntax: 0.36.2_kei4jy7wdgbhc236h4oijypxom + postcss-syntax: 0.36.2_5111c4e3f61982716b7e3f1c84e1f773 /postcss-less/3.1.4: resolution: {integrity: sha512-7TvleQWNM2QLcHqvudt3VYjULVB49uiW6XzEUFmvwHzvsOEF5MwBrIXZDJQvJNFGjJQTzSzZnDoCJ8h/ljyGXA==} @@ -6090,7 +6090,7 @@ packages: cssesc: 3.0.0 util-deprecate: 1.0.2 - /postcss-syntax/0.36.2_kei4jy7wdgbhc236h4oijypxom: + /postcss-syntax/0.36.2_5111c4e3f61982716b7e3f1c84e1f773: resolution: {integrity: sha512-nBRg/i7E3SOHWxF3PpF5WnJM/jQ1YpY9000OaVXlAQj6Zp/kIqJxEDWIZ67tAd7NLuk7zqN4yqe9nc0oNAOs1w==} peerDependencies: postcss: '>=5.0.0' @@ -6112,7 +6112,7 @@ packages: optional: true dependencies: postcss: 7.0.39 - postcss-html: 0.36.0_j55xdkkcxc32kvnyvx3y7casfm + postcss-html: 0.36.0_4f7b71a942b8b7a555b8adf78f88122b postcss-less: 3.1.4 postcss-scss: 2.1.1 @@ -6938,8 +6938,8 @@ packages: engines: {node: '>=10.13.0'} hasBin: true dependencies: - '@stylelint/postcss-css-in-js': 0.37.3_j55xdkkcxc32kvnyvx3y7casfm - '@stylelint/postcss-markdown': 0.36.2_j55xdkkcxc32kvnyvx3y7casfm + '@stylelint/postcss-css-in-js': 0.37.3_4f7b71a942b8b7a555b8adf78f88122b + '@stylelint/postcss-markdown': 0.36.2_4f7b71a942b8b7a555b8adf78f88122b autoprefixer: 9.8.8 balanced-match: 2.0.0 chalk: 4.1.2 @@ -6965,7 +6965,7 @@ packages: micromatch: 4.0.5 normalize-selector: 0.2.0 postcss: 7.0.39 - postcss-html: 0.36.0_j55xdkkcxc32kvnyvx3y7casfm + postcss-html: 0.36.0_4f7b71a942b8b7a555b8adf78f88122b postcss-less: 3.1.4 postcss-media-query-parser: 0.2.3 postcss-resolve-nested-selector: 0.1.1 @@ -6973,7 +6973,7 @@ packages: postcss-sass: 0.4.4 postcss-scss: 2.1.1 postcss-selector-parser: 6.0.10 - postcss-syntax: 0.36.2_kei4jy7wdgbhc236h4oijypxom + postcss-syntax: 0.36.2_5111c4e3f61982716b7e3f1c84e1f773 postcss-value-parser: 4.2.0 resolve-from: 5.0.0 slash: 3.0.0