feat(comp:tag): 新开发组件提交

.editorconfig

@@ -10,4 +10,4 @@ trim_trailing_whitespace = true
 insert_final_newline = true
 
 [*.md]
-trim_trailing_whitespace = false
+trim_trailing_whitespace = false

packages/components/components.less

@@ -2,6 +2,7 @@
 @import './button/style/index.less';
 @import './icon/style/index.less';
 @import './title/style/index.less';
+@import './tag/style/index.less';
 @import './typography/style/index.less';
 // import Layout
 @import './divider/style/index.less';

packages/components/config/src/defaultConfig.ts

@@ -1,6 +1,7 @@
 import type {
   ButtonConfig,
   IconConfig,
+  TagConfig,
   DividerConfig,
   SpaceConfig,
   RowConfig,
@@ -34,6 +35,12 @@ const button = shallowReactive<ButtonConfig>({ mode: 'default', size: 'medium' }
 
 const icon = shallowReactive<IconConfig>({})
 
+const tag = shallowReactive<TagConfig>({
+  closable: false,
+  checkAble: false,
+  isRound: false,
+})
+
 // --------------------- Layout ---------------------
 const divider = shallowReactive<DividerConfig>({
   dashed: false,
@@ -168,6 +175,7 @@ export const defaultConfig: GlobalConfig = {
   // General
   button,
   icon,
+  tag,
   // Layout
   divider,
   space,

packages/components/config/src/types.ts

@@ -13,6 +13,12 @@ export interface IconConfig {
   loadIconDynamically?: (iconName: string) => Promise<string>
 }
 
+export interface TagConfig {
+  closable: boolean
+  checkAble: boolean
+  isRound: boolean
+}
+
 // Layout
 export type DividerPosition = 'left' | 'center' | 'right'
 export type DividerType = 'horizontal' | 'vertical'
@@ -189,6 +195,7 @@ export interface GlobalConfig {
   // General
   button: ButtonConfig
   icon: IconConfig
+  tag: TagConfig
   // Layout
   divider: DividerConfig
   space: SpaceConfig

packages/components/index.ts

@@ -7,6 +7,7 @@ import { IxButton, IxButtonGroup } from './button'
 import { IxIcon } from './icon'
 import { IxTitle } from './title'
 import { IxTypography } from './typography'
+import { IxTag } from './tag'
 // import Layout
 import { IxDivider } from './divider'
 import { IxSpace } from './space'
@@ -45,6 +46,7 @@ const components = [
   IxButtonGroup,
   IxIcon,
   IxTitle,
+  IxTag,
   // components Layout
   IxDivider,
   IxSpace,

packages/components/style/dark.less

@@ -2,7 +2,7 @@
 
 @theme: dark;
 
-@background-color-component: #191c24;
+// @background-color-component: #191c24;
 
 /* Red -------------------------- */
 @red-l50: mix(color(~`colorPalette('@{red-base}', 20) `), @background-color-component, 15%);

packages/components/style/default.less

@@ -113,6 +113,19 @@
 @title-content-margin: @margin-md;
 @title-extra-margin: @margin-sm;
 
+
+/* tag -------------------------- start */
+@text-color-inverse: @white;
+@tag-font-size: @font-size-sm;
+@tag-default-color: @black;
+@tag-padding: @padding-xs;
+@tag-default-padding: 2px 8px;
+@tag-margin: @margin-sm;
+@tag-border-radius: @border-radius-md;
+@tag-round-border-radius: 20px;
+@tag-default-border-color: #d9d9d9;
+@tag-default-background-color: #fafafa;
+
 /* typography -------------------------- */
 @typography-default-color: @text-color;
 @typography-color-secondary: @text-color-secondary;

packages/components/tag/__tests__/__snapshots__/tag.spec.ts.snap

@@ -0,0 +1,8 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tag.vue render work 1`] = `
+"<div class=\\"ix-tag\\">
+  <!--v-if--><span class=\\"ix-tag-content\\"></span>
+  <!--v-if-->
+</div>"
+`;

packages/components/tag/__tests__/tag.spec.ts

@@ -0,0 +1,68 @@
+import { mount, MountingOptions, VueWrapper } from '@vue/test-utils'
+import { renderWork } from '@tests'
+import IxTag from '../src/Tag.vue'
+import { TagProps } from '../src/types'
+
+describe('Tag.vue', () => {
+  let TagMount: (options?: MountingOptions<Partial<TagProps>>) => VueWrapper<InstanceType<typeof IxTag>>
+
+  beforeEach(() => {
+    TagMount = options => mount(IxTag, { ...options })
+  })
+
+  renderWork(IxTag)
+
+  test('tag work', () => {
+    const wrapper = TagMount({ slots: { default: 'slot tag' } })
+
+    expect(wrapper.find('.ix-tag-content').text()).toBe('slot tag')
+  })
+
+  test('isRound', () => {
+    const wrapper = TagMount({ props: { isRound: true } })
+
+    expect(wrapper.find('.ix-tag-round'))
+  })
+
+  test('color', () => {
+    const wrapper = TagMount({ props: { color: 'red' } })
+
+    expect(wrapper.find('.ix-tag-red'))
+  })
+
+  test('custom color', () => {
+    const wrapper = TagMount({ props: { color: '#2db7f5' } })
+
+    expect(wrapper.find('.ix-tag-has-color'))
+  })
+
+  test('closable', () => {
+    const wrapper = TagMount({ props: { closable: true } })
+
+    expect(wrapper.find('.ix-tag-close-icon'))
+  })
+
+  test('checked', async () => {
+    const wrapper = TagMount({ props: { checkAble: true, checked: true } })
+
+    expect(wrapper.find('.ix-tag-checkable-checked'))
+  })
+
+  test('checkAble false', async () => {
+    const wrapper = TagMount({ props: { checkAble: false, checked: true } })
+
+    expect(wrapper.classes()).not.toContain('ix-tag-checkable-checked')
+  })
+
+  test('icon word', () => {
+    const wrapper = TagMount({ props: { icon: 'down' } })
+
+    expect(wrapper.find('.ix-icon-down').exists()).toBeTruthy()
+  })
+
+  test('icon slot word', () => {
+    const wrapper = TagMount({ props: { icon: 'up' }, slots: { icon: 'slot tag icon' } })
+
+    expect(wrapper.find('.ix-tag-icon').text()).toBe('slot tag icon')
+  })
+})

packages/components/tag/demo/Basic.md

@@ -0,0 +1,18 @@
+---
+title:
+  zh: 基本使用
+  en: Basic usage
+order: 0
+---
+
+## zh
+
+基本标签的用法，可以通过添加 closable 变为可关闭标签。可关闭标签具有 close 两个事件。  
+可通过 icon 配置tag的图标。
+可通过 isRound 配置tag是否显示圆角。
+
+## en
+
+Usage of basic Tag, and it could be closable by set closable property. Closable Tag supports close events.  
+The icon of the tag can be configured through icon.
+You can configure whether the tag displays rounded corners through isRound.

packages/components/tag/demo/Basic.vue

@@ -0,0 +1,29 @@
+<template>
+  <ix-tag> Tag </ix-tag>
+  <ix-tag icon="alipay">tag has icon</ix-tag>
+  <ix-tag icon="bug" isRound> isRound </ix-tag>
+  <ix-tag closable @close="onClose"> tag close </ix-tag>
+
+  <!--  <ix-tag v-show="hide" icon="alipay" closable @close="onClose">测试</ix-tag>-->
+  <!--  <ix-tag v-show="hide" color="red" icon="alipay" closable @close="onClose">测试</ix-tag>-->
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const hide = ref(true)
+    const onClose = () => {
+      console.log('close-success')
+      hide.value = !hide.value
+    }
+    const checked = ref(false)
+    const onChangeChecked = () => {
+      console.log('close-success')
+      checked.value = !checked.value
+    }
+    return { hide, onClose, checked, onChangeChecked }
+  },
+})
+</script>

packages/components/tag/demo/Checkable.md

@@ -0,0 +1,14 @@
+---
+title:
+  zh: 可选择
+  en: Checkable Tag
+order: 0
+---
+
+## zh
+
+可通过 checkAble="true" checked="true" 实现类似 Checkbox 的效果，点击切换选中效果。
+
+## en
+
+checkAble="true" checked="true" works like Checkbox, click it to toggle checked state.

packages/components/tag/demo/Checkable.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <ix-tag color="red" icon="alipay" closable checkAble :checked="checked" @click="onChangeChecked" @close="onClose"
+      >测试可选</ix-tag
+    >
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const hide = ref(true)
+    const onClose = () => {
+      console.log('close-success')
+      hide.value = !hide.value
+    }
+    const checked = ref(false)
+    const onChangeChecked = () => {
+      console.log('close-success')
+      checked.value = !checked.value
+    }
+    return { hide, onClose, checked, onChangeChecked }
+  },
+})
+</script>

packages/components/tag/demo/Colorful.md

@@ -0,0 +1,14 @@
+---
+title:
+  zh: 多彩标签
+  en: Colorful Tag
+order: 0
+---
+
+## zh
+
+我们添加了多种预设色彩的标签样式，用作不同场景使用。如果预设值不能满足你的需求，可以设置为具体的色值。
+
+## en
+
+We preset a series of colorful tag styles for use in different situations. You can also set it to a hex color string for custom color.

packages/components/tag/demo/Colorful.vue

@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <p>Presets:</p>
+    <ix-tag color="red"> red </ix-tag>
+    <ix-tag color="orange"> orange </ix-tag>
+    <ix-tag color="gold"> gold </ix-tag>
+    <ix-tag color="yellow"> yellow </ix-tag>
+    <ix-tag color="canary"> canary </ix-tag>
+    <ix-tag color="prasinous"> prasinous </ix-tag>
+    <ix-tag color="verdant"> verdant </ix-tag>
+    <ix-tag color="green"> green </ix-tag>
+    <ix-tag color="cyan"> cyan </ix-tag>
+    <ix-tag color="sky"> sky </ix-tag>
+    <ix-tag color="blue"> blue </ix-tag>
+    <ix-tag color="admiral"> admiral </ix-tag>
+    <ix-tag color="purple"> purple </ix-tag>
+    <ix-tag color="magenta"> magenta </ix-tag>
+  </div>
+  <div>
+    <p>Custom:</p>
+    <ix-tag color="#2db7f5"> #2db7f5 </ix-tag>
+    <ix-tag color="#87d068"> #87d068 </ix-tag>
+    <ix-tag color="#f50"> #f50 </ix-tag>
+    <ix-tag color="#108ee9"> #108ee9 </ix-tag>
+    <ix-tag color="#abcfcf"> #abcfcf </ix-tag>
+  </div>
+
+  <div>
+    <p>StatusColorTypes:</p>
+    <ix-tag color="success"> success </ix-tag>
+    <ix-tag color="pending"> pending </ix-tag>
+    <ix-tag color="error"> error </ix-tag>
+    <ix-tag color="warning"> warning </ix-tag>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const hide = ref(true)
+    const onClose = () => {
+      console.log('close-success')
+      hide.value = !hide.value
+    }
+    const checked = ref(false)
+    const onChangeChecked = () => {
+      console.log('close-success')
+      checked.value = !checked.value
+    }
+    return { hide, onClose, checked, onChangeChecked }
+  },
+})
+</script>

packages/components/tag/docs/Index.zh.md

@@ -0,0 +1,45 @@
+---
+category: components
+type: 通用
+title: Tag
+subtitle: 标签
+order: 0
+---
+
+进行标记和分类的小标签。
+
+## 何时使用
+
+- 用于标记事物的属性和维度。
+- 进行分类。
+
+## API
+
+### ix-tag
+
+#### Props
+
+| 名称 | 说明 | 类型  | 默认值 | 全局配置 | 备注 |
+| --- | --- | --- | --- | --- | --- |
+| closable | 标签是否可以关闭 | Boolean | false | ✅ | - |
+| color | 标签颜色 | String | '#000' | - | red, orange, gold, yellow, canary, prasinous, verdant, green, cyan, sky, blue, admiral, purple, magenta,lime, grey |
+| icon | 标签左侧图标 | string | - | - | - |
+| checked | 标签选中状态 | Boolean | false | - | - |
+| checkAble | 标签是否可选的状态 | Boolean | false | ✅ | - |
+| isRound | 是否圓角形狀 | Boolean | false | ✅ | - |
+
+[comment]: <> (| level | 数字等级&#40;正整数&#41;,这个可以优先级放后 | Number | - | ✅ | - |)
+
+#### Emits
+
+| 事件名称 | 说明                 | 回调函数          |
+| -------- | -------------------- | ----------------- |
+| close    | 关闭时的回调         | (e) => void       |
+| change   | 点击标签时触发的回调 | (checked) => void |
+
+#### Slots
+
+| 名称    | 说明              |
+| ------- | ---------------- |
+| default | tag的text内容 |
+| icon    | tag前面的icon内容 |