From f428f069277f7393db62fd1e36a2779cb04322f6 Mon Sep 17 00:00:00 2001
From: Atlas-lili <3163299800@qq.com>
Date: Thu, 10 Mar 2022 16:09:29 +0800
Subject: [PATCH] feat(Tag): update Tag style, add simple ui (#98)

---
 demo/cases/Tag.vue                | 11 +++++-
 src/components/Tag.js             |  3 ++
 src/components/tag.less           | 65 ++++++++++++++++++++++++++-----
 src/variables/components/tag.less | 13 ++++++-
 4 files changed, 79 insertions(+), 13 deletions(-)

diff --git a/demo/cases/Tag.vue b/demo/cases/Tag.vue
index 7b03f5f..211de1d 100644
--- a/demo/cases/Tag.vue
+++ b/demo/cases/Tag.vue
@@ -26,18 +26,24 @@
             </veui-form>
         </section>
         <h2>风格</h2>
-        <div class="options-desc">可选的风格 <span class="bg-gray-show">ui</span> 属性值： <span class="bg-gray-show">borderless</span></div>
+        <div class="options-desc">可选的风格 <span class="bg-gray-show">ui</span> 属性值： <span class="bg-gray-show">borderless / simple</span></div>
         <section>
             <veui-form>
                 <veui-field label="有边框[不传ui]" ui="long">
                     <veui-tag>
                         标签
                     </veui-tag>
+                    <veui-tag ui="simple">
+                        标签
+                    </veui-tag>
                 </veui-field>
                 <veui-field label="无边框[ui=borderless]" ui="long">
                     <veui-tag ui="borderless">
                         标签
                     </veui-tag>
+                    <veui-tag ui="borderless simple">
+                        标签
+                    </veui-tag>
                 </veui-field>
             </veui-form>
         </section>
@@ -84,8 +90,9 @@
                 </veui-field>
                 <veui-field label="选择型标签" ui="long">
                     <veui-tag
-                        v-for="item in sizes"
+                        v-for="(item, index) in sizes"
                         :key="`${item.value}_04`"
+                        :ui="`${item.value} ${index % 2 ? 'simple' : ''}`"
                         selectable
                     >
                         标签
diff --git a/src/components/Tag.js b/src/components/Tag.js
index ef452e2..aed8bda 100644
--- a/src/components/Tag.js
+++ b/src/components/Tag.js
@@ -7,6 +7,9 @@ ui.defaults(
             remove: 'times'
         },
         ui: {
+            simple: {
+                boolean: true
+            },
             borderless: {
                 boolean: true
             },
diff --git a/src/components/tag.less b/src/components/tag.less
index ede7fd4..9134083 100644
--- a/src/components/tag.less
+++ b/src/components/tag.less
@@ -20,7 +20,7 @@
     @font-size: ~"veui-tag-font-size-@{size}";
 
     height: @@height;
-    border-radius: @veui-border-radius-l;
+    border-radius: @veui-border-radius-s;
     font-size: @@font-size;
     &[ui~="ellipse"] {
         border-radius: @@height;
@@ -46,20 +46,37 @@
     .make-metrics(l);
   }
 
-  &[ui~="borderless"]:not(.focus-visible) {
+  &[ui~="borderless"]:not([data-focus-visible-added]) {
     border-color: transparent;
   }
 
-  &-remove {
+  &[ui~="simple"] {
+    background-color: @veui-tag-background-color-simple;
+  }
+
+  &-remove.@{veui-prefix}-button {
     margin-left: @veui-tag-content-spacing;
+    padding: 0 @veui-tag-content-spacing * .5;
     font-size: inherit;
 
+    &:hover {
+      color: @veui-tag-font-color-remove-hover;
+    }
+
+    &:active {
+      color: @veui-tag-font-color-remove-active;
+    }
+
+    &[data-focus-visible-added] {
+      color: @veui-tag-font-color-remove-focus;
+    }
+
     .@{veui-prefix}-icon {
       .veui-icon-size(@veui-tag-icon-size-aux);
     }
   }
 
-  &.focus-visible {
+  &[data-focus-visible-added] {
     .veui-focus-ring(@veui-tag-border-color-focus, @veui-tag-shadow-focus);
   }
 
@@ -86,7 +103,7 @@
     border-color: @veui-tag-border-color-selected;
     background-color: @veui-tag-background-color-selected;
 
-    &.focus-visible {
+    &[data-focus-visible-added] {
       .veui-focus-ring(
         @veui-tag-border-color-selected-focus,
         @veui-tag-shadow-selected-focus
@@ -104,14 +121,42 @@
         background-color: @veui-tag-background-color-disabled;
     }
     &.@{veui-prefix}-tag-selectable {
+      &[ui~="simple"] {
+        &:hover:not(.@{veui-prefix}-disabled) {
+          color: @veui-tag-font-color-simple-hover;
+          background-color: @veui-tag-background-color-simple;
+          border-color: @veui-tag-border-color-simple-hover;
+        }
+        &:active:not(.@{veui-prefix}-disabled) {
+          background: #DBE4FF;
+        }
+        &[data-focus-visible-added]:not(.@{veui-prefix}-tag-selected) {
+          color: @veui-tag-font-color-simple-hover;
+        }
+        &.@{veui-prefix}-tag-selected:not([data-focus-visible-added]) {
+          color: @veui-tag-font-color-simple-hover;
+          background-color: @veui-tag-background-color-simple-selected;
+          border-color: @veui-tag-border-color-simple-hover;
+        }
+        &[ui~="borderless"]:not([data-focus-visible-added]) {
+          border-color: transparent;
+        }
+      }
       &:hover:not(.@{veui-prefix}-disabled) {
         color: @veui-tag-font-color-hover;
         background-color: @veui-tag-background-color-hover;
       }
+      &:active:not(.@{veui-prefix}-disabled) {
+        background-color: @veui-color-gray-5;
+      }
       &.@{veui-prefix}-tag-selected {
         &:hover:not(.@{veui-prefix}-disabled) {
-            color: @veui-tag-font-color-selected;
-            background-color: @veui-tag-background-color-selected;
+          color: @veui-tag-font-color-selected;
+          background-color: @veui-tag-background-color-selected-hover;
+        }
+        &:active:not(.@{veui-prefix}-disabled) {
+          color: @veui-tag-font-color-selected;
+          background-color: @veui-tag-background-color-selected-active;
         }
       }
     }
@@ -143,7 +188,7 @@
         border-color: @veui-tag-border-color-selected;
         background-color: @@selected-bg-color-name;
 
-        &.focus-visible {
+        &[data-focus-visible-added] {
           .veui-focus-ring(
             @veui-tag-border-color-selected-focus,
             @veui-tag-shadow-selected-focus
@@ -160,8 +205,8 @@
         color: @veui-tag-font-color-reversed;
       }
 
-      &.focus-visible,
-      &.@{veui-prefix}-tag.focus-visible {
+      &[data-focus-visible-added],
+      &.@{veui-prefix}-tag[data-focus-visible-added] {
         .veui-focus-ring(@veui-tag-border-color-focus, @veui-tag-shadow-focus);
       }
     }
diff --git a/src/variables/components/tag.less b/src/variables/components/tag.less
index e1a4645..04939f6 100644
--- a/src/variables/components/tag.less
+++ b/src/variables/components/tag.less
@@ -7,7 +7,7 @@
 @veui-tag-height-l: @veui-height-unit * 8;
 
 @veui-tag-padding: @veui-padding-unit * 2;
-@veui-tag-content-spacing: @veui-padding-unit * 2;
+@veui-tag-content-spacing: @veui-padding-unit;
 @veui-tag-list-spacing: @veui-padding-unit * 1;
 
 @veui-tag-font-size-xs: @veui-font-size-s;
@@ -22,17 +22,24 @@
 /* Colors */
 @veui-tag-font-color: @veui-font-color-normal;
 @veui-tag-font-color-hover: @veui-font-color-strong;
+@veui-tag-font-color-simple-hover: @veui-font-color-highlighted;
 @veui-tag-font-color-disabled: @veui-font-color-disabled;
 @veui-tag-background-color: @veui-color-gray-3;
+@veui-tag-background-color-simple: @veui-background-color-normal;
+@veui-tag-background-color-simple-active: @veui-color-info-2;
 @veui-tag-background-color-hover: @veui-color-gray-4;
 @veui-tag-background-color-disabled: @veui-background-color-disabled;
 @veui-tag-border-color: @veui-color-gray-5;
+@veui-tag-border-color-simple-hover: @veui-border-color-focus;
 @veui-tag-border-color-focus: @veui-border-color-focus;
 @veui-tag-border-color-disabled: @veui-border-color-disabled;
 @veui-tag-shadow-focus: @veui-shadow-focus;
 
 @veui-tag-font-color-selected: @veui-color-gray-1;
 @veui-tag-background-color-selected: @veui-color-brand-6;
+@veui-tag-background-color-simple-selected: @veui-background-color-normal-focus;
+@veui-tag-background-color-selected-hover: @veui-color-info-5;
+@veui-tag-background-color-selected-active: @veui-color-info-7;
 @veui-tag-background-color-selected-disabled: @veui-color-brand-2;
 @veui-tag-border-color-selected: transparent;
 @veui-tag-border-color-selected-focus: @veui-border-color-focus;
@@ -66,6 +73,10 @@
 @veui-tag-border-color-error: @veui-color-error-4;
 @veui-tag-border-color-error-disabled: @veui-color-error-2;
 
+@veui-tag-font-color-remove-hover: @veui-font-color-aux;
+@veui-tag-font-color-remove-focus: @veui-font-color-aux;
+@veui-tag-font-color-remove-active: @veui-font-color-normal;
+
 // Reversed tags, same as selected contextual tags
 // Fixed font color, no border (transparent)
 @veui-tag-font-color-reversed: @veui-color-gray-1;