feat(comp:select,comp:tree-select,comp:cascader): add selectedItem sl…

…ot (#1257)

packages/components/_private/selector/src/Selector.tsx

@@ -162,6 +162,10 @@ export default defineComponent({
           onRemove: props.onItemRemove,
         }
 
+        const selectedItemSlot = slots.selectedItem
+        if (selectedItemSlot) {
+          return selectedItemSlot(itemProps)
+        }
         const slotOrName = slots.selectedLabel || slots.label || rawData.customLabel || props.defaultLabelSlotName
         const selectedLabelRender = isString(slotOrName) ? slots[slotOrName] : slotOrName
         const labelNode = selectedLabelRender ? selectedLabelRender(rawData) : label

packages/components/cascader/docs/Api.zh.md

@@ -64,10 +64,23 @@
 
 | 名称 | 说明 | 参数类型 | 备注 |
 | --- | --- | --- | --- |
+|  `selectedItem` | 自定义选中项 | `data: SelectedItemProps` | 使用该插槽后`selectedLabel`将无效 |
 |  `selectedLabel` | 自定义选中的标签 | `data: CascaderData` |  |
 |  `overflowedLabel` | 自定义超出最多显示多少个标签的内容 | `data: CascaderData[]` | 参数为超出的数组 |
 |  `optionLabel` | 自定义选项的文本 | `data: SelectOption` | - |
 
+```ts
+interface SelectedItemProps {
+  disabled: boolean
+  key: VKey
+  prefixCls: string
+  removable: boolean
+  label: string
+  value: unknown
+  onRemove: (key: VKey) => void
+}
+```
+
 #### CascaderMethods
 
 | 名称 | 说明 | 参数类型 | 备注 |

packages/components/select/demo/SelectAll.vue

@@ -1,10 +1,29 @@
 <template>
-  <IxSelect v-model:value="selectedKeys" :dataSource="dataSource" multiple :overlayRender="overlayRender"></IxSelect>
+  <IxSpace class="demo-select-all-wrapper">
+    <IxSelect v-model:value="selectedKeys" :dataSource="dataSource" multiple :overlayRender="overlayRender"></IxSelect>
+    <IxSelect
+      v-model:value="selectedKeys"
+      :maxLabel="isSelectedAll ? 1 : undefined"
+      :dataSource="dataSource"
+      multiple
+      :overlayRender="overlayRender"
+    >
+      <template #selectedItem="node">
+        <div :class="node.prefixCls">
+          <span :class="node.prefixCls + '-label'">{{ isSelectedAll ? 'All' : node.label }}</span>
+          <span :class="node.prefixCls + '-remove'" @click.stop="handleClear(node.onRemove, node.key)">
+            <IxIcon name="close" />
+          </span>
+        </div>
+      </template>
+    </IxSelect>
+  </IxSpace>
 </template>
 
 <script setup lang="ts">
 import { VNode, computed, h, normalizeClass, ref } from 'vue'
 
+import { type VKey } from '@idux/cdk/utils'
 import { IxCheckbox } from '@idux/components/checkbox'
 
 const dataSource = ref([
@@ -47,4 +66,20 @@ const overlayRender = (children: VNode[]) => {
   )
   return h('div', [customOption, children])
 }
+
+const handleClear = (onRemove: (key: VKey) => void, key: VKey) => {
+  if (isSelectedAll.value) {
+    selectedKeys.value.splice(0)
+  } else {
+    onRemove(key)
+  }
+}
 </script>
+<style lang="less">
+.demo-select-all-wrapper .ix-selector {
+  width: 280px;
+  .ix-overflow-rest {
+    display: none;
+  }
+}
+</style>

packages/components/select/docs/Api.zh.md

@@ -76,11 +76,24 @@ export type SelectSearchFn = (data: SelectData, searchValue: string) => boolean
 | 名称 | 说明 | 参数类型 | 备注 |
 |  -- | -- | -- | -- |
 |  `default` | 选项内容 | - | - |
+|  `selectedItem` | 自定义选中项 | `data: SelectedItemProps` | 使用该插槽后`selectedLabel`将无效 |
 |  `selectedLabel` | 自定义选中的标签 | `data: SelectOption` |  |
 |  `overflowedLabel` | 自定义超出最多显示多少个标签的内容 | `data: SelectOption[]` | 参数为超出的数组 |
 |  `optionLabel` | 自定义选项的文本 | `data: SelectOption` | - |
 |  `optionGroupLabel` | 自定义选项组的文本 | `data: SelectOptionGroup` | - |
 
+```ts
+interface SelectedItemProps {
+  disabled: boolean
+  key: VKey
+  prefixCls: string
+  removable: boolean
+  label: string
+  value: unknown
+  onRemove: (key: VKey) => void
+}
+```
+
 #### SelectMethods
 
 | 名称 | 说明 | 参数类型 | 备注 |

packages/components/tree-select/docs/Api.zh.md

@@ -84,6 +84,7 @@
 | --- | --- | --- | --- |
 | `empty` | 自定义当下拉列表为空时显示的内容 | - | - |
 | `expandIcon` | 节点展开图标 | `{key: VKey, expanded: boolean, node: TreeSelectNode}` | - |
+|  `selectedItem` | 自定义选中项 | `{node: SelectedItemProps}` | 使用该插槽后`selectedLabel`将无效 |
 | `selectedLabel` | 自定义选中的标签 | `{node: RawNode}` | `RawNode`为用户传入的数据结构 |
 | `leafLineIcon` | 叶子节点的图标，用于替换默认的连接线 | - | 仅在 `showLine 时生效` |
 | `overflowedLabel` | 自定义超出最多显示多少个标签的内容 | `{nodes: RawNode[]}` | 参数为超出的数组 |
@@ -93,6 +94,18 @@
 | `treePrefix` | 自定义节点的前缀图标 | `{key: VKey, selected: boolean, node: TreeSelectNode}` | - |
 | `treeSuffix` | 自定义节点的后缀图标 | `{key: VKey, selected: boolean, node: TreeSelectNode}` | - |
 
+```ts
+interface SelectedItemProps {
+  disabled: boolean
+  key: VKey
+  prefixCls: string
+  removable: boolean
+  label: string
+  value: unknown
+  onRemove: (key: VKey) => void
+}
+```
+
 #### TreeSelectMethods
 
 | 名称 | 说明 | 参数类型 | 备注 |