init

2022-12-09 16:41:41 +08:00
parent c1cce5a7c2
commit ff7aa8774f
2003 changed files with 156639 additions and 140 deletions
--- a/.svn/pristine/f1/f17a082c791d68289b8404455440b9097f8899ff.svn-base
+++ b/.svn/pristine/f1/f17a082c791d68289b8404455440b9097f8899ff.svn-base
@@ -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>