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