vue3-year-calendar/dist/vue3-year-calendar.umd.cjs

A customizable year calendar component for Vue 3 applications

(function(u,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("dayjs")):typeof define=="function"&&define.amd?define(["exports","vue","dayjs"],e):(u=typeof globalThis<"u"?globalThis:u||self,e(u.Vue3YearCalendar={},u.Vue,u.dayjs))})(this,function(u,e,i){"use strict";const z={class:"yc-calendar__title"},x={class:"yc-calendar__body"},A=["onMouseover","onMousedown"],F=e.defineComponent({__name:"MonthCalendar",props:{activeDates:{default:()=>[]},month:{default:()=>i().month()+1},year:{default:()=>i().year()},lang:{default:"en"},activeClass:{default:"red"},prefixClass:{default:"yc-calendar--active"},darkmode:{type:Boolean,default:!1}},emits:["toggleDate","overDay"],setup(f,{emit:y}){const a=f,d=y,p=e.ref([]),m=e.ref(!1),k=e.computed(()=>({tw:"16px",en:"14px",pt:"14px",de:"14px",es:"14px"})[a.lang]??"14px"),M=e.computed(()=>{var s;const t={tw:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],en:["January","February","March","April","May","June","July","August","September","October","November","December"],pt:["Janeiro","Fevereiro","Março","Abril","Maio","Junho","Julho","Agosto","Setembro","Outubro","Novembro","Dezembro"],de:["Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember"],es:["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"]};return((s=t[a.lang])==null?void 0:s[Number(a.month)-1])??t.en[Number(a.month)-1]}),g=()=>{if(!a.year||!a.month){p.value=[];return}const t=i().set("date",1).set("year",Number(a.year)).set("month",Number(a.month)-1);let s=t.startOf("month").day()-1;s<0&&(s+=7);const l=t.endOf("month").date(),S=s>=5?6:5,E=7;let V=0;const v=Array.from({length:S*E},(N,h)=>({value:s<=h?++V%(l+1)||1:"",active:!1,isOtherMonth:s>h||V>l,className:""})),q=["red","blue","your_customized_classname","custom-day"];a.activeDates.forEach(N=>{const h=typeof N=="string"?{date:N,className:a.activeClass}:N,_=i(h.date);if(_.year()!==Number(a.year)||_.month()+1!==Number(a.month))return;const b=_.date(),K=Math.floor((b-1)/7),w=(b-1)%7+s+7*K;if(v[w]){v[w].active=!0;const Y=h.className||a.activeClass||"red";v[w].className=q.includes(Y)?Y:"red"}}),p.value=v},C=t=>{var l;const s={tw:["一","二","三","四","五","六","日"],en:["Mo","Tu","We","Th","Fr","Sa","Su"],pt:["2ª","3ª","4ª","5ª","6ª","Sa","Do"],de:["Mo","Di","Mi","Do","Fr","Sa","So"],es:["Lu","Ma","Mi","Ju","Vi","Sá","Do"]};return((l=s[a.lang])==null?void 0:l[t-1])??s.en[t-1]},D=t=>{if(t.isOtherMonth||!t.value)return;const s=i().set("year",Number(a.year)).set("month",Number(a.month)-1).set("date",Number(t.value)).format("YYYY-MM-DD");d("toggleDate",{date:s,selected:!t.active,className:a.activeClass||"red"})},o=t=>{if(m.value&&D(t),t.isOtherMonth||!t.value)return;const s=i().set("year",Number(a.year)).set("month",Number(a.month)-1).set("date",Number(t.value)).format("YYYY-MM-DD");d("overDay",{date:s,selected:!t.active,className:a.activeClass||"red"})},r=t=>{D(t),m.value=!0},n=()=>{m.value=!1},c=t=>{const s={"yc-calendar__day--otherMonth":t.isOtherMonth,[a.prefixClass]:t.active};return t.active&&t.className&&(s[t.className]=!0),s};return e.watch([()=>a.year,()=>a.month,()=>a.activeDates],()=>{g()}),g(),(t,s)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["yc-wrapper",{"yc-dark":t.darkmode}])},[e.createElementVNode("div",{class:"yc-calendar",onMouseup:n,onMouseleave:e.withModifiers(n,["stop"])},[e.createElementVNode("div",z,e.toDisplayString(M.value),1),e.createElementVNode("div",x,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(7,l=>e.createElementVNode("div",{key:`title${l}`,class:"yc-calendar__day yc-day__weektitle",style:e.normalizeStyle({fontSize:k.value})},e.toDisplayString(C(l)),5)),64)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(p.value,(l,S)=>(e.openBlock(),e.createElementBlock("div",{key:`day${S}`,class:"yc-calendar__day"},[e.createElementVNode("div",{class:e.normalizeClass(["yc-day",c(l)]),onMouseover:E=>o(l),onMousedown:E=>r(l)},e.toDisplayString(l.value),43,A)]))),128))])],32)],2))}}),B=(f,y)=>{const a=f.__vccOpts||f;for(const[d,p]of y)a[d]=p;return a},J=B(F,[["__scopeId","data-v-8b6a436b"]]),$={key:0,class:"yc-year"},L=["onClick"],T={class:"yc-months"},I=B(e.defineComponent({__name:"YearCalendar",props:{showYearSelector:{type:Boolean,default:!0},activeDates:{default:()=>[]},modelValue:{default:void 0},lang:{default:"en"},activeClass:{default:""},prefixClass:{default:"yc-calendar--active"},darkmode:{type:Boolean,default:!1}},emits:["update:modelValue","update:activeDates","toggleDate","overDay"],setup(f,{emit:y}){const a=f,d=y,p=e.ref(a.activeDates.length&&typeof a.activeDates[0]=="string"),m=e.computed({get:()=>parseInt(String(a.modelValue))||i().year(),set:o=>d("update:modelValue",o)}),k=e.computed(()=>{const o={};return a.activeDates.forEach(r=>{const n=typeof r=="string"?{date:r,className:a.activeClass}:{date:r.date,className:r.className??""};if(i(n.date).year()!==m.value)return;const c=(i(n.date).month()+1).toString();o[c]||(o[c]=[]),o[c].push(n)}),o}),M=o=>{m.value=o+m.value-3},g=o=>{d("toggleDate",{date:o.date,selected:o.selected,className:o.className});const r=[...a.activeDates],n=p.value?o.date:{date:o.date,className:o.className},c=r.findIndex(t=>(typeof t=="string"?t:t.date)===o.date);o.selected&&c===-1?r.push(n):!o.selected&&c!==-1&&r.splice(c,1),d("update:activeDates",r)},C=o=>{d("overDay",{date:o.date,selected:o.selected,className:o.className})},D=o=>o.every(r=>{const n=typeof r=="string"?r:r.date;if(!/^\d{4}-\d{1,2}-\d{1,2}$/.test(n))return!1;const[c,t,s]=n.split("-").map(Number);if(c<1e3||c>3e3||t===0||t>12)return!1;const l=[31,c%4===0&&c%100!==0||c%400===0?29:28,31,30,31,30,31,31,30,31,30,31];return s>0&&s<=l[t-1]});return a.activeDates.length&&!D(a.activeDates)&&console.warn("Invalid activeDates provided"),(o,r)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["yc-container",{"yc-dark":o.darkmode}])},[o.showYearSelector?(e.openBlock(),e.createElementBlock("div",$,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(5,n=>e.createElementVNode("span",{key:n,class:"yc-year-chooser",onClick:c=>M(n)},e.toDisplayString(n+m.value-3),9,L)),64))])):e.createCommentVNode("",!0),e.createElementVNode("div",T,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(12,n=>e.createVNode(J,{class:"yc-month",key:`month-${n}`,year:m.value,month:n,"active-dates":k.value[n]??[],"active-class":o.activeClass,lang:o.lang,"prefix-class":o.prefixClass,darkmode:o.darkmode,onToggleDate:g,onOverDay:C},null,8,["year","month","active-dates","active-class","lang","prefix-class","darkmode"])),64)),(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(5,n=>e.createElementVNode("div",{key:`empty-${n}`,class:"yc-month yc-empty"})),64))])],2))}}),[["__scopeId","data-v-5fa84686"]]);u.YearCalendar=I,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})});