From 11e9087a5824c854587738afe05f3cb8fe9eff6d Mon Sep 17 00:00:00 2001
From: sight <1453017105@qq.com>
Date: Thu, 11 Aug 2022 17:47:04 +0800
Subject: [PATCH 1/3] =?UTF-8?q?=F0=9F=93=9D:=20[tag]:=20=E6=9B=B4=E6=96=B0?=
 =?UTF-8?q?=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/document/zh-CN/components/tag.md      | 131 ++++++++++++------
 1 file changed, 86 insertions(+), 45 deletions(-)

diff --git a/package/document-component/src/document/zh-CN/components/tag.md b/package/document-component/src/document/zh-CN/components/tag.md
index 3e14baaa..ccdcecb9 100644
--- a/package/document-component/src/document/zh-CN/components/tag.md
+++ b/package/document-component/src/document/zh-CN/components/tag.md
@@ -13,19 +13,27 @@
 ::: demo 标签的基本用法。
 
 <template>
+<div class="tag-demo">
   <lay-tag>tag</lay-tag>
-  &nbsp&nbsp
   <lay-tag bordered color="#FFF">tag</lay-tag>
-  &nbsp&nbsp
   <lay-tag closable>tag</lay-tag>
-  &nbsp&nbsp
   <lay-tag closable disabled>tag</lay-tag>
-    &nbsp&nbsp
   <lay-tag closable max-width="120px" title="超过设置长度省略文本">超过设置长度省略文本</lay-tag>
+</div>
 </template>
 
 <script>
 </script>
+<style>
+.tag-demo {
+  width: 500px;
+  display: flex;
+  margin-bottom: 15px;
+}
+.tag-demo .layui-tag{
+  margin-right: 15px;
+}
+</style>
 
 :::
 
@@ -35,55 +43,56 @@
 ::: demo 通过 size 属性控制标签尺寸。
 
 <template>
+<div class="tag-demo">
   <lay-tag>default</lay-tag>
-  &nbsp&nbsp
   <lay-tag size="lg">tag lg</lay-tag>
-  &nbsp&nbsp
   <lay-tag size="md">tag md</lay-tag>
-  &nbsp&nbsp
   <lay-tag size="sm">tag sm</lay-tag>
-  &nbsp&nbsp
   <lay-tag size="xs">tag xs</lay-tag>
-  <br><br>
+</div>
+  <div class="tag-demo">
   <lay-tag><template #icon><lay-icon type="layui-icon-addition" /></template>default</lay-tag>
-  &nbsp&nbsp
   <lay-tag size="lg"><template #icon><lay-icon type="layui-icon-addition" /></template>tag lg</lay-tag>
-  &nbsp&nbsp
   <lay-tag size="md"><template #icon><lay-icon type="layui-icon-addition" /></template>tag md</lay-tag>
-  &nbsp&nbsp
   <lay-tag size="sm"><template #icon><lay-icon type="layui-icon-addition" /></template>tag sm</lay-tag>
-  &nbsp&nbsp
   <lay-tag size="xs"><template #icon><lay-icon type="layui-icon-addition" /></template>tag xs</lay-tag>
-  <br><br>
+  </div>
+  <div class="tag-demo">
   <lay-tag closable>
     <template #icon><lay-icon type="layui-icon-addition" /></template>
     default
   </lay-tag>
-  &nbsp&nbsp
     <lay-tag size="lg" closable>
     <template #icon><lay-icon type="layui-icon-addition" /></template>
     tag lg
   </lay-tag>
-  &nbsp&nbsp
     <lay-tag size="md" closable>
     <template #icon><lay-icon type="layui-icon-addition" /></template>
     tag md
   </lay-tag>
-  &nbsp&nbsp
   <lay-tag size="sm" closable>
     <template #icon><lay-icon type="layui-icon-addition" /></template>
     tag sm
   </lay-tag>
-  &nbsp&nbsp
   <lay-tag size="xs" closable>
     <template #icon><lay-icon type="layui-icon-addition" /></template>
     tag xs
   </lay-tag>
-  &nbsp&nbsp
+  </div>
 </template>
 
 <script>
 </script>
+<style>
+.tag-demo {
+  width: 500px;
+  display: flex;
+  margin-bottom: 15px;
+}
+.tag-demo .layui-tag{
+  margin-right: 15px;
+}
+</style>
 
 :::
 
@@ -93,22 +102,32 @@
 ::: demo 通过 closable 属性控制标签是否可关闭
 
 <template>
+<div class="tag-demo">
   <lay-tag closable>Tag</lay-tag>
-  &nbsp&nbsp
   <lay-tag closable>
     <template #icon><lay-icon type="layui-icon-addition" /></template>
     Tag 2
   </lay-tag>
-    &nbsp&nbsp
   <lay-tag closable>
     <template #icon><lay-icon type="layui-icon-addition" /></template>
     自定义关闭图标
     <template #close-icon><lay-icon type="layui-icon-close-fill" /></template>
   </lay-tag>
+</div>
 </template>
 
 <script>
 </script>
+<style>
+.tag-demo {
+  width: 500px;
+  display: flex;
+  margin-bottom: 15px;
+}
+.tag-demo .layui-tag{
+  margin-right: 15px;
+}
+</style>
 
 :::
 
@@ -118,50 +137,50 @@
 ::: demo 标签颜色, 非内置颜色只支持默认样式, plain 默认有边框。
 
 <template>
-  <p>default:</p>
+  <p class="tag-demo-variant">default:</p>
+  <div class="tag-demo">
   <span v-for="color in TAG_COLORS">
   <lay-tag :color="color">Tag</lay-tag>
-  &nbsp&nbsp
   </span>
-  &nbsp&nbsp&nbsp&nbsp
+  </div>
+  <div class="tag-demo">
   <span v-for="color in TAG_COLORS">
   <lay-tag :color="color" bordered closable>Tag</lay-tag>
-  &nbsp&nbsp
   </span>
-  <br><br>
-  <p>light:</p>
+  </div>
+  <p class="tag-demo-variant">light:</p>
+  <div class="tag-demo">
   <span v-for="color in TAG_COLORS">
   <lay-tag :color="color" variant="light">Tag</lay-tag>
-  &nbsp&nbsp
   </span>
-  &nbsp&nbsp&nbsp&nbsp
+  </div>
+  <div class="tag-demo">
   <span v-for="color in TAG_COLORS">
   <lay-tag :color="color" variant="light" bordered closable>Tag</lay-tag>
-  &nbsp&nbsp
   </span>
-  <br><br>
-  <p>plain:</p>
+  </div>
+  <p class="tag-demo-variant">plain:</p>
+  <div class="tag-demo">
   <span v-for="color in TAG_COLORS">
   <lay-tag :color="color" variant="plain">Tag</lay-tag>
-  &nbsp&nbsp
   </span>
-  &nbsp&nbsp&nbsp&nbsp
+  </div>
+  <div class="tag-demo">
   <span v-for="color in TAG_COLORS">
   <lay-tag :color="color" variant="plain" bordered closable>Tag</lay-tag>
-  &nbsp&nbsp
   </span>
-  <br><br>
-  <p>custom:</p>
+  </div>
+  <p class="tag-demo-variant">custom:</p>
+  <div class="tag-demo">
   <span v-for="color in COLORS">
   <lay-tag :color="color" variant="plain">Tag</lay-tag>
-  &nbsp&nbsp
   </span>
-  &nbsp&nbsp&nbsp&nbsp
+  </div>
+  <div class="tag-demo">
   <span v-for="color in COLORS">
   <lay-tag :color="color" variant="plain" bordered closable>Tag</lay-tag>
-  &nbsp&nbsp
   </span>
-  <br><br>
+  </div>
 </template>
 
 <script>
@@ -194,6 +213,19 @@ const COLORS = [
   }
 }
 </script>
+<style>
+.tag-demo {
+  width: 500px;
+  display: flex;
+  margin-bottom: 15px;
+}
+.tag-demo .layui-tag{
+  margin-right: 15px;
+}
+.tag-demo-variant{
+  margin-bottom: 10px;
+}
+</style>
 
 :::
 
@@ -203,31 +235,40 @@ const COLORS = [
 ::: demo 标签的基本用法。
 
 <template>
+<div class="tag-demo">
   <lay-tag bordered size="lg" color="#FFF">
     <template #icon>
       <lay-icon type="layui-icon-vercode" />
     </template>
     tag
   </lay-tag>
-  &nbsp&nbsp
   <lay-tag bordered size="lg" color="#FFF">
     <template #icon>
       <lay-icon type="layui-icon-login-qq" />
     </template>
     tag
   </lay-tag>
-  &nbsp&nbsp
   <lay-tag bordered size="lg" color="#FFF">
     <template #icon>
       <lay-icon type="layui-icon-star-fill" />
     </template>
     tag
   </lay-tag>
-  &nbsp&nbsp
+  </div>
 </template>
 
 <script>
 </script>
+<style>
+.tag-demo {
+  width: 500px;
+  display: flex;
+  margin-bottom: 15px;
+}
+.tag-demo .layui-tag{
+  margin-right: 15px;
+}
+</style>
 
 :::
 
@@ -324,7 +365,7 @@ export default {
 | 属性        | 描述     | 类型    | 默认值    | 可选值                             |
 | ----------- | -------- | ------ | ------ | ------ |
 | size | 标签大小 | string | md | `lg` `md` `sm` `xs`|
-| color | 标签颜色 | string | `green`| `red` `orange` `green` `cyan` `blue` `black` `gray` `string` | 
+| color | 标签颜色 | string | `#EEE`| `red` `orange` `green` `cyan` `blue` `black` `gray` `string` | 
 | bordered | 是否显示边框 | boolean | false | `true` `false`|
 | closable | 是否可关闭 | boolean | false | `true` `false`|
 | variant  | 标签风格  | string | `default` | `default` `light` `plain`|

From 863a627ef2d117b96f9e37c403bf402ba036adb6 Mon Sep 17 00:00:00 2001
From: sight <1453017105@qq.com>
Date: Sat, 27 Aug 2022 15:22:47 +0800
Subject: [PATCH 2/3] =?UTF-8?q?=F0=9F=93=9D(component):=20[tag]=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

tag: 更新文档
space 垂直方向对齐方式修改为 start
---
 .../component/src/component/space/index.vue   |   7 +-
 .../component/src/component/tag/index.less    |   2 +-
 package/component/src/index.ts                |   3 +
 .../src/document/zh-CN/components/tag.md      | 148 ++++++++----------
 4 files changed, 72 insertions(+), 88 deletions(-)

diff --git a/package/component/src/component/space/index.vue b/package/component/src/component/space/index.vue
index 7dca0373..1604b2f9 100644
--- a/package/component/src/component/space/index.vue
+++ b/package/component/src/component/space/index.vue
@@ -35,13 +35,16 @@ export interface LaySpaceProps {
 }
 
 const props = withDefaults(defineProps<LaySpaceProps>(), {
-  align: "center",
   direction: "horizontal",
   size: "sm",
 });
 
 const slots = useSlots();
 
+const computAlign = computed(
+  () => props.align ?? (props.direction === 'horizontal' ? 'center' : '')
+);
+
 const extractChildren = () => {
   const result: VNode[] = [];
   const children = slots.default && (slots?.default() as VNodeArrayChildren);
@@ -73,7 +76,7 @@ const extractChildren = () => {
 const spaceClass = computed(() => [
   "layui-space",
   {
-    [`layui-space-align-${props.align}`]: props.align,
+    [`layui-space-align-${props.align}`]: computAlign.value,
     [`layui-space-${props.direction}`]: props.direction,
     [`layui-space-wrap`]: props.wrap,
     [`layui-space-fill`]: props.fill,
diff --git a/package/component/src/component/tag/index.less b/package/component/src/component/tag/index.less
index a55fccab..01e505ea 100644
--- a/package/component/src/component/tag/index.less
+++ b/package/component/src/component/tag/index.less
@@ -23,7 +23,7 @@
 
  .layui-tag {
    display: inline-flex;
-   align-items: center;
+   align-items: baseline;
    vertical-align: middle;
    box-sizing: border-box;
    height: @tag-size-md;
diff --git a/package/component/src/index.ts b/package/component/src/index.ts
index e482667b..484d079d 100644
--- a/package/component/src/index.ts
+++ b/package/component/src/index.ts
@@ -89,6 +89,7 @@ import LayPageHeader from "./component/pageHeader/index";
 import LayCascader from "./component/cascader/index";
 import LayAffix from "./component/affix/index";
 import LaySpace from "./component/space/index";
+import LayTag from "./component/tag/index";
 import LayConfigProvider from "./provider";
 import { InstallOptions } from "./types";
 
@@ -176,6 +177,7 @@ const components: Record<string, Plugin> = {
   LayCascader,
   LayAffix,
   LaySpace,
+  LayTag,
 };
 
 const install = (app: App, options?: InstallOptions): void => {
@@ -270,6 +272,7 @@ export {
   LayCascader,
   LayAffix,
   LaySpace,
+  LayTag,
   install,
 };
 
diff --git a/package/document-component/src/document/zh-CN/components/tag.md b/package/document-component/src/document/zh-CN/components/tag.md
index ccdcecb9..0f6f2a2f 100644
--- a/package/document-component/src/document/zh-CN/components/tag.md
+++ b/package/document-component/src/document/zh-CN/components/tag.md
@@ -13,27 +13,17 @@
 ::: demo 标签的基本用法。
 
 <template>
-<div class="tag-demo">
-  <lay-tag>tag</lay-tag>
-  <lay-tag bordered color="#FFF">tag</lay-tag>
-  <lay-tag closable>tag</lay-tag>
-  <lay-tag closable disabled>tag</lay-tag>
+<lay-space size="md">
+  <lay-tag>标签</lay-tag>
+  <lay-tag bordered color="#FFF">标签</lay-tag>
+  <lay-tag closable>标签</lay-tag>
+  <lay-tag closable disabled>标签</lay-tag>
   <lay-tag closable max-width="120px" title="超过设置长度省略文本">超过设置长度省略文本</lay-tag>
-</div>
+</lay-space>
 </template>
 
 <script>
 </script>
-<style>
-.tag-demo {
-  width: 500px;
-  display: flex;
-  margin-bottom: 15px;
-}
-.tag-demo .layui-tag{
-  margin-right: 15px;
-}
-</style>
 
 :::
 
@@ -43,42 +33,44 @@
 ::: demo 通过 size 属性控制标签尺寸。
 
 <template>
-<div class="tag-demo">
-  <lay-tag>default</lay-tag>
+<lay-space direction="vertical" size="md">
+<lay-space size="md">
+  lg: 
   <lay-tag size="lg">tag lg</lay-tag>
-  <lay-tag size="md">tag md</lay-tag>
-  <lay-tag size="sm">tag sm</lay-tag>
-  <lay-tag size="xs">tag xs</lay-tag>
-</div>
-  <div class="tag-demo">
-  <lay-tag><template #icon><lay-icon type="layui-icon-addition" /></template>default</lay-tag>
   <lay-tag size="lg"><template #icon><lay-icon type="layui-icon-addition" /></template>tag lg</lay-tag>
-  <lay-tag size="md"><template #icon><lay-icon type="layui-icon-addition" /></template>tag md</lay-tag>
-  <lay-tag size="sm"><template #icon><lay-icon type="layui-icon-addition" /></template>tag sm</lay-tag>
-  <lay-tag size="xs"><template #icon><lay-icon type="layui-icon-addition" /></template>tag xs</lay-tag>
-  </div>
-  <div class="tag-demo">
-  <lay-tag closable>
-    <template #icon><lay-icon type="layui-icon-addition" /></template>
-    default
-  </lay-tag>
-    <lay-tag size="lg" closable>
+  <lay-tag size="lg" closable>
     <template #icon><lay-icon type="layui-icon-addition" /></template>
     tag lg
   </lay-tag>
-    <lay-tag size="md" closable>
+</lay-space>
+<lay-space size="md">
+  md: 
+  <lay-tag size="md">tag md</lay-tag>
+  <lay-tag size="md"><template #icon><lay-icon type="layui-icon-addition" /></template>tag md</lay-tag>
+  <lay-tag size="md" closable>
     <template #icon><lay-icon type="layui-icon-addition" /></template>
     tag md
   </lay-tag>
+</lay-space>
+<lay-space size="md">
+  sm: 
+  <lay-tag size="sm">tag sm</lay-tag>
+  <lay-tag size="sm"><template #icon><lay-icon type="layui-icon-addition" /></template>tag sm</lay-tag>
   <lay-tag size="sm" closable>
     <template #icon><lay-icon type="layui-icon-addition" /></template>
     tag sm
   </lay-tag>
+</lay-space>
+<lay-space size="md">
+  xs: 
+  <lay-tag size="xs">tag xs</lay-tag>
+  <lay-tag size="xs"><template #icon><lay-icon type="layui-icon-addition" /></template>tag xs</lay-tag>
   <lay-tag size="xs" closable>
     <template #icon><lay-icon type="layui-icon-addition" /></template>
     tag xs
   </lay-tag>
-  </div>
+</lay-space>
+</lay-space>
 </template>
 
 <script>
@@ -102,7 +94,7 @@
 ::: demo 通过 closable 属性控制标签是否可关闭
 
 <template>
-<div class="tag-demo">
+<lay-space size="md">
   <lay-tag closable>Tag</lay-tag>
   <lay-tag closable>
     <template #icon><lay-icon type="layui-icon-addition" /></template>
@@ -113,7 +105,7 @@
     自定义关闭图标
     <template #close-icon><lay-icon type="layui-icon-close-fill" /></template>
   </lay-tag>
-</div>
+</lay-space>
 </template>
 
 <script>
@@ -137,50 +129,36 @@
 ::: demo 标签颜色, 非内置颜色只支持默认样式, plain 默认有边框。
 
 <template>
-  <p class="tag-demo-variant">default:</p>
-  <div class="tag-demo">
-  <span v-for="color in TAG_COLORS">
-  <lay-tag :color="color">Tag</lay-tag>
-  </span>
-  </div>
-  <div class="tag-demo">
-  <span v-for="color in TAG_COLORS">
-  <lay-tag :color="color" bordered closable>Tag</lay-tag>
-  </span>
-  </div>
-  <p class="tag-demo-variant">light:</p>
-  <div class="tag-demo">
-  <span v-for="color in TAG_COLORS">
-  <lay-tag :color="color" variant="light">Tag</lay-tag>
-  </span>
-  </div>
-  <div class="tag-demo">
-  <span v-for="color in TAG_COLORS">
-  <lay-tag :color="color" variant="light" bordered closable>Tag</lay-tag>
-  </span>
-  </div>
-  <p class="tag-demo-variant">plain:</p>
-  <div class="tag-demo">
-  <span v-for="color in TAG_COLORS">
-  <lay-tag :color="color" variant="plain">Tag</lay-tag>
-  </span>
-  </div>
-  <div class="tag-demo">
-  <span v-for="color in TAG_COLORS">
-  <lay-tag :color="color" variant="plain" bordered closable>Tag</lay-tag>
-  </span>
-  </div>
-  <p class="tag-demo-variant">custom:</p>
-  <div class="tag-demo">
-  <span v-for="color in COLORS">
-  <lay-tag :color="color" variant="plain">Tag</lay-tag>
-  </span>
-  </div>
-  <div class="tag-demo">
-  <span v-for="color in COLORS">
-  <lay-tag :color="color" variant="plain" bordered closable>Tag</lay-tag>
-  </span>
-  </div>
+<lay-space direction="vertical" size="md">
+  default:
+  <lay-space size="md">
+    <lay-tag v-for="color in TAG_COLORS" :color="color">标签</lay-tag>
+  </lay-space>
+  <lay-space size="md">
+    <lay-tag v-for="color in TAG_COLORS" :color="color" bordered closable>标签</lay-tag>
+  </lay-space>
+  light:
+  <lay-space size="md">
+    <lay-tag v-for="color in TAG_COLORS" :color="color" variant="light">标签</lay-tag>
+  </lay-space>
+  <lay-space size="md">
+    <lay-tag v-for="color in TAG_COLORS" :color="color" variant="light" bordered closable>标签</lay-tag>
+  </lay-space>
+  plain:
+  <lay-space size="md">
+    <lay-tag v-for="color in TAG_COLORS" :color="color" variant="plain">标签</lay-tag>
+  </lay-space>
+  <lay-space size="md">
+    <lay-tag v-for="color in TAG_COLORS" :color="color" variant="plain" bordered closable>标签</lay-tag>
+  </lay-space>
+  custom:
+  <lay-space size="md">
+    <lay-tag v-for="color in COLORS" :color="color" variant="plain">标签</lay-tag>
+  </lay-space>
+  <lay-space size="md">
+    <lay-tag v-for="color in COLORS" :color="color" variant="plain" bordered closable>标签</lay-tag>
+  </lay-space>
+</lay-space>
 </template>
 
 <script>
@@ -232,10 +210,10 @@ const COLORS = [
 ::: title 图标插槽
 :::
 
-::: demo 标签的基本用法。
+::: demo 通过插槽自定义图标。
 
 <template>
-<div class="tag-demo">
+<lay-space size="md">
   <lay-tag bordered size="lg" color="#FFF">
     <template #icon>
       <lay-icon type="layui-icon-vercode" />
@@ -254,7 +232,7 @@ const COLORS = [
     </template>
     tag
   </lay-tag>
-  </div>
+</lay-space>
 </template>
 
 <script>

From 74d10181af900295fb87f208708181145bf99514 Mon Sep 17 00:00:00 2001
From: sight <1453017105@qq.com>
Date: Sat, 27 Aug 2022 17:18:40 +0800
Subject: [PATCH 3/3] =?UTF-8?q?=F0=9F=92=84:=20fix=20lint?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package/component/src/component/space/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package/component/src/component/space/index.vue b/package/component/src/component/space/index.vue
index 1604b2f9..22c19472 100644
--- a/package/component/src/component/space/index.vue
+++ b/package/component/src/component/space/index.vue
@@ -42,7 +42,7 @@ const props = withDefaults(defineProps<LaySpaceProps>(), {
 const slots = useSlots();
 
 const computAlign = computed(
-  () => props.align ?? (props.direction === 'horizontal' ? 'center' : '')
+  () => props.align ?? (props.direction === "horizontal" ? "center" : "")
 );
 
 const extractChildren = () => {