geekin-devtoys 0.3.2 → 0.3.4

package/lib/AnimatePresence-CXPNzIHs.js

@@ -0,0 +1,9 @@
+"use strict";const d=require("./index-xqOURU1q.js"),i=require("vue");var P=0;function y(a){const r=new WeakMap,s=d.useMotionConfig();function p(o){if(a.mode!=="popLayout")return;const u=o.offsetParent,h=u instanceof HTMLElement&&u.offsetWidth||0,c={height:o.offsetHeight||0,width:o.offsetWidth||0,top:o.offsetTop,left:o.offsetLeft,right:0};c.right=h-c.width-c.left;const v=a.anchorX==="left"?`left: ${c.left}px`:`right: ${c.right}px`,g=`pop-${P++}`;o.dataset.motionPopId=g;const t=document.createElement("style");s.value.nonce&&(t.nonce=s.value.nonce),r.set(o,t),document.head.appendChild(t),t.sheet&&t.sheet.insertRule(`
+    [data-motion-pop-id="${g}"] {
+      position: absolute !important;
+      width: ${c.width}px !important;
+      height: ${c.height}px !important;
+      top: ${c.top}px !important;
+      ${v} !important;
+      }
+      `)}function m(o){const u=r.get(o);u&&(r.delete(o),d.frame.render(()=>{document.head.removeChild(u)}))}return{addPopStyle:p,removePopStyle:m}}var C=0;function S(a){const r=String(C++),s=new Map,{addPopStyle:p,removePopStyle:m}=y(a);function o(t){const e=[],n=d.mountedStates.get(t);n&&t.getAttribute(d.motionGlobalConfig.motionAttribute)===r&&e.push(n);const f=Array.from(t.querySelectorAll(`[${d.motionGlobalConfig.motionAttribute}="${r}"]`));for(const x of f){const l=d.mountedStates.get(x);l&&e.push(l)}return e}function u(t,e){const n=s.get(t);n&&(n.remaining.delete(e),n.remaining.size===0&&c(n))}const h={initial:a.initial,custom:a.custom,presenceId:r,onMotionExitComplete:u};d.provideAnimatePresence(h),i.onMounted(()=>{h.initial=void 0});function c(t){m(t.el),t.states.forEach(e=>{e.getSnapshot(e.options,!1)}),t.done(),s.delete(t.el),t.el?.isConnected?t.states[0]?.didUpdate():t.states.forEach(e=>{e.unmount()}),a.onExitComplete?.()}function v(t,e){o(t).forEach(n=>{n.setActive("exit",!1),n.getSnapshot(n.options,!0)}),e()}function g(t,e){h.custom=a.custom;const n=t,f=o(n);if(f.length===0){e(),a.onExitComplete?.();return}const x={remaining:new Set(f),states:f,done:e,el:n};s.set(n,x),p(n),f.forEach(l=>{l.presenceContainer=n,l.setActive("exit",!0),l.getSnapshot(l.options,!1)}),f[0]?.didUpdate()}return i.onUnmounted(()=>{s.forEach(t=>{t.states.forEach(e=>{e.unmount()})}),s.clear()}),{enter:v,exit:g}}var E=i.defineComponent({name:"AnimatePresence",inheritAttrs:!0,__name:"AnimatePresence",props:{mode:{default:"sync"},initial:{type:Boolean,default:!0},as:{},custom:{},onExitComplete:{},anchorX:{default:"left"}},setup(a){const r=a,{enter:s,exit:p}=S(r),m=i.computed(()=>r.mode!=="wait"?{tag:r.as}:{mode:r.mode==="wait"?"out-in":void 0});return(o,u)=>(i.openBlock(),i.createBlock(i.resolveDynamicComponent(o.mode==="wait"?i.Transition:i.TransitionGroup),i.mergeProps(m.value,{appear:"",css:!1,onLeave:i.unref(p),onEnter:i.unref(s)}),{default:i.withCtx(()=>[i.renderSlot(o.$slots,"default")]),_:3},16,["onLeave","onEnter"]))}}),A=E;exports.AnimatePresence_default=A;

package/lib/AnimatePresence-DkTyYbzH.mjs

@@ -0,0 +1,136 @@
+import { u as P, f as C, p as E, a as v, b as x } from "./index-CVPHcKaV.mjs";
+import { onMounted as S, onUnmounted as A, defineComponent as _, computed as w, createBlock as $, openBlock as M, resolveDynamicComponent as b, Transition as L, TransitionGroup as I, mergeProps as T, unref as y, withCtx as W, renderSlot as k } from "vue";
+var z = 0;
+function B(a) {
+  const i = /* @__PURE__ */ new WeakMap(), r = P();
+  function p(o) {
+    if (a.mode !== "popLayout") return;
+    const c = o.offsetParent, d = c instanceof HTMLElement && c.offsetWidth || 0, s = {
+      height: o.offsetHeight || 0,
+      width: o.offsetWidth || 0,
+      top: o.offsetTop,
+      left: o.offsetLeft,
+      right: 0
+    };
+    s.right = d - s.width - s.left;
+    const h = a.anchorX === "left" ? `left: ${s.left}px` : `right: ${s.right}px`, m = `pop-${z++}`;
+    o.dataset.motionPopId = m;
+    const t = document.createElement("style");
+    r.value.nonce && (t.nonce = r.value.nonce), i.set(o, t), document.head.appendChild(t), t.sheet && t.sheet.insertRule(`
+    [data-motion-pop-id="${m}"] {
+      position: absolute !important;
+      width: ${s.width}px !important;
+      height: ${s.height}px !important;
+      top: ${s.top}px !important;
+      ${h} !important;
+      }
+      `);
+  }
+  function l(o) {
+    const c = i.get(o);
+    c && (i.delete(o), C.render(() => {
+      document.head.removeChild(c);
+    }));
+  }
+  return {
+    addPopStyle: p,
+    removePopStyle: l
+  };
+}
+var U = 0;
+function G(a) {
+  const i = String(U++), r = /* @__PURE__ */ new Map(), { addPopStyle: p, removePopStyle: l } = B(a);
+  function o(t) {
+    const e = [], n = v.get(t);
+    n && t.getAttribute(x.motionAttribute) === i && e.push(n);
+    const f = Array.from(t.querySelectorAll(`[${x.motionAttribute}="${i}"]`));
+    for (const g of f) {
+      const u = v.get(g);
+      u && e.push(u);
+    }
+    return e;
+  }
+  function c(t, e) {
+    const n = r.get(t);
+    n && (n.remaining.delete(e), n.remaining.size === 0 && s(n));
+  }
+  const d = {
+    initial: a.initial,
+    custom: a.custom,
+    presenceId: i,
+    onMotionExitComplete: c
+  };
+  E(d), S(() => {
+    d.initial = void 0;
+  });
+  function s(t) {
+    l(t.el), t.states.forEach((e) => {
+      e.getSnapshot(e.options, !1);
+    }), t.done(), r.delete(t.el), t.el?.isConnected ? t.states[0]?.didUpdate() : t.states.forEach((e) => {
+      e.unmount();
+    }), a.onExitComplete?.();
+  }
+  function h(t, e) {
+    o(t).forEach((n) => {
+      n.setActive("exit", !1), n.getSnapshot(n.options, !0);
+    }), e();
+  }
+  function m(t, e) {
+    d.custom = a.custom;
+    const n = t, f = o(n);
+    if (f.length === 0) {
+      e(), a.onExitComplete?.();
+      return;
+    }
+    const g = {
+      remaining: new Set(f),
+      states: f,
+      done: e,
+      el: n
+    };
+    r.set(n, g), p(n), f.forEach((u) => {
+      u.presenceContainer = n, u.setActive("exit", !0), u.getSnapshot(u.options, !1);
+    }), f[0]?.didUpdate();
+  }
+  return A(() => {
+    r.forEach((t) => {
+      t.states.forEach((e) => {
+        e.unmount();
+      });
+    }), r.clear();
+  }), {
+    enter: h,
+    exit: m
+  };
+}
+var H = /* @__PURE__ */ _({
+  name: "AnimatePresence",
+  inheritAttrs: !0,
+  __name: "AnimatePresence",
+  props: {
+    mode: { default: "sync" },
+    initial: {
+      type: Boolean,
+      default: !0
+    },
+    as: {},
+    custom: {},
+    onExitComplete: {},
+    anchorX: { default: "left" }
+  },
+  setup(a) {
+    const i = a, { enter: r, exit: p } = G(i), l = w(() => i.mode !== "wait" ? { tag: i.as } : { mode: i.mode === "wait" ? "out-in" : void 0 });
+    return (o, c) => (M(), $(b(o.mode === "wait" ? L : I), T(l.value, {
+      appear: "",
+      css: !1,
+      onLeave: y(p),
+      onEnter: y(r)
+    }), {
+      default: W(() => [k(o.$slots, "default")]),
+      _: 3
+    }, 16, ["onLeave", "onEnter"]));
+  }
+}), D = H;
+export {
+  D as A
+};

package/lib/GCard/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue"),U=require("../_plugin-vue_export-helper-BHFhmbuH.js"),H={class:"g-card__content"},W=t.defineComponent({__name:"index",props:{className:{default:""},edgeSensitivity:{default:30},glowColor:{default:"40 80 80"},backgroundColor:{default:"#060010"},borderRadius:{default:28},glowRadius:{default:40},glowIntensity:{default:1},coneSpread:{default:25},animated:{type:Boolean,default:!1},colors:{default:()=>["#c084fc","#f472b6","#38bdf8"]},fillOpacity:{default:.5}},setup(k){function R(e){const a=e.match(/([\d.]+)\s*([\d.]+)%?\s*([\d.]+)%?/);return a?{h:parseFloat(a[1]),s:parseFloat(a[2]),l:parseFloat(a[3])}:{h:40,s:80,l:80}}function O(e,a){const{h:n,s:l,l:o}=R(e),s=`${n}deg ${l}% ${o}%`;return[[0,0,0,1,100,!0],[0,0,1,0,60,!0],[0,0,3,0,50,!0],[0,0,6,0,40,!0],[0,0,15,0,30,!0],[0,0,25,2,20,!0],[0,0,50,2,10,!0],[0,0,1,0,60,!1],[0,0,3,0,50,!1],[0,0,6,0,40,!1],[0,0,15,0,30,!1],[0,0,25,2,20,!1],[0,0,50,2,10,!1]].map(([d,i,h,v,G,T])=>{const q=Math.min(G*a,100);return`${T?"inset ":""}${d}px ${i}px ${h}px ${v}px hsl(${s} / ${q}%)`}).join(", ")}function S(e){return 1-Math.pow(1-e,3)}function x(e){return e*e*e}function b({start:e=0,end:a=100,duration:n=1e3,delay:l=0,ease:o=S,onUpdate:s,onEnd:c}){const d=performance.now()+l;function i(){const h=performance.now()-d,v=Math.min(h/n,1);s(e+(a-e)*o(v)),v<1?requestAnimationFrame(i):c&&c()}setTimeout(()=>requestAnimationFrame(i),l)}const E=["80% 55%","69% 34%","8% 6%","41% 38%","86% 85%","82% 18%","51% 4%"],P=[0,1,2,0,1,2,1];function N(e){const a=[];for(let n=0;n<7;n++){const l=e[Math.min(P[n],e.length-1)];a.push(`radial-gradient(at ${E[n]}, ${l} 0px, transparent 50%)`)}return a.push(`linear-gradient(${e[0]} 0 100%)`),a}const r=k,_=t.useTemplateRef("cardRef"),y=t.ref(!1),p=t.ref(45),g=t.ref(0),$=t.ref(!1),M=e=>{const{width:a,height:n}=e.getBoundingClientRect();return[a/2,n/2]},B=(e,a,n)=>{const[l,o]=M(e),s=a-l,c=n-o;let d=1/0,i=1/0;return s!==0&&(d=l/Math.abs(s)),c!==0&&(i=o/Math.abs(c)),Math.min(Math.max(1/Math.min(d,i),0),1)},V=(e,a,n)=>{const[l,o]=M(e),s=a-l,c=n-o;if(s===0&&c===0)return 0;let i=Math.atan2(c,s)*(180/Math.PI)+90;return i<0&&(i+=360),i},A=e=>{const a=_.value;if(!a)return;const n=a.getBoundingClientRect(),l=e.clientX-n.left,o=e.clientY-n.top;g.value=B(a,l,o),p.value=V(a,l,o)};t.watch(()=>r.animated,()=>{if(!r.animated)return;const e=110,a=465;$.value=!0,p.value=e,b({duration:500,onUpdate:n=>g.value=n/100}),b({ease:x,duration:1500,end:50,onUpdate:n=>{p.value=(a-e)*(n/100)+e}}),b({ease:S,delay:1500,duration:2250,start:50,end:100,onUpdate:n=>{p.value=(a-e)*(n/100)+e}}),b({ease:x,delay:2500,duration:1500,start:100,end:0,onUpdate:n=>g.value=n/100,onEnd:()=>$.value=!1})},{immediate:!0});const w=t.computed(()=>r.edgeSensitivity+20),m=t.computed(()=>y.value||$.value),C=t.computed(()=>m.value?Math.max(0,(g.value*100-w.value)/(100-w.value)):0),j=t.computed(()=>m.value?Math.max(0,(g.value*100-r.edgeSensitivity)/(100-r.edgeSensitivity)):0),I=t.computed(()=>N(r.colors)),z=t.computed(()=>I.value.map(e=>`${e} border-box`)),F=t.computed(()=>I.value.map(e=>`${e} padding-box`)),u=t.computed(()=>`${p.value.toFixed(3)}deg`);return(e,a)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"cardRef",ref:_,onPointermove:A,onPointerenter:a[0]||(a[0]=n=>y.value=!0),onPointerleave:a[1]||(a[1]=n=>y.value=!1),class:t.normalizeClass(["g-card",r.className]),style:t.normalizeStyle({background:r.backgroundColor,borderRadius:r.borderRadius+"px"})},[t.createElementVNode("div",{class:"g-card__border",style:t.normalizeStyle({background:[`linear-gradient(${r.backgroundColor} 0 100%) padding-box`,"linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box",...z.value].join(", "),opacity:C.value,maskImage:`conic-gradient(from ${u.value} at center, black ${r.coneSpread}%, transparent ${r.coneSpread+15}%, transparent ${100-r.coneSpread-15}%, black ${100-r.coneSpread}%)`,WebkitMaskImage:`conic-gradient(from ${u.value} at center, black ${r.coneSpread}%, transparent ${r.coneSpread+15}%, transparent ${100-r.coneSpread-15}%, black ${100-r.coneSpread}%)`,transition:m.value?"opacity 0.25s ease-out":"opacity 0.75s ease-in-out"})},null,4),t.createElementVNode("div",{class:"g-card__fill",style:t.normalizeStyle({background:F.value.join(", "),maskImage:["linear-gradient(to bottom, black, black)","radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%)","radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%)","radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%)","radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%)","radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%)",`conic-gradient(from ${u.value} at center, transparent 5%, black 15%, black 85%, transparent 95%)`].join(", "),WebkitMaskImage:["linear-gradient(to bottom, black, black)","radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%)","radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%)","radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%)","radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%)","radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%)",`conic-gradient(from ${u.value} at center, transparent 5%, black 15%, black 85%, transparent 95%)`].join(", "),opacity:C.value*r.fillOpacity,transition:m.value?"opacity 0.25s ease-out":"opacity 0.75s ease-in-out"})},null,4),t.createElementVNode("span",{class:"g-card__glow",style:t.normalizeStyle({inset:`-${r.glowRadius}px`,maskImage:`conic-gradient(from ${u.value} at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%)`,WebkitMaskImage:`conic-gradient(from ${u.value} at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%)`,opacity:j.value,transition:m.value?"opacity 0.25s ease-out":"opacity 0.75s ease-in-out"})},[t.createElementVNode("span",{class:"g-card__glow-inner",style:t.normalizeStyle({inset:`${r.glowRadius}px`,boxShadow:O(r.glowColor,r.glowIntensity)})},null,4)],4),t.createElementVNode("div",H,[t.renderSlot(e.$slots,"default",{},void 0,!0)])],38))}}),f=U._export_sfc(W,[["__scopeId","data-v-22c04b33"]]);f.install=k=>{k.component(f.name,f)};exports.GCard=f;exports.default=f;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("vue"),U=require("../_plugin-vue_export-helper-BHFhmbuH.js"),H={class:"g-card__content"},W=a.defineComponent({__name:"index",props:{className:{default:""},edgeSensitivity:{default:30},glowColor:{default:"40 80 80"},backgroundColor:{},borderRadius:{default:28},glowRadius:{default:40},glowIntensity:{default:1},coneSpread:{default:25},animated:{type:Boolean,default:!1},colors:{default:()=>["#c084fc","#f472b6","#38bdf8"]},fillOpacity:{default:.5},shadow:{type:Boolean,default:!0},glow:{type:Boolean,default:!0}},setup(v){function O(e){const t=e.match(/([\d.]+)\s*([\d.]+)%?\s*([\d.]+)%?/);return t?{h:parseFloat(t[1]),s:parseFloat(t[2]),l:parseFloat(t[3])}:{h:40,s:80,l:80}}function B(e,t){const{h:n,s:o,l}=O(e),c=`${n}deg ${o}% ${l}%`;return[[0,0,0,1,100,!0],[0,0,1,0,60,!0],[0,0,3,0,50,!0],[0,0,6,0,40,!0],[0,0,15,0,30,!0],[0,0,25,2,20,!0],[0,0,50,2,10,!0],[0,0,1,0,60,!1],[0,0,3,0,50,!1],[0,0,6,0,40,!1],[0,0,15,0,30,!1],[0,0,25,2,20,!1],[0,0,50,2,10,!1]].map(([d,s,$,k,T,q])=>{const D=Math.min(T*t,100);return`${q?"inset ":""}${d}px ${s}px ${$}px ${k}px hsl(${c} / ${D}%)`}).join(", ")}function C(e){return 1-Math.pow(1-e,3)}function w(e){return e*e*e}function b({start:e=0,end:t=100,duration:n=1e3,delay:o=0,ease:l=C,onUpdate:c,onEnd:i}){const d=performance.now()+o;function s(){const $=performance.now()-d,k=Math.min($/n,1);c(e+(t-e)*l(k)),k<1?requestAnimationFrame(s):i&&i()}setTimeout(()=>requestAnimationFrame(s),o)}const P=["80% 55%","69% 34%","8% 6%","41% 38%","86% 85%","82% 18%","51% 4%"],E=[0,1,2,0,1,2,1];function N(e){const t=[];for(let n=0;n<7;n++){const o=e[Math.min(E[n],e.length-1)];t.push(`radial-gradient(at ${P[n]}, ${o} 0px, transparent 50%)`)}return t.push(`linear-gradient(${e[0]} 0 100%)`),t}const r=v,S=a.computed(()=>r.backgroundColor??"transparent"),x=a.useTemplateRef("cardRef"),y=a.ref(!1),f=a.ref(45),p=a.ref(0),h=a.ref(!1),_=e=>{const{width:t,height:n}=e.getBoundingClientRect();return[t/2,n/2]},V=(e,t,n)=>{const[o,l]=_(e),c=t-o,i=n-l;let d=1/0,s=1/0;return c!==0&&(d=o/Math.abs(c)),i!==0&&(s=l/Math.abs(i)),Math.min(Math.max(1/Math.min(d,s),0),1)},z=(e,t,n)=>{const[o,l]=_(e),c=t-o,i=n-l;if(c===0&&i===0)return 0;let s=Math.atan2(i,c)*(180/Math.PI)+90;return s<0&&(s+=360),s},A=e=>{const t=x.value;if(!t)return;const n=t.getBoundingClientRect(),o=e.clientX-n.left,l=e.clientY-n.top;p.value=V(t,o,l),f.value=z(t,o,l)};a.watch(()=>r.animated,()=>{if(!r.animated)return;const e=110,t=465;h.value=!0,f.value=e,b({duration:500,onUpdate:n=>p.value=n/100}),b({ease:w,duration:1500,end:50,onUpdate:n=>{f.value=(t-e)*(n/100)+e}}),b({ease:C,delay:1500,duration:2250,start:50,end:100,onUpdate:n=>{f.value=(t-e)*(n/100)+e}}),b({ease:w,delay:2500,duration:1500,start:100,end:0,onUpdate:n=>p.value=n/100,onEnd:()=>h.value=!1})},{immediate:!0});const M=a.computed(()=>r.edgeSensitivity+20),g=a.computed(()=>y.value||h.value),I=a.computed(()=>g.value?Math.max(0,(p.value*100-M.value)/(100-M.value)):0),F=a.computed(()=>g.value?Math.max(0,(p.value*100-r.edgeSensitivity)/(100-r.edgeSensitivity)):0),R=a.computed(()=>N(r.colors)),j=a.computed(()=>R.value.map(e=>`${e} border-box`)),G=a.computed(()=>R.value.map(e=>`${e} padding-box`)),u=a.computed(()=>`${f.value.toFixed(3)}deg`);return(e,t)=>(a.openBlock(),a.createElementBlock("div",{ref_key:"cardRef",ref:x,onPointermove:A,onPointerenter:t[0]||(t[0]=n=>y.value=!0),onPointerleave:t[1]||(t[1]=n=>y.value=!1),class:a.normalizeClass(["g-card",{"g-card--shadow":r.shadow},r.className]),style:a.normalizeStyle({background:S.value,borderRadius:r.borderRadius+"px"})},[r.glow?(a.openBlock(),a.createElementBlock(a.Fragment,{key:0},[a.createElementVNode("div",{class:"g-card__border",style:a.normalizeStyle({background:[`linear-gradient(${S.value} 0 100%) padding-box`,"linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box",...j.value].join(", "),opacity:I.value,maskImage:`conic-gradient(from ${u.value} at center, black ${r.coneSpread}%, transparent ${r.coneSpread+15}%, transparent ${100-r.coneSpread-15}%, black ${100-r.coneSpread}%)`,WebkitMaskImage:`conic-gradient(from ${u.value} at center, black ${r.coneSpread}%, transparent ${r.coneSpread+15}%, transparent ${100-r.coneSpread-15}%, black ${100-r.coneSpread}%)`,transition:g.value?"opacity 0.25s ease-out":"opacity 0.75s ease-in-out"})},null,4),a.createElementVNode("div",{class:"g-card__fill",style:a.normalizeStyle({background:G.value.join(", "),maskImage:["linear-gradient(to bottom, black, black)","radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%)","radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%)","radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%)","radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%)","radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%)",`conic-gradient(from ${u.value} at center, transparent 5%, black 15%, black 85%, transparent 95%)`].join(", "),WebkitMaskImage:["linear-gradient(to bottom, black, black)","radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%)","radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%)","radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%)","radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%)","radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%)",`conic-gradient(from ${u.value} at center, transparent 5%, black 15%, black 85%, transparent 95%)`].join(", "),opacity:I.value*r.fillOpacity,transition:g.value?"opacity 0.25s ease-out":"opacity 0.75s ease-in-out"})},null,4),a.createElementVNode("span",{class:"g-card__glow",style:a.normalizeStyle({inset:`-${r.glowRadius}px`,maskImage:`conic-gradient(from ${u.value} at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%)`,WebkitMaskImage:`conic-gradient(from ${u.value} at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%)`,opacity:F.value,transition:g.value?"opacity 0.25s ease-out":"opacity 0.75s ease-in-out"})},[a.createElementVNode("span",{class:"g-card__glow-inner",style:a.normalizeStyle({inset:`${r.glowRadius}px`,boxShadow:B(r.glowColor,r.glowIntensity)})},null,4)],4)],64)):a.createCommentVNode("",!0),a.createElementVNode("div",H,[a.renderSlot(e.$slots,"default",{},void 0,!0)])],38))}}),m=U._export_sfc(W,[["__scopeId","data-v-c2ad9d99"]]),L=[{name:"Daylight",colors:["#5464f6ff","#c084fc","#38bdf8"],glowColor:"220 80 60",backgroundColor:"#f8fafc",dark:!1},{name:"Quartz",colors:["#f472b6","#fb7185","#f9a8d4"],glowColor:"340 80 65",backgroundColor:"#f8fafc",dark:!1},{name:"Matcha",colors:["#34d399","#86efac","#fbbf24"],glowColor:"150 60 50",backgroundColor:"#f8fafc",dark:!1},{name:"Ocean",colors:["#0ea5e9","#22d3ee","#6366f1"],glowColor:"200 90 65",backgroundColor:"#f8fafc",dark:!1},{name:"Daylight",colors:["#c084fc","#f472b6","#38bdf8"],glowColor:"280 80 75",backgroundColor:"#1d1e1f",dark:!0},{name:"Quartz",colors:["#f97316","#f43f5e","#facc15"],glowColor:"20 90 65",backgroundColor:"#1d1e1f",dark:!0},{name:"Matcha",colors:["#34d399","#10b981","#a7f3d0"],glowColor:"150 70 65",backgroundColor:"#1d1e1f",dark:!0},{name:"Ocean",colors:["#0ea5e9","#22d3ee","#6366f1"],glowColor:"200 90 65",backgroundColor:"#1d1e1f",dark:!0}];m.install=v=>{v.component(m.name,m)};exports.GCard=m;exports.cardPresets=L;exports.default=m;

package/lib/GCard/index.mjs

@@ -1,27 +1,29 @@
-import { defineComponent as H, useTemplateRef as L, ref as y, watch as X, computed as c, createElementBlock as Y, openBlock as J, normalizeStyle as m, normalizeClass as K, createElementVNode as b, renderSlot as Q } from "vue";
-import { _ as Z } from "../_plugin-vue_export-helper-CHgC5LLL.mjs";
-const ee = { class: "g-card__content" }, ae = /* @__PURE__ */ H({
+import { defineComponent as X, computed as i, useTemplateRef as Y, ref as y, watch as J, createElementBlock as A, openBlock as F, normalizeStyle as b, normalizeClass as K, createCommentVNode as Z, createElementVNode as m, Fragment as ee, renderSlot as ae } from "vue";
+import { _ as te } from "../_plugin-vue_export-helper-CHgC5LLL.mjs";
+const ne = { class: "g-card__content" }, re = /* @__PURE__ */ X({
   __name: "index",
   props: {
     className: { default: "" },
     edgeSensitivity: { default: 30 },
     glowColor: { default: "40 80 80" },
-    backgroundColor: { default: "#060010" },
+    backgroundColor: {},
     borderRadius: { default: 28 },
     glowRadius: { default: 40 },
     glowIntensity: { default: 1 },
     coneSpread: { default: 25 },
     animated: { type: Boolean, default: !1 },
     colors: { default: () => ["#c084fc", "#f472b6", "#38bdf8"] },
-    fillOpacity: { default: 0.5 }
+    fillOpacity: { default: 0.5 },
+    shadow: { type: Boolean, default: !0 },
+    glow: { type: Boolean, default: !0 }
   },
-  setup($) {
-    function B(e) {
+  setup(h) {
+    function E(e) {
       const a = e.match(/([\d.]+)\s*([\d.]+)%?\s*([\d.]+)%?/);
       return a ? { h: parseFloat(a[1]), s: parseFloat(a[2]), l: parseFloat(a[3]) } : { h: 40, s: 80, l: 80 };
     }
-    function A(e, a) {
-      const { h: t, s: r, l } = B(e), s = `${t}deg ${r}% ${l}%`;
+    function N(e, a) {
+      const { h: t, s: r, l: o } = E(e), s = `${t}deg ${r}% ${o}%`;
       return [
         [0, 0, 0, 1, 100, !0],
         [0, 0, 1, 0, 60, !0],
@@ -36,34 +38,34 @@ const ee = { class: "g-card__content" }, ae = /* @__PURE__ */ H({
         [0, 0, 15, 0, 30, !1],
         [0, 0, 25, 2, 20, !1],
         [0, 0, 50, 2, 10, !1]
-      ].map(([d, o, S, k, q, z]) => {
-        const D = Math.min(q * a, 100);
-        return `${z ? "inset " : ""}${d}px ${o}px ${S}px ${k}px hsl(${s} / ${D}%)`;
+      ].map(([d, l, w, v, H, L]) => {
+        const Q = Math.min(H * a, 100);
+        return `${L ? "inset " : ""}${d}px ${l}px ${w}px ${v}px hsl(${s} / ${Q}%)`;
       }).join(", ");
     }
-    function M(e) {
+    function S(e) {
       return 1 - Math.pow(1 - e, 3);
     }
-    function w(e) {
+    function M(e) {
       return e * e * e;
     }
-    function v({
+    function k({
       start: e = 0,
       end: a = 100,
       duration: t = 1e3,
       delay: r = 0,
-      ease: l = M,
+      ease: o = S,
       onUpdate: s,
-      onEnd: i
+      onEnd: c
     }) {
       const d = performance.now() + r;
-      function o() {
-        const S = performance.now() - d, k = Math.min(S / t, 1);
-        s(e + (a - e) * l(k)), k < 1 ? requestAnimationFrame(o) : i && i();
+      function l() {
+        const w = performance.now() - d, v = Math.min(w / t, 1);
+        s(e + (a - e) * o(v)), v < 1 ? requestAnimationFrame(l) : c && c();
       }
-      setTimeout(() => requestAnimationFrame(o), r);
+      setTimeout(() => requestAnimationFrame(l), r);
     }
-    const E = [
+    const j = [
       "80% 55%",
       "69% 34%",
       "8% 6%",
@@ -71,157 +73,219 @@ const ee = { class: "g-card__content" }, ae = /* @__PURE__ */ H({
       "86% 85%",
       "82% 18%",
       "51% 4%"
-    ], F = [0, 1, 2, 0, 1, 2, 1];
-    function j(e) {
+    ], z = [0, 1, 2, 0, 1, 2, 1];
+    function D(e) {
       const a = [];
       for (let t = 0; t < 7; t++) {
-        const r = e[Math.min(F[t], e.length - 1)];
-        a.push(`radial-gradient(at ${E[t]}, ${r} 0px, transparent 50%)`);
+        const r = e[Math.min(z[t], e.length - 1)];
+        a.push(`radial-gradient(at ${j[t]}, ${r} 0px, transparent 50%)`);
       }
       return a.push(`linear-gradient(${e[0]} 0 100%)`), a;
     }
-    const n = $, I = L("cardRef"), h = y(!1), p = y(45), g = y(0), x = y(!1), C = (e) => {
+    const n = h, _ = i(() => n.backgroundColor ?? "transparent"), I = Y("cardRef"), $ = y(!1), f = y(45), p = y(0), C = y(!1), R = (e) => {
       const { width: a, height: t } = e.getBoundingClientRect();
       return [a / 2, t / 2];
-    }, N = (e, a, t) => {
-      const [r, l] = C(e), s = a - r, i = t - l;
-      let d = 1 / 0, o = 1 / 0;
-      return s !== 0 && (d = r / Math.abs(s)), i !== 0 && (o = l / Math.abs(i)), Math.min(Math.max(1 / Math.min(d, o), 0), 1);
     }, G = (e, a, t) => {
-      const [r, l] = C(e), s = a - r, i = t - l;
-      if (s === 0 && i === 0) return 0;
-      let o = Math.atan2(i, s) * (180 / Math.PI) + 90;
-      return o < 0 && (o += 360), o;
-    }, T = (e) => {
+      const [r, o] = R(e), s = a - r, c = t - o;
+      let d = 1 / 0, l = 1 / 0;
+      return s !== 0 && (d = r / Math.abs(s)), c !== 0 && (l = o / Math.abs(c)), Math.min(Math.max(1 / Math.min(d, l), 0), 1);
+    }, T = (e, a, t) => {
+      const [r, o] = R(e), s = a - r, c = t - o;
+      if (s === 0 && c === 0) return 0;
+      let l = Math.atan2(c, s) * (180 / Math.PI) + 90;
+      return l < 0 && (l += 360), l;
+    }, U = (e) => {
       const a = I.value;
       if (!a) return;
-      const t = a.getBoundingClientRect(), r = e.clientX - t.left, l = e.clientY - t.top;
-      g.value = N(a, r, l), p.value = G(a, r, l);
+      const t = a.getBoundingClientRect(), r = e.clientX - t.left, o = e.clientY - t.top;
+      p.value = G(a, r, o), f.value = T(a, r, o);
     };
-    X(
+    J(
       () => n.animated,
       () => {
         if (!n.animated) return;
         const e = 110, a = 465;
-        x.value = !0, p.value = e, v({ duration: 500, onUpdate: (t) => g.value = t / 100 }), v({
-          ease: w,
+        C.value = !0, f.value = e, k({ duration: 500, onUpdate: (t) => p.value = t / 100 }), k({
+          ease: M,
           duration: 1500,
           end: 50,
           onUpdate: (t) => {
-            p.value = (a - e) * (t / 100) + e;
+            f.value = (a - e) * (t / 100) + e;
           }
-        }), v({
-          ease: M,
+        }), k({
+          ease: S,
           delay: 1500,
           duration: 2250,
           start: 50,
           end: 100,
           onUpdate: (t) => {
-            p.value = (a - e) * (t / 100) + e;
+            f.value = (a - e) * (t / 100) + e;
           }
-        }), v({
-          ease: w,
+        }), k({
+          ease: M,
           delay: 2500,
           duration: 1500,
           start: 100,
           end: 0,
-          onUpdate: (t) => g.value = t / 100,
-          onEnd: () => x.value = !1
+          onUpdate: (t) => p.value = t / 100,
+          onEnd: () => C.value = !1
         });
       },
       { immediate: !0 }
     );
-    const R = c(() => n.edgeSensitivity + 20), f = c(() => h.value || x.value), O = c(
-      () => f.value ? Math.max(
+    const O = i(() => n.edgeSensitivity + 20), g = i(() => $.value || C.value), B = i(
+      () => g.value ? Math.max(
         0,
-        (g.value * 100 - R.value) / (100 - R.value)
+        (p.value * 100 - O.value) / (100 - O.value)
       ) : 0
-    ), U = c(
-      () => f.value ? Math.max(
+    ), V = i(
+      () => g.value ? Math.max(
         0,
-        (g.value * 100 - n.edgeSensitivity) / (100 - n.edgeSensitivity)
+        (p.value * 100 - n.edgeSensitivity) / (100 - n.edgeSensitivity)
       ) : 0
-    ), P = c(() => j(n.colors)), V = c(() => P.value.map((e) => `${e} border-box`)), W = c(() => P.value.map((e) => `${e} padding-box`)), u = c(() => `${p.value.toFixed(3)}deg`);
-    return (e, a) => (J(), Y("div", {
+    ), P = i(() => D(n.colors)), W = i(() => P.value.map((e) => `${e} border-box`)), q = i(() => P.value.map((e) => `${e} padding-box`)), u = i(() => `${f.value.toFixed(3)}deg`);
+    return (e, a) => (F(), A("div", {
       ref_key: "cardRef",
       ref: I,
-      onPointermove: T,
-      onPointerenter: a[0] || (a[0] = (t) => h.value = !0),
-      onPointerleave: a[1] || (a[1] = (t) => h.value = !1),
-      class: K(["g-card", n.className]),
-      style: m({
-        background: n.backgroundColor,
+      onPointermove: U,
+      onPointerenter: a[0] || (a[0] = (t) => $.value = !0),
+      onPointerleave: a[1] || (a[1] = (t) => $.value = !1),
+      class: K(["g-card", { "g-card--shadow": n.shadow }, n.className]),
+      style: b({
+        background: _.value,
         borderRadius: n.borderRadius + "px"
       })
     }, [
-      b("div", {
-        class: "g-card__border",
-        style: m({
-          background: [
-            `linear-gradient(${n.backgroundColor} 0 100%) padding-box`,
-            "linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box",
-            ...V.value
-          ].join(", "),
-          opacity: O.value,
-          maskImage: `conic-gradient(from ${u.value} at center, black ${n.coneSpread}%, transparent ${n.coneSpread + 15}%, transparent ${100 - n.coneSpread - 15}%, black ${100 - n.coneSpread}%)`,
-          WebkitMaskImage: `conic-gradient(from ${u.value} at center, black ${n.coneSpread}%, transparent ${n.coneSpread + 15}%, transparent ${100 - n.coneSpread - 15}%, black ${100 - n.coneSpread}%)`,
-          transition: f.value ? "opacity 0.25s ease-out" : "opacity 0.75s ease-in-out"
-        })
-      }, null, 4),
-      b("div", {
-        class: "g-card__fill",
-        style: m({
-          background: W.value.join(", "),
-          maskImage: [
-            "linear-gradient(to bottom, black, black)",
-            "radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%)",
-            "radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%)",
-            "radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%)",
-            "radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%)",
-            "radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%)",
-            `conic-gradient(from ${u.value} at center, transparent 5%, black 15%, black 85%, transparent 95%)`
-          ].join(", "),
-          WebkitMaskImage: [
-            "linear-gradient(to bottom, black, black)",
-            "radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%)",
-            "radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%)",
-            "radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%)",
-            "radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%)",
-            "radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%)",
-            `conic-gradient(from ${u.value} at center, transparent 5%, black 15%, black 85%, transparent 95%)`
-          ].join(", "),
-          opacity: O.value * n.fillOpacity,
-          transition: f.value ? "opacity 0.25s ease-out" : "opacity 0.75s ease-in-out"
-        })
-      }, null, 4),
-      b("span", {
-        class: "g-card__glow",
-        style: m({
-          inset: `-${n.glowRadius}px`,
-          maskImage: `conic-gradient(from ${u.value} at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%)`,
-          WebkitMaskImage: `conic-gradient(from ${u.value} at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%)`,
-          opacity: U.value,
-          transition: f.value ? "opacity 0.25s ease-out" : "opacity 0.75s ease-in-out"
-        })
-      }, [
-        b("span", {
-          class: "g-card__glow-inner",
-          style: m({
-            inset: `${n.glowRadius}px`,
-            boxShadow: A(n.glowColor, n.glowIntensity)
+      n.glow ? (F(), A(ee, { key: 0 }, [
+        m("div", {
+          class: "g-card__border",
+          style: b({
+            background: [
+              `linear-gradient(${_.value} 0 100%) padding-box`,
+              "linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box",
+              ...W.value
+            ].join(", "),
+            opacity: B.value,
+            maskImage: `conic-gradient(from ${u.value} at center, black ${n.coneSpread}%, transparent ${n.coneSpread + 15}%, transparent ${100 - n.coneSpread - 15}%, black ${100 - n.coneSpread}%)`,
+            WebkitMaskImage: `conic-gradient(from ${u.value} at center, black ${n.coneSpread}%, transparent ${n.coneSpread + 15}%, transparent ${100 - n.coneSpread - 15}%, black ${100 - n.coneSpread}%)`,
+            transition: g.value ? "opacity 0.25s ease-out" : "opacity 0.75s ease-in-out"
+          })
+        }, null, 4),
+        m("div", {
+          class: "g-card__fill",
+          style: b({
+            background: q.value.join(", "),
+            maskImage: [
+              "linear-gradient(to bottom, black, black)",
+              "radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%)",
+              "radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%)",
+              "radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%)",
+              "radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%)",
+              "radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%)",
+              `conic-gradient(from ${u.value} at center, transparent 5%, black 15%, black 85%, transparent 95%)`
+            ].join(", "),
+            WebkitMaskImage: [
+              "linear-gradient(to bottom, black, black)",
+              "radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%)",
+              "radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%)",
+              "radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%)",
+              "radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%)",
+              "radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%)",
+              `conic-gradient(from ${u.value} at center, transparent 5%, black 15%, black 85%, transparent 95%)`
+            ].join(", "),
+            opacity: B.value * n.fillOpacity,
+            transition: g.value ? "opacity 0.25s ease-out" : "opacity 0.75s ease-in-out"
           })
-        }, null, 4)
-      ], 4),
-      b("div", ee, [
-        Q(e.$slots, "default", {}, void 0, !0)
+        }, null, 4),
+        m("span", {
+          class: "g-card__glow",
+          style: b({
+            inset: `-${n.glowRadius}px`,
+            maskImage: `conic-gradient(from ${u.value} at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%)`,
+            WebkitMaskImage: `conic-gradient(from ${u.value} at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%)`,
+            opacity: V.value,
+            transition: g.value ? "opacity 0.25s ease-out" : "opacity 0.75s ease-in-out"
+          })
+        }, [
+          m("span", {
+            class: "g-card__glow-inner",
+            style: b({
+              inset: `${n.glowRadius}px`,
+              boxShadow: N(n.glowColor, n.glowIntensity)
+            })
+          }, null, 4)
+        ], 4)
+      ], 64)) : Z("", !0),
+      m("div", ne, [
+        ae(e.$slots, "default", {}, void 0, !0)
       ])
     ], 38));
   }
-}), _ = /* @__PURE__ */ Z(ae, [["__scopeId", "data-v-22c04b33"]]);
-_.install = ($) => {
-  $.component(_.name, _);
+}), x = /* @__PURE__ */ te(re, [["__scopeId", "data-v-c2ad9d99"]]), se = [
+  // ===== 浅色方案 =====
+  {
+    name: "Daylight",
+    colors: ["#5464f6ff", "#c084fc", "#38bdf8"],
+    glowColor: "220 80 60",
+    backgroundColor: "#f8fafc",
+    dark: !1
+  },
+  {
+    name: "Quartz",
+    colors: ["#f472b6", "#fb7185", "#f9a8d4"],
+    glowColor: "340 80 65",
+    backgroundColor: "#f8fafc",
+    dark: !1
+  },
+  {
+    name: "Matcha",
+    colors: ["#34d399", "#86efac", "#fbbf24"],
+    glowColor: "150 60 50",
+    backgroundColor: "#f8fafc",
+    dark: !1
+  },
+  {
+    name: "Ocean",
+    colors: ["#0ea5e9", "#22d3ee", "#6366f1"],
+    glowColor: "200 90 65",
+    backgroundColor: "#f8fafc",
+    dark: !1
+  },
+  // ===== 深色方案 =====
+  {
+    name: "Daylight",
+    colors: ["#c084fc", "#f472b6", "#38bdf8"],
+    glowColor: "280 80 75",
+    backgroundColor: "#1d1e1f",
+    dark: !0
+  },
+  {
+    name: "Quartz",
+    colors: ["#f97316", "#f43f5e", "#facc15"],
+    glowColor: "20 90 65",
+    backgroundColor: "#1d1e1f",
+    dark: !0
+  },
+  {
+    name: "Matcha",
+    colors: ["#34d399", "#10b981", "#a7f3d0"],
+    glowColor: "150 70 65",
+    backgroundColor: "#1d1e1f",
+    dark: !0
+  },
+  {
+    name: "Ocean",
+    colors: ["#0ea5e9", "#22d3ee", "#6366f1"],
+    glowColor: "200 90 65",
+    backgroundColor: "#1d1e1f",
+    dark: !0
+  }
+];
+x.install = (h) => {
+  h.component(x.name, x);
 };
 export {
-  _ as GCard,
-  _ as default
+  x as GCard,
+  se as cardPresets,
+  x as default
 };

package/lib/GCard/style.css

@@ -1 +1 @@
-.g-card[data-v-22c04b33]{position:relative;display:grid;isolation:isolate;border:1px solid rgba(255,255,255,.15);transform:translateZ(.01px);box-shadow:#0000001a 0 1px 2px,#0000001a 0 2px 4px,#0000001a 0 4px 8px,#0000001a 0 8px 16px,#0000001a 0 16px 32px,#0000001a 0 32px 64px}.g-card__border[data-v-22c04b33],.g-card__fill[data-v-22c04b33]{position:absolute;inset:0;z-index:-1;border:1px solid transparent;border-radius:inherit}.g-card__fill[data-v-22c04b33]{mask-composite:subtract,add,add,add,add,add;-webkit-mask-composite:source-out,source-over,source-over,source-over,source-over,source-over;mix-blend-mode:soft-light}.g-card__glow[data-v-22c04b33]{position:absolute;z-index:1;border-radius:inherit;pointer-events:none;mix-blend-mode:plus-lighter}.g-card__glow-inner[data-v-22c04b33]{position:absolute;border-radius:inherit}.g-card__content[data-v-22c04b33]{position:relative;z-index:1;display:flex;flex-direction:column;overflow:auto}
+.g-card[data-v-c2ad9d99]{position:relative;display:grid;isolation:isolate;border:1px solid rgba(255,255,255,.15);transform:translateZ(.01px)}.g-card--shadow[data-v-c2ad9d99]{box-shadow:#0000000d 0 2px 8px,#0000000d 0 16px 40px}.g-card__border[data-v-c2ad9d99],.g-card__fill[data-v-c2ad9d99]{position:absolute;inset:0;z-index:-1;border:1px solid transparent;border-radius:inherit}.g-card__fill[data-v-c2ad9d99]{mask-composite:subtract,add,add,add,add,add;-webkit-mask-composite:source-out,source-over,source-over,source-over,source-over,source-over;mix-blend-mode:soft-light}.g-card__glow[data-v-c2ad9d99]{position:absolute;z-index:1;border-radius:inherit;pointer-events:none;mix-blend-mode:plus-lighter}.g-card__glow-inner[data-v-c2ad9d99]{position:absolute;border-radius:inherit}.g-card__content[data-v-c2ad9d99]{position:relative;z-index:1;display:flex;flex-direction:column;overflow:auto}