@itguy614/clean-ui 0.3.1 → 1.0.0

package/dist/components/CuiCombobox.vue.js

@@ -0,0 +1,332 @@
+import { defineComponent as ue, ref as v, computed as w, watch as L, onMounted as se, onUnmounted as ce, nextTick as V, withDirectives as de, openBlock as n, createElementBlock as s, toDisplayString as p, createCommentVNode as m, createElementVNode as C, normalizeStyle as b, Fragment as j, renderList as K, createBlock as k, withCtx as ve, createTextVNode as me, Teleport as fe, createVNode as ge, unref as Y, withModifiers as ye, renderSlot as he, vShow as pe } from "vue";
+import { clampSize as be, scaleDensity as o } from "../utils/sizing.js";
+import A from "./CuiIcon.vue.js";
+import xe from "./CuiBadge.vue.js";
+import { useMessages as we } from "../composables/useMessages.js";
+import Z from "./CuiSpinner.vue.js";
+/* empty css                */
+const ke = {
+  key: 0,
+  style: { display: "block", marginBottom: "calc(0.25rem * var(--cui-density-scale, 1))", fontSize: "0.875rem", fontWeight: "500", color: "var(--cui-text-secondary)" }
+}, Se = ["src"], ze = ["value", "placeholder", "disabled"], $e = { style: { display: "flex", alignItems: "center", gap: "calc(0.25rem * var(--cui-density-scale, 1))", flexShrink: "0" } }, Ce = {
+  key: 1,
+  style: { fontSize: "0.75rem", color: "var(--cui-error)", marginTop: "calc(0.25rem * var(--cui-density-scale, 1))" }
+}, Re = {
+  key: 0,
+  style: { padding: "calc(1rem * var(--cui-density-scale, 1))", textAlign: "center" }
+}, Oe = {
+  key: 1,
+  style: { padding: "calc(0.75rem * var(--cui-density-scale, 1))", textAlign: "center", fontSize: "0.8125rem", color: "var(--cui-text-tertiary)" }
+}, Te = {
+  key: 2,
+  style: { padding: "calc(0.75rem * var(--cui-density-scale, 1))", textAlign: "center", fontSize: "0.8125rem", color: "var(--cui-text-tertiary)" }
+}, Ve = ["data-index", "onClick", "onMouseenter"], Be = ["src"], Me = { style: { flex: "1", minWidth: "0" } }, De = {
+  key: 0,
+  style: { fontSize: "0.75rem", color: "var(--cui-text-tertiary)", lineHeight: "1.3", marginTop: "calc(0.0625rem * var(--cui-density-scale, 1))" }
+}, Ne = /* @__PURE__ */ ue({
+  __name: "CuiCombobox",
+  props: {
+    modelValue: {},
+    options: { default: () => [] },
+    multiple: { type: Boolean, default: !1 },
+    placeholder: { default: "Search..." },
+    fetchOptions: {},
+    debounce: { default: 300 },
+    minChars: { default: 0 },
+    maxVisible: { default: 8 },
+    loading: { type: Boolean, default: !1 },
+    label: {},
+    error: { type: Boolean, default: !1 },
+    errorMessage: {},
+    noResultsText: { default: "No results found" },
+    rounded: { default: "md" },
+    hidden: { type: Boolean, default: !1 },
+    color: { default: "primary" },
+    size: { default: "md" },
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue", "search"],
+  setup(l, { expose: G, emit: J }) {
+    const r = l, Q = {
+      none: "0",
+      sm: "0.25rem",
+      md: "var(--cui-button-radius, 0.375rem)",
+      lg: "0.5rem",
+      full: "9999px"
+    }, R = J, u = v(""), c = v(!1), d = v(-1), B = v(!1), O = v([]), f = v(null), M = v(null), S = v(null), I = v({});
+    let z = null;
+    const g = w(() => r.modelValue == null ? /* @__PURE__ */ new Set() : Array.isArray(r.modelValue) ? new Set(r.modelValue) : /* @__PURE__ */ new Set([r.modelValue])), $ = v([]);
+    L(() => r.options, (e) => {
+      for (const a of e)
+        $.value.find((t) => t.value === a.value) || $.value.push(a);
+    }, { immediate: !0 }), L(O, (e) => {
+      for (const a of e)
+        $.value.find((t) => t.value === a.value) || $.value.push(a);
+    });
+    const y = w(
+      () => [...g.value].map((e) => $.value.find((a) => a.value === e)).filter(Boolean)
+    ), h = w(() => {
+      const e = r.fetchOptions ? O.value : r.options;
+      if (!u.value || r.fetchOptions) return e;
+      const a = u.value.toLowerCase();
+      return e.filter(
+        (t) => t.label.toLowerCase().includes(a) || t.description && t.description.toLowerCase().includes(a)
+      );
+    }), P = w(() => r.loading || B.value), X = ["sm", "md", "lg"], _ = {
+      sm: { fontSize: "0.8125rem", padding: `${o("0.25rem")} ${o("0.5rem")}`, tagSize: "sm", itemPadding: `${o("0.375rem")} ${o("0.625rem")}`, inputHeight: o("2rem") },
+      md: { fontSize: "0.875rem", padding: `${o("0.3125rem")} ${o("0.625rem")}`, tagSize: "sm", itemPadding: `${o("0.5rem")} ${o("0.75rem")}`, inputHeight: o("2.375rem") },
+      lg: { fontSize: "0.9375rem", padding: `${o("0.4375rem")} ${o("0.75rem")}`, tagSize: "md", itemPadding: `${o("0.625rem")} ${o("0.875rem")}`, inputHeight: o("2.75rem") }
+    }, x = w(() => _[be(r.size, X)]);
+    function T() {
+      if (!S.value) return;
+      const e = S.value.getBoundingClientRect(), a = window.innerHeight, t = a - e.bottom, i = e.top, E = Math.min(320, Math.max(t, i) - 16), oe = t < 200 && i > t, H = {
+        position: "fixed",
+        zIndex: "9990",
+        left: `${e.left}px`,
+        width: `${e.width}px`,
+        maxHeight: `${E}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))"
+      };
+      oe ? H.bottom = `${a - e.top + 4}px` : H.top = `${e.bottom + 4}px`, I.value = H;
+    }
+    function ee(e) {
+      if (u.value = e.target.value, d.value = -1, c.value || D(), R("search", u.value), r.fetchOptions) {
+        if (u.value.length < r.minChars) {
+          O.value = [];
+          return;
+        }
+        z && clearTimeout(z), z = setTimeout(async () => {
+          B.value = !0;
+          try {
+            O.value = await r.fetchOptions(u.value);
+          } finally {
+            B.value = !1;
+          }
+        }, r.debounce);
+      }
+    }
+    function F(e) {
+      var a;
+      if (!e.disabled)
+        if (r.multiple) {
+          const t = new Set(g.value);
+          t.has(e.value) ? t.delete(e.value) : t.add(e.value), R("update:modelValue", [...t]), u.value = "", V(() => {
+            var i;
+            return (i = f.value) == null ? void 0 : i.focus();
+          });
+        } else
+          R("update:modelValue", e.value), u.value = "", c.value = !1, (a = f.value) == null || a.blur();
+    }
+    function N(e) {
+      if (r.disabled) return;
+      const a = [...g.value];
+      R("update:modelValue", a.filter((t) => t !== e)), V(() => {
+        var t;
+        return (t = f.value) == null ? void 0 : t.focus();
+      });
+    }
+    function te(e) {
+      if (e.key === "ArrowDown") {
+        if (e.preventDefault(), !c.value) {
+          D();
+          return;
+        }
+        d.value = Math.min(d.value + 1, h.value.length - 1), W();
+      } else e.key === "ArrowUp" ? (e.preventDefault(), d.value = Math.max(d.value - 1, 0), W()) : e.key === "Enter" ? (e.preventDefault(), d.value >= 0 && d.value < h.value.length && F(h.value[d.value])) : e.key === "Escape" ? c.value = !1 : e.key === "Backspace" && !u.value && r.multiple && y.value.length > 0 && N(y.value[y.value.length - 1].value);
+    }
+    function W() {
+      V(() => {
+        var e, a;
+        (a = (e = M.value) == null ? void 0 : e.querySelector(`[data-index="${d.value}"]`)) == null || a.scrollIntoView({ block: "nearest" });
+      });
+    }
+    function D() {
+      r.disabled || (c.value = !0, T());
+    }
+    function ae() {
+      D();
+    }
+    function q(e) {
+      var t, i;
+      const a = e.target;
+      (t = S.value) != null && t.contains(a) || (i = M.value) != null && i.contains(a) || (c.value = !1);
+    }
+    se(() => {
+      document.addEventListener("mousedown", q), window.addEventListener("scroll", () => {
+        c.value && T();
+      }, !0), window.addEventListener("resize", () => {
+        c.value && T();
+      });
+    }), ce(() => {
+      document.removeEventListener("mousedown", q), z && clearTimeout(z);
+    });
+    const le = w(() => r.multiple ? "" : y.value.length > 0 ? y.value[0].label : "");
+    L(c, (e) => {
+      e || (u.value = ""), e && V(T);
+    });
+    function re(e) {
+      var a;
+      (a = f.value) == null || a.focus(e);
+    }
+    function ne() {
+      var e;
+      (e = f.value) == null || e.blur();
+    }
+    G({ el: S, focus: re, blur: ne });
+    function ie(e, a) {
+      const t = g.value.has(a.value), i = d.value === e;
+      return {
+        display: "flex",
+        alignItems: "center",
+        gap: "calc(0.5rem * var(--cui-density-scale, 1))",
+        padding: x.value.itemPadding,
+        cursor: a.disabled ? "default" : "pointer",
+        fontSize: x.value.fontSize,
+        color: a.disabled ? "var(--cui-text-tertiary)" : "var(--cui-text-body)",
+        opacity: a.disabled ? "0.5" : "1",
+        background: i ? "var(--cui-primary-bg)" : t ? "color-mix(in srgb, var(--cui-primary-bg) 50%, transparent)" : "transparent",
+        transition: "background 0.1s ease",
+        borderRadius: "0.25rem"
+      };
+    }
+    const U = we();
+    return (e, a) => de((n(), s("div", {
+      ref_key: "wrapperRef",
+      ref: S,
+      style: { position: "relative" }
+    }, [
+      l.label ? (n(), s("label", ke, p(l.label), 1)) : m("", !0),
+      C("div", {
+        style: b({
+          display: "flex",
+          flexWrap: "wrap",
+          alignItems: "center",
+          gap: "calc(0.25rem * var(--cui-density-scale, 1))",
+          padding: x.value.padding,
+          border: `1px solid ${l.error ? "var(--cui-error)" : "var(--cui-border-strong, var(--cui-border))"}`,
+          borderRadius: Q[l.rounded],
+          background: "var(--cui-surface-base, white)",
+          cursor: l.disabled ? "default" : "text",
+          opacity: l.disabled ? "0.5" : "1",
+          minHeight: x.value.inputHeight
+        }),
+        onClick: a[0] || (a[0] = (t) => {
+          var i;
+          return (i = f.value) == null ? void 0 : i.focus();
+        })
+      }, [
+        (n(!0), s(j, null, K(l.multiple ? y.value : [], (t) => (n(), k(xe, {
+          key: String(t.value),
+          color: l.color,
+          size: x.value.tagSize,
+          removable: "",
+          onRemove: (i) => N(t.value)
+        }, {
+          default: ve(() => [
+            t.image ? (n(), s("img", {
+              key: 0,
+              src: t.image,
+              style: { width: "1rem", height: "1rem", borderRadius: "50%", objectFit: "cover", marginRight: "calc(0.125rem * var(--cui-density-scale, 1))" }
+            }, null, 8, Se)) : m("", !0),
+            me(" " + p(t.label), 1)
+          ]),
+          _: 2
+        }, 1032, ["color", "size", "onRemove"]))), 128)),
+        C("input", {
+          ref_key: "inputRef",
+          ref: f,
+          value: c.value ? u.value : le.value,
+          placeholder: y.value.length > 0 ? "" : l.placeholder,
+          disabled: l.disabled,
+          style: b({
+            flex: "1",
+            minWidth: "4rem",
+            border: "none",
+            outline: "none",
+            background: "transparent",
+            fontSize: x.value.fontSize,
+            color: "var(--cui-text-body)",
+            padding: "calc(0.125rem * var(--cui-density-scale, 1)) 0",
+            fontFamily: "inherit"
+          }),
+          onInput: ee,
+          onFocus: ae,
+          onKeydown: te
+        }, null, 44, ze),
+        C("div", $e, [
+          P.value ? (n(), k(Z, {
+            key: 0,
+            size: "xs"
+          })) : (n(), k(A, {
+            key: 1,
+            name: "caret-down",
+            size: "0.875rem",
+            style: b({ color: "var(--cui-text-tertiary)", transform: c.value ? "rotate(180deg)" : "none", transition: "transform 0.15s ease" })
+          }, null, 8, ["style"]))
+        ])
+      ], 4),
+      l.error && l.errorMessage ? (n(), s("div", Ce, p(l.errorMessage), 1)) : m("", !0),
+      (n(), k(fe, { to: "body" }, [
+        c.value ? (n(), s("div", {
+          key: 0,
+          ref_key: "dropdownRef",
+          ref: M,
+          style: b(I.value)
+        }, [
+          P.value && h.value.length === 0 ? (n(), s("div", Re, [
+            ge(Z, {
+              size: "sm",
+              "show-label": "",
+              label: Y(U).combobox.searching
+            }, null, 8, ["label"])
+          ])) : h.value.length === 0 && (u.value.length >= l.minChars || !l.fetchOptions) ? (n(), s("div", Oe, p(l.noResultsText), 1)) : h.value.length === 0 && l.fetchOptions && u.value.length < l.minChars ? (n(), s("div", Te, p(Y(U).combobox.typeMore(l.minChars - u.value.length)), 1)) : m("", !0),
+          (n(!0), s(j, null, K(h.value, (t, i) => (n(), s("div", {
+            key: String(t.value),
+            "data-index": i,
+            style: b(ie(i, t)),
+            onClick: ye((E) => F(t), ["stop"]),
+            onMouseenter: (E) => d.value = i
+          }, [
+            he(e.$slots, "option", {
+              option: t,
+              selected: g.value.has(t.value)
+            }, () => [
+              t.image ? (n(), s("img", {
+                key: 0,
+                src: t.image,
+                style: { width: "1.75rem", height: "1.75rem", borderRadius: "50%", objectFit: "cover", flexShrink: "0" }
+              }, null, 8, Be)) : t.icon ? (n(), k(A, {
+                key: 1,
+                name: t.icon,
+                size: "1rem",
+                style: { flexShrink: "0", color: "var(--cui-text-secondary)" }
+              }, null, 8, ["name"])) : m("", !0),
+              C("div", Me, [
+                C("div", {
+                  style: b({ lineHeight: "1.3", fontWeight: g.value.has(t.value) ? "600" : "400" })
+                }, p(t.label), 5),
+                t.description ? (n(), s("div", De, p(t.description), 1)) : m("", !0)
+              ]),
+              g.value.has(t.value) ? (n(), k(A, {
+                key: 2,
+                name: "check",
+                size: "0.875rem",
+                style: b({ color: `var(--cui-${l.color})`, flexShrink: "0" })
+              }, null, 8, ["style"])) : m("", !0)
+            ])
+          ], 44, Ve))), 128))
+        ], 4)) : m("", !0)
+      ]))
+    ], 512)), [
+      [pe, !l.hidden]
+    ]);
+  }
+});
+export {
+  Ne as default
+};

package/dist/components/CuiCombobox.vue2.js

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

package/dist/components/CuiConfigProvider.vue.d.ts

@@ -0,0 +1,22 @@
+import { type DeepPartialMessages } from "../messages";
+export interface CuiConfigProviderProps {
+    /**
+     * Partial overrides for the default (English) message catalog. Only the keys
+     * you supply are replaced; everything else falls back to the defaults (or a
+     * parent provider's values when nested).
+     */
+    messages?: DeepPartialMessages;
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<CuiConfigProviderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CuiConfigProviderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=CuiConfigProvider.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CuiConfigProvider.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiConfigProvider.vue"],"names":[],"mappings":"AAgCA,OAAO,EAAoD,KAAK,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAEzG,MAAM,WAAW,sBAAsB;IACrC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,mBAAmB,CAAC;CAChC;AAwBD,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;AAkB/C,QAAA,MAAM,eAAe,wTAMnB,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAQ1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/CuiConfigProvider.vue.js

@@ -0,0 +1,18 @@
+import { defineComponent as m, inject as a, computed as p, provide as i, renderSlot as u } from "vue";
+import { CuiConfigKey as s } from "./config-context.js";
+import { mergeMessages as f, defaultMessages as c } from "../messages.js";
+const _ = /* @__PURE__ */ m({
+  __name: "CuiConfigProvider",
+  props: {
+    messages: {}
+  },
+  setup(o) {
+    const r = o, e = a(s, null), t = p(
+      () => f(e ? e.value : c, r.messages)
+    );
+    return i(s, t), (n, d) => u(n.$slots, "default");
+  }
+});
+export {
+  _ as default
+};

package/dist/components/CuiConfigProvider.vue2.js

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

package/dist/components/CuiConfirmDialog.vue.d.ts

@@ -1,7 +1,8 @@
+import type { HideableProps } from "../types/common";
 export type ConfirmDialogVariant = "danger" | "warning" | "info";
-export interface CuiConfirmDialogProps {
-    /** Control visibility */
-    modelValue?: boolean;
+export interface CuiConfirmDialogProps extends HideableProps {
+    /** Control visibility (v-model:visible) */
+    visible?: boolean;
     /** Dialog title */
     title?: string;
     /** Confirmation message */
@@ -20,29 +21,24 @@ export interface CuiConfirmDialogProps {
     icon?: string;
     /** Loading state on confirm button */
     loading?: boolean;
-    /** Hide the component */
-    hidden?: boolean;
 }
 declare var __VLS_12: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_12) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<CuiConfirmDialogProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: boolean) => any;
     cancel: () => any;
+    "update:visible": (value: boolean) => any;
     confirm: () => any;
 }, string, import("vue").PublicProps, Readonly<CuiConfirmDialogProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     onCancel?: (() => any) | undefined;
+    "onUpdate:visible"?: ((value: boolean) => any) | undefined;
     onConfirm?: (() => any) | undefined;
 }>, {
     hidden: boolean;
-    title: string;
     variant: ConfirmDialogVariant;
     loading: boolean;
-    modelValue: boolean;
-    confirmText: string;
-    cancelText: string;
+    visible: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

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

@@ -1 +1 @@
-{"version":3,"file":"CuiConfirmDialog.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiConfirmDialog.vue"],"names":[],"mappings":"AAmPA,MAAM,MAAM,oBAAoB,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;AAEjE,MAAM,WAAW,qBAAqB;IACpC,yBAAyB;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sDAAsD;IACtD,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B,0BAA0B;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yBAAyB;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qDAAqD;IACrD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yBAAyB;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAmTD,QAAA,IAAI,QAAQ,IAAY,CAAE;AAC1B,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAkChD,QAAA,MAAM,eAAe;;;;;;;;;YAxVV,OAAO;WAlBR,MAAM;aAIJ,oBAAoB;aAYpB,OAAO;gBAlBJ,OAAO;iBAQN,MAAM;gBAEP,MAAM;6EA0WnB,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":"CuiConfirmDialog.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiConfirmDialog.vue"],"names":[],"mappings":"AA+OA,OAAO,KAAK,EAAY,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAS/D,MAAM,MAAM,oBAAoB,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;AAEjE,MAAM,WAAW,qBAAsB,SAAQ,aAAa;IAC1D,2CAA2C;IAC3C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sDAAsD;IACtD,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B,0BAA0B;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yBAAyB;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qDAAqD;IACrD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAqTD,QAAA,IAAI,QAAQ,IAAY,CAAE;AAC1B,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAsChD,QAAA,MAAM,eAAe;;;;;;;;;;aA1WT,oBAAoB;aAYpB,OAAO;aAlBP,OAAO;6EAwXjB,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/CuiConfirmDialog.vue.js

@@ -0,0 +1,208 @@
+import { defineComponent as V, computed as l, ref as I, watch as R, openBlock as v, createBlock as N, withCtx as a, createElementVNode as o, normalizeStyle as h, createVNode as t, toDisplayString as s, createElementBlock as x, renderSlot as P, createTextVNode as g, createCommentVNode as C, unref as j, withKeys as H, createSlots as E } from "vue";
+import K from "./CuiModal.vue.js";
+import L from "./CuiModalBody.vue.js";
+import M from "./CuiModalFooter.vue.js";
+import k from "./CuiButton.vue.js";
+import U from "./CuiInput.vue.js";
+import w from "./CuiIcon.vue.js";
+import { useMessages as _ } from "../composables/useMessages.js";
+const q = { style: {
+  padding: "calc(1.25rem * var(--cui-density-scale, 1)) calc(1.5rem * var(--cui-density-scale, 1)) 0",
+  display: "flex",
+  alignItems: "flex-start",
+  gap: "calc(0.875rem * var(--cui-density-scale, 1))"
+} }, A = { style: { flex: "1", "min-width": "0" } }, F = { style: {
+  fontSize: "1.0625rem",
+  fontWeight: "600",
+  lineHeight: "1.3",
+  color: "var(--cui-text-emphasis)",
+  margin: "calc(0.125rem * var(--cui-density-scale, 1)) 0 0"
+} }, G = {
+  key: 0,
+  style: {
+    fontSize: "0.875rem",
+    color: "var(--cui-text-secondary)",
+    lineHeight: "1.55",
+    marginTop: "calc(0.375rem * var(--cui-density-scale, 1))"
+  }
+}, J = ["aria-label"], O = { key: 0 }, Q = { style: { display: "flex", gap: "calc(0.5rem * var(--cui-density-scale, 1))", "justify-content": "flex-end" } }, ne = /* @__PURE__ */ V({
+  __name: "CuiConfirmDialog",
+  props: {
+    visible: { type: Boolean, default: !1 },
+    title: {},
+    message: {},
+    variant: { default: "danger" },
+    confirmText: {},
+    cancelText: {},
+    confirmWord: {},
+    confirmPrompt: {},
+    icon: {},
+    loading: { type: Boolean, default: !1 },
+    hidden: { type: Boolean, default: !1 }
+  },
+  emits: ["update:visible", "confirm", "cancel"],
+  setup(e, { emit: T }) {
+    const i = e, c = _(), z = l(() => i.title ?? c.value.confirmDialog.title), S = l(() => i.confirmText ?? c.value.confirmDialog.confirm), $ = l(() => i.cancelText ?? c.value.confirmDialog.cancel), d = T, m = I("");
+    R(
+      () => i.visible,
+      (u) => {
+        u && (m.value = "");
+      }
+    );
+    const B = {
+      danger: { color: "error", icon: "warning-circle" },
+      warning: { color: "warning", icon: "warning" },
+      info: { color: "info", icon: "info" }
+    }, r = l(() => B[i.variant]), y = l(() => i.confirmWord ? m.value.trim().toLowerCase() !== i.confirmWord.trim().toLowerCase() : !1), W = l(
+      () => c.value.confirmDialog.typePrompt(i.confirmWord ?? "")
+    );
+    function D() {
+      d("update:visible", !1);
+    }
+    function p() {
+      y.value || d("confirm");
+    }
+    function b() {
+      d("cancel"), D();
+    }
+    return (u, n) => (v(), N(K, {
+      hidden: e.hidden,
+      visible: e.visible,
+      size: "sm",
+      "no-close-button": "",
+      "onUpdate:visible": n[1] || (n[1] = (f) => d("update:visible", f))
+    }, {
+      default: a(() => [
+        o("div", q, [
+          o("div", {
+            style: h({
+              width: "2.5rem",
+              height: "2.5rem",
+              borderRadius: "0.625rem",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexShrink: "0",
+              background: `var(--cui-${r.value.color}-bg)`,
+              color: `var(--cui-${r.value.color})`,
+              border: `1px solid var(--cui-${r.value.color}-border)`
+            })
+          }, [
+            t(w, {
+              name: e.icon || r.value.icon,
+              size: "1.25rem"
+            }, null, 8, ["name"])
+          ], 4),
+          o("div", A, [
+            o("h2", F, s(z.value), 1),
+            e.message || u.$slots.default ? (v(), x("div", G, [
+              P(u.$slots, "default", {}, () => [
+                g(s(e.message), 1)
+              ])
+            ])) : C("", !0)
+          ]),
+          o("button", {
+            type: "button",
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: "1.75rem",
+              height: "1.75rem",
+              border: "none",
+              background: "none",
+              cursor: "pointer",
+              color: "var(--cui-text-tertiary)",
+              borderRadius: "0.25rem",
+              flexShrink: "0",
+              marginTop: "calc(-0.125rem * var(--cui-density-scale, 1))",
+              marginRight: "calc(-0.25rem * var(--cui-density-scale, 1))"
+            },
+            "aria-label": j(c).close,
+            onClick: b
+          }, [
+            t(w, {
+              name: "x",
+              size: "1rem"
+            })
+          ], 8, J)
+        ]),
+        t(L, null, {
+          default: a(() => [
+            e.confirmWord ? (v(), x("div", O, [
+              o("div", {
+                style: h({
+                  fontSize: "0.8125rem",
+                  color: "var(--cui-text-secondary)",
+                  marginBottom: "calc(0.5rem * var(--cui-density-scale, 1))",
+                  lineHeight: "1.4",
+                  padding: "calc(0.625rem * var(--cui-density-scale, 1)) calc(0.75rem * var(--cui-density-scale, 1))",
+                  background: `var(--cui-${r.value.color}-bg)`,
+                  borderRadius: "0.375rem",
+                  border: `1px solid var(--cui-${r.value.color}-border)`
+                })
+              }, s(e.confirmPrompt || W.value), 5),
+              t(U, {
+                modelValue: m.value,
+                "onUpdate:modelValue": n[0] || (n[0] = (f) => m.value = f),
+                placeholder: e.confirmWord,
+                size: "sm",
+                onKeydown: H(p, ["enter"])
+              }, null, 8, ["modelValue", "placeholder"])
+            ])) : C("", !0)
+          ]),
+          _: 1
+        }),
+        t(M, null, {
+          default: a(() => [
+            o("div", Q, [
+              t(k, {
+                variant: "outline",
+                size: "sm",
+                onClick: b
+              }, {
+                default: a(() => [
+                  g(s($.value), 1)
+                ]),
+                _: 1
+              }),
+              t(k, {
+                variant: "solid",
+                size: "sm",
+                color: r.value.color,
+                disabled: y.value || e.loading,
+                onClick: p
+              }, E({
+                default: a(() => [
+                  g(" " + s(S.value), 1)
+                ]),
+                _: 2
+              }, [
+                e.loading ? {
+                  name: "prefix",
+                  fn: a(() => [
+                    n[2] || (n[2] = o("span", { style: {
+                      display: "inline-block",
+                      width: "0.875rem",
+                      height: "0.875rem",
+                      border: "2px solid currentColor",
+                      borderTopColor: "transparent",
+                      borderRadius: "50%",
+                      animation: "cui-spin 0.75s linear infinite"
+                    } }, null, -1))
+                  ]),
+                  key: "0"
+                } : void 0
+              ]), 1032, ["color", "disabled"])
+            ])
+          ]),
+          _: 1
+        })
+      ]),
+      _: 3
+    }, 8, ["hidden", "visible"]));
+  }
+});
+export {
+  ne as default
+};

package/dist/components/CuiConfirmDialog.vue2.js

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

package/dist/components/CuiContainer.vue.d.ts

@@ -1,6 +1,7 @@
 import type { ResponsiveValue, TailwindSpacing } from "../types/grid";
+import type { HideableProps } from "../types/common";
 export type ContainerSize = "sm" | "md" | "lg" | "xl" | "2xl" | "full";
-export interface CuiContainerProps {
+export interface CuiContainerProps extends HideableProps {
     /** Max-width size (sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px, full: 100%) */
     maxWidth?: ResponsiveValue<ContainerSize>;
     /** Horizontal padding (Tailwind spacing scale) */
@@ -9,8 +10,6 @@ export interface CuiContainerProps {
     py?: ResponsiveValue<TailwindSpacing>;
     /** Center the container */
     centered?: boolean;
-    /** Hide the component */
-    hidden?: boolean;
 }
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {