From c72259ce40b5d29e5d25c43df048b9a87dc4a016 Mon Sep 17 00:00:00 2001
From: codedance <codedance@sohu.com>
Date: Sat, 6 Nov 2021 18:14:09 +0800
Subject: [PATCH 1/3] =?UTF-8?q?feat(tags):=20=E5=88=9B=E5=BB=BATags?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E5=88=9D=E6=AD=A5=E5=AE=8C=E6=88=90?=
 =?UTF-8?q?=E7=AE=80=E5=8D=95=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../devui/tags/__tests__/tags.spec.ts         |  8 ++
 packages/devui-vue/devui/tags/index.ts        | 17 +++++
 .../devui-vue/devui/tags/src/hooks/index.ts   |  3 +
 .../devui/tags/src/hooks/useStyle.ts          | 11 +++
 .../devui-vue/devui/tags/src/tags-types.ts    | 19 +++++
 packages/devui-vue/devui/tags/src/tags.scss   | 74 +++++++++++++++++++
 packages/devui-vue/devui/tags/src/tags.tsx    | 31 ++++++++
 .../devui-vue/docs/components/tags/index.md   | 53 +++++++++++++
 8 files changed, 216 insertions(+)
 create mode 100644 packages/devui-vue/devui/tags/__tests__/tags.spec.ts
 create mode 100644 packages/devui-vue/devui/tags/index.ts
 create mode 100644 packages/devui-vue/devui/tags/src/hooks/index.ts
 create mode 100644 packages/devui-vue/devui/tags/src/hooks/useStyle.ts
 create mode 100644 packages/devui-vue/devui/tags/src/tags-types.ts
 create mode 100644 packages/devui-vue/devui/tags/src/tags.scss
 create mode 100644 packages/devui-vue/devui/tags/src/tags.tsx
 create mode 100644 packages/devui-vue/docs/components/tags/index.md

diff --git a/packages/devui-vue/devui/tags/__tests__/tags.spec.ts b/packages/devui-vue/devui/tags/__tests__/tags.spec.ts
new file mode 100644
index 00000000..cb291e37
--- /dev/null
+++ b/packages/devui-vue/devui/tags/__tests__/tags.spec.ts
@@ -0,0 +1,8 @@
+import { mount } from '@vue/test-utils';
+import { Tags } from '../index';
+
+describe('tags test', () => {
+  it('tags init render', async () => {
+    // todo
+  })
+})
diff --git a/packages/devui-vue/devui/tags/index.ts b/packages/devui-vue/devui/tags/index.ts
new file mode 100644
index 00000000..5b728441
--- /dev/null
+++ b/packages/devui-vue/devui/tags/index.ts
@@ -0,0 +1,17 @@
+import type { App } from 'vue'
+import Tags from './src/tags'
+
+Tags.install = function(app: App): void {
+  app.component(Tags.name, Tags)
+}
+
+export { Tags }
+
+export default {
+  title: 'Tags 标签',
+  category: '数据展示',
+  status: undefined, // TODO: 组件若开发完成则填入"已完成"，并删除该注释
+  install(app: App): void {
+        app.use(Tags as any)
+  }
+}
diff --git a/packages/devui-vue/devui/tags/src/hooks/index.ts b/packages/devui-vue/devui/tags/src/hooks/index.ts
new file mode 100644
index 00000000..8931ccc4
--- /dev/null
+++ b/packages/devui-vue/devui/tags/src/hooks/index.ts
@@ -0,0 +1,3 @@
+import useStyle from './useStyle'
+
+export { useStyle }
diff --git a/packages/devui-vue/devui/tags/src/hooks/useStyle.ts b/packages/devui-vue/devui/tags/src/hooks/useStyle.ts
new file mode 100644
index 00000000..44df8343
--- /dev/null
+++ b/packages/devui-vue/devui/tags/src/hooks/useStyle.ts
@@ -0,0 +1,11 @@
+import { computed } from 'vue'
+import { tagsProps, TagsProps } from '../tags-types'
+
+export default function (props: TagsProps) {
+  return computed(() => {
+    const { type } = props
+    console.log(type, 'type')
+
+    return `devui-tag devui-tag-${type || 'default'}`
+  })
+}
diff --git a/packages/devui-vue/devui/tags/src/tags-types.ts b/packages/devui-vue/devui/tags/src/tags-types.ts
new file mode 100644
index 00000000..81795c2e
--- /dev/null
+++ b/packages/devui-vue/devui/tags/src/tags-types.ts
@@ -0,0 +1,19 @@
+import type { PropType, ExtractPropTypes } from 'vue'
+
+export type tagType = 'primary' | 'success' | 'warning' | 'danger'
+
+export const tagsProps = {
+  /* test: {
+    type: Object as PropType<{ xxx: xxx }>
+  } */
+  type: {
+    type: String as PropType<tagType>,
+    default: ''
+  },
+  color: {
+    type: String as PropType<string>,
+    default: ''
+  }
+} as const
+
+export type TagsProps = ExtractPropTypes<typeof tagsProps>
diff --git a/packages/devui-vue/devui/tags/src/tags.scss b/packages/devui-vue/devui/tags/src/tags.scss
new file mode 100644
index 00000000..7d69624f
--- /dev/null
+++ b/packages/devui-vue/devui/tags/src/tags.scss
@@ -0,0 +1,74 @@
+@import '../../style/mixins/index';
+@import '../../style/theme/color';
+@import '../../style/theme/variables';
+@import '../../style/theme/font';
+@import '../../style/theme/corner';
+
+$devui-tag-normal-config: (
+  // text: (
+  //   color: $devui-brand-active
+  // ),
+  // text-dark: (
+  //   color: $devui-brand-active
+  // ),
+  default:
+    (
+      border: 0,
+      color: $devui-text,
+      background-color: $devui-default-bg // background-color: $devui-label-bg
+    ),
+  primary: (
+    color: $devui-primary,
+    background-color: $devui-primary-bg,
+    border-color: $devui-primary-line
+  ),
+  success: (
+    color: $devui-success,
+    background-color: $devui-success-bg,
+    border-color: $devui-success-line
+  ),
+  // info: (
+  //   color: $devui-info,
+  //   background-color: $devui-info-bg,
+  //   border-color: $devui-info-line
+  // ),
+  warning:
+    (
+      color: $devui-warning,
+      background-color: $devui-warning-bg,
+      border-color: $devui-warning-line
+    ),
+  danger: (
+    color: $devui-danger,
+    background-color: $devui-danger-bg,
+    border-color: $devui-danger-line
+  )
+);
+
+.devui-tags {
+  display: inline-block;
+  margin: 4px;
+
+  .devui-tag {
+    padding: 0 8px;
+    min-height: 20px;
+    font-size: 12px;
+    font-size: var(--devui-font-size, 12px);
+    line-height: 20px;
+    border: 1px solid;
+    border-radius: $devui-border-radius;
+    // border-color: inherit;
+    display: block;
+    align-items: center;
+    position: relative;
+    cursor: default;
+
+    @each $type in default, primary, success, warning, danger {
+      &.devui-tag-#{$type} {
+        @each $key, $value in map-get($devui-tag-normal-config, $type) {
+          #{$key}: $value;
+        }
+      }
+    }
+  }
+}
diff --git a/packages/devui-vue/devui/tags/src/tags.tsx b/packages/devui-vue/devui/tags/src/tags.tsx
new file mode 100644
index 00000000..caa04616
--- /dev/null
+++ b/packages/devui-vue/devui/tags/src/tags.tsx
@@ -0,0 +1,31 @@
+import { defineComponent, ref, toRefs, computed } from 'vue'
+import { tagsProps, TagsProps } from './tags-types'
+import { useStyle } from './hooks'
+import './tags.scss'
+// 类型声明
+
+export default defineComponent({
+  name: 'DTags',
+  props: tagsProps,
+  emits: [],
+  setup(props: TagsProps, { slots }) {
+    //获取type对应样式
+    const tagClass = useStyle(props)
+
+    return () => (
+      <div class="devui-tags">
+        <span class={tagClass.value} style="display: block;">
+          {slots.default?.()}
+        </span>
+      </div>
+    )
+  }
+})
+/* 
+<d-tag>
+<span  class="devui-tag-item" title="default color" style="display: block;">
+<div  class="content-wrapper"></div>
+<span  class="ng-star-inserted">default color</span>
+</span>
+</d-tag>
+*/
diff --git a/packages/devui-vue/docs/components/tags/index.md b/packages/devui-vue/docs/components/tags/index.md
new file mode 100644
index 00000000..330549eb
--- /dev/null
+++ b/packages/devui-vue/docs/components/tags/index.md
@@ -0,0 +1,53 @@
+# Tags 标签
+
+标签展示组件。
+
+## 何时使用
+
+用户需要展示多个标签时。
+
+## 基本用法
+
+:::demo 由`type`属性来选择 tag 的类型，也可以通过`color`属性来自定义背景色
+
+```vue
+<template>
+  <d-tags>标签一</d-tags>
+  <d-tags type="primary">标签二</d-tags>
+  <d-tags type="success">标签三</d-tags>
+  <d-tags type="warning">标签四</d-tags>
+  <d-tags type="danger">标签五</d-tags>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  setup() {
+    return {
+      msg: 'Tags 标签 组件文档示例'
+    }
+  }
+})
+</script>
+
+<style></style>
+```
+
+:::
+
+## API
+
+### Props
+
+| 参数  |   类型   | 默认值  |        说明        |              可选值              |    跳转至 Demo    |
+| :---: | :------: | :-----: | :----------------: | :------------------------------: | :---------------: |
+| type  | `string` | defalut |  可选，标签的类型  | `success\|info\|warning\|danger` | [示例](#基本用法) |
+| color | `string` |   ''    | 可选，标签的主题色 |                                  |                   |
+
+### Event
+
+| 名称          | 说明                              |
+| :------------ | --------------------------------- |
+| tagDelete     | 删除 tag 的时候触发的事件         |
+| checkedChange | tag 的 check 状态改变时触发的事件 |
-- 
Gitee


From fb384bd5001bc4260ddceb0826959ed758301ee1 Mon Sep 17 00:00:00 2001
From: c0dedance <2627702283@qq.com>
Date: Sun, 7 Nov 2021 09:00:11 +0000
Subject: [PATCH 2/3] update packages/devui-vue/devui/tags/src/tags-types.ts.

---
 packages/devui-vue/devui/tags/src/tags-types.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/devui-vue/devui/tags/src/tags-types.ts b/packages/devui-vue/devui/tags/src/tags-types.ts
index 81795c2e..61874240 100644
--- a/packages/devui-vue/devui/tags/src/tags-types.ts
+++ b/packages/devui-vue/devui/tags/src/tags-types.ts
@@ -3,9 +3,6 @@ import type { PropType, ExtractPropTypes } from 'vue'
 export type tagType = 'primary' | 'success' | 'warning' | 'danger'
 
 export const tagsProps = {
-  /* test: {
-    type: Object as PropType<{ xxx: xxx }>
-  } */
   type: {
     type: String as PropType<tagType>,
     default: ''
-- 
Gitee


From 74868fcd5ecabb103d1c1848305847afc6417064 Mon Sep 17 00:00:00 2001
From: codedance <codedance@sohu.com>
Date: Sun, 7 Nov 2021 20:51:44 +0800
Subject: [PATCH 3/3] =?UTF-8?q?feat(tag):=20=E5=88=9B=E5=BB=BATag=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=EF=BC=8C=E5=88=9D=E6=AD=A5=E5=AE=8C=E6=88=90=E7=AE=80?=
 =?UTF-8?q?=E5=8D=95=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../devui-vue/devui/tag/__tests__/tag.spec.ts |  8 ++++
 .../devui-vue/devui/{tags => tag}/index.ts    | 14 +++----
 .../devui/{tags => tag}/src/hooks/index.ts    |  0
 .../devui/{tags => tag}/src/hooks/useStyle.ts |  5 +--
 .../tags-types.ts => tag/src/tag-types.ts}    |  7 +---
 .../{tags/src/tags.scss => tag/src/tag.scss}  | 42 ++++++-------------
 .../{tags/src/tags.tsx => tag/src/tag.tsx}    | 20 +++------
 .../devui/tags/__tests__/tags.spec.ts         |  8 ----
 .../docs/components/{tags => tag}/index.md    | 14 +++----
 9 files changed, 44 insertions(+), 74 deletions(-)
 create mode 100644 packages/devui-vue/devui/tag/__tests__/tag.spec.ts
 rename packages/devui-vue/devui/{tags => tag}/index.ts (30%)
 rename packages/devui-vue/devui/{tags => tag}/src/hooks/index.ts (100%)
 rename packages/devui-vue/devui/{tags => tag}/src/hooks/useStyle.ts (53%)
 rename packages/devui-vue/devui/{tags/src/tags-types.ts => tag/src/tag-types.ts} (64%)
 rename packages/devui-vue/devui/{tags/src/tags.scss => tag/src/tag.scss} (56%)
 rename packages/devui-vue/devui/{tags/src/tags.tsx => tag/src/tag.tsx} (50%)
 delete mode 100644 packages/devui-vue/devui/tags/__tests__/tags.spec.ts
 rename packages/devui-vue/docs/components/{tags => tag}/index.md (81%)

diff --git a/packages/devui-vue/devui/tag/__tests__/tag.spec.ts b/packages/devui-vue/devui/tag/__tests__/tag.spec.ts
new file mode 100644
index 00000000..9db389e4
--- /dev/null
+++ b/packages/devui-vue/devui/tag/__tests__/tag.spec.ts
@@ -0,0 +1,8 @@
+import { mount } from '@vue/test-utils'
+import { Tag } from '../index'
+
+describe('tag test', () => {
+  it('tag init render', async () => {
+    // todo
+  })
+})
diff --git a/packages/devui-vue/devui/tags/index.ts b/packages/devui-vue/devui/tag/index.ts
similarity index 30%
rename from packages/devui-vue/devui/tags/index.ts
rename to packages/devui-vue/devui/tag/index.ts
index 5b728441..43310285 100644
--- a/packages/devui-vue/devui/tags/index.ts
+++ b/packages/devui-vue/devui/tag/index.ts
@@ -1,17 +1,17 @@
 import type { App } from 'vue'
-import Tags from './src/tags'
+import Tag from './src/tag'
 
-Tags.install = function(app: App): void {
-  app.component(Tags.name, Tags)
+Tag.install = function (app: App): void {
+  app.component(Tag.name, Tag)
 }
 
-export { Tags }
+export { Tag }
 
 export default {
-  title: 'Tags 标签',
+  title: 'Tag 标签',
   category: '数据展示',
-  status: undefined, // TODO: 组件若开发完成则填入"已完成"，并删除该注释
+  status: '20%', // TODO: 组件若开发完成则填入"已完成"，并删除该注释
   install(app: App): void {
-        app.use(Tags as any)
+    app.use(Tag as any)
   }
 }
diff --git a/packages/devui-vue/devui/tags/src/hooks/index.ts b/packages/devui-vue/devui/tag/src/hooks/index.ts
similarity index 100%
rename from packages/devui-vue/devui/tags/src/hooks/index.ts
rename to packages/devui-vue/devui/tag/src/hooks/index.ts
diff --git a/packages/devui-vue/devui/tags/src/hooks/useStyle.ts b/packages/devui-vue/devui/tag/src/hooks/useStyle.ts
similarity index 53%
rename from packages/devui-vue/devui/tags/src/hooks/useStyle.ts
rename to packages/devui-vue/devui/tag/src/hooks/useStyle.ts
index 44df8343..2dbb29d7 100644
--- a/packages/devui-vue/devui/tags/src/hooks/useStyle.ts
+++ b/packages/devui-vue/devui/tag/src/hooks/useStyle.ts
@@ -1,10 +1,9 @@
 import { computed } from 'vue'
-import { tagsProps, TagsProps } from '../tags-types'
+import { tagProps, TagProps } from '../tag-types'
 
-export default function (props: TagsProps) {
+export default function (props: TagProps) {
   return computed(() => {
     const { type } = props
-    console.log(type, 'type')
 
     return `devui-tag devui-tag-${type || 'default'}`
   })
diff --git a/packages/devui-vue/devui/tags/src/tags-types.ts b/packages/devui-vue/devui/tag/src/tag-types.ts
similarity index 64%
rename from packages/devui-vue/devui/tags/src/tags-types.ts
rename to packages/devui-vue/devui/tag/src/tag-types.ts
index 81795c2e..f8fd95a5 100644
--- a/packages/devui-vue/devui/tags/src/tags-types.ts
+++ b/packages/devui-vue/devui/tag/src/tag-types.ts
@@ -2,10 +2,7 @@ import type { PropType, ExtractPropTypes } from 'vue'
 
 export type tagType = 'primary' | 'success' | 'warning' | 'danger'
 
-export const tagsProps = {
-  /* test: {
-    type: Object as PropType<{ xxx: xxx }>
-  } */
+export const tagProps = {
   type: {
     type: String as PropType<tagType>,
     default: ''
@@ -16,4 +13,4 @@ export const tagsProps = {
   }
 } as const
 
-export type TagsProps = ExtractPropTypes<typeof tagsProps>
+export type TagProps = ExtractPropTypes<typeof tagProps>
diff --git a/packages/devui-vue/devui/tags/src/tags.scss b/packages/devui-vue/devui/tag/src/tag.scss
similarity index 56%
rename from packages/devui-vue/devui/tags/src/tags.scss
rename to packages/devui-vue/devui/tag/src/tag.scss
index 7d69624f..bd3e3c7a 100644
--- a/packages/devui-vue/devui/tags/src/tags.scss
+++ b/packages/devui-vue/devui/tag/src/tag.scss
@@ -1,22 +1,11 @@
-@import '../../style/mixins/index';
-@import '../../style/theme/color';
-@import '../../style/theme/variables';
-@import '../../style/theme/font';
-@import '../../style/theme/corner';
+@import '@devui/styles-var/devui-var';
 
 $devui-tag-normal-config: (
-  // text: (
-  //   color: $devui-brand-active
-  // ),
-  // text-dark: (
-  //   color: $devui-brand-active
-  // ),
-  default:
-    (
-      border: 0,
-      color: $devui-text,
-      background-color: $devui-default-bg // background-color: $devui-label-bg
-    ),
+  default: (
+    border: 0,
+    color: $devui-text,
+    background-color: $devui-default-bg
+  ),
   primary: (
     color: $devui-primary,
     background-color: $devui-primary-bg,
@@ -27,17 +16,11 @@ $devui-tag-normal-config: (
     background-color: $devui-success-bg,
     border-color: $devui-success-line
   ),
-  // info: (
-  //   color: $devui-info,
-  //   background-color: $devui-info-bg,
-  //   border-color: $devui-info-line
-  // ),
-  warning:
-    (
-      color: $devui-warning,
-      background-color: $devui-warning-bg,
-      border-color: $devui-warning-line
-    ),
+  warning: (
+    color: $devui-warning,
+    background-color: $devui-warning-bg,
+    border-color: $devui-warning-line
+  ),
   danger: (
     color: $devui-danger,
     background-color: $devui-danger-bg,
@@ -45,7 +28,7 @@ $devui-tag-normal-config: (
   )
 );
 
-.devui-tags {
+.devui-tag {
   display: inline-block;
   margin: 4px;
 
@@ -57,7 +40,6 @@ $devui-tag-normal-config: (
     line-height: 20px;
     border: 1px solid;
     border-radius: $devui-border-radius;
-    // border-color: inherit;
     display: block;
     align-items: center;
     position: relative;
diff --git a/packages/devui-vue/devui/tags/src/tags.tsx b/packages/devui-vue/devui/tag/src/tag.tsx
similarity index 50%
rename from packages/devui-vue/devui/tags/src/tags.tsx
rename to packages/devui-vue/devui/tag/src/tag.tsx
index caa04616..a04ac737 100644
--- a/packages/devui-vue/devui/tags/src/tags.tsx
+++ b/packages/devui-vue/devui/tag/src/tag.tsx
@@ -1,19 +1,19 @@
 import { defineComponent, ref, toRefs, computed } from 'vue'
-import { tagsProps, TagsProps } from './tags-types'
+import { tagProps, TagProps } from './tag-types'
 import { useStyle } from './hooks'
-import './tags.scss'
+import './tag.scss'
 // 类型声明
 
 export default defineComponent({
-  name: 'DTags',
-  props: tagsProps,
+  name: 'DTag',
+  props: tagProps,
   emits: [],
-  setup(props: TagsProps, { slots }) {
+  setup(props: TagProps, { slots }) {
     //获取type对应样式
     const tagClass = useStyle(props)
 
     return () => (
-      <div class="devui-tags">
+      <div class="devui-tag">
         <span class={tagClass.value} style="display: block;">
           {slots.default?.()}
         </span>
@@ -21,11 +21,3 @@ export default defineComponent({
     )
   }
 })
-/* 
-<d-tag>
-<span  class="devui-tag-item" title="default color" style="display: block;">
-<div  class="content-wrapper"></div>
-<span  class="ng-star-inserted">default color</span>
-</span>
-</d-tag>
-*/
diff --git a/packages/devui-vue/devui/tags/__tests__/tags.spec.ts b/packages/devui-vue/devui/tags/__tests__/tags.spec.ts
deleted file mode 100644
index cb291e37..00000000
--- a/packages/devui-vue/devui/tags/__tests__/tags.spec.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { Tags } from '../index';
-
-describe('tags test', () => {
-  it('tags init render', async () => {
-    // todo
-  })
-})
diff --git a/packages/devui-vue/docs/components/tags/index.md b/packages/devui-vue/docs/components/tag/index.md
similarity index 81%
rename from packages/devui-vue/docs/components/tags/index.md
rename to packages/devui-vue/docs/components/tag/index.md
index 330549eb..c96b6238 100644
--- a/packages/devui-vue/docs/components/tags/index.md
+++ b/packages/devui-vue/docs/components/tag/index.md
@@ -1,4 +1,4 @@
-# Tags 标签
+# Tag 标签
 
 标签展示组件。
 
@@ -12,11 +12,11 @@
 
 ```vue
 <template>
-  <d-tags>标签一</d-tags>
-  <d-tags type="primary">标签二</d-tags>
-  <d-tags type="success">标签三</d-tags>
-  <d-tags type="warning">标签四</d-tags>
-  <d-tags type="danger">标签五</d-tags>
+  <d-tag>标签一</d-tag>
+  <d-tag type="primary">标签二</d-tag>
+  <d-tag type="success">标签三</d-tag>
+  <d-tag type="warning">标签四</d-tag>
+  <d-tag type="danger">标签五</d-tag>
 </template>
 
 <script>
@@ -25,7 +25,7 @@ import { defineComponent } from 'vue'
 export default defineComponent({
   setup() {
     return {
-      msg: 'Tags 标签 组件文档示例'
+      msg: 'Tag 标签 组件文档示例'
     }
   }
 })
-- 
Gitee