From b0e9fe4eba32dd2b477963d1b4719b1e182361df Mon Sep 17 00:00:00 2001
From: Bang <15622356989@163.com>
Date: Wed, 15 Feb 2023 15:12:52 +0800
Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9Etag?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/docs/tag.md                          |  27 ++++
 .../opendesign/src/components/tag/OTag.vue    | 138 ++++++++++++++++++
 .../src/components/tag/__demo__/IndexTag.vue  |  23 +++
 .../src/components/tag/__demo__/TagBasic.vue  |  16 ++
 .../components/tag/__demo__/TagBordered.vue   |  13 ++
 .../components/tag/__demo__/TagCheckable.vue  |  26 ++++
 .../components/tag/__demo__/TagClosable.vue   |  17 +++
 .../src/components/tag/__demo__/TagShape.vue  |  11 ++
 .../src/components/tag/__demo__/TagSize.vue   |  12 ++
 .../src/components/tag/__demo__/TagStatus.vue |  19 +++
 .../src/components/tag/style/index.scss       | 108 ++++++++++++++
 .../src/components/tag/style/index.ts         |   2 +
 .../src/components/tag/style/var.scss         |  27 ++++
 packages/portal/src/router.ts                 |   6 +
 14 files changed, 445 insertions(+)
 create mode 100644 packages/docs/tag.md
 create mode 100644 packages/opendesign/src/components/tag/OTag.vue
 create mode 100644 packages/opendesign/src/components/tag/__demo__/IndexTag.vue
 create mode 100644 packages/opendesign/src/components/tag/__demo__/TagBasic.vue
 create mode 100644 packages/opendesign/src/components/tag/__demo__/TagBordered.vue
 create mode 100644 packages/opendesign/src/components/tag/__demo__/TagCheckable.vue
 create mode 100644 packages/opendesign/src/components/tag/__demo__/TagClosable.vue
 create mode 100644 packages/opendesign/src/components/tag/__demo__/TagShape.vue
 create mode 100644 packages/opendesign/src/components/tag/__demo__/TagSize.vue
 create mode 100644 packages/opendesign/src/components/tag/__demo__/TagStatus.vue
 create mode 100644 packages/opendesign/src/components/tag/style/index.scss
 create mode 100644 packages/opendesign/src/components/tag/style/index.ts
 create mode 100644 packages/opendesign/src/components/tag/style/var.scss

diff --git a/packages/docs/tag.md b/packages/docs/tag.md
new file mode 100644
index 00000000..3eddd8bf
--- /dev/null
+++ b/packages/docs/tag.md
@@ -0,0 +1,27 @@
+# Tag 标签
+
+## props
+
+| name             | type                                           | 默认值   | 说明                                                    |
+| :--------------- | :--------------------------------------------- | :------- | ------------------------------------------------------- |
+| status           | 'normal' \| 'success' \| 'warning' \| 'danger' | 'normal' | 标签状态                                                |
+| bordered         | boolean                                        | false    | 是否有边框                                              |
+| size             | 'large' \| 'normal' \| 'small'                 | 'normal' | 标签形状                                                |
+| shape            | 'normal' \| 'round'                            | 'normal' | 尺寸                                                    |
+| closable         | boolean                                        | false    | 是否可关闭                                              |
+| checkable        | boolean                                        | false    | 是否可选中                                              |
+| checked(v-model) | boolean                                        | false    | 是否被选中（仅 checkable 为 true 生效）                 |
+| defaultChecked   | boolean                                        | false    | 非受控状态时，默认是否选中（仅 checkable 为 true 生效） |
+
+## event
+
+| name  | 参数         | 说明         |
+| :---- | :----------- | :----------- |
+| close |              | 值改变时触发 |
+| check | val: boolean | 选中时触发   |
+
+## slot
+
+| name | 说明     |
+| :--- | :------- |
+| icon | 按钮图标 |
diff --git a/packages/opendesign/src/components/tag/OTag.vue b/packages/opendesign/src/components/tag/OTag.vue
new file mode 100644
index 00000000..aa76fd1f
--- /dev/null
+++ b/packages/opendesign/src/components/tag/OTag.vue
@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { defaultSize, defaultShape } from '../_shared/global';
+import type { SizeT, ShapeT } from '../_shared/global';
+import { IconClose } from '../_shared/icons';
+import { isUndefined } from '../_shared/is';
+
+type TagStatusT = 'normal' | 'success' | 'warning' | 'danger';
+
+interface TagPropT {
+  /**
+   * 标签状态
+   * 'normal' | 'success' | 'warning' | 'danger'
+   */
+  status?: TagStatusT;
+  /**
+   * 是否有边框
+   */
+  bordered?: boolean;
+  /**
+   * 标签尺寸
+   * 'normal' | 'large' | 'small'
+   */
+  size?: SizeT;
+  /**
+   * 标签形状
+   * 'normal' | 'round'
+   */
+  shape?: ShapeT;
+  /**
+   * 是否可关闭
+   */
+  closable?: boolean;
+  /**
+   * 是否可选中
+   */
+  checkable?: boolean;
+  /**
+   * 是否被选中(标签可选中时该属性生效)
+   */
+  checked?: boolean;
+  /**
+   * 非受控状态时，默认是否选中(标签可选中时该属性生效)
+   */
+  defaultChecked?: boolean;
+}
+
+const props = withDefaults(defineProps<TagPropT>(), {
+  status: 'normal',
+  bordered: false,
+  size: undefined,
+  shape: undefined,
+  closable: false,
+  checkable: false,
+  checked: undefined,
+  defaultChecked: false,
+});
+
+const emits = defineEmits<{
+  (e: 'update:checked', val: boolean): void;
+  (e: 'change', val: boolean): void;
+  (e: 'close'): void;
+}>();
+
+// 是否可见
+const isVisible = ref(true);
+
+// 监听checked属性改变
+const isCheckedChanged = ref(false);
+
+watch(
+  () => props.checked,
+  () => {
+    isCheckedChanged.value = true;
+  }
+);
+
+// 是否选中
+const _checked = ref(props.defaultChecked);
+const isChecked = computed(() => {
+  if (!props.checkable) {
+    return false;
+  }
+
+  if (!isUndefined(props.checked) || isCheckedChanged.value) {
+    return props.checked ?? false;
+  }
+
+  return _checked.value;
+});
+
+watch(
+  isChecked,
+  (val) => {
+    _checked.value = val;
+  },
+  { immediate: true }
+);
+
+const onClick = () => {
+  if (props.checkable) {
+    const checked = !isChecked.value;
+    _checked.value = checked;
+    emits('update:checked', checked);
+    emits('change', checked);
+  }
+};
+
+const onClose = (ev: Event) => {
+  ev.stopPropagation();
+  isVisible.value = false;
+  emits('close');
+};
+</script>
+
+<template>
+  <span
+    v-if="isVisible"
+    class="o-tag"
+    :class="[
+      `o-tag-status-${props.status}`,
+      `o-tag-size-${props.size || defaultSize}`,
+      `o-tag-shape-${props.shape || defaultShape}`,
+      { 'o-tag-bordered': props.bordered },
+      { 'o-tag-checkable': props.checkable },
+      { 'o-tag-checked': isChecked },
+    ]"
+    @click="onClick"
+  >
+    <span v-if="$slots.icon" class="o-tag-icon prefix">
+      <slot name="icon"></slot>
+    </span>
+    <slot></slot>
+    <span v-if="props.closable" class="o-tag-icon o-tag-icon-close suffix" @click="onClose">
+      <IconClose />
+    </span>
+  </span>
+</template>
diff --git a/packages/opendesign/src/components/tag/__demo__/IndexTag.vue b/packages/opendesign/src/components/tag/__demo__/IndexTag.vue
new file mode 100644
index 00000000..2862b691
--- /dev/null
+++ b/packages/opendesign/src/components/tag/__demo__/IndexTag.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import '../style';
+
+import TagBasic from './TagBasic.vue';
+import TagClosable from './TagClosable.vue';
+import TagShape from './TagShape.vue';
+import TagSize from './TagSize.vue';
+import TagStatus from './TagStatus.vue';
+import TagBordered from './TagBordered.vue';
+import TagCheckable from './TagCheckable.vue';
+</script>
+
+<template>
+  <div class="page-demo">
+    <TagBasic />
+    <TagClosable />
+    <TagShape />
+    <TagSize />
+    <TagStatus />
+    <TagBordered />
+    <TagCheckable />
+  </div>
+</template>
diff --git a/packages/opendesign/src/components/tag/__demo__/TagBasic.vue b/packages/opendesign/src/components/tag/__demo__/TagBasic.vue
new file mode 100644
index 00000000..edb8590a
--- /dev/null
+++ b/packages/opendesign/src/components/tag/__demo__/TagBasic.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { OTag } from '../index';
+import { IconAdd } from '../../icons';
+</script>
+
+<template>
+  <h4>基础用法</h4>
+  <section>
+    <OTag>Tag1</OTag>
+    <OTag>Tag2</OTag>
+    <OTag>
+      <template #icon><IconAdd /></template>
+      Icon Tag
+    </OTag>
+  </section>
+</template>
diff --git a/packages/opendesign/src/components/tag/__demo__/TagBordered.vue b/packages/opendesign/src/components/tag/__demo__/TagBordered.vue
new file mode 100644
index 00000000..9cfdfe48
--- /dev/null
+++ b/packages/opendesign/src/components/tag/__demo__/TagBordered.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { OTag } from '../index';
+</script>
+
+<template>
+  <h4>带边框标签</h4>
+  <section>
+    <OTag bordered>Tag1</OTag>
+    <OTag status="success" bordered>Tag2</OTag>
+    <OTag status="warning" bordered>Tag3</OTag>
+    <OTag status="danger" bordered>Tag4</OTag>
+  </section>
+</template>
diff --git a/packages/opendesign/src/components/tag/__demo__/TagCheckable.vue b/packages/opendesign/src/components/tag/__demo__/TagCheckable.vue
new file mode 100644
index 00000000..810737ca
--- /dev/null
+++ b/packages/opendesign/src/components/tag/__demo__/TagCheckable.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OTag } from '../index';
+
+const tagVal1 = ref(true);
+const tagVal2 = ref(true);
+const tagVal3 = ref(true);
+const tagVal4 = ref(true);
+const handleChange = (val: boolean) => {
+  console.log(val);
+};
+</script>
+
+<template>
+  <h4>可选中标签</h4>
+  <section>
+    <OTag v-model:checked="tagVal1" checkable @change="handleChange">Tag1</OTag>
+    <OTag v-model:checked="tagVal2" status="success" checkable @change="handleChange">Tag2</OTag>
+    <OTag v-model:checked="tagVal3" status="warning" checkable @change="handleChange">Tag3</OTag>
+    <OTag v-model:checked="tagVal4" status="danger" checkable @change="handleChange">Tag4</OTag>
+    <OTag :default-checked="true" checkable bordered @change="handleChange">Tag5</OTag>
+    <OTag :default-checked="true" status="success" checkable bordered @change="handleChange">Tag6</OTag>
+    <OTag :default-checked="true" status="warning" checkable bordered @change="handleChange">Tag7</OTag>
+    <OTag :default-checked="true" status="danger" checkable bordered @change="handleChange">Tag8</OTag>
+  </section>
+</template>
diff --git a/packages/opendesign/src/components/tag/__demo__/TagClosable.vue b/packages/opendesign/src/components/tag/__demo__/TagClosable.vue
new file mode 100644
index 00000000..a050bb09
--- /dev/null
+++ b/packages/opendesign/src/components/tag/__demo__/TagClosable.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { OTag } from '../index';
+const handleClose = () => {
+  console.log('close!!!');
+};
+</script>
+
+<template>
+  <h4>可关闭按钮</h4>
+  <section>
+    <OTag closable @close="handleClose">Tag1</OTag>
+    <OTag closable @close="handleClose">Tag2</OTag>
+    <OTag closable @close="handleClose">Tag3</OTag>
+    <OTag closable @close="handleClose">Tag4</OTag>
+    <OTag closable @close="handleClose">Tag5</OTag>
+  </section>
+</template>
diff --git a/packages/opendesign/src/components/tag/__demo__/TagShape.vue b/packages/opendesign/src/components/tag/__demo__/TagShape.vue
new file mode 100644
index 00000000..322d54e2
--- /dev/null
+++ b/packages/opendesign/src/components/tag/__demo__/TagShape.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { OTag } from '../index';
+</script>
+
+<template>
+  <h4>Shape</h4>
+  <section>
+    <OTag shape="normal">Normal Tag</OTag>
+    <OTag shape="round">Round Tag</OTag>
+  </section>
+</template>
diff --git a/packages/opendesign/src/components/tag/__demo__/TagSize.vue b/packages/opendesign/src/components/tag/__demo__/TagSize.vue
new file mode 100644
index 00000000..ea6b8552
--- /dev/null
+++ b/packages/opendesign/src/components/tag/__demo__/TagSize.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { OTag } from '../index';
+</script>
+
+<template>
+  <h4>Size</h4>
+  <section>
+    <OTag size="large">Large Tag</OTag>
+    <OTag>Normal Tag</OTag>
+    <OTag size="small">Small Tag</OTag>
+  </section>
+</template>
diff --git a/packages/opendesign/src/components/tag/__demo__/TagStatus.vue b/packages/opendesign/src/components/tag/__demo__/TagStatus.vue
new file mode 100644
index 00000000..4c6be243
--- /dev/null
+++ b/packages/opendesign/src/components/tag/__demo__/TagStatus.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { OTag } from '../index';
+</script>
+
+<template>
+  <h4>Status</h4>
+  <section>
+    <OTag>Normal Tag</OTag>
+    <OTag status="success">Success Tag</OTag>
+    <OTag status="warning">Warning Tag</OTag>
+    <OTag status="danger">Danger Tag</OTag>
+  </section>
+</template>
+
+<style>
+a {
+  color: #b2c0e4;
+}
+</style>
diff --git a/packages/opendesign/src/components/tag/style/index.scss b/packages/opendesign/src/components/tag/style/index.scss
new file mode 100644
index 00000000..18bb1c1a
--- /dev/null
+++ b/packages/opendesign/src/components/tag/style/index.scss
@@ -0,0 +1,108 @@
+@use './var.scss';
+
+.o-tag {
+  font-size: var(--tag-text-size);
+  line-height: var(--tag-text-height);
+  height: var(--tag-height);
+  border: 1px solid var(--tag-border);
+  border-radius: var(--tag-radius);
+  padding: var(--tag-padding);
+  transition: all var(--o-duration-s) var(--o-easing-standard);
+  background-color: var(--tag-bg);
+  color: var(--tag-color);
+  white-space: nowrap;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.o-tag-size-small {
+  --tag-padding: 0 7px;
+  --tag-height: var(--tag-height-s);
+  --tag-radius: var(--tag-radius-s);
+}
+
+.o-tag-size-normal {
+  --tag-padding: 4px 15px;
+  --tag-height: var(--tag-height-m);
+  --tag-radius: var(--tag-radius-m);
+}
+
+.o-tag-size-large {
+  --tag-padding: 4px 19px;
+  --tag-height: var(--tag-height-l);
+  --tag-radius: var(--tag-radius-l);
+}
+
+.o-tag-status-success {
+  --tag-color: var(--tag-color-success);
+  --tag-bg: var(--tag-bg-success);
+  --tag-border: var(--tag-border-success);
+}
+
+.o-tag-status-warning {
+  --tag-color: var(--tag-color-warning);
+  --tag-bg: var(--tag-bg-warning);
+  --tag-border: var(--tag-border-warning);
+}
+
+.o-tag-status-danger {
+  --tag-color: var(--tag-color-danger);
+  --tag-bg: var(--tag-bg-danger);
+  --tag-border: var(--tag-border-danger);
+}
+
+.o-tag-icon {
+  display: inline-flex;
+  align-items: center;
+  > svg {
+    vertical-align: top;
+  }
+
+  &.prefix {
+    margin-right: 6px;
+  }
+
+  &.suffix {
+    margin-left: 6px;
+  }
+}
+
+.o-tag-icon-close {
+  cursor: pointer;
+}
+
+.o-tag-shape-round {
+  --tag-radius: var(--tag-height-l);
+}
+
+.o-tag-bordered {
+  --tag-bg: transparent;
+  &.o-tag-status-success {
+    --tag-color: var(--tag-bg-success);
+  }
+  &.o-tag-status-warning {
+    --tag-color: var(--tag-bg-warning);
+  }
+  &.o-tag-status-danger {
+    --tag-color: var(--tag-bg-danger);
+  }
+}
+
+.o-tag-checkable {
+  cursor: pointer;
+  &:not(.o-tag-checked) {
+    --tag-bg: transparent;
+    --tag-border: transparent;
+    &.o-tag-status-success {
+      --tag-color: var(--tag-bg-success);
+    }
+    &.o-tag-status-warning {
+      --tag-color: var(--tag-bg-warning);
+    }
+    &.o-tag-status-danger {
+      --tag-color: var(--tag-bg-danger);
+    }
+  }
+}
diff --git a/packages/opendesign/src/components/tag/style/index.ts b/packages/opendesign/src/components/tag/style/index.ts
new file mode 100644
index 00000000..591b2fbd
--- /dev/null
+++ b/packages/opendesign/src/components/tag/style/index.ts
@@ -0,0 +1,2 @@
+import '../../style';
+import './index.scss';
diff --git a/packages/opendesign/src/components/tag/style/var.scss b/packages/opendesign/src/components/tag/style/var.scss
new file mode 100644
index 00000000..3b524dea
--- /dev/null
+++ b/packages/opendesign/src/components/tag/style/var.scss
@@ -0,0 +1,27 @@
+.o-tag {
+  --tag-color: var(--o-color-text2);
+  --tag-color-success: var(--o-color-text1-inverse);
+  --tag-color-warning: var(--o-color-text1-inverse);
+  --tag-color-danger: var(--o-color-text1-inverse);
+
+  --tag-bg: var(--o-color-info1);
+  --tag-bg-success: var(--o-color-success1);
+  --tag-bg-warning: var(--o-color-warning1);
+  --tag-bg-danger: var(--o-color-danger1);
+
+  --tag-border: var(--o-color-info1);
+  --tag-border-success: var(--o-color-success1);
+  --tag-border-warning: var(--o-color-warning1);
+  --tag-border-danger: var(--o-color-danger1);
+
+  --tag-text-size: var(--o-font_size-text);
+  --tag-text-height: var(--o-line_height-text);
+
+  --tag-height-s: var(--o-size-s);
+  --tag-height-m: var(--o-size-m);
+  --tag-height-l: var(--o-size-l);
+
+  --tag-radius-s: var(--o-radius-s);
+  --tag-radius-m: var(--o-radius-s);
+  --tag-radius-l: var(--o-radius-s);
+}
diff --git a/packages/portal/src/router.ts b/packages/portal/src/router.ts
index 91d99718..3cf315c7 100644
--- a/packages/portal/src/router.ts
+++ b/packages/portal/src/router.ts
@@ -117,6 +117,12 @@ export const routes = [
     label: '分割线',
     component: () => import('@demo/divider/__demo__/IndexDivider.vue'),
   },
+  {
+    path: '/tag',
+    name: 'Tag',
+    label: '标签',
+    component: () => import('@demo/tag/__demo__/IndexTag.vue'),
+  },
 ];
 
 export const router = createRouter({
-- 
Gitee


From da48b766a6683515456becc9b2f0f38356f5b28b Mon Sep 17 00:00:00 2001
From: Bang <15622356989@163.com>
Date: Wed, 15 Feb 2023 15:24:11 +0800
Subject: [PATCH 2/3] =?UTF-8?q?chore:=20=E4=BF=AE=E6=94=B9=E5=8F=98?=
 =?UTF-8?q?=E9=87=8F=E5=91=BD=E5=90=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/opendesign/src/components/tag/OTag.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/opendesign/src/components/tag/OTag.vue b/packages/opendesign/src/components/tag/OTag.vue
index aa76fd1f..dfb9108c 100644
--- a/packages/opendesign/src/components/tag/OTag.vue
+++ b/packages/opendesign/src/components/tag/OTag.vue
@@ -66,12 +66,12 @@ const emits = defineEmits<{
 const isVisible = ref(true);
 
 // 监听checked属性改变
-const isCheckedChanged = ref(false);
+const isCheckedPropChange = ref(false);
 
 watch(
   () => props.checked,
   () => {
-    isCheckedChanged.value = true;
+    isCheckedPropChange.value = true;
   }
 );
 
@@ -82,7 +82,7 @@ const isChecked = computed(() => {
     return false;
   }
 
-  if (!isUndefined(props.checked) || isCheckedChanged.value) {
+  if (!isUndefined(props.checked) || isCheckedPropChange.value) {
     return props.checked ?? false;
   }
 
-- 
Gitee


From 8383eb58c9d21ca9a83808ee1c2993aed9161a7f Mon Sep 17 00:00:00 2001
From: Bang <15622356989@163.com>
Date: Wed, 15 Feb 2023 16:27:19 +0800
Subject: [PATCH 3/3] =?UTF-8?q?chore:=20TagStatusT=E5=9C=A8types.ts?=
 =?UTF-8?q?=E4=B8=AD=E5=AE=9A=E4=B9=89=E5=B9=B6=E5=AF=BC=E5=87=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/opendesign/src/components/tag/OTag.vue | 3 +--
 packages/opendesign/src/components/tag/index.ts | 2 ++
 packages/opendesign/src/components/tag/types.ts | 1 +
 3 files changed, 4 insertions(+), 2 deletions(-)
 create mode 100644 packages/opendesign/src/components/tag/types.ts

diff --git a/packages/opendesign/src/components/tag/OTag.vue b/packages/opendesign/src/components/tag/OTag.vue
index dfb9108c..7b5fa558 100644
--- a/packages/opendesign/src/components/tag/OTag.vue
+++ b/packages/opendesign/src/components/tag/OTag.vue
@@ -2,11 +2,10 @@
 import { computed, ref, watch } from 'vue';
 import { defaultSize, defaultShape } from '../_shared/global';
 import type { SizeT, ShapeT } from '../_shared/global';
+import type { TagStatusT } from './types';
 import { IconClose } from '../_shared/icons';
 import { isUndefined } from '../_shared/is';
 
-type TagStatusT = 'normal' | 'success' | 'warning' | 'danger';
-
 interface TagPropT {
   /**
    * 标签状态
diff --git a/packages/opendesign/src/components/tag/index.ts b/packages/opendesign/src/components/tag/index.ts
index c8883279..64dae6f7 100644
--- a/packages/opendesign/src/components/tag/index.ts
+++ b/packages/opendesign/src/components/tag/index.ts
@@ -2,6 +2,8 @@ import type { App } from 'vue';
 
 import _OTag from './OTag.vue';
 
+export * from './types';
+
 const OTag = Object.assign(_OTag, {
   install(app: App) {
     app.component(_OTag.name, _OTag);
diff --git a/packages/opendesign/src/components/tag/types.ts b/packages/opendesign/src/components/tag/types.ts
new file mode 100644
index 00000000..0d963e64
--- /dev/null
+++ b/packages/opendesign/src/components/tag/types.ts
@@ -0,0 +1 @@
+export type TagStatusT = 'normal' | 'success' | 'warning' | 'danger';
-- 
Gitee