feat: cascader add clearIcon & removeIcon slot

Author: tangjinzhou

components/_util/transition.tsx

@@ -13,6 +13,17 @@ import {
   Transition as T,
   TransitionGroup as TG,
 } from 'vue';
+import { tuple } from './type';
+
+const SelectPlacements = tuple('bottomLeft', 'bottomRight', 'topLeft', 'topRight');
+export type SelectCommonPlacement = typeof SelectPlacements[number];
+
+const getTransitionDirection = (placement: SelectCommonPlacement | undefined) => {
+  if (placement !== undefined && (placement === 'topLeft' || placement === 'topRight')) {
+    return `slide-down`;
+  }
+  return `slide-up`;
+};
 
 export const getTransitionProps = (transitionName: string, opt: TransitionProps = {}) => {
   if (process.env.NODE_ENV === 'test') {
@@ -176,6 +187,6 @@ const getTransitionName = (rootPrefixCls: string, motion: string, transitionName
   return `${rootPrefixCls}-${motion}`;
 };
 
-export { Transition, TransitionGroup, collapseMotion, getTransitionName };
+export { Transition, TransitionGroup, collapseMotion, getTransitionName, getTransitionDirection };
 
 export default Transition;

components/cascader/demo/suffix.vue

@@ -16,21 +16,23 @@ Custom suffix icon
 
 </docs>
 <template>
-  <a-cascader
-    v-model:value="value1"
-    style="margin-top: 1rem"
-    :options="options"
-    placeholder="Please select"
-  >
-    <template #suffixIcon><smile-outlined class="test" /></template>
-  </a-cascader>
-  <a-cascader
-    v-model:value="value2"
-    suffix-icon="ab"
-    style="margin-top: 1rem"
-    :options="options"
-    placeholder="Please select"
-  />
+  <a-space>
+    <a-cascader
+      v-model:value="value1"
+      style="margin-top: 1rem"
+      :options="options"
+      placeholder="Please select"
+    >
+      <template #suffixIcon><smile-outlined class="test" /></template>
+    </a-cascader>
+    <a-cascader
+      v-model:value="value2"
+      suffix-icon="ab"
+      style="margin-top: 1rem"
+      :options="options"
+      placeholder="Please select"
+    />
+  </a-space>
 </template>
 <script lang="ts">
 import { SmileOutlined } from '@ant-design/icons-vue';

components/cascader/index.en-US.md

@@ -23,6 +23,8 @@ Cascade selection box.
 | --- | --- | --- | --- | --- |
 | allowClear | whether allow clear | boolean | true |  |
 | autofocus | get focus when component mounted | boolean | false |  |
+| bordered | Whether has border style | boolean | true | 3.2 |
+| clearIcon | The custom clear icon | slot | - | 3.2 |
 | changeOnSelect | (Work on single select) change value on each selection if set to true, see above demo for details | boolean | false |  |
 | disabled | whether disabled select | boolean | false |  |
 | displayRender | render function of displaying selected options, you can use #displayRender="{labels, selectedOptions}". | `({labels, selectedOptions}) => VNode` | `labels => labels.join(' / ')` |  |
@@ -41,6 +43,7 @@ Cascade selection box.
 | options | data options of cascade | [Option](#option)\[] | - |  |
 | placeholder | input placeholder | string | 'Please select' |  |
 | placement | Use preset popup align config from builtinPlacements | `bottomLeft` \| `bottomRight` \| `topLeft` \| `topRight` | `bottomLeft` | 3.0 |
+| removeIcon | The custom remove icon | slot | - | 3.2 |
 | searchValue | Set search value，Need work with `showSearch` | string | - | 3.0 |
 | showSearch | Whether show search input in single mode. | boolean \| [object](#showsearch) | false |  |
 | size | input size | `large` \| `default` \| `small` | `default` |  |

components/cascader/index.tsx

@@ -15,7 +15,8 @@ import useConfigInject from '../_util/hooks/useConfigInject';
 import classNames from '../_util/classNames';
 import type { SizeType } from '../config-provider';
 import devWarning from '../vc-util/devWarning';
-import { getTransitionName } from '../_util/transition';
+import type { SelectCommonPlacement } from '../_util/transition';
+import { getTransitionDirection, getTransitionName } from '../_util/transition';
 import { useInjectFormItemContext } from '../form';
 import type { ValueType } from '../vc-cascader/Cascader';
 
@@ -96,7 +97,7 @@ export function cascaderProps<DataNodeType extends CascaderOptionType = Cascader
     multiple: { type: Boolean, default: undefined },
     size: String as PropType<SizeType>,
     bordered: { type: Boolean, default: undefined },
-
+    placement: { type: String as PropType<SelectCommonPlacement> },
     suffixIcon: PropTypes.any,
     options: Array as PropType<DataNodeType[]>,
     'onUpdate:value': Function as PropType<(value: ValueType) => void>,
@@ -191,7 +192,17 @@ const Cascader = defineComponent({
       emit('blur', ...args);
       formItemContext.onFieldBlur();
     };
-
+    const mergedShowArrow = computed(() =>
+      props.showArrow !== undefined ? props.showArrow : props.loading || !props.multiple,
+    );
+    const placement = computed(() => {
+      if (props.placement !== undefined) {
+        return props.placement;
+      }
+      return direction.value === 'rtl'
+        ? ('bottomRight' as SelectCommonPlacement)
+        : ('bottomLeft' as SelectCommonPlacement);
+    });
     return () => {
       const {
         notFoundContent = slots.notFoundContent?.(),
@@ -225,6 +236,7 @@ const Cascader = defineComponent({
           ...props,
           multiple,
           prefixCls: prefixCls.value,
+          showArrow: mergedShowArrow.value,
         },
         slots,
       );
@@ -245,6 +257,7 @@ const Cascader = defineComponent({
             attrs.class,
           ]}
           direction={direction.value}
+          placement={placement.value}
           notFoundContent={mergedNotFoundContent}
           allowClear={allowClear}
           showSearch={mergedShowSearch.value}
@@ -257,14 +270,19 @@ const Cascader = defineComponent({
           dropdownClassName={mergedDropdownClassName.value}
           dropdownPrefixCls={cascaderPrefixCls.value}
           choiceTransitionName={getTransitionName(rootPrefixCls.value, '', choiceTransitionName)}
-          transitionName={getTransitionName(rootPrefixCls.value, 'slide-up', transitionName)}
+          transitionName={getTransitionName(
+            rootPrefixCls.value,
+            getTransitionDirection(placement.value),
+            transitionName,
+          )}
           getPopupContainer={getPopupContainer.value}
           customSlots={{
             ...slots,
             checkable: () => <span class={`${cascaderPrefixCls.value}-checkbox-inner`} />,
           }}
           displayRender={props.displayRender || slots.displayRender}
           maxTagPlaceholder={props.maxTagPlaceholder || slots.maxTagPlaceholder}
+          showArrow={props.showArrow}
           onChange={handleChange}
           onBlur={handleBlur}
           v-slots={slots}

components/cascader/index.zh-CN.md

@@ -24,6 +24,8 @@ cover: https://gw.alipayobjects.com/zos/alicdn/UdS8y8xyZ/Cascader.svg
 | --- | --- | --- | --- | --- |
 | allowClear | 是否支持清除 | boolean | true |  |
 | autofocus | 自动获取焦点 | boolean | false |  |
+| bordered | 是否有边框 | boolean | true | 3.2 |
+| clearIcon | 自定义的选择框清空图标 | slot | - | 3.2 |
 | changeOnSelect | （单选时生效）当此项为 true 时，点选每级菜单选项值都会发生变化，具体见上面的演示 | boolean | false |  |
 | defaultValue | 默认的选中项 | string\[] \| number\[] | \[] |  |
 | disabled | 禁用 | boolean | false |  |
@@ -43,6 +45,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/UdS8y8xyZ/Cascader.svg
 | options | 可选项数据源 | [Option](#option)\[] | - |  |
 | placeholder | 输入框占位文本 | string | '请选择' |  |
 | placement | 浮层预设位置 | `bottomLeft` \| `bottomRight` \| `topLeft` \| `topRight` | `bottomLeft` | 3.0 |
+| removeIcon | 自定义的多选框清除图标 | slot | - | 3.2 |
 | searchValue | 设置搜索的值，需要与 `showSearch` 配合使用 | string | - | 3.0 |
 | showSearch | 在选择框中显示搜索框 | boolean \| [object](#showsearch) | false |  |
 | size | 输入框大小 | `large` \| `default` \| `small` | `default` |  |

components/vc-cascader/Cascader.tsx

@@ -9,7 +9,7 @@ import PropTypes from '../_util/vue-types';
 import { initDefaultProps } from '../_util/props-util';
 import useId from '../vc-select/hooks/useId';
 import useMergedState from '../_util/hooks/useMergedState';
-import { fillFieldNames, toPathKey, toPathKeys } from './utils/commonUtil';
+import { fillFieldNames, toPathKey, toPathKeys, SHOW_PARENT, SHOW_CHILD } from './utils/commonUtil';
 import useEntities from './hooks/useEntities';
 import useSearchConfig from './hooks/useSearchConfig';
 import useSearchOptions from './hooks/useSearchOptions';
@@ -23,6 +23,7 @@ import { BaseSelect } from '../vc-select';
 import devWarning from '../vc-util/devWarning';
 import useMaxLevel from '../vc-tree/useMaxLevel';
 
+export { SHOW_PARENT, SHOW_CHILD };
 export interface ShowSearchType<OptionType extends BaseOptionType = DefaultOptionType> {
   filter?: (inputValue: string, options: OptionType[], fieldNames: FieldNames) => boolean;
   render?: (arg?: {
@@ -49,6 +50,7 @@ export interface InternalFieldNames extends Required<FieldNames> {
 export type SingleValueType = (string | number)[];
 
 export type ValueType = SingleValueType | SingleValueType[];
+export type ShowCheckedStrategy = typeof SHOW_PARENT | typeof SHOW_CHILD;
 
 export interface BaseOptionType {
   disabled?: boolean;
@@ -73,14 +75,11 @@ function baseCascaderProps<OptionType extends BaseOptionType = DefaultOptionType
     value: { type: [String, Number, Array] as PropType<ValueType> },
     defaultValue: { type: [String, Number, Array] as PropType<ValueType> },
     changeOnSelect: { type: Boolean, default: undefined },
-    onChange: Function as PropType<
-      (value: ValueType, selectedOptions?: OptionType[] | OptionType[][]) => void
-    >,
     displayRender: Function as PropType<
       (opt: { labels: string[]; selectedOptions?: OptionType[] }) => any
     >,
     checkable: { type: Boolean, default: undefined },
-
+    showCheckedStrategy: { type: String as PropType<ShowCheckedStrategy>, default: SHOW_PARENT },
     // Search
     showSearch: {
       type: [Boolean, Object] as PropType<boolean | ShowSearchType<OptionType>>,
@@ -184,7 +183,7 @@ function toRawValues(value: ValueType): SingleValueType[] {
     return value;
   }
 
-  return value.length === 0 ? [] : [value];
+  return (value.length === 0 ? [] : [value]).map(val => (Array.isArray(val) ? val : [val]));
 }
 
 export default defineComponent({
@@ -215,10 +214,10 @@ export default defineComponent({
 
     /** Convert path key back to value format */
     const getValueByKeyPath = (pathKeys: Key[]): SingleValueType[] => {
-      const ketPathEntities = pathKeyEntities.value;
+      const keyPathEntities = pathKeyEntities.value;
 
       return pathKeys.map(pathKey => {
-        const { nodes } = ketPathEntities[pathKey];
+        const { nodes } = keyPathEntities[pathKey];
 
         return nodes.map(node => node[mergedFieldNames.value.value]);
       });
@@ -275,12 +274,12 @@ export default defineComponent({
       }
 
       const keyPathValues = toPathKeys(existValues);
-      const ketPathEntities = pathKeyEntities.value;
+      const keyPathEntities = pathKeyEntities.value;
 
       const { checkedKeys, halfCheckedKeys } = conductCheck(
         keyPathValues,
         true,
-        ketPathEntities,
+        keyPathEntities,
         maxLevel.value,
         levelEntities.value,
       );
@@ -295,7 +294,11 @@ export default defineComponent({
 
     const deDuplicatedValues = computed(() => {
       const checkedKeys = toPathKeys(checkedValues.value);
-      const deduplicateKeys = formatStrategyValues(checkedKeys, pathKeyEntities.value);
+      const deduplicateKeys = formatStrategyValues(
+        checkedKeys,
+        pathKeyEntities.value,
+        props.showCheckedStrategy,
+      );
       return [...missingCheckedValues.value, ...getValueByKeyPath(deduplicateKeys)];
     });
 
@@ -330,6 +333,7 @@ export default defineComponent({
 
     // =========================== Select ===========================
     const onInternalSelect = (valuePath: SingleValueType) => {
+      setSearchValue('');
       if (!multiple.value) {
         triggerChange(valuePath);
       } else {
@@ -379,7 +383,11 @@ export default defineComponent({
           }
 
           // Roll up to parent level keys
-          const deDuplicatedKeys = formatStrategyValues(checkedKeys, pathKeyEntities.value);
+          const deDuplicatedKeys = formatStrategyValues(
+            checkedKeys,
+            pathKeyEntities.value,
+            props.showCheckedStrategy,
+          );
           nextCheckedValues = getValueByKeyPath(deDuplicatedKeys);
         }
 
@@ -537,7 +545,7 @@ export default defineComponent({
     return () => {
       const emptyOptions = !(mergedSearchValue.value ? searchOptions.value : mergedOptions.value)
         .length;
-
+      const { dropdownMatchSelectWidth = false } = props;
       const dropdownStyle: CSSProperties =
         // Search to match width
         (mergedSearchValue.value && mergedSearchConfig.value.matchInputWidth) ||
@@ -555,7 +563,7 @@ export default defineComponent({
           ref={selectRef}
           id={mergedId}
           prefixCls={props.prefixCls}
-          dropdownMatchSelectWidth={false}
+          dropdownMatchSelectWidth={dropdownMatchSelectWidth}
           dropdownStyle={{ ...mergedDropdownStyle.value, ...dropdownStyle }}
           // Value
           displayValues={displayValues.value}

components/vc-cascader/OptionList/Column.tsx

@@ -4,7 +4,7 @@ import type { DefaultOptionType, SingleValueType } from '../Cascader';
 import { SEARCH_MARK } from '../hooks/useSearchOptions';
 import type { Key } from '../../_util/type';
 import { useInjectCascader } from '../context';
-
+export const FIX_LABEL = '__cascader_fix_label__';
 export interface ColumnProps {
   prefixCls: string;
   multiple?: boolean;
@@ -58,7 +58,7 @@ export default function Column({
       {options.map(option => {
         const { disabled } = option;
         const searchOptions = option[SEARCH_MARK];
-        const label = option[fieldNames.value.label];
+        const label = option[FIX_LABEL] ?? option[fieldNames.value.label];
         const value = option[fieldNames.value.value];
 
         const isMergedLeaf = isLeaf(option, fieldNames.value);
@@ -132,6 +132,10 @@ export default function Column({
                 triggerOpenPath();
               }
             }}
+            onMousedown={e => {
+              // Prevent selector from blurring
+              e.preventDefault();
+            }}
           >
             {multiple && (
               <Checkbox
@@ -145,7 +149,7 @@ export default function Column({
                 }}
               />
             )}
-            <div class={`${menuItemPrefixCls}-content`}>{option[fieldNames.value.label]}</div>
+            <div class={`${menuItemPrefixCls}-content`}>{label}</div>
             {!isLoading && expandIcon && !isMergedLeaf && (
               <div class={`${menuItemPrefixCls}-expand-icon`}>{expandIcon}</div>
             )}