vue3-month-range-picker/dist/vue3-month-range-picker.cjs.js

這是一個非常簡易而且只有選擇月份範圍的 Vue3 組件，支持更換月份格式。

!function(){"use strict";try{if("undefined"!=typeof document){var d=document.createElement("style");d.appendChild(document.createTextNode(".month-range-picker[data-v-cad7382f]{position:relative}.month-range-picker .input-field input[data-v-cad7382f]{padding:8px;border:1px solid #ddd;border-radius:5px;cursor:pointer;width:100%;background:#fff;text-align:left}.months-panel[data-v-cad7382f]{max-width:250px;display:flex;flex-wrap:wrap;margin-top:5px;border:1px solid #ddd;padding:12px;border-radius:5px;position:absolute;background:#fff;z-index:10;box-shadow:0 2px 5px #0003;color:#000}.month[data-v-cad7382f]{width:calc(33.3333333333% - 20px);text-align:center;padding:4px 10px;margin:0;cursor:pointer;border:0}.month.start-month[data-v-cad7382f]{background-color:#007bff;color:#fff;border-top-left-radius:4px;border-bottom-left-radius:4px}.month.end-month[data-v-cad7382f]{background-color:#007bff;color:#fff;border-top-right-radius:4px;border-bottom-right-radius:4px}.month.in-range[data-v-cad7382f],.month.hover-range[data-v-cad7382f]{background-color:#e0efff}.month[data-v-cad7382f]:hover{background-color:#007bff;color:#fff;border-radius:4px}")),document.head.appendChild(d)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}}();
"use strict";const e=require("vue"),t={class:"input-field"},n=["placeholder"],o={key:0,class:"months-panel"},a=["onClick","onMouseover"],d=((e,t)=>{const n=e.__vccOpts||e;for(const[o,a]of t)n[o]=a;return n})(e.defineComponent({__name:"MonthRangePicker",props:{placeholder:{type:String,default:""},startMonth:{type:String,default:""},endMonth:{type:String,default:""},monthFormat:{type:Array,default:()=>["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]}},emits:["update:startMonth","update:endMonth"],setup(d,{emit:r}){const l=r,i=d;let u=e.ref(!1),s=e.ref(!1),m=e.ref(!1),c=e.ref(null),h=e.ref(""),v=e.ref([{id:"01",name:"01"},{id:"02",name:"02"},{id:"03",name:"03"},{id:"04",name:"04"},{id:"05",name:"05"},{id:"06",name:"06"},{id:"07",name:"07"},{id:"08",name:"08"},{id:"09",name:"09"},{id:"10",name:"10"},{id:"11",name:"11"},{id:"12",name:"12"}]);const p=()=>{const e=v.value.find((e=>e.id===i.startMonth)),t=v.value.find((e=>e.id===i.endMonth));h.value=e&&t?`${e.name} - ${t.name}`:e?e.name:i.placeholder},M=()=>{u.value=!0,s.value=!0,setTimeout((()=>u.value=!1),200),document.addEventListener("click",f)},f=()=>{setTimeout((()=>{u.value||(s.value=!1)}),200)},k=e=>i.startMonth&&i.endMonth&&e>i.startMonth&&e<i.endMonth,g=e=>i.startMonth&&!i.endMonth&&e>i.startMonth&&e<=c.value,y=()=>{s.value=!1,B()},B=()=>{document.removeEventListener("click",f)},E=()=>{m.value=!1,c.value=null};e.watch((()=>i.monthFormat),(()=>{v.value=v.value.map(((e,t)=>({...e,name:String(i.monthFormat[t]||e.name)})))}),{immediate:!0});const{startMonth:C,endMonth:S}=e.toRefs(i);return e.watch([C,S],(([e,t],[n,o])=>p())),e.onMounted((()=>p())),e.onBeforeUnmount((()=>{document.removeEventListener("click",f)})),(r,p)=>(e.openBlock(),e.createElementBlock("div",{class:"month-range-picker",onClick:p[1]||(p[1]=e.withModifiers((()=>{}),["stop"]))},[e.createElementVNode("div",t,[e.withDirectives(e.createElementVNode("input",{type:"button","onUpdate:modelValue":p[0]||(p[0]=t=>e.isRef(h)?h.value=t:h=t),placeholder:d.placeholder,onClick:M,onBlur:f},null,40,n),[[e.vModelText,e.unref(h)]])]),e.unref(s)?(e.openBlock(),e.createElementBlock("div",o,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(v),(t=>(e.openBlock(),e.createElementBlock("div",{key:t.id,class:e.normalizeClass(["month",{"start-month":t.id===i.startMonth,"end-month":t.id===i.endMonth,"in-range":k(t.id),"hover-range":e.unref(m)&&g(t.id)}]),onClick:e=>(e=>{u.value=!0,setTimeout((()=>u.value=!1),200),!i.startMonth||i.startMonth&&i.endMonth?(l("update:startMonth",e.id),l("update:endMonth",void 0)):i.endMonth||(e.id>=i.startMonth?l("update:endMonth",e.id):(l("update:startMonth",e.id),l("update:endMonth",i.startMonth)),y())})(t),onMouseover:e=>(e=>{m.value=!0,c.value=e})(t.id),onMouseleave:E},e.toDisplayString(t.name),43,a)))),128))])):e.createCommentVNode("",!0)]))}}),[["__scopeId","data-v-cad7382f"]]);module.exports=d;