feat(tag): bordered prop

src/tag/demos/enUS/index.demo-entry.md

@@ -19,6 +19,7 @@ shape
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
+| bordered | `boolean` | `true` |  |
 | checkable | `boolean` | `false` |  |
 | checked | `boolean` | `false` |  |
 | closable | `boolean` | `false` |  |

src/tag/demos/zhCN/index.demo-entry.md

@@ -19,6 +19,7 @@ shape
 
 | 名称 | 类型 | 默认值 | 说明 |
 | --- | --- | --- | --- |
+| bordered | `boolean` | `true` |  |
 | checkable | `boolean` | `false` |  |
 | checked | `boolean` | `false` |  |
 | closable | `boolean` | `false` |  |

src/tag/src/Tag.tsx

@@ -1,5 +1,5 @@
 import { h, defineComponent, computed, PropType, CSSProperties } from 'vue'
-import { useTheme } from '../../_mixins'
+import { useConfig, useTheme } from '../../_mixins'
 import type { ThemeProps } from '../../_mixins'
 import { NBaseClose } from '../../_internal'
 import { warn, createKey } from '../../_utils'
@@ -13,6 +13,10 @@ export default defineComponent({
   props: {
     ...(useTheme.props as ThemeProps<TagTheme>),
     ...commonProps,
+    bordered: {
+      type: Boolean as PropType<boolean | undefined>,
+      default: undefined
+    },
     checked: {
       type: Boolean,
       default: false
@@ -48,6 +52,7 @@ export default defineComponent({
     }
   },
   setup (props) {
+    const { mergedBordered } = useConfig(props)
     const themeRef = useTheme('Tag', 'Tag', style, tagLight, props)
     function handleClick (e: MouseEvent): void {
       if (!props.disabled) {
@@ -73,6 +78,7 @@ export default defineComponent({
       }
     }
     return {
+      mergedBordered,
       handleClick,
       handleCloseClick,
       cssVars: computed(() => {
@@ -99,7 +105,7 @@ export default defineComponent({
             [createKey('height', size)]: height,
             [createKey('color', type)]: color,
             [createKey('textColor', type)]: textColor,
-            [createKey('borderColor', type)]: borderColor,
+            [createKey('border', type)]: border,
             [createKey('closeColor', type)]: closeColor,
             [createKey('closeColorHover', type)]: closeColorHover,
             [createKey('closeColorPressed', type)]: closeColorPressed
@@ -108,7 +114,7 @@ export default defineComponent({
         return {
           '--bezier': cubicBezierEaseInOut,
           '--border-radius': borderRadius,
-          '--border-color': borderColor,
+          '--border': border,
           '--close-color': closeColor,
           '--close-color-hover': closeColorHover,
           '--close-color-pressed': closeColorPressed,
@@ -157,6 +163,9 @@ export default defineComponent({
             onClick={this.handleCloseClick}
           />
         ) : null}
+        {!this.checkable && this.mergedBordered ? (
+          <div class="n-tag__border" />
+        ) : null}
       </div>
     )
   }

src/tag/src/styles/index.cssr.ts

@@ -3,7 +3,7 @@ import { c, cB, cE, cM, cNotM } from '../../../_utils/cssr'
 // vars:
 // --bezier
 // --border-radius
-// --border-color
+// --border
 // --close-color
 // --close-color-hover
 // --close-color-pressed
@@ -35,7 +35,6 @@ export default cB('tag', `
   flex-wrap: nowrap;
   padding: var(--padding);
   border-radius: var(--border-radius);
-  box-shadow: inset 0 0 0 1px var(--border-color);
   color: var(--text-color);
   background-color: var(--color);
   transition: 
@@ -48,6 +47,15 @@ export default cB('tag', `
     height: var(--height);
     font-size: var(--font-size);
 `, [
+  cE('border', `
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    border-radius: inherit;
+    border: var(--border);
+  `),
   cE('close', `
     font-size: var(--close-size);
     margin: var(--close-margin);

src/tag/styles/dark.ts

@@ -52,37 +52,37 @@ const tagDark: TagTheme = {
       colorCheckedHover: primaryColorHover,
       colorCheckedPressed: primaryColorPressed,
       // default
-      borderColor: borderColorOverlay,
+      border: `1px solid ${borderColorOverlay}`,
       textColor: textColor2Overlay,
       color: 'transparent',
       closeColor: closeColorOverlay,
       closeColorHover: closeColorHoverOverlay,
       closeColorPressed: closeColorPressedOverlay,
-      borderColorPrimary: changeColor(primaryColor, { alpha: 0.3 }),
+      borderPrimary: `1px solid ${changeColor(primaryColor, { alpha: 0.3 })}`,
       textColorPrimary: primaryColor,
       colorPrimary: 'transparent',
       closeColorPrimary: changeColor(primaryColor, { alpha: 0.7 }),
       closeColorHoverPrimary: changeColor(primaryColor, { alpha: 0.85 }),
       closeColorPressedPrimary: changeColor(primaryColor, { alpha: 0.57 }),
-      borderColorInfo: changeColor(infoColor, { alpha: 0.3 }),
+      borderInfo: `1px solid ${changeColor(infoColor, { alpha: 0.3 })}`,
       textColorInfo: infoColor,
       colorInfo: 'transparent',
       closeColorInfo: changeColor(infoColor, { alpha: 0.7 }),
       closeColorHoverInfo: changeColor(infoColor, { alpha: 0.85 }),
       closeColorPressedInfo: changeColor(infoColor, { alpha: 0.57 }),
-      borderColorSuccess: changeColor(successColor, { alpha: 0.3 }),
+      borderSuccess: `1px solid ${changeColor(successColor, { alpha: 0.3 })}`,
       textColorSuccess: successColor,
       colorSuccess: 'transparent',
       closeColorSuccess: changeColor(successColor, { alpha: 0.7 }),
       closeColorHoverSuccess: changeColor(successColor, { alpha: 0.85 }),
       closeColorPressedSuccess: changeColor(successColor, { alpha: 0.57 }),
-      borderColorWarning: changeColor(warningColor, { alpha: 0.3 }),
+      borderWarning: `1px solid ${changeColor(warningColor, { alpha: 0.3 })}`,
       textColorWarning: warningColor,
       colorWarning: 'transparent',
       closeColorWarning: changeColor(warningColor, { alpha: 0.7 }),
       closeColorHoverWarning: changeColor(warningColor, { alpha: 0.85 }),
       closeColorPressedWarning: changeColor(warningColor, { alpha: 0.57 }),
-      borderColorError: changeColor(errorColor, { alpha: 0.3 }),
+      borderError: `1px solid ${changeColor(errorColor, { alpha: 0.3 })}`,
       textColorError: errorColor,
       colorError: 'transparent',
       closeColorError: changeColor(errorColor, { alpha: 0.7 }),

src/tag/styles/light.ts

@@ -51,37 +51,37 @@ const self = (vars: ThemeCommonVars) => {
     colorCheckedHover: primaryColorHover,
     colorCheckedPressed: primaryColorPressed,
     // default
-    borderColor: borderColorOverlay,
+    border: `1px solid ${borderColorOverlay}`,
     textColor: textColor2Overlay,
     color: tagColor,
     closeColor: closeColorOverlay,
     closeColorHover: closeColorHoverOverlay,
     closeColorPressed: closeColorPressedOverlay,
-    borderColorPrimary: changeColor(primaryColor, { alpha: 0.3 }),
+    borderPrimary: `1px solid ${changeColor(primaryColor, { alpha: 0.3 })}`,
     textColorPrimary: primaryColor,
     colorPrimary: changeColor(primaryColor, { alpha: 0.1 }),
     closeColorPrimary: changeColor(primaryColor, { alpha: 0.75 }),
     closeColorHoverPrimary: changeColor(primaryColor, { alpha: 0.6 }),
     closeColorPressedPrimary: changeColor(primaryColor, { alpha: 0.9 }),
-    borderColorInfo: changeColor(infoColor, { alpha: 0.3 }),
+    borderInfo: `1px solid ${changeColor(infoColor, { alpha: 0.3 })}`,
     textColorInfo: infoColor,
     colorInfo: changeColor(infoColor, { alpha: 0.1 }),
     closeColorInfo: changeColor(infoColor, { alpha: 0.75 }),
     closeColorHoverInfo: changeColor(infoColor, { alpha: 0.6 }),
     closeColorPressedInfo: changeColor(infoColor, { alpha: 0.9 }),
-    borderColorSuccess: changeColor(successColor, { alpha: 0.3 }),
+    borderSuccess: `1px solid ${changeColor(successColor, { alpha: 0.3 })}`,
     textColorSuccess: successColor,
     colorSuccess: changeColor(successColor, { alpha: 0.1 }),
     closeColorSuccess: changeColor(successColor, { alpha: 0.75 }),
     closeColorHoverSuccess: changeColor(successColor, { alpha: 0.6 }),
     closeColorPressedSuccess: changeColor(successColor, { alpha: 0.9 }),
-    borderColorWarning: changeColor(warningColor, { alpha: 0.35 }),
+    borderWarning: `1px solid ${changeColor(warningColor, { alpha: 0.35 })}`,
     textColorWarning: warningColor,
     colorWarning: changeColor(warningColor, { alpha: 0.12 }),
     closeColorWarning: changeColor(warningColor, { alpha: 0.75 }),
     closeColorHoverWarning: changeColor(warningColor, { alpha: 0.6 }),
     closeColorPressedWarning: changeColor(warningColor, { alpha: 0.9 }),
-    borderColorError: changeColor(errorColor, { alpha: 0.23 }),
+    borderError: `1px solid ${changeColor(errorColor, { alpha: 0.23 })}`,
     textColorError: errorColor,
     colorError: changeColor(errorColor, { alpha: 0.08 }),
     closeColorError: changeColor(errorColor, { alpha: 0.65 }),

themes/tusimple/src/theme-overrides.ts

@@ -372,19 +372,19 @@ export const themeOverrides: GlobalThemeOverrides = {
   },
   Tag: {
     borderRadius: '16px',
-    borderColor: 'transparent',
+    border: '1px solid transparent',
     color: 'rgba(153,153,153,0.10)',
     closeColor: commonLight.closeColorOverlay,
     closeColorHover: commonLight.closeColorOverlay,
     closeColorPressed: commonLight.closeColorOverlay,
-    borderColorPrimary: 'transparent',
+    borderPrimary: '1px solid transparent',
     closeColorPrimary: commonLight.closeColorOverlay,
     closeColorHoverPrimary: commonLight.closeColorOverlay,
     closeColorPressedPrimary: commonLight.closeColorOverlay,
-    borderColorInfo: 'transparent',
-    borderColorSuccess: 'transparent',
-    borderColorWarning: 'transparent',
-    borderColorError: 'transparent',
+    borderInfo: '1px solid transparent',
+    borderSuccess: '1px solid transparent',
+    borderWarning: '1px solid transparent',
+    borderError: '1px solid transparent',
     padding: '0 12px',
     closeMargin: '0 0 0 8px',
     heightMedium: '24px',