@itguy614/clean-ui 0.9.0 → 1.0.0

package/dist/components/CuiDropdownDivider.vue.js

@@ -0,0 +1,14 @@
+import { openBlock as e, createElementBlock as o } from "vue";
+/* empty css                        */
+import r from "../_virtual/_plugin-vue_export-helper.js";
+const c = {}, t = {
+  class: "cui-dropdown-divider",
+  role: "separator"
+};
+function d(i, n) {
+  return e(), o("div", t);
+}
+const p = /* @__PURE__ */ r(c, [["render", d], ["__scopeId", "data-v-de1ceea6"]]);
+export {
+  p as default
+};

package/dist/components/CuiDropdownHeader.vue.js

@@ -0,0 +1,16 @@
+import { openBlock as o, createElementBlock as r, renderSlot as t } from "vue";
+/* empty css                       */
+import n from "../_virtual/_plugin-vue_export-helper.js";
+const d = {}, c = {
+  class: "cui-dropdown-header",
+  role: "presentation"
+};
+function s(e, a) {
+  return o(), r("div", c, [
+    t(e.$slots, "default", {}, void 0, !0)
+  ]);
+}
+const f = /* @__PURE__ */ n(d, [["render", s], ["__scopeId", "data-v-d5eb081a"]]);
+export {
+  f as default
+};

package/dist/components/CuiDropdownItem.vue.js

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

package/dist/components/CuiDropdownItem.vue2.js

@@ -0,0 +1,55 @@
+import { defineComponent as p, inject as h, withDirectives as b, openBlock as o, createElementBlock as i, normalizeClass as w, renderSlot as l, createCommentVNode as s, createElementVNode as a, toDisplayString as r, vShow as y } from "vue";
+import { DropdownContextKey as _ } from "./dropdown-context.js";
+const k = ["aria-disabled", "tabindex"], v = {
+  key: 0,
+  class: "cui-dropdown-item__icon"
+}, C = { class: "cui-dropdown-item__body" }, S = { class: "cui-dropdown-item__label" }, B = {
+  key: 0,
+  class: "cui-dropdown-item__desc"
+}, D = {
+  key: 1,
+  class: "cui-dropdown-item__shortcut"
+}, N = /* @__PURE__ */ p({
+  __name: "CuiDropdownItem",
+  props: {
+    shortcut: {},
+    description: {},
+    closeOnSelect: { type: Boolean, default: !0 },
+    hidden: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["select"],
+  setup(e, { emit: u }) {
+    const d = e, m = u, n = h(_);
+    function c() {
+      d.disabled || (m("select"), d.closeOnSelect && (n == null || n.closeAll()));
+    }
+    function f(t) {
+      (t.key === "Enter" || t.key === " ") && (t.preventDefault(), c());
+    }
+    return (t, E) => b((o(), i("div", {
+      class: w(["cui-dropdown-item", { "cui-dropdown-item--disabled": e.disabled }]),
+      role: "menuitem",
+      "aria-disabled": e.disabled || void 0,
+      tabindex: e.disabled ? -1 : 0,
+      onClick: c,
+      onKeydown: f
+    }, [
+      t.$slots.icon ? (o(), i("span", v, [
+        l(t.$slots, "icon", {}, void 0, !0)
+      ])) : s("", !0),
+      a("span", C, [
+        a("span", S, [
+          l(t.$slots, "default", {}, void 0, !0)
+        ]),
+        e.description ? (o(), i("span", B, r(e.description), 1)) : s("", !0)
+      ]),
+      e.shortcut ? (o(), i("span", D, r(e.shortcut), 1)) : s("", !0)
+    ], 42, k)), [
+      [y, !e.hidden]
+    ]);
+  }
+});
+export {
+  N as default
+};

package/dist/components/CuiDropdownMenu.vue.js

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

package/dist/components/CuiDropdownMenu.vue2.js

@@ -0,0 +1,79 @@
+import { defineComponent as h, inject as E, ref as p, watch as A, nextTick as C, onMounted as D, onUnmounted as _, computed as b, openBlock as w, createBlock as S, Teleport as z, unref as d, createElementBlock as F, normalizeStyle as L, normalizeClass as O, renderSlot as q, createCommentVNode as B } from "vue";
+import { DropdownContextKey as R, computeDropdownPosition as W } from "./dropdown-context.js";
+const K = ["data-cui-dropdown-owner"], T = /* @__PURE__ */ h({
+  __name: "CuiDropdownMenu",
+  props: {
+    minWidth: { default: "12rem" }
+  },
+  setup(y) {
+    const e = E(R), u = p(), c = p({});
+    function m() {
+      if (e != null && e.triggerEl.value) {
+        const { styles: n } = W(e.triggerEl.value, e.placement.value);
+        c.value = n;
+      }
+    }
+    A(
+      () => e == null ? void 0 : e.isOpen.value,
+      (n) => {
+        n && (m(), C(() => {
+          var t;
+          const o = (t = u.value) == null ? void 0 : t.querySelector(
+            '[role="menuitem"]:not([aria-disabled="true"])'
+          );
+          o == null || o.focus();
+        }));
+      }
+    );
+    let r = null;
+    function a() {
+      !(e != null && e.isOpen.value) || e != null && e.isClosing.value || (r && cancelAnimationFrame(r), r = requestAnimationFrame(m));
+    }
+    D(() => {
+      window.addEventListener("scroll", a, !0), window.addEventListener("resize", a);
+    }), _(() => {
+      window.removeEventListener("scroll", a, !0), window.removeEventListener("resize", a), r && cancelAnimationFrame(r);
+    });
+    function g(n) {
+      var i, l, f, v;
+      if (!u.value) return;
+      const o = Array.from(u.value.querySelectorAll(
+        '[role="menuitem"]:not([aria-disabled="true"]), [role="menuitemcheckbox"]:not([aria-disabled="true"]), [role="menuitemradio"]:not([aria-disabled="true"])'
+      )), t = o.indexOf(document.activeElement);
+      if (n.key === "ArrowDown") {
+        n.preventDefault();
+        const s = t < o.length - 1 ? t + 1 : 0;
+        (i = o[s]) == null || i.focus();
+      } else if (n.key === "ArrowUp") {
+        n.preventDefault();
+        const s = t > 0 ? t - 1 : o.length - 1;
+        (l = o[s]) == null || l.focus();
+      } else n.key === "Home" ? (n.preventDefault(), (f = o[0]) == null || f.focus()) : n.key === "End" && (n.preventDefault(), (v = o[o.length - 1]) == null || v.focus());
+    }
+    const k = b(() => {
+      var o;
+      const n = (o = e == null ? void 0 : e.triggerEl.value) == null ? void 0 : o.closest("[data-cui-dropdown-id]");
+      return (n == null ? void 0 : n.getAttribute("data-cui-dropdown-id")) ?? "";
+    });
+    return (n, o) => {
+      var t, i, l;
+      return w(), S(z, { to: "body" }, [
+        (t = d(e)) != null && t.isOpen.value || (i = d(e)) != null && i.isClosing.value ? (w(), F("div", {
+          key: 0,
+          ref_key: "menuRef",
+          ref: u,
+          class: O(["cui-dropdown-menu", { "cui-dropdown-menu--closing": (l = d(e)) == null ? void 0 : l.isClosing.value }]),
+          "data-cui-dropdown-owner": k.value,
+          style: L({ ...c.value, minWidth: y.minWidth }),
+          role: "menu",
+          onKeydown: g
+        }, [
+          q(n.$slots, "default", {}, void 0, !0)
+        ], 46, K)) : B("", !0)
+      ]);
+    };
+  }
+});
+export {
+  T as default
+};

package/dist/components/CuiDropdownRadioGroup.vue.js

@@ -0,0 +1,23 @@
+import { defineComponent as d, provide as p, toRef as a, openBlock as m, createElementBlock as n, renderSlot as u } from "vue";
+import { DropdownRadioKey as s } from "./dropdown-context.js";
+const i = { role: "group" }, V = /* @__PURE__ */ d({
+  __name: "CuiDropdownRadioGroup",
+  props: {
+    modelValue: {}
+  },
+  emits: ["update:modelValue"],
+  setup(o, { emit: t }) {
+    const r = o, l = t;
+    return p(s, {
+      modelValue: a(r, "modelValue"),
+      select(e) {
+        l("update:modelValue", e);
+      }
+    }), (e, c) => (m(), n("div", i, [
+      u(e.$slots, "default")
+    ]));
+  }
+});
+export {
+  V as default
+};

package/dist/components/CuiDropdownRadioGroup.vue2.js

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

package/dist/components/CuiDropdownRadioItem.vue.js

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

package/dist/components/CuiDropdownRadioItem.vue2.js

@@ -0,0 +1,43 @@
+import { defineComponent as r, inject as s, computed as m, openBlock as n, createElementBlock as u, normalizeClass as f, createElementVNode as l, createBlock as p, createCommentVNode as b, renderSlot as k } from "vue";
+import v from "./CuiIcon.vue.js";
+import { DropdownRadioKey as _ } from "./dropdown-context.js";
+const h = ["aria-checked", "aria-disabled", "tabindex"], w = { class: "cui-dropdown-radio-item__check" }, y = { class: "cui-dropdown-radio-item__label" }, E = /* @__PURE__ */ r({
+  __name: "CuiDropdownRadioItem",
+  props: {
+    value: {},
+    disabled: { type: Boolean, default: !1 }
+  },
+  setup(a) {
+    const i = a, e = s(_), d = m(() => (e == null ? void 0 : e.modelValue.value) === i.value);
+    function t() {
+      i.disabled || e == null || e.select(i.value);
+    }
+    function c(o) {
+      (o.key === "Enter" || o.key === " ") && (o.preventDefault(), t());
+    }
+    return (o, C) => (n(), u("div", {
+      class: f(["cui-dropdown-radio-item", { "cui-dropdown-radio-item--disabled": a.disabled }]),
+      role: "menuitemradio",
+      "aria-checked": d.value,
+      "aria-disabled": a.disabled || void 0,
+      tabindex: a.disabled ? -1 : 0,
+      onClick: t,
+      onKeydown: c
+    }, [
+      l("span", w, [
+        d.value ? (n(), p(v, {
+          key: 0,
+          name: "circle",
+          size: "0.5rem",
+          weight: "fill"
+        })) : b("", !0)
+      ]),
+      l("span", y, [
+        k(o.$slots, "default", {}, void 0, !0)
+      ])
+    ], 42, h));
+  }
+});
+export {
+  E as default
+};

package/dist/components/CuiDropdownSub.vue.js

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

package/dist/components/CuiDropdownSub.vue2.js

@@ -0,0 +1,91 @@
+import { defineComponent as M, inject as S, computed as D, ref as f, onUnmounted as B, openBlock as s, createElementBlock as v, createElementVNode as w, normalizeClass as E, renderSlot as m, createCommentVNode as h, createVNode as P, createBlock as $, Teleport as z, normalizeStyle as N } from "vue";
+import R from "./CuiIcon.vue.js";
+import { DropdownContextKey as V, computeDropdownPosition as A } from "./dropdown-context.js";
+const C = ["aria-expanded", "aria-disabled", "tabindex"], K = {
+  key: 0,
+  class: "cui-dropdown-sub__icon"
+}, L = { class: "cui-dropdown-sub__label" }, q = /* @__PURE__ */ M({
+  __name: "CuiDropdownSub",
+  props: {
+    trigger: {},
+    disabled: { type: Boolean, default: !1 }
+  },
+  setup(r) {
+    const p = r, o = S(V), u = D(() => p.trigger ?? (o == null ? void 0 : o.trigger.value) ?? "click"), i = f(!1), a = f(), g = f({});
+    let n = null, l = null;
+    const d = o == null ? void 0 : o.registerSubMenu(() => t());
+    B(() => d == null ? void 0 : d());
+    function c() {
+      if (!p.disabled) {
+        if (l && (clearTimeout(l), l = null), o == null || o.closeSiblingSubMenus(() => t()), a.value) {
+          const { styles: e } = A(a.value, "right");
+          g.value = e;
+        }
+        i.value = !0;
+      }
+    }
+    function t() {
+      n && (clearTimeout(n), n = null), i.value = !1;
+    }
+    function y() {
+      i.value ? t() : c();
+    }
+    function b() {
+      (u.value === "hover" || u.value === "hover-focus") && (l && (clearTimeout(l), l = null), n = setTimeout(c, 150));
+    }
+    function _() {
+      (u.value === "hover" || u.value === "hover-focus") && (n && (clearTimeout(n), n = null), l = setTimeout(t, 200));
+    }
+    function k() {
+      u.value === "click" && y();
+    }
+    function T(e) {
+      e.key === "ArrowRight" && !i.value ? (e.preventDefault(), e.stopPropagation(), c()) : e.key === "ArrowLeft" && i.value ? (e.preventDefault(), e.stopPropagation(), t()) : e.key === "Escape" && i.value && (e.stopPropagation(), t());
+    }
+    return (e, j) => (s(), v("div", {
+      class: "cui-dropdown-sub",
+      onMouseenter: b,
+      onMouseleave: _,
+      onKeydown: T
+    }, [
+      w("div", {
+        ref_key: "triggerRef",
+        ref: a,
+        class: E(["cui-dropdown-sub__trigger", { "cui-dropdown-sub__trigger--disabled": r.disabled, "cui-dropdown-sub__trigger--open": i.value }]),
+        role: "menuitem",
+        "aria-haspopup": "true",
+        "aria-expanded": i.value,
+        "aria-disabled": r.disabled || void 0,
+        tabindex: r.disabled ? -1 : 0,
+        onClick: k
+      }, [
+        e.$slots.icon ? (s(), v("span", K, [
+          m(e.$slots, "icon", {}, void 0, !0)
+        ])) : h("", !0),
+        w("span", L, [
+          m(e.$slots, "default", {}, void 0, !0)
+        ]),
+        P(R, {
+          name: "caret-right",
+          size: "0.75rem",
+          class: "cui-dropdown-sub__arrow"
+        })
+      ], 10, C),
+      (s(), $(z, { to: "body" }, [
+        i.value ? (s(), v("div", {
+          key: 0,
+          class: "cui-dropdown-sub__menu",
+          style: N(g.value),
+          role: "menu",
+          onMouseenter: b,
+          onMouseleave: _
+        }, [
+          m(e.$slots, "menu", {}, void 0, !0)
+        ], 36)) : h("", !0)
+      ]))
+    ], 32));
+  }
+});
+export {
+  q as default
+};

package/dist/components/CuiDropdownTrigger.vue.js

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

package/dist/components/CuiDropdownTrigger.vue2.js

@@ -0,0 +1,25 @@
+import { defineComponent as n, inject as i, ref as l, onMounted as c, openBlock as u, createElementBlock as a, renderSlot as f } from "vue";
+import { DropdownContextKey as d } from "./dropdown-context.js";
+const _ = /* @__PURE__ */ n({
+  __name: "CuiDropdownTrigger",
+  setup(p) {
+    const e = i(d), o = l();
+    c(() => {
+      e && o.value && (e.triggerEl.value = o.value);
+    });
+    function r() {
+      (e == null ? void 0 : e.trigger.value) === "click" && e.toggle();
+    }
+    return (t, s) => (u(), a("div", {
+      ref_key: "el",
+      ref: o,
+      class: "cui-dropdown-trigger",
+      onClick: r
+    }, [
+      f(t.$slots, "default", {}, void 0, !0)
+    ], 512));
+  }
+});
+export {
+  _ as default
+};

package/dist/components/CuiEmptyState.vue.js

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

package/dist/components/CuiEmptyState.vue2.js

@@ -0,0 +1,70 @@
+import { defineComponent as p, computed as m, withDirectives as f, openBlock as c, createElementBlock as o, normalizeStyle as s, renderSlot as r, createElementVNode as h, createVNode as g, createCommentVNode as l, toDisplayString as d, vShow as S } from "vue";
+import { clampSize as z, scaleDensity as n } from "../utils/sizing.js";
+import F from "./CuiIcon.vue.js";
+const k = {
+  key: 0,
+  class: "cui-empty-state__icon-area"
+}, $ = {
+  key: 1,
+  class: "cui-empty-state__actions"
+}, M = /* @__PURE__ */ p({
+  __name: "CuiEmptyState",
+  props: {
+    icon: {},
+    title: {},
+    description: {},
+    hidden: { type: Boolean, default: !1 },
+    color: { default: "primary" },
+    size: { default: "md" }
+  },
+  setup(e) {
+    const u = ["sm", "md", "lg"], a = e, y = {
+      sm: { circle: "2.5rem", icon: "1.25rem", titleFont: "1rem", descFont: "0.8125rem", gap: n("0.75rem"), descMaxWidth: "20rem" },
+      md: { circle: "3.5rem", icon: "1.75rem", titleFont: "1.125rem", descFont: "0.875rem", gap: n("1rem"), descMaxWidth: "24rem" },
+      lg: { circle: "4.5rem", icon: "2rem", titleFont: "1.25rem", descFont: "1rem", gap: n("1.25rem"), descMaxWidth: "28rem" }
+    }, t = m(() => y[z(a.size, u)]), v = m(() => ({
+      width: t.value.circle,
+      height: t.value.circle,
+      background: `var(--cui-${a.color}-bg)`,
+      color: `var(--cui-${a.color})`
+    }));
+    return (i, C) => f((c(), o("div", {
+      class: "cui-empty-state",
+      style: s({ gap: t.value.gap })
+    }, [
+      e.icon || i.$slots.icon ? (c(), o("div", k, [
+        r(i.$slots, "icon", {}, () => [
+          h("div", {
+            class: "cui-empty-state__circle",
+            style: s(v.value)
+          }, [
+            g(F, {
+              name: e.icon,
+              size: t.value.icon
+            }, null, 8, ["name", "size"])
+          ], 4)
+        ], !0)
+      ])) : l("", !0),
+      r(i.$slots, "default", {}, () => [
+        e.title ? (c(), o("div", {
+          key: 0,
+          class: "cui-empty-state__title",
+          style: s({ fontSize: t.value.titleFont })
+        }, d(e.title), 5)) : l("", !0),
+        e.description ? (c(), o("div", {
+          key: 1,
+          class: "cui-empty-state__description",
+          style: s({ fontSize: t.value.descFont, maxWidth: t.value.descMaxWidth })
+        }, d(e.description), 5)) : l("", !0)
+      ], !0),
+      i.$slots.actions ? (c(), o("div", $, [
+        r(i.$slots, "actions", {}, void 0, !0)
+      ])) : l("", !0)
+    ], 4)), [
+      [S, !e.hidden]
+    ]);
+  }
+});
+export {
+  M as default
+};

package/dist/components/CuiFieldset.vue.js

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

package/dist/components/CuiFieldset.vue2.js

@@ -0,0 +1,79 @@
+import { defineComponent as h, ref as k, watch as y, computed as x, withDirectives as B, openBlock as o, createElementBlock as c, normalizeStyle as C, normalizeClass as i, createElementVNode as s, createBlock as $, createCommentVNode as r, toDisplayString as u, renderSlot as S, vShow as w } from "vue";
+import z from "./CuiIcon.vue.js";
+const E = ["disabled"], D = {
+  key: 0,
+  class: "cui-fieldset__description"
+}, V = /* @__PURE__ */ h({
+  __name: "CuiFieldset",
+  props: {
+    legend: {},
+    description: {},
+    variant: { default: "outline" },
+    rounded: { default: "md" },
+    collapsible: { type: Boolean, default: !1 },
+    expanded: { type: Boolean, default: !0 },
+    hidden: { type: Boolean, default: !1 },
+    color: { default: "surface" },
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["update:expanded"],
+  setup(e, { emit: f }) {
+    const a = e, b = f, l = k(a.expanded);
+    y(
+      () => a.expanded,
+      (t) => {
+        l.value = t;
+      }
+    );
+    function v() {
+      a.collapsible && (l.value = !l.value, b("update:expanded", l.value));
+    }
+    const m = {
+      none: "0",
+      sm: "0.25rem",
+      md: "var(--cui-button-radius, 0.375rem)",
+      lg: "0.5rem",
+      full: "9999px"
+    }, p = x(() => {
+      const t = a.color, n = t === "surface" ? "var(--cui-border)" : `var(--cui-${t}-border)`, g = t === "surface" ? "var(--cui-surface-bg)" : `var(--cui-${t}-bg)`, d = {
+        borderRadius: m[a.rounded]
+      };
+      return a.variant === "ghost" ? (d.border = "none", d.background = "transparent") : a.variant === "subtle" ? (d.border = `1px solid ${n}`, d.background = g) : (d.border = `1px solid ${n}`, d.background = "transparent"), d;
+    });
+    return (t, n) => B((o(), c("fieldset", {
+      class: i(["cui-fieldset", [
+        `cui-fieldset--${e.variant}`,
+        {
+          "cui-fieldset--collapsed": e.collapsible && !l.value,
+          "cui-fieldset--disabled": e.disabled
+        }
+      ]]),
+      style: C(p.value),
+      disabled: e.disabled || void 0
+    }, [
+      s("legend", {
+        class: i(["cui-fieldset__legend", { "cui-fieldset__legend--clickable": e.collapsible }]),
+        onClick: v
+      }, [
+        e.collapsible ? (o(), $(z, {
+          key: 0,
+          name: "caret-down",
+          size: "1rem",
+          class: i(["cui-fieldset__chevron", { "cui-fieldset__chevron--collapsed": !l.value }])
+        }, null, 8, ["class"])) : r("", !0),
+        s("span", null, u(e.legend), 1)
+      ], 2),
+      e.description && l.value ? (o(), c("div", D, u(e.description), 1)) : r("", !0),
+      s("div", {
+        class: i(["cui-fieldset__content", { "cui-fieldset__content--hidden": e.collapsible && !l.value }])
+      }, [
+        S(t.$slots, "default", {}, void 0, !0)
+      ], 2)
+    ], 14, E)), [
+      [w, !e.hidden]
+    ]);
+  }
+});
+export {
+  V as default
+};