@itguy614/clean-ui 0.9.0 → 1.0.1

package/dist/components/CuiTable.vue.js

@@ -0,0 +1,90 @@
+import { defineComponent as z, computed as l, provide as C, ref as E, withDirectives as f, openBlock as r, createElementBlock as i, createElementVNode as p, unref as a, normalizeStyle as s, normalizeClass as y, renderSlot as h, createCommentVNode as b, vShow as v } from "vue";
+import { TableContextKey as D } from "./table-context.js";
+import { clampSize as T } from "../utils/sizing.js";
+import { useScrollShadows as $, scrollShadowRightStyle as L, scrollShadowBottomStyle as N } from "../composables/useScrollShadows.js";
+const P = {
+  key: 0,
+  style: { position: "relative" }
+}, V = ["aria-rowcount"], I = ["aria-rowcount"], Z = /* @__PURE__ */ z({
+  __name: "CuiTable",
+  props: {
+    striped: { type: Boolean, default: !1 },
+    hoverable: { type: Boolean, default: !1 },
+    bordered: { type: Boolean, default: !1 },
+    stickyHeader: { type: Boolean, default: !1 },
+    fixedLayout: { type: Boolean, default: !1 },
+    maxHeight: {},
+    minWidth: {},
+    ariaRowcount: {},
+    hidden: { type: Boolean, default: !1 },
+    size: { default: "md" }
+  },
+  setup(o, { expose: S }) {
+    const e = o, w = ["sm", "md", "lg"], n = l(() => T(e.size, w));
+    C(D, {
+      size: n,
+      stickyHeader: l(() => e.stickyHeader)
+    });
+    const d = l(() => [
+      "cui-table",
+      `cui-table--${n.value}`,
+      {
+        "cui-table--striped": e.striped,
+        "cui-table--hoverable": e.hoverable,
+        "cui-table--bordered": e.bordered,
+        "cui-table--sticky-header": e.stickyHeader,
+        "cui-table--fixed": e.fixedLayout
+      }
+    ]), g = l(() => {
+      if (!e.maxHeight && !e.minWidth) return;
+      const t = { overflow: "auto", position: "relative" };
+      return e.maxHeight && (t.maxHeight = e.maxHeight), t;
+    }), k = l(() => ({
+      borderCollapse: "separate",
+      borderSpacing: "0",
+      minWidth: e.minWidth || void 0
+    })), { canScrollRight: x, canScrollDown: H, onScroll: c, onMount: B } = $(), u = E(null);
+    function R(t) {
+      u.value = t, B(t);
+    }
+    return S({ scrollWrapper: u }), (t, m) => o.maxHeight || o.minWidth ? f((r(), i("div", P, [
+      p("div", {
+        ref: R,
+        class: "cui-table-wrapper",
+        style: s(g.value),
+        onScroll: m[0] || (m[0] = //@ts-ignore
+        (...W) => a(c) && a(c)(...W))
+      }, [
+        p("table", {
+          class: y(d.value),
+          style: s(k.value),
+          "aria-rowcount": o.ariaRowcount
+        }, [
+          h(t.$slots, "default")
+        ], 14, V)
+      ], 36),
+      a(x) ? (r(), i("div", {
+        key: 0,
+        style: s(a(L))
+      }, null, 4)) : b("", !0),
+      a(H) ? (r(), i("div", {
+        key: 1,
+        style: s(a(N))
+      }, null, 4)) : b("", !0)
+    ], 512)), [
+      [v, !o.hidden]
+    ]) : f((r(), i("table", {
+      key: 1,
+      class: y(d.value),
+      style: { "border-collapse": "separate", "border-spacing": "0" },
+      "aria-rowcount": o.ariaRowcount
+    }, [
+      h(t.$slots, "default")
+    ], 10, I)), [
+      [v, !o.hidden]
+    ]);
+  }
+});
+export {
+  Z as default
+};

package/dist/components/CuiTable.vue3.js

@@ -0,0 +1,5 @@
+import o from "./CuiTable.vue.js";
+/* empty css              */
+export {
+  o as default
+};

package/dist/components/CuiTableBody.vue.js

@@ -0,0 +1,18 @@
+import { defineComponent as t, provide as n, withDirectives as l, openBlock as r, createElementBlock as a, renderSlot as d, vShow as i } from "vue";
+import { TableSectionContextKey as s } from "./table-context.js";
+const m = /* @__PURE__ */ t({
+  __name: "CuiTableBody",
+  props: {
+    hidden: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    return n(s, { isHead: !1 }), (o, p) => l((r(), a("tbody", null, [
+      d(o.$slots, "default")
+    ], 512)), [
+      [i, !e.hidden]
+    ]);
+  }
+});
+export {
+  m as default
+};

package/dist/components/CuiTableBody.vue2.js

@@ -0,0 +1,4 @@
+import f from "./CuiTableBody.vue.js";
+export {
+  f as default
+};

package/dist/components/CuiTableCell.vue.js

@@ -0,0 +1,36 @@
+import { defineComponent as s, inject as c, computed as n, withDirectives as d, openBlock as p, createBlock as f, resolveDynamicComponent as u, normalizeStyle as h, withCtx as w, renderSlot as m, vShow as v } from "vue";
+import { TableSectionContextKey as y } from "./table-context.js";
+const B = /* @__PURE__ */ s({
+  __name: "CuiTableCell",
+  props: {
+    header: { type: Boolean },
+    align: { default: "left" },
+    width: {},
+    colspan: {},
+    rowspan: {},
+    nowrap: { type: Boolean, default: !1 },
+    hidden: { type: Boolean, default: !1 }
+  },
+  setup(o) {
+    const e = o, a = c(y, void 0), l = n(() => e.header !== void 0 ? e.header : (a == null ? void 0 : a.isHead) ?? !1), i = n(() => l.value ? "th" : "td"), r = n(() => {
+      const t = {};
+      return e.align !== "left" && (t.textAlign = e.align), e.width && (t.width = e.width), e.nowrap && (t.whiteSpace = "nowrap"), t;
+    });
+    return (t, C) => d((p(), f(u(i.value), {
+      style: h(r.value),
+      colspan: o.colspan,
+      rowspan: o.rowspan,
+      scope: l.value ? "col" : void 0
+    }, {
+      default: w(() => [
+        m(t.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["style", "colspan", "rowspan", "scope"])), [
+      [v, !o.hidden]
+    ]);
+  }
+});
+export {
+  B as default
+};

package/dist/components/CuiTableCell.vue2.js

@@ -0,0 +1,4 @@
+import f from "./CuiTableCell.vue.js";
+export {
+  f as default
+};

package/dist/components/CuiTableFoot.vue.js

@@ -0,0 +1,18 @@
+import { defineComponent as t, provide as n, withDirectives as l, openBlock as r, createElementBlock as a, renderSlot as i, vShow as d } from "vue";
+import { TableSectionContextKey as s } from "./table-context.js";
+const m = /* @__PURE__ */ t({
+  __name: "CuiTableFoot",
+  props: {
+    hidden: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    return n(s, { isHead: !1 }), (o, f) => l((r(), a("tfoot", null, [
+      i(o.$slots, "default")
+    ], 512)), [
+      [d, !e.hidden]
+    ]);
+  }
+});
+export {
+  m as default
+};

package/dist/components/CuiTableFoot.vue2.js

@@ -0,0 +1,4 @@
+import f from "./CuiTableFoot.vue.js";
+export {
+  f as default
+};

package/dist/components/CuiTableHead.vue.js

@@ -0,0 +1,18 @@
+import { defineComponent as o, provide as n, withDirectives as r, openBlock as a, createElementBlock as l, renderSlot as d, vShow as i } from "vue";
+import { TableSectionContextKey as p } from "./table-context.js";
+const f = /* @__PURE__ */ o({
+  __name: "CuiTableHead",
+  props: {
+    hidden: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    return n(p, { isHead: !0 }), (t, s) => r((a(), l("thead", null, [
+      d(t.$slots, "default")
+    ], 512)), [
+      [i, !e.hidden]
+    ]);
+  }
+});
+export {
+  f as default
+};

package/dist/components/CuiTableHead.vue2.js

@@ -0,0 +1,4 @@
+import f from "./CuiTableHead.vue.js";
+export {
+  f as default
+};

package/dist/components/CuiTableRow.vue.js

@@ -0,0 +1,23 @@
+import { defineComponent as r, ref as a, withDirectives as n, openBlock as s, createElementBlock as c, normalizeClass as d, renderSlot as f, vShow as i } from "vue";
+const m = /* @__PURE__ */ r({
+  __name: "CuiTableRow",
+  props: {
+    selected: { type: Boolean, default: !1 },
+    hidden: { type: Boolean, default: !1 }
+  },
+  setup(e, { expose: t }) {
+    const l = a(null);
+    return t({ rowEl: l }), (o, u) => n((s(), c("tr", {
+      ref_key: "rowEl",
+      ref: l,
+      class: d({ "cui-table-row--selected": e.selected })
+    }, [
+      f(o.$slots, "default")
+    ], 2)), [
+      [i, !e.hidden]
+    ]);
+  }
+});
+export {
+  m as default
+};

package/dist/components/CuiTableRow.vue2.js

@@ -0,0 +1,4 @@
+import f from "./CuiTableRow.vue.js";
+export {
+  f as default
+};

package/dist/components/CuiTabs.vue.js

@@ -0,0 +1,7 @@
+import o from "./CuiTabs.vue2.js";
+/* empty css             */
+import t from "../_virtual/_plugin-vue_export-helper.js";
+const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-2356dd2a"]]);
+export {
+  p as default
+};

package/dist/components/CuiTabs.vue2.js

@@ -0,0 +1,124 @@
+import { defineComponent as $, ref as p, watch as A, provide as D, toRef as s, computed as T, withDirectives as z, openBlock as v, createElementBlock as f, normalizeClass as _, createElementVNode as h, Fragment as S, renderList as B, normalizeStyle as K, toDisplayString as N, withModifiers as E, unref as H, createVNode as L, createCommentVNode as M, renderSlot as R, vShow as q, nextTick as F } from "vue";
+import U from "./CuiIcon.vue.js";
+import { TabsContextKey as j } from "./tabs-context.js";
+import { useMessages as G } from "../composables/useMessages.js";
+const J = ["aria-orientation"], O = ["data-cui-tab-value", "aria-selected", "aria-disabled", "tabindex", "onClick"], P = { class: "cui-tabs__tab-content" }, Q = ["aria-label", "onClick"], W = { class: "cui-tabs__panels" }, te = /* @__PURE__ */ $({
+  __name: "CuiTabs",
+  props: {
+    modelValue: {},
+    variant: { default: "underline" },
+    orientation: { default: "horizontal" },
+    keepAlive: { type: Boolean, default: !0 },
+    transition: { default: "fade" },
+    hidden: { type: Boolean, default: !1 },
+    color: { default: "primary" }
+  },
+  emits: ["update:modelValue", "close"],
+  setup(o, { emit: x }) {
+    const n = o, b = x, l = p(n.modelValue ?? ""), c = p(""), i = p([]);
+    A(
+      () => n.modelValue,
+      (e) => {
+        e !== void 0 && e !== l.value && (c.value = l.value, l.value = e);
+      }
+    );
+    function k(e) {
+      i.value.find((a) => a.value === e.value) || i.value.push(e), !l.value && !e.disabled && (l.value = e.value, b("update:modelValue", e.value));
+    }
+    function g(e) {
+      i.value = i.value.filter((a) => a.value !== e);
+    }
+    function m(e) {
+      const a = i.value.find((t) => t.value === e);
+      a != null && a.disabled || (c.value = l.value, l.value = e, b("update:modelValue", e));
+    }
+    function y(e) {
+      b("close", e);
+    }
+    D(j, {
+      activeTab: l,
+      variant: s(n, "variant"),
+      orientation: s(n, "orientation"),
+      color: s(n, "color"),
+      keepAlive: s(n, "keepAlive"),
+      transition: s(n, "transition"),
+      previousTab: c,
+      register: k,
+      unregister: g,
+      activate: m,
+      close: y
+    });
+    function w(e) {
+      const a = i.value.filter((r) => !r.disabled), t = a.findIndex((r) => r.value === l.value);
+      if (t < 0) return;
+      const d = n.orientation === "horizontal", I = d ? "ArrowRight" : "ArrowDown", V = d ? "ArrowLeft" : "ArrowUp";
+      let u = -1;
+      e.key === I ? (e.preventDefault(), u = t < a.length - 1 ? t + 1 : 0) : e.key === V ? (e.preventDefault(), u = t > 0 ? t - 1 : a.length - 1) : e.key === "Home" ? (e.preventDefault(), u = 0) : e.key === "End" && (e.preventDefault(), u = a.length - 1), u >= 0 && (m(a[u].value), F(() => {
+        const r = document.querySelector(
+          `[data-cui-tab-value="${a[u].value}"]`
+        );
+        r == null || r.focus();
+      }));
+    }
+    T(() => {
+      const e = i.value.findIndex((t) => t.value === c.value);
+      return i.value.findIndex((t) => t.value === l.value) >= e ? "left" : "right";
+    });
+    const C = G();
+    return (e, a) => z((v(), f("div", {
+      class: _(["cui-tabs", [
+        `cui-tabs--${o.variant}`,
+        `cui-tabs--${o.orientation}`
+      ]])
+    }, [
+      h("div", {
+        class: "cui-tabs__bar",
+        role: "tablist",
+        "aria-orientation": o.orientation,
+        onKeydown: w
+      }, [
+        (v(!0), f(S, null, B(i.value, (t) => (v(), f("button", {
+          key: t.value,
+          "data-cui-tab-value": t.value,
+          class: _(["cui-tabs__tab", {
+            "cui-tabs__tab--active": l.value === t.value,
+            "cui-tabs__tab--disabled": t.disabled
+          }]),
+          style: K({
+            "--_tab-color": `var(--cui-${o.color})`,
+            "--_tab-hover": `var(--cui-${o.color}-hover)`,
+            "--_tab-bg": `var(--cui-${o.color}-bg)`
+          }),
+          role: "tab",
+          "aria-selected": l.value === t.value,
+          "aria-disabled": t.disabled || void 0,
+          tabindex: l.value === t.value ? 0 : -1,
+          onClick: (d) => m(t.value)
+        }, [
+          h("span", P, N(t.label), 1),
+          t.closeable ? (v(), f("button", {
+            key: 0,
+            type: "button",
+            class: "cui-tabs__tab-close",
+            "aria-label": H(C).tabs.closeTab,
+            tabindex: "-1",
+            onClick: E((d) => y(t.value), ["stop"])
+          }, [
+            L(U, {
+              name: "x",
+              size: "0.75rem"
+            })
+          ], 8, Q)) : M("", !0)
+        ], 14, O))), 128))
+      ], 40, J),
+      h("div", W, [
+        R(e.$slots, "default", {}, void 0, !0)
+      ])
+    ], 2)), [
+      [q, !o.hidden]
+    ]);
+  }
+});
+export {
+  te as default
+};

package/dist/components/CuiTagInput.vue.js

@@ -0,0 +1,296 @@
+import { defineComponent as le, ref as v, computed as h, onMounted as ne, onUnmounted as re, watch as oe, nextTick as L, withDirectives as ue, openBlock as s, createElementBlock as d, toDisplayString as x, createCommentVNode as w, createElementVNode as $, normalizeStyle as k, Fragment as q, renderList as F, createBlock as O, withCtx as ie, createTextVNode as se, Teleport as ce, createVNode as P, withModifiers as U, renderSlot as de, vShow as ve } from "vue";
+import { clampSize as fe } from "../utils/sizing.js";
+import me from "./CuiIcon.vue.js";
+import ge from "./CuiBadge.vue.js";
+import pe from "./CuiSpinner.vue.js";
+/* empty css                */
+const ye = {
+  key: 0,
+  style: { display: "block", marginBottom: "calc(0.25rem * var(--cui-density-scale, 1))", fontSize: "0.875rem", fontWeight: "500", color: "var(--cui-text-secondary)" }
+}, be = ["value", "placeholder", "disabled"], he = {
+  key: 1,
+  style: { fontSize: "0.75rem", color: "var(--cui-error)", marginTop: "calc(0.25rem * var(--cui-density-scale, 1))" }
+}, xe = {
+  key: 0,
+  style: { padding: "calc(0.75rem * var(--cui-density-scale, 1))", textAlign: "center" }
+}, we = ["data-index", "onClick", "onMouseenter"], Me = /* @__PURE__ */ le({
+  __name: "CuiTagInput",
+  props: {
+    modelValue: { default: () => [] },
+    suggestions: { default: () => [] },
+    fetchSuggestions: {},
+    allowCreate: { type: Boolean, default: !0 },
+    debounce: { default: 300 },
+    minChars: { default: 0 },
+    maxTags: { default: 0 },
+    placeholder: { default: "Add tag..." },
+    label: {},
+    error: { type: Boolean, default: !1 },
+    errorMessage: {},
+    noSuggestionsText: { default: "No suggestions" },
+    createText: { default: "Create" },
+    hidden: { type: Boolean, default: !1 },
+    rounded: { default: "md" },
+    color: { default: "primary" },
+    size: { default: "md" },
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue"],
+  setup(r, { expose: K, emit: Y }) {
+    const l = r, Z = {
+      none: "0",
+      sm: "0.25rem",
+      md: "var(--cui-button-radius, 0.375rem)",
+      lg: "0.5rem",
+      full: "9999px"
+    }, B = Y, o = v(""), c = v(!1), u = v(-1), V = v(!1), m = v([]), f = v(null), E = v(null), g = v(null), I = v({});
+    let S = null;
+    const z = h(() => new Set(l.modelValue)), C = h(() => l.maxTags > 0 && l.modelValue.length >= l.maxTags);
+    function j(e) {
+      const a = [...l.suggestions, ...m.value].find((t) => t.value === e);
+      return (a == null ? void 0 : a.label) ?? e;
+    }
+    function G(e) {
+      const a = [...l.suggestions, ...m.value].find((t) => t.value === e);
+      return (a == null ? void 0 : a.color) ?? l.color;
+    }
+    const i = h(() => {
+      const a = (l.fetchSuggestions ? m.value : l.suggestions).filter((n) => !z.value.has(n.value));
+      if (!o.value || l.fetchSuggestions) return a;
+      const t = o.value.toLowerCase();
+      return a.filter(
+        (n) => n.value.toLowerCase().includes(t) || n.label && n.label.toLowerCase().includes(t)
+      );
+    }), p = h(() => {
+      if (!l.allowCreate || !o.value.trim() || C.value) return !1;
+      const e = o.value.trim().toLowerCase();
+      return z.value.has(e) || z.value.has(o.value.trim()) ? !1 : ![...l.suggestions, ...m.value].map((t) => t.value.toLowerCase()).includes(e);
+    }), D = h(() => V.value), J = ["sm", "md", "lg"], Q = {
+      sm: { fontSize: "0.8125rem", padding: "calc(0.25rem * var(--cui-density-scale, 1)) calc(0.5rem * var(--cui-density-scale, 1))", tagSize: "sm", inputHeight: "2rem" },
+      md: { fontSize: "0.875rem", padding: "calc(0.3125rem * var(--cui-density-scale, 1)) calc(0.625rem * var(--cui-density-scale, 1))", tagSize: "sm", inputHeight: "2.375rem" },
+      lg: { fontSize: "0.9375rem", padding: "calc(0.4375rem * var(--cui-density-scale, 1)) calc(0.75rem * var(--cui-density-scale, 1))", tagSize: "md", inputHeight: "2.75rem" }
+    }, y = h(() => Q[fe(l.size, J)]);
+    function b() {
+      if (!g.value) return;
+      const e = g.value.getBoundingClientRect(), a = window.innerHeight, t = a - e.bottom, n = t < 200 && e.top > t, M = Math.min(240, Math.max(t, e.top) - 16), R = {
+        position: "fixed",
+        zIndex: "9990",
+        left: `${e.left}px`,
+        width: `${e.width}px`,
+        maxHeight: `${M}px`,
+        overflowY: "auto",
+        background: "var(--cui-surface-base)",
+        border: "1px solid var(--cui-border)",
+        borderRadius: "0.5rem",
+        boxShadow: "0 8px 24px -4px rgba(0,0,0,0.12), 0 2px 8px -2px rgba(0,0,0,0.08)",
+        padding: "calc(0.25rem * var(--cui-density-scale, 1))"
+      };
+      n ? R.bottom = `${a - e.top + 4}px` : R.top = `${e.bottom + 4}px`, I.value = R;
+    }
+    function X(e) {
+      if (o.value = e.target.value, u.value = -1, c.value || (c.value = !0, b()), l.fetchSuggestions) {
+        if (o.value.length < l.minChars) {
+          m.value = [];
+          return;
+        }
+        S && clearTimeout(S), S = setTimeout(async () => {
+          V.value = !0;
+          try {
+            m.value = await l.fetchSuggestions(o.value);
+          } finally {
+            V.value = !1;
+          }
+        }, l.debounce);
+      }
+    }
+    function H(e) {
+      if (l.disabled || C.value) return;
+      const a = e.trim();
+      !a || z.value.has(a) || (B("update:modelValue", [...l.modelValue, a]), o.value = "", u.value = -1, L(() => {
+        var t;
+        return (t = f.value) == null ? void 0 : t.focus();
+      }));
+    }
+    function A(e) {
+      H(e.value);
+    }
+    function T() {
+      p.value && H(o.value.trim());
+    }
+    function N(e) {
+      l.disabled || (B("update:modelValue", l.modelValue.filter((a) => a !== e)), L(() => {
+        var a;
+        return (a = f.value) == null ? void 0 : a.focus();
+      }));
+    }
+    function _(e) {
+      const a = i.value.length + (p.value ? 1 : 0);
+      if (e.key === "ArrowDown") {
+        if (e.preventDefault(), !c.value) {
+          c.value = !0, b();
+          return;
+        }
+        u.value = Math.min(u.value + 1, a - 1);
+      } else e.key === "ArrowUp" ? (e.preventDefault(), u.value = Math.max(u.value - 1, 0)) : e.key === "Enter" ? (e.preventDefault(), u.value >= 0 && u.value < i.value.length ? A(i.value[u.value]) : (p.value && (u.value === i.value.length || u.value === -1) || p.value && o.value.trim()) && T()) : e.key === "," || e.key === "Tab" ? o.value.trim() && l.allowCreate && (e.preventDefault(), T()) : e.key === "Escape" ? c.value = !1 : e.key === "Backspace" && !o.value && l.modelValue.length > 0 && N(l.modelValue[l.modelValue.length - 1]);
+    }
+    function W(e) {
+      var t, n;
+      const a = e.target;
+      (t = g.value) != null && t.contains(a) || (n = E.value) != null && n.contains(a) || (c.value = !1);
+    }
+    function ee() {
+      !l.disabled && !C.value && (c.value = !0, b());
+    }
+    ne(() => {
+      document.addEventListener("mousedown", W), window.addEventListener("scroll", () => {
+        c.value && b();
+      }, !0), window.addEventListener("resize", () => {
+        c.value && b();
+      });
+    }), re(() => {
+      document.removeEventListener("mousedown", W), S && clearTimeout(S);
+    }), oe(c, (e) => {
+      e || (o.value = ""), e && L(b);
+    });
+    function ae(e) {
+      var a;
+      f.value ? f.value.focus(e) : (a = g.value) == null || a.focus(e);
+    }
+    function te() {
+      var e;
+      (e = f.value) == null || e.blur();
+    }
+    return K({ el: g, focus: ae, blur: te }), (e, a) => ue((s(), d("div", {
+      ref_key: "wrapperRef",
+      ref: g,
+      style: { position: "relative" }
+    }, [
+      r.label ? (s(), d("label", ye, x(r.label), 1)) : w("", !0),
+      $("div", {
+        style: k({
+          display: "flex",
+          flexWrap: "wrap",
+          alignItems: "center",
+          gap: "calc(0.25rem * var(--cui-density-scale, 1))",
+          padding: y.value.padding,
+          border: `1px solid ${r.error ? "var(--cui-error)" : "var(--cui-border-strong, var(--cui-border))"}`,
+          borderRadius: Z[r.rounded],
+          background: "var(--cui-surface-base, white)",
+          cursor: r.disabled ? "default" : "text",
+          opacity: r.disabled ? "0.5" : "1",
+          minHeight: y.value.inputHeight
+        }),
+        onClick: a[0] || (a[0] = (t) => {
+          var n;
+          return (n = f.value) == null ? void 0 : n.focus();
+        })
+      }, [
+        (s(!0), d(q, null, F(r.modelValue, (t) => (s(), O(ge, {
+          key: t,
+          color: G(t),
+          size: y.value.tagSize,
+          removable: "",
+          onRemove: (n) => N(t)
+        }, {
+          default: ie(() => [
+            se(x(j(t)), 1)
+          ]),
+          _: 2
+        }, 1032, ["color", "size", "onRemove"]))), 128)),
+        C.value ? w("", !0) : (s(), d("input", {
+          key: 0,
+          ref_key: "inputRef",
+          ref: f,
+          value: o.value,
+          placeholder: r.modelValue.length > 0 ? "" : r.placeholder,
+          disabled: r.disabled,
+          style: k({
+            flex: "1",
+            minWidth: "4rem",
+            border: "none",
+            outline: "none",
+            background: "transparent",
+            fontSize: y.value.fontSize,
+            color: "var(--cui-text-body)",
+            padding: "calc(0.125rem * var(--cui-density-scale, 1)) 0",
+            fontFamily: "inherit"
+          }),
+          onInput: X,
+          onFocus: ee,
+          onKeydown: _
+        }, null, 44, be))
+      ], 4),
+      r.error && r.errorMessage ? (s(), d("div", he, x(r.errorMessage), 1)) : w("", !0),
+      (s(), O(ce, { to: "body" }, [
+        c.value && (i.value.length > 0 || p.value || D.value) ? (s(), d("div", {
+          key: 0,
+          ref_key: "dropdownRef",
+          ref: E,
+          style: k(I.value)
+        }, [
+          D.value && i.value.length === 0 ? (s(), d("div", xe, [
+            P(pe, {
+              size: "xs",
+              "show-label": "",
+              label: "Searching..."
+            })
+          ])) : w("", !0),
+          (s(!0), d(q, null, F(i.value, (t, n) => (s(), d("div", {
+            key: t.value,
+            "data-index": n,
+            style: k({
+              display: "flex",
+              alignItems: "center",
+              gap: "calc(0.5rem * var(--cui-density-scale, 1))",
+              padding: "calc(0.4375rem * var(--cui-density-scale, 1)) calc(0.625rem * var(--cui-density-scale, 1))",
+              cursor: "pointer",
+              fontSize: y.value.fontSize,
+              borderRadius: "0.25rem",
+              background: u.value === n ? "var(--cui-primary-bg)" : "transparent",
+              color: "var(--cui-text-body)",
+              transition: "background 0.1s ease"
+            }),
+            onClick: U((M) => A(t), ["stop"]),
+            onMouseenter: (M) => u.value = n
+          }, [
+            de(e.$slots, "suggestion", { suggestion: t }, () => [
+              $("span", null, x(t.label || t.value), 1)
+            ])
+          ], 44, we))), 128)),
+          p.value ? (s(), d("div", {
+            key: 1,
+            style: k({
+              display: "flex",
+              alignItems: "center",
+              gap: "calc(0.375rem * var(--cui-density-scale, 1))",
+              padding: "calc(0.4375rem * var(--cui-density-scale, 1)) calc(0.625rem * var(--cui-density-scale, 1))",
+              cursor: "pointer",
+              fontSize: y.value.fontSize,
+              borderRadius: "0.25rem",
+              background: u.value === i.value.length ? "var(--cui-primary-bg)" : "transparent",
+              color: "var(--cui-primary)",
+              fontWeight: "500",
+              transition: "background 0.1s ease",
+              borderTop: i.value.length > 0 ? "1px solid color-mix(in srgb, var(--cui-border) 50%, transparent)" : "none",
+              marginTop: i.value.length > 0 ? "calc(0.125rem * var(--cui-density-scale, 1))" : "0",
+              paddingTop: i.value.length > 0 ? "calc(0.5rem * var(--cui-density-scale, 1))" : void 0
+            }),
+            onClick: U(T, ["stop"]),
+            onMouseenter: a[1] || (a[1] = (t) => u.value = i.value.length)
+          }, [
+            P(me, {
+              name: "plus",
+              size: "0.75rem"
+            }),
+            $("span", null, x(r.createText) + " “" + x(o.value.trim()) + "”", 1)
+          ], 36)) : w("", !0)
+        ], 4)) : w("", !0)
+      ]))
+    ], 512)), [
+      [ve, !r.hidden]
+    ]);
+  }
+});
+export {
+  Me as default
+};

package/dist/components/CuiTagInput.vue2.js

@@ -0,0 +1,4 @@
+import f from "./CuiTagInput.vue.js";
+export {
+  f as default
+};