2 lines
2.6 KiB
JavaScript
2 lines
2.6 KiB
JavaScript
import{d as S,H as w,l as v,aj as C,z as y,A as h,a6 as g,K as l,B as n,a3 as _,em as x,r as f,D as b,E as z}from"./CE4SaZgW.js";import{i as k}from"./7NC7WC4Q.js";import{_ as D}from"./LnMFAdTT.js";import{f as P,m as j}from"./DebaRAa_.js";const B=["id","value"],$=["for"],E=S({__name:"StoriesComponent",props:{story:{},selectedStory:{}},emits:["update:selectedStory"],setup(i,{emit:c}){const p=w(),o=i,u=c,r=v(()=>o.selectedStory?.includes(o.story?.id)),s=v({get(){return o.selectedStory},set(e){u("update:selectedStory",e)}});function d(){const e=s.value?.findIndex(t=>t===o.story.id);e===-1?s.value?.push(o.story.id):s.value?.splice(e,1)}return(e,t)=>{const a=C("lazy");return y(),h("div",{class:"w-full h-full aspect-[2/3] relative",onClick:d},[g(n("img",{class:_(["w-full h-full object-cover aspect-[2/3]",r.value&&"bg-gray-500 opacity-50"])},null,2),[[a,{src:l(p).useDataStorage(e.story?.media_url),loading:l(k),error:l(k)}]]),g(n("input",{type:"checkbox",id:`story-${e.story.id}`,value:e.story,"onUpdate:modelValue":t[0]||(t[0]=m=>s.value=m),class:"absolute opacity-0 w-full h-full peer"},null,8,B),[[x,s.value]]),n("label",{for:`story-${e.story.id}`,class:"absolute bottom-2 right-2 w-5 h-5 rounded border-1 border-black cursor-pointer transition-all group-hover:ring-2 group-hover:ring-blue-400 peer-checked:bg-black peer-checked:border-black"},[(y(),h("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"3","stroke-linecap":"round","stroke-linejoin":"round",class:_(["w-18px h-18px text-white bg-black transition-opacity",r.value?"peer-checked:opacity-100":"opacity-0"])},t[1]||(t[1]=[n("path",{d:"M5 12l5 5L20 7"},null,-1)]),2))],8,$)])}}}),M=Object.assign(E,{__name:"StoriesComponent"}),R={class:"cropper-wrapper"},O=S({__name:"ProfilePictureEditor",props:{src:{}},emits:["onCropped"],setup(i,{expose:c,emit:p}){const o=i,u=p,r=f(null),s=f(null);f(!1);const d=v(()=>o.src.startsWith("data:")?o.src:`${o.src}?cacheBust=${Date.now()}`);return c({crop:()=>{const t=s.value;if(!t)return;const a=t.getResult({size:{width:400,height:400},mime:"image/jpeg",quality:.9});a?.canvas?(r.value=a.canvas.toDataURL(),u("onCropped",r.value)):console.warn("❗ Failed to get canvas result")}}),(t,a)=>{const m=D;return y(),h("div",R,[b(m,null,{default:z(()=>[b(l(P),{ref_key:"cropperRef",ref:s,class:"cropper",src:d.value,"stencil-component":l(j),"stencil-props":{aspectRatio:1,movable:!1,resizable:!1},"stencil-size":{width:340,height:340},"image-restriction":"stencil"},null,8,["src","stencil-component"])]),_:1})])}}}),N=Object.assign(O,{__name:"ProfilePictureEditor"});export{N as P,M as S};
|