types(Collapse): use tsx (#8130)

src/collapse/index.tsx

@@ -0,0 +1,87 @@
+import { PropType } from 'vue';
+import { createNamespace } from '../utils';
+import { BORDER_TOP_BOTTOM } from '../utils/constant';
+import { useChildren } from '@vant/use';
+
+const [createComponent, bem] = createNamespace('collapse');
+
+export const COLLAPSE_KEY = 'vanCollapse';
+
+export type CollapseProvide = {
+  toggle: (name: number | string, expanded: boolean) => void;
+  isExpanded: (name: number | string) => boolean;
+};
+
+export default createComponent({
+  props: {
+    accordion: Boolean,
+    modelValue: {
+      type: [String, Number, Array] as PropType<
+        string | number | Array<string | number>
+      >,
+      required: true,
+    },
+    border: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  emits: ['change', 'update:modelValue'],
+
+  setup(props, { emit, slots }) {
+    const { linkChildren } = useChildren(COLLAPSE_KEY);
+
+    const updateName = (name: number | string | Array<number | string>) => {
+      emit('change', name);
+      emit('update:modelValue', name);
+    };
+
+    const toggle = (name: number | string, expanded: boolean) => {
+      const { accordion, modelValue } = props;
+
+      if (accordion) {
+        updateName(name === modelValue ? '' : name);
+      } else if (expanded) {
+        updateName((modelValue as Array<number | string>).concat(name));
+      } else {
+        updateName(
+          (modelValue as Array<number | string>).filter(
+            (activeName) => activeName !== name
+          )
+        );
+      }
+    };
+
+    const isExpanded = (name: number | string) => {
+      const { accordion, modelValue } = props;
+
+      if (process.env.NODE_ENV !== 'production') {
+        if (accordion && Array.isArray(modelValue)) {
+          console.error(
+            '[Vant] Collapse: "v-model" should not be Array in accordion mode'
+          );
+          return false;
+        }
+        if (!accordion && !Array.isArray(modelValue)) {
+          console.error(
+            '[Vant] Collapse: "v-model" should be Array in non-accordion mode'
+          );
+          return false;
+        }
+      }
+
+      return accordion
+        ? modelValue === name
+        : (modelValue as Array<number | string>).indexOf(name) !== -1;
+    };
+
+    linkChildren({ toggle, isExpanded });
+
+    return () => (
+      <div class={[bem(), { [BORDER_TOP_BOTTOM]: props.border }]}>
+        {slots.default?.()}
+      </div>
+    );
+  },
+});