vue3-month-range-picker/dist/vue3-month-range-picker.umd.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)}}();
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define(["vue"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).vue3MonthRangePicker=t(e.Vue)}(this,(function(e){"use strict";const t={class:"input-field"},n=["placeholder"],o={key:0,class:"months-panel"},a=["onClick","onMouseover"];return((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:l}){const r=l,i=d;let u=e.ref(!1),s=e.ref(!1),c=e.ref(!1),m=e.ref(null),h=e.ref(""),p=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 v=()=>{const e=p.value.find((e=>e.id===i.startMonth)),t=p.value.find((e=>e.id===i.endMonth));h.value=e&&t?`${e.name} - ${t.name}`:e?e.name:i.placeholder},f=()=>{u.value=!0,s.value=!0,setTimeout((()=>u.value=!1),200),document.addEventListener("click",M)},M=()=>{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<=m.value,y=()=>{s.value=!1,B()},B=()=>{document.removeEventListener("click",M)},E=()=>{c.value=!1,m.value=null};e.watch((()=>i.monthFormat),(()=>{p.value=p.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])=>v())),e.onMounted((()=>v())),e.onBeforeUnmount((()=>{document.removeEventListener("click",M)})),(l,v)=>(e.openBlock(),e.createElementBlock("div",{class:"month-range-picker",onClick:v[1]||(v[1]=e.withModifiers((()=>{}),["stop"]))},[e.createElementVNode("div",t,[e.withDirectives(e.createElementVNode("input",{type:"button","onUpdate:modelValue":v[0]||(v[0]=t=>e.isRef(h)?h.value=t:h=t),placeholder:d.placeholder,onClick:f,onBlur:M},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(p),(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(c)&&g(t.id)}]),onClick:e=>(e=>{u.value=!0,setTimeout((()=>u.value=!1),200),!i.startMonth||i.startMonth&&i.endMonth?(r("update:startMonth",e.id),r("update:endMonth",void 0)):i.endMonth||(e.id>=i.startMonth?r("update:endMonth",e.id):(r("update:startMonth",e.id),r("update:endMonth",i.startMonth)),y())})(t),onMouseover:e=>(e=>{c.value=!0,m.value=e})(t.id),onMouseleave:E},e.toDisplayString(t.name),43,a)))),128))])):e.createCommentVNode("",!0)]))}}),[["__scopeId","data-v-cad7382f"]])}));