feat(Select): collapsibleItems params expanded options

Tencent · Nov 16, 2024 · 481a015 · 481a015
1 parent 7e64c04
commit 481a015
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 22 deletions.
diff --git a/src/select-input/interface.ts b/src/select-input/interface.ts
@@ -1,4 +1,5 @@
 import { TdSelectInputProps } from './type';
+import { PropType } from 'vue';
 
 export interface SelectInputCommonProperties {
   autofocus?: TdSelectInputProps['autofocus'];
@@ -18,3 +19,10 @@ export interface SelectInputCommonProperties {
   onMouseenter?: TdSelectInputProps['onMouseenter'];
   onMouseleave?: TdSelectInputProps['onMouseleave'];
 }
+
+export interface SelectInputProps extends TdSelectInputProps {
+  /**
+   * 不对外暴露，参数穿透options, 给SelectInput/SelectInput 自定义选中项呈现的内容和多选状态下设置折叠项内容
+   */
+  options: any[];
+}
diff --git a/src/select-input/select-input.tsx b/src/select-input/select-input.tsx
@@ -1,12 +1,13 @@
 import { computed, defineComponent, onBeforeUnmount, onMounted, PropType, ref, SetupContext, toRefs, watch } from 'vue';
 import Popup, { PopupInstanceFunctions, PopupProps, PopupVisibleChangeContext } from '../popup';
 import props from './props';
-import { TdSelectInputProps } from './type';
+import type { TdSelectInputProps } from './type';
 import useSingle, { SelectInputValueDisplayOptions } from './useSingle';
 import useMultiple from './useMultiple';
 import useOverlayInnerStyle from './useOverlayInnerStyle';
 import { usePrefixClass } from '../hooks/useConfig';
 import { useTNodeJSX } from '../hooks';
+import type { SelectInputProps } from './interface';
 
 const useComponentClassName = () => {
   return {
@@ -32,9 +33,15 @@ export default defineComponent({
     valueDisplayOptions: {
       type: Object as PropType<SelectInputValueDisplayOptions>,
     },
+    /**
+     * 不对外暴露，参数穿透options, 给SelectInput/SelectInput 自定义选中项呈现的内容和多选状态下设置折叠项内容
+     */
+    options: {
+      type: Array as PropType<any[]>,
+    },
   },
 
-  setup(props: TdSelectInputProps & { valueDisplayOptions: SelectInputValueDisplayOptions }, context: SetupContext) {
+  setup(props: SelectInputProps & { valueDisplayOptions: SelectInputValueDisplayOptions }, context: SetupContext) {
     const { NAME_CLASS, BASE_CLASS_BORDERLESS, BASE_CLASS_MULTIPLE, BASE_CLASS_POPUP_VISIBLE, BASE_CLASS_EMPTY } =
       useComponentClassName();
     const classPrefix = usePrefixClass();

diff --git a/src/select-input/useMultiple.tsx b/src/select-input/useMultiple.tsx
@@ -1,7 +1,7 @@
 import { SetupContext, computed, ref, toRefs, Ref } from 'vue';
 import isObject from 'lodash/isObject';
-import { TdSelectInputProps, SelectInputChangeContext, SelectInputKeys } from './type';
-import { SelectInputCommonProperties } from './interface';
+import type { SelectInputChangeContext, SelectInputKeys } from './type';
+import type { SelectInputCommonProperties, SelectInputProps } from './interface';
 import TagInput, { TagInputValue, TagInputProps } from '../tag-input';
 import Loading from '../loading';
 import useDefault from '../hooks/useDefaultValue';
@@ -23,7 +23,7 @@ const DEFAULT_KEYS = {
 };
 
 export default function useMultiple(
-  props: TdSelectInputProps,
+  props: SelectInputProps,
   context: SetupContext,
   popupRef: Ref<PopupInstanceFunctions>,
 ) {
@@ -99,6 +99,7 @@ export default function useMultiple(
       collapsedItems: props.collapsedItems,
       tag: props.tag,
       value: tags.value,
+      options: props.options,
       valueDisplay: props.valueDisplay,
       inputValue: p.popupVisible && p.allowInput ? tInputValue.value : '',
       inputProps: {

diff --git a/src/select/_example/collapsed.vue b/src/select/_example/collapsed.vue
@@ -39,10 +39,10 @@
       :disabled="disabled"
       :readonly="readonly"
     >
-      <template #collapsedItems="{ value: v, onClose }">
+      <template #collapsedItems="{ collapsedSelectedItems: slotCollapsedSelectedItems, onClose }">
         <CollapsedItemsRender
           :style="{ marginRight: '4px' }"
-          :value="v"
+          :collapsed-selected-items="slotCollapsedSelectedItems"
           :min-collapsed-num="minCollapsedNum"
           :size="size"
           :disabled="disabled"
@@ -78,10 +78,10 @@ const readonly = ref(false);
 const minCollapsedNum = ref(1);
 
 // Function
-const collapsedItems = (h, { value, onClose }) => {
-  if (!(value instanceof Array)) return null;
-  const count = value.length - minCollapsedNum.value;
-  const collapsedTags = value.slice(minCollapsedNum.value, value.length);
+const collapsedItems = (h, { collapsedSelectedItems, onClose }) => {
+  if (!(collapsedSelectedItems instanceof Array)) return null;
+  const count = collapsedSelectedItems.length - minCollapsedNum.value;
+  const collapsedTags = collapsedSelectedItems.slice(minCollapsedNum.value, collapsedSelectedItems.length);
   if (count <= 0) return null;
   return (
     <t-popup
@@ -90,14 +90,14 @@ const collapsedItems = (h, { value, onClose }) => {
           <>
             {collapsedTags.map((item, index) => (
               <t-tag
-                key={item}
+                key={item.value}
                 style={{ marginRight: '4px' }}
                 size={size.value}
                 disabled={disabled.value}
                 closable={!readonly.value && !disabled.value}
                 onClose={(context) => onClose({ e: context.e, index: minCollapsedNum.value + index })}
               >
-                {item}
+                {item.label}
               </t-tag>
             ))}
           </>
@@ -115,14 +115,14 @@ const collapsedItems = (h, { value, onClose }) => {
 const CollapsedItemsRender = defineComponent({
   name: 'CollapsedItemsRender',
   // eslint-disable-next-line vue/require-prop-types
-  props: ['value', 'minCollapsedNum'],
+  props: ['collapsedSelectedItems', 'minCollapsedNum'],
   emits: ['close'],
   setup(props, { attrs, emit }) {
     const count = computed(() => {
-      return props.value.length - props.minCollapsedNum;
+      return props.collapsedSelectedItems.length - props.minCollapsedNum;
     });
     const collapsedTags = computed(() => {
-      return props.value.slice(props.minCollapsedNum, props.value.length);
+      return props.collapsedSelectedItems.slice(props.minCollapsedNum, props.collapsedSelectedItems.length);
     });
 
     return () => {
@@ -135,10 +135,10 @@ const CollapsedItemsRender = defineComponent({
                 {collapsedTags.value.map((item, index) => (
                   <t-tag
                     {...attrs}
-                    key={item}
+                    key={item.value}
                     onClose={(context) => emit('close', { e: context.e, index: props.minCollapsedNum.value + index })}
                   >
-                    {item}
+                    {item.label}
                   </t-tag>
                 ))}
               </>

diff --git a/src/select/select.tsx b/src/select/select.tsx
@@ -382,6 +382,7 @@ export default defineComponent({
             ref={selectInputRef}
             class={COMPONENT_NAME.value}
             value={displayText.value}
+            options={props.options}
             disabled={disabled.value}
             popupVisible={innerPopupVisible.value}
             inputValue={innerPopupVisible.value ? innerInputValue.value : ''}

diff --git a/src/tag-input/interface.ts b/src/tag-input/interface.ts
@@ -30,4 +30,6 @@ export interface DragSortInnerProps extends DragSortInnerData {
   getDragProps?: (index?: number, record?: any, tagRef?: Ref<HTMLElement>) => DragSortInnerData;
 }
 
-export interface TagInputProps extends TdTagInputProps, DragSortInnerProps {}
+export interface TagInputProps extends TdTagInputProps, DragSortInnerProps {
+  options?: any[]; // 不对外暴露，参数穿透options, 给SelectInput/SelectInput 自定义选中项呈现的内容和多选状态下设置折叠项内容
+}
diff --git a/src/tag-input/tag-input.tsx b/src/tag-input/tag-input.tsx
@@ -1,4 +1,4 @@
-import { defineComponent, computed, toRefs, ref, nextTick, reactive, watch } from 'vue';
+import { defineComponent, computed, toRefs, ref, nextTick, reactive, watch, PropType } from 'vue';
 import { CloseCircleFilledIcon as TdCloseCircleFilledIcon } from 'tdesign-icons-vue-next';
 import TInput, { InputProps, StrInputProps, TdInputProps } from '../input';
 import { TdTagInputProps } from './type';
@@ -27,7 +27,15 @@ const useComponentClassName = () => {
 export default defineComponent({
   name: 'TTagInput',
 
-  props: { ...props },
+  props: {
+    ...props,
+    /**
+     * 不对外暴露，参数穿透options, 给SelectInput/SelectInput 自定义选中项呈现的内容和多选状态下设置折叠项内容
+     */
+    options: {
+      type: Array as PropType<any[]>,
+    },
+  },
 
   setup(props: TdTagInputProps) {
     const { NAME_CLASS, CLEAR_CLASS, BREAK_LINE_CLASS } = useComponentClassName();

diff --git a/src/tag-input/useTagList.tsx b/src/tag-input/useTagList.tsx
@@ -104,12 +104,14 @@ export default function useTagList(props: TagInputProps) {
     // 超出省略
     if (newList.length !== (tagValue.value || []).length) {
       const len = tagValue.value.length - newList.length;
+      // 这里会从selectInput/SelectInput中传递options参数，用于自定义选中项呈现的内容和多选状态下设置折叠项内容
+      const options = Array.isArray(props?.options) ? props.options : tagValue.value;
       const more = renderTNode('collapsedItems', {
         params: {
           value: tagValue.value,
           count: tagValue.value.length - minCollapsedNum.value,
           collapsedTags: tagValue.value.slice(minCollapsedNum.value, tagValue.value.length),
-          collapsedSelectedItems: tagValue.value.slice(minCollapsedNum.value, tagValue.value.length),
+          collapsedSelectedItems: options.slice(minCollapsedNum.value, tagValue.value.length),
           onClose,
         },
       });