vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
8 lines (7 loc) • 2.23 kB
JavaScript
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),y=require("@vuepic/vue-datepicker");;/* empty css */const w=require("../utils/index.cjs"),g=e.defineComponent({__name:"DatePicker",props:{width:{default:150},size:{default:"middle"},mode:{default:"date"},showTime:{type:Boolean,default:!1},showToday:{type:Boolean,default:!1},range:{type:Boolean,default:!1},maxRange:{default:void 0},modelType:{default:"format"}},setup(l){const a=l,{colorPalettes:o,shadowColor:u}=w.useInject("DatePicker"),i=e.computed(()=>typeof a.width=="number"?`${a.width}px`:a.width),s=e.computed(()=>a.mode==="time"),d=e.computed(()=>a.mode==="week"),c=e.computed(()=>a.mode==="month"),m=e.computed(()=>a.mode==="year"),r=e.ref(null),p=e.computed(()=>(a.maxRange??0)*24*60*60*1e3);e.watch(()=>a.maxRange,()=>{r.value=null});function f(){r.value=null}function k(t){r.value=t.getTime()}function h(t){const n=t.getTime();return!!(r.value&&Math.abs(n-r.value)>=p.value)}return(t,n)=>(e.openBlock(),e.createBlock(e.unref(y),{class:e.normalizeClass(["datepicker-wrap",{"datepicker-small":t.size==="small","datepicker-large":t.size==="large"}]),style:e.normalizeStyle(`
--datepicker-width: ${i.value};
--datepicker-primary-color: ${e.unref(o)[5]};
--datepicker-primary-color-hover: ${e.unref(o)[4]};
--datepicker-primary-color-focus: ${e.unref(o)[4]};
--datepicker-primary-shadow-color: ${e.unref(u)};
`),locale:"zh-CN",position:"left","month-change-on-scroll":!1,"enable-time-picker":t.showTime,"time-picker":s.value,"week-picker":d.value,"month-picker":c.value,"year-picker":m.value,range:t.range,"now-button-label":"今天","show-now-button":t.showToday,"auto-apply":"","text-input":"","model-type":t.modelType,"day-names":["一","二","三","四","五","六","七"],"disabled-dates":t.range&&t.maxRange?h:[],onRangeStart:k,onClosed:f},null,8,["class","style","enable-time-picker","time-picker","week-picker","month-picker","year-picker","range","show-now-button","model-type","disabled-dates"]))}});exports.default=g;