@itguy614/clean-ui 0.9.0 → 1.0.0

package/dist/components/CuiMaskedInput.vue.js

@@ -0,0 +1,256 @@
+import { defineComponent as J, computed as b, ref as K, watch as L, useTemplateRef as N, withDirectives as O, openBlock as Q, createBlock as U, createSlots as W, withCtx as g, renderSlot as C, vShow as X, nextTick as Y } from "vue";
+import _ from "./CuiInput.vue.js";
+const ne = /* @__PURE__ */ J({
+  __name: "CuiMaskedInput",
+  props: {
+    modelValue: { default: "" },
+    mask: {},
+    tokens: {},
+    fillChar: { default: "_" },
+    placeholder: {},
+    clearable: { type: Boolean, default: !1 },
+    error: { type: Boolean, default: !1 },
+    errorMessage: {},
+    readonly: { type: Boolean, default: !1 },
+    hidden: { type: Boolean, default: !1 },
+    color: { default: "primary" },
+    size: { default: "md" },
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue", "update:formattedValue"],
+  setup(u, { expose: $, emit: F }) {
+    const f = u, B = F, z = {
+      "#": { pattern: /[0-9]/ },
+      A: { pattern: /[a-zA-Z]/ },
+      "*": { pattern: /[a-zA-Z0-9]/ }
+    }, D = b(() => ({ ...z, ...f.tokens })), c = b(() => {
+      const e = [];
+      let t = 0;
+      for (let n = 0; n < f.mask.length; n++) {
+        const l = f.mask[n];
+        if (l === "\\" && n + 1 < f.mask.length) {
+          n++, e.push({ index: t, isToken: !1, char: f.mask[n] }), t++;
+          continue;
+        }
+        const s = D.value[l];
+        s ? e.push({ index: t, isToken: !0, char: l, pattern: s.pattern }) : e.push({ index: t, isToken: !1, char: l }), t++;
+      }
+      return e;
+    }), v = b(() => c.value.filter((e) => e.isToken));
+    function d(e) {
+      let t = 0, n = "";
+      for (const l of c.value)
+        l.isToken ? t < e.length ? (n += e[t], t++) : n += f.fillChar : n += l.char;
+      return n;
+    }
+    function P(e) {
+      var n;
+      let t = "";
+      for (const l of c.value)
+        if (l.isToken && l.index < e.length) {
+          const s = e[l.index];
+          s !== f.fillChar && ((n = l.pattern) != null && n.test(s)) && (t += s);
+        }
+      return t;
+    }
+    function E(e) {
+      var l;
+      let t = "", n = 0;
+      for (const s of e) {
+        if (n >= v.value.length) break;
+        (l = v.value[n].pattern) != null && l.test(s) && (t += s, n++);
+      }
+      return t;
+    }
+    const i = K(d(f.modelValue));
+    L(
+      () => f.modelValue,
+      (e) => {
+        const t = E(e);
+        i.value = d(t);
+      }
+    );
+    const A = b(() => i.value);
+    function x(e) {
+      let t = 0;
+      for (const n of c.value)
+        if (n.isToken) {
+          if (t === e) return n.index;
+          t++;
+        }
+      return c.value.length;
+    }
+    function w(e) {
+      for (const t of c.value)
+        if (t.isToken && t.index >= e) return t.index;
+      return c.value.length;
+    }
+    const y = N("maskedInputRef");
+    function I() {
+      var e;
+      return (e = y.value) == null ? void 0 : e.el;
+    }
+    function p(e) {
+      Y(() => {
+        const t = I();
+        t && t.setSelectionRange(e, e);
+      });
+    }
+    function M(e) {
+      e.preventDefault();
+      const t = I();
+      if (!t) return;
+      const n = t.selectionStart ?? 0, l = t.selectionEnd ?? n, s = P(i.value);
+      if (e.inputType === "insertText" && e.data) {
+        let a = 0;
+        for (const m of c.value) {
+          if (m.index >= n) break;
+          m.isToken && a++;
+        }
+        const r = S(e.data, a);
+        if (!r) return;
+        let o = s;
+        if (n !== l) {
+          const m = k(n), H = k(l);
+          o = o.slice(0, m) + o.slice(H), a = m;
+        }
+        o = o.slice(0, a) + r + o.slice(a), o = o.slice(0, v.value.length), i.value = d(o), T(o);
+        const h = a + r.length, R = x(h);
+        p(w(R));
+      } else if (e.inputType === "deleteContentBackward" || e.inputType === "deleteContentForward") {
+        let a = k(n), r = k(l);
+        if (n === l)
+          if (e.inputType === "deleteContentBackward")
+            if (a > 0)
+              a--;
+            else
+              return;
+          else if (r < s.length)
+            r++;
+          else
+            return;
+        const o = s.slice(0, a) + s.slice(r);
+        i.value = d(o), T(o);
+        const h = x(a);
+        e.inputType === "deleteContentBackward" ? p(h) : p(w(h));
+      } else if (e.inputType === "insertFromPaste") {
+        const a = e.data ?? "";
+        let r = k(n), o = s;
+        if (n !== l) {
+          const m = k(l);
+          o = o.slice(0, r) + o.slice(m);
+        }
+        const h = Z(a, r);
+        o = o.slice(0, r) + h + o.slice(r), o = o.slice(0, v.value.length), i.value = d(o), T(o);
+        const R = r + h.length;
+        p(x(R));
+      }
+    }
+    function k(e) {
+      let t = 0;
+      for (const n of c.value) {
+        if (n.index >= e) break;
+        n.isToken && t++;
+      }
+      return t;
+    }
+    function S(e, t) {
+      var s;
+      let n = "", l = t;
+      for (const a of e) {
+        if (l >= v.value.length) break;
+        (s = v.value[l].pattern) != null && s.test(a) && (n += a, l++);
+      }
+      return n;
+    }
+    function Z(e, t) {
+      return S(e, t);
+    }
+    function T(e) {
+      B("update:modelValue", e), B("update:formattedValue", d(e));
+    }
+    function V() {
+      const e = P(i.value);
+      return e.length === 0 ? w(0) : x(e.length);
+    }
+    function j() {
+      const e = I();
+      if (!e) return;
+      const t = e.selectionStart ?? 0, n = V();
+      if (t > n)
+        p(n);
+      else {
+        const l = w(t);
+        l > n ? p(n) : l !== t && p(l);
+      }
+    }
+    function q() {
+      i.value = d(""), T(""), p(w(0));
+    }
+    function G() {
+      (!i.value || i.value === d("")) && (i.value = d("")), p(V());
+    }
+    return $({
+      el: y,
+      formattedValue: A,
+      focus: () => {
+        var e;
+        return (e = y.value) == null ? void 0 : e.focus();
+      },
+      blur: () => {
+        var e;
+        return (e = y.value) == null ? void 0 : e.blur();
+      }
+    }), (e, t) => O((Q(), U(_, {
+      ref: "maskedInputRef",
+      "model-value": i.value,
+      type: "text",
+      placeholder: u.placeholder,
+      color: u.color,
+      size: u.size,
+      clearable: u.clearable,
+      error: u.error,
+      "error-message": u.errorMessage,
+      disabled: u.disabled,
+      readonly: u.readonly,
+      onBeforeinput: M,
+      onClick: j,
+      onFocusin: G,
+      onClear: q
+    }, W({ _: 2 }, [
+      e.$slots.prefix ? {
+        name: "prefix",
+        fn: g(() => [
+          C(e.$slots, "prefix")
+        ]),
+        key: "0"
+      } : void 0,
+      e.$slots.suffix ? {
+        name: "suffix",
+        fn: g(() => [
+          C(e.$slots, "suffix")
+        ]),
+        key: "1"
+      } : void 0,
+      e.$slots["prefix-button"] ? {
+        name: "prefix-button",
+        fn: g(() => [
+          C(e.$slots, "prefix-button")
+        ]),
+        key: "2"
+      } : void 0,
+      e.$slots["suffix-button"] ? {
+        name: "suffix-button",
+        fn: g(() => [
+          C(e.$slots, "suffix-button")
+        ]),
+        key: "3"
+      } : void 0
+    ]), 1032, ["model-value", "placeholder", "color", "size", "clearable", "error", "error-message", "disabled", "readonly"])), [
+      [X, !u.hidden]
+    ]);
+  }
+});
+export {
+  ne as default
+};

package/dist/components/CuiMaskedInput.vue2.js

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

package/dist/components/CuiModal.vue.js

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

package/dist/components/CuiModal.vue2.js

@@ -0,0 +1,98 @@
+import { defineComponent as x, useTemplateRef as z, computed as N, openBlock as i, createBlock as O, Teleport as $, unref as l, withDirectives as E, createElementBlock as c, normalizeClass as m, createVNode as d, createElementVNode as u, normalizeStyle as M, Fragment as S, withCtx as V, renderSlot as f, vShow as I, createCommentVNode as R } from "vue";
+import { useOverlay as G } from "../composables/useOverlay.js";
+import K from "./CuiBackdrop.vue.js";
+import T from "./CuiModalHeader.vue.js";
+import W from "./CuiModalBody.vue.js";
+const A = { class: "cui-modal-container" }, D = ["aria-labelledby"], J = /* @__PURE__ */ x({
+  __name: "CuiModal",
+  props: {
+    visible: { type: Boolean, default: !1 },
+    size: { default: "md" },
+    title: {},
+    persistent: { type: Boolean, default: !1 },
+    noCloseButton: { type: Boolean, default: !1 },
+    allowNested: { type: Boolean, default: !1 },
+    backdropOpacity: { default: 0.5 },
+    backdropBlur: { default: "none" },
+    backdropColor: { default: "black" },
+    backdropImage: {},
+    backdropGradient: {},
+    rounded: { default: "md" },
+    hidden: { type: Boolean, default: !1 }
+  },
+  emits: ["update:visible", "close"],
+  setup(e, { emit: b }) {
+    const o = e, p = {
+      none: "0",
+      sm: "0.25rem",
+      md: "var(--cui-button-radius, 0.375rem)",
+      lg: "0.5rem",
+      full: "9999px"
+    }, n = b, v = z("dialogEl"), { isVisible: y, isAnimating: a, closeOverlay: k, onBackdropClick: C, onKeydown: r } = G({
+      open: () => o.visible,
+      dialogRef: v,
+      persistent: () => o.persistent,
+      allowNested: () => o.allowNested,
+      onUpdateOpen: (t) => n("update:visible", t),
+      onClose: () => n("close")
+    }), g = {
+      sm: "24rem",
+      // 384px
+      md: "32rem",
+      // 512px
+      lg: "48rem",
+      // 768px
+      xl: "64rem",
+      // 1024px
+      full: "calc(100vw - 2rem)"
+    }, B = N(() => g[o.size] ?? o.size), h = `cui-modal-title-${Math.random().toString(36).slice(2, 8)}`;
+    return (t, s) => (i(), O($, { to: "body" }, [
+      l(y) ? E((i(), c("div", {
+        key: 0,
+        class: m(["cui-modal-overlay", { "cui-modal-overlay--visible": l(a) }]),
+        onKeydown: s[0] || (s[0] = //@ts-ignore
+        (...w) => l(r) && l(r)(...w))
+      }, [
+        d(K, {
+          visible: l(a),
+          opacity: e.backdropOpacity,
+          blur: e.backdropBlur,
+          color: e.backdropColor,
+          image: e.backdropImage,
+          gradient: e.backdropGradient,
+          onClick: l(C)
+        }, null, 8, ["visible", "opacity", "blur", "color", "image", "gradient", "onClick"]),
+        u("div", A, [
+          u("div", {
+            ref: "dialogEl",
+            class: m(["cui-modal", { "cui-modal--visible": l(a) }]),
+            style: M({ maxWidth: B.value, borderRadius: p[e.rounded] }),
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": e.title ? h : void 0,
+            tabindex: "-1"
+          }, [
+            e.title ? (i(), c(S, { key: 0 }, [
+              d(T, {
+                title: e.title,
+                "no-close-button": e.noCloseButton,
+                onClose: l(k)
+              }, null, 8, ["title", "no-close-button", "onClose"]),
+              d(W, null, {
+                default: V(() => [
+                  f(t.$slots, "default", {}, void 0, !0)
+                ]),
+                _: 3
+              })
+            ], 64)) : f(t.$slots, "default", { key: 1 }, void 0, !0)
+          ], 14, D)
+        ])
+      ], 34)), [
+        [I, !e.hidden]
+      ]) : R("", !0)
+    ]));
+  }
+});
+export {
+  J as default
+};

package/dist/components/CuiModalBody.vue.js

@@ -0,0 +1,50 @@
+import { defineComponent as m, withDirectives as y, openBlock as o, createElementBlock as l, createElementVNode as S, unref as e, normalizeStyle as t, renderSlot as p, createCommentVNode as a, vShow as v } from "vue";
+import { useScrollShadows as h, scrollShadowTopStyle as w, scrollShadowBottomStyle as g } from "../composables/useScrollShadows.js";
+const x = { style: {
+  position: "relative",
+  display: "flex",
+  flexDirection: "column",
+  flex: "1 1 auto",
+  minHeight: "0",
+  overflow: "hidden"
+} }, C = /* @__PURE__ */ m({
+  __name: "CuiModalBody",
+  props: {
+    noPadding: { type: Boolean, default: !1 },
+    hidden: { type: Boolean, default: !1 }
+  },
+  setup(n) {
+    const { canScrollUp: d, canScrollDown: c, onScroll: r, onMount: s } = h();
+    return (u, i) => y((o(), l("div", x, [
+      S("div", {
+        ref: e(s),
+        style: t({
+          flex: "1 1 auto",
+          minHeight: "0",
+          overflowY: "auto",
+          padding: n.noPadding ? "0" : "calc(0.75rem * var(--cui-density-scale, 1)) calc(1.5rem * var(--cui-density-scale, 1))",
+          fontSize: "0.875rem",
+          lineHeight: "1.6",
+          color: "var(--cui-text-secondary)"
+        }),
+        onScroll: i[0] || (i[0] = //@ts-ignore
+        (...f) => e(r) && e(r)(...f))
+      }, [
+        p(u.$slots, "default")
+      ], 36),
+      e(d) ? (o(), l("div", {
+        key: 0,
+        style: t(e(w))
+      }, null, 4)) : a("", !0),
+      e(c) ? (o(), l("div", {
+        key: 1,
+        style: t(e(g))
+      }, null, 4)) : a("", !0)
+    ], 512)), [
+      [v, !n.hidden]
+    ]);
+  }
+});
+export {
+  C as default
+};

package/dist/components/CuiModalBody.vue2.js

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

package/dist/components/CuiModalFooter.vue.js

@@ -0,0 +1,36 @@
+import { defineComponent as n, withDirectives as i, openBlock as l, createElementBlock as c, normalizeStyle as r, renderSlot as s, vShow as o } from "vue";
+const f = /* @__PURE__ */ n({
+  __name: "CuiModalFooter",
+  props: {
+    align: { default: "right" },
+    hidden: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    const t = {
+      left: "flex-start",
+      right: "flex-end",
+      center: "center",
+      between: "space-between"
+    };
+    return (a, d) => i((l(), c("div", {
+      style: r({
+        display: "flex",
+        alignItems: "center",
+        gap: "calc(0.5rem * var(--cui-density-scale, 1))",
+        padding: "calc(0.75rem * var(--cui-density-scale, 1)) calc(1.5rem * var(--cui-density-scale, 1)) calc(1.25rem * var(--cui-density-scale, 1))",
+        flexShrink: "0",
+        justifyContent: t[e.align],
+        background: "var(--cui-surface-base)",
+        position: "relative",
+        zIndex: "1"
+      })
+    }, [
+      s(a.$slots, "default")
+    ], 4)), [
+      [o, !e.hidden]
+    ]);
+  }
+});
+export {
+  f as default
+};

package/dist/components/CuiModalFooter.vue2.js

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

package/dist/components/CuiModalHeader.vue.js

@@ -0,0 +1,85 @@
+import { defineComponent as u, withDirectives as m, openBlock as r, createElementBlock as o, createElementVNode as y, renderSlot as n, toDisplayString as g, createCommentVNode as s, unref as f, createVNode as p, vShow as v } from "vue";
+import h from "./CuiIcon.vue.js";
+import { useMessages as b } from "../composables/useMessages.js";
+const k = { style: {
+  display: "flex",
+  alignItems: "flex-start",
+  gap: "calc(0.75rem * var(--cui-density-scale, 1))",
+  padding: "calc(1.25rem * var(--cui-density-scale, 1)) calc(1.5rem * var(--cui-density-scale, 1)) calc(0.25rem * var(--cui-density-scale, 1))",
+  flexShrink: "0",
+  background: "var(--cui-surface-base)",
+  position: "relative",
+  zIndex: "1"
+} }, x = { style: { flex: "1", "min-width": "0" } }, C = {
+  key: 0,
+  style: {
+    fontSize: "1.125rem",
+    fontWeight: "600",
+    lineHeight: "1.4",
+    color: "var(--cui-text-emphasis)",
+    margin: "0"
+  }
+}, B = {
+  key: 0,
+  style: { display: "flex", "align-items": "center", gap: "calc(0.5rem * var(--cui-density-scale, 1))", "flex-shrink": "0" }
+}, S = ["aria-label"], z = /* @__PURE__ */ u({
+  __name: "CuiModalHeader",
+  props: {
+    title: {},
+    noCloseButton: { type: Boolean, default: !1 },
+    hidden: { type: Boolean, default: !1 }
+  },
+  emits: ["close"],
+  setup(i, { emit: l }) {
+    const c = l, d = b();
+    return (a, e) => m((r(), o("div", k, [
+      y("div", x, [
+        n(a.$slots, "default", {}, () => [
+          i.title ? (r(), o("h2", C, g(i.title), 1)) : s("", !0)
+        ])
+      ]),
+      a.$slots.actions ? (r(), o("div", B, [
+        n(a.$slots, "actions")
+      ])) : s("", !0),
+      i.noCloseButton ? s("", !0) : (r(), o("button", {
+        key: 1,
+        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)",
+          padding: "0",
+          borderRadius: "0.375rem",
+          flexShrink: "0",
+          marginTop: "calc(-0.125rem * var(--cui-density-scale, 1))",
+          marginRight: "calc(-0.25rem * var(--cui-density-scale, 1))",
+          transition: "color 0.15s ease, background 0.15s ease"
+        },
+        "aria-label": f(d).close,
+        onClick: e[0] || (e[0] = (t) => c("close")),
+        onMouseenter: e[1] || (e[1] = (t) => {
+          t.target.style.color = "var(--cui-text-body)", t.target.style.background = "var(--cui-primary-bg)";
+        }),
+        onMouseleave: e[2] || (e[2] = (t) => {
+          t.target.style.color = "var(--cui-text-tertiary)", t.target.style.background = "none";
+        })
+      }, [
+        p(h, {
+          name: "x",
+          size: "1rem"
+        })
+      ], 40, S))
+    ], 512)), [
+      [v, !i.hidden]
+    ]);
+  }
+});
+export {
+  z as default
+};

package/dist/components/CuiModalHeader.vue2.js

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

package/dist/components/CuiPagination.vue.js

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