@antsoo-lib/components 0.1.2 → 0.1.4

package/src/cascader/index.tsx

@@ -0,0 +1,357 @@
+import LeftOutlined from '@ant-design/icons-vue/LeftOutlined'
+import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined'
+import RightOutlined from '@ant-design/icons-vue/RightOutlined'
+
+import { computed, defineComponent, ref, watchEffect } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
+
+import classNames from '../_util/classNames'
+import omit from '../_util/omit'
+import { initDefaultProps } from '../_util/props-util'
+import type { InputStatus } from '../_util/statusUtils'
+import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils'
+import type { SelectCommonPlacement } from '../_util/transition'
+import { getTransitionDirection, getTransitionName } from '../_util/transition'
+import type { VueNode } from '../_util/type'
+import { withInstall } from '../_util/type'
+import PropTypes from '../_util/vue-types'
+import type { SizeType } from '../config-provider'
+import { useInjectDisabled } from '../config-provider/DisabledContext'
+import useConfigInject from '../config-provider/hooks/useConfigInject'
+import { useInjectFormItemContext } from '../form'
+import { FormItemInputContext } from '../form/FormItemContext'
+import useSelectStyle from '../select/style'
+import getIcons from '../select/utils/iconUtil'
+import { useCompactItemContext } from '../space/Compact'
+import type { BaseOptionType, DefaultOptionType, FieldNames, ShowSearchType } from '../vc-cascader'
+import VcCascader, {
+  SHOW_CHILD,
+  SHOW_PARENT,
+  cascaderProps as vcCascaderProps,
+} from '../vc-cascader'
+import type { ValueType } from '../vc-cascader/Cascader'
+import devWarning from '../vc-util/devWarning'
+import useStyle from './style'
+
+// Align the design since we use `rc-select` in root. This help:
+// - List search content will show all content
+// - Hover opacity style
+// - Search filter match case
+
+export type { BaseOptionType, DefaultOptionType, ShowSearchType }
+
+export type FieldNamesType = FieldNames
+
+export type FilledFieldNamesType = Required<FieldNamesType>
+
+function highlightKeyword(str: string, lowerKeyword: string, prefixCls?: string) {
+  const cells = str
+    .toLowerCase()
+    .split(lowerKeyword)
+    .reduce((list, cur, index) => (index === 0 ? [cur] : [...list, lowerKeyword, cur]), [])
+  const fillCells: VueNode[] = []
+  let start = 0
+
+  cells.forEach((cell, index) => {
+    const end = start + cell.length
+    let originWorld: VueNode = str.slice(start, end)
+    start = end
+
+    if (index % 2 === 1) {
+      originWorld = (
+        <span class={`${prefixCls}-menu-item-keyword`} key="seperator">
+          {originWorld}
+        </span>
+      )
+    }
+
+    fillCells.push(originWorld)
+  })
+
+  return fillCells
+}
+
+const defaultSearchRender: ShowSearchType['render'] = ({
+  inputValue,
+  path,
+  prefixCls,
+  fieldNames,
+}) => {
+  const optionList: VueNode[] = []
+
+  // We do lower here to save perf
+  const lower = inputValue.toLowerCase()
+
+  path.forEach((node, index) => {
+    if (index !== 0) {
+      optionList.push(' / ')
+    }
+
+    let label = (node as any)[fieldNames.label!]
+    const type = typeof label
+    if (type === 'string' || type === 'number') {
+      label = highlightKeyword(String(label), lower, prefixCls)
+    }
+
+    optionList.push(label)
+  })
+  return optionList
+}
+
+export interface CascaderOptionType extends DefaultOptionType {
+  isLeaf?: boolean
+  loading?: boolean
+  children?: CascaderOptionType[]
+  [key: string]: any
+}
+export function cascaderProps<DataNodeType extends CascaderOptionType = CascaderOptionType>() {
+  return {
+    ...omit(vcCascaderProps(), ['customSlots', 'checkable', 'options']),
+    multiple: { type: Boolean, default: undefined },
+    size: String as PropType<SizeType>,
+    bordered: { type: Boolean, default: undefined },
+    placement: { type: String as PropType<SelectCommonPlacement> },
+    suffixIcon: PropTypes.any,
+    status: String as PropType<InputStatus>,
+    options: Array as PropType<DataNodeType[]>,
+    popupClassName: String,
+    /** @deprecated Please use `popupClassName` instead */
+    dropdownClassName: String,
+    'onUpdate:value': Function as PropType<(value: ValueType) => void>,
+  }
+}
+
+export type CascaderProps = Partial<ExtractPropTypes<ReturnType<typeof cascaderProps>>>
+
+export interface CascaderRef {
+  focus: () => void
+  blur: () => void
+}
+
+const Cascader = defineComponent({
+  compatConfig: { MODE: 3 },
+  name: 'ACascader',
+  inheritAttrs: false,
+  props: initDefaultProps(cascaderProps(), {
+    bordered: true,
+    choiceTransitionName: '',
+    allowClear: true,
+  }),
+  setup(props, { attrs, expose, slots, emit }) {
+    // ====================== Warning ======================
+    if (process.env.NODE_ENV !== 'production') {
+      devWarning(
+        !props.dropdownClassName,
+        'Cascader',
+        '`dropdownClassName` is deprecated. Please use `popupClassName` instead.',
+      )
+    }
+    const formItemContext = useInjectFormItemContext()
+    const formItemInputContext = FormItemInputContext.useInject()
+    const mergedStatus = computed(() => getMergedStatus(formItemInputContext.status, props.status))
+    const {
+      prefixCls: cascaderPrefixCls,
+      rootPrefixCls,
+      getPrefixCls,
+      direction,
+      getPopupContainer,
+      renderEmpty,
+      size: contextSize,
+      disabled,
+    } = useConfigInject('cascader', props)
+    const prefixCls = computed(() => getPrefixCls('select', props.prefixCls))
+    const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction)
+    const mergedSize = computed(() => compactSize.value || contextSize.value)
+    const contextDisabled = useInjectDisabled()
+    const mergedDisabled = computed(() => disabled.value ?? contextDisabled.value)
+
+    const [wrapSelectSSR, hashId] = useSelectStyle(prefixCls)
+    const [wrapCascaderSSR] = useStyle(cascaderPrefixCls)
+
+    const isRtl = computed(() => direction.value === 'rtl')
+    // =================== Warning =====================
+    if (process.env.NODE_ENV !== 'production') {
+      watchEffect(() => {
+        devWarning(
+          !props.multiple || !props.displayRender || !slots.displayRender,
+          'Cascader',
+          '`displayRender` not work on `multiple`. Please use `tagRender` instead.',
+        )
+      })
+    }
+    // ==================== Search =====================
+    const mergedShowSearch = computed(() => {
+      if (!props.showSearch) {
+        return props.showSearch
+      }
+
+      let searchConfig: ShowSearchType = {
+        render: defaultSearchRender,
+      }
+
+      if (typeof props.showSearch === 'object') {
+        searchConfig = {
+          ...searchConfig,
+          ...props.showSearch,
+        }
+      }
+
+      return searchConfig
+    })
+
+    // =================== Dropdown ====================
+    const mergedDropdownClassName = computed(() =>
+      classNames(
+        props.popupClassName || props.dropdownClassName,
+        `${cascaderPrefixCls.value}-dropdown`,
+        {
+          [`${cascaderPrefixCls.value}-dropdown-rtl`]: isRtl.value,
+        },
+        hashId.value,
+      ),
+    )
+
+    const selectRef = ref<CascaderRef>()
+    expose({
+      focus() {
+        selectRef.value?.focus()
+      },
+      blur() {
+        selectRef.value?.blur()
+      },
+    } as CascaderRef)
+
+    const handleChange: CascaderProps['onChange'] = (...args) => {
+      emit('update:value', args[0])
+      emit('change', ...args)
+      formItemContext.onFieldChange()
+    }
+    const handleBlur: CascaderProps['onBlur'] = (...args) => {
+      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?.(),
+        expandIcon = slots.expandIcon?.(),
+        multiple,
+        bordered,
+        allowClear,
+        choiceTransitionName,
+        transitionName,
+        id = formItemContext.id.value,
+        ...restProps
+      } = props
+      // =================== No Found ====================
+      const mergedNotFoundContent = notFoundContent || renderEmpty('Cascader')
+
+      // ===================== Icon ======================
+      let mergedExpandIcon = expandIcon
+      if (!expandIcon) {
+        mergedExpandIcon = isRtl.value ? <LeftOutlined /> : <RightOutlined />
+      }
+
+      const loadingIcon = (
+        <span class={`${prefixCls.value}-menu-item-loading-icon`}>
+          <LoadingOutlined spin />
+        </span>
+      )
+
+      // ===================== Icons =====================
+      const { suffixIcon, removeIcon, clearIcon } = getIcons(
+        {
+          ...props,
+          hasFeedback: formItemInputContext.hasFeedback,
+          feedbackIcon: formItemInputContext.feedbackIcon,
+          multiple,
+          prefixCls: prefixCls.value,
+          showArrow: mergedShowArrow.value,
+        },
+        slots,
+      )
+      return wrapCascaderSSR(
+        wrapSelectSSR(
+          <VcCascader
+            {...restProps}
+            {...attrs}
+            id={id}
+            prefixCls={prefixCls.value}
+            class={[
+              cascaderPrefixCls.value,
+              {
+                [`${prefixCls.value}-lg`]: mergedSize.value === 'large',
+                [`${prefixCls.value}-sm`]: mergedSize.value === 'small',
+                [`${prefixCls.value}-rtl`]: isRtl.value,
+                [`${prefixCls.value}-borderless`]: !bordered,
+                [`${prefixCls.value}-in-form-item`]: formItemInputContext.isFormItemInput,
+              },
+              getStatusClassNames(
+                prefixCls.value,
+                mergedStatus.value,
+                formItemInputContext.hasFeedback,
+              ),
+              compactItemClassnames.value,
+              attrs.class,
+              hashId.value,
+            ]}
+            disabled={mergedDisabled.value}
+            direction={direction.value}
+            placement={placement.value}
+            notFoundContent={mergedNotFoundContent}
+            allowClear={allowClear}
+            showSearch={mergedShowSearch.value}
+            expandIcon={mergedExpandIcon}
+            inputIcon={suffixIcon}
+            removeIcon={removeIcon}
+            clearIcon={clearIcon}
+            loadingIcon={loadingIcon}
+            checkable={!!multiple}
+            dropdownClassName={mergedDropdownClassName.value}
+            dropdownPrefixCls={cascaderPrefixCls.value}
+            choiceTransitionName={getTransitionName(rootPrefixCls.value, '', choiceTransitionName)}
+            transitionName={getTransitionName(
+              rootPrefixCls.value,
+              getTransitionDirection(placement.value),
+              transitionName,
+            )}
+            getPopupContainer={getPopupContainer?.value}
+            customSlots={{
+              ...slots,
+              checkable: () => <span class={`${cascaderPrefixCls.value}-checkbox-inner`} />,
+            }}
+            tagRender={props.tagRender || slots.tagRender}
+            displayRender={props.displayRender || slots.displayRender}
+            maxTagPlaceholder={props.maxTagPlaceholder || slots.maxTagPlaceholder}
+            showArrow={formItemInputContext.hasFeedback || props.showArrow}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            v-slots={slots}
+            ref={selectRef}
+          />,
+        ),
+      )
+    }
+  },
+})
+export default withInstall<
+  typeof Cascader & {
+    SHOW_PARENT: typeof SHOW_PARENT
+    SHOW_CHILD: typeof SHOW_CHILD
+  }
+>(
+  Object.assign(Cascader, {
+    SHOW_CHILD,
+    SHOW_PARENT,
+  } as any),
+)

package/src/cascader/index.zh-CN.md

@@ -0,0 +1,100 @@
+---
+category: Components
+type: 数据录入
+title: Cascader
+subtitle: 级联选择
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*tokLTp73TsQAAAAAAAAAAAAADrJ8AQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*5-ArSLl5UBsAAAAAAAAAAAAADrJ8AQ/original
+---
+
+级联选择框。
+
+## 何时使用
+
+- 需要从一组相关联的数据集合进行选择，例如省市区，公司层级，事物分类等。
+- 从一个较大的数据集合中进行选择时，用多级分类进行分隔，方便选择。
+- 比起 Select 组件，可以在同一个浮层中完成选择，有较好的体验。
+
+## API
+
+```html
+<a-cascader :options="options" v-model:value="value" />
+```
+
+| 参数                | 说明                                                                                                                                    | 类型                                                     | 默认值                                                     | Version |
+| ------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- | ---------------------------------------------------------- | ------- |
+| 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                                                      |         |
+| displayRender       | 选择后展示的渲染函数,可使用 #displayRender="{labels, selectedOptions}"                                                                  | `({labels, selectedOptions}) => VNode`                   | `labels => labels.join(' / ')`                             |         |
+| popupClassName      | 自定义浮层类名                                                                                                                          | string                                                   | -                                                          | 4.0     |
+| dropdownStyle       | 自定义浮层样式                                                                                                                          | CSSProperties                                            | {}                                                         | 3.0     |
+| expandIcon          | 自定义次级菜单展开图标                                                                                                                  | slot                                                     | -                                                          | 3.0     |
+| expandTrigger       | 次级菜单的展开方式                                                                                                                      | `click` \| `hover`                                       | 'click'                                                    |         |
+| fieldNames          | 自定义 options 中 `label` `value` `children` 的字段                                                                                     | object                                                   | `{ label: 'label', value: 'value', children: 'children' }` |         |
+| getPopupContainer   | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。                                    | Function(triggerNode)                                    | () => document.body                                        |         |
+| loadData            | 用于动态加载选项，无法与 `showSearch` 一起使用                                                                                          | `(selectedOptions) => void`                              | -                                                          |         |
+| maxTagCount         | 最多显示多少个 tag，响应式模式会对性能产生损耗                                                                                          | number \| `responsive`                                   | -                                                          | 3.0     |
+| maxTagPlaceholder   | 隐藏 tag 时显示的内容                                                                                                                   | v-slot \| function(omittedValues)                        | -                                                          | 3.0     |
+| multiple            | 支持多选节点                                                                                                                            | boolean                                                  | -                                                          | 3.0     |
+| notFoundContent     | 当下拉列表为空时显示的内容                                                                                                              | string \| slot                                           | 'Not Found'                                                |         |
+| open                | 控制浮层显隐                                                                                                                            | boolean                                                  | -                                                          | 3.0     |
+| options             | 可选项数据源                                                                                                                            | [Option](#option)\[]                                     | -                                                          |         |
+| placeholder         | 输入框占位文本                                                                                                                          | string                                                   | '请选择'                                                   |         |
+| placement           | 浮层预设位置                                                                                                                            | `bottomLeft` \| `bottomRight` \| `topLeft` \| `topRight` | `bottomLeft`                                               | 3.0     |
+| showCheckedStrategy | 定义选中项回填的方式。`Cascader.SHOW_CHILD`: 只显示选中的子节点。`Cascader.SHOW_PARENT`: 只显示父节点（当父节点下所有子节点都选中时）。 | `Cascader.SHOW_PARENT` \| `Cascader.SHOW_CHILD`          | `Cascader.SHOW_PARENT`                                     | 3.3.0   |
+| removeIcon          | 自定义的多选框清除图标                                                                                                                  | slot                                                     | -                                                          | 3.2     |
+| searchValue         | 设置搜索的值，需要与 `showSearch` 配合使用                                                                                              | string                                                   | -                                                          | 3.0     |
+| showSearch          | 在选择框中显示搜索框                                                                                                                    | boolean \| [object](#showsearch)                         | false                                                      |         |
+| status              | 设置校验状态                                                                                                                            | 'error' \| 'warning'                                     | -                                                          | 3.3.0   |
+| size                | 输入框大小                                                                                                                              | `large` \| `default` \| `small`                          | `default`                                                  |         |
+| suffixIcon          | 自定义的选择框后缀图标                                                                                                                  | string \| VNode \| slot                                  | -                                                          |         |
+| tagRender           | 自定义 tag 内容，多选时生效                                                                                                             | slot                                                     | -                                                          | 3.0     |
+| value(v-model)      | 指定选中项                                                                                                                              | string\[] \| number\[]                                   | -                                                          |         |
+
+### showSearch
+
+`showSearch` 为对象时，其中的字段：
+
+| 参数            | 说明                                                                                         | 类型                                  | 默认值 |
+| --------------- | -------------------------------------------------------------------------------------------- | ------------------------------------- | ------ |
+| filter          | 接收 `inputValue` `path` 两个参数，当 `path` 符合筛选条件时，应返回 true，反之则返回 false。 | `function(inputValue, path): boolean` |        |
+| limit           | 搜索结果展示数量                                                                             | number \| false                       | 50     |
+| matchInputWidth | 搜索结果列表是否与输入框同宽                                                                 | boolean                               |        |
+| render          | 用于渲染 filter 后的选项,可使用 #showSearchRender="{inputValue, path}"                       | `function({inputValue, path}): VNode` |        |
+| sort            | 用于排序 filter 后的选项                                                                     | `function(a, b, inputValue)`          |        |
+
+### 事件
+
+| 事件名称              | 说明                   | 回调参数                           | 版本 |     |
+| --------------------- | ---------------------- | ---------------------------------- | ---- | --- |
+| change                | 选择完成后的回调       | `(value, selectedOptions) => void` | -    |     |
+| dropdownVisibleChange | 显示/隐藏浮层的回调    | `(value) => void`                  | -    | 3.0 |
+| search                | 监听搜索，返回输入的值 | `(value) => void`                  | -    | 3.0 |
+
+### Option
+
+```ts
+interface Option {
+  value: string | number
+  label?: any
+  disabled?: boolean
+  children?: Option[]
+  // 标记是否为叶子节点，设置了 `loadData` 时有效
+  // 设为 `false` 时会强制标记为父节点，即使当前节点没有 children，也会显示展开图标
+  isLeaf?: boolean
+}
+```
+
+## 方法
+
+| 名称    | 描述     |
+| ------- | -------- |
+| blur()  | 移除焦点 |
+| focus() | 获取焦点 |
+
+> 注意，如果需要获得中国省市区数据，可以参考 react 组件的实现 [china-division](https://gist.github.com/afc163/7582f35654fd03d5be7009444345ea17)。

package/src/cascader/style/index.ts

@@ -0,0 +1,165 @@
+import { getStyle as getCheckboxStyle } from '../../checkbox/style'
+import { textEllipsis } from '../../style'
+import { genCompactItemStyle } from '../../style/compact-item'
+import type { FullToken, GenerateStyle } from '../../theme/internal'
+import { genComponentStyleHook } from '../../theme/internal'
+
+export interface ComponentToken {
+  controlWidth: number
+  controlItemWidth: number
+  dropdownHeight: number
+}
+
+type CascaderToken = FullToken<'Cascader'>
+
+// =============================== Base ===============================
+const genBaseStyle: GenerateStyle<CascaderToken> = (token) => {
+  const { prefixCls, componentCls, antCls } = token
+  const cascaderMenuItemCls = `${componentCls}-menu-item`
+  const iconCls = `
+    &${cascaderMenuItemCls}-expand ${cascaderMenuItemCls}-expand-icon,
+    ${cascaderMenuItemCls}-loading-icon
+  `
+
+  const itemPaddingVertical = Math.round(
+    (token.controlHeight - token.fontSize * token.lineHeight) / 2,
+  )
+
+  return [
+    // =====================================================
+    // ==                     Control                     ==
+    // =====================================================
+    {
+      [componentCls]: {
+        width: token.controlWidth,
+      },
+    },
+    // =====================================================
+    // ==                      Popup                      ==
+    // =====================================================
+    {
+      [`${componentCls}-dropdown`]: [
+        // ==================== Checkbox ====================
+        getCheckboxStyle(`${prefixCls}-checkbox`, token),
+        {
+          [`&${antCls}-select-dropdown`]: {
+            padding: 0,
+          },
+        },
+        {
+          [componentCls]: {
+            // ================== Checkbox ==================
+            '&-checkbox': {
+              top: 0,
+              marginInlineEnd: token.paddingXS,
+            },
+
+            // ==================== Menu ====================
+            // >>> Menus
+            '&-menus': {
+              display: 'flex',
+              flexWrap: 'nowrap',
+              alignItems: 'flex-start',
+
+              [`&${componentCls}-menu-empty`]: {
+                [`${componentCls}-menu`]: {
+                  width: '100%',
+                  height: 'auto',
+
+                  [cascaderMenuItemCls]: {
+                    color: token.colorTextDisabled,
+                  },
+                },
+              },
+            },
+
+            // >>> Menu
+            '&-menu': {
+              flexGrow: 1,
+              minWidth: token.controlItemWidth,
+              height: token.dropdownHeight,
+              margin: 0,
+              padding: token.paddingXXS,
+              overflow: 'auto',
+              verticalAlign: 'top',
+              listStyle: 'none',
+              '-ms-overflow-style': '-ms-autohiding-scrollbar', // https://github.com/ant-design/ant-design/issues/11857
+
+              '&:not(:last-child)': {
+                borderInlineEnd: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
+              },
+
+              '&-item': {
+                ...textEllipsis,
+                display: 'flex',
+                flexWrap: 'nowrap',
+                alignItems: 'center',
+                padding: `${itemPaddingVertical}px ${token.paddingSM}px`,
+                lineHeight: token.lineHeight,
+                cursor: 'pointer',
+                transition: `all ${token.motionDurationMid}`,
+                borderRadius: token.borderRadiusSM,
+
+                '&:hover': {
+                  background: token.controlItemBgHover,
+                },
+                '&-disabled': {
+                  color: token.colorTextDisabled,
+                  cursor: 'not-allowed',
+
+                  '&:hover': {
+                    background: 'transparent',
+                  },
+
+                  [iconCls]: {
+                    color: token.colorTextDisabled,
+                  },
+                },
+
+                [`&-active:not(${cascaderMenuItemCls}-disabled)`]: {
+                  [`&, &:hover`]: {
+                    fontWeight: token.fontWeightStrong,
+                    backgroundColor: token.controlItemBgActive,
+                  },
+                },
+
+                '&-content': {
+                  flex: 'auto',
+                },
+
+                [iconCls]: {
+                  marginInlineStart: token.paddingXXS,
+                  color: token.colorTextDescription,
+                  fontSize: token.fontSizeIcon,
+                },
+
+                '&-keyword': {
+                  color: token.colorHighlight,
+                },
+              },
+            },
+          },
+        },
+      ],
+    },
+    // =====================================================
+    // ==                       RTL                       ==
+    // =====================================================
+    {
+      [`${componentCls}-dropdown-rtl`]: {
+        direction: 'rtl',
+      },
+    },
+    // =====================================================
+    // ==             Space Compact                       ==
+    // =====================================================
+    genCompactItemStyle(token),
+  ]
+}
+
+// ============================== Export ==============================
+export default genComponentStyleHook('Cascader', (token) => [genBaseStyle(token)], {
+  controlWidth: 184,
+  controlItemWidth: 111,
+  dropdownHeight: 180,
+})