vue-month-toggle-component
Version:
[]() []() []()
2 lines (1 loc) • 6.58 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.VueMonthToggle={},l.Vue))})(this,function(l,e){"use strict";const A="",d=(i,t)=>{const o=i.__vccOpts||i;for(const[c,r]of t)o[c]=r;return o},m={components:{},data(){return{monthsArray:[],currentDate:new Date,year:new Date().getFullYear(),clicked:!0,activityArray:[{name:"jan",active:!1},{name:"feb",active:!1},{name:"mar",active:!1},{name:"apr",active:!1},{name:"may",active:!1},{name:"jun",active:!1},{name:"jul",active:!1},{name:"aug",active:!1},{name:"sep",active:!1},{name:"oct",active:!1},{name:"nov",active:!1},{name:"dec",active:!1}],locales:[{name:"en",months:["January","February","March","April","May","June","July","August","September","October","November","December"],dateFormat:"mm-dd-yyyy"},{name:"de",months:["Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember"],dateFormat:"dd-mm-yyyy"},{name:"fr",months:["Janivier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre"],dateFormat:"dd-mm-yyyy"},{name:"sp",months:["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"],dateFormat:"dd-mm-yyyy"},{name:"jp",months:["ichi-gatsu","ni-gatsu","san-gatsu","shi-gatsu","go-gatsu","roku-gatsu","shichi-gatsu","hachi-gatsu","ku-gatsu","juu-gatsu","juuichi-gatsu","juuni-gatsu"],dateFormat:"dd-mm-yyyy"}],textModes:["fullText","abbreviated"],selectionModes:["onConfirm","onToggle"]}},props:{modelValue:{type:Object},locale:{type:String,default:"en"},textMode:{type:String,default:"fullText"},selectionMode:{type:String,default:"onConfirm"},themes:[]},emits:["update:modelValue"],computed:{value:{get(){return this.modelValue},set(i){this.$emit("update:modelValue",i)}}},methods:{getLocaleMonth(i){return this.textMode=="abbreviated"?this.locales.find(t=>t.name===this.locale).months[i].substring(0,3):this.locales.find(t=>t.name===this.locale).months[i]},toggleMonth(i){this.activityArray[i].active==!1?(this.activityArray[i].active=!0,this.monthsArray.push({year:this.year,month:i})):(this.activityArray[i].active=!1,this.monthsArray=this.monthsArray.filter(t=>!(t.year==this.year&&t.month==i))),console.log(this.selectionMode),this.selectionMode=="onToggle"&&(console.log("setting timeslots"),this.setTimeslot())},prevYear(){this.year--,this.resetActivity()},nextYear(){this.year++,this.resetActivity()},resetActivity(){for(var i=0;i<this.activityArray.length;i++){this.monthsArray.find(o=>o.year==this.year&&o.month==i)?this.activityArray[i].active=!0:this.activityArray[i].active=!1;var t=document.getElementById("c"+i.toString());t.classList.remove("card"),t.offsetWidth,t.classList.add("card")}},setTimeslot(){this.monthsArray.sort((i,t)=>i.year===t.year?i.month<t.month?-1:1:i.year<t.year?-1:1),this.value=JSON.parse(JSON.stringify(this.monthsArray))}},created(){}},s=i=>(e.pushScopeId("data-v-d9771e43"),i=i(),e.popScopeId(),i),y={class:"filter-wrapper"},g=s(()=>e.createElementVNode("div",{class:"nav-header"},null,-1)),v={class:"year-picker"},h={class:"btn-div"},f=s(()=>e.createElementVNode("hr",{class:"rounded"},null,-1)),M={class:"animated-grid",id:"grid"};function u(i,t,o,c,r,a){return e.openBlock(),e.createElementBlock("div",y,[e.createElementVNode("div",{class:e.normalizeClass(["nav-menu-item",{expand:r.clicked,collapse:!r.clicked}])},[g,e.createElementVNode("div",v,[e.createElementVNode("div",h,[e.createElementVNode("button",{onClick:t[0]||(t[0]=n=>a.prevYear())},"<"),e.createElementVNode("div",null,e.toDisplayString(this.year),1),e.createElementVNode("button",{onClick:t[1]||(t[1]=n=>a.nextYear())},">")]),f,e.createElementVNode("div",M,[e.createElementVNode("div",{id:"c0",class:e.normalizeClass(["card",[r.activityArray[0].active?"active":"inactive"]]),onClick:t[2]||(t[2]=n=>a.toggleMonth(0))},e.toDisplayString(a.getLocaleMonth(0)),3),e.createElementVNode("div",{id:"c1",class:e.normalizeClass(["card",[r.activityArray[1].active?"active":"inactive"]]),onClick:t[3]||(t[3]=n=>a.toggleMonth(1))},e.toDisplayString(a.getLocaleMonth(1)),3),e.createElementVNode("div",{id:"c2",class:e.normalizeClass(["card",[r.activityArray[2].active?"active":"inactive"]]),onClick:t[4]||(t[4]=n=>a.toggleMonth(2))},e.toDisplayString(a.getLocaleMonth(2)),3),e.createElementVNode("div",{id:"c3",class:e.normalizeClass(["card",[r.activityArray[3].active?"active":"inactive"]]),onClick:t[5]||(t[5]=n=>a.toggleMonth(3))},e.toDisplayString(a.getLocaleMonth(3)),3),e.createElementVNode("div",{id:"c4",class:e.normalizeClass(["card",[r.activityArray[4].active?"active":"inactive"]]),onClick:t[6]||(t[6]=n=>a.toggleMonth(4))},e.toDisplayString(a.getLocaleMonth(4)),3),e.createElementVNode("div",{id:"c5",class:e.normalizeClass(["card",[r.activityArray[5].active?"active":"inactive"]]),onClick:t[7]||(t[7]=n=>a.toggleMonth(5))},e.toDisplayString(a.getLocaleMonth(5)),3),e.createElementVNode("div",{id:"c6",class:e.normalizeClass(["card",[r.activityArray[6].active?"active":"inactive"]]),onClick:t[8]||(t[8]=n=>a.toggleMonth(6))},e.toDisplayString(a.getLocaleMonth(6)),3),e.createElementVNode("div",{id:"c7",class:e.normalizeClass(["card",[r.activityArray[7].active?"active":"inactive"]]),onClick:t[9]||(t[9]=n=>a.toggleMonth(7))},e.toDisplayString(a.getLocaleMonth(7)),3),e.createElementVNode("div",{id:"c8",class:e.normalizeClass(["card",[r.activityArray[8].active?"active":"inactive"]]),onClick:t[10]||(t[10]=n=>a.toggleMonth(8))},e.toDisplayString(a.getLocaleMonth(8)),3),e.createElementVNode("div",{id:"c9",class:e.normalizeClass(["card",[r.activityArray[9].active?"active":"inactive"]]),onClick:t[11]||(t[11]=n=>a.toggleMonth(9))},e.toDisplayString(a.getLocaleMonth(9)),3),e.createElementVNode("div",{id:"c10",class:e.normalizeClass(["card",[r.activityArray[10].active?"active":"inactive"]]),onClick:t[12]||(t[12]=n=>a.toggleMonth(10))},e.toDisplayString(a.getLocaleMonth(10)),3),e.createElementVNode("div",{id:"c11",class:e.normalizeClass(["card",[r.activityArray[11].active?"active":"inactive"]]),onClick:t[13]||(t[13]=n=>a.toggleMonth(11))},e.toDisplayString(a.getLocaleMonth(11)),3)]),o.selectionMode=="onConfirm"?(e.openBlock(),e.createElementBlock("button",{key:0,onClick:t[14]||(t[14]=n=>a.setTimeslot())},"confirm")):e.createCommentVNode("",!0)])],2)])}const p=d(m,[["render",u],["__scopeId","data-v-d9771e43"]]);l.MonthTogglePicker=p,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})});