✨: dts 文件生成

*dts 生成
*tag自动计算颜色

.prettierignore

@@ -0,0 +1 @@
+*.d.ts

package.json

@@ -54,6 +54,7 @@
     "@vitejs/plugin-vue-jsx": "^1.3.10",
     "@vue/compiler-sfc": "^3.2.37",
     "@vue/server-renderer": "^3.2.37",
+    "vite-plugin-dts": "^1.5.0",
     "less": "^4.1.3",
     "rimraf": "^3.0.2",
     "rollup": "^2.75.5",

package/component/package.json

@@ -26,9 +26,9 @@
     "./es/": "./es/"
   },
   "scripts": {
-    "build": "npm run build:all && npm run build:es && npm run build:umd && npm run build:types",
+    "build": "npm run build:all && npm run build:es && npm run build:umd",
     "build:es": "vite build --emptyOutDir --config ./script/build.es.ts",
-    "build:all": "vite build --emptyOutDir --config ./script/build.all.ts",
+    "build:all": "rimraf types && vite build --emptyOutDir --config ./script/build.all.ts",
     "build:umd": "vite build --emptyOutDir --config ./script/build.umd.ts",
     "build:types": "rimraf types && tsc -d"
   },
@@ -41,7 +41,8 @@
     "@umijs/ssr-darkreader": "^4.9.45",
     "dayjs": "^1.11.0",
     "evtd": "^0.2.3",
-    "vue-i18n": "^9.1.10"
+    "vue-i18n": "^9.1.10",
+    "@ctrl/tinycolor": "^3.4.1"
   },
   "files": [
     "lib",

package/component/script/build.all.ts

@@ -1,7 +1,8 @@
 import { UserConfigExport } from "vite";
 import vue from "@vitejs/plugin-vue";
 import vueJsx from "@vitejs/plugin-vue-jsx";
-import { resolve } from "path";
+import dts from "vite-plugin-dts";
+import path, { resolve } from "path";
 
 export default (): UserConfigExport => {
   return {
@@ -14,7 +15,26 @@ export default (): UserConfigExport => {
         },
       ],
     },
-    plugins: [vue(), vueJsx()],
+    plugins: [
+      vue(),
+      vueJsx(),
+      dts({
+        outputDir: ["types"],
+        insertTypesEntry: true,
+        cleanVueFileName: true,
+        copyDtsFiles: true,
+        include: ["src"],
+        beforeWriteFile: (filePath: string, content: string) => {
+          return {
+            filePath: filePath.replace(
+              `${path.sep}package${path.sep}component${path.sep}src`,
+              ""
+            ),
+            content: content,
+          };
+        },
+      }),
+    ],
     build: {
       cssCodeSplit: false,
       outDir: "lib",

package/component/src/component/space/index.vue

@@ -13,7 +13,7 @@ import {
   VNodeNormalizedChildren,
 } from "vue";
 
-export type SpaceSize = "lg" | "md" | "sm" | "xs" | number | string;
+type SpaceSize = "lg" | "md" | "sm" | "xs" | number | string;
 
 export default defineComponent({
   name: "LaySpace",

package/component/src/component/tag/index.less

@@ -1,14 +1,12 @@
  @tagColors: {
-   default: #EEE;
+   primary: #009688;
-   red: #ff5722;
+   normal: #1e9fff;
-   orange: #ffb800;
+   warm: #ffb800;
-   green: #009688;
+   danger: #ff5722;
-   cyan: #2f4056;
-   blue: #1e9fff;
-   black: #000000;
-   gray: #808080;
  }
 
+ @tagSizes: lg, md, sm, xs;
+
  @tag-size-default: 28px;
  @tag-size-default-font-size: 14px;
  @tag-size-lg: @tag-size-default + 4px;
@@ -22,6 +20,10 @@
  @tag-border-width: 1px;
 
  .layui-tag {
+   --layui-tag-bg-color: #FFF;
+   --layui-tag-border-color: var(--global-neutral-color-5);
+   --layui-tag-hover-color: #FFF;
+   --layui-tag-text-color: currentColor;
    display: inline-flex;
    align-items: baseline;
    vertical-align: middle;
@@ -31,7 +33,8 @@
    padding: 0 8px;
    font-size: @tag-size-md-font-size;
    font-weight: 500;
-   color: currentColor;
+   color: var(--layui-tag-text-color);
+   background-color: var(--layui-tag-bg-color);
    border-width: @tag-border-width;
    border-style: solid;
    border-color: transparent;
@@ -42,7 +45,7 @@
    }
 
    &-bordered {
-     border-color: var(--global-neutral-color-5);
+     border-color: var(--layui-tag-border-color);
    }
 
    &-disabled {
@@ -78,45 +81,6 @@
      text-overflow: ellipsis
    }
 
-   &-size-lg {
-     height: @tag-size-lg;
-     font-size: @tag-size-lg-font-size;
-     line-height: @tag-size-lg;
-
-     .layui-icon {
-       font-size: @tag-size-lg-font-size;
-     }
-   }
-
-   &-size-md {
-     height: @tag-size-md;
-     font-size: @tag-size-md-font-size;
-     line-height: @tag-size-md;
-
-     .layui-icon {
-       font-size: @tag-size-md-font-size;
-     }
-   }
-
-   &-size-sm {
-     height: @tag-size-sm;
-     font-size: @tag-size-sm-font-size;
-     line-height: @tag-size-sm;
-
-     .layui-icon {
-       font-size: @tag-size-sm-font-size;
-     }
-   }
-
-   &-size-xs {
-     height: @tag-size-xs;
-     font-size: @tag-size-xs-font-size;
-     line-height: @tag-size-xs;
-
-     .layui-icon {
-       font-size: @tag-size-xs-font-size;
-     }
-   }
 
    & &-close-icon {
      margin-left: 4px;
@@ -131,46 +95,52 @@
      }
    }
 
+   each(@tagSizes, {
+     &-size-@{value} {
+       height: ~'@{tag-size-@{value}}';
+       font-size: ~'@{tag-size-@{value}-font-size}';
+       line-height: ~'@{tag-size-@{value}}';
+     }
+
+     .layui-icon {
+       font-size: ~'@{tag-size-@{value}-font-size}';
+     }
+
+   }) 
+   
    each(@tagColors, {
-     &-default {
+   &-@{key} {
-       &-color-@{key} {
+     --layui-tag-bg-color: @value;
-         color: #FFF;
+     --layui-tag-border-color: transparent;
-         background-color: @value;
+     --layui-tag-hover-color: @value;
-         border-color: transparent;
+     --layui-tag-text-color: contrast(@value, #FFF,#000000,60%);
-       }
 
-       &-bordered-@{key} {
+     &-bordered {
-         border-color: saturate(@value, 10%);
+       --layui-tag-border-color: @value;
-       }
-
-       &-checked-color-@{key} {
-         background-color: darken(@value, 10%);
-       }
-
-     }
-
-     &-light {
-       &-color-@{key} {
-         color: @value;
-         background-color: fadeout(saturate(lighten(@value, 13%),5%),85%);
-         border-color: transparent;
-       }
-
-       &-bordered-@{key} {
-         border-color: fadeout(saturate(lighten(@value, 13%), 5%), 50%);
      }
    }
 
-     &-plain {
+   &-@{key}.layui-tag-variant-light {
-       &-color-@{key} {
+     --layui-tag-bg-color: tint(@value, 90%);
-         color: @value;
+     --layui-tag-border-color: transparent;
-         background-color: transparent;
+     --layui-tag-hover-color: tint(@value, 90%);
-         border-color: @value;
+     --layui-tag-text-color: @value;
+
+     &-bordered {
+       --layui-tag-border-color: tint(@value, 50%);
+     }
    }
 
-       &-bordered-@{key} {
+   &-@{key}.layui-tag-variant-plain {
-         border-color: @value;
+     --layui-tag-bg-color: transparent;
+     --layui-tag-hover-color: transparent;
+     --layui-tag-text-color: @value;
+     --layui-tag-border-color: transparent;
+
+     &-bordered {
+       --layui-tag-border-color: @value;
      }
    }
+
  })
  }

package/component/src/component/tag/index.vue

@@ -7,34 +7,30 @@ export default {
 import "./index.less";
 import { LayIcon } from "@layui/icons-vue";
 import { computed, ref } from "vue";
-import { TAG_COLORS, TagColor } from "./interface";
+import { TinyColor } from "@ctrl/tinycolor";
+import { TAG_COLORS, tagType } from "./interface";
 
 export interface LayTagProps {
-  color?: TagColor | string;
+  type?: tagType;
+  color?: string;
   closable?: boolean;
   size?: string;
   bordered?: boolean;
   disabled?: boolean;
   shape?: "square" | "round";
   maxWidth?: string;
-  variant?: "default" | "light" | "plain";
+  variant?: "dark" | "light" | "plain";
 }
 
 const props = withDefaults(defineProps<LayTagProps>(), {
-  color: "#EEE",
   size: "md",
   shape: "square",
-  variant: "default",
+  variant: "dark",
+  bordered: true,
 });
 
 const emit = defineEmits(["close", "check", "update:checked"]);
 
-const isBuiltInColor = computed(
-  () => props.color && TAG_COLORS.includes(props.color as any)
-);
-const isCustomColor = computed(
-  () => props.color && !TAG_COLORS.includes(props.color as any)
-);
 const visible = ref(true);
 
 const handleClose = (e: MouseEvent) => {
@@ -48,9 +44,10 @@ const classTag = computed(() => [
   `layui-tag-size-${props.size}`,
   `layui-tag-shap-${props.shape}`,
   {
-    [`layui-tag-${props.variant}-color-${props.color}`]: isBuiltInColor.value,
+    [`layui-tag-variant-${props.variant}`]: props.variant,
-    [`layui-tag-${props.variant}-bordered-${props.color}`]:
+    [`layui-tag-variant-${props.variant}-bordered`]: props.bordered,
-      isBuiltInColor.value && props.bordered,
+    [`layui-tag-${props.type}-bordered`]: props.bordered,
+    [`layui-tag-${props.type}`]: props.type,
     "layui-tag-bordered": props.bordered,
     "layui-tag-disabled": props.disabled,
     "layui-tag-ellipsis": props.maxWidth,
@@ -58,11 +55,51 @@ const classTag = computed(() => [
 ]);
 
 const styleTag = computed(() => [
-  isCustomColor.value ? { backgroundColor: props.color } : {},
   {
     "max-width": props.maxWidth ?? "unset",
+    ...useTagCustomStyle(props).value,
   },
 ]);
+
+function useTagCustomStyle(props: LayTagProps) {
+  return computed(() => {
+    let styles: Record<string, string> = {};
+
+    const tagColor = props.color;
+
+    if (tagColor) {
+      const color = new TinyColor(tagColor);
+      if (props.variant === "dark") {
+        const isDark = color.getBrightness() < 190;
+        const textColor = isDark ? "#FFF" : "#000000";
+        styles = {
+          "--layui-tag-bg-color": tagColor,
+          "--layui-tag-border-color": props.bordered ? tagColor : "transparent",
+          "--layui-tag-hover-color": tagColor,
+          "--layui-tag-text-color": textColor,
+        };
+      } else if (props.variant === "light") {
+        styles = {
+          "--layui-tag-bg-color": color.tint(90).toString(),
+          "--layui-tag-border-color": props.bordered
+            ? color.tint(50).toString()
+            : "transparent",
+          "--layui-tag-hover-color": color.tint(90).toString(),
+          "--layui-tag-text-color": tagColor,
+        };
+      } else if (props.variant === "plain") {
+        styles = {
+          "--layui-tag-bg-color": "transparent",
+          "--layui-tag-border-color": props.bordered ? tagColor : "transparent",
+          "--layui-tag-hover-color": "transparent",
+          "--layui-tag-text-color": tagColor,
+        };
+      }
+    }
+
+    return styles;
+  });
+}
 </script>
 <template>
   <span v-if="visible" :class="classTag" :style="styleTag">

package/component/src/component/tag/interface.ts

@@ -1,11 +1,3 @@
-export const TAG_COLORS = [
+export const TAG_COLORS = ["primary", "normal", "warm", "danger"] as const;
-  "red",
-  "orange",
-  "green",
-  "cyan",
-  "blue",
-  "black",
-  "gray",
-] as const;
 
-export type TagColor = typeof TAG_COLORS[number];
+export type tagType = typeof TAG_COLORS[number];

package/document-component/src/document/zh-CN/components/tag.md

@@ -15,7 +15,6 @@
 <template>
 <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>
@@ -126,37 +125,37 @@
 ::: title 标签颜色
 :::
 
-::: demo 标签颜色, 非内置颜色只支持默认样式, plain 默认有边框。
+::: demo 标签颜色
 
 <template>
 <lay-space direction="vertical" size="md">
-  default:
+  dark:
   <lay-space size="md">
-    <lay-tag v-for="color in TAG_COLORS" :color="color">标签</lay-tag>
+    <lay-tag v-for="type in TAG_TYPES" :type="type">标签</lay-tag>
-  </lay-space>
+    <lay-tag v-for="type in TAG_TYPES" :type="type" :bordered="false" closable>标签</lay-tag>
-  <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-tag v-for="type in TAG_TYPES" :type="type" variant="light">标签</lay-tag>
-  </lay-space>
+    <lay-tag v-for="type in TAG_TYPES" :type="type" variant="light" :bordered="false" closable>标签</lay-tag>
-  <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-tag v-for="type in TAG_TYPES" :type="type" variant="plain">标签</lay-tag>
-  </lay-space>
+    <lay-tag v-for="type in TAG_TYPES" :type="type" variant="plain" :bordered="false" closable>标签</lay-tag>
-  <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-tag v-for="color in COLORS" :color="color" variant="dark">标签</lay-tag>
+    <lay-tag v-for="color in COLORS" :color="color" variant="dark" :bordered="false" closable>标签</lay-tag>
   </lay-space>
     <lay-space size="md">
-    <lay-tag v-for="color in COLORS" :color="color" variant="plain" bordered closable>标签</lay-tag>
+    <lay-tag v-for="color in COLORS" :color="color" variant="light">标签</lay-tag>
+    <lay-tag v-for="color in COLORS" :color="color" variant="light" :bordered="false" closable>标签</lay-tag>
+  </lay-space>
+  <lay-space size="md">
+    <lay-tag v-for="color in COLORS" :color="color" variant="plain">标签</lay-tag>
+    <lay-tag v-for="color in COLORS" :color="color" variant="plain" :bordered="false" closable>标签</lay-tag>
   </lay-space>
 </lay-space>
 </template>
@@ -167,21 +166,21 @@ import { ref } from 'vue'
 export default {
   setup() {
 
-  const TAG_COLORS = [
+  const TAG_TYPES = [
-  "red",
+  "primary",
-  "orange",
+  "normal",
-  "green",
+  "warm",
-  "cyan",
+  "danger",
-  "blue",
-  "black",
-  "gray",
 ];
 
 const COLORS = [
-  "#EEE",
+  "#86909c",
-  "#67C23A",
+  "#9FDB1D",
-  "#0fc6c2",
+  "#14C9C9",
-  "#165dff"
+  "#165DFF",
+  "#722ED1",
+  "#D91AD9",
+  "#F5319D",
 ];
 
     return {
@@ -214,19 +213,19 @@ const COLORS = [
 
 <template>
 <lay-space size="md">
-  <lay-tag bordered size="lg" color="#FFF">
+  <lay-tag size="lg">
     <template #icon>
       <lay-icon type="layui-icon-vercode" />
     </template>
     tag
   </lay-tag>
-  <lay-tag bordered size="lg" color="#FFF">
+  <lay-tag size="lg">
     <template #icon>
       <lay-icon type="layui-icon-login-qq" />
     </template>
     tag
   </lay-tag>
-  <lay-tag bordered size="lg" color="#FFF">
+  <lay-tag size="lg">
     <template #icon>
       <lay-icon type="layui-icon-star-fill" />
     </template>
@@ -342,11 +341,12 @@ export default {
 
 | 属性        | 描述     | 类型    | 默认值    | 可选值                             |
 | ----------- | -------- | ------ | ------ | ------ |
+| type        | 标签类型  | string | -| `primary` `normal` `warm` `danger`
 | size | 标签大小 | string | md | `lg` `md` `sm` `xs`|
-| color | 标签颜色 | string | `#EEE`| `red` `orange` `green` `cyan` `blue` `black` `gray` `string` | 
+| color | 自定义标签颜色 | string | -| - | 
-| bordered | 是否显示边框 | boolean | false | `true` `false`|
+| bordered | 是否显示边框 | boolean | `true` | `true` `false`|
 | closable | 是否可关闭 | boolean | false | `true` `false`|
-| variant  | 标签风格  | string | `default` | `default` `light` `plain`|
+| variant  | 标签风格  | string | `dark` | `dark` `light` `plain`|
 | disabled | 禁用标签  | boolean | false | `true` `false`|
 | shape    | 标签类型  | string | square | `square` `round`|
 | maxWidth | 标签最大宽度 | string| -- | --|