@itguy614/clean-ui 0.9.0 → 1.0.0

package/dist/components/CuiFileUpload.vue.js

@@ -0,0 +1,254 @@
+import { defineComponent as K, ref as y, computed as q, useTemplateRef as G, withDirectives as H, openBlock as c, createElementBlock as s, toDisplayString as l, createCommentVNode as f, createElementVNode as n, normalizeStyle as z, createVNode as h, createTextVNode as b, withModifiers as J, Fragment as P, renderList as Q, withCtx as k, unref as Z, createBlock as _, vShow as ee } from "vue";
+import C from "./CuiButton.vue.js";
+import p from "./CuiIcon.vue.js";
+import { useMessages as te } from "../composables/useMessages.js";
+const ie = {
+  key: 0,
+  style: { display: "block", marginBottom: "calc(0.375rem * var(--cui-density-scale, 1))", fontSize: "0.875rem", fontWeight: "500", color: "var(--cui-text-secondary)" }
+}, ae = ["accept", "multiple"], le = { style: { fontSize: "0.875rem", color: "var(--cui-text-secondary)" } }, re = {
+  key: 0,
+  style: { fontSize: "0.75rem", color: "var(--cui-text-tertiary)", marginTop: "calc(0.375rem * var(--cui-density-scale, 1))" }
+}, ne = { key: 0 }, oe = { key: 1 }, ce = { key: 2 }, se = {
+  key: 1,
+  style: { marginTop: "calc(0.75rem * var(--cui-density-scale, 1))" }
+}, ue = { style: { flex: "1", minWidth: "0" } }, de = { style: { fontSize: "0.8125rem", fontWeight: "500", color: "var(--cui-text-body)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, fe = { style: { fontSize: "0.6875rem", color: "var(--cui-text-tertiary)" } }, me = ["onClick"], ve = { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginTop: "calc(0.5rem * var(--cui-density-scale, 1))" } }, he = { style: { fontSize: "0.75rem", color: "var(--cui-text-tertiary)" } }, xe = { style: { display: "flex", gap: "calc(0.375rem * var(--cui-density-scale, 1))" } }, ke = /* @__PURE__ */ K({
+  __name: "CuiFileUpload",
+  props: {
+    accept: {},
+    multiple: { type: Boolean, default: !0 },
+    maxFileSize: { default: 0 },
+    maxFiles: { default: 0 },
+    autoUpload: { type: Boolean, default: !0 },
+    label: {},
+    dragText: { default: "Drag and drop files here, or" },
+    browseText: { default: "Browse" },
+    uploadText: { default: "Upload" },
+    hidden: { type: Boolean, default: !1 },
+    color: { default: "primary" },
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["upload", "reject", "change"],
+  setup(i, { expose: B, emit: D }) {
+    const r = i, u = D, a = y([]), m = y(!1), S = y(null);
+    let T = 0;
+    function $() {
+      return `file-${++T}-${Date.now()}`;
+    }
+    function x(e) {
+      return e < 1024 ? `${e} B` : e < 1024 * 1024 ? `${(e / 1024).toFixed(1)} KB` : `${(e / (1024 * 1024)).toFixed(1)} MB`;
+    }
+    function W(e) {
+      return e.startsWith("image/") ? "image" : e.startsWith("video/") ? "video-camera" : e.startsWith("audio/") ? "music-note" : e.includes("pdf") ? "file-pdf" : e.includes("zip") || e.includes("compressed") || e.includes("archive") ? "file-zip" : e.includes("spreadsheet") || e.includes("csv") || e.includes("excel") ? "file-xls" : e.includes("document") || e.includes("word") ? "file-doc" : e.includes("text") || e.includes("json") || e.includes("xml") ? "file-text" : "file";
+    }
+    function M(e) {
+      var t;
+      if (r.maxFileSize > 0 && e.size > r.maxFileSize)
+        return `File exceeds maximum size of ${x(r.maxFileSize)}`;
+      if (r.accept) {
+        const o = r.accept.split(",").map((d) => d.trim().toLowerCase()), v = "." + ((t = e.name.split(".").pop()) == null ? void 0 : t.toLowerCase());
+        if (!o.some((d) => d.startsWith(".") ? v === d : d.endsWith("/*") ? e.type.startsWith(d.replace("/*", "/")) : e.type === d)) return "File type not accepted";
+      }
+      return null;
+    }
+    function F(e) {
+      if (!r.disabled) {
+        for (const t of Array.from(e)) {
+          if (r.maxFiles > 0 && a.value.length >= r.maxFiles) {
+            u("reject", { file: t, reason: `Maximum ${r.maxFiles} files allowed` });
+            continue;
+          }
+          const o = M(t);
+          if (o) {
+            u("reject", { file: t, reason: o });
+            continue;
+          }
+          a.value.some((v) => v.name === t.name && v.size === t.size) || a.value.push({
+            file: t,
+            id: $(),
+            name: t.name,
+            size: t.size,
+            type: t.type
+          });
+        }
+        u("change", [...a.value]), r.autoUpload && u("upload", a.value.map((t) => t.file));
+      }
+    }
+    function R(e) {
+      a.value = a.value.filter((t) => t.id !== e), u("change", [...a.value]);
+    }
+    function j() {
+      a.value = [], u("change", []);
+    }
+    function E() {
+      a.value.length !== 0 && u("upload", a.value.map((e) => e.file));
+    }
+    function w() {
+      var e;
+      (e = S.value) == null || e.click();
+    }
+    function I(e) {
+      const t = e.target;
+      t.files && F(t.files), t.value = "";
+    }
+    function U(e) {
+      e.preventDefault(), r.disabled || (m.value = !0);
+    }
+    function A(e) {
+      e.preventDefault();
+    }
+    function L(e) {
+      const t = e.currentTarget.getBoundingClientRect();
+      (e.clientX <= t.left || e.clientX >= t.right || e.clientY <= t.top || e.clientY >= t.bottom) && (m.value = !1);
+    }
+    function N(e) {
+      var t;
+      e.preventDefault(), m.value = !1, (t = e.dataTransfer) != null && t.files && F(e.dataTransfer.files);
+    }
+    const V = q(() => x(a.value.reduce((e, t) => e + t.size, 0))), g = G("rootEl");
+    function O(e) {
+      var t;
+      (t = g.value) == null || t.focus(e);
+    }
+    function X() {
+      var e;
+      (e = g.value) == null || e.blur();
+    }
+    B({ el: g, focus: O, blur: X });
+    const Y = te();
+    return (e, t) => H((c(), s("div", {
+      ref_key: "rootEl",
+      ref: g
+    }, [
+      i.label ? (c(), s("label", ie, l(i.label), 1)) : f("", !0),
+      n("input", {
+        ref_key: "inputRef",
+        ref: S,
+        type: "file",
+        accept: i.accept,
+        multiple: i.multiple,
+        style: { display: "none" },
+        onChange: I
+      }, null, 40, ae),
+      n("div", {
+        style: z({
+          border: `2px dashed ${m.value ? `var(--cui-${i.color})` : "var(--cui-border)"}`,
+          borderRadius: "0.625rem",
+          padding: "calc(1.5rem * var(--cui-density-scale, 1))",
+          textAlign: "center",
+          cursor: i.disabled ? "default" : "pointer",
+          opacity: i.disabled ? "0.5" : "1",
+          background: m.value ? `var(--cui-${i.color}-bg)` : "transparent",
+          transition: "border-color 0.15s ease, background 0.15s ease"
+        }),
+        onClick: w,
+        onDragenter: U,
+        onDragover: A,
+        onDragleave: L,
+        onDrop: N
+      }, [
+        h(p, {
+          name: "cloud-arrow-up",
+          size: "2rem",
+          style: z({ color: m.value ? `var(--cui-${i.color})` : "var(--cui-text-tertiary)", marginBottom: "calc(0.5rem * var(--cui-density-scale, 1))" })
+        }, null, 8, ["style"]),
+        n("div", le, [
+          b(l(i.dragText) + " ", 1),
+          n("span", {
+            style: z({ color: `var(--cui-${i.color})`, fontWeight: "600", cursor: "pointer" }),
+            onClick: J(w, ["stop"])
+          }, l(i.browseText), 5)
+        ]),
+        i.accept || i.maxFileSize > 0 ? (c(), s("div", re, [
+          i.accept ? (c(), s("span", ne, l(i.accept), 1)) : f("", !0),
+          i.accept && i.maxFileSize > 0 ? (c(), s("span", oe, " · ")) : f("", !0),
+          i.maxFileSize > 0 ? (c(), s("span", ce, "Max " + l(x(i.maxFileSize)), 1)) : f("", !0)
+        ])) : f("", !0)
+      ], 36),
+      a.value.length > 0 ? (c(), s("div", se, [
+        (c(!0), s(P, null, Q(a.value, (o) => (c(), s("div", {
+          key: o.id,
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: "calc(0.625rem * var(--cui-density-scale, 1))",
+            padding: "calc(0.5rem * var(--cui-density-scale, 1)) calc(0.625rem * var(--cui-density-scale, 1))",
+            borderRadius: "0.375rem",
+            border: "1px solid var(--cui-border)",
+            marginBottom: "calc(0.375rem * var(--cui-density-scale, 1))",
+            background: "var(--cui-surface-base, white)"
+          }
+        }, [
+          h(p, {
+            name: W(o.type),
+            size: "1.25rem",
+            style: { flexShrink: "0", color: "var(--cui-text-secondary)" }
+          }, null, 8, ["name"]),
+          n("div", ue, [
+            n("div", de, l(o.name), 1),
+            n("div", fe, l(x(o.size)), 1)
+          ]),
+          n("button", {
+            type: "button",
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: "1.5rem",
+              height: "1.5rem",
+              border: "none",
+              background: "none",
+              cursor: "pointer",
+              color: "var(--cui-text-tertiary)",
+              borderRadius: "0.25rem",
+              flexShrink: "0"
+            },
+            onClick: (v) => R(o.id)
+          }, [
+            h(p, {
+              name: "x",
+              size: "0.75rem"
+            })
+          ], 8, me)
+        ]))), 128)),
+        n("div", ve, [
+          n("span", he, l(a.value.length) + " file" + l(a.value.length === 1 ? "" : "s") + " · " + l(V.value), 1),
+          n("div", xe, [
+            h(C, {
+              variant: "ghost",
+              size: "xs",
+              onClick: j
+            }, {
+              default: k(() => [
+                b(l(Z(Y).clearAll), 1)
+              ]),
+              _: 1
+            }),
+            i.autoUpload ? f("", !0) : (c(), _(C, {
+              key: 0,
+              variant: "solid",
+              size: "xs",
+              color: i.color,
+              onClick: E
+            }, {
+              prefix: k(() => [
+                h(p, {
+                  name: "upload-simple",
+                  size: "0.75rem"
+                })
+              ]),
+              default: k(() => [
+                b(" " + l(i.uploadText), 1)
+              ]),
+              _: 1
+            }, 8, ["color"]))
+          ])
+        ])
+      ])) : f("", !0)
+    ], 512)), [
+      [ee, !i.hidden]
+    ]);
+  }
+});
+export {
+  ke as default
+};

package/dist/components/CuiFileUpload.vue2.js

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

package/dist/components/CuiFlex.vue.js

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

package/dist/components/CuiFlex.vue2.js

@@ -0,0 +1,72 @@
+import { defineComponent as _, watch as C, computed as G, withDirectives as I, openBlock as m, createElementBlock as v, normalizeStyle as w, renderSlot as k, unref as c, createElementVNode as B, toDisplayString as j, createCommentVNode as D, vShow as F } from "vue";
+import { useFlexContext as N } from "../composables/useLayoutContext.js";
+import { useBreakpoint as E } from "../composables/useBreakpoint.js";
+import { resolveResponsive as o, spacingToCss as d } from "../utils/responsive.js";
+const T = { class: "cui-flex__debug-label" }, J = /* @__PURE__ */ _({
+  __name: "CuiFlex",
+  props: {
+    direction: { default: "row" },
+    wrap: { default: "wrap" },
+    align: {},
+    justify: {},
+    gap: {},
+    rowGap: {},
+    colGap: {},
+    debug: { type: Boolean, default: !1 },
+    hidden: { type: Boolean, default: !1 }
+  },
+  setup(p) {
+    const x = {
+      row: "row",
+      "row-reverse": "row-reverse",
+      col: "column",
+      "col-reverse": "column-reverse"
+    }, y = {
+      start: "flex-start",
+      center: "center",
+      end: "flex-end",
+      stretch: "stretch",
+      baseline: "baseline"
+    }, g = {
+      start: "flex-start",
+      center: "center",
+      end: "flex-end",
+      between: "space-between",
+      around: "space-around",
+      evenly: "space-evenly"
+    }, t = p, { context: r } = N(), { breakpoint: b } = E();
+    C(
+      () => t.debug,
+      (e) => {
+        r.value.debug = e;
+      },
+      { immediate: !0 }
+    );
+    const h = G(() => {
+      const e = b.value, u = o(t.direction, "row", e), S = o(t.wrap, "wrap", e), s = o(t.align, void 0, e), a = o(t.justify, void 0, e), f = o(t.gap, void 0, e), l = o(t.rowGap, void 0, e), i = o(t.colGap, void 0, e), n = {
+        display: "flex",
+        flexDirection: x[u] ?? "row",
+        flexWrap: S
+      };
+      return s && (n.alignItems = y[s] ?? s), a && (n.justifyContent = g[a] ?? a), l || i ? (l && (n.rowGap = d(l)), i && (n.columnGap = d(i))) : f && (n.gap = d(f)), n;
+    });
+    return (e, u) => I((m(), v("div", {
+      class: "cui-flex",
+      style: w(h.value)
+    }, [
+      k(e.$slots, "default", {}, void 0, !0),
+      c(r).debug ? (m(), v("div", {
+        key: 0,
+        class: "cui-flex__debug-overlay",
+        style: w({ zIndex: 9999 - c(r).depth })
+      }, [
+        B("div", T, " Flex (depth: " + j(c(r).depth) + ") ", 1)
+      ], 4)) : D("", !0)
+    ], 4)), [
+      [F, !p.hidden]
+    ]);
+  }
+});
+export {
+  J as default
+};

package/dist/components/CuiFlexItem.vue.js

@@ -0,0 +1,35 @@
+import { defineComponent as d, computed as a, withDirectives as m, openBlock as p, createElementBlock as u, normalizeStyle as v, renderSlot as h, vShow as x } from "vue";
+import { useBreakpoint as k } from "../composables/useBreakpoint.js";
+import { resolveResponsive as i } from "../utils/responsive.js";
+const y = /* @__PURE__ */ d({
+  __name: "CuiFlexItem",
+  props: {
+    grow: {},
+    shrink: {},
+    flex: {},
+    hidden: { type: Boolean, default: !1 }
+  },
+  setup(n) {
+    const t = n, { breakpoint: c } = k(), f = a(() => {
+      const e = c.value, o = {}, r = i(t.flex, void 0, e);
+      if (r !== void 0)
+        o.flex = r;
+      else {
+        const s = i(t.grow, void 0, e), l = i(t.shrink, void 0, e);
+        s !== void 0 && (o.flexGrow = String(s)), l !== void 0 && (o.flexShrink = String(l));
+      }
+      return o;
+    });
+    return (e, o) => m((p(), u("div", {
+      class: "cui-flex-item",
+      style: v(f.value)
+    }, [
+      h(e.$slots, "default")
+    ], 4)), [
+      [x, !n.hidden]
+    ]);
+  }
+});
+export {
+  y as default
+};

package/dist/components/CuiFlexItem.vue2.js

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

package/dist/components/CuiForm.vue.js

@@ -0,0 +1,116 @@
+import { defineComponent as _, ref as c, watch as E, provide as P, computed as w, withDirectives as D, openBlock as K, createElementBlock as M, withModifiers as R, renderSlot as $, vShow as z } from "vue";
+import { FormContextKey as A } from "./form-context.js";
+const I = /* @__PURE__ */ _({
+  __name: "CuiForm",
+  props: {
+    modelValue: {},
+    resolver: {},
+    validateOn: { default: "submit" },
+    readonly: { type: Boolean, default: !1 },
+    hidden: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue", "submit", "submit-invalid"],
+  setup(y, { expose: k, emit: B }) {
+    const n = y, f = B;
+    function m(e) {
+      if (!e) return {};
+      try {
+        return structuredClone(e);
+      } catch {
+        return { ...e };
+      }
+    }
+    const l = c(m(n.modelValue)), u = c({}), i = c(!1), s = c(!1);
+    let d = 0;
+    E(
+      () => n.modelValue,
+      (e) => {
+        e && e !== l.value && (l.value = m(e));
+      },
+      { deep: !0 }
+    );
+    function C(e, t) {
+      return t.split(".").reduce((o, a) => {
+        if (o && typeof o == "object") return o[a];
+      }, e);
+    }
+    function F(e, t, o) {
+      const a = t.split(".");
+      let r = e;
+      for (let p = 0; p < a.length - 1; p++) {
+        const v = a[p];
+        (typeof r[v] != "object" || r[v] === null) && (r[v] = {}), r = r[v];
+      }
+      r[a[a.length - 1]] = o;
+    }
+    async function b() {
+      return n.resolver ? await n.resolver(l.value) ?? {} : {};
+    }
+    async function h() {
+      const e = ++d, t = await b();
+      return e === d && (u.value = t), t;
+    }
+    async function g(e) {
+      const t = ++d, o = await b();
+      if (t !== d) return;
+      const a = { ...u.value };
+      o[e] ? a[e] = o[e] : delete a[e], u.value = a;
+    }
+    function S(e) {
+      return C(l.value, e);
+    }
+    function j(e, t) {
+      F(l.value, e, t), f("update:modelValue", { ...l.value }), (n.validateOn === "change" || i.value) && g(e);
+    }
+    function q(e) {
+      if (!(e in u.value)) return;
+      const t = { ...u.value };
+      delete t[e], u.value = t;
+    }
+    async function V() {
+      if (!s.value) {
+        s.value = !0, i.value = !0;
+        try {
+          const e = await h();
+          Object.keys(e).length === 0 ? f("submit", l.value) : f("submit-invalid", e);
+        } finally {
+          s.value = !1;
+        }
+      }
+    }
+    function x(e) {
+      l.value = m(e ?? n.modelValue), u.value = {}, i.value = !1, f("update:modelValue", { ...l.value });
+    }
+    function O(e) {
+      d++, u.value = { ...e };
+    }
+    return P(A, {
+      values: l,
+      errors: u,
+      submitted: i,
+      disabled: w(() => n.disabled),
+      readonly: w(() => n.readonly),
+      getValue: S,
+      setValue: j,
+      validateField: g,
+      unregisterField: q
+    }), k({ validate: h, reset: x, submit: V, setErrors: O, values: l, errors: u, submitting: s }), (e, t) => D((K(), M("form", {
+      class: "cui-form",
+      novalidate: "",
+      onSubmit: R(V, ["prevent"])
+    }, [
+      $(e.$slots, "default", {
+        values: l.value,
+        errors: u.value,
+        submitted: i.value,
+        submitting: s.value
+      })
+    ], 544)), [
+      [z, !y.hidden]
+    ]);
+  }
+});
+export {
+  I as default
+};

package/dist/components/CuiForm.vue2.js

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

package/dist/components/CuiFormField.vue.js

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

package/dist/components/CuiFormField.vue2.js

@@ -0,0 +1,73 @@
+import { defineComponent as _, inject as x, computed as a, onBeforeUnmount as g, withDirectives as q, openBlock as t, createElementBlock as i, normalizeClass as B, unref as k, createElementVNode as u, toDisplayString as d, createCommentVNode as c, renderSlot as T, normalizeProps as V, guardReactiveProps as p, vShow as C } from "vue";
+import { FormContextKey as E } from "./form-context.js";
+const F = ["for"], M = {
+  key: 0,
+  class: "cui-form-field__required",
+  "aria-hidden": "true"
+}, P = {
+  key: 1,
+  class: "cui-form-field__required-text"
+}, S = { class: "cui-form-field__body" }, w = { class: "cui-form-field__control" }, D = {
+  key: 0,
+  class: "cui-form-field__error"
+}, $ = {
+  key: 1,
+  class: "cui-form-field__help"
+}, U = /* @__PURE__ */ _({
+  __name: "CuiFormField",
+  props: {
+    label: {},
+    labelPosition: { default: "top" },
+    for: {},
+    name: {},
+    required: { type: Boolean, default: !1 },
+    requiredText: {},
+    helpText: {},
+    error: { type: Boolean, default: !1 },
+    errorMessage: {},
+    hidden: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    const l = e, o = x(E, null), s = a(() => !!l.name && !!o), n = a(
+      () => s.value ? !!o.errors.value[l.name] : !!l.error
+    ), f = a(
+      () => s.value ? o.errors.value[l.name] : l.errorMessage
+    ), h = a(() => n.value && f.value), b = a(() => l.disabled || ((o == null ? void 0 : o.disabled.value) ?? !1)), m = l.for ?? `cui-field-${Math.random().toString(36).slice(2, 8)}`, y = a(() => {
+      const r = {
+        id: m,
+        error: n.value,
+        disabled: b.value
+      };
+      return s.value && (r.modelValue = o.getValue(l.name), r["onUpdate:modelValue"] = (v) => o.setValue(l.name, v), r.readonly = o.readonly.value), r;
+    });
+    return g(() => {
+      l.name && o && o.unregisterField(l.name);
+    }), (r, v) => q((t(), i("div", {
+      class: B(["cui-form-field", [
+        `cui-form-field--${e.labelPosition}`,
+        { "cui-form-field--error": n.value }
+      ]])
+    }, [
+      e.label ? (t(), i("label", {
+        key: 0,
+        for: k(m),
+        class: "cui-form-field__label"
+      }, [
+        u("span", null, d(e.label), 1),
+        e.required && !e.requiredText ? (t(), i("span", M, "*")) : e.required && e.requiredText ? (t(), i("span", P, d(e.requiredText), 1)) : c("", !0)
+      ], 8, F)) : c("", !0),
+      u("div", S, [
+        u("div", w, [
+          T(r.$slots, "default", V(p(y.value)), void 0, !0)
+        ]),
+        h.value ? (t(), i("div", D, d(f.value), 1)) : e.helpText ? (t(), i("div", $, d(e.helpText), 1)) : c("", !0)
+      ])
+    ], 2)), [
+      [C, !e.hidden]
+    ]);
+  }
+});
+export {
+  U as default
+};

package/dist/components/CuiGrid.vue.js

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

package/dist/components/CuiGrid.vue2.js

@@ -0,0 +1,51 @@
+import { defineComponent as G, watch as h, computed as w, withDirectives as b, openBlock as m, createElementBlock as f, normalizeStyle as g, renderSlot as _, unref as d, createElementVNode as x, toDisplayString as C, createCommentVNode as k, vShow as B } from "vue";
+import { useGridContext as S } from "../composables/useLayoutContext.js";
+import { useBreakpoint as T } from "../composables/useBreakpoint.js";
+import { resolveResponsive as r, spacingToCss as n } from "../utils/responsive.js";
+const $ = { class: "cui-grid__debug-label" }, R = /* @__PURE__ */ G({
+  __name: "CuiGrid",
+  props: {
+    cols: { default: 1 },
+    rows: {},
+    gap: {},
+    rowGap: {},
+    colGap: {},
+    debug: { type: Boolean, default: !1 },
+    hidden: { type: Boolean, default: !1 }
+  },
+  setup(l) {
+    const o = l, { context: i } = S(), { breakpoint: v } = T();
+    h(
+      () => o.debug,
+      (e) => {
+        i.value.debug = e;
+      },
+      { immediate: !0 }
+    );
+    const y = w(() => {
+      const e = v.value, c = r(o.cols, 1, e), p = r(o.gap, void 0, e), s = r(o.rowGap, void 0, e), a = r(o.colGap, void 0, e), u = r(o.rows, void 0, e), t = {
+        display: "grid",
+        gridTemplateColumns: `repeat(${c}, minmax(0, 1fr))`
+      };
+      return u && (t.gridTemplateRows = `repeat(${u}, minmax(0, 1fr))`), s || a ? (s && (t.rowGap = n(s)), a && (t.columnGap = n(a))) : p && (t.gap = n(p)), t;
+    });
+    return (e, c) => b((m(), f("div", {
+      class: "cui-grid",
+      style: g(y.value)
+    }, [
+      _(e.$slots, "default", {}, void 0, !0),
+      d(i).debug ? (m(), f("div", {
+        key: 0,
+        class: "cui-grid__debug-overlay",
+        style: g({ zIndex: 9999 - d(i).depth })
+      }, [
+        x("div", $, " Grid (depth: " + C(d(i).depth) + ") ", 1)
+      ], 4)) : k("", !0)
+    ], 4)), [
+      [B, !l.hidden]
+    ]);
+  }
+});
+export {
+  R as default
+};

package/dist/components/CuiGridItem.vue.js

@@ -0,0 +1,30 @@
+import { defineComponent as p, computed as c, withDirectives as d, openBlock as m, createElementBlock as u, normalizeStyle as f, renderSlot as v, vShow as S } from "vue";
+import { useBreakpoint as w } from "../composables/useBreakpoint.js";
+import { resolveResponsive as s } from "../utils/responsive.js";
+const k = /* @__PURE__ */ p({
+  __name: "CuiGridItem",
+  props: {
+    colSpan: {},
+    rowSpan: {},
+    hidden: { type: Boolean, default: !1 }
+  },
+  setup(i) {
+    const r = i, { breakpoint: l } = w(), a = c(() => {
+      const e = l.value, o = {}, t = s(r.colSpan, void 0, e);
+      t !== void 0 && (o.gridColumn = t === "full" ? "1 / -1" : `span ${t} / span ${t}`);
+      const n = s(r.rowSpan, void 0, e);
+      return n !== void 0 && (o.gridRow = n === "full" ? "1 / -1" : `span ${n} / span ${n}`), o;
+    });
+    return (e, o) => d((m(), u("div", {
+      class: "cui-grid-item",
+      style: f(a.value)
+    }, [
+      v(e.$slots, "default")
+    ], 4)), [
+      [S, !i.hidden]
+    ]);
+  }
+});
+export {
+  k as default
+};

package/dist/components/CuiGridItem.vue2.js

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