@gradient-ui/core 0.8.0 → 1.0.0

package/dist/material-Cn0l9r_y.js

@@ -0,0 +1,182 @@
+import { p as propsFactory } from "./propsFactory-FM5RGbLN.js";
+import { computed, toValue, watch, onBeforeUnmount } from "vue";
+import { u as useGradientMaterial } from "./gradientMaterial-BEhJP5b1.js";
+import { c as canUseDom } from "./environment-o0e-UUbv.js";
+import { c as createClientElementRegistry } from "./mount-CqN_WfIk.js";
+const STYLE_ATTR = "data-gradient-engine-style", SVG_ATTR = "data-gradient-engine-svg", styleRegistry = createClientElementRegistry(), svgRegistry = createClientElementRegistry(), mountGradientCss = (id, cssText) => !canUseDom() || !cssText.trim() ? () => {
+} : styleRegistry.mount(id, (clientDocument) => {
+  const style = clientDocument.createElement("style");
+  return style.setAttribute(STYLE_ATTR, id), style.textContent = cssText, style;
+}), mountGradientSvg = (id, svgText) => !canUseDom() || !svgText.trim() ? () => {
+} : svgRegistry.mount(id, (clientDocument) => {
+  const wrapper = clientDocument.createElement("div");
+  return wrapper.setAttribute(SVG_ATTR, id), wrapper.style.position = "absolute", wrapper.style.width = "0", wrapper.style.height = "0", wrapper.style.overflow = "hidden", wrapper.innerHTML = svgText, wrapper;
+}), mountGradientMaterial = (material) => {
+  var _a, _b;
+  if (!canUseDom())
+    return {
+      dispose: () => {
+      },
+      id: material.id
+    };
+  const disposeCss = mountGradientCss(material.id, material.cssText), disposeSvg = (_b = (_a = material.effects) == null ? void 0 : _a.morph) != null && _b.svg ? mountGradientSvg(`${material.id}-morph`, material.effects.morph.svg) : () => {
+  };
+  return {
+    dispose: () => {
+      disposeSvg(), disposeCss();
+    },
+    id: material.id
+  };
+}, useGradientRuntime = (options = {}) => {
+  let handle = null;
+  const enabled = computed(() => !!toValue(options.enabled)), material = computed(() => toValue(options.material) ?? null), morphEnabled = computed(
+    () => {
+      var _a, _b;
+      return !!toValue(options.morph) && !!((_b = (_a = material.value) == null ? void 0 : _a.morphBlobs) != null && _b.length);
+    }
+  ), morphBlobs = computed(
+    () => {
+      var _a;
+      return morphEnabled.value ? ((_a = material.value) == null ? void 0 : _a.morphBlobs) ?? [] : [];
+    }
+  ), dispose = () => {
+    handle == null || handle.dispose(), handle = null;
+  };
+  return watch(
+    () => {
+      var _a;
+      return [enabled.value, (_a = material.value) == null ? void 0 : _a.id];
+    },
+    () => {
+      dispose(), enabled.value && material.value && (handle = mountGradientMaterial(material.value));
+    },
+    {
+      immediate: !0
+    }
+  ), onBeforeUnmount(dispose), {
+    morphBlobs,
+    morphEnabled
+  };
+}, useMaterialLayers = (baseClass = "g-material") => {
+  const materialGlowClasses = computed(() => [`${baseClass}__material-glow`]), materialGlowBaseClasses = computed(() => [
+    `${baseClass}__material-glow-base`
+  ]), materialGlowMorphClasses = computed(() => [
+    `${baseClass}__material-glow-morph`
+  ]), materialGlowMorphBlobClasses = computed(() => [
+    `${baseClass}__material-glow-morph-blob`
+  ]), materialMorphClasses = computed(() => [
+    `${baseClass}__material-morph`
+  ]), materialMorphBlobClasses = computed(() => [
+    `${baseClass}__material-morph-blob`
+  ]);
+  return {
+    materialContentClasses: computed(() => [
+      `${baseClass}__material-content`
+    ]),
+    materialGlowBaseClasses,
+    materialGlowClasses,
+    materialGlowMorphBlobClasses,
+    materialGlowMorphClasses,
+    materialMorphBlobClasses,
+    materialMorphClasses
+  };
+}, makeMaterialProps = propsFactory({
+  materialKind: {
+    type: String,
+    default: "surface"
+  },
+  gradientRecipe: String,
+  borderRadius: {
+    type: [Number, String],
+    default: 8
+  },
+  padding: {
+    type: [Number, String],
+    default: 0
+  },
+  shadow: Boolean,
+  dropShadow: Boolean,
+  morph: Boolean,
+  animationOptions: Object,
+  shadowOptions: Object,
+  dropShadowOptions: Object,
+  morphOptions: Object
+}), toDuration = (duration) => typeof duration == "number" ? `${duration}ms` : duration, getMorphBlobStyle = (blob) => ({
+  "--g-gradient-morph-blob-color": blob.color,
+  "--g-gradient-morph-x": `${blob.dx}%`,
+  "--g-gradient-morph-x2": `${blob.dx2}%`,
+  "--g-gradient-morph-y": `${blob.dy}%`,
+  "--g-gradient-morph-y2": `${blob.dy2}%`,
+  "--g-gradient-morph-origin-x": blob.originX,
+  "--g-gradient-morph-origin-y": blob.originY,
+  "--g-gradient-morph-animation": blob.animationName,
+  "--g-gradient-morph-blur": `${blob.blur}px`,
+  "--g-gradient-morph-opacity": blob.opacity,
+  "--g-gradient-morph-rotate-mid": `${blob.rotateMid}deg`,
+  "--g-gradient-morph-rotate-to": `${blob.rotateTo}deg`,
+  "--g-gradient-morph-scale-mid": blob.scaleMid,
+  "--g-gradient-morph-scale": blob.scaleTo,
+  animationDelay: `${blob.delay}ms`,
+  animationDuration: toDuration(blob.duration),
+  left: `${blob.x}%`,
+  top: `${blob.y}%`,
+  width: `${blob.size}%`
+}), resolveMorphOptions = (morph) => typeof morph == "object" ? morph : morph ? {} : void 0, toPx = (value) => value == null ? "" : typeof value == "number" ? `${value}px` : /^\d+(\.\d+)?$/.test(value) ? `${value}px` : value, useMaterial = (options = {}) => {
+  const baseClass = computed(() => options.baseClass ?? "g-material"), {
+    materialContentClasses,
+    materialGlowBaseClasses,
+    materialGlowClasses,
+    materialGlowMorphBlobClasses,
+    materialGlowMorphClasses,
+    materialMorphBlobClasses,
+    materialMorphClasses
+  } = useMaterialLayers(baseClass.value), borderRadius = computed(() => toPx(toValue(options.borderRadius))), padding = computed(() => toPx(toValue(options.padding))), morphOptions = computed(
+    () => resolveMorphOptions(toValue(options.morph))
+  ), hasMorph = computed(() => !!morphOptions.value), hasEffects = computed(
+    () => !!(toValue(options.effects) || toValue(options.shadow) || toValue(options.dropShadow) || hasMorph.value)
+  ), hasAnimations = computed(() => !!toValue(options.animations)), { gradientMaterial, gradientMaterialStyles } = useGradientMaterial({
+    color: () => toValue(options.color) ?? toValue(options.state),
+    kind: () => toValue(options.kind),
+    recipe: () => toValue(options.recipe),
+    effects: hasEffects,
+    animations: hasAnimations,
+    shadow: () => toValue(options.shadow),
+    dropShadow: () => toValue(options.dropShadow),
+    animation: () => toValue(options.animation),
+    morph: morphOptions,
+    options: () => toValue(options.options)
+  }), { morphBlobs, morphEnabled } = useGradientRuntime({
+    enabled: () => !!(hasAnimations.value || hasMorph.value),
+    material: gradientMaterial,
+    morph: hasMorph
+  }), materialClasses = computed(() => [`${baseClass.value}_surface`]), materialStyles = computed(() => {
+    const styles = {
+      ...gradientMaterialStyles.value ?? {}
+    };
+    return borderRadius.value && (styles["--g-gradient-material-radius"] = borderRadius.value), padding.value && (styles["--g-gradient-material-padding"] = padding.value), Object.keys(styles).length ? styles : void 0;
+  });
+  return {
+    getMorphBlobStyle,
+    gradientMaterial,
+    materialClasses,
+    materialContentClasses,
+    materialGlowBaseClasses,
+    materialGlowClasses,
+    materialGlowMorphBlobClasses,
+    materialGlowMorphClasses,
+    materialMorphBlobClasses,
+    materialMorphClasses,
+    materialStyles,
+    morphBlobs,
+    morphEnabled
+  };
+};
+export {
+  mountGradientCss as a,
+  mountGradientMaterial as b,
+  mountGradientSvg as c,
+  useMaterial as d,
+  useMaterialLayers as e,
+  makeMaterialProps as m,
+  useGradientRuntime as u
+};

package/dist/materialSurface-BZWqxSOo.cjs

@@ -0,0 +1 @@
+"use strict";const vue=require("vue"),glass=require("./glass-CZEblMo2.cjs"),gradient=require("./gradient-Bf_C3oqp.cjs"),material=require("./material-CkThdnz0.cjs"),surfaceMaterial=require("./surfaceMaterial-JpbVongH.cjs"),surface=require("./surface-NFdB950M.cjs"),surfaceColor=require("./surfaceColor-BlDoAKoV.cjs"),propsFactory=require("./propsFactory-DT6-QS4L.cjs"),makeMaterialSurfaceProps=propsFactory.propsFactory({...material.makeMaterialProps(),...glass.makeGlassProps(),...gradient.makeGradientProps({borderWidth:void 0,borderRadius:void 0,interactive:!1})}),useMaterialSurface=(props,baseClass,options={})=>{const{colorStyles,resolvedColor,resolvedState}=surfaceColor.useSurfaceColor(props),{glassStyles}=glass.useGlass(props),material2=surfaceMaterial.useSurfaceMaterial(props,{baseClass,color:resolvedColor,state:resolvedState,kind:options.kind??"surface",variant:()=>props.variant,morphScope:"always"}),surfaceStyles=vue.computed(()=>[colorStyles.value,material2.materialStyles.value,props.variant==="glass"?glassStyles.value:void 0]),materialFrameProps=vue.computed(()=>({animateGlow:props.animateGlow,borderRadius:props.borderRadius,borderWidth:props.borderWidth??(props.glow||props.animateGlow||props.variant==="outlined"||props.variant==="glass"?1:0),color:resolvedColor.value,glow:props.glow,gradientRecipe:props.gradientRecipe,inheritWidth:!0,interactive:!1,placement:props.placement,rounded:!1,shadow:!1,state:resolvedState.value,surfaceFill:"transparent"}));return{...material2,...surface.useSurfaceLayers(baseClass),resolvedColor,resolvedState,materialFrameProps,surfaceStyles}};exports.makeMaterialSurfaceProps=makeMaterialSurfaceProps;exports.useMaterialSurface=useMaterialSurface;

package/dist/materialSurface-DKWanYUC.js

@@ -0,0 +1,57 @@
+import { computed } from "vue";
+import { u as useGlass, m as makeGlassProps } from "./glass-CJjbKWWO.js";
+import { m as makeGradientProps } from "./gradient-Cesrzb2-.js";
+import { m as makeMaterialProps } from "./material-Cn0l9r_y.js";
+import { u as useSurfaceMaterial } from "./surfaceMaterial-B1a1iV02.js";
+import { u as useSurfaceLayers } from "./surface-i-1vm2j3.js";
+import { u as useSurfaceColor } from "./surfaceColor-Cic675ry.js";
+import { p as propsFactory } from "./propsFactory-FM5RGbLN.js";
+const makeMaterialSurfaceProps = propsFactory({
+  ...makeMaterialProps(),
+  ...makeGlassProps(),
+  ...makeGradientProps({
+    borderWidth: void 0,
+    borderRadius: void 0,
+    interactive: !1
+  })
+}), useMaterialSurface = (props, baseClass, options = {}) => {
+  const { colorStyles, resolvedColor, resolvedState } = useSurfaceColor(props), { glassStyles } = useGlass(props), material = useSurfaceMaterial(props, {
+    baseClass,
+    color: resolvedColor,
+    state: resolvedState,
+    kind: options.kind ?? "surface",
+    variant: () => props.variant,
+    morphScope: "always"
+  }), surfaceStyles = computed(() => [
+    colorStyles.value,
+    material.materialStyles.value,
+    props.variant === "glass" ? glassStyles.value : void 0
+  ]), materialFrameProps = computed(() => ({
+    animateGlow: props.animateGlow,
+    borderRadius: props.borderRadius,
+    borderWidth: props.borderWidth ?? (props.glow || props.animateGlow || props.variant === "outlined" || props.variant === "glass" ? 1 : 0),
+    color: resolvedColor.value,
+    glow: props.glow,
+    gradientRecipe: props.gradientRecipe,
+    inheritWidth: !0,
+    interactive: !1,
+    placement: props.placement,
+    rounded: !1,
+    // The material owns elevation; the frame only owns the real border/glow.
+    shadow: !1,
+    state: resolvedState.value,
+    surfaceFill: "transparent"
+  }));
+  return {
+    ...material,
+    ...useSurfaceLayers(baseClass),
+    resolvedColor,
+    resolvedState,
+    materialFrameProps,
+    surfaceStyles
+  };
+};
+export {
+  makeMaterialSurfaceProps as m,
+  useMaterialSurface as u
+};

package/dist/menuContext-COshJAv-.js

@@ -0,0 +1,14 @@
+import { provide, inject } from "vue";
+const navbarMenuInjectionKey = Symbol(
+  "g-navbar-menu"
+);
+function provideNavbarMenu(context) {
+  provide(navbarMenuInjectionKey, context);
+}
+function useNavbarMenuInject() {
+  return inject(navbarMenuInjectionKey, null);
+}
+export {
+  provideNavbarMenu as p,
+  useNavbarMenuInject as u
+};

package/dist/menuContext-DqTLm_y8.cjs

@@ -0,0 +1 @@
+"use strict";const vue=require("vue"),navbarMenuInjectionKey=Symbol("g-navbar-menu");function provideNavbarMenu(context){vue.provide(navbarMenuInjectionKey,context)}function useNavbarMenuInject(){return vue.inject(navbarMenuInjectionKey,null)}exports.provideNavbarMenu=provideNavbarMenu;exports.useNavbarMenuInject=useNavbarMenuInject;

package/dist/mount-CqN_WfIk.js

@@ -0,0 +1,58 @@
+import { createApp } from "vue";
+import { g as getClientDocument, d as isClientHTMLElement } from "./environment-o0e-UUbv.js";
+const resolveClientTarget = (target) => {
+  const clientDocument = getClientDocument();
+  return clientDocument ? target ? isClientHTMLElement(target) ? target : clientDocument.querySelector(target) : clientDocument.body : null;
+}, mountClientComponent = (component, options = {}) => {
+  const clientDocument = getClientDocument(), target = resolveClientTarget(options.target);
+  if (!clientDocument || !target) return null;
+  const container = clientDocument.createElement("div");
+  options.containerClass && (container.className = options.containerClass), target.appendChild(container);
+  const app = createApp(component, options.props ?? null), instance = app.mount(container);
+  let mounted = !0;
+  return {
+    app,
+    container,
+    instance,
+    unmount: () => {
+      mounted && (mounted = !1, app.unmount(), container.remove());
+    }
+  };
+}, mountClientStyle = (id, cssText) => {
+  const clientDocument = getClientDocument();
+  if (!clientDocument) return null;
+  let style = clientDocument.getElementById(id);
+  return style || (style = clientDocument.createElement("style"), style.id = id, clientDocument.head.appendChild(style)), style.textContent = cssText, style;
+}, createClientElementRegistry = () => {
+  const entries = /* @__PURE__ */ new Map(), createDispose = (id) => {
+    let disposed = !1;
+    return () => {
+      if (disposed) return;
+      disposed = !0;
+      const entry = entries.get(id);
+      entry && (entry.count -= 1, !(entry.count > 0) && (entry.element.remove(), entries.delete(id)));
+    };
+  };
+  return {
+    mount(id, createElement) {
+      const existing = entries.get(id);
+      if (existing)
+        return existing.count += 1, createDispose(id);
+      const clientDocument = getClientDocument();
+      if (!clientDocument) return () => {
+      };
+      const element = createElement(clientDocument);
+      return clientDocument.head.append(element), entries.set(id, { count: 1, element }), createDispose(id);
+    },
+    clear() {
+      for (const entry of entries.values()) entry.element.remove();
+      entries.clear();
+    }
+  };
+};
+export {
+  mountClientStyle as a,
+  createClientElementRegistry as c,
+  mountClientComponent as m,
+  resolveClientTarget as r
+};

package/dist/mount-qFaEMFZj.cjs

@@ -0,0 +1 @@
+"use strict";const vue=require("vue"),environment=require("./environment-Dr5kpq3D.cjs"),resolveClientTarget=target=>{const clientDocument=environment.getClientDocument();return clientDocument?target?environment.isClientHTMLElement(target)?target:clientDocument.querySelector(target):clientDocument.body:null},mountClientComponent=(component,options={})=>{const clientDocument=environment.getClientDocument(),target=resolveClientTarget(options.target);if(!clientDocument||!target)return null;const container=clientDocument.createElement("div");options.containerClass&&(container.className=options.containerClass),target.appendChild(container);const app=vue.createApp(component,options.props??null),instance=app.mount(container);let mounted=!0;return{app,container,instance,unmount:()=>{mounted&&(mounted=!1,app.unmount(),container.remove())}}},mountClientStyle=(id,cssText)=>{const clientDocument=environment.getClientDocument();if(!clientDocument)return null;let style=clientDocument.getElementById(id);return style||(style=clientDocument.createElement("style"),style.id=id,clientDocument.head.appendChild(style)),style.textContent=cssText,style},createClientElementRegistry=()=>{const entries=new Map,createDispose=id=>{let disposed=!1;return()=>{if(disposed)return;disposed=!0;const entry=entries.get(id);entry&&(entry.count-=1,!(entry.count>0)&&(entry.element.remove(),entries.delete(id)))}};return{mount(id,createElement){const existing=entries.get(id);if(existing)return existing.count+=1,createDispose(id);const clientDocument=environment.getClientDocument();if(!clientDocument)return()=>{};const element=createElement(clientDocument);return clientDocument.head.append(element),entries.set(id,{count:1,element}),createDispose(id)},clear(){for(const entry of entries.values())entry.element.remove();entries.clear()}}};exports.createClientElementRegistry=createClientElementRegistry;exports.mountClientComponent=mountClientComponent;exports.mountClientStyle=mountClientStyle;exports.resolveClientTarget=resolveClientTarget;