feat(SubmitBar): add placeholder prop (#10725)

packages/vant-cli/package.json

@@ -42,7 +42,6 @@
     "@types/fs-extra": "^9.0.13",
     "@types/less": "^3.0.3",
     "@types/markdown-it": "^12.2.3",
-    "@types/react": "^18",
     "@jest/types": "^27",
     "vue": "^3.2.27",
     "react": "^18",

packages/vant/src/submit-bar/README.md

@@ -106,6 +106,7 @@ export default {
 | disabled | Whether to disable button | _boolean_ | `false` |
 | loading | Whether to show loading icon | _boolean_ | `false` |
 | 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` |
 
 ### Events
 

packages/vant/src/submit-bar/README.zh-CN.md

@@ -113,6 +113,7 @@ export default {
 | disabled | 是否禁用按钮 | _boolean_ | `false` |
 | loading | 是否显示将按钮显示为加载中状态 | _boolean_ | `false` |
 | safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/advanced-usage#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` |
+| placeholder `v3.5.1` | 是否在标签位置生成一个等高的占位元素 | _boolean_ | `false` |
 
 ### Events
 

packages/vant/src/submit-bar/SubmitBar.tsx

@@ -1,4 +1,9 @@
-import { defineComponent, type PropType, type ExtractPropTypes } from 'vue';
+import {
+  ref,
+  defineComponent,
+  type PropType,
+  type ExtractPropTypes,
+} from 'vue';
 import {
   truthProp,
   makeStringProp,
@@ -9,6 +14,7 @@ import {
 // Components
 import { Icon } from '../icon';
 import { Button, ButtonType } from '../button';
+import { usePlaceholder } from '../composables/use-placeholder';
 
 const [name, bem, t] = createNamespace('submit-bar');
 
@@ -27,6 +33,7 @@ const submitBarProps = {
   buttonType: makeStringProp<ButtonType>('danger'),
   buttonColor: String,
   suffixLabel: String,
+  placeholder: Boolean,
   decimalLength: makeNumericProp(2),
   safeAreaInsetBottom: truthProp,
 };
@@ -41,6 +48,9 @@ export default defineComponent({
   emits: ['submit'],
 
   setup(props, { emit, slots }) {
+    const root = ref<HTMLElement>();
+    const renderPlaceholder = usePlaceholder(root, bem);
+
     const renderText = () => {
       const { price, label, currency, textAlign, suffixLabel, decimalLength } =
         props;
@@ -99,8 +109,9 @@ export default defineComponent({
       );
     };
 
-    return () => (
+    const renderSubmitBar = () => (
       <div
+        ref={root}
         class={[bem(), { 'van-safe-area-bottom': props.safeAreaInsetBottom }]}
       >
         {slots.top?.()}
@@ -112,5 +123,12 @@ export default defineComponent({
         </div>
       </div>
     );
+
+    return () => {
+      if (props.placeholder) {
+        return renderPlaceholder(renderSubmitBar);
+      }
+      return renderSubmitBar();
+    };
   },
 });

packages/vant/src/submit-bar/test/__snapshots__/index.spec.ts.snap

@@ -47,6 +47,23 @@ exports[`should render disabled submit button correctly 1`] = `
 </button>
 `;
 
+exports[`should render placeholder element when using placeholder prop 1`] = `
+<div class="van-submit-bar__placeholder"
+     style="height: 50px;"
+>
+  <div class="van-submit-bar van-safe-area-bottom">
+    <div class="van-submit-bar__bar">
+      <button type="button"
+              class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger"
+      >
+        <div class="van-button__content">
+        </div>
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`should render suffix-label correctly 1`] = `
 <div class="van-submit-bar__text">
   <span>

packages/vant/src/submit-bar/test/index.spec.ts

@@ -1,5 +1,5 @@
 import { SubmitBar } from '..';
-import { mount } from '../../../test';
+import { later, mockGetBoundingClientRect, mount } from '../../../test';
 
 test('should emit submit event when submit button is clicked', () => {
   const wrapper = mount(SubmitBar);
@@ -107,3 +107,16 @@ test('should render button slot correctly', () => {
   });
   expect(wrapper.html()).toMatchSnapshot();
 });
+
+test('should render placeholder element when using placeholder prop', async () => {
+  const restore = mockGetBoundingClientRect({ height: 50 });
+  const wrapper = mount(SubmitBar, {
+    props: {
+      placeholder: true,
+    },
+  });
+
+  await later();
+  expect(wrapper.html()).toMatchSnapshot();
+  restore();
+});

pnpm-lock.yaml

@@ -97,7 +97,6 @@ importers:
       '@types/jest': ^27.0.3
       '@types/less': ^3.0.3
       '@types/markdown-it': ^12.2.3
-      '@types/react': ^18
       '@vant/eslint-config': ^3.3.2
       '@vant/markdown-vetur': ^2.3.0
       '@vant/stylelint-config': ^1.4.2
@@ -145,7 +144,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_71dc17fa2f93091b2e1d43ec53f70836
+      '@docsearch/js': 3.1.0_react-dom@18.1.0+react@18.1.0
       '@types/jest': 27.5.1
       '@vant/eslint-config': link:../vant-eslint-config
       '@vant/markdown-vetur': link:../vant-markdown-vetur
@@ -192,7 +191,6 @@ importers:
       '@types/fs-extra': 9.0.13
       '@types/less': 3.0.3
       '@types/markdown-it': 12.2.3
-      '@types/react': 18.0.9
       react: 18.1.0
       react-dom: 18.1.0_react@18.1.0
       vue: 3.2.35
@@ -780,10 +778,10 @@ packages:
     resolution: {integrity: sha512-bh5IskwkkodbvC0FzSg1AxMykfDl95hebEKwxNoq4e5QaGzOXSBgW8+jnMFZ7JU4sTBiB04vZWoUSzNrPboLZA==}
     dev: false
 
-  /@docsearch/js/3.1.0_71dc17fa2f93091b2e1d43ec53f70836:
+  /@docsearch/js/3.1.0_react-dom@18.1.0+react@18.1.0:
     resolution: {integrity: sha512-5XSK+xbP0hcTIp54MECqxkWLs6kf7Ug4nWdxWNtx8cUpLiFNFnKXDxCb35wnyNpjukmrx7Q9DkO5tFFsmNVxng==}
     dependencies:
-      '@docsearch/react': 3.1.0_71dc17fa2f93091b2e1d43ec53f70836
+      '@docsearch/react': 3.1.0_react-dom@18.1.0+react@18.1.0
       preact: 10.7.2
     transitivePeerDependencies:
       - '@types/react'
@@ -791,7 +789,7 @@ packages:
       - react-dom
     dev: false
 
-  /@docsearch/react/3.1.0_71dc17fa2f93091b2e1d43ec53f70836:
+  /@docsearch/react/3.1.0_react-dom@18.1.0+react@18.1.0:
     resolution: {integrity: sha512-bjB6ExnZzf++5B7Tfoi6UXgNwoUnNOfZ1NyvnvPhWgCMy5V/biAtLL4o7owmZSYdAKeFSvZ5Lxm0is4su/dBWg==}
     peerDependencies:
       '@types/react': '>= 16.8.0 < 19.0.0'
@@ -800,7 +798,6 @@ packages:
     dependencies:
       '@algolia/autocomplete-core': 1.6.3
       '@docsearch/css': 3.1.0
-      '@types/react': 18.0.9
       algoliasearch: 4.13.1
       react: 18.1.0
       react-dom: 18.1.0_react@18.1.0
@@ -1380,24 +1377,11 @@ packages:
     resolution: {integrity: sha512-XFjFHmaLVifrAKaZ+EKghFHtHSUonyw8P2Qmy2/+osBnrKbH9UYtlK10zg8/kCt47MFilll/DEDKy3DHfJ0URw==}
     dev: false
 
-  /@types/prop-types/15.7.5:
-    resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==}
-
-  /@types/react/18.0.9:
-    resolution: {integrity: sha512-9bjbg1hJHUm4De19L1cHiW0Jvx3geel6Qczhjd0qY5VKVE2X5+x77YxAepuCwVh4vrgZJdgEJw48zrhRIeF4Nw==}
-    dependencies:
-      '@types/prop-types': 15.7.5
-      '@types/scheduler': 0.16.2
-      csstype: 3.1.0
-
   /@types/responselike/1.0.0:
     resolution: {integrity: sha512-85Y2BjiufFzaMIlvJDvTTB8Fxl2xfLo4HgmHzVBz08w4wDePCTjYw66PdrolO0kzli3yam/YCgRufyo1DdQVTA==}
     dependencies:
       '@types/node': 17.0.35
 
-  /@types/scheduler/0.16.2:
-    resolution: {integrity: sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==}
-
   /@types/stack-utils/2.0.1:
     resolution: {integrity: sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==}
     dev: false
@@ -2576,9 +2560,6 @@ packages:
   /csstype/2.6.20:
     resolution: {integrity: sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==}
 
-  /csstype/3.1.0:
-    resolution: {integrity: sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==}
-
   /dargs/7.0.0:
     resolution: {integrity: sha512-2iy1EkLdlBzQGvbweYRFxmFath8+K7+AKB0TlhHWkNuH+TmovaMH/Wp7V7R4u7f4SnX3OgLsU9t1NI9ioDnUpg==}
     engines: {node: '>=8'}