@itguy614/clean-ui 0.9.0 → 1.0.1

package/dist/components/CuiToastProvider.vue2.js

@@ -0,0 +1,87 @@
+import { defineComponent as h, toRef as l, provide as _, computed as r, openBlock as n, createElementBlock as a, Fragment as d, renderSlot as k, createBlock as y, Teleport as I, createElementVNode as b, normalizeStyle as p, renderList as w, unref as u, normalizeClass as T, createVNode as C } from "vue";
+import $ from "./CuiToast.vue.js";
+import { createToastState as D, ToastContextKey as S } from "./toast-context.js";
+const E = ["onClick"], F = /* @__PURE__ */ h({
+  __name: "CuiToastProvider",
+  props: {
+    position: { default: "bottom-center" },
+    stackMode: { default: "expanded" },
+    maxToasts: { default: 5 }
+  },
+  setup(m) {
+    const o = m, s = D(
+      l(o, "position"),
+      l(o, "stackMode"),
+      l(o, "maxToasts")
+    );
+    _(S, s);
+    const f = r(() => {
+      const i = o.position, t = {
+        position: "fixed",
+        zIndex: "9998",
+        display: "flex",
+        flexDirection: "column",
+        gap: "calc(0.5rem * var(--cui-density-scale, 1))",
+        padding: "calc(1rem * var(--cui-density-scale, 1))",
+        pointerEvents: "none",
+        maxHeight: "100vh",
+        overflow: "hidden"
+      };
+      return i.includes("top") ? t.top = "0" : (t.bottom = "0", t.flexDirection = "column-reverse"), i.includes("left") ? (t.left = "0", t.alignItems = "flex-start") : i.includes("right") ? (t.right = "0", t.alignItems = "flex-end") : (t.left = "50%", t.transform = "translateX(-50%)", t.alignItems = "center"), t;
+    }), v = r(() => {
+      const i = o.position;
+      return i.includes("left") ? "left" : i.includes("right") ? "right" : i.includes("top") ? "top" : "bottom";
+    }), c = r(() => o.stackMode === "collapsed" && s.toasts.value.length > 1 ? s.toasts.value.map((i, t) => ({
+      ...i,
+      _collapsed: t < s.toasts.value.length - 1,
+      _stackIndex: s.toasts.value.length - 1 - t
+    })) : s.toasts.value.map((i) => ({ ...i, _collapsed: !1, _stackIndex: 0 })));
+    return (i, t) => (n(), a(d, null, [
+      k(i.$slots, "default", {}, void 0, !0),
+      (n(), y(I, { to: "body" }, [
+        b("div", {
+          style: p(f.value),
+          class: "cui-toast-container"
+        }, [
+          (n(!0), a(d, null, w(c.value, (e, x) => (n(), a("div", {
+            key: e.id,
+            class: T(["cui-toast-wrapper", [
+              `cui-toast-wrapper--slide-${v.value}`,
+              { "cui-toast-wrapper--collapsed": e._collapsed }
+            ]]),
+            style: p({
+              pointerEvents: "auto",
+              ...e._collapsed ? {
+                transform: `scale(${1 - e._stackIndex * 0.05}) translateY(${e._stackIndex * -8}px)`,
+                opacity: String(Math.max(0.4, 1 - e._stackIndex * 0.2)),
+                maxHeight: "3rem",
+                overflow: "hidden"
+              } : {}
+            }),
+            onClick: (g) => e._collapsed ? u(s).dismiss(e.id) : void 0
+          }, [
+            C($, {
+              "toast-id": e.id,
+              title: e.title,
+              description: e.description,
+              color: e.color,
+              variant: e.variant,
+              dismissible: e.dismissible,
+              "auto-dismiss": e.autoDismiss,
+              "show-progress": e.showProgress,
+              animation: e.animation,
+              icon: e.icon,
+              "no-icon": e.noIcon,
+              live: e.live,
+              active: x === c.value.length - 1,
+              onDismiss: (g) => u(s).dismiss(e.id)
+            }, null, 8, ["toast-id", "title", "description", "color", "variant", "dismissible", "auto-dismiss", "show-progress", "animation", "icon", "no-icon", "live", "active", "onDismiss"])
+          ], 14, E))), 128))
+        ], 4)
+      ]))
+    ], 64));
+  }
+});
+export {
+  F as default
+};

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

@@ -1 +1 @@
-{"version":3,"file":"CuiToggle.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiToggle.vue"],"names":[],"mappings":"AA+RA,OAAO,KAAK,EAAY,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAGzH,MAAM,WAAW,cAAe,SAAQ,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB;IACpG,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,gDAAgD;IAChD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4EAA4E;IAC5E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAmND,QAAA,IAAI,OAAO,IAAU,EAAE,OAAO,IAAW,CAAE;AAC3C,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC5C;IAAE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AA+BnD,QAAA,MAAM,eAAe;;;;;;;;cAtPR,OAAO;;;;gBAFL,OAAO;6EAiQpB,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":"CuiToggle.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiToggle.vue"],"names":[],"mappings":"AAsRA,OAAO,KAAK,EAAY,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAGzH,MAAM,WAAW,cAAe,SAAQ,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB;IACpG,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,gDAAgD;IAChD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4EAA4E;IAC5E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA4MD,QAAA,IAAI,OAAO,IAAU,EAAE,OAAO,IAAW,CAAE;AAC3C,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC5C;IAAE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AA+BnD,QAAA,MAAM,eAAe;;;;;;;;cA/OR,OAAO;;;;gBAFL,OAAO;6EA0PpB,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/CuiToggle.vue.js

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

package/dist/components/CuiToggle.vue2.js

@@ -0,0 +1,116 @@
+import { defineComponent as B, inject as D, computed as i, ref as E, withDirectives as N, openBlock as v, createElementBlock as m, normalizeStyle as g, normalizeClass as R, createElementVNode as u, withModifiers as T, createCommentVNode as b, renderSlot as k, createTextVNode as p, toDisplayString as S, vShow as x } from "vue";
+import { ToggleGroupKey as K } from "./multi-select-group-context.js";
+import { clampSize as L } from "../utils/sizing.js";
+const O = ["aria-checked", "aria-disabled", "tabindex"], P = ["value", "checked", "disabled", "readonly"], X = {
+  key: 0,
+  class: "cui-toggle__label-wrap"
+}, j = { class: "cui-toggle__label" }, G = {
+  key: 0,
+  class: "cui-toggle__description"
+}, Z = /* @__PURE__ */ B({
+  __name: "CuiToggle",
+  props: {
+    value: {},
+    modelValue: { type: Boolean },
+    label: {},
+    description: {},
+    showLabels: { type: Boolean, default: !1 },
+    readonly: { type: Boolean, default: !1 },
+    hidden: { type: Boolean, default: !1 },
+    color: {},
+    size: { default: "md" },
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue"],
+  setup(a, { expose: w, emit: z }) {
+    const t = a, _ = z, e = D(K, null), s = i(() => e && t.value !== void 0 ? e.modelValue.value.includes(t.value) : t.modelValue === !0), n = i(() => e != null && e.disabled.value ? !0 : t.disabled), d = i(() => e != null && e.readonly.value ? !0 : t.readonly), r = i(() => t.color ?? (e == null ? void 0 : e.color.value) ?? "primary"), f = E();
+    function h() {
+      n.value || d.value || (e && t.value !== void 0 ? e.toggle(t.value) : _("update:modelValue", !t.modelValue));
+    }
+    function $(l) {
+      (l.key === " " || l.key === "Enter") && (l.preventDefault(), h());
+    }
+    w({ el: f, focus: () => {
+      var l;
+      return (l = f.value) == null ? void 0 : l.focus();
+    } });
+    const V = ["sm", "md", "lg"], C = {
+      sm: { w: "2rem", h: "1.125rem", knob: "0.875rem", travel: "0.875rem", labelSize: "0.5rem" },
+      md: { w: "2.75rem", h: "1.5rem", knob: "1.25rem", travel: "1.25rem", labelSize: "0.625rem" },
+      lg: { w: "3.5rem", h: "1.875rem", knob: "1.5rem", travel: "1.625rem", labelSize: "0.6875rem" }
+    }, y = i(() => L(t.size, V)), o = i(() => C[y.value]);
+    return (l, c) => N((v(), m("label", {
+      ref_key: "elRef",
+      ref: f,
+      class: R(["cui-toggle", {
+        "cui-toggle--checked": s.value,
+        "cui-toggle--disabled": n.value,
+        "cui-toggle--readonly": d.value
+      }]),
+      style: g({ "--_toggle-focus-ring": `var(--cui-${r.value}-focus-ring)` }),
+      role: "switch",
+      "aria-checked": s.value,
+      "aria-disabled": n.value || d.value || void 0,
+      tabindex: n.value ? -1 : 0,
+      onClick: h,
+      onKeydown: $
+    }, [
+      u("input", {
+        type: "checkbox",
+        value: a.value !== void 0 ? String(a.value) : void 0,
+        checked: s.value,
+        disabled: n.value,
+        readonly: d.value,
+        tabindex: "-1",
+        "aria-hidden": "true",
+        class: "cui-toggle__input",
+        onClick: c[0] || (c[0] = T(() => {
+        }, ["stop", "prevent"]))
+      }, null, 8, P),
+      u("span", {
+        class: "cui-toggle__track",
+        style: g({
+          width: o.value.w,
+          height: o.value.h,
+          "--_toggle-color": `var(--cui-${r.value})`,
+          "--_toggle-bg": `var(--cui-${r.value}-bg)`,
+          "--_toggle-hover": `var(--cui-${r.value}-hover)`,
+          "--_toggle-active": `var(--cui-${r.value}-active)`
+        })
+      }, [
+        a.showLabels && y.value !== "sm" && s.value ? (v(), m("span", {
+          key: 0,
+          class: "cui-toggle__labels",
+          style: g({ fontSize: o.value.labelSize })
+        }, [...c[1] || (c[1] = [
+          u("span", { class: "cui-toggle__on-label" }, "ON", -1)
+        ])], 4)) : b("", !0),
+        u("span", {
+          class: "cui-toggle__knob",
+          style: g({
+            width: o.value.knob,
+            height: o.value.knob,
+            transform: s.value ? `translateX(${o.value.travel})` : "translateX(0)"
+          })
+        }, null, 4)
+      ], 4),
+      a.label || l.$slots.default || a.description || l.$slots.description ? (v(), m("span", X, [
+        u("span", j, [
+          k(l.$slots, "default", {}, () => [
+            p(S(a.label), 1)
+          ], !0)
+        ]),
+        a.description || l.$slots.description ? (v(), m("span", G, [
+          k(l.$slots, "description", {}, () => [
+            p(S(a.description), 1)
+          ], !0)
+        ])) : b("", !0)
+      ])) : b("", !0)
+    ], 46, O)), [
+      [x, !a.hidden]
+    ]);
+  }
+});
+export {
+  Z as default
+};

package/dist/components/CuiToggleGroup.vue.js

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

package/dist/components/CuiToggleGroup.vue2.js

@@ -0,0 +1,59 @@
+import { defineComponent as y, useSlots as h, computed as u, provide as v, toRef as a, withDirectives as b, openBlock as s, createElementBlock as c, normalizeClass as V, createElementVNode as S, renderSlot as B, toDisplayString as C, createCommentVNode as k, vShow as x } from "vue";
+import { ToggleGroupKey as D } from "./multi-select-group-context.js";
+const M = ["aria-label", "aria-invalid"], w = { class: "cui-toggle-group__options" }, z = {
+  key: 0,
+  class: "cui-toggle-group__error"
+}, N = /* @__PURE__ */ y({
+  __name: "CuiToggleGroup",
+  props: {
+    modelValue: { default: () => [] },
+    orientation: { default: "auto" },
+    readonly: { type: Boolean, default: !1 },
+    error: { type: Boolean, default: !1 },
+    errorMessage: {},
+    label: {},
+    hidden: { type: Boolean, default: !1 },
+    color: { default: "primary" },
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue"],
+  setup(o, { emit: f }) {
+    const e = o, g = f, i = h(), m = u(() => {
+      var r;
+      const t = (r = i.default) == null ? void 0 : r.call(i);
+      return t ? t.reduce((l, n) => {
+        var d;
+        return n.type === Symbol.for("v-fgm") || n.type === Symbol.for("v-fgt") ? l + (((d = n.children) == null ? void 0 : d.length) ?? 0) : l + 1;
+      }, 0) : 0;
+    }), p = u(() => e.orientation !== "auto" ? e.orientation : m.value <= 2 ? "horizontal" : "vertical");
+    return v(D, {
+      modelValue: a(e, "modelValue"),
+      color: a(e, "color"),
+      disabled: a(e, "disabled"),
+      readonly: a(e, "readonly"),
+      toggle(t) {
+        if (e.disabled || e.readonly) return;
+        const r = [...e.modelValue], l = r.indexOf(t);
+        l >= 0 ? r.splice(l, 1) : r.push(t), g("update:modelValue", r);
+      }
+    }), (t, r) => b((s(), c("div", {
+      role: "group",
+      "aria-label": o.label,
+      "aria-invalid": o.error || void 0,
+      class: V(["cui-toggle-group", [
+        `cui-toggle-group--${p.value}`,
+        { "cui-toggle-group--error": o.error }
+      ]])
+    }, [
+      S("div", w, [
+        B(t.$slots, "default", {}, void 0, !0)
+      ]),
+      o.error && o.errorMessage ? (s(), c("div", z, C(o.errorMessage), 1)) : k("", !0)
+    ], 10, M)), [
+      [x, !o.hidden]
+    ]);
+  }
+});
+export {
+  N as default
+};

package/dist/components/CuiTooltip.vue.js

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

package/dist/components/CuiTooltip.vue2.js

@@ -0,0 +1,128 @@
+import { defineComponent as V, ref as A, watch as N, toRef as z, onUnmounted as L, computed as d, withDirectives as I, openBlock as u, createElementBlock as a, createElementVNode as v, renderSlot as g, createBlock as K, Teleport as O, normalizeStyle as p, unref as f, normalizeClass as P, createTextVNode as U, toDisplayString as j, createCommentVNode as m, vShow as q } from "vue";
+import { usePopover as G } from "../composables/usePopover.js";
+const H = { class: "cui-tooltip__content" }, X = /* @__PURE__ */ V({
+  __name: "CuiTooltip",
+  props: {
+    text: {},
+    placement: { default: "top" },
+    trigger: { default: "hover-focus" },
+    showDelay: { default: 200 },
+    hideDelay: { default: 100 },
+    noArrow: { type: Boolean, default: !1 },
+    visible: { type: Boolean },
+    hidden: { type: Boolean, default: !1 },
+    color: {},
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["update:visible"],
+  setup(n, { emit: h }) {
+    const e = n, s = h, r = A(!1);
+    let i = null, o = null;
+    N(
+      () => e.visible,
+      (t) => {
+        t !== void 0 && (r.value = t);
+      }
+    );
+    const { referenceRef: y, floatingRef: w, arrowRef: T, floatingStyles: k, arrowStyle: b, currentSide: _ } = G({
+      placement: z(e, "placement"),
+      offsetDistance: 8,
+      arrow: !e.noArrow
+    });
+    function c() {
+      e.disabled || (o && (clearTimeout(o), o = null), i = setTimeout(() => {
+        r.value = !0, s("update:visible", !0);
+      }, e.showDelay));
+    }
+    function l() {
+      i && (clearTimeout(i), i = null), o = setTimeout(() => {
+        r.value = !1, s("update:visible", !1);
+      }, e.hideDelay);
+    }
+    function M() {
+      r.value ? l() : c();
+    }
+    function S() {
+      (e.trigger === "hover" || e.trigger === "hover-focus") && c();
+    }
+    function B() {
+      (e.trigger === "hover" || e.trigger === "hover-focus") && l();
+    }
+    function D() {
+      (e.trigger === "focus" || e.trigger === "hover-focus") && c();
+    }
+    function R() {
+      (e.trigger === "focus" || e.trigger === "hover-focus") && l();
+    }
+    function $() {
+      e.trigger === "click" && M();
+    }
+    function x(t) {
+      t.key === "Escape" && r.value && l();
+    }
+    function C() {
+      (e.trigger === "hover" || e.trigger === "hover-focus") && o && (clearTimeout(o), o = null);
+    }
+    function E() {
+      (e.trigger === "hover" || e.trigger === "hover-focus") && l();
+    }
+    L(() => {
+      i && clearTimeout(i), o && clearTimeout(o);
+    });
+    const F = d(() => e.color ? {
+      background: `var(--cui-${e.color})`,
+      color: `var(--cui-${e.color}-text)`,
+      "--_arrow-bg": `var(--cui-${e.color})`
+    } : {});
+    return d(() => e.text || !0), (t, J) => I((u(), a("div", {
+      class: "cui-tooltip-wrapper",
+      onMouseenter: S,
+      onMouseleave: B,
+      onFocusin: D,
+      onFocusout: R,
+      onClick: $,
+      onKeydown: x
+    }, [
+      v("div", {
+        ref_key: "referenceRef",
+        ref: y,
+        class: "cui-tooltip__trigger"
+      }, [
+        g(t.$slots, "default", {}, void 0, !0)
+      ], 512),
+      (u(), K(O, { to: "body" }, [
+        r.value ? (u(), a("div", {
+          key: 0,
+          ref_key: "floatingRef",
+          ref: w,
+          class: P(["cui-tooltip", [
+            e.color ? "cui-tooltip--colored" : "cui-tooltip--default",
+            `cui-tooltip--${f(_)}`
+          ]]),
+          style: p({ ...f(k), ...F.value }),
+          role: "tooltip",
+          onMouseenter: C,
+          onMouseleave: E
+        }, [
+          v("div", H, [
+            g(t.$slots, "content", {}, () => [
+              U(j(n.text), 1)
+            ], !0)
+          ]),
+          n.noArrow ? m("", !0) : (u(), a("div", {
+            key: 0,
+            ref_key: "arrowRef",
+            ref: T,
+            class: "cui-tooltip__arrow",
+            style: p(f(b))
+          }, null, 4))
+        ], 38)) : m("", !0)
+      ]))
+    ], 544)), [
+      [q, !n.hidden]
+    ]);
+  }
+});
+export {
+  X as default
+};