feat(pro): add proTagSelect component

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/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.

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

@@ -0,0 +1,66 @@
+<template>
+  <IxProTagSelect
+    v-model:value="selectedValue"
+    placeholder="请选择标签"
+    :dataSource="tagSelectData"
+    :onTagDataRemove="handleTagDataRemove"
+    :onTagDataAdd="handleTagDataAdd"
+    :onTagDataChange="handleTagDataChange"
+    style="width: 336px"
+  >
+    <template #removeConfirmTitle="{ label }"> 确定删除“{{ label }}”标签吗？ </template>
+    <template #removeConfirmContent> 操作说明 </template>
+  </IxProTagSelect>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import { TagSelectData } from '@idux/pro/tag-select'
+
+const selectedValue = ref<string[]>([])
+const tagSelectData = ref<TagSelectData[]>([
+  {
+    key: 'emphasis',
+    label: '重点关注',
+    color: 'yellow',
+  },
+  {
+    key: 'alarm',
+    label: '告警标签',
+    color: 'blue',
+  },
+  {
+    key: 'track',
+    label: '持续追踪',
+    color: 'blue',
+  },
+  {
+    key: 'care-and-track',
+    label: '持续关注并追踪',
+    color: 'green',
+  },
+  {
+    key: 'keeps-alarm',
+    label: '持续告警',
+    color: 'red',
+  },
+])
+
+const handleTagDataRemove = (data: TagSelectData) => {
+  tagSelectData.value = tagSelectData.value.filter(d => d.key !== data.key)
+}
+const handleTagDataAdd = (data: TagSelectData) => {
+  tagSelectData.value.push(data)
+}
+const handleTagDataChange = (data: TagSelectData) => {
+  const index = tagSelectData.value.findIndex(d => d.key === data.key)
+  if (index < 0) {
+    return
+  }
+
+  tagSelectData.value.splice(index, 1, data)
+}
+</script>
+
+<style scoped lang="less"></style>

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

@@ -0,0 +1,14 @@
+---
+order: 1
+title:
+  zh: 选择前确认
+  en: Confirm before select
+---
+
+## zh
+
+选择前通过浮层确认选项的创建。
+
+## en
+
+Confirm via an popper before select.