@gradient-ui/core 0.2.0 → 0.4.0

package/dist/useSnackbar-2iJU4bdd.js

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