docs(NavBar): add disable button demo (#12270)

* docs(NavBar): add disable button demo

* chore: fix bem

.github/workflows/codeql-analysis.yml

@@ -36,7 +36,7 @@ jobs:
 
     steps:
     - name: Checkout repository
-      uses: actions/checkout@v2
+      uses: actions/checkout@v4
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL

.github/workflows/deploy-v4-site.yml

@@ -13,14 +13,14 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout 🛎️
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
         with:
           ref: 'main'
 
       - name: Install pnpm
         run: corepack enable
 
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v3
         with:
           node-version: '18'
           cache: 'pnpm'
@@ -32,10 +32,12 @@ jobs:
         run: npm run build:site
 
       - name: Deploy for Gitee 🚀
-        uses: JamesIves/github-pages-deploy-action@v4.4.0
+        uses: JamesIves/github-pages-deploy-action@v4.4.1
         with:
           branch: gh-pages
           folder: packages/vant/site-dist
+          # enable single-commit to reduce the repo size
+          single-commit: true
           clean: true
           clean-exclude: |
             1.x/*
@@ -61,6 +63,8 @@ jobs:
           token: ${{ secrets.VANT_UI_TOKEN }}
           repository-name: vant-ui/vant-ui.github.io
           target-folder: vant
+          # enable single-commit to reduce the repo size
+          single-commit: true
           clean: true
           clean-exclude: |
             1.x/*

.github/workflows/pr-label.yaml

@@ -11,7 +11,7 @@ jobs:
     name: Labeling for changes
     runs-on: ubuntu-latest
     steps:
-      - uses: github/issue-labeler@v3.1
+      - uses: github/issue-labeler@v3.2
         with:
           repo-token: "${{ secrets.GITHUB_TOKEN }}"
           configuration-path: .github/pr-labeler.yml

.github/workflows/release-tag.yml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Create Release for Tag
         id: release_tag

.github/workflows/sync-gitee.yml

@@ -16,7 +16,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Sync to Gitee
-        uses: wearerequired/git-mirror-action@master
+        uses: wearerequired/git-mirror-action@v1.2.0
         env:
           # 在 Settings->Secrets 配置 GITEE_RSA_PRIVATE_KEY
           SSH_PRIVATE_KEY: ${{ secrets.GITEE_RSA_PRIVATE_KEY }}

.github/workflows/test.yml

@@ -15,12 +15,12 @@ jobs:
   lint:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v4
 
     - name: Install pnpm
       run: corepack enable
 
-    - uses: actions/setup-node@v2
+    - uses: actions/setup-node@v3
       with:
         node-version: '18'
         cache: 'pnpm'
@@ -34,12 +34,12 @@ jobs:
   test:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v4
 
     - name: Install pnpm
       run: corepack enable
 
-    - uses: actions/setup-node@v2
+    - uses: actions/setup-node@v3
       with:
         node-version: '18'
         cache: 'pnpm'
@@ -59,12 +59,12 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v4
 
     - name: Install pnpm
       run: corepack enable
 
-    - uses: actions/setup-node@v2
+    - uses: actions/setup-node@v3
       with:
         node-version: '18'
         cache: 'pnpm'

packages/vant/src/config-provider/types.ts

@@ -1,78 +1,151 @@
-export type ConfigProviderThemeVars =
+type BaseThemeVars = {
+  // Color Palette
+  black?: string;
+  white?: string;
+  gray1?: string;
+  gray2?: string;
+  gray3?: string;
+  gray4?: string;
+  gray5?: string;
+  gray6?: string;
+  gray7?: string;
+  gray8?: string;
+  red?: string;
+  blue?: string;
+  orange?: string;
+  orangeDark?: string;
+  orangeLight?: string;
+  green?: string;
+
+  // Gradient Colors
+  gradientRed?: string;
+  gradientOrange?: string;
+
+  // Component Colors
+  primaryColor?: string;
+  successColor?: string;
+  dangerColor?: string;
+  warningColor?: string;
+  textColor?: string;
+  textColor2?: string;
+  textColor3?: string;
+  activeColor?: string;
+  activeOpacity?: number;
+  disabledOpacity?: number;
+  background?: string;
+  background2?: string;
+
+  // Padding
+  paddingBase?: string;
+  paddingXs?: string;
+  paddingSm?: string;
+  paddingMd?: string;
+  paddingLg?: string;
+  paddingXl?: string;
+
+  // Font
+  fontSizeXs?: string;
+  fontSizeSm?: string;
+  fontSizeMd?: string;
+  fontSizeLg?: string;
+  fontBold?: number;
+  lineHeightXs?: string;
+  lineHeightSm?: string;
+  lineHeightMd?: string;
+  lineHeightLg?: string;
+  baseFont?: string;
+  priceFont?: string;
+
+  // Animation
+  durationBase?: string;
+  durationFast?: string;
+  easeOut?: string;
+  easeIn?: string;
+
+  // Border
+  borderColor?: string;
+  borderWidth?: string;
+  radiusSm?: string;
+  radiusMd?: string;
+  radiusLg?: string;
+  radiusMax?: string;
+};
+
+export type ConfigProviderThemeVars = BaseThemeVars &
   import('../action-bar').ActionBarThemeVars &
-    import('../action-bar-button').ActionBarButtonThemeVars &
-    import('../action-bar-icon').ActionBarIconThemeVars &
-    import('../action-sheet').ActionSheetThemeVars &
-    import('../address-edit').AddressEditThemeVars &
-    import('../address-list').AddressListThemeVars &
-    import('../badge').BadgeThemeVars &
-    import('../barrage').BarrageThemeVars &
-    import('../button').ButtonThemeVars &
-    import('../calendar').CalendarThemeVars &
-    import('../card').CardThemeVars &
-    import('../cascader').CascaderThemeVars &
-    import('../cell').CellThemeVars &
-    import('../cell-group').CellGroupThemeVars &
-    import('../checkbox').CheckboxThemeVars &
-    import('../circle').CircleThemeVars &
-    import('../collapse-item').CollapseItemThemeVars &
-    import('../contact-card').ContactCardThemeVars &
-    import('../contact-edit').ContactEditThemeVars &
-    import('../contact-list').ContactListThemeVars &
-    import('../count-down').CountDownThemeVars &
-    import('../coupon').CouponThemeVars &
-    import('../coupon-cell').CouponCellThemeVars &
-    import('../coupon-list').CouponListThemeVars &
-    import('../dialog').DialogThemeVars &
-    import('../divider').DividerThemeVars &
-    import('../dropdown-item').DropdownItemThemeVars &
-    import('../dropdown-menu').DropdownMenuThemeVars &
-    import('../empty').EmptyThemeVars &
-    import('../field').FieldThemeVars &
-    import('../floating-bubble').FloatingBubbleThemeVars &
-    import('../floating-panel').FloatingPanelThemeVars &
-    import('../grid-item').GridItemThemeVars &
-    import('../image').ImageThemeVars &
-    import('../image-preview').ImagePreviewThemeVars &
-    import('../index-anchor').IndexAnchorThemeVars &
-    import('../index-bar').IndexBarThemeVars &
-    import('../list').ListThemeVars &
-    import('../loading').LoadingThemeVars &
-    import('../nav-bar').NavBarThemeVars &
-    import('../notice-bar').NoticeBarThemeVars &
-    import('../notify').NotifyThemeVars &
-    import('../number-keyboard').NumberKeyboardThemeVars &
-    import('../overlay').OverlayThemeVars &
-    import('../pagination').PaginationThemeVars &
-    import('../password-input').PasswordInputThemeVars &
-    import('../picker').PickerThemeVars &
-    import('../picker-group').PickerGroupThemeVars &
-    import('../popover').PopoverThemeVars &
-    import('../popup').PopupThemeVars &
-    import('../progress').ProgressThemeVars &
-    import('../pull-refresh').PullRefreshThemeVars &
-    import('../radio').RadioThemeVars &
-    import('../rate').RateThemeVars &
-    import('../rolling-text').RollingTextThemeVars &
-    import('../search').SearchThemeVars &
-    import('../share-sheet').ShareSheetThemeVars &
-    import('../sidebar').SidebarThemeVars &
-    import('../sidebar-item').SidebarItemThemeVars &
-    import('../signature').SignatureThemeVars &
-    import('../skeleton').SkeletonThemeVars &
-    import('../slider').SliderThemeVars &
-    import('../step').StepThemeVars &
-    import('../stepper').StepperThemeVars &
-    import('../steps').StepsThemeVars &
-    import('../sticky').StickyThemeVars &
-    import('../submit-bar').SubmitBarThemeVars &
-    import('../swipe').SwipeThemeVars &
-    import('../switch').SwitchThemeVars &
-    import('../tabbar').TabbarThemeVars &
-    import('../tabbar-item').TabbarItemThemeVars &
-    import('../tabs').TabsThemeVars &
-    import('../tag').TagThemeVars &
-    import('../toast').ToastThemeVars &
-    import('../tree-select').TreeSelectThemeVars &
-    import('../uploader').UploaderThemeVars &
-    import('../watermark').WatermarkThemeVars;
+  import('../action-bar-button').ActionBarButtonThemeVars &
+  import('../action-bar-icon').ActionBarIconThemeVars &
+  import('../action-sheet').ActionSheetThemeVars &
+  import('../address-edit').AddressEditThemeVars &
+  import('../address-list').AddressListThemeVars &
+  import('../badge').BadgeThemeVars &
+  import('../barrage').BarrageThemeVars &
+  import('../button').ButtonThemeVars &
+  import('../calendar').CalendarThemeVars &
+  import('../card').CardThemeVars &
+  import('../cascader').CascaderThemeVars &
+  import('../cell').CellThemeVars &
+  import('../cell-group').CellGroupThemeVars &
+  import('../checkbox').CheckboxThemeVars &
+  import('../circle').CircleThemeVars &
+  import('../collapse-item').CollapseItemThemeVars &
+  import('../contact-card').ContactCardThemeVars &
+  import('../contact-edit').ContactEditThemeVars &
+  import('../contact-list').ContactListThemeVars &
+  import('../count-down').CountDownThemeVars &
+  import('../coupon').CouponThemeVars &
+  import('../coupon-cell').CouponCellThemeVars &
+  import('../coupon-list').CouponListThemeVars &
+  import('../dialog').DialogThemeVars &
+  import('../divider').DividerThemeVars &
+  import('../dropdown-item').DropdownItemThemeVars &
+  import('../dropdown-menu').DropdownMenuThemeVars &
+  import('../empty').EmptyThemeVars &
+  import('../field').FieldThemeVars &
+  import('../floating-bubble').FloatingBubbleThemeVars &
+  import('../floating-panel').FloatingPanelThemeVars &
+  import('../grid-item').GridItemThemeVars &
+  import('../image').ImageThemeVars &
+  import('../image-preview').ImagePreviewThemeVars &
+  import('../index-anchor').IndexAnchorThemeVars &
+  import('../index-bar').IndexBarThemeVars &
+  import('../list').ListThemeVars &
+  import('../loading').LoadingThemeVars &
+  import('../nav-bar').NavBarThemeVars &
+  import('../notice-bar').NoticeBarThemeVars &
+  import('../notify').NotifyThemeVars &
+  import('../number-keyboard').NumberKeyboardThemeVars &
+  import('../overlay').OverlayThemeVars &
+  import('../pagination').PaginationThemeVars &
+  import('../password-input').PasswordInputThemeVars &
+  import('../picker').PickerThemeVars &
+  import('../picker-group').PickerGroupThemeVars &
+  import('../popover').PopoverThemeVars &
+  import('../popup').PopupThemeVars &
+  import('../progress').ProgressThemeVars &
+  import('../pull-refresh').PullRefreshThemeVars &
+  import('../radio').RadioThemeVars &
+  import('../rate').RateThemeVars &
+  import('../rolling-text').RollingTextThemeVars &
+  import('../search').SearchThemeVars &
+  import('../share-sheet').ShareSheetThemeVars &
+  import('../sidebar').SidebarThemeVars &
+  import('../sidebar-item').SidebarItemThemeVars &
+  import('../signature').SignatureThemeVars &
+  import('../skeleton').SkeletonThemeVars &
+  import('../slider').SliderThemeVars &
+  import('../step').StepThemeVars &
+  import('../stepper').StepperThemeVars &
+  import('../steps').StepsThemeVars &
+  import('../sticky').StickyThemeVars &
+  import('../submit-bar').SubmitBarThemeVars &
+  import('../swipe').SwipeThemeVars &
+  import('../switch').SwitchThemeVars &
+  import('../tabbar').TabbarThemeVars &
+  import('../tabbar-item').TabbarItemThemeVars &
+  import('../tabs').TabsThemeVars &
+  import('../tag').TagThemeVars &
+  import('../toast').ToastThemeVars &
+  import('../tree-select').TreeSelectThemeVars &
+  import('../uploader').UploaderThemeVars &
+  import('../watermark').WatermarkThemeVars;

packages/vant/src/nav-bar/NavBar.tsx

@@ -30,6 +30,8 @@ export const navBarProps = {
   border: truthProp,
   leftText: String,
   rightText: String,
+  leftDisabled: Boolean,
+  rightDisabled: Boolean,
   leftArrow: Boolean,
   placeholder: Boolean,
   safeAreaInsetTop: Boolean,
@@ -49,8 +51,16 @@ export default defineComponent({
     const navBarRef = ref<HTMLElement>();
     const renderPlaceholder = usePlaceholder(navBarRef, bem);
 
-    const onClickLeft = (event: MouseEvent) => emit('clickLeft', event);
-    const onClickRight = (event: MouseEvent) => emit('clickRight', event);
+    const onClickLeft = (event: MouseEvent) => {
+      if (!props.leftDisabled) {
+        emit('clickLeft', event);
+      }
+    };
+    const onClickRight = (event: MouseEvent) => {
+      if (!props.rightDisabled) {
+        emit('clickRight', event);
+      }
+    };
 
     const renderLeft = () => {
       if (slots.left) {
@@ -93,7 +103,12 @@ export default defineComponent({
           <div class={bem('content')}>
             {hasLeft && (
               <div
-                class={[bem('left'), props.clickable ? HAPTICS_FEEDBACK : '']}
+                class={[
+                  bem('left', { disabled: props.leftDisabled }),
+                  props.clickable && !props.leftDisabled
+                    ? HAPTICS_FEEDBACK
+                    : '',
+                ]}
                 onClick={onClickLeft}
               >
                 {renderLeft()}
@@ -104,7 +119,12 @@ export default defineComponent({
             </div>
             {hasRight && (
               <div
-                class={[bem('right'), props.clickable ? HAPTICS_FEEDBACK : '']}
+                class={[
+                  bem('right', { disabled: props.rightDisabled }),
+                  props.clickable && !props.rightDisabled
+                    ? HAPTICS_FEEDBACK
+                    : '',
+                ]}
                 onClick={onClickRight}
               >
                 {renderRight()}

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

@@ -84,6 +84,21 @@ export default {
 </van-nav-bar>
 ```
 
+### Disable Button
+
+Use the `left-disabled` or `right-disabled` props to disable the buttons on either side. The prop reduces the opacity of the button and makes it unclickable.
+
+```html
+<van-nav-bar
+  title="Title"
+  left-text="Back"
+  right-text="Button"
+  left-arrow
+  left-disabled
+  right-disabled
+/>
+```
+
 ## API
 
 ### Props
@@ -93,6 +108,8 @@ export default {
 | title | Title | _string_ | `''` |
 | left-text | Left Text | _string_ | `''` |
 | right-text | Right Text | _string_ | `''` |
+| left-disabled `v4.6.8` | Whether to disable the left button, decrease opacity and make it unclickable | _boolean_ | `false` |
+| right-disabled `v4.6.8` | Whether to disable the right button, decrease opacity and make it unclickable | _boolean_ | `false` |
 | left-arrow | Whether to show left arrow | _boolean_ | `false` |
 | border | Whether to show bottom border | _boolean_ | `true` |
 | fixed | Whether to fixed top | _boolean_ | `false` |

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

@@ -92,6 +92,21 @@ export default {
 </van-nav-bar>
 ```
 
+### 禁用按钮
+
+通过 `left-disabled` 或 `right-disabled` 属性来禁用两侧的按钮。按钮被禁用时透明度降低，且无法点击。
+
+```html
+<van-nav-bar
+  title="标题"
+  left-text="返回"
+  right-text="按钮"
+  left-arrow
+  left-disabled
+  right-disabled
+/>
+```
+
 ## API
 
 ### Props
@@ -101,6 +116,8 @@ export default {
 | title | 标题 | _string_ | `''` |
 | left-text | 左侧文案 | _string_ | `''` |
 | right-text | 右侧文案 | _string_ | `''` |
+| left-disabled `v4.6.8` | 是否禁用左侧按钮，禁用时透明度降低，且无法点击 | _boolean_ | `false` |
+| right-disabled `v4.6.8` | 是否禁用右侧按钮，禁用时透明度降低，且无法点击 | _boolean_ | `false` |
 | left-arrow | 是否显示左侧箭头 | _boolean_ | `false` |
 | border | 是否显示下边框 | _boolean_ | `true` |
 | fixed | 是否固定在顶部 | _boolean_ | `false` |

packages/vant/src/nav-bar/demo/index.vue

@@ -9,11 +9,13 @@ const t = useTranslate({
     useSlot: '使用插槽',
     showBack: '返回上级',
     rightButton: '右侧按钮',
+    disableButton: '禁用按钮',
   },
   'en-US': {
     useSlot: 'Use Slot',
     showBack: 'Back',
     rightButton: 'Right Button',
+    disableButton: 'Disable Button',
   },
 });
 
@@ -53,4 +55,17 @@ const onClickRight = () => showToast(t('button'));
       </template>
     </van-nav-bar>
   </demo-block>
+
+  <demo-block :title="t('disableButton')">
+    <van-nav-bar
+      :title="t('title')"
+      :left-text="t('back')"
+      :right-text="t('button')"
+      left-arrow
+      left-disabled
+      right-disabled
+      @click-left="onClickLeft"
+      @click-right="onClickRight"
+    />
+  </demo-block>
 </template>

packages/vant/src/nav-bar/index.less

@@ -7,6 +7,7 @@
   --van-nav-bar-title-font-size: var(--van-font-size-lg);
   --van-nav-bar-title-text-color: var(--van-text-color);
   --van-nav-bar-z-index: 1;
+  --van-nav-bar-disabled-opacity: var(--van-disabled-opacity);
 }
 
 .van-nav-bar {
@@ -62,6 +63,11 @@
     align-items: center;
     padding: 0 var(--van-padding-md);
     font-size: var(--van-font-size-md);
+
+    &--disabled {
+      cursor: not-allowed;
+      opacity: var(--van-nav-bar-disabled-opacity);
+    }
   }
 
   &__left {

packages/vant/src/nav-bar/test/__snapshots__/demo-ssr.spec.ts.snap

@@ -104,4 +104,34 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
   </div>
 </div>
+<div>
+  <!--[-->
+  <div
+    style
+    class="van-nav-bar van-hairline--bottom"
+  >
+    <div class="van-nav-bar__content">
+      <div class="van-nav-bar__left van-nav-bar__left--disabled">
+        <!--[-->
+        <i
+          class="van-badge__wrapper van-icon van-icon-arrow-left van-nav-bar__arrow"
+          style
+        >
+          <!--[-->
+        </i>
+        <span class="van-nav-bar__text">
+          Back
+        </span>
+      </div>
+      <div class="van-nav-bar__title van-ellipsis">
+        Title
+      </div>
+      <div class="van-nav-bar__right van-nav-bar__right--disabled">
+        <span class="van-nav-bar__text">
+          Button
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
 `;

packages/vant/src/nav-bar/test/__snapshots__/demo.spec.ts.snap

@@ -70,4 +70,25 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
   </div>
 </div>
+<div>
+  <div class="van-nav-bar van-hairline--bottom">
+    <div class="van-nav-bar__content">
+      <div class="van-nav-bar__left van-nav-bar__left--disabled">
+        <i class="van-badge__wrapper van-icon van-icon-arrow-left van-nav-bar__arrow">
+        </i>
+        <span class="van-nav-bar__text">
+          Back
+        </span>
+      </div>
+      <div class="van-nav-bar__title van-ellipsis">
+        Title
+      </div>
+      <div class="van-nav-bar__right van-nav-bar__right--disabled">
+        <span class="van-nav-bar__text">
+          Button
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
 `;