vue3-mycalendar
Version:
A calendar and scheduling package for Vue 3
2 lines (1 loc) • 16.9 kB
JavaScript
(function(S,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(S=typeof globalThis<"u"?globalThis:S||self,e(S.MyCalendar={},S.Vue))})(this,(function(S,e){"use strict";function R(b,V){const h=e.computed(()=>b.popupFields||[]),a=e.ref({...b.eventData}),m=e.ref([...b.eventData?.todos||[]]),i=e.ref([...b.eventData?.participants||[]]);e.watch(()=>b.eventData,l=>{l&&(a.value={...l},m.value=[...l.todos||[]],i.value=[...l.participants||[]])},{immediate:!0});const d=l=>l.replace(/_/g," ").replace(/\b\w/g,_=>_.toUpperCase()),r=e.computed(()=>h.value.length===0?a.value:Object.fromEntries(Object.entries(a.value).filter(([l])=>h.value.includes(l)))),D=(l,_)=>{a.value[l]=_,V("updateEvent",a.value)},c=e.ref(""),N=()=>{const l=c.value.trim();l&&(m.value.push(l),c.value="",V("update:todos",{todos:[...m.value],eventId:a.value.id}))},w=l=>{m.value.splice(l,1),V("update:todos",{todos:[...m.value],eventId:a.value.id})},k=e.ref("");return{editableEventData:a,popupFields:h,filteredEventData:r,formatKey:d,updateField:D,localTodos:m,newTodo:c,addTodo:N,removeTodo:w,localParticipants:i,newParticipant:k,addParticipant:()=>{const l=k.value.trim();l&&(i.value.push(l),k.value="",V("update:participants",{participants:[...i.value],eventId:a.value.id}))},removeParticipant:l=>{i.value.splice(l,1),V("update:participants",{participants:[...i.value],eventId:a.value.id})}}}const O={key:0,class:"popup"},Y={class:"top-right-icons"},j={class:"popup-title"},K={key:0},X={key:0,class:"popup-field"},H={class:"popup-label"},G=["onUpdate:modelValue","placeholder"],J={class:"section"},Q={class:"popup-label"},Z={class:"list"},ee=["onClick"],te={class:"input-row"},oe={class:"section"},ne={class:"popup-label"},ae={class:"list"},le=["onClick"],se={class:"input-row"},re=e.defineComponent({__name:"Popup",props:{visible:{type:Boolean},closeButtonText:{},eventData:{},popupFields:{},todosLabel:{},participantsLabel:{},todos:{},participants:{},todoPlaceholder:{},participantPlaceholder:{}},emits:["submit-event","handle-delete","update-event","show-info","close-popup","update:todos","update:participants"],setup(b,{emit:V}){const h=b,a=e.computed(()=>h.todosLabel||"To-do"),m=e.computed(()=>h.participantsLabel||"Participant"),i=V,{editableEventData:d,filteredEventData:r,formatKey:D,localTodos:c,newTodo:N,addTodo:w,localParticipants:k,newParticipant:T,addParticipant:C}=R(h,i),l=()=>i("close-popup"),_=()=>i("handle-delete",h.eventData.id),P=()=>{const y={...d.value,todos:c.value,participants:k.value};i("update-event",y),i("update:todos",{todos:c.value,eventId:h.eventData.id}),i("update:participants",{participants:k.value,eventId:h.eventData.id}),i("close-popup")},B=e.ref(null),L={x:0,y:0},M=y=>{if(!B.value)return;const u=B.value;L.x=y.clientX-u.getBoundingClientRect().left,L.y=y.clientY-u.getBoundingClientRect().top;const g=E=>{u.style.left=`${E.clientX-L.x}px`,u.style.top=`${E.clientY-L.y}px`,u.style.position="absolute",u.style.transform="none"},f=()=>{window.removeEventListener("mousemove",g),window.removeEventListener("mouseup",f)};window.addEventListener("mousemove",g),window.addEventListener("mouseup",f)},$=y=>{c.value.splice(y,1),i("update:todos",{todos:[...c.value],eventId:d.value.id})},A=y=>{k.value.splice(y,1),i("update:participants",{participants:[...k.value],eventId:d.value.id})};return(y,u)=>{const g=e.resolveComponent("font-awesome-icon");return b.visible?(e.openBlock(),e.createElementBlock("div",O,[e.createElementVNode("div",{class:"popup-content",ref_key:"popupRef",ref:B,onMousedown:M},[e.createElementVNode("div",Y,[e.createElementVNode("button",{class:"icon-button",onClick:_,title:"Delete"},[e.createVNode(g,{icon:["fas","trash"]})]),e.createElementVNode("button",{class:"icon-button",onClick:l,title:"Close"},[e.createVNode(g,{icon:["fas","times"]})])]),e.createElementVNode("h2",j,e.toDisplayString(e.unref(d).title),1),b.eventData&&Object.keys(b.eventData).length?(e.openBlock(),e.createElementBlock("div",K,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(r),(f,E)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:E},[E!=="title"?(e.openBlock(),e.createElementBlock("div",X,[e.createElementVNode("label",H,e.toDisplayString(e.unref(D)(String(E))),1),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":F=>e.unref(d)[E]=F,class:"popup-input",placeholder:e.unref(D)(String(E))},null,8,G),[[e.vModelText,e.unref(d)[E]]])])):e.createCommentVNode("",!0)],64))),128))])):e.createCommentVNode("",!0),e.createElementVNode("div",J,[e.createElementVNode("label",Q,e.toDisplayString(a.value),1),e.createElementVNode("ul",Z,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(c),(f,E)=>(e.openBlock(),e.createElementBlock("li",{key:E},[e.createTextVNode(e.toDisplayString(f)+" ",1),e.createElementVNode("button",{onClick:F=>$(E)},[e.createVNode(g,{icon:["fas","trash"]})],8,ee)]))),128))]),e.createElementVNode("div",te,[e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":u[0]||(u[0]=f=>e.isRef(N)?N.value=f:null),placeholder:"New To-do...",class:"popup-input"},null,512),[[e.vModelText,e.unref(N)]]),e.createElementVNode("button",{class:"add-inline-button",onClick:u[1]||(u[1]=(...f)=>e.unref(w)&&e.unref(w)(...f))},[e.createVNode(g,{icon:["fas","plus"]})])])]),e.createElementVNode("div",oe,[e.createElementVNode("label",ne,e.toDisplayString(m.value),1),e.createElementVNode("ul",ae,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(k),(f,E)=>(e.openBlock(),e.createElementBlock("li",{key:E},[e.createTextVNode(e.toDisplayString(f)+" ",1),e.createElementVNode("button",{onClick:F=>A(E)},[e.createVNode(g,{icon:["fas","trash"]})],8,le)]))),128))]),e.createElementVNode("div",se,[e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":u[2]||(u[2]=f=>e.isRef(T)?T.value=f:null),placeholder:"Add Participant ...",class:"popup-input"},null,512),[[e.vModelText,e.unref(T)]]),e.createElementVNode("button",{class:"add-inline-button",onClick:u[3]||(u[3]=(...f)=>e.unref(C)&&e.unref(C)(...f))},[e.createVNode(g,{icon:["fas","user-plus"]})])])]),e.createElementVNode("div",{class:"popup-footer"},[e.createElementVNode("button",{class:"save-button",onClick:P},"Speichern")])],544)])):e.createCommentVNode("",!0)}}}),ie="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2050%2050'%20width='50px'%20height='50px'%3e%3cpath%20d='M%2025%202%20C%2012.309295%202%202%2012.309295%202%2025%20C%202%2037.690705%2012.309295%2048%2025%2048%20C%2037.690705%2048%2048%2037.690705%2048%2025%20C%2048%2012.309295%2037.690705%202%2025%202%20z%20M%2025%204%20C%2036.609824%204%2046%2013.390176%2046%2025%20C%2046%2036.609824%2036.609824%2046%2025%2046%20C%2013.390176%2046%204%2036.609824%204%2025%20C%204%2013.390176%2013.390176%204%2025%204%20z%20M%2025%2011%20A%203%203%200%200%200%2022%2014%20A%203%203%200%200%200%2025%2017%20A%203%203%200%200%200%2028%2014%20A%203%203%200%200%200%2025%2011%20z%20M%2021%2021%20L%2021%2023%20L%2022%2023%20L%2023%2023%20L%2023%2036%20L%2022%2036%20L%2021%2036%20L%2021%2038%20L%2022%2038%20L%2023%2038%20L%2027%2038%20L%2028%2038%20L%2029%2038%20L%2029%2036%20L%2028%2036%20L%2027%2036%20L%2027%2021%20L%2026%2021%20L%2022%2021%20L%2021%2021%20z'/%3e%3c/svg%3e",de=["for"],ce={key:0},pe=["id","onUpdate:modelValue"],me=["value"],ue={key:1},fe=["id","onUpdate:modelValue","type"],Ee={class:"form-group"},be={for:"start",class:"form-label"},ge={class:"form-group"},he={for:"end",class:"form-label"},ke={class:"form-group"},ye={for:"date",class:"form-label"},Ve={type:"submit",class:"submit-button"},De={class:"calendar"},Se={class:"navigation"},Ne={class:"current-week"},_e={class:"hours-and-days"},Le={class:"hours"},Be={class:"weekdays-container"},we={class:"weekdays"},Te={class:"days"},Ce=["onDrop"],Me=["onDragstart"],$e=["onClick"],Fe=["src"],v=e.defineComponent({__name:"ScheduleForm",props:{schedules:{},additionalFields:{},customClass:{default:""},customStyles:{default:()=>({})},weekdays:{default:()=>["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"]},eventTitleColor:{default:"#000"},eventTitleSize:{default:"16px"},popupFields:{default:()=>[]},labelsAndSettings:{default:()=>({startTimeLabel:"Start Time",endTimeLabel:"End Time",dateLabel:"Date",submitButtonText:"Add Entry",calendarWeekLabel:"CW"})},placeholderSettings:{default:()=>({})},popupVisible:{type:Boolean,default:!1},popupEvent:{default:null}},emits:["submit-event","handle-delete","update-event","show-info","close-popup","update:todos","update:participants"],setup(b,{expose:V,emit:h}){const a=b,m=h;e.useSlots();const i=e.ref(!1),d=e.ref({}),r=e.ref({start:"",end:"",date:"",color:"",title:"",description:""}),D=e.ref(0),c=e.ref(null),N=e.ref(Array.from({length:24},(n,t)=>t.toString().padStart(2,"0")+":00")),w=e.computed(()=>a.weekdays),k=e.computed(()=>a.eventTitleColor),T=e.computed(()=>a.eventTitleSize),C=e.computed(()=>a.additionalFields),l=e.computed(()=>({startTimeLabel:a.labelsAndSettings?.startTimeLabel||"Start Time",endTimeLabel:a.labelsAndSettings?.endTimeLabel||"End Time",dateLabel:a.labelsAndSettings?.dateLabel||"Date",submitButtonText:a.labelsAndSettings?.submitButtonText||"Add Entry",calendarWeekLabel:a.labelsAndSettings?.calendarWeekLabel||"CW",todosLabel:a.labelsAndSettings?.todosLabel,participantsLabel:a.labelsAndSettings?.participantsLabel})),_=e.computed(()=>a.placeholderSettings||{}),P=e.computed(()=>a.popupVisible),B=e.computed(()=>a.popupEvent),L=()=>{r.value={start:"",end:"",date:"",color:"",title:"",description:""},a.additionalFields.forEach(n=>{r.value[n.model]=""})},M=n=>{const t=n||r.value,o={title:t.title,start:t.start,end:t.end,date:t.date,info:t.info,color:t.color,description:t.description};a.additionalFields.forEach(s=>{o[s.model]=t[s.model]}),m("submit-event",o),L()},$=n=>{const t=new Date,o=t.getDay(),s=n+1-o+D.value*7,p=new Date(t);return p.setDate(t.getDate()+s),p.toISOString().substring(0,10)},A=()=>{const n=new Date,t=new Date(n.getFullYear(),0,1),o=(n.getTime()-t.getTime())/864e5+D.value*7;return Math.ceil((o+t.getDay()+1)/7)},y=()=>{D.value-=1},u=()=>{D.value+=1},g=n=>{const[t,o]=n.split(":").map(Number);return{h:t,m:o,totalMinutes:t*60+o}},f=n=>{const t=g(n.start),o=g(n.end),s=t.totalMinutes*40/60,p=(o.totalMinutes-t.totalMinutes)*40/60;return{backgroundColor:n.color||"var(--calendar-primary-color)",top:`${s}px`,height:`${p}px`,position:"absolute",left:0,right:0,zIndex:1,borderRadius:"var(--event-border-radius)"}},E=(n,t)=>g(t).totalMinutes-g(n).totalMinutes,F=(n,t)=>{const o=g(n).totalMinutes+t,s=Math.floor(o/60).toString().padStart(2,"0"),p=(o%60).toString().padStart(2,"0");return`${s}:${p}`},xe=(n,t)=>{c.value=t},Pe=()=>{c.value=null},Ae=(n,t)=>{if(!c.value)return;const s=n.currentTarget.getBoundingClientRect(),p=n.clientY-s.top,x=60/40,z=Math.round(p*x/15)*15,W=`${String(Math.floor(z/60)).padStart(2,"0")}:${String(z%60).padStart(2,"0")}`,qe=E(c.value.start,c.value.end),Re=F(W,qe),U=$(t),I={...c.value,start:W,end:Re,date:U};m("update-event",I);const q=c.value.date;d.value[q]=d.value[q]?.filter(Oe=>Oe.id!==c.value.id)||[],d.value[U]=[...d.value[U]||[],I],c.value=null},Ue=n=>{m("show-info",n)},ve=()=>{m("close-popup")},ze=n=>{m("handle-delete",n)},We=n=>{m("update-event",n)},Ie=()=>{if(!a.schedules.length){d.value={};return}d.value={},a.schedules.forEach(n=>{const t=n.date;d.value[t]||(d.value[t]=[]),d.value[t].push(n)})};return e.watchEffect(Ie),e.onMounted(()=>{a.additionalFields.forEach(t=>{r.value[t.model]=""}),window.matchMedia?.("(prefers-color-scheme: dark)")?.matches&&(i.value=!0)}),V({newEvent:r,addEvent:M,resetForm:L}),(n,t)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["calendar-theme",b.customClass,{dark:i.value}]),style:e.normalizeStyle(b.customStyles)},[e.renderSlot(n.$slots,"form",{newEvent:r.value,addEvent:M,additionalFields:C.value,labels:l.value,resetForm:L},()=>[e.createElementVNode("form",{class:"form-container",onSubmit:e.withModifiers(M,["prevent"])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(C.value,o=>(e.openBlock(),e.createElementBlock("div",{key:o.id,class:"form-group"},[e.createElementVNode("label",{for:o.id,class:"form-label"},e.toDisplayString(o.label)+":",9,de),o.type==="select"?(e.openBlock(),e.createElementBlock("div",ce,[e.withDirectives(e.createElementVNode("select",{id:o.id,"onUpdate:modelValue":s=>r.value[o.model]=s,required:"",class:"form-select"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.options,s=>(e.openBlock(),e.createElementBlock("option",{key:s.id,value:s},e.toDisplayString(s.name||`${s.first_name} ${s.last_name}`),9,me))),128))],8,pe),[[e.vModelSelect,r.value[o.model]]])])):(e.openBlock(),e.createElementBlock("div",ue,[e.withDirectives(e.createElementVNode("input",{id:o.id,"onUpdate:modelValue":s=>r.value[o.model]=s,type:o.type,required:"",class:"form-input"},null,8,fe),[[e.vModelDynamic,r.value[o.model]]])]))]))),128)),e.createElementVNode("div",Ee,[e.createElementVNode("label",be,e.toDisplayString(l.value.startTimeLabel)+":",1),e.withDirectives(e.createElementVNode("input",{id:"start","onUpdate:modelValue":t[0]||(t[0]=o=>r.value.start=o),type:"time",required:"",class:"form-input"},null,512),[[e.vModelText,r.value.start]])]),e.createElementVNode("div",ge,[e.createElementVNode("label",he,e.toDisplayString(l.value.endTimeLabel)+":",1),e.withDirectives(e.createElementVNode("input",{id:"end","onUpdate:modelValue":t[1]||(t[1]=o=>r.value.end=o),type:"time",required:"",class:"form-input"},null,512),[[e.vModelText,r.value.end]])]),e.createElementVNode("div",ke,[e.createElementVNode("label",ye,e.toDisplayString(l.value.dateLabel)+":",1),e.withDirectives(e.createElementVNode("input",{id:"date","onUpdate:modelValue":t[2]||(t[2]=o=>r.value.date=o),type:"date",required:"",class:"form-input"},null,512),[[e.vModelText,r.value.date]])]),e.createElementVNode("button",Ve,e.toDisplayString(l.value.submitButtonText),1)],32)]),e.createElementVNode("div",De,[e.createElementVNode("div",Se,[e.createElementVNode("button",{type:"button",class:"arrow-button",onClick:y},"<"),e.createElementVNode("span",Ne,e.toDisplayString(l.value.calendarWeekLabel)+" "+e.toDisplayString(A()),1),e.createElementVNode("button",{type:"button",class:"arrow-button",onClick:u},">")]),e.createElementVNode("div",_e,[e.createElementVNode("div",Le,[t[6]||(t[6]=e.createElementVNode("div",{class:"empty-slot"},null,-1)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(N.value,o=>(e.openBlock(),e.createElementBlock("div",{key:o,class:"hour"},e.toDisplayString(o),1))),128))]),e.createElementVNode("div",Be,[e.createElementVNode("ul",we,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(w.value,(o,s)=>(e.openBlock(),e.createElementBlock("li",{key:s,class:"weekday"},[e.createElementVNode("span",null,e.toDisplayString(o),1),e.createElementVNode("span",null,e.toDisplayString($(s)),1)]))),128))]),e.createElementVNode("div",Te,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(7,(o,s)=>e.createElementVNode("div",{key:s,class:"day",onDragover:t[3]||(t[3]=e.withModifiers(()=>{},["prevent"])),onDrop:p=>Ae(p,s)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(N.value,p=>(e.openBlock(),e.createElementBlock("div",{key:p,class:"hour"}))),128)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(d.value[$(s)]||[],p=>(e.openBlock(),e.createElementBlock("div",{key:p.id,class:"event",style:e.normalizeStyle(f(p)),draggable:"true",onDragstart:x=>xe(x,p),onDragend:Pe},[e.createElementVNode("span",{style:e.normalizeStyle({color:k.value,fontSize:T.value})},e.toDisplayString(p.title),5),t[7]||(t[7]=e.createElementVNode("br",null,null,-1)),e.createElementVNode("button",{type:"button",class:"info-button",onClick:x=>Ue(p)},[e.createElementVNode("img",{src:e.unref(ie),alt:"info",class:"small-logo"},null,8,Fe)],8,$e)],44,Me))),128))],40,Ce)),64))])])])]),n.$slots["popup-calendar"]?e.renderSlot(n.$slots,"popup-calendar",{key:0}):(e.openBlock(),e.createBlock(re,{key:1,visible:P.value,eventData:B.value,popupFields:b.popupFields||[],closeButtonText:"Close",todosLabel:l.value.todosLabel||"To-Do",participantsLabel:l.value.participantsLabel||"Teammates",todos:B.value?.todos||[],participants:B.value?.participants||[],todoPlaceholder:_.value.todo||"New To-do...",participantPlaceholder:_.value.participant||"Add Participant...","onUpdate:todos":t[4]||(t[4]=o=>m("update:todos",o)),"onUpdate:participants":t[5]||(t[5]=o=>m("update:participants",o)),onClosePopup:ve,onHandleDelete:ze,onUpdateEvent:We},null,8,["visible","eventData","popupFields","todosLabel","participantsLabel","todos","participants","todoPlaceholder","participantPlaceholder"]))],6))}});S.ScheduleForm=v,S.default=v,Object.defineProperties(S,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));