layui-vue/es/tag/index2.js

import { w as withInstall } from "../badge/index2.js";
import { defineComponent, ref, computed, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, renderSlot, createCommentVNode, createElementVNode, withModifiers, createVNode } from "vue";
import { _ as _sfc_main$2E } from "../checkbox/index2.js";
import { T as TinyColor } from "../_chunks/@ctrl/index.js";
var index = /* @__PURE__ */ (() => ".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:26px;line-height:26px;padding:0 8px;font-size:14px;font-weight:500;color:var(--layui-tag-text-color);background-color:var(--layui-tag-bg-color);border-width:1px;border-style:solid;border-color:transparent;border-radius:var(--global-border-radius)}.layui-tag-icon{margin-right:4px}.layui-tag-bordered{border-color:var(--layui-tag-border-color)}.layui-tag-disabled{opacity:.4;cursor:not-allowed}.layui-tag-disabled .layui-tag-close-icon .layui-icon:hover{cursor:not-allowed!important;opacity:1}.layui-tag-shap-square{border-radius:var(--global-border-radius)}.layui-tag-shap-round{border-radius:12px}.layui-tag .layui-tag-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layui-tag .layui-tag-close-icon{margin-left:4px;font-size:14px}.layui-tag .layui-tag-close-icon .layui-icon:hover{cursor:pointer;opacity:.5}.layui-tag-size-lg{height:30px;font-size:14px;line-height:30px}.layui-tag .layui-icon{font-size:14px}.layui-tag-size-md{height:26px;font-size:14px;line-height:26px}.layui-tag .layui-icon{font-size:14px}.layui-tag-size-sm{height:22px;font-size:12px;line-height:22px}.layui-tag-size-xs{height:18px;font-size:12px;line-height:18px}.layui-tag .layui-icon{font-size:12px}.layui-tag-primary{--layui-tag-bg-color: #009688;--layui-tag-border-color: transparent;--layui-tag-hover-color: #009688;--layui-tag-text-color: #FFF}.layui-tag-primary-bordered{--layui-tag-border-color: #009688}.layui-tag-primary.layui-tag-variant-light{--layui-tag-bg-color: #e6f5f3;--layui-tag-border-color: transparent;--layui-tag-hover-color: #e6f5f3;--layui-tag-text-color: #009688}.layui-tag-primary.layui-tag-variant-light-bordered{--layui-tag-border-color: #80cbc4}.layui-tag-primary.layui-tag-variant-plain{--layui-tag-bg-color: transparent;--layui-tag-hover-color: transparent;--layui-tag-text-color: #009688;--layui-tag-border-color: transparent}.layui-tag-primary.layui-tag-variant-plain-bordered{--layui-tag-border-color: #009688}.layui-tag-normal{--layui-tag-bg-color: #1e9fff;--layui-tag-border-color: transparent;--layui-tag-hover-color: #1e9fff;--layui-tag-text-color: #FFF}.layui-tag-normal-bordered{--layui-tag-border-color: #1e9fff}.layui-tag-normal.layui-tag-variant-light{--layui-tag-bg-color: #e9f5ff;--layui-tag-border-color: transparent;--layui-tag-hover-color: #e9f5ff;--layui-tag-text-color: #1e9fff}.layui-tag-normal.layui-tag-variant-light-bordered{--layui-tag-border-color: #8fcfff}.layui-tag-normal.layui-tag-variant-plain{--layui-tag-bg-color: transparent;--layui-tag-hover-color: transparent;--layui-tag-text-color: #1e9fff;--layui-tag-border-color: transparent}.layui-tag-normal.layui-tag-variant-plain-bordered{--layui-tag-border-color: #1e9fff}.layui-tag-warm{--layui-tag-bg-color: #ffb800;--layui-tag-border-color: transparent;--layui-tag-hover-color: #ffb800;--layui-tag-text-color: #FFF}.layui-tag-warm-bordered{--layui-tag-border-color: #ffb800}.layui-tag-warm.layui-tag-variant-light{--layui-tag-bg-color: #fff8e6;--layui-tag-border-color: transparent;--layui-tag-hover-color: #fff8e6;--layui-tag-text-color: #ffb800}.layui-tag-warm.layui-tag-variant-light-bordered{--layui-tag-border-color: #ffdc80}.layui-tag-warm.layui-tag-variant-plain{--layui-tag-bg-color: transparent;--layui-tag-hover-color: transparent;--layui-tag-text-color: #ffb800;--layui-tag-border-color: transparent}.layui-tag-warm.layui-tag-variant-plain-bordered{--layui-tag-border-color: #ffb800}.layui-tag-danger{--layui-tag-bg-color: #ff5722;--layui-tag-border-color: transparent;--layui-tag-hover-color: #ff5722;--layui-tag-text-color: #FFF}.layui-tag-danger-bordered{--layui-tag-border-color: #ff5722}.layui-tag-danger.layui-tag-variant-light{--layui-tag-bg-color: #ffeee9;--layui-tag-border-color: transparent;--layui-tag-hover-color: #ffeee9;--layui-tag-text-color: #ff5722}.layui-tag-danger.layui-tag-variant-light-bord
const _hoisted_1 = {
  key: 0,
  class: "layui-tag-icon"
};
const _hoisted_2 = { class: "layui-tag-text" };
const _hoisted_3 = ["onClick"];
const __default__ = {
  name: "LayTag"
};
const _sfc_main = defineComponent({
  ...__default__,
  props: {
    type: null,
    color: null,
    closable: { type: Boolean },
    size: { default: "md" },
    bordered: { type: Boolean, default: true },
    disabled: { type: Boolean },
    shape: { default: "square" },
    maxWidth: null,
    variant: { default: "dark" }
  },
  emits: ["close", "check", "update:checked"],
  setup(__props, { emit }) {
    const props = __props;
    const visible = ref(true);
    const handleClose = (e) => {
      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
      }
    ]);
    const styleTag = computed(() => {
      var _a;
      return [
        {
          "max-width": (_a = props.maxWidth) != null ? _a : "100%",
          ...useTagCustomStyle(props).value
        }
      ];
    });
    function useTagCustomStyle(props2) {
      return computed(() => {
        let styles = {};
        const tagColor = props2.color;
        if (tagColor) {
          const color = new TinyColor(tagColor);
          if (props2.variant === "dark") {
            const isDark = color.getBrightness() < 190;
            const textColor = isDark ? "#FFF" : "#000000";
            styles = {
              "--layui-tag-bg-color": tagColor,
              "--layui-tag-border-color": props2.bordered ? tagColor : "transparent",
              "--layui-tag-hover-color": tagColor,
              "--layui-tag-text-color": textColor
            };
          } else if (props2.variant === "light") {
            styles = {
              "--layui-tag-bg-color": color.tint(90).toString(),
              "--layui-tag-border-color": props2.bordered ? color.tint(50).toString() : "transparent",
              "--layui-tag-hover-color": color.tint(90).toString(),
              "--layui-tag-text-color": tagColor
            };
          } else if (props2.variant === "plain") {
            styles = {
              "--layui-tag-bg-color": "transparent",
              "--layui-tag-border-color": props2.bordered ? tagColor : "transparent",
              "--layui-tag-hover-color": "transparent",
              "--layui-tag-text-color": tagColor
            };
          }
        }
        return styles;
      });
    }
    return (_ctx, _cache) => {
      return visible.value ? (openBlock(), createElementBlock("span", {
        key: 0,
        class: normalizeClass(unref(classTag)),
        style: normalizeStyle(unref(styleTag))
      }, [
        _ctx.$slots.icon ? (openBlock(), createElementBlock("span", _hoisted_1, [
          renderSlot(_ctx.$slots, "icon")
        ])) : createCommentVNode("", true),
        createElementVNode("span", _hoisted_2, [
          renderSlot(_ctx.$slots, "default")
        ]),
        __props.closable ? (openBlock(), createElementBlock("span", {
          key: 1,
          class: "layui-tag-close-icon",
          onClick: withModifiers(handleClose, ["stop"])
        }, [
          renderSlot(_ctx.$slots, "close-icon", {}, () => [
            createVNode(unref(_sfc_main$2E), { type: "layui-icon-close" })
          ])
        ], 8, _hoisted_3)) : createCommentVNode("", true)
      ], 6)) : createCommentVNode("", true);
    };
  }
});
const component = withInstall(_sfc_main);
export { _sfc_main as _, component as c };