@gradient-ui/core 0.4.0 → 0.5.0-rc.0

package/package.json

@@ -1,12 +1,13 @@
 {
 	"name": "@gradient-ui/core",
-	"version": "0.4.0",
+	"version": "0.5.0-rc.0",
 	"private": false,
 	"scripts": {
 		"dev": "vite --config docs/vite.config.ts",
 		"dev:docs": "vite --config docs/vite.config.ts",
 		"build:docs": "vite build --config docs/vite.config.ts",
-		"build:lib": "vite build --config vite.lib.config.ts && vue-tsc -p tsconfig.lib.json",
+		"build:gradient-engine": "npm run build -w @gradient-ui/gradient-engine",
+		"build:lib": "npm run build:gradient-engine && vite build --config vite.lib.config.ts && vue-tsc -p tsconfig.lib.json",
 		"build": "npm run build:lib && npm run build:docs",
 		"preview:docs": "vite preview --config docs/vite.config.ts",
 		"prettier": "prettier --check . --ignore-unknown",
@@ -16,12 +17,17 @@
 		"eslint:fix": "eslint --fix .",
 		"lint:css": "stylelint src docs/src",
 		"lint:css:fix": "npm run lint:css -- --fix",
-		"type-check": "vue-tsc -b && npm run type-check:docs",
+		"type-check": "npm run build:gradient-engine && vue-tsc -b && npm run type-check:docs",
+		"type-check:gradient-engine": "npm run type-check -w @gradient-ui/gradient-engine",
 		"type-check:lib": "vue-tsc -p tsconfig.lib.json",
 		"type-check:docs": "vue-tsc -p docs/tsconfig.json",
+		"release:gradient-engine:check": "npm run type-check:gradient-engine && npm run build:gradient-engine",
+		"release:gradient-engine:pack": "npm run release:gradient-engine:check && npm pack -w @gradient-ui/gradient-engine",
+		"release:gradient-engine:publish": "npm run release:gradient-engine:check && npm publish -w @gradient-ui/gradient-engine --access public",
 		"prepack": "npm run build:lib"
 	},
 	"dependencies": {
+		"@gradient-ui/gradient-engine": "^0.5.0",
 		"@floating-ui/vue": "^1.1.10",
 		"@mdi/js": "^7.4.47",
 		"gib-validate": "^1.1.0"
@@ -165,6 +171,7 @@
 		"vue": "^3.5.0"
 	},
 	"workspaces": [
-		"docs"
+		"docs",
+		"packages/*"
 	]
 }

package/dist/GLoading.vue_vue_type_style_index_0_lang-CPzo3WD3.js

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