@gradient-ui/core 0.2.0

package/dist/useSnackbar-lGrTDbl-.js

@@ -0,0 +1,763 @@
+import { defineComponent as P, computed as p, unref as d, openBlock as v, createBlock as G, resolveDynamicComponent as X, mergeProps as H, createCommentVNode as _, toRef as A, useCssVars as Y, toRefs as be, createElementBlock as y, normalizeStyle as T, normalizeClass as b, createElementVNode as S, renderSlot as h, toValue as x, useSlots as Z, resolveDirective as J, withDirectives as K, withCtx as ee, createVNode as W, Fragment as Se, createTextVNode as L, toDisplayString as U, shallowRef as te, ref as N, onUnmounted as ne, createApp as ae, watch as ke, onBeforeUnmount as he, reactive as Ce, h as E } from "vue";
+import { c as D, p as k, d as $e, e as oe, u as se, f as Be, g as C, h as we, i as Ge, j as Pe, k as Ie, l as ze, n as Oe, o as Re, q as re, s as Ve, t as ie, _ as xe, a as Ne } from "./GLoading.vue_vue_type_style_index_0_lang-DDqJEYGf.js";
+import "@mdi/js";
+import { u as ce } from "./icon-BrFRYYf3.js";
+const Ae = () => ({
+  icon: {
+    type: String,
+    required: !0
+  },
+  size: {
+    type: [Number, String],
+    default: void 0
+  },
+  tag: {
+    type: String,
+    default: "span"
+  }
+}), Te = /* @__PURE__ */ P({
+  __name: "GIcon",
+  props: Ae(),
+  setup(e) {
+    const t = e, o = ce(() => t.icon), n = p(
+      () => t.size == null ? "var(--g-token-icon-size-m)" : Number.isFinite(Number(t.size)) ? `${t.size}px` : String(t.size)
+    );
+    return (c, r) => d(o).icon ? (v(), G(X(d(o).component), H({
+      key: 0,
+      icon: d(o).icon,
+      tag: t.tag,
+      class: "g-icon",
+      style: { fontSize: n.value }
+    }, c.$attrs), null, 16, ["icon", "tag", "style"])) : _("", !0);
+  }
+}), Q = /* @__PURE__ */ D(Te, [["__scopeId", "data-v-f1c09700"]]), We = k({
+  placement: {
+    type: String,
+    default: "bottom"
+  }
+});
+function De(e, t) {
+  return p(() => `${t}_${e.placement}`);
+}
+const qe = k({
+  active: Boolean,
+  ...oe(),
+  glow: [Boolean, Number, String],
+  animateGlow: Boolean,
+  shadow: Boolean,
+  ...$e()
+});
+function Ee(e, t = "g-gradient") {
+  const o = se(e, t), n = Be(e, t);
+  return {
+    glowClasses: p(() => ({
+      [o.value]: !0,
+      [n.value]: !0,
+      [`${t}_active`]: e.active,
+      [`${t}_glow`]: e.glow,
+      [`${t}_animate-glow`]: e.animateGlow,
+      [`${t}_shadow`]: e.shadow
+    }))
+  };
+}
+const Fe = k({
+  borderRadius: {
+    type: [Number, String],
+    default: 4
+  },
+  inheritWidth: Boolean
+});
+function Le(e) {
+  return {
+    surfaceBorderRadius: C(A(e, "borderRadius"))
+  };
+}
+const Ue = k({
+  ...oe(),
+  ...Ge(),
+  ...we(),
+  ...We({
+    placement: "center"
+  }),
+  borderRadius: {
+    type: [Number, String],
+    default: 4
+  },
+  borderWidth: {
+    type: [Number, String],
+    default: 1
+  },
+  color: String,
+  state: String
+}), le = k({
+  ...Ue(),
+  ...qe(),
+  ...Fe()
+});
+function He(e) {
+  const t = C(A(e, "borderWidth")), o = C(A(e, "borderRadius")), n = p(() => t.value ? `calc(${o.value} + ${t.value})` : o.value), c = se(e, "g-gradient"), r = De(e, "g-gradient"), i = Pe(e, "g-gradient"), a = Ie(
+    () => e.color ?? e.state
+  ), s = p(() => ({
+    [c.value]: !0,
+    [r.value]: !0,
+    [i.value]: !0,
+    "g-gradient_inherit-width": e.inheritWidth,
+    [`g-gradient_${e.placement}`]: e.placement,
+    [`g-gradient_${e.state}`]: e.state,
+    [`g-gradient_border_${e.borderWidth}`]: !0
+  })), u = p(() => ({
+    "--g-border-radius": o.value,
+    "--g-border-width": t.value,
+    "--g-gradient-current": a.value
+  }));
+  return {
+    borderWidthPx: t,
+    borderRadiusPx: o,
+    containerBorderRadius: n,
+    resolvedGradient: a,
+    gradientClasses: s,
+    gradientStyles: u
+  };
+}
+const je = { class: "g-gradient__slot" }, Me = /* @__PURE__ */ P({
+  __name: "GGradient",
+  props: le(),
+  setup(e) {
+    Y((u) => ({
+      v3beb5b00: d(c),
+      ea600628: d(s),
+      v61d97152: d(n)
+    }));
+    const t = e, { borderWidth: o } = be(t), n = C(o), { containerBorderRadius: c, gradientClasses: r, gradientStyles: i } = He(t), { glowClasses: a } = Ee(t), { surfaceBorderRadius: s } = Le(t);
+    return (u, f) => (v(), y("div", {
+      class: b(["g-gradient", [d(r), d(a)]]),
+      style: T(d(i))
+    }, [
+      S("div", je, [
+        h(u.$slots, "default", {}, void 0, !0)
+      ])
+    ], 6));
+  }
+}), Je = /* @__PURE__ */ D(Me, [["__scopeId", "data-v-f23c788d"]]), Ke = /* @__PURE__ */ P({
+  __name: "GIcon",
+  props: {
+    icon: {},
+    size: { default: 20 },
+    tag: { default: "span" }
+  },
+  setup(e) {
+    const t = e, o = C(A(t, "size")), n = ce(() => t.icon);
+    return (c, r) => (v(), G(X(d(n).component), H({
+      icon: d(n).icon,
+      tag: t.tag,
+      class: "g-icon",
+      style: { fontSize: d(o) }
+    }, c.$attrs), null, 16, ["icon", "tag", "style"]));
+  }
+}), F = /* @__PURE__ */ D(Ke, [["__scopeId", "data-v-1e1fd36a"]]), Qe = k({
+  ...Oe(),
+  ...ze(),
+  active: Boolean,
+  activeColor: String,
+  activeState: String,
+  activeVariant: String
+});
+function Xe(e, t, o = {}) {
+  const { disabledClass: n, roundedClass: c, stateClass: r } = Re(
+    e,
+    t
+  ), {
+    surfaceOverlayClasses: i,
+    surfaceUnderlayClasses: a,
+    surfaceContentClasses: s
+  } = re(t), u = Ve(e, t), f = p(
+    () => !!(x(o.active) ?? e.active)
+  ), g = p(() => !!x(o.selected)), { resolvedColor: l, resolvedState: $, colorStyles: I } = ie({
+    color: () => x(e.color),
+    state: () => e.state,
+    active: () => f.value || g.value,
+    activeColor: () => x(e.activeColor),
+    activeState: () => e.activeState
+  }), w = p(
+    () => (g.value || f.value) && e.activeVariant ? e.activeVariant : e.variant
+  );
+  return {
+    actionSurfaceClasses: p(() => {
+      const z = !!x(o.focused);
+      return [
+        `${t}_${w.value}`,
+        n.value,
+        c.value,
+        r.value,
+        u.value,
+        z ? `${t}_focused` : "",
+        g.value ? `${t}_selected` : "",
+        f.value ? `${t}_active` : ""
+      ].filter(Boolean);
+    }),
+    resolvedColor: l,
+    resolvedState: $,
+    resolvedVariant: w,
+    surfaceStyles: I,
+    surfaceOverlayClasses: i,
+    surfaceUnderlayClasses: a,
+    surfaceContentClasses: s
+  };
+}
+const Ye = k({
+  prepend: String,
+  append: String,
+  label: String
+}), Ze = k({
+  ...Qe(),
+  ...Ye(),
+  ...le(),
+  isIconButton: Boolean,
+  iconButton: String,
+  ripple: {
+    type: [Boolean, String, Object],
+    default: !0
+  }
+}), et = {
+  key: 0,
+  class: "g-button__prepend"
+}, tt = { class: "g-button__label" }, nt = {
+  key: 1,
+  class: "g-button__append"
+}, at = /* @__PURE__ */ P({
+  __name: "GButton",
+  props: Ze({
+    borderWidth: 0,
+    borderRadius: 4,
+    placement: "center"
+  }),
+  setup(e) {
+    Y((l) => ({
+      ff755c22: d(n)
+    }));
+    const t = Z(), o = e, n = C(o.borderRadius), c = p(() => o.disabled || o.ripple === !1 ? !1 : typeof o.ripple == "object" ? {
+      ...o.ripple,
+      disabled: o.ripple.disabled || o.disabled
+    } : o.ripple), {
+      actionSurfaceClasses: r,
+      resolvedColor: i,
+      resolvedState: a,
+      surfaceStyles: s,
+      surfaceOverlayClasses: u,
+      surfaceUnderlayClasses: f,
+      surfaceContentClasses: g
+    } = Xe(o, "g-button");
+    return (l, $) => {
+      const I = J("ripple"), w = J("gradient-icon");
+      return K((v(), G(Je, H({ class: "g-gradient" }, {
+        ...o,
+        color: d(i),
+        state: d(a)
+      }), {
+        default: ee(() => [
+          K((v(), y("div", {
+            class: b(["g-button", [
+              d(r),
+              {
+                "g-button_icon": l.iconButton || l.isIconButton
+              }
+            ]]),
+            style: T(d(s))
+          }, [
+            S("span", {
+              class: b(d(f))
+            }, null, 2),
+            S("span", {
+              class: b(d(u))
+            }, null, 2),
+            S("span", {
+              class: b(["g-button__content", d(g)])
+            }, [
+              (t.prepend || l.prepend) && !l.iconButton ? (v(), y("span", et, [
+                h(l.$slots, "prepend", {}, () => [
+                  W(F, { icon: l.prepend }, null, 8, ["icon"])
+                ])
+              ])) : _("", !0),
+              S("span", tt, [
+                h(l.$slots, "default", {}, () => [
+                  l.iconButton ? l.iconButton ? (v(), G(F, {
+                    key: 1,
+                    icon: l.iconButton
+                  }, null, 8, ["icon"])) : _("", !0) : (v(), y(Se, { key: 0 }, [
+                    L(U(l.label), 1)
+                  ], 64))
+                ])
+              ]),
+              (t.append || l.append) && !l.iconButton ? (v(), y("span", nt, [
+                h(l.$slots, "append", {}, () => [
+                  W(F, { icon: l.append }, null, 8, ["icon"])
+                ])
+              ])) : _("", !0)
+            ], 2)
+          ], 6)), [
+            [I, c.value]
+          ])
+        ]),
+        _: 3
+      }, 16)), [
+        [w]
+      ]);
+    };
+  }
+});
+function $t() {
+  const e = te(null), t = N(!1), o = (a) => {
+    c();
+    const s = n(a.target), u = s.style.position;
+    r(s) || (s.style.position = "relative");
+    const f = document.createElement("div");
+    f.className = "g-loading__container", s.appendChild(f);
+    const g = {}, l = ae(xe, {
+      text: a.text,
+      noText: a.noText,
+      color: a.color,
+      dark: a.dark,
+      opacity: a.opacity,
+      blur: a.blur,
+      progressView: a.progressView,
+      onClose: () => {
+        i(g);
+      }
+    }), $ = l.mount(f);
+    Object.assign(g, {
+      app: l,
+      container: f,
+      target: s,
+      originalPosition: u,
+      componentInstance: $
+    }), e.value = g, $.show(), t.value = !0;
+  }, n = (a) => {
+    if (!a) return document.body;
+    if (typeof a == "string") {
+      const s = document.querySelector(a);
+      if (!s) throw new Error(`Target element ${a} not found`);
+      return s;
+    }
+    return a;
+  }, c = async () => {
+    if (!e.value) return;
+    const { componentInstance: a } = e.value;
+    a && a.hide();
+  }, r = (a) => {
+    const s = window.getComputedStyle(a).position;
+    return ["relative", "absolute", "fixed", "sticky"].includes(s);
+  }, i = (a = e.value) => {
+    if (!a) return;
+    const s = e.value === a, { app: u, container: f, target: g, originalPosition: l } = a;
+    u.unmount(), f.parentElement === g && g.removeChild(f), s && (g.style.position = l, e.value = null, t.value = !1);
+  };
+  return ne(() => {
+    c();
+  }), {
+    show: o,
+    hide: c,
+    visible: t
+  };
+}
+const ot = k({
+  modelValue: {
+    type: Boolean,
+    default: void 0
+  },
+  defaultOpen: {
+    type: Boolean,
+    default: !1
+  },
+  title: String,
+  text: String,
+  icon: String,
+  color: {
+    type: String,
+    default: "primary"
+  },
+  state: String,
+  variant: {
+    type: String,
+    default: "tonal"
+  },
+  location: {
+    type: String,
+    default: "bottom-center"
+  },
+  position: {
+    type: String,
+    default: "fixed"
+  },
+  transition: {
+    type: [Boolean, String, Object],
+    default: void 0
+  },
+  timeout: {
+    type: Number,
+    default: 5e3
+  },
+  persistent: {
+    type: Boolean,
+    default: !1
+  },
+  closeable: {
+    type: Boolean,
+    default: !0
+  },
+  action: Object,
+  actionText: String,
+  closeOnAction: {
+    type: Boolean,
+    default: !0
+  },
+  multiline: {
+    type: Boolean,
+    default: !1
+  },
+  offset: {
+    type: [Number, String],
+    default: 24
+  },
+  maxWidth: {
+    type: [Number, String],
+    default: 520
+  },
+  pauseOnHover: {
+    type: Boolean,
+    default: !0
+  }
+}), st = {
+  key: 0,
+  class: "g-snackbar__prepend"
+}, rt = { class: "g-snackbar__main" }, it = {
+  key: 0,
+  class: "g-snackbar__title"
+}, ct = {
+  key: 1,
+  class: "g-snackbar__text"
+}, lt = {
+  key: 1,
+  class: "g-snackbar__actions"
+}, ut = /* @__PURE__ */ P({
+  __name: "GSnackbar",
+  props: ot(),
+  emits: ["update:modelValue", "action", "close", "after-close"],
+  setup(e, { expose: t, emit: o }) {
+    const n = e, c = o, r = Z(), i = N(), a = N(n.defaultOpen), s = N("manual"), u = p(() => n.modelValue !== void 0), f = p(
+      () => u.value ? n.modelValue === !0 : a.value
+    ), g = C(n.offset), l = C(n.maxWidth), { colorStyles: $ } = ie(n), {
+      surfaceOverlayClasses: I,
+      surfaceUnderlayClasses: w,
+      surfaceContentClasses: j
+    } = re("g-snackbar"), z = p(
+      () => {
+        var m;
+        return ((m = n.action) == null ? void 0 : m.label) ?? n.actionText;
+      }
+    ), ue = p(() => ({
+      ...$.value,
+      "--g-snackbar-max-width": l.value
+    })), de = p(() => ({
+      "--g-snackbar-offset": g.value
+    })), fe = p(() => [
+      `g-snackbar_${n.variant}`,
+      {
+        "g-snackbar_multiline": n.multiline
+      }
+    ]), pe = p(() => [
+      `g-snackbar-layer_position-${n.position}`,
+      `g-snackbar-layer_location-${n.location}`
+    ]), me = p(
+      () => n.transition ?? {
+        name: n.location.startsWith("top") ? "slide-y" : "slide-y-reverse",
+        appear: !0,
+        duration: 240,
+        leaveDuration: 180,
+        distance: "16px"
+      }
+    );
+    function M(m) {
+      u.value || (a.value = m), c("update:modelValue", m);
+    }
+    function O() {
+      i.value !== void 0 && (window.clearTimeout(i.value), i.value = void 0);
+    }
+    function q() {
+      O(), !(!f.value || n.persistent || n.timeout <= 0) && (i.value = window.setTimeout(() => {
+        R("timeout");
+      }, n.timeout));
+    }
+    function R(m = "manual") {
+      s.value = m, O(), M(!1), c("close", m);
+    }
+    function ve() {
+      var m, V;
+      c("action", (m = n.action) == null ? void 0 : m.value), (((V = n.action) == null ? void 0 : V.closeOnClick) ?? n.closeOnAction) && R("action");
+    }
+    function ge() {
+      n.pauseOnHover && O();
+    }
+    function _e() {
+      n.pauseOnHover && q();
+    }
+    ke(f, (m) => {
+      if (!m) {
+        O();
+        return;
+      }
+      q();
+    }), q(), he(() => {
+      O();
+    });
+    function ye() {
+      c("after-close", s.value);
+    }
+    return t({
+      open: () => M(!0),
+      close: R
+    }), (m, V) => (v(), y("div", {
+      class: b(["g-snackbar-layer", pe.value]),
+      style: T(de.value)
+    }, [
+      W(d(Ne), {
+        transition: me.value,
+        onAfterLeave: ye
+      }, {
+        default: ee(() => [
+          f.value ? (v(), y("section", {
+            key: 0,
+            class: b(["g-snackbar", fe.value]),
+            style: T(ue.value),
+            role: "status",
+            "aria-live": "polite",
+            onMouseenter: ge,
+            onMouseleave: _e
+          }, [
+            S("span", {
+              class: b(d(w))
+            }, null, 2),
+            S("span", {
+              class: b(d(I))
+            }, null, 2),
+            S("div", {
+              class: b(["g-snackbar__content", d(j)])
+            }, [
+              r.prepend || n.icon ? (v(), y("div", st, [
+                h(m.$slots, "prepend", {}, () => [
+                  n.icon ? (v(), G(Q, {
+                    key: 0,
+                    icon: n.icon,
+                    size: "22"
+                  }, null, 8, ["icon"])) : _("", !0)
+                ], !0)
+              ])) : _("", !0),
+              S("div", rt, [
+                r.title || n.title ? (v(), y("div", it, [
+                  h(m.$slots, "title", {}, () => [
+                    L(U(n.title), 1)
+                  ], !0)
+                ])) : _("", !0),
+                r.default || n.text ? (v(), y("div", ct, [
+                  h(m.$slots, "default", {}, () => [
+                    L(U(n.text), 1)
+                  ], !0)
+                ])) : _("", !0)
+              ]),
+              r.action || z.value || n.closeable ? (v(), y("div", lt, [
+                h(m.$slots, "action", {
+                  close: () => R("action")
+                }, () => [
+                  z.value ? (v(), G(at, {
+                    key: 0,
+                    variant: "text",
+                    size: "s",
+                    label: z.value,
+                    onClick: ve
+                  }, null, 8, ["label"])) : _("", !0)
+                ], !0),
+                n.closeable ? (v(), y("button", {
+                  key: 0,
+                  type: "button",
+                  class: "g-snackbar__close",
+                  "aria-label": "Close snackbar",
+                  onClick: V[0] || (V[0] = (bt) => R("dismiss"))
+                }, [
+                  W(Q, {
+                    icon: "close",
+                    size: "18"
+                  })
+                ])) : _("", !0)
+              ])) : _("", !0)
+            ], 2)
+          ], 38)) : _("", !0)
+        ]),
+        _: 3
+      }, 8, ["transition"])
+    ], 6));
+  }
+}), dt = /* @__PURE__ */ D(ut, [["__scopeId", "data-v-6d1d4bf9"]]), ft = "bottom-center", pt = "slide-y", B = /* @__PURE__ */ new Map();
+let mt = 0;
+function vt(e) {
+  return typeof e == "string" ? {
+    label: e
+  } : e;
+}
+function gt(e, t) {
+  return e === "fade" ? "fade" : e === "scale" ? "scale" : e === "slide-x" ? t.endsWith("right") ? "slide-x-reverse" : "slide-x" : t.startsWith("top") ? "slide-y" : "slide-y-reverse";
+}
+function _t() {
+  return P({
+    name: "GSnackbarHost",
+    props: {
+      items: {
+        type: Array,
+        required: !0
+      },
+      location: {
+        type: String,
+        required: !0
+      },
+      transition: {
+        type: String,
+        required: !0
+      },
+      close: {
+        type: Function,
+        required: !0
+      },
+      remove: {
+        type: Function,
+        required: !0
+      }
+    },
+    setup(e) {
+      return () => E(
+        "div",
+        {
+          class: [
+            "g-snackbar-stack",
+            `g-snackbar-stack_location-${e.location}`
+          ]
+        },
+        [
+          E(
+            "div",
+            {
+              class: "g-snackbar-stack__items"
+            },
+            e.items.map(
+              (t) => E(dt, {
+                key: t.id,
+                ...t,
+                modelValue: t.open,
+                position: "static",
+                transition: {
+                  name: gt(
+                    t.transition ?? e.transition,
+                    t.location
+                  ),
+                  appear: !0,
+                  duration: 240,
+                  leaveDuration: 180,
+                  distance: "18px",
+                  scale: 0.96
+                },
+                "onUpdate:modelValue": (o) => {
+                  t.open = o;
+                },
+                onClose: (o) => e.close(t.id, o),
+                onAfterClose: () => e.remove(t.id)
+              })
+            )
+          )
+        ]
+      );
+    }
+  });
+}
+function yt(e, t, o, n) {
+  const c = B.get(e);
+  if (c) return c;
+  const r = document.createElement("div");
+  r.className = "g-snackbar-stack__container", document.body.appendChild(r);
+  const i = Ce([]), a = ae(_t(), {
+    items: i,
+    location: e,
+    transition: t,
+    close: o,
+    remove: n
+  });
+  a.mount(r);
+  const s = {
+    app: a,
+    container: r,
+    items: i
+  };
+  return B.set(e, s), s;
+}
+function Bt() {
+  const e = te([]);
+  function t(r) {
+    for (const [i, a] of B.entries()) {
+      const s = a.items.findIndex((u) => u.id === r);
+      if (s !== -1) {
+        a.items.splice(s, 1), e.value = e.value.filter(
+          (u) => u.id !== r
+        ), a.items.length || window.setTimeout(() => {
+          a.items.length || (a.app.unmount(), a.container.remove(), B.delete(i));
+        }, 220);
+        return;
+      }
+    }
+  }
+  function o(r, i = "manual") {
+    for (const a of B.values()) {
+      const s = a.items.find((u) => u.id === r);
+      if (s) {
+        s.open = !1;
+        return;
+      }
+    }
+  }
+  function n(r) {
+    const i = typeof r == "string" ? { text: r } : r, a = i.location ?? ft, s = i.transition ?? pt, u = ++mt, f = {
+      ...i,
+      id: u,
+      open: !0,
+      location: a,
+      transition: s,
+      action: vt(i.action)
+    };
+    return yt(a, s, o, t).items.push(f), e.value = [...e.value, f], {
+      id: u,
+      close: (l = "manual") => {
+        o(u, l);
+      }
+    };
+  }
+  function c() {
+    for (const [r, i] of B.entries())
+      i.app.unmount(), i.container.remove(), B.delete(r);
+    e.value = [];
+  }
+  return ne(() => {
+    c();
+  }), {
+    show: n,
+    closeAll: c,
+    items: e
+  };
+}
+export {
+  Je as G,
+  at as _,
+  Q as a,
+  dt as b,
+  Bt as c,
+  Qe as d,
+  Xe as e,
+  F as f,
+  Ye as g,
+  le as m,
+  $t as u
+};