feat(pro): add proTagSelect component (#1867)

packages/components/_private/trigger/src/types.ts

@@ -13,15 +13,15 @@ import type { DefineComponent, HTMLAttributes, PropType, Slot } from 'vue'
 export const triggerProps = {
   value: { type: null, default: undefined },
   raw: { type: Boolean, default: false },
-  borderless: Boolean,
-  clearable: Boolean,
+  borderless: { type: Boolean, default: undefined },
+  clearable: { type: Boolean, default: undefined },
   clearIcon: { type: String as PropType<string>, default: 'close-circle' },
-  disabled: Boolean,
-  focused: Boolean,
+  disabled: { type: Boolean, default: undefined },
+  focused: { type: Boolean, default: undefined },
   monitorFocus: { type: Boolean, default: true },
   paddingless: { type: Boolean, default: false },
   placeholder: String,
-  readonly: Boolean,
+  readonly: { type: Boolean, default: undefined },
   size: { type: String as PropType<FormSize>, default: 'md' },
   status: String as PropType<ValidateStatus>,
   suffix: String as PropType<string>,

packages/components/cascader/src/Cascader.tsx

@@ -161,7 +161,6 @@ export default defineComponent({
         focused={focused}
         maxLabel={props.maxLabel}
         multiple={props.multiple}
-        monitorFocus={false}
         opened={opened}
         placeholder={props.placeholder}
         readonly={readonly}
@@ -225,8 +224,8 @@ export default defineComponent({
       const controlTriggerProps = {
         autofocus: props.autofocus,
         overlayClassName: overlayClasses.value,
-        overlayContainer: props.overlayContainer,
-        overlayContainerFallback: `${mergedPrefixCls.value}-overlay-container`,
+        overlayContainer: props.overlayContainer ?? config.overlayContainer,
+        overlayContainerFallback: `.${mergedPrefixCls.value}-overlay-container`,
         overlayMatchWidth: props.overlayMatchWidth ?? config.overlayMatchWidth,
         class: mergedPrefixCls.value,
         borderless,

packages/components/control-trigger/src/ControlTriggerOverlay.tsx

@@ -39,6 +39,7 @@ export default defineComponent({
         disabled: controlTriggerProps.disabled || controlTriggerProps.readonly,
         offset: controlTriggerProps.offset ?? defaultOffset,
         placement: props.placement ?? 'bottomStart',
+        showArrow: props.showArrow,
         transitionName: `${common.prefixCls}-slide-auto`,
         trigger: props.trigger ?? 'click',
         triggerId: attrs.id,

packages/components/index.ts

@@ -250,6 +250,7 @@ export * from '@idux/components/radio'
 export * from '@idux/components/rate'
 export * from '@idux/components/result'
 export * from '@idux/components/select'
+export * from '@idux/components/selector'
 export * from '@idux/components/skeleton'
 export * from '@idux/components/slider'
 export * from '@idux/components/space'

packages/components/select/src/Select.tsx

@@ -176,7 +176,6 @@ export default defineComponent({
         focused={focused}
         maxLabel={props.maxLabel}
         multiple={props.multiple}
-        monitorFocus={false}
         opened={opened}
         placeholder={props.placeholder}
         readonly={readonly}
@@ -237,8 +236,8 @@ export default defineComponent({
       const controlTriggerProps = {
         autofocus: props.autofocus,
         overlayClassName: overlayClasses.value,
-        overlayContainer: props.overlayContainer,
-        overlayContainerFallback: `${mergedPrefixCls.value}-overlay-container`,
+        overlayContainer: props.overlayContainer ?? config.overlayContainer,
+        overlayContainerFallback: `.${mergedPrefixCls.value}-overlay-container`,
         overlayMatchWidth: props.overlayMatchWidth ?? config.overlayMatchWidth,
         class: mergedPrefixCls.value,
         borderless,

packages/components/selector/style/index.less

@@ -23,11 +23,16 @@
   &-item {
     .ellipsis();
 
+    max-width: 100%;
     user-select: none;
 
     &-label {
       .ellipsis();
     }
+
+    &-disabled {
+      color: var(--ix-color-text-disabled);
+    }
   }
 
   &-input {
@@ -60,4 +65,20 @@
       cursor: auto;
     }
   }
+
+  &-sm {
+    .@{selector-prefix}-item {
+      max-width: calc(100% - var(--ix-font-size-icon) + var(--ix-control-padding-size-horizontal-sm));
+    }
+  }
+  &-md {
+    .@{selector-prefix}-item {
+      max-width: calc(100% - var(--ix-font-size-icon) + var(--ix-control-padding-size-horizontal-md));
+    }
+  }
+  &-lg {
+    .@{selector-prefix}-item {
+      max-width: calc(100% - var(--ix-font-size-icon) + var(--ix-control-padding-size-horizontal-lg));
+    }
+  }
 }

packages/components/tree-select/src/TreeSelect.tsx

@@ -164,7 +164,6 @@ export default defineComponent({
         focused={focused}
         maxLabel={props.maxLabel}
         multiple={props.multiple}
-        monitorFocus={false}
         opened={opened}
         placeholder={props.placeholder}
         readonly={props.readonly}
@@ -198,7 +197,7 @@ export default defineComponent({
         offset: props.offset ?? config.offset,
         overlayClassName: overlayClasses.value,
         overlayContainer: props.overlayContainer ?? config.overlayContainer,
-        overlayContainerFallback: `${mergedPrefixCls.value}-overlay-container`,
+        overlayContainerFallback: `.${mergedPrefixCls.value}-overlay-container`,
         overlayMatchWidth: props.overlayMatchWidth ?? config.overlayMatchWidth,
         'onUpdate:open': setOverlayOpened,
         onFocus: handleFocus,

packages/pro/config/src/defaultConfig.ts

@@ -35,6 +35,13 @@ export const defaultConfig: ProGlobalConfig = {
       searchable: false,
     },
   },
+  tagSelect: {
+    borderless: false,
+    clearable: false,
+    clearIcon: 'close-circle',
+    size: 'md',
+    suffix: 'down',
+  },
   tree: {
     clearIcon: 'close-circle',
     collapseIcon: ['collapse', 'expand'],

packages/pro/config/src/types.ts

@@ -23,6 +23,7 @@ export interface ProGlobalConfig {
 
   form: ProFormConfig
   table: ProTableConfig
+  tagSelect: ProTagSelectConfig
   tree: ProTreeConfig
   textarea: ProTextareaConfig
   search: ProSearchConfig
@@ -80,6 +81,14 @@ export interface ProTableConfig {
   }
 }
 
+export interface ProTagSelectConfig {
+  borderless: boolean
+  clearable: boolean
+  clearIcon: string
+  size: FormSize
+  suffix: string
+}
+
 export interface ProTreeConfig {
   clearIcon: string
   collapseIcon: [string, string]

packages/pro/default.full.css

@@ -76,6 +76,26 @@
   --ix-pro-search-tree-select-panel-max-width: 400px;
 }
 
+/* ------ pro-tag-select css variables ------ */
+:root {
+  --ix-pro-tag-select-preset-color-grey-label: #a1a7b3;
+  --ix-pro-tag-select-preset-color-grey-bg: rgb(246, 246, 247);
+  --ix-pro-tag-select-preset-color-green-label: #39c317;
+  --ix-pro-tag-select-preset-color-green-bg: rgb(235, 249, 232);
+  --ix-pro-tag-select-preset-color-blue-label: #1c6eff;
+  --ix-pro-tag-select-preset-color-blue-bg: rgb(232, 241, 255);
+  --ix-pro-tag-select-preset-color-yellow-label: #f8d81a;
+  --ix-pro-tag-select-preset-color-yellow-bg: rgb(254, 251, 232);
+  --ix-pro-tag-select-preset-color-red-label: #f52727;
+  --ix-pro-tag-select-preset-color-red-bg: rgb(254, 233, 233);
+  --ix-pro-tag-select-preset-color-orange-label: #fa721b;
+  --ix-pro-tag-select-preset-color-orange-bg: rgb(255, 241, 232);
+  --ix-pro-tag-select-color-indicator-size: 12px;
+  --ix-pro-tag-select-panel-max-height: 256px;
+  --ix-pro-tag-select-edit-panel-min-width: 225px;
+  --ix-pro-tag-select-tag-height: 20px;
+}
+
 /* ------ pro-textarea css variables ------ */
 :root {
   --ix-pro-textarea-index-col-color: #2f3540;

packages/pro/index.less

@@ -3,6 +3,7 @@
 @import './form/style/index.less';
 @import './layout/style/index.less';
 @import './table/style/index.less';
+@import './tag-select/style/index.less';
 @import './textarea/style/index.less';
 @import './transfer/style/index.less';
 @import './tree/style/index.less';

packages/pro/index.ts

@@ -11,6 +11,7 @@ import { IxProForm } from '@idux/pro/form'
 import { IxProLayout, IxProLayoutSiderTrigger } from '@idux/pro/layout'
 import { IxProSearch, IxProSearchShortcut } from '@idux/pro/search'
 import { IxProTable, IxProTableLayoutTool } from '@idux/pro/table'
+import { IxProTagSelect } from '@idux/pro/tag-select'
 import { IxProTextarea } from '@idux/pro/textarea'
 import { IxProTransfer } from '@idux/pro/transfer'
 import { IxProTree } from '@idux/pro/tree'
@@ -24,6 +25,7 @@ const components = [
   IxProLayoutSiderTrigger,
   IxProTable,
   IxProTableLayoutTool,
+  IxProTagSelect,
   IxProTransfer,
   IxProTree,
   IxProTextarea,
@@ -50,6 +52,7 @@ export * from '@idux/pro/form'
 export * from '@idux/pro/layout'
 export * from '@idux/pro/search'
 export * from '@idux/pro/table'
+export * from '@idux/pro/tag-select'
 export * from '@idux/pro/textarea'
 export * from '@idux/pro/transfer'
 export * from '@idux/pro/tree'

packages/pro/locales/src/langs/en-US.ts

@@ -31,6 +31,23 @@ const enUS: ProLocale = {
       noPinTitle: 'Unpinned',
     },
   },
+  tagSelect: {
+    colors: {
+      grey: 'grey',
+      green: 'green',
+      blue: 'blue',
+      yellow: 'yellow',
+      red: 'red',
+      orange: 'orange',
+    },
+    remove: 'delete',
+    createTag: 'Create tag',
+    removeTag: 'Remove tag',
+    maxExceededAlert: 'Tags count reached limit of ${0}',
+    empty: 'No Data',
+    ok: 'OK',
+    cancel: 'Cancel',
+  },
   tree: {
     expandAll: 'Expand',
     collapseAll: 'Collapse',

packages/pro/locales/src/langs/zh-CN.ts

@@ -31,6 +31,23 @@ const zhCN: ProLocale = {
       noPinTitle: '不固定',
     },
   },
+  tagSelect: {
+    colors: {
+      grey: '灰',
+      green: '绿',
+      blue: '蓝',
+      yellow: '黄',
+      red: '红',
+      orange: '橙',
+    },
+    remove: '删除',
+    createTag: '创建标签',
+    removeTag: '删除标签',
+    maxExceededAlert: '标签已达${0}个上限，请及时清理',
+    empty: '暂无数据',
+    ok: '确定',
+    cancel: '取消',
+  },
   tree: {
     expandAll: '展开全部',
     collapseAll: '收起全部',

packages/pro/locales/src/types.ts

@@ -43,10 +43,29 @@ export interface ProSearchLocale {
   switchToDatePanel: string
 }
 
+export interface ProTagSelectLocale {
+  colors: {
+    grey: string
+    green: string
+    blue: string
+    yellow: string
+    red: string
+    orange: string
+  }
+  remove: string
+  createTag: string
+  removeTag: string
+  maxExceededAlert: string
+  empty: string
+  ok: string
+  cancel: string
+}
+
 export interface ProLocale {
   type: ProLocaleType
 
   table: ProTableLocale
+  tagSelect: ProTagSelectLocale
   tree: ProTreeLocale
   search: ProSearchLocale
 }

packages/pro/style/variable/prefix.less

@@ -7,4 +7,5 @@
 @pro-textarea-prefix: ~'@{idux-pro-prefix}-textarea';
 @pro-transfer-prefix: ~'@{idux-pro-prefix}-transfer';
 @pro-tree-prefix: ~'@{idux-pro-prefix}-tree';
+@pro-tag-select-prefix: ~'@{idux-pro-prefix}-tag-select';
 

packages/pro/tag-select/__tests__/__snapshots__/proTagSelect.spec.ts.snap

@@ -0,0 +1,20 @@
+// Vitest Snapshot v1
+
+exports[`ProTagSelect > render work 1`] = `
+"<div class=\\"ix-trigger ix-trigger-md ix-trigger-paddingless ix-selector ix-selector-md ix-selector-allow-input ix-selector-multiple ix-pro-tag-select ix-control-trigger ix-pro-tag-select\\" tabindex=\\"-1\\">
+  <!---->
+  <div class=\\"ix-selector-content\\">
+    <div class=\\"ix-selector-placeholder\\">
+      <!---->
+    </div>
+    <div class=\\"ix-overflow ix-selector-overflow \\">
+      <!---->
+      <div class=\\"ix-overflow-item ix-overflow-suffix\\">
+        <div class=\\"ix-selector-input\\"><input class=\\"ix-selector-input-inner\\" style=\\"opacity: 0; width: 0px;\\" readonly=\\"\\"><span class=\\"ix-selector-input-mirror\\" aria-hidden=\\"true\\"></span></div>
+      </div>
+    </div>
+  </div>
+  <div class=\\"ix-trigger-suffix\\"><i class=\\"ix-icon ix-icon-down\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"down\\"></i></div>
+  <!---->
+</div>"
+`;

packages/pro/tag-select/__tests__/proTagSelect.spec.ts

@@ -0,0 +1,25 @@
+import { MountingOptions, mount } from '@vue/test-utils'
+
+import { renderWork } from '@tests'
+
+import ProTagSelect from '../src/ProTagSelect'
+import { ProTagSelectProps } from '../src/types'
+
+describe.skip('ProTagSelect', () => {
+  const ProTagSelectMount = (options?: MountingOptions<Partial<ProTagSelectProps>>) =>
+    mount(ProTagSelect, { ...(options as MountingOptions<ProTagSelectProps>) })
+
+  renderWork<ProTagSelectProps>(ProTagSelect, {
+    props: {},
+  })
+
+  test('xxx work', async () => {
+    const wrapper = ProTagSelectMount({ props: { xxx: 'Xxx' } })
+
+    expect(wrapper.classes()).toContain('ix-Xxx')
+
+    await wrapper.setProps({ xxx: 'Yyy' })
+
+    expect(wrapper.classes()).toContain('ix-Yyy')
+  })
+})

packages/pro/tag-select/demo/Basic.md

@@ -0,0 +1,14 @@
+---
+order: 0
+title:
+  zh: 基本使用
+  en: Basic usage
+---
+
+## zh
+
+最简单的用法。
+
+## en
+
+The simplest usage.