@gradient-ui/core 0.2.0

package/dist/GLoading.vue_vue_type_style_index_0_lang-DDqJEYGf.js

@@ -0,0 +1,691 @@
+import { computed as a, toValue as p, ref as B, onMounted as j, onBeforeUnmount as F, defineComponent as V, useAttrs as ae, TransitionGroup as se, Transition as ie, openBlock as y, createBlock as H, resolveDynamicComponent as le, mergeProps as ce, unref as w, withCtx as I, renderSlot as A, createElementBlock as h, normalizeStyle as O, normalizeClass as k, createTextVNode as U, toDisplayString as W, createCommentVNode as E, createElementVNode as f, Fragment as ue, renderList as de, createVNode as ge } from "vue";
+import "@mdi/js";
+import { M as ve, c as fe } from "./camelToKebabCase-KgkZ7-1F.js";
+const pe = (e, t) => {
+  const r = e.__vccOpts || e;
+  for (const [o, s] of t)
+    r[o] = s;
+  return r;
+};
+function g(e, t) {
+  return (r) => {
+    const o = {};
+    for (const s in e) {
+      const i = typeof e[s] == "object" && e[s] !== null && !Array.isArray(e[s]) ? { ...e[s] } : { type: e[s] };
+      r && s in r && (i.default = r[s]), t && !i.source && (i.source = t), o[s] = i;
+    }
+    return o;
+  };
+}
+const me = g({
+  disabled: Boolean
+});
+function ye(e, t) {
+  return a(() => e.disabled ? `${t}_disabled` : "");
+}
+const K = g({
+  rounded: Boolean
+});
+function _e(e, t) {
+  return a(() => e.rounded ? `${t}_rounded` : "");
+}
+const be = g({
+  size: {
+    type: String,
+    default: "m"
+  }
+});
+function et(e, t) {
+  return a(() => `${t}_${e.size}`);
+}
+const S = ke();
+function Se(e) {
+  var t;
+  return e ? ((t = S[e]) == null ? void 0 : t.color) ?? e : S.primary.color;
+}
+function Ce(e) {
+  var t;
+  return e ? ((t = S[e]) == null ? void 0 : t.onColor) ?? S.primary.onColor : S.primary.onColor;
+}
+function he(e) {
+  var t;
+  return e ? ((t = S[e]) == null ? void 0 : t.gradient) ?? `var(--g-gradient-${e})` : S.primary.gradient;
+}
+function $e(e) {
+  return a(() => he(p(e)));
+}
+function ke() {
+  const e = {
+    primary: {
+      color: "var(--g-token-color-primary)",
+      onColor: "var(--g-token-color-on-primary)",
+      gradient: "var(--g-gradient-main)"
+    },
+    main: {
+      color: "var(--g-token-color-primary)",
+      onColor: "var(--g-token-color-on-primary)",
+      gradient: "var(--g-gradient-main)"
+    },
+    error: {
+      color: "var(--g-token-color-error)",
+      onColor: "var(--g-token-color-on-error)",
+      gradient: "var(--g-gradient-error)"
+    },
+    warning: {
+      color: "var(--g-token-color-warning)",
+      onColor: "var(--g-token-color-on-warning)",
+      gradient: "var(--g-gradient-warning)"
+    },
+    success: {
+      color: "var(--g-token-color-success)",
+      onColor: "var(--g-token-color-on-success)",
+      gradient: "var(--g-gradient-success)"
+    },
+    surface: {
+      color: "var(--g-token-color-surface)",
+      onColor: "var(--g-token-color-on-surface)",
+      gradient: "var(--g-gradient-source-40)"
+    },
+    "on-surface": {
+      color: "var(--g-token-color-on-surface)",
+      onColor: "var(--g-token-color-surface)",
+      gradient: "var(--g-gradient-source-40)"
+    },
+    source: {
+      color: "rgb(var(--g-color-source-40))",
+      onColor: "rgb(var(--g-color-on-source-40))",
+      gradient: "var(--g-gradient-source-40)"
+    }
+  };
+  return z(e, "source"), Object.keys(ve).forEach((t) => {
+    z(e, t);
+  }), e;
+}
+function z(e, t) {
+  const r = fe(t);
+  for (let o = 10; o <= 100; o += 10) {
+    const s = {
+      color: `rgb(var(--g-color-${r}-${o}))`,
+      onColor: `rgb(var(--g-color-on-${r}-${o}))`,
+      gradient: `var(--g-gradient-${r}-${o})`
+    };
+    e[`${t}${o}`] = s, e[`${r}${o}`] = s, e[`${r}-${o}`] = s;
+  }
+  e[t] = e[`${t}40`], e[r] = e[`${r}40`];
+}
+const J = g({
+  color: {
+    type: String,
+    default: "primary"
+  }
+});
+function we(e) {
+  return {
+    colorStyles: a(() => {
+      const r = p(e.color);
+      return {
+        "--g-color": Se(r),
+        "--g-on-color": Ce(r),
+        "--g-surface-color": "var(--g-token-color-surface)",
+        "--g-on-surface-color": "var(--g-token-color-on-surface)"
+      };
+    })
+  };
+}
+function Q(e) {
+  const t = a(() => {
+    const i = p(e.activeState);
+    return p(e.active) && i !== void 0 ? i : p(e.state);
+  }), r = a(() => {
+    const i = t.value;
+    if (i)
+      return i;
+    const l = p(e.activeColor);
+    return p(e.active) && l !== void 0 ? l : p(e.color);
+  }), { colorStyles: o } = we({ color: r }), s = $e(r), c = a(
+    () => ({
+      ...o.value,
+      "--g-gradient-current": s.value
+    })
+  );
+  return {
+    resolvedColor: r,
+    resolvedState: t,
+    resolvedGradient: s,
+    colorStyles: o,
+    surfaceColorStyles: o,
+    gradientStyles: c
+  };
+}
+const xe = {
+  fade: "g-fade-transition",
+  scale: "g-scale-transition",
+  "scale-only": "g-scale-only-transition",
+  "slide-x": "g-slide-x-transition",
+  "slide-x-reverse": "g-slide-x-reverse-transition",
+  "slide-y": "g-slide-y-transition",
+  "slide-y-reverse": "g-slide-y-reverse-transition",
+  dialog: "g-dialog-transition",
+  overlay: "g-overlay-transition",
+  expand: "g-expand-transition"
+}, X = g(
+  {
+    transition: {
+      type: [Boolean, String, Object],
+      default: void 0
+    }
+  },
+  "transition"
+), Le = g(
+  {
+    ...X(),
+    name: String,
+    appear: Boolean,
+    disabled: Boolean,
+    group: Boolean,
+    tag: String,
+    mode: String,
+    origin: String,
+    duration: [Number, String],
+    enterDuration: [Number, String],
+    leaveDuration: [Number, String],
+    easing: String,
+    enterEasing: String,
+    leaveEasing: String,
+    distance: [Number, String],
+    scale: [Number, String],
+    opacity: {
+      type: Boolean,
+      default: void 0
+    },
+    leaveAbsolute: Boolean,
+    hideOnLeave: Boolean,
+    css: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  "transition"
+);
+function Te(e) {
+  return e ? xe[e] ?? e : "";
+}
+function De(e) {
+  if (!(e === void 0 || e === ""))
+    return typeof e == "number" ? `${e}px` : e;
+}
+function R(e) {
+  if (!(e === void 0 || e === ""))
+    return typeof e == "number" ? `${e}ms` : e;
+}
+function G(e, t) {
+  if (e === void 0 || e === "") return t;
+  if (typeof e == "number") return e;
+  const r = e.trim();
+  if (r.endsWith("ms"))
+    return Number.parseFloat(r);
+  if (r.endsWith("s"))
+    return Number.parseFloat(r) * 1e3;
+  const o = Number.parseFloat(r);
+  return Number.isNaN(o) ? t : o;
+}
+function Be(e, t) {
+  return e === !1 ? {
+    ...t,
+    disabled: !0
+  } : e === !0 || e === void 0 ? t : typeof e == "string" ? {
+    ...t,
+    name: e
+  } : {
+    ...t,
+    ...e
+  };
+}
+function Ee() {
+  const e = B(!1);
+  let t = null;
+  const r = () => {
+    e.value = (t == null ? void 0 : t.matches) ?? !1;
+  };
+  return j(() => {
+    typeof window > "u" || !window.matchMedia || (t = window.matchMedia("(prefers-reduced-motion: reduce)"), r(), t.addEventListener("change", r));
+  }), F(() => {
+    t == null || t.removeEventListener("change", r);
+  }), e;
+}
+const Me = 80, Pe = /* @__PURE__ */ V({
+  inheritAttrs: !1,
+  __name: "GTransition",
+  props: Le({
+    name: "fade",
+    css: !0
+  }),
+  emits: ["before-enter", "after-enter", "before-leave", "leave", "after-leave", "enter-cancelled", "leave-cancelled"],
+  setup(e, { emit: t }) {
+    const r = e, o = t, s = ae(), c = Ee(), i = a(
+      () => r.group ? se : ie
+    ), l = a(
+      () => Be(r.transition, M.value)
+    ), _ = a(
+      () => b.value ? "" : Te(l.value.name)
+    ), b = a(
+      () => r.disabled || c.value || l.value.disabled
+    ), $ = a(
+      () => r.group || l.value.mode === "default" ? void 0 : l.value.mode
+    ), C = a(
+      () => !b.value && l.value.css !== !1
+    ), u = a(() => {
+      if (!x.value || b.value) return;
+      const n = l.value;
+      return {
+        enter: G(
+          n.enterDuration ?? n.duration,
+          220
+        ),
+        leave: G(
+          n.leaveDuration ?? n.duration,
+          180
+        ) + Me
+      };
+    }), x = a(
+      () => l.value.name === "overlay" || _.value === "g-overlay-transition"
+    ), M = a(() => ({
+      name: r.name,
+      appear: r.appear,
+      mode: r.mode,
+      origin: r.origin,
+      duration: r.duration,
+      enterDuration: r.enterDuration,
+      leaveDuration: r.leaveDuration,
+      easing: r.easing,
+      enterEasing: r.enterEasing,
+      leaveEasing: r.leaveEasing,
+      distance: r.distance,
+      scale: r.scale,
+      opacity: r.opacity,
+      leaveAbsolute: r.leaveAbsolute,
+      hideOnLeave: r.hideOnLeave,
+      css: r.css
+    })), P = a(() => {
+      const n = l.value;
+      return {
+        "--g-transition-enter-duration": R(
+          n.enterDuration ?? n.duration
+        ),
+        "--g-transition-leave-duration": R(
+          n.leaveDuration ?? n.duration
+        ),
+        "--g-transition-enter-easing": n.enterEasing ?? n.easing,
+        "--g-transition-leave-easing": n.leaveEasing ?? n.easing,
+        "--g-transition-origin": n.origin,
+        "--g-transition-distance": De(n.distance),
+        "--g-transition-scale": n.scale === void 0 ? void 0 : String(n.scale),
+        "--g-transition-opacity-from": n.opacity === !1 ? "1" : void 0
+      };
+    });
+    function L(n) {
+      if (n instanceof HTMLElement)
+        for (const [d, D] of Object.entries(P.value))
+          D !== void 0 && n.style.setProperty(d, D);
+    }
+    function N(n) {
+      const { offsetTop: d, offsetLeft: D, offsetWidth: re, offsetHeight: oe } = n;
+      n._gTransitionInitialStyles = {
+        position: n.style.position,
+        top: n.style.top,
+        left: n.style.left,
+        width: n.style.width,
+        height: n.style.height,
+        display: n.style.display
+      }, n.style.position = "absolute", n.style.top = `${d}px`, n.style.left = `${D}px`, n.style.width = `${re}px`, n.style.height = `${oe}px`;
+    }
+    function v(n) {
+      const d = n._gTransitionInitialStyles;
+      d && (n.style.position = d.position, n.style.top = d.top, n.style.left = d.left, n.style.width = d.width, n.style.height = d.height, n.style.display = d.display, delete n._gTransitionInitialStyles);
+    }
+    function m(n) {
+      L(n), o("before-enter", n);
+    }
+    function T(n) {
+      o("after-enter", n);
+    }
+    function Z(n) {
+      L(n), o("before-leave", n);
+    }
+    function q(n) {
+      if (!(n instanceof HTMLElement)) {
+        o("leave", n);
+        return;
+      }
+      l.value.leaveAbsolute && N(n), l.value.hideOnLeave && n.style.setProperty("display", "none", "important"), o("leave", n);
+    }
+    function ee(n) {
+      n instanceof HTMLElement && v(n), o("after-leave", n);
+    }
+    function te(n) {
+      o("enter-cancelled", n);
+    }
+    function ne(n) {
+      n instanceof HTMLElement && v(n), o("leave-cancelled", n);
+    }
+    return (n, d) => (y(), H(le(i.value), ce(w(s), {
+      name: _.value,
+      css: C.value,
+      appear: l.value.appear,
+      duration: u.value,
+      mode: $.value,
+      tag: r.group ? r.tag : void 0,
+      onBeforeEnter: m,
+      onAfterEnter: T,
+      onBeforeLeave: Z,
+      onLeave: q,
+      onAfterLeave: ee,
+      onEnterCancelled: te,
+      onLeaveCancelled: ne
+    }), {
+      default: I(() => [
+        A(n.$slots, "default")
+      ]),
+      _: 3
+    }, 16, ["name", "css", "appear", "duration", "mode", "tag"]));
+  }
+}), Ne = (e) => a(() => {
+  const t = p(e);
+  return t === "" || t === null || t === void 0 ? "" : typeof t == "number" ? `${t}px` : /^\d+(\.\d+)?$/.test(t) ? `${t}px` : t;
+}), Oe = g({
+  variant: {
+    type: String,
+    default: "filled"
+  }
+});
+function Ve(e, t) {
+  return a(() => `${t}_${e.variant}`);
+}
+const Y = g({
+  state: String
+});
+function Ae(e, t) {
+  return a(() => e.state ? `${t}_${e.state}` : "");
+}
+const tt = g({
+  ...Oe(),
+  ...J(),
+  ...me(),
+  ...K(),
+  ...Y()
+});
+function nt(e, t) {
+  const r = Ve(e, t), o = ye(e, t), s = _e(e, t), c = Ae(e, t), { colorStyles: i } = Q(e), l = a(
+    () => [
+      r.value,
+      o.value,
+      s.value,
+      c.value
+    ].filter(Boolean)
+  );
+  return {
+    variantClass: r,
+    disabledClass: o,
+    roundedClass: s,
+    stateClass: c,
+    surfaceStyles: i,
+    surfaceClasses: l
+  };
+}
+function ze(e) {
+  return {
+    surfaceUnderlayClasses: a(() => [
+      `${e}__surface-underlay`
+    ])
+  };
+}
+function Re(e) {
+  return {
+    surfaceOverlayClasses: a(() => [
+      `${e}__surface-overlay`
+    ])
+  };
+}
+function Ge(e) {
+  return {
+    surfaceContentClasses: a(() => [
+      `${e}__surface-content`
+    ])
+  };
+}
+function je(e) {
+  return {
+    ...ze(e),
+    ...Re(e),
+    ...Ge(e)
+  };
+}
+const Fe = g({
+  ...J(),
+  ...K(),
+  ...be(),
+  ...Y(),
+  modelValue: {
+    type: Number,
+    default: 0
+  },
+  indeterminate: Boolean,
+  noLabel: Boolean,
+  label: String,
+  labelAlign: {
+    type: String,
+    default: "center"
+  },
+  view: {
+    type: String,
+    default: "default"
+  },
+  segments: {
+    type: Number,
+    default: 12
+  }
+}), He = {
+  key: 0,
+  class: "g-progress__label"
+}, Ie = ["aria-valuenow", "aria-valuetext"], Ue = /* @__PURE__ */ V({
+  __name: "GProgress",
+  props: Fe({ color: "primary" }),
+  setup(e) {
+    const t = e, { gradientStyles: r } = Q(t), o = B(0), s = B(null);
+    let c;
+    const i = a(
+      () => Math.min(100, Math.max(0, t.modelValue))
+    ), l = Ne(o), _ = a(
+      () => Math.max(2, Math.round(t.segments))
+    ), b = a(
+      () => Array.from({ length: _.value - 1 }, (v, m) => m)
+    ), $ = a(() => `${i.value}%`), C = a(
+      () => t.label ?? `${Math.round(i.value)}%`
+    ), u = (v) => ({
+      "--g-progress-segment-position": `${(v + 1) / _.value * 100}%`
+    }), x = a(() => ({
+      ...r.value,
+      "--g-progress-value": $.value,
+      "--g-progress-track-width": l.value
+    })), M = () => {
+      c = new ResizeObserver((v) => {
+        for (const m of v)
+          o.value = m.contentRect.width;
+      }), s.value && c.observe(s.value);
+    };
+    j(() => {
+      M();
+    }), F(() => {
+      c == null || c.disconnect();
+    });
+    const {
+      surfaceOverlayClasses: P,
+      surfaceUnderlayClasses: L,
+      surfaceContentClasses: N
+    } = je("g-progress");
+    return (v, m) => (y(), h("div", {
+      class: k(["g-progress", {
+        "g-progress_rounded": t.rounded,
+        "g-progress_indeterminate": t.indeterminate,
+        "g-progress_no-label": t.noLabel,
+        [`g-progress_${t.size}`]: !0,
+        [`g-progress_label-${t.labelAlign}`]: !0,
+        [`g-progress_view-${t.view}`]: !0
+      }]),
+      style: O(x.value)
+    }, [
+      t.noLabel ? E("", !0) : (y(), h("div", He, [
+        A(v.$slots, "default", {}, () => [
+          U(W(C.value), 1)
+        ], !0)
+      ])),
+      f("div", {
+        ref_key: "parentRef",
+        ref: s,
+        class: "g-progress__track",
+        role: "progressbar",
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-valuenow": t.indeterminate ? void 0 : i.value,
+        "aria-valuetext": t.indeterminate ? void 0 : C.value
+      }, [
+        f("span", {
+          class: k(w(L))
+        }, null, 2),
+        f("span", {
+          class: k(w(P))
+        }, null, 2),
+        f("div", {
+          class: k(["g-progress__surface-content", w(N)])
+        }, [...m[0] || (m[0] = [
+          f("div", { class: "g-progress__bar" }, [
+            f("div", { class: "g-progress__active" }, [
+              f("div", { class: "g-progress__overlay" })
+            ])
+          ], -1)
+        ])], 2),
+        t.view === "segmented" ? (y(!0), h(ue, { key: 0 }, de(b.value, (T) => (y(), h("span", {
+          key: T,
+          class: "g-progress__segment-divider",
+          style: O(u(T))
+        }, null, 4))), 128)) : E("", !0)
+      ], 8, Ie)
+    ], 6));
+  }
+}), We = /* @__PURE__ */ pe(Ue, [["__scopeId", "data-v-0140ebe7"]]), Ke = g({
+  ...X(),
+  text: String,
+  noText: Boolean,
+  show: Boolean,
+  color: String,
+  dark: Boolean,
+  opacity: [Number, String],
+  blur: [Number, String],
+  progressView: String,
+  onClose: Function
+}), Je = { class: "g-loading__body" }, Qe = {
+  key: 0,
+  class: "g-loading__text"
+}, Xe = { class: "g-loading__progress" }, rt = /* @__PURE__ */ V({
+  __name: "GLoading",
+  props: Ke({
+    text: "Loading...",
+    noText: !1,
+    show: !1,
+    color: "primary",
+    dark: !1,
+    opacity: void 0,
+    blur: void 0,
+    progressView: "glow",
+    transition: () => ({ name: "fade", duration: 220 }),
+    onClose: void 0
+  }),
+  emits: ["close"],
+  setup(e, { expose: t, emit: r }) {
+    const o = e, s = r, c = B(!1), i = a(() => o.show || c.value), l = a(() => ({
+      "--g-loading-overlay-opacity": o.opacity !== void 0 ? String(o.opacity) : void 0,
+      "--g-loading-overlay-blur": o.blur !== void 0 ? _(o.blur) : void 0
+    }));
+    function _(u) {
+      return typeof u == "number" ? `${u}px` : u;
+    }
+    function b() {
+      c.value = !0;
+    }
+    function $() {
+      c.value = !1;
+    }
+    function C() {
+      var u;
+      (u = o.onClose) == null || u.call(o), s("close");
+    }
+    return t({
+      hide: $,
+      show: b,
+      isVisible: i
+    }), (u, x) => (y(), H(w(Pe), {
+      transition: o.transition,
+      name: "scale",
+      onAfterLeave: C
+    }, {
+      default: I(() => [
+        i.value ? (y(), h("div", {
+          key: 0,
+          class: k(["g-loading", { "g-loading_dark": o.dark }]),
+          style: O(l.value),
+          "aria-live": "polite",
+          "aria-busy": "true"
+        }, [
+          f("div", Je, [
+            o.noText ? E("", !0) : (y(), h("div", Qe, [
+              A(u.$slots, "default", {}, () => [
+                U(W(o.text), 1)
+              ])
+            ])),
+            f("div", Xe, [
+              ge(We, {
+                "no-label": "",
+                indeterminate: "",
+                "model-value": 100,
+                color: o.color,
+                view: o.progressView,
+                size: "s"
+              }, null, 8, ["color", "view"])
+            ])
+          ])
+        ], 6)) : E("", !0)
+      ]),
+      _: 3
+    }, 8, ["transition"]));
+  }
+});
+export {
+  We as G,
+  rt as _,
+  Pe as a,
+  Se as b,
+  pe as c,
+  Y as d,
+  me as e,
+  Ae as f,
+  Ne as g,
+  K as h,
+  Oe as i,
+  _e as j,
+  $e as k,
+  be as l,
+  X as m,
+  tt as n,
+  nt as o,
+  g as p,
+  je as q,
+  he as r,
+  et as s,
+  Q as t,
+  ye as u,
+  J as v,
+  Ee as w,
+  Be as x,
+  Le as y,
+  Ve as z
+};