@itguy614/clean-ui 1.3.0 → 1.3.1

package/dist/components/CuiSlider.vue.js

@@ -1,169 +1,7 @@
-import { defineComponent as F, computed as s, ref as R, useTemplateRef as $, withDirectives as B, openBlock as r, createElementBlock as d, normalizeStyle as i, toDisplayString as c, createCommentVNode as m, createElementVNode as u, renderSlot as C, createBlock as E, vShow as D } from "vue";
-import { clampSize as H } from "../utils/sizing.js";
-import q from "./CuiIcon.vue.js";
-const T = {
-  key: 0,
-  style: { display: "flex", "justify-content": "space-between", "align-items": "baseline", "margin-bottom": "calc(0.375rem * var(--cui-density-scale, 1))" }
-}, j = ["id", "name", "autocomplete", "aria-describedby", "aria-required", "aria-labelledby", "value", "min", "max", "step", "disabled"], N = {
-  key: 1,
-  style: { display: "flex", "justify-content": "space-between", "margin-top": "calc(0.25rem * var(--cui-density-scale, 1))" }
-}, W = /* @__PURE__ */ F({
-  __name: "CuiSlider",
-  props: {
-    modelValue: { default: 0 },
-    min: { default: 0 },
-    max: { default: 100 },
-    step: { default: 1 },
-    label: {},
-    showValue: { type: Boolean, default: !1 },
-    formatValue: {},
-    showRange: { type: Boolean, default: !1 },
-    thumbIcon: {},
-    name: {},
-    autocomplete: {},
-    id: {},
-    ariaDescribedby: {},
-    ariaLabelledby: {},
-    ariaRequired: { type: Boolean },
-    hidden: { type: Boolean, default: !1 },
-    color: { default: "primary" },
-    size: { default: "md" },
-    disabled: { type: Boolean, default: !1 }
-  },
-  emits: ["update:modelValue"],
-  setup(e, { expose: y, emit: h }) {
-    const t = e, g = h, v = s(
-      () => (t.modelValue - t.min) / (t.max - t.min) * 100
-    ), x = s(
-      () => t.formatValue ? t.formatValue(t.modelValue) : String(t.modelValue)
-    ), o = R(!1);
-    function S(n) {
-      const a = parseFloat(n.target.value);
-      g("update:modelValue", a);
-    }
-    const V = ["sm", "md", "lg"], z = {
-      sm: { trackHeight: "4px", thumbSize: "16px", thumbIcon: "0.5rem", labelFont: "0.8125rem", valueFont: "0.75rem" },
-      md: { trackHeight: "6px", thumbSize: "20px", thumbIcon: "0.625rem", labelFont: "0.875rem", valueFont: "0.8125rem" },
-      lg: { trackHeight: "8px", thumbSize: "26px", thumbIcon: "0.75rem", labelFont: "1rem", valueFont: "0.875rem" }
-    }, l = s(() => z[H(t.size, V)]), w = s(() => t.disabled ? "var(--cui-text-tertiary)" : `var(--cui-${t.color})`), k = s(() => t.disabled ? "var(--cui-text-tertiary)" : `var(--cui-${t.color})`), b = $("inputEl");
-    function p(n) {
-      var a;
-      (a = b.value) == null || a.focus(n);
-    }
-    function I() {
-      var n;
-      (n = b.value) == null || n.blur();
-    }
-    return y({ el: b, focus: p, blur: I }), (n, a) => B((r(), d("div", {
-      class: "cui-slider",
-      style: i({ opacity: e.disabled ? 0.5 : 1 })
-    }, [
-      e.label || e.showValue ? (r(), d("div", T, [
-        e.label ? (r(), d("label", {
-          key: 0,
-          style: i({ fontSize: l.value.labelFont, fontWeight: "500", color: "var(--cui-text-secondary)" })
-        }, c(e.label), 5)) : m("", !0),
-        e.showValue ? (r(), d("span", {
-          key: 1,
-          style: i({ fontSize: l.value.valueFont, fontWeight: "600", color: "var(--cui-text-body)", fontVariantNumeric: "tabular-nums" })
-        }, c(x.value), 5)) : m("", !0)
-      ])) : m("", !0),
-      u("div", {
-        style: i({ position: "relative", height: l.value.thumbSize, display: "flex", alignItems: "center" })
-      }, [
-        u("div", {
-          style: i({
-            position: "absolute",
-            left: "0",
-            right: "0",
-            height: l.value.trackHeight,
-            borderRadius: "9999px",
-            background: "var(--cui-border)"
-          })
-        }, null, 4),
-        u("div", {
-          style: i({
-            position: "absolute",
-            left: "0",
-            height: l.value.trackHeight,
-            width: `${v.value}%`,
-            borderRadius: "9999px",
-            background: k.value,
-            transition: o.value ? "none" : "width 0.1s ease"
-          })
-        }, null, 4),
-        u("div", {
-          style: i({
-            position: "absolute",
-            left: `${v.value}%`,
-            transform: "translateX(-50%)",
-            width: l.value.thumbSize,
-            height: l.value.thumbSize,
-            borderRadius: "50%",
-            background: w.value,
-            border: "2px solid var(--cui-surface-base, white)",
-            boxShadow: o.value ? "0 2px 8px rgba(0,0,0,0.25)" : "0 1px 3px rgba(0,0,0,0.15)",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            color: "var(--cui-surface-base, white)",
-            transition: o.value ? "none" : "left 0.1s ease, box-shadow 0.15s ease, transform 0.15s ease",
-            pointerEvents: "none",
-            zIndex: 2
-          })
-        }, [
-          C(n.$slots, "thumb", {}, () => [
-            e.thumbIcon ? (r(), E(q, {
-              key: 0,
-              name: e.thumbIcon,
-              size: l.value.thumbIcon
-            }, null, 8, ["name", "size"])) : m("", !0)
-          ])
-        ], 4),
-        u("input", {
-          ref: "inputEl",
-          id: e.id,
-          name: e.name,
-          autocomplete: e.autocomplete,
-          "aria-describedby": e.ariaDescribedby,
-          "aria-required": e.ariaRequired || void 0,
-          "aria-labelledby": e.ariaLabelledby,
-          type: "range",
-          value: e.modelValue,
-          min: e.min,
-          max: e.max,
-          step: e.step,
-          disabled: e.disabled,
-          style: i({
-            position: "absolute",
-            left: "0",
-            width: "100%",
-            height: "100%",
-            margin: "0",
-            opacity: "0",
-            cursor: e.disabled ? "default" : "pointer",
-            zIndex: 3
-          }),
-          onInput: S,
-          onMousedown: a[0] || (a[0] = (f) => o.value = !0),
-          onMouseup: a[1] || (a[1] = (f) => o.value = !1),
-          onTouchstart: a[2] || (a[2] = (f) => o.value = !0),
-          onTouchend: a[3] || (a[3] = (f) => o.value = !1)
-        }, null, 44, j)
-      ], 4),
-      e.showRange ? (r(), d("div", N, [
-        u("span", {
-          style: i({ fontSize: l.value.valueFont, color: "var(--cui-text-tertiary)" })
-        }, c(e.formatValue ? e.formatValue(e.min) : e.min), 5),
-        u("span", {
-          style: i({ fontSize: l.value.valueFont, color: "var(--cui-text-tertiary)" })
-        }, c(e.formatValue ? e.formatValue(e.max) : e.max), 5)
-      ])) : m("", !0)
-    ], 4)), [
-      [D, !e.hidden]
-    ]);
-  }
-});
+import o from "./CuiSlider.vue2.js";
+/* empty css               */
+import r from "../_virtual/_plugin-vue_export-helper.js";
+const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-c846e888"]]);
 export {
-  W as default
+  m as default
 };

package/dist/components/CuiSlider.vue2.js

@@ -1,4 +1,173 @@
-import f from "./CuiSlider.vue.js";
+import { defineComponent as R, computed as r, ref as B, useId as C, useTemplateRef as E, withDirectives as D, openBlock as s, createElementBlock as d, normalizeStyle as i, toDisplayString as c, createCommentVNode as m, createElementVNode as n, renderSlot as H, createBlock as q, vShow as T } from "vue";
+import { clampSize as j } from "../utils/sizing.js";
+import N from "./CuiIcon.vue.js";
+const L = {
+  key: 0,
+  style: { display: "flex", "justify-content": "space-between", "align-items": "baseline", "margin-bottom": "calc(0.375rem * var(--cui-density-scale, 1))" }
+}, M = ["for"], P = ["id", "name", "autocomplete", "aria-describedby", "aria-required", "aria-labelledby", "aria-valuetext", "value", "min", "max", "step", "disabled"], W = {
+  key: 1,
+  style: { display: "flex", "justify-content": "space-between", "margin-top": "calc(0.25rem * var(--cui-density-scale, 1))" }
+}, Z = /* @__PURE__ */ R({
+  __name: "CuiSlider",
+  props: {
+    modelValue: { default: 0 },
+    min: { default: 0 },
+    max: { default: 100 },
+    step: { default: 1 },
+    label: {},
+    showValue: { type: Boolean, default: !1 },
+    formatValue: {},
+    showRange: { type: Boolean, default: !1 },
+    thumbIcon: {},
+    name: {},
+    autocomplete: {},
+    id: {},
+    ariaDescribedby: {},
+    ariaLabelledby: {},
+    ariaRequired: { type: Boolean },
+    hidden: { type: Boolean, default: !1 },
+    color: { default: "primary" },
+    size: { default: "md" },
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { expose: g, emit: x }) {
+    const t = e, V = x, v = r(
+      () => (t.modelValue - t.min) / (t.max - t.min) * 100
+    ), y = r(
+      () => t.formatValue ? t.formatValue(t.modelValue) : String(t.modelValue)
+    ), o = B(!1), S = `cui-slider-${C()}`, h = r(() => t.id || S);
+    function z(u) {
+      const a = parseFloat(u.target.value);
+      V("update:modelValue", a);
+    }
+    const w = ["sm", "md", "lg"], I = {
+      sm: { trackHeight: "4px", thumbSize: "16px", thumbIcon: "0.5rem", labelFont: "0.8125rem", valueFont: "0.75rem" },
+      md: { trackHeight: "6px", thumbSize: "20px", thumbIcon: "0.625rem", labelFont: "0.875rem", valueFont: "0.8125rem" },
+      lg: { trackHeight: "8px", thumbSize: "26px", thumbIcon: "0.75rem", labelFont: "1rem", valueFont: "0.875rem" }
+    }, l = r(() => I[j(t.size, w)]), k = r(() => t.disabled ? "var(--cui-text-tertiary)" : `var(--cui-${t.color})`), p = r(() => t.disabled ? "var(--cui-text-tertiary)" : `var(--cui-${t.color})`), b = E("inputEl");
+    function F(u) {
+      var a;
+      (a = b.value) == null || a.focus(u);
+    }
+    function $() {
+      var u;
+      (u = b.value) == null || u.blur();
+    }
+    return g({ el: b, focus: F, blur: $ }), (u, a) => D((s(), d("div", {
+      class: "cui-slider",
+      style: i({ opacity: e.disabled ? 0.5 : 1, "--_slider-focus-ring": `var(--cui-${e.color}-focus-ring)` })
+    }, [
+      e.label || e.showValue ? (s(), d("div", L, [
+        e.label ? (s(), d("label", {
+          key: 0,
+          for: h.value,
+          style: i({ fontSize: l.value.labelFont, fontWeight: "500", color: "var(--cui-text-secondary)" })
+        }, c(e.label), 13, M)) : m("", !0),
+        e.showValue ? (s(), d("span", {
+          key: 1,
+          style: i({ fontSize: l.value.valueFont, fontWeight: "600", color: "var(--cui-text-body)", fontVariantNumeric: "tabular-nums" })
+        }, c(y.value), 5)) : m("", !0)
+      ])) : m("", !0),
+      n("div", {
+        style: i({ position: "relative", height: l.value.thumbSize, display: "flex", alignItems: "center" })
+      }, [
+        n("div", {
+          style: i({
+            position: "absolute",
+            left: "0",
+            right: "0",
+            height: l.value.trackHeight,
+            borderRadius: "9999px",
+            background: "var(--cui-border)"
+          })
+        }, null, 4),
+        n("div", {
+          style: i({
+            position: "absolute",
+            left: "0",
+            height: l.value.trackHeight,
+            width: `${v.value}%`,
+            borderRadius: "9999px",
+            background: p.value,
+            transition: o.value ? "none" : "width 0.1s ease"
+          })
+        }, null, 4),
+        n("input", {
+          ref: "inputEl",
+          id: h.value,
+          name: e.name,
+          autocomplete: e.autocomplete,
+          "aria-describedby": e.ariaDescribedby,
+          "aria-required": e.ariaRequired || void 0,
+          "aria-labelledby": e.ariaLabelledby,
+          "aria-valuetext": e.formatValue ? y.value : void 0,
+          class: "cui-slider__input",
+          type: "range",
+          value: e.modelValue,
+          min: e.min,
+          max: e.max,
+          step: e.step,
+          disabled: e.disabled,
+          style: i({
+            position: "absolute",
+            left: "0",
+            width: "100%",
+            height: "100%",
+            margin: "0",
+            opacity: "0",
+            cursor: e.disabled ? "default" : "pointer",
+            zIndex: 3
+          }),
+          onInput: z,
+          onMousedown: a[0] || (a[0] = (f) => o.value = !0),
+          onMouseup: a[1] || (a[1] = (f) => o.value = !1),
+          onTouchstart: a[2] || (a[2] = (f) => o.value = !0),
+          onTouchend: a[3] || (a[3] = (f) => o.value = !1)
+        }, null, 44, P),
+        n("div", {
+          class: "cui-slider__thumb",
+          style: i({
+            position: "absolute",
+            left: `${v.value}%`,
+            transform: "translateX(-50%)",
+            width: l.value.thumbSize,
+            height: l.value.thumbSize,
+            borderRadius: "50%",
+            background: k.value,
+            border: "2px solid var(--cui-surface-base, white)",
+            boxShadow: o.value ? "0 2px 8px rgba(0,0,0,0.25)" : "0 1px 3px rgba(0,0,0,0.15)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            color: "var(--cui-surface-base, white)",
+            transition: o.value ? "none" : "left 0.1s ease, box-shadow 0.15s ease, transform 0.15s ease",
+            pointerEvents: "none",
+            zIndex: 2
+          })
+        }, [
+          H(u.$slots, "thumb", {}, () => [
+            e.thumbIcon ? (s(), q(N, {
+              key: 0,
+              name: e.thumbIcon,
+              size: l.value.thumbIcon
+            }, null, 8, ["name", "size"])) : m("", !0)
+          ], !0)
+        ], 4)
+      ], 4),
+      e.showRange ? (s(), d("div", W, [
+        n("span", {
+          style: i({ fontSize: l.value.valueFont, color: "var(--cui-text-tertiary)" })
+        }, c(e.formatValue ? e.formatValue(e.min) : e.min), 5),
+        n("span", {
+          style: i({ fontSize: l.value.valueFont, color: "var(--cui-text-tertiary)" })
+        }, c(e.formatValue ? e.formatValue(e.max) : e.max), 5)
+      ])) : m("", !0)
+    ], 4)), [
+      [T, !e.hidden]
+    ]);
+  }
+});
 export {
-  f as default
+  Z as default
 };

package/dist/components/CuiTabs.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CuiTabs.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiTabs.vue"],"names":[],"mappings":"AA4fA,OAAO,EAGL,KAAK,UAAU,EACf,KAAK,cAAc,EACnB,KAAK,aAAa,EACnB,MAAM,gBAAgB,CAAC;AACxB,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGrE,MAAM,WAAW,YAAa,SAAQ,aAAa,EAAE,cAAc;IACjE,uBAAuB;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oBAAoB;IACpB,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB,yBAAyB;IACzB,WAAW,CAAC,EAAE,cAAc,CAAC;IAC7B,sCAAsC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iCAAiC;IACjC,UAAU,CAAC,EAAE,aAAa,CAAC;CAC5B;AA4WD,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAgC/C,QAAA,MAAM,eAAe;;;;;;;;;aArZT,UAAU;iBAEN,cAAc;gBAIf,aAAa;eAFd,OAAO;6EAyZnB,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAa1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"CuiTabs.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiTabs.vue"],"names":[],"mappings":"AA8gBA,OAAO,EAGL,KAAK,UAAU,EACf,KAAK,cAAc,EACnB,KAAK,aAAa,EACnB,MAAM,gBAAgB,CAAC;AACxB,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGrE,MAAM,WAAW,YAAa,SAAQ,aAAa,EAAE,cAAc;IACjE,uBAAuB;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oBAAoB;IACpB,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB,yBAAyB;IACzB,WAAW,CAAC,EAAE,cAAc,CAAC;IAC7B,sCAAsC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iCAAiC;IACjC,UAAU,CAAC,EAAE,aAAa,CAAC;CAC5B;AAyXD,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAgC/C,QAAA,MAAM,eAAe;;;;;;;;;aAlaT,UAAU;iBAEN,cAAc;gBAIf,aAAa;eAFd,OAAO;6EAsanB,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAa1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/CuiTabs.vue.js

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

package/dist/components/CuiTabs.vue2.js

@@ -1,8 +1,8 @@
-import { defineComponent as H, ref as b, watch as _, provide as K, toRef as m, onMounted as M, nextTick as S, onBeforeUnmount as N, computed as L, withDirectives as O, openBlock as v, createElementBlock as h, normalizeClass as T, createElementVNode as k, Fragment as $, renderList as U, normalizeStyle as W, createBlock as q, resolveDynamicComponent as F, createTextVNode as j, toDisplayString as G, withModifiers as J, unref as P, createVNode as Q, createCommentVNode as X, renderSlot as Y, vShow as Z } from "vue";
-import ee from "./CuiIcon.vue.js";
-import { TabsContextKey as te } from "./tabs-context.js";
-import { useMessages as ae } from "../composables/useMessages.js";
-const oe = { class: "cui-tabs__bar-outer" }, le = ["aria-orientation", "data-overflow"], ne = ["data-cui-tab-value", "aria-selected", "aria-disabled", "tabindex", "onClick"], ie = { class: "cui-tabs__tab-content" }, re = ["aria-label", "onClick"], ue = { class: "cui-tabs__panels" }, fe = /* @__PURE__ */ H({
+import { defineComponent as M, ref as b, watch as _, provide as N, toRef as m, onMounted as L, nextTick as z, onBeforeUnmount as O, computed as U, withDirectives as W, openBlock as v, createElementBlock as h, normalizeClass as T, createElementVNode as k, Fragment as A, renderList as q, normalizeStyle as F, createBlock as j, resolveDynamicComponent as G, createTextVNode as J, toDisplayString as P, withModifiers as Q, unref as X, createVNode as Y, createCommentVNode as Z, renderSlot as ee, vShow as te } from "vue";
+import ae from "./CuiIcon.vue.js";
+import { TabsContextKey as oe } from "./tabs-context.js";
+import { useMessages as le } from "../composables/useMessages.js";
+const ne = { class: "cui-tabs__bar-outer" }, ie = ["aria-orientation", "data-overflow"], re = ["data-cui-tab-value", "aria-selected", "aria-disabled", "tabindex", "onClick"], se = { class: "cui-tabs__tab-content" }, ue = ["aria-label", "onClick"], ce = { class: "cui-tabs__panels" }, me = /* @__PURE__ */ M({
   __name: "CuiTabs",
   props: {
     modelValue: {},
@@ -14,29 +14,29 @@ const oe = { class: "cui-tabs__bar-outer" }, le = ["aria-orientation", "data-ove
     color: { default: "primary" }
   },
   emits: ["update:modelValue", "close"],
-  setup(r, { emit: A }) {
-    const n = r, x = A, o = b(n.modelValue ?? ""), p = b(""), l = b([]), f = b(null);
+  setup(i, { emit: D }) {
+    const n = i, g = D, o = b(n.modelValue ?? ""), p = b(""), l = b([]), f = b(null);
     _(
       () => n.modelValue,
       (e) => {
         e !== void 0 && e !== o.value && (p.value = o.value, o.value = e);
       }
     );
-    function D(e) {
+    function B(e) {
       const a = l.value.findIndex((t) => t.value === e.value);
-      a >= 0 ? l.value[a] = e : l.value.push(e), !o.value && !e.disabled && (o.value = e.value, x("update:modelValue", e.value));
+      a >= 0 ? l.value[a] = e : l.value.push(e), !o.value && !e.disabled && (o.value = e.value, g("update:modelValue", e.value));
     }
-    function B(e) {
+    function E(e) {
       l.value = l.value.filter((a) => a.value !== e);
     }
-    function w(e) {
+    function x(e) {
       const a = l.value.find((t) => t.value === e);
-      a != null && a.disabled || (p.value = o.value, o.value = e, x("update:modelValue", e));
+      a != null && a.disabled || (p.value = o.value, o.value = e, g("update:modelValue", e));
     }
-    function V(e) {
-      x("close", e);
+    function C(e) {
+      g("close", e);
     }
-    K(te, {
+    N(oe, {
       activeTab: o,
       variant: m(n, "variant"),
       orientation: m(n, "orientation"),
@@ -44,73 +44,77 @@ const oe = { class: "cui-tabs__bar-outer" }, le = ["aria-orientation", "data-ove
       keepAlive: m(n, "keepAlive"),
       transition: m(n, "transition"),
       previousTab: p,
-      register: D,
-      unregister: B,
-      activate: w,
-      close: V
+      register: B,
+      unregister: E,
+      activate: x,
+      close: C
     });
-    function E(e) {
-      const a = l.value.filter((d) => !d.disabled), t = a.findIndex((d) => d.value === o.value);
+    function R(e) {
+      const a = l.value.filter((u) => !u.disabled), t = a.findIndex((u) => u.value === o.value);
       if (t < 0) return;
-      const u = n.orientation === "horizontal", y = u ? "ArrowRight" : "ArrowDown", I = u ? "ArrowLeft" : "ArrowUp";
-      let i = -1;
-      e.key === y ? (e.preventDefault(), i = t < a.length - 1 ? t + 1 : 0) : e.key === I ? (e.preventDefault(), i = t > 0 ? t - 1 : a.length - 1) : e.key === "Home" ? (e.preventDefault(), i = 0) : e.key === "End" && (e.preventDefault(), i = a.length - 1), i >= 0 && (w(a[i].value), S(() => {
-        var d;
-        (d = C(a[i].value)) == null || d.focus();
-      }));
+      const s = n.orientation === "horizontal", y = s ? "ArrowRight" : "ArrowDown", V = s ? "ArrowLeft" : "ArrowUp";
+      let r = -1;
+      if (e.key === y ? (e.preventDefault(), r = t < a.length - 1 ? t + 1 : 0) : e.key === V ? (e.preventDefault(), r = t > 0 ? t - 1 : a.length - 1) : e.key === "Home" ? (e.preventDefault(), r = 0) : e.key === "End" && (e.preventDefault(), r = a.length - 1), r >= 0) {
+        const u = a[r].value, K = u !== o.value;
+        x(u), z(() => {
+          var $;
+          ($ = S(u)) == null || $.focus({ preventScroll: !0 }), K || I();
+        });
+      }
     }
-    function C(e) {
-      var a;
-      return ((a = f.value) == null ? void 0 : a.querySelector(`[data-cui-tab-value="${e}"]`)) ?? null;
+    function S(e) {
+      var t;
+      const a = e.replace(/["\\]/g, "\\$&");
+      return ((t = f.value) == null ? void 0 : t.querySelector(`[data-cui-tab-value="${a}"]`)) ?? null;
     }
-    const g = b("none");
-    function s() {
+    const w = b("none");
+    function c() {
       const e = f.value;
       if (!e) return;
-      const a = n.orientation === "horizontal", t = a ? e.clientWidth : e.clientHeight, u = a ? e.scrollWidth : e.scrollHeight, y = Math.abs(a ? e.scrollLeft : e.scrollTop);
-      if (u - t <= 1) {
-        g.value = "none";
+      const a = n.orientation === "horizontal", t = a ? e.clientWidth : e.clientHeight, s = a ? e.scrollWidth : e.scrollHeight, y = Math.abs(a ? e.scrollLeft : e.scrollTop);
+      if (s - t <= 1) {
+        w.value = "none";
         return;
       }
-      const I = y <= 1, i = y >= u - t - 1;
-      g.value = I ? "end" : i ? "start" : "both";
+      const V = y <= 1, r = y >= s - t - 1;
+      w.value = V ? "end" : r ? "start" : "both";
     }
-    function z() {
+    function I() {
       var e, a;
-      (a = (e = C(o.value)) == null ? void 0 : e.scrollIntoView) == null || a.call(e, { inline: "nearest", block: "nearest" });
+      (a = (e = S(o.value)) == null ? void 0 : e.scrollIntoView) == null || a.call(e, { inline: "nearest", block: "nearest" });
     }
-    let c;
-    M(() => {
-      S(() => {
-        z(), s();
-      }), typeof ResizeObserver < "u" && f.value && (c = new ResizeObserver(s), c.observe(f.value));
-    }), N(() => {
-      c == null || c.disconnect(), c = void 0;
+    let d;
+    L(() => {
+      z(() => {
+        I(), c();
+      }), typeof ResizeObserver < "u" && f.value && (d = new ResizeObserver(c), d.observe(f.value));
+    }), O(() => {
+      d == null || d.disconnect(), d = void 0;
     }), _(o, () => {
-      z(), s();
-    }, { flush: "post" }), _(() => l.value.length, s, { flush: "post" }), _(() => n.orientation, s, { flush: "post" }), L(() => {
+      I(), c();
+    }, { flush: "post" }), _(() => l.value.length, c, { flush: "post" }), _(() => n.orientation, c, { flush: "post" }), U(() => {
       const e = l.value.findIndex((t) => t.value === p.value);
       return l.value.findIndex((t) => t.value === o.value) >= e ? "left" : "right";
     });
-    const R = ae();
-    return (e, a) => O((v(), h("div", {
+    const H = le();
+    return (e, a) => W((v(), h("div", {
       class: T(["cui-tabs", [
-        `cui-tabs--${r.variant}`,
-        `cui-tabs--${r.orientation}`
+        `cui-tabs--${i.variant}`,
+        `cui-tabs--${i.orientation}`
       ]])
     }, [
-      k("div", oe, [
+      k("div", ne, [
         k("div", {
           ref_key: "barRef",
           ref: f,
           class: "cui-tabs__bar",
           role: "tablist",
-          "aria-orientation": r.orientation,
-          "data-overflow": g.value,
-          onKeydown: E,
-          onScroll: s
+          "aria-orientation": i.orientation,
+          "data-overflow": w.value,
+          onKeydown: R,
+          onScroll: c
         }, [
-          (v(!0), h($, null, U(l.value, (t) => (v(), h("button", {
+          (v(!0), h(A, null, q(l.value, (t) => (v(), h("button", {
             key: t.value,
             type: "button",
             "data-cui-tab-value": t.value,
@@ -118,46 +122,46 @@ const oe = { class: "cui-tabs__bar-outer" }, le = ["aria-orientation", "data-ove
               "cui-tabs__tab--active": o.value === t.value,
               "cui-tabs__tab--disabled": t.disabled
             }]),
-            style: W({
-              "--_tab-color": `var(--cui-${r.color})`,
-              "--_tab-hover": `var(--cui-${r.color}-hover)`,
-              "--_tab-bg": `var(--cui-${r.color}-bg)`
+            style: F({
+              "--_tab-color": `var(--cui-${i.color})`,
+              "--_tab-hover": `var(--cui-${i.color}-hover)`,
+              "--_tab-bg": `var(--cui-${i.color}-bg)`
             }),
             role: "tab",
             "aria-selected": o.value === t.value,
             "aria-disabled": t.disabled || void 0,
             tabindex: o.value === t.value ? 0 : -1,
-            onClick: (u) => w(t.value)
+            onClick: (s) => x(t.value)
           }, [
-            k("span", ie, [
-              t.labelSlot ? (v(), q(F(t.labelSlot), { key: 0 })) : (v(), h($, { key: 1 }, [
-                j(G(t.label), 1)
+            k("span", se, [
+              t.labelSlot ? (v(), j(G(t.labelSlot), { key: 0 })) : (v(), h(A, { key: 1 }, [
+                J(P(t.label), 1)
               ], 64))
             ]),
             t.closeable ? (v(), h("button", {
               key: 0,
               type: "button",
               class: "cui-tabs__tab-close",
-              "aria-label": P(R).tabs.closeTab,
+              "aria-label": X(H).tabs.closeTab,
               tabindex: "-1",
-              onClick: J((u) => V(t.value), ["stop"])
+              onClick: Q((s) => C(t.value), ["stop"])
             }, [
-              Q(ee, {
+              Y(ae, {
                 name: "x",
                 size: "0.75rem"
               })
-            ], 8, re)) : X("", !0)
-          ], 14, ne))), 128))
-        ], 40, le)
+            ], 8, ue)) : Z("", !0)
+          ], 14, re))), 128))
+        ], 40, ie)
       ]),
-      k("div", ue, [
-        Y(e.$slots, "default", {}, void 0, !0)
+      k("div", ce, [
+        ee(e.$slots, "default", {}, void 0, !0)
       ])
     ], 2)), [
-      [Z, !r.hidden]
+      [te, !i.hidden]
     ]);
   }
 });
 export {
-  fe as default
+  me as default
 };

package/dist/components/CuiTagInput.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CuiTagInput.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiTagInput.vue"],"names":[],"mappings":"AAihBA,OAAO,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB,EAAE,UAAU,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAOzJ,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,gBAAiB,SAAQ,kBAAkB,EAAE,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB;IAC1H,oBAAoB;IACpB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,iCAAiC;IACjC,WAAW,CAAC,EAAE,SAAS,EAAE,CAAC;IAC1B,mCAAmC;IACnC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,SAAS,EAAE,CAAC,CAAC;IAC3D,0DAA0D;IAC1D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kBAAkB;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,oBAAoB;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0BAA0B;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,qDAAqD;IACrD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oBAAoB;IACpB,OAAO,CAAC,EAAE,UAAU,CAAC;CACtB;AA2PD,iBAAS,KAAK,CAAC,IAAI,CAAC,EAAE,YAAY,QAGjC;AAED,iBAAS,IAAI,SAEZ;AAkOD,QAAA,IAAI,QAAQ;;CAAY,CAAE;AAC1B,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAmDnD,QAAA,MAAM,eAAe;;;;;;;;;WApiBX,OAAO;YAQN,OAAO;;;aAEN,UAAU;;iBAdN,MAAM;gBAdP,MAAM,EAAE;cAQV,MAAM;cAEN,MAAM;iBARH,SAAS,EAAE;iBAIX,OAAO;aAMX,MAAM;uBAUI,MAAM;gBAEb,MAAM;6EAuiBnB,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAa1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"CuiTagInput.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiTagInput.vue"],"names":[],"mappings":"AAyhBA,OAAO,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB,EAAE,UAAU,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAOzJ,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,gBAAiB,SAAQ,kBAAkB,EAAE,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB;IAC1H,oBAAoB;IACpB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,iCAAiC;IACjC,WAAW,CAAC,EAAE,SAAS,EAAE,CAAC;IAC1B,mCAAmC;IACnC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,SAAS,EAAE,CAAC,CAAC;IAC3D,0DAA0D;IAC1D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kBAAkB;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,oBAAoB;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0BAA0B;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,qDAAqD;IACrD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oBAAoB;IACpB,OAAO,CAAC,EAAE,UAAU,CAAC;CACtB;AAmQD,iBAAS,KAAK,CAAC,IAAI,CAAC,EAAE,YAAY,QAGjC;AAED,iBAAS,IAAI,SAEZ;AAkOD,QAAA,IAAI,QAAQ;;CAAY,CAAE;AAC1B,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAmDnD,QAAA,MAAM,eAAe;;;;;;;;;WA5iBX,OAAO;YAQN,OAAO;;;aAEN,UAAU;;iBAdN,MAAM;gBAdP,MAAM,EAAE;cAQV,MAAM;cAEN,MAAM;iBARH,SAAS,EAAE;iBAIX,OAAO;aAMX,MAAM;uBAUI,MAAM;gBAEb,MAAM;6EA+iBnB,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAa1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/CuiTagInput.vue.js

@@ -1,7 +1,7 @@
 import o from "./CuiTagInput.vue2.js";
 /* empty css                 */
 import t from "../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-ca6016d3"]]);
+const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-532a086a"]]);
 export {
   m as default
 };