ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-10-15 15:40:52 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

feat(ActionBar): add placeholder prop (#10724)

Browse Source
This commit is contained in:
neverland
2022-06-18 18:26:08 +08:00
committed by GitHub
parent 6225c8123c
commit a1c79f42ff
6 changed files with 77 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/vant/src/action-bar/ActionBar.tsx
View File

@@ -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<HTMLElement>();
const renderPlaceholder = usePlaceholder(root, bem);
const { linkChildren } = useChildren(ACTION_BAR_KEY);
linkChildren();
return () => (
const renderActionBar = () => (
<div
ref={root}
class={[bem(), { 'van-safe-area-bottom': props.safeAreaInsetBottom }]}
>
{slots.default?.()}
</div>
);
return () => {
if (props.placeholder) {
return renderPlaceholder(renderActionBar);
}
return renderActionBar();
};
},
});

1
packages/vant/src/action-bar/README.md
View File

@@ -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

1
packages/vant/src/action-bar/README.zh-CN.md
View File

@@ -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

9
packages/vant/src/action-bar/test/__snapshots__/index.spec.ts.snap
View File

@@ -4,3 +4,12 @@ exports[`should allow to disable safe-area-inset-bottom prop 1`] = `
<div class="van-action-bar">
</div>
`;
exports[`should render placeholder element when using placeholder prop 1`] = `
<div class="van-action-bar__placeholder"
style="height: 50px;"
>
<div class="van-action-bar van-safe-area-bottom">
</div>
</div>
`;

15
packages/vant/src/action-bar/test/index.spec.ts
View File

@@ -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();
});

76
pnpm-lock.yaml generated
View File

@@ -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