1 line
5.0 KiB
JavaScript
1 line
5.0 KiB
JavaScript
import{Ct as e,Dt as t,F as n,I as r,Ot as i,S as a,Tt as o,W as s,X as c,_ as l,b as u,bt as d,g as f,mt as p,nt as m,v as h,w as g,z as _}from"./vue.runtime.esm-bundler-DQjudA8G.js";import{t as v}from"./data-BslsFGOd.js";import{t as y}from"./utils-BB02OBq2.js";import{o as b}from"./dist-t_U6YImb.js";import"./Teleport-CLYBkdRb.js";import{t as x}from"./VisuallyHidden-CP6GE8eS.js";import{a as S,n as C,r as w}from"./modal-DVNHdNcC.js";import{t as T}from"./iconify-B5QdRg7l.js";var E=[`width`,`height`],D=g({__name:`flickering-grid`,props:{squareSize:{default:4},gridGap:{default:6},flickerChance:{default:.3},color:{default:`rgb(0, 0, 0)`},width:{},height:{},class:{},maxOpacity:{default:.3}},setup(t){let i=t,{squareSize:a,gridGap:s,flickerChance:m,color:h,maxOpacity:g,width:v,height:b}=d(i),x=c(`containerRef`),S=c(`canvasRef`),C=p(),w=p(!1),T=p({width:0,height:0}),D=/^#/,O=f(()=>{if(!C.value)return`rgba(255, 0, 0,`;let e=h.value.replace(D,``),t=Number.parseInt(e,16);return`rgba(${t>>16&255}, ${t>>8&255}, ${t&255},`});function k(e,t,n){let r=window.devicePixelRatio||1;e.width=t*r,e.height=n*r,e.style.width=`${t}px`,e.style.height=`${n}px`;let i=Math.floor(t/(a.value+s.value)),o=Math.floor(n/(a.value+s.value)),c=new Float32Array(i*o);for(let e=0;e<c.length;e++)c[e]=Math.random()*g.value;return{cols:i,rows:o,squares:c,dpr:r}}function A(e,t){for(let n=0;n<e.length;n++)Math.random()<m.value*t&&(e[n]=Math.random()*g.value)}function j(e,t,n,r,i,o,c){e.clearRect(0,0,t,n),e.fillStyle=`transparent`,e.fillRect(0,0,t,n);for(let t=0;t<r;t++)for(let n=0;n<i;n++){let r=o[t*i+n];e.fillStyle=`${O.value}${r})`,e.fillRect(t*(a.value+s.value)*c,n*(a.value+s.value)*c,a.value*c,a.value*c)}}let M=p();function N(){let e=v.value||x.value.clientWidth,t=b.value||x.value.clientHeight;T.value={width:e,height:t},M.value=k(S.value,e,t)}let P,F,I,L=0;function R(e){if(!w.value)return;let t=(e-L)/1e3;L=e,A(M.value.squares,t),j(C.value,S.value.width,S.value.height,M.value.cols,M.value.rows,M.value.squares,M.value.dpr),P=requestAnimationFrame(R)}return r(()=>{!S.value||!x.value||(C.value=S.value.getContext(`2d`),C.value&&(N(),F=new ResizeObserver(()=>{N()}),I=new IntersectionObserver(([e])=>{w.value=e.isIntersecting,P=requestAnimationFrame(R)},{threshold:0}),F.observe(x.value),I.observe(S.value)))}),n(()=>{P&&cancelAnimationFrame(P),F?.disconnect(),I?.disconnect()}),(t,n)=>(_(),u(`div`,{ref_key:`containerRef`,ref:x,class:o(e(y)(`w-full h-full`,i.class))},[l(`canvas`,{ref_key:`canvasRef`,ref:S,class:`pointer-events-none`,width:e(T).width,height:e(T).height},null,8,E)],2))}}),O={class:`w-full font-mono rounded-lg shadow-sm bg-background`},k={class:`relative p-5`},A={class:`text-lg`},j={class:`flex items-center gap-2 mt-1`},M={class:`text-stone-600`},N={class:`mt-6 text-4xl`},P={class:`ml-1 text-stone-500`},F={class:`font-medium`},I={class:`p-6 border-t`},L={class:``},R={class:`text-xl`},z={class:`main relative border-t p-6 flex flex-col gap-8 bg-center`},B={class:`step grid grid-cols-[50px_1fr]`},V={class:`text-xl`},H={class:`p-6 border-t`},U={class:`text-stone-500`},W={class:`text-sm`},G={class:`text-sm`},K=g({__name:`index`,props:{cardNo:{},orderId:{},price:{},currency:{},invoiceNo:{},state:{},updatedAt:{},description:{}},setup(n){let r=n,o=f(()=>r.orderId||``),c=f(()=>`**${r.cardNo.toString().slice(2)}`),{copy:d,copied:p}=b({source:o}),m=f(()=>r.state),g=f(()=>v.find(e=>e.value===m.value));return(r,f)=>(_(),u(`div`,O,[l(`header`,k,[l(`h1`,A,` Billing Card `+i(e(c)),1),l(`div`,j,[l(`p`,M,i(e(o)),1),l(`button`,{onClick:f[0]||=t=>e(d)(e(o))},[e(p)?(_(),h(e(T),{key:1,icon:`carbon:checkmark`,class:`text-green-500 duration-300`})):(_(),h(e(T),{key:0,icon:`carbon:copy`,class:`duration-300 hover:scale-105`}))])]),l(`div`,N,[l(`span`,P,i(n.currency),1),l(`span`,F,i(n.price),1)])]),l(`div`,I,[l(`div`,L,[f[1]||=l(`h2`,{class:`mb-2 text-xl font-extralight`},` Last update `,-1),l(`div`,R,i(n.updatedAt),1)]),f[2]||=l(`div`,{class:`w-[1px] bg-stone-200`},null,-1)]),l(`main`,z,[a(D,{class:`absolute top-0 left-0 w-full h-full [mask-image:radial-gradient(450px_circle_at_center,white,transparent)]`,"square-size":4,"grid-gap":2,color:`#60A5FA`}),l(`div`,B,[(_(),h(s(e(g)?.icon),{style:t({color:e(g)?.color}),class:`size-8`},null,8,[`style`])),l(`div`,null,[l(`h2`,V,i(e(g)?.label),1),l(`p`,null,i(n.updatedAt),1)])])]),l(`div`,H,[l(`div`,U,[f[3]||=l(`h2`,{class:`mt-6 text-xl font-extralight`},` Notes `,-1),l(`p`,W,` Invoice #`+i(n.invoiceNo),1),l(`p`,G,i(n.description),1)])])]))}}),q=g({__name:`billing-detail`,props:{billing:{}},setup(t){return(n,r)=>(_(),u(`div`,null,[a(e(w),null,{default:m(()=>[a(e(x),{"as-child":``},{default:m(()=>[a(e(C))]),_:1}),a(e(x),{"as-child":``},{default:m(()=>[a(e(S),{"aria-describedby":void 0})]),_:1})]),_:1}),a(K,{"card-no":t.billing.id,"order-id":t.billing.orderId||``,price:t.billing.amount,currency:`$`,state:t.billing.status,"updated-at":t.billing.date,"invoice-no":`${t.billing.id}`,description:t.billing.description},null,8,[`card-no`,`order-id`,`price`,`state`,`updated-at`,`invoice-no`,`description`])]))}});export{q as default}; |