@indielayer/ui/lib/components/tag/Tag.vue.js

Indielayer UI Components with Tailwind CSS build for Vue 3

import { defineComponent as g, computed as v, openBlock as l, createBlock as b, resolveDynamicComponent as x, normalizeClass as s, unref as r, normalizeStyle as k, withCtx as y, createElementVNode as t, renderSlot as n, createElementBlock as z, createVNode as B, createCommentVNode as C } from "vue";
import { useColors as h } from "../../composables/useColors.js";
import { useCommon as d } from "../../composables/useCommon.js";
import { useTheme as _ } from "../../composables/useTheme.js";
import { closeIcon as N } from "../../common/icons.js";
import S from "../icon/Icon.vue.js";
const $ = { class: "flex items-center gap-2" }, w = { class: "truncate" }, T = {
  key: 0,
  class: "absolute right-1.5 top-0 h-full flex items-center"
}, V = {
  ...d.props(),
  ...h.props("secondary"),
  tag: {
    type: String,
    default: "span"
  },
  rounded: Boolean,
  removable: Boolean,
  outlined: Boolean,
  filled: Boolean,
  disabled: Boolean
}, E = {
  name: "XTag",
  validators: {
    ...d.validators()
  }
}, A = /* @__PURE__ */ g({
  ...E,
  props: V,
  emits: ["remove"],
  setup(i) {
    const o = i, m = v(() => o.size === "xs" ? "xs" : o.size === "sm" ? "sm" : o.size === "lg" ? "md" : o.size === "xl" ? "lg" : "sm"), { styles: c, classes: u, className: p } = _("Tag", {}, o);
    return (e, a) => (l(), b(x(e.tag), {
      class: s([
        "text-[color:var(--x-tag-text)] dark:text-[color:var(--x-tag-dark-text)] border relative",
        [
          r(p),
          r(u).wrapper,
          e.outlined ? "border-[color:var(--x-tag-border)] dark:border-[color:var(--x-tag-dark-border)]" : "!border-transparent bg-[color:var(--x-tag-bg)] dark:bg-[color:var(--x-tag-dark-bg)]",
          e.rounded ? "rounded-full" : "rounded"
        ]
      ]),
      style: k(r(c))
    }, {
      default: y(() => [
        t("span", {
          class: s(["max-w-full", { "pr-4": e.removable }])
        }, [
          t("div", $, [
            n(e.$slots, "prefix"),
            t("div", w, [
              n(e.$slots, "default")
            ])
          ]),
          e.removable ? (l(), z("div", T, [
            B(S, {
              size: m.value,
              icon: r(N),
              class: s(["cursor-pointer transition-colors duration-150", [e.disabled ? "text-secondary-400" : "hover:text-secondary-500"]]),
              onClick: a[0] || (a[0] = (f) => !e.disabled && e.$emit("remove", f))
            }, null, 8, ["size", "icon", "class"])
          ])) : C("", !0)
        ], 2)
      ]),
      _: 3
    }, 8, ["style", "class"]));
  }
});
export {
  A as default
};