feat: checkboxGroup/select/List support change component tag name (#3322

)

src/checkbox/__tests__/index.test.jsx

@@ -157,14 +157,18 @@ describe('Checkbox CheckboxGroup', () => {
   describe('@event', () => {
     it('Event passthrough', async () => {
       const wrapper = mount({
+        components: {
+          ACheckboxGroup: CheckboxGroup,
+          ACheckbox: Checkbox,
+        },
         render() {
           return (
-            <CheckboxGroup>
-              <Checkbox value="gz">广州</Checkbox>
-              <Checkbox value="sz" disabled>
+            <a-checkbox-group>
+              <a-checkbox value="gz">广州</a-checkbox>
+              <a-checkbox value="sz" disabled>
                 深圳
-              </Checkbox>
-            </CheckboxGroup>
+              </a-checkbox>
+            </a-checkbox-group>
           );
         },
       });

src/checkbox/group.tsx

@@ -4,6 +4,7 @@ import {
 import intersection from 'lodash/intersection';
 import isObject from 'lodash/isObject';
 import isUndefined from 'lodash/isUndefined';
+import { getVNodeComponentName, getVueComponentName } from '../utils/helper';
 import Checkbox from './checkbox';
 import props from './checkbox-group-props';
 import { CheckboxOptionObj, TdCheckboxProps, CheckboxGroupValue } from './type';
@@ -187,7 +188,8 @@ export default defineComponent({
       if (!nodes) return;
       for (let i = 0, len = nodes.length; i < len; i++) {
         const vNode = nodes[i];
-        if (vNode.componentOptions && /TCheckbox/.test(vNode.tag)) {
+        const componentName = getVNodeComponentName(vNode);
+        if (vNode.componentOptions && componentName && componentName === getVueComponentName(Checkbox)) {
           (vNode.componentOptions.propsData as any).storeKey = storeKey;
         }
         if (vNode.children?.length) {

src/list/hooks/useListItem.ts

@@ -1,4 +1,6 @@
 import { VNode, computed, getCurrentInstance } from 'vue';
+import { getVNodeComponentName, getVueComponentName } from '../../utils/helper';
+import ListItem from '../list-item';
 
 const useListItems = () => {
   const instance = getCurrentInstance();
@@ -7,7 +9,8 @@ const useListItems = () => {
   const listItems = computed(() => {
     const computedListItems: VNode[] = [];
     currentSlots.forEach((child) => {
-      if (child.componentOptions?.tag === 't-list-item') {
+      const componentName = getVNodeComponentName(child);
+      if (componentName && componentName === getVueComponentName(ListItem)) {
         computedListItems.push({
           class: child.data.staticClass,
           style: child.data.staticStyle,

src/select/hooks/useSelectOptions.ts

@@ -7,6 +7,9 @@ import {
   ref, Ref, computed, onBeforeUpdate, ComponentInternalInstance, watch, VNode,
 } from 'vue';
 import get from 'lodash/get';
+import { getVNodeComponentName, getVueComponentName } from '../../utils/helper';
+import Option from '../option';
+import OptionGroup from '../optionGroup';
 import {
   TdSelectProps, TdOptionProps, SelectOptionGroup, SelectValue,
 } from '../type';
@@ -60,8 +63,9 @@ export default function useSelectOptions(
       innerSlotRecord = instance.$slots.default;
       // 处理 slots 中 t-option 与 t-option-group
       const currentSlots = instance.$slots.default || [];
-      currentSlots.forEach((child: any) => {
-        if (child.componentOptions?.tag === 't-option') {
+      currentSlots.forEach((child: VNode) => {
+        const componentName = getVNodeComponentName(child);
+        if (componentName && componentName === getVueComponentName(Option)) {
           // 独立选项
           innerOptions.push({
             // 单独处理 style 和 class 参数的透传
@@ -73,7 +77,7 @@ export default function useSelectOptions(
             index: dynamicIndex,
           } as TdOptionProps);
           dynamicIndex += 1;
-        } else if (child.componentOptions?.tag === 't-option-group') {
+        } else if (componentName && componentName === getVueComponentName(OptionGroup)) {
           // 分组选项
           const groupOption = {
             group: (child.componentOptions.propsData as TdOptionProps)?.label,

src/tabs/tabs.tsx

@@ -1,5 +1,5 @@
 import Vue, { VNode, VueConstructor } from 'vue';
-import kebabCase from 'lodash/kebabCase';
+import { getVNodeComponentName, getVueComponentName } from '../utils/helper';
 import props from './props';
 import TTabPanel from './tab-panel';
 import TTabNav from './tab-nav';
@@ -68,9 +68,10 @@ export default mixins(Vue as VueConstructor<TabParentInjectVue>, classPrefixMixi
         return;
       }
       const newPanels = this.listPanels
+        .filter((child) => getVNodeComponentName(child) === getVueComponentName(TTabPanel))
         .map((panel: VNode) => panel.componentInstance as InstanceType<typeof TTabPanel>)
-        .filter(Boolean)
-        .filter((child) => kebabCase(child?.$vnode?.tag).endsWith('t-tab-panel')); // 不可用classPrefix替换 此处是判断组件tag
+        .filter(Boolean);
+
       const isUnchanged = () => newPanels.length === this.panels.length && this.panels.every((panel, index) => panel === newPanels[index]);
       if (isUnchanged() && !force) return;
       this.panels = newPanels;

src/utils/helper.ts

@@ -1,4 +1,5 @@
 import camelCase from 'lodash/camelCase';
+import type { VNode } from 'vue';
 import type { Styles } from '../common';
 
 export function omit(obj: object, fields: string[]): object {
@@ -154,3 +155,11 @@ export function setTransform(value: string): Styles {
     '-webkit-transform': value,
   };
 }
+
+export function getVueComponentName(component: any) {
+  return component?.options?.name || component?.name;
+}
+
+export function getVNodeComponentName(vnode: VNode) {
+  return (vnode?.componentOptions?.Ctor as any)?.options?.name;
+}