docs(Search): update action slot demo (#10133)

* fix: update description about rc-ui-lib

* docs: update description about rc-ui-lib

* docs: update project description about rc-ui-lib

packages/vant/docs/markdown/home.en-US.md

@@ -48,7 +48,7 @@ Vant 3 supports modern browsers and Chrome >= 51、iOS >= 10.0 (same as Vue 3).
 | Project | Description |
 | --- | --- |
 | [3lang3/react-vant](https://github.com/3lang3/react-vant) | React mobile UI Components based on Vant |
-| [rc-ui-lib](https://github.com/rancui/rc-ui-lib) | React mobile UI Components based on Vant |
+| [rc-ui-lib](https://github.com/rancui/rc-ui-lib) | React Mobile UI Components Library |
 | [vant-aliapp](https://github.com/ant-move/Vant-Aliapp) | Alipay MiniProgram UI |
 | [taroify](https://gitee.com/mallfoundry/taroify) | Vant Taro |
 | [vant-theme](https://github.com/Aisen60/vant-theme) | Online theme preview built on Vant UI |

packages/vant/docs/markdown/home.zh-CN.md

@@ -62,7 +62,7 @@ Vant 3 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0（与 Vue 3 一致
 | 项目 | 描述 |
 | --- | --- |
 | [3lang3/react-vant](https://github.com/3lang3/react-vant) | 参照 Vant 打造的 React 移动端组件库 |
-| [rc-ui-lib](https://github.com/rancui/rc-ui-lib) | 参照 Vant 打造的 React 框架移动端组件库 |
+| [rc-ui-lib](https://github.com/rancui/rc-ui-lib) | 基于 Vant 的 React 版本移动端 UI 组件库 |
 | [vant-aliapp](https://github.com/ant-move/Vant-Aliapp) | Vant 支付宝小程序版 |
 | [taroify](https://gitee.com/mallfoundry/taroify) | Vant Taro 版 |
 | [vant-theme](https://github.com/Aisen60/vant-theme) | Vant 在线主题预览工具 |

packages/vant/src/cascader/Cascader.tsx

@@ -269,10 +269,10 @@ export default defineComponent({
     const renderTabs = () => (
       <Tabs
         v-model:active={activeTab.value}
+        shrink
         animated
         class={bem('tabs')}
         color={props.activeColor}
-        swipeThreshold={0}
         swipeable={props.swipeable}
         onClick-tab={onClickTab}
       >

packages/vant/src/cascader/index.less

@@ -37,19 +37,9 @@
   }
 
   &__tabs {
-    .van-tab {
-      flex: none;
-      padding: 0 10px;
-    }
-
     &.van-tabs--line .van-tabs__wrap {
       height: var(--van-cascader-tabs-height);
     }
-
-    .van-tabs__nav--complete {
-      padding-right: 6px;
-      padding-left: 6px;
-    }
   }
 
   &__tab {

packages/vant/src/cascader/test/__snapshots__/index.spec.ts.snap

@@ -75,14 +75,14 @@ exports[`should update tabs when previous tab is clicked 1`] = `
     </i>
   </div>
   <div class="van-tabs van-tabs--line van-cascader__tabs">
-    <div class="van-tabs__wrap van-tabs__wrap--scrollable">
+    <div class="van-tabs__wrap">
       <div role="tablist"
-           class="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete"
+           class="van-tabs__nav van-tabs__nav--line van-tabs__nav--shrink van-tabs__nav--complete"
            aria-orientation="horizontal"
       >
         <div id="van-tabs-0"
              role="tab"
-             class="van-tab van-tab--line van-cascader__tab"
+             class="van-tab van-tab--line van-tab--shrink van-cascader__tab"
              tabindex="-1"
              aria-selected="false"
         >
@@ -92,7 +92,7 @@ exports[`should update tabs when previous tab is clicked 1`] = `
         </div>
         <div id="van-tabs-1"
              role="tab"
-             class="van-tab van-tab--line van-tab--active van-cascader__tab van-cascader__tab--unselected"
+             class="van-tab van-tab--line van-tab--shrink van-tab--active van-cascader__tab van-cascader__tab--unselected"
              tabindex="0"
              aria-selected="true"
         >

packages/vant/src/popup/Popup.tsx

@@ -213,10 +213,11 @@ export default defineComponent({
 
     watch(
       () => props.show,
-      (value) => {
-        if (value) {
+      (show) => {
+        if (show && !opened) {
           open();
-        } else {
+        }
+        if (!show && opened) {
           opened = false;
           emit('close');
         }

packages/vant/src/popup/test/index.spec.js

@@ -129,6 +129,22 @@ test('should emit close event when show prop is set to false', async () => {
   expect(onClose).toHaveBeenCalledTimes(1);
 });
 
+test('should emit close event after clicking the overlay', async () => {
+  const onClose = jest.fn();
+  wrapper = mount(Popup, {
+    props: {
+      show: true,
+      onClose,
+      'onUpdate:show': (show) => {
+        wrapper.setProps({ show });
+      },
+    },
+  });
+
+  await wrapper.find('.van-overlay').trigger('click');
+  expect(onClose).toHaveBeenCalledTimes(1);
+});
+
 test('should change duration when using duration prop', () => {
   wrapper = mount(Popup, {
     props: {

packages/vant/src/search/README.md

@@ -107,11 +107,29 @@ Use `action` slot to custom right button, `cancel` event will no longer be Emitt
   @search="onSearch"
 >
   <template #action>
-    <div @click="onSearch">Search</div>
+    <div @click="onClickButton">Search</div>
   </template>
 </van-search>
 ```
 
+```js
+import { ref } from 'vue';
+import { Toast } from 'vant';
+
+export default {
+  setup() {
+    const value = ref('');
+    const onSearch = (val) => Toast(val);
+    const onClickButton = () => Toast(value.value);
+    return {
+      value,
+      onSearch,
+      onClickButton,
+    };
+  },
+};
+```
+
 ## API
 
 ### Props

packages/vant/src/search/README.zh-CN.md

@@ -119,11 +119,29 @@ export default {
   @search="onSearch"
 >
   <template #action>
-    <div @click="onSearch">搜索</div>
+    <div @click="onClickButton">搜索</div>
   </template>
 </van-search>
 ```
 
+```js
+import { ref } from 'vue';
+import { Toast } from 'vant';
+
+export default {
+  setup() {
+    const value = ref('');
+    const onSearch = (val) => Toast(val);
+    const onClickButton = () => Toast(value.value);
+    return {
+      value,
+      onSearch,
+      onClickButton,
+    };
+  },
+};
+```
+
 ## API
 
 ### Props

packages/vant/src/search/demo/index.vue

@@ -34,6 +34,7 @@ const value6 = ref('');
 
 const onSearch = (val: string) => Toast(val);
 const onCancel = () => Toast(t('cancel'));
+const onClickButton = () => Toast(value6.value);
 </script>
 
 <template>
@@ -83,7 +84,7 @@ const onCancel = () => Toast(t('cancel'));
       @search="onSearch"
     >
       <template #action>
-        <div @click="onSearch">{{ t('search') }}</div>
+        <div @click="onClickButton">{{ t('search') }}</div>
       </template>
     </van-search>
   </demo-block>

packages/vant/src/tab/test/__snapshots__/demo.spec.ts.snap

@@ -172,14 +172,14 @@ exports[`should render demo and match snapshot 1`] = `
 </div>
 <div>
   <div class="van-tabs van-tabs--line">
-    <div class="van-tabs__wrap van-tabs__wrap--scrollable">
+    <div class="van-tabs__wrap">
       <div role="tablist"
            class="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete"
            aria-orientation="horizontal"
       >
         <div id="van-tabs-0"
              role="tab"
-             class="van-tab van-tab--line van-tab--active"
+             class="van-tab van-tab--line van-tab--grow van-tab--active"
              tabindex="0"
              aria-selected="true"
              aria-controls="van-tab"
@@ -190,7 +190,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div id="van-tabs-1"
              role="tab"
-             class="van-tab van-tab--line"
+             class="van-tab van-tab--line van-tab--grow"
              tabindex="-1"
              aria-selected="false"
              aria-controls="van-tab"
@@ -201,7 +201,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div id="van-tabs-2"
              role="tab"
-             class="van-tab van-tab--line"
+             class="van-tab van-tab--line van-tab--grow"
              tabindex="-1"
              aria-selected="false"
              aria-controls="van-tab"
@@ -212,7 +212,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div id="van-tabs-3"
              role="tab"
-             class="van-tab van-tab--line"
+             class="van-tab van-tab--line van-tab--grow"
              tabindex="-1"
              aria-selected="false"
              aria-controls="van-tab"
@@ -223,7 +223,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div id="van-tabs-4"
              role="tab"
-             class="van-tab van-tab--line"
+             class="van-tab van-tab--line van-tab--grow"
              tabindex="-1"
              aria-selected="false"
              aria-controls="van-tab"
@@ -234,7 +234,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div id="van-tabs-5"
              role="tab"
-             class="van-tab van-tab--line"
+             class="van-tab van-tab--line van-tab--grow"
              tabindex="-1"
              aria-selected="false"
              aria-controls="van-tab"
@@ -245,7 +245,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div id="van-tabs-6"
              role="tab"
-             class="van-tab van-tab--line"
+             class="van-tab van-tab--line van-tab--grow"
              tabindex="-1"
              aria-selected="false"
              aria-controls="van-tab"
@@ -256,7 +256,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div id="van-tabs-7"
              role="tab"
-             class="van-tab van-tab--line"
+             class="van-tab van-tab--line van-tab--grow"
              tabindex="-1"
              aria-selected="false"
              aria-controls="van-tab"
@@ -644,7 +644,7 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-tabs van-tabs--line">
     <div class="van-tabs__wrap">
       <div role="tablist"
-           class="van-tabs__nav van-tabs__nav--line van-tabs__nav--shrink"
+           class="van-tabs__nav van-tabs__nav--line van-tabs__nav--shrink van-tabs__nav--complete"
            aria-orientation="horizontal"
       >
         <div id="van-tabs-0"
@@ -654,7 +654,7 @@ exports[`should render demo and match snapshot 1`] = `
              aria-selected="true"
              aria-controls="van-tab"
         >
-          <span class="van-tab__text van-tab__text--ellipsis">
+          <span class="van-tab__text">
             Tab 1
           </span>
         </div>
@@ -665,7 +665,7 @@ exports[`should render demo and match snapshot 1`] = `
              aria-selected="false"
              aria-controls="van-tab"
         >
-          <span class="van-tab__text van-tab__text--ellipsis">
+          <span class="van-tab__text">
             Tab 2
           </span>
         </div>
@@ -676,7 +676,7 @@ exports[`should render demo and match snapshot 1`] = `
              aria-selected="false"
              aria-controls="van-tab"
         >
-          <span class="van-tab__text van-tab__text--ellipsis">
+          <span class="van-tab__text">
             Tab 3
           </span>
         </div>
@@ -687,7 +687,7 @@ exports[`should render demo and match snapshot 1`] = `
              aria-selected="false"
              aria-controls="van-tab"
         >
-          <span class="van-tab__text van-tab__text--ellipsis">
+          <span class="van-tab__text">
             Tab 4
           </span>
         </div>
@@ -736,7 +736,7 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-tabs van-tabs--card">
     <div class="van-tabs__wrap">
       <div role="tablist"
-           class="van-tabs__nav van-tabs__nav--card van-tabs__nav--shrink"
+           class="van-tabs__nav van-tabs__nav--card van-tabs__nav--shrink van-tabs__nav--complete"
            aria-orientation="horizontal"
       >
         <div id="van-tabs-0"
@@ -746,7 +746,7 @@ exports[`should render demo and match snapshot 1`] = `
              aria-selected="true"
              aria-controls="van-tab"
         >
-          <span class="van-tab__text van-tab__text--ellipsis">
+          <span class="van-tab__text">
             Tab 1
           </span>
         </div>
@@ -757,7 +757,7 @@ exports[`should render demo and match snapshot 1`] = `
              aria-selected="false"
              aria-controls="van-tab"
         >
-          <span class="van-tab__text van-tab__text--ellipsis">
+          <span class="van-tab__text">
             Tab 2
           </span>
         </div>
@@ -768,7 +768,7 @@ exports[`should render demo and match snapshot 1`] = `
              aria-selected="false"
              aria-controls="van-tab"
         >
-          <span class="van-tab__text van-tab__text--ellipsis">
+          <span class="van-tab__text">
             Tab 3
           </span>
         </div>
@@ -779,7 +779,7 @@ exports[`should render demo and match snapshot 1`] = `
              aria-selected="false"
              aria-controls="van-tab"
         >
-          <span class="van-tab__text van-tab__text--ellipsis">
+          <span class="van-tab__text">
             Tab 4
           </span>
         </div>
@@ -1096,14 +1096,14 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-tabs van-tabs--line">
     <div>
       <div class="van-sticky">
-        <div class="van-tabs__wrap van-tabs__wrap--scrollable">
+        <div class="van-tabs__wrap">
           <div role="tablist"
                class="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete"
                aria-orientation="horizontal"
           >
             <div id="van-tabs-0"
                  role="tab"
-                 class="van-tab van-tab--line van-tab--active"
+                 class="van-tab van-tab--line van-tab--grow van-tab--active"
                  tabindex="0"
                  aria-selected="true"
                  aria-controls="van-tab"
@@ -1114,7 +1114,7 @@ exports[`should render demo and match snapshot 1`] = `
             </div>
             <div id="van-tabs-1"
                  role="tab"
-                 class="van-tab van-tab--line"
+                 class="van-tab van-tab--line van-tab--grow"
                  tabindex="-1"
                  aria-selected="false"
                  aria-controls="van-tab"
@@ -1125,7 +1125,7 @@ exports[`should render demo and match snapshot 1`] = `
             </div>
             <div id="van-tabs-2"
                  role="tab"
-                 class="van-tab van-tab--line"
+                 class="van-tab van-tab--line van-tab--grow"
                  tabindex="-1"
                  aria-selected="false"
                  aria-controls="van-tab"
@@ -1136,7 +1136,7 @@ exports[`should render demo and match snapshot 1`] = `
             </div>
             <div id="van-tabs-3"
                  role="tab"
-                 class="van-tab van-tab--line"
+                 class="van-tab van-tab--line van-tab--grow"
                  tabindex="-1"
                  aria-selected="false"
                  aria-controls="van-tab"
@@ -1147,7 +1147,7 @@ exports[`should render demo and match snapshot 1`] = `
             </div>
             <div id="van-tabs-4"
                  role="tab"
-                 class="van-tab van-tab--line"
+                 class="van-tab van-tab--line van-tab--grow"
                  tabindex="-1"
                  aria-selected="false"
                  aria-controls="van-tab"
@@ -1158,7 +1158,7 @@ exports[`should render demo and match snapshot 1`] = `
             </div>
             <div id="van-tabs-5"
                  role="tab"
-                 class="van-tab van-tab--line"
+                 class="van-tab van-tab--line van-tab--grow"
                  tabindex="-1"
                  aria-selected="false"
                  aria-controls="van-tab"
@@ -1169,7 +1169,7 @@ exports[`should render demo and match snapshot 1`] = `
             </div>
             <div id="van-tabs-6"
                  role="tab"
-                 class="van-tab van-tab--line"
+                 class="van-tab van-tab--line van-tab--grow"
                  tabindex="-1"
                  aria-selected="false"
                  aria-controls="van-tab"
@@ -1180,7 +1180,7 @@ exports[`should render demo and match snapshot 1`] = `
             </div>
             <div id="van-tabs-7"
                  role="tab"
-                 class="van-tab van-tab--line"
+                 class="van-tab van-tab--line van-tab--grow"
                  tabindex="-1"
                  aria-selected="false"
                  aria-controls="van-tab"

packages/vant/src/tabs/Tabs.tsx

@@ -139,7 +139,10 @@ export default defineComponent({
 
     // whether the nav is scrollable
     const scrollable = computed(
-      () => children.length > props.swipeThreshold || !props.ellipsis
+      () =>
+        children.length > props.swipeThreshold ||
+        !props.ellipsis ||
+        props.shrink
     );
 
     const navStyle = computed(() => ({
@@ -398,7 +401,7 @@ export default defineComponent({
         <div
           ref={wrapRef}
           class={[
-            bem('wrap', { scrollable: scrollable.value }),
+            bem('wrap'),
             { [BORDER_TOP_BOTTOM]: type === 'line' && border },
           ]}
         >

packages/vant/src/tabs/TabsTitle.tsx

@@ -83,6 +83,7 @@ export default defineComponent({
           bem([
             props.type,
             {
+              grow: props.scrollable && !props.shrink,
               shrink: props.shrink,
               active: props.isActive,
               disabled: props.disabled,

packages/vant/src/tabs/index.less

@@ -38,6 +38,11 @@
     cursor: not-allowed;
   }
 
+  &--grow {
+    flex: 1 0 auto;
+    padding: 0 var(--van-padding-sm);
+  }
+
   &--shrink {
     flex: none;
     padding: 0 var(--van-padding-xs);
@@ -86,23 +91,6 @@
       top: auto;
       bottom: 0;
     }
-
-    &--scrollable {
-      .van-tab {
-        flex: 1 0 auto;
-        padding: 0 var(--van-padding-sm);
-      }
-
-      .van-tabs__nav {
-        overflow-x: auto;
-        overflow-y: hidden;
-        -webkit-overflow-scrolling: touch;
-
-        &::-webkit-scrollbar {
-          display: none;
-        }
-      }
-    }
   }
 
   &__nav {
@@ -111,6 +99,16 @@
     background: var(--van-tabs-nav-background-color);
     user-select: none;
 
+    &--complete {
+      overflow-x: auto;
+      overflow-y: hidden;
+      -webkit-overflow-scrolling: touch;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+
     &--line {
       box-sizing: content-box;
       height: 100%;