release: vant v4.8.4

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

@@ -11,7 +11,7 @@ on:
 jobs:
   build-and-deploy:
     if: github.repository == 'youzan/vant'
-    runs-on: ubuntu-latest
+    runs-on: macos-14
     steps:
       - name: Checkout 🛎️
         uses: actions/checkout@v4

.github/workflows/test.yml

@@ -32,7 +32,7 @@ jobs:
       run: npm run lint
 
   test:
-    runs-on: ubuntu-latest
+    runs-on: macos-14
     steps:
     - uses: actions/checkout@v4
 
@@ -57,7 +57,7 @@ jobs:
         directory: ./packages/vant/test/coverage
 
   build:
-    runs-on: ubuntu-latest
+    runs-on: macos-14
     steps:
     - uses: actions/checkout@v4
 

packages/vant/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vant",
-  "version": "4.8.3",
+  "version": "4.8.4",
   "description": "Mobile UI Components built on Vue",
   "main": "lib/vant.cjs.js",
   "module": "es/index.mjs",

packages/vant/src/dropdown-menu/DropdownMenu.tsx

@@ -2,6 +2,7 @@ import {
   ref,
   computed,
   defineComponent,
+  toRaw,
   type InjectionKey,
   type CSSProperties,
   type ExtractPropTypes,
@@ -17,7 +18,6 @@ import {
   makeNumericProp,
   createNamespace,
   HAPTICS_FEEDBACK,
-  type ComponentInstance,
 } from '../utils';
 
 // Composables
@@ -33,6 +33,7 @@ import {
 
 // Types
 import type { DropdownMenuProvide, DropdownMenuDirection } from './types';
+import type { DropdownItemInstance } from '../dropdown-item';
 
 const [name, bem] = createNamespace('dropdown-menu');
 
@@ -63,7 +64,10 @@ export default defineComponent({
     const barRef = ref<HTMLElement>();
     const offset = ref(0);
 
-    const { children, linkChildren } = useChildren(DROPDOWN_KEY);
+    const { children, linkChildren } = useChildren<
+      DropdownItemInstance,
+      unknown
+    >(DROPDOWN_KEY);
     const scrollParent = useScrollParent(root);
 
     const opened = computed(() =>
@@ -121,9 +125,9 @@ export default defineComponent({
       });
     };
 
-    const renderTitle = (item: ComponentInstance, index: number) => {
+    const renderTitle = (item: DropdownItemInstance, index: number) => {
       const { showPopup } = item.state;
-      const { disabled, titleClass } = item;
+      const { disabled, titleClass } = toRaw(item.$props);
 
       return (
         <div

packages/vant/src/dropdown-menu/test/index.spec.tsx

@@ -367,3 +367,28 @@ test('auto-locate prop', async () => {
 
   vi.doUnmock('../../utils/dom');
 });
+
+test('title-class prop', async () => {
+  const titleClass = ref({ custom: true });
+  const wrapper = mount({
+    setup() {
+      return () => (
+        <DropdownMenu>
+          <DropdownItem titleClass={{ custom: true }} />
+          <DropdownItem titleClass={titleClass.value} />
+        </DropdownMenu>
+      );
+    },
+  });
+
+  await later();
+
+  const titles = wrapper.findAll('.van-dropdown-menu__title');
+  // using object literal should work
+  expect(titles[0].classes()).toContain('custom');
+  expect(titles[1].classes()).toContain('custom');
+
+  titleClass.value.custom = false;
+  await later();
+  expect(titles[1].classes()).not.toContain('custom');
+});