init

src/component/tag/index.less

@@ -0,0 +1,145 @@
+ @tagColors: {
+   primary: #009688;
+   normal: #1e9fff;
+   warm: #ffb800;
+   danger: #ff5722;
+ }
+
+ @tagSizes: lg, md, sm, xs;
+
+ @tag-size-default: 26px;
+ @tag-size-default-font-size: 14px;
+ @tag-size-lg: @tag-size-default + 4px;
+ @tag-size-md: @tag-size-default;
+ @tag-size-sm: @tag-size-default - 4px;
+ @tag-size-xs: @tag-size-default - 4px * 2;
+ @tag-size-lg-font-size: @tag-size-default-font-size;
+ @tag-size-md-font-size: @tag-size-default-font-size;
+ @tag-size-sm-font-size: @tag-size-default-font-size - 2px;
+ @tag-size-xs-font-size: @tag-size-default-font-size - 2px;
+ @tag-border-width: 1px;
+
+ .layui-tag {
+   --layui-tag-bg-color: #fafafa;
+   --layui-tag-border-color: #f0f0f0;
+   --layui-tag-hover-color: #FFF;
+   --layui-tag-text-color: currentColor;
+   display: inline-flex;
+   align-items: baseline;
+   vertical-align: middle;
+   box-sizing: border-box;
+   height: @tag-size-md;
+   line-height: @tag-size-md;
+   padding: 0 8px;
+   font-size: @tag-size-md-font-size;
+   font-weight: 500;
+   color: var(--layui-tag-text-color);
+   background-color: var(--layui-tag-bg-color);
+   border-width: @tag-border-width;
+   border-style: solid;
+   border-color: transparent;
+   border-radius: var(--global-border-radius);
+
+   &-icon {
+     margin-right: 4px;
+   }
+
+   &-bordered {
+     border-color: var(--layui-tag-border-color);
+   }
+
+   &-disabled {
+     opacity: 0.4;
+     cursor: not-allowed;
+   }
+
+   &-disabled &-close-icon {
+     .layui-icon {
+
+       &:hover {
+         cursor: not-allowed !important;
+         opacity: 1;
+       }
+     }
+   }
+
+   &-shap {
+     &-square {
+       border-radius: var(--global-border-radius);
+     }
+
+     &-round {
+       border-radius: 12px;
+     }
+   }
+
+   &-ellipsis &-text {
+     display: inline-block;
+     white-space: nowrap;
+     word-wrap: normal;
+     overflow: hidden;
+     text-overflow: ellipsis
+   }
+
+   & &-close-icon {
+     margin-left: 4px;
+     font-size: @tag-size-default-font-size;
+
+     .layui-icon {
+
+       &:hover {
+         cursor: pointer;
+         opacity: 0.5;
+       }
+     }
+   }
+
+   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, {
+   &-@{key} {
+     --layui-tag-bg-color: @value;
+     --layui-tag-border-color: transparent;
+     --layui-tag-hover-color: @value;
+     --layui-tag-text-color: contrast(@value, #FFF,#000000,60%);
+
+     &-bordered {
+       --layui-tag-border-color: @value;
+     }
+   }
+
+   &-@{key}.layui-tag-variant-light {
+     --layui-tag-bg-color: tint(@value, 90%);
+     --layui-tag-border-color: transparent;
+     --layui-tag-hover-color: tint(@value, 90%);
+     --layui-tag-text-color: @value;
+
+     &-bordered {
+       --layui-tag-border-color: tint(@value, 50%);
+     }
+   }
+
+   &-@{key}.layui-tag-variant-plain {
+     --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;
+     }
+   }
+
+ })
+ }

src/component/tag/index.ts

@@ -0,0 +1,5 @@
+import { withInstall, WithInstallType } from "../../utils";
+import Component from "./index.vue";
+
+const component: WithInstallType<typeof Component> = withInstall(Component);
+export default component;

src/component/tag/index.vue

@@ -0,0 +1,122 @@
+<script lang="ts">
+export default {
+  name: "LayTag",
+};
+</script>
+<script lang="ts" setup>
+import "./index.less";
+import { LayIcon } from "@layui/icons-vue";
+import { computed, ref } from "vue";
+import { TinyColor } from "@ctrl/tinycolor";
+import { TagShape, TagType, TagVariant } from "./interface";
+
+export interface TagProps {
+  type?: TagType;
+  color?: string;
+  closable?: boolean;
+  size?: string;
+  bordered?: boolean;
+  disabled?: boolean;
+  shape?: TagShape;
+  maxWidth?: string;
+  variant?: TagVariant;
+}
+
+const props = withDefaults(defineProps<TagProps>(), {
+  size: "md",
+  shape: "square",
+  variant: "dark",
+  bordered: true,
+});
+
+const emit = defineEmits(["close", "check", "update:checked"]);
+
+const visible = ref(true);
+
+const handleClose = (e: MouseEvent) => {
+  if (props.disabled) return;
+  emit("close", e);
+};
+
+const classTag = computed(() => [
+  "layui-tag",
+  `layui-tag-size-${props.size}`,
+  `layui-tag-shap-${props.shape}`,
+  {
+    [`layui-tag-variant-${props.variant}`]: props.variant,
+    [`layui-tag-variant-${props.variant}-bordered`]: 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,
+  },
+]);
+
+const styleTag = computed(() => [
+  {
+    "max-width": props.maxWidth ?? "unset",
+    ...useTagCustomStyle(props).value,
+  },
+]);
+
+function useTagCustomStyle(props: TagProps) {
+  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">
+    <span v-if="$slots.icon" class="layui-tag-icon">
+      <slot name="icon" />
+    </span>
+    <span v-if="maxWidth" :style="styleTag" class="layui-tag-text">
+      <slot />
+    </span>
+    <slot v-else />
+    <span
+      v-if="closable"
+      class="layui-tag-close-icon"
+      @click.stop="handleClose"
+    >
+      <slot name="close-icon">
+        <lay-icon type="layui-icon-close"></lay-icon>
+      </slot>
+    </span>
+  </span>
+</template>

src/component/tag/interface.ts

@@ -0,0 +1,7 @@
+export const TAG_COLORS = ["primary", "normal", "warm", "danger"] as const;
+
+export type TagType = typeof TAG_COLORS[number];
+
+export type TagShape = "square" | "round";
+
+export type TagVariant = "dark" | "light" | "plain";