vue-devui 1.0.0-alpha.5 → 1.0.0-beta.11

package/date-picker/index.es.js

@@ -1 +1,1172 @@
-var e=Object.defineProperty,t=Object.getOwnPropertySymbols,n=Object.prototype.hasOwnProperty,a=Object.prototype.propertyIsEnumerable,r=(t,n,a)=>n in t?e(t,n,{enumerable:!0,configurable:!0,writable:!0,value:a}):t[n]=a;"undefined"!=typeof require&&require;import{defineComponent as o,computed as s,ref as l,watch as u,createVNode as i,withDirectives as d,mergeProps as c,resolveDirective as p,resolveComponent as g,createTextVNode as h,reactive as y,onMounted as m,onUnmounted as f}from"vue";const v=(e,t,n=2,a="0")=>(e+"").padStart(Math.min(t.length,n),a),w=(e,t)=>{const n=(e=>[e.getFullYear(),e.getMonth()+1,e.getDate(),e.getDay(),e.getHours(),e.getMinutes(),e.getSeconds(),e.getMilliseconds()])(t);let a=e;return a=a.replace(/y+/g,(e=>{const t=n[0]+"";return 2===e.length?t.substring(2):t})),a=a.replace(/M+/g,(e=>v(n[1],e))),a=a.replace(/d+/g,(e=>v(n[2],e))),a=a.replace(/h+/g,(e=>v(n[4],e))),a=a.replace(/m+/g,(e=>v(n[5],e))),a=a.replace(/s+/g,(e=>v(n[6],e))),a},x=(e,t)=>{if(!t)return!1;for(;e;){if(e===t)return!0;e=e.parentNode}return!1},M=(e,...t)=>{"function"==typeof e&&e(...t)},S=(e=new Date)=>{e instanceof Date||(e=new Date);const{year:t,month:n}=(e=>{const t=e.getFullYear(),n=e.getMonth()+1,a=e.getDate(),r=e.getDay(),o=e.getHours(),s=e.getMinutes(),l=e.getSeconds();return{year:t,y:t,month:n,M:n,date:a,d:a,day:r,hour:o,H:o,h:o,minute:s,m:s,second:l,s:l,ms:e.getMilliseconds()}})(e),a=((e,t)=>{const n=new Date(e,t-1,1),a=new Date(e,t,0),r=[];let o=n.getDay();for(;o>0;)o-=1,r.push({date:new Date(e,t-1,-o),current:-1});o=a.getDate()-n.getDate();for(let l=0;l<=o;l++){const e=new Date(n);e.setDate(l+1),r.push({date:e,current:0})}o=a.getDay();let s=a;for(let l=o;l<6;l++)s=new Date(e,t,l-o+1),r.push({date:s,current:1});if(r.length<42){o=s.getDate();for(let n=1;n<=7;n++)s=new Date(e,t,o+n),r.push({date:s,current:1})}return r})(t,n),r=[];for(;a.length>0;)r.push(a.splice(0,7));return r},b=["日","一","二","三","四","五","六"],D=(e,...t)=>{"function"==typeof e&&e(...t)},C=(e,t)=>(new Date(e.getFullYear(),e.getMonth(),e.getDate()).getTime()-new Date(t.getFullYear(),t.getMonth(),t.getDate()).getTime())/864e5,F=(e,t,n,a)=>{return!e||!t||("year"===n?t.getFullYear()-e.getFullYear()>a:(o=e,12*(r=t).getFullYear()+r.getMonth()-(12*o.getFullYear()+o.getMonth())>a));var r,o},I=e=>{if(!e||"string"!=typeof e)return null;const[t="",n=""]=e.split(/([ ]|T)+/);if(!t)return null;const[a,r,o]=t.split(/[^\d]+/),s=Y(a),l=Y(r),u=Y(o)||1;if(!s||!l)return null;const i=$(n);return new Date(s,l-1,u,...i)},Y=(e,t)=>{if(!e||"string"!=typeof e)return t;const n=parseInt(e);return isNaN(n)?t:n},$=e=>{const[t,n,a,r]=e.split(/[\:\.]+/);return[Y(t,0),Y(n,0),Y(a,0),Y(r,0)]},P=(e,t,n="d")=>{const a=k(e,n),r=k(t,n);return a<r?-1:a>r?1:0},k=(e,t)=>{switch(t){case"y":return e.getFullYear();case"m":return 12*e.getFullYear()+e.getMonth()}return e.getTime()/864e5>>0},T=(e,t,n)=>!(t instanceof Date&&P(t,e,"d")>0)&&!(n instanceof Date&&P(e,n,"d")>0);var N=o({name:"DInput",directives:{focus:{mounted:function(e,t){t.value&&e.focus()}}},props:{placeholder:{type:String,default:void 0},disabled:{type:Boolean,default:!1},autoFocus:{type:Boolean,default:!1},maxLength:{type:Number,default:Number.MAX_SAFE_INTEGER},cssClass:{type:String,default:""},error:{type:Boolean,default:!1},size:{type:String,default:""},showPassword:{type:Boolean,default:!1},value:{type:String,default:""},"onUpdate:value":{type:Function,default:void 0},onChange:{type:Function,default:void 0},onKeydown:{type:Function,default:void 0},onFocus:{type:Function,default:void 0},onBlur:{type:Function,default:void 0}},emits:["update:value","focus","blur","change","keydown"],setup(e,t){const n=s((()=>`devui-input-${e.size}`)),a=l(!1),r=l("text"),o=s((()=>({error:e.error,[e.cssClass]:!0,[n.value]:""!==e.size}))),i=s((()=>"password"===r.value));u((()=>e.showPassword),(e=>{r.value=e?"password":"text"}),{immediate:!0}),u((()=>e.value),(e=>{e&&e.length>0&&i.value?a.value=!0:a.value=!1}));return{inputCls:o,inputType:r,showPreviewIcon:i,showPwdIcon:a,onInput:e=>{t.emit("update:value",e.target.value)},onFocus:()=>{t.emit("focus")},onBlur:()=>{t.emit("blur")},onChange:e=>{t.emit("change",e.target.value)},onKeydown:e=>{t.emit("keydown",e)},onChangeInputType:()=>{r.value="password"===r.value?"text":"password"}}},render(){const{value:e,showPreviewIcon:t,showPwdIcon:n,inputCls:a,inputType:r,maxLength:o,autoFocus:s,placeholder:l,disabled:u,onInput:h,onFocus:y,onBlur:m,onChange:f,onKeydown:v,onChangeInputType:w}=this;return i("div",{class:"devui-input__wrap"},[d(i("input",c({dinput:!0},{value:e,disabled:u,type:r,maxlength:o,placeholder:l,class:a,onInput:h,onFocus:y,onBlur:m,onChange:f,onKeydown:v}),null),[[p("focus"),s]]),n&&i("div",{class:"devui-input__preview",onClick:w},[i(g("d-icon"),t?{name:"preview",size:"12px",key:1}:{name:"preview-forbidden",size:"12px",key:2},null)])])}});N.install=function(e){e.component(N.name,N)};var B=o({name:"DIcon",props:{name:{type:String,required:!0},size:{type:String,default:"inherit"},color:{type:String,default:"inherit"},classPrefix:{type:String,default:"icon"}},setup:e=>((e,o)=>{for(var s in o||(o={}))n.call(o,s)&&r(e,s,o[s]);if(t)for(var s of t(o))a.call(o,s)&&r(e,s,o[s]);return e})({},e),render(){const{name:e,size:t,color:n,classPrefix:a}=this;return i("i",{class:`${a} ${a}-${e}`,style:{fontSize:t,color:n}},null)}});B.install=function(e){e.component(B.name,B)};const E=(e,t,n,a)=>{switch(t){case 0:const t=new Date(a);t.setFullYear(t.getFullYear()-1),0===n?e.current=t:e.next=t;break;case 1:const r=new Date(a);r.setMonth(r.getMonth()-1),0===n?e.current=r:e.next=r;break;case 2:const o=new Date(a);o.setMonth(o.getMonth()+1),0===n?e.current=o:e.next=o;break;case 3:const s=new Date(a);s.setFullYear(s.getFullYear()+1),0===n?e.current=s:e.next=s}},z=(e,t)=>{const{format:n="y/MM/dd",range:a,rangeSpliter:r="-"}=t||{};if(a){if(!e.start)return"";if(!e.end)return w(n,e.start);if(e.end<e.start){const t=e.end;e.end=e.start,e.start=t}return((e,t,n,a="-")=>{const r=[t,n];return t.getTime()>n.getTime()&&r.reverse(),`${w(e,r[0])} ${a} ${w(e,r[1])}`})(n,e.start,e.end,r)}return e.start?w(n,e.start):""},L=e=>{if(!e)return"";const t=e.format||"y/MM/dd",n=e.rangeSpliter||"-";return e.range?`${t} ${n} ${t}`:t},O=e=>e.toDateString(),H=(e,t,n="cell")=>{if(!T(t.date,e.dateMin,e.dateMax))return`${n} disabled`;if(0!==t.current)return`${n} not-current`;const a=O(t.date);if("range"===e.type){if(e.dateStart){if(O(e.dateStart)===a)return`${n} selected`;if(e.dateEnd&&O(e.dateEnd)===a)return`${n} selected`;const r=e.dateEnd||e.dateHover;if(r){const a=r>e.dateStart?[e.dateStart,r]:[r,e.dateStart];if(t.date>a[0]&&t.date<a[1])return`${n} innerday`}}return n}return e.dateStart&&O(e.dateStart)===a?`${n} selected`:n},A=e=>{const{color:t="#585d6b",rotate:n=0}=e;return i("svg",{style:{transform:`rotate(${n}deg)`},width:"10px",height:"10px",viewBox:"0 0 10 10",version:"1.1",xmlns:"http://www.w3.org/2000/svg"},[i("g",{fill:t,transform:"translate(-1.000000, -1.000000)"},[i("path",{d:"M11,1.83333333 L11,10.1666667 L7,7.38833333 L7,10.1666667 L1,6 L7,1.83333333 L7,4.61033333 L11,1.83333333 Z"},null)])])},_=e=>{const{color:t="#585d6b",rotate:n=0}=e;return i("svg",{style:{transform:`rotate(${n}deg)`},width:"6px",height:"10px",viewBox:"0 0 6 10",version:"1.1",xmlns:"http://www.w3.org/2000/svg"},[i("g",{fill:t,transform:"translate(-3.000000, -1.000000)"},[i("polygon",{points:"6 3 10.1666667 9 1.83333333 9"},null)])])};const R=e=>{const{button:t,disabled:n=!1,rotate:a=0,date:r,pos:o,cb:s}=e;return i("a",{class:""+(n?"disabled":""),onClick:n?void 0:()=>D(e.cb,r,o)},[i(t,{color:n?"#cfd0d3":"#585d6b",rotate:a},null)])},j=e=>{const{date:t}=e;return i("a",{class:"title"},[`${t.getFullYear()}年${(t.getMonth()+1+"").padStart(2,"0")}月`])},K=e=>{const{type:t,current:n,compare:a,pos:r,dateMax:o,dateMin:s,onPreviousYear:l,onPreviousMonth:u,onNextMonth:d,onNextYear:c}=e,p=[!1,!1,!1,!1];return"range"===t?1===r?(p[0]=!F(a,n,"year",1),p[1]=!F(a,n,"month",1),p[2]=!F(n,o,"month",0),p[3]=!F(n,o,"year",0)):(p[0]=!F(s,n,"year",0),p[1]=!F(s,n,"month",0),p[2]=!F(n,a,"month",1),p[3]=!F(n,a,"year",1)):(p[0]=!F(s,n,"year",0),p[1]=!F(s,n,"month",0),p[2]=!F(n,o,"month",0),p[3]=!F(n,o,"year",0)),i("div",{class:"devui-calendar-toolbar"},[i(R,{disabled:p[0],date:n,pos:r,button:A,cb:l},null),i(R,{disabled:p[1],date:n,pos:r,button:_,rotate:-90,cb:u},null),i(j,{date:n},null),i(R,{disabled:p[2],date:n,pos:r,button:_,rotate:90,cb:d},null),i(R,{disabled:p[3],date:n,pos:r,button:A,rotate:180,cb:c},null)])},q=e=>{const{onSelected:t=(()=>0),disabled:n=!1}=e;return i("div",{class:"today-container "+(n?"disabled":"")},[i("button",{class:"today-button",disabled:n,onClick:n?void 0:()=>t(new Date)},[h("今天")])])};const X=e=>{const t=new Date;return i("div",{class:"devui-calendar-panel"},[i(K,{current:e.current,compare:e.compare,pos:e.pos,type:e.type,showTime:e.showTime,onPreviousYear:e.onPreviousYear,onPreviousMonth:e.onPreviousMonth,onNextMonth:e.onNextMonth,onNextYear:e.onNextYear,dateMax:e.dateMax,dateMin:e.dateMin},null),i("ol",{class:"head row"},[b.map((e=>i("li",{class:"cell"},[e])))]),i("ul",{class:"body"},[S(e.current).map((t=>i("li",{class:"row"},[t.map((t=>i("span",{class:H(e,t),onClick:()=>((e,t)=>{T(t.date,e.dateMin,e.dateMax)&&("range"===e.type?e.dateStart?e.dateEnd?D(e.onReset,t.date):0!==C(e.dateStart,t.date)&&(D(e.onSelectEnd,t.date),"function"==typeof e.onChange&&e.onChange(e.type,e)):D(e.onSelectStart,t.date):(D(e.onSelected,t.date),"function"==typeof e.onChange&&e.onChange(e.type,e)))})(e,t),onMouseenter:()=>((e,t)=>{if(0!==t.current)return;const{dateMin:n,dateMax:a}=e;if(!(n&&C(t.date,n)<0||a&&C(a,t.date)<0||"range"!==e.type)){const n=O(t.date);if(!e.dateStart||O(e.dateStart)===n||e.dateEnd)return;D(e.onSelecting,t.date)}})(e,t)},[t.date.getDate()])))])))]),"range"!==e.type?i(q,{disabled:!T(t,e.dateMin,e.dateMax),onSelected:t=>{"function"==typeof e.onToday&&e.onToday(t,0)}},null):null])};const G=o({props:{size:{type:Number,default:26},items:{type:Array},selectedIndex:{type:Number},className:{type:String},itemClassNormal:{type:String},itemClassSelected:{type:String},onChange:{type:Function}},setup(e){const{items:t=[0,1,2,3,4,5,6,7,8,9],selectedIndex:n=0,size:a=26,className:r="",itemClassNormal:o="",itemClassSelected:s="selected",onChange:u}=e||{};let d=0,c=0;const p=l(),g=l();let h=null,f=null;const v=y({selectedIndex:n,barOpacity:0,x:0,y:0,transition:"none"}),w=e=>{e.stopPropagation(),e.preventDefault(),h=[e.clientX,e.clientY],v.transition="none"},x=e=>{e.stopPropagation(),e.preventDefault(),h&&f&&(v.x=f[0]+e.clientX-h[0],v.y=Math.min(d,Math.max(c,f[1]+e.clientY-h[1])),v.selectedIndex=(d-v.y+a/2)/a>>0)},M=e=>{if(e.stopPropagation(),e.preventDefault(),h=null,v.y=d-v.selectedIndex*a,v.transition="transform 0.1s",f[0]=v.x,f[1]=v.y,"function"==typeof u){const e=v.selectedIndex,n=t[e];u(n,e)}};return m((()=>{const{height:e}=p.value.getBoundingClientRect(),{height:t}=g.value.getBoundingClientRect();d=(e-a)/2,c=(e+a)/2-t,f=[0,d-v.selectedIndex*a],v.x=f[0],v.y=f[1],v.barOpacity=1,v.transition="transform 0.1s"})),()=>i("div",{ref:p,class:`devui-vertical-slider ${r}`},[i("div",{ref:g,class:"movable-bar",style:{opacity:v.barOpacity,transform:`translateY(${v.y}px)`,transition:v.transition}},[t.map(((e,t)=>{const n=t===v.selectedIndex?s:o;return i("span",{class:`slider-item ${n}`,style:{height:`${a}px`,lineHeight:`${a}px`}},[e])}))]),i("div",{class:"slider-mask",onMousedown:w,onMousemove:x,onMouseup:M,onMouseout:M},null)])}});const U=o({props:{time:{type:Date}},setup(e){const{time:t=new Date}=e||{},n=y({hour:t.getHours(),minute:t.getMinutes(),second:t.getSeconds()}),a=Array(24).fill(0).map(((e,t)=>`${t}`.padStart(2,"0"))),r=Array(60).fill(0).map(((e,t)=>`${t}`.padStart(2,"0")));return()=>i("div",{class:"devui-calendar-timepicker"},[i("div",{class:"head"},[i("div",{class:"chars"},[i("span",null,[n.hour.toString().padStart(2,"0"),h(":"),n.minute.toString().padStart(2,"0"),h(":"),n.second.toString().padStart(2,"0")])])]),i("div",{class:"select"},[i(G,{items:a,selectedIndex:n.hour,onChange:(e,t)=>n.hour=t},null),i(G,{items:r,selectedIndex:n.minute,onChange:(e,t)=>n.minute=t},null),i(G,{items:r,selectedIndex:n.second,onChange:(e,t)=>n.second=t},null)])])}});const Z=e=>{const{showTime:t=!1}=e;let{current:n}=e;if(n instanceof Date||(n=new Date),"range"===e.type){let{next:a}=e;return a instanceof Date||(a=new Date(n.getFullYear(),n.getMonth()+1,1)),i("div",{class:"devui-calendar-container"},[i(X,c(e,{pos:0,current:n,compare:a}),null),t?i(U,{time:n},null):null,i(X,c(e,{pos:1,current:a,compare:n}),null),t?i(U,{time:a},null):null])}return i("div",{class:"devui-calendar-container"},[i(X,c(e,{pos:0,current:n}),null),t?i(U,{time:n},null):null])};var J=o({name:"DDatepicker",props:{selectedDateChange:{type:Function},autoClose:{type:Boolean,default:!1},range:{type:Boolean,default:!1},showTime:{type:Boolean,default:!1},format:{type:String,default:"y/MM/dd"},rangeSpliter:{type:String,default:"-"},attachInputDom:{type:String},dateMin:{type:String},dateMax:{type:String}},setup(e,t){const n=l(null),a=l(null),r=I(e.dateMin)||new Date,o=new Date(r.getFullYear(),r.getMonth()+1,1),s=y({show:!1,value:"",placeholder:L(e),current:r,next:o});s.value=z(s,e),s.placeholder=L(e);const u=e=>{e.stopPropagation(),x(e.target,n.value)||x(e.target,a.value)||(s.show=!1)};return m((()=>{document.addEventListener("click",u)})),f((()=>{document.removeEventListener("click",u)})),()=>i("div",{class:"devui-datepicker-container"},[i("div",{class:"input-container",ref:a},[i(N,{ref:a,class:"datepicker-input",value:s.value,placeholder:s.placeholder,onFocus:()=>s.show=!0},null),i(B,{size:"small",name:"calendar",class:"datepicker-input-icon"},null)]),i("div",{class:"devui-datepicker-panel",ref:n},[s.show?i(Z,{type:e.range?"range":"select",showTime:e.showTime,current:s.current,next:s.next,dateMin:I(e.dateMin),dateMax:I(e.dateMax),dateStart:s.start,dateEnd:s.end,dateHover:s.hover,onReset:e=>{s.end=s.hover=void 0,s.start=e},onChange:(t,n)=>{s.value=z(s,e),s.placeholder=L(e),M(e.selectedDateChange,s.value),e.autoClose&&(s.show=!1)},onToday:t=>{s.current=t,s.start=t,s.value=z(s,e),s.placeholder=L(e),M(e.selectedDateChange,s.value),e.autoClose&&(s.show=!1)},onSelected:e=>{s.start=e,0!==P(s.current,e)&&(s.current=e)},onSelectStart:e=>s.start=e,onSelectEnd:e=>{s.end=e,(e=>{const[t,n]=[e.start,e.end].sort(((e,t)=>e.getTime()-t.getTime()));e.start=t,e.end=n,0!==P(t,n,"m")?(e.current=t,e.next=n):(P(t,e.current)<0&&(e.current=t),P(e.next,n)<0&&(e.next=n))})(s)},onSelecting:e=>s.hover=e,onPreviousYear:(e,t)=>E(s,0,t,e),onPreviousMonth:(e,t)=>E(s,1,t,e),onNextMonth:(e,t)=>E(s,2,t,e),onNextYear:(e,t)=>E(s,3,t,e)},null):null])])}});const Q=o({name:"DStickSlider",props:{},setup(e){const t=y({showButtons:!1,selectedIndex:0}),n=e=>{e.stopPropagation(),t.showButtons=!0},a=e=>{e.stopPropagation(),t.showButtons=!1};return()=>i("div",{class:"devui-stick-slider",onMousedown:n,onMouseup:a,onMouseleave:a},[i("div",{class:"sub-buttons",style:{display:t.showButtons?"":"none"}},[Array(16).fill(null).map(((e,n)=>i("div",{class:"button "+(n===t.selectedIndex?"selected":""),onMouseenter:()=>t.selectedIndex=n},[n])))]),i("div",{class:"main-button"},null)])}});J.install=function(e){e.component(J.name,J),e.component(Q.name,Q)};var V={title:"DatePicker 日期选择器",category:"数据录入",install(e){e.use(J)}};export{J as DatePicker,Q as StickSlider,V as default};
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import { defineComponent, inject, computed, ref, watch, createVNode, withDirectives, mergeProps, resolveDirective, resolveComponent, createTextVNode, reactive, onMounted, onUnmounted } from "vue";
+const getDateTime = (d) => {
+  const year = d.getFullYear();
+  const month = d.getMonth() + 1;
+  const date = d.getDate();
+  const day = d.getDay();
+  const hour = d.getHours();
+  const minute = d.getMinutes();
+  const second = d.getSeconds();
+  const ms = d.getMilliseconds();
+  return [year, month, date, day, hour, minute, second, ms];
+};
+const fixStart = (n, m, max = 2, ch = "0") => {
+  return (n + "").padStart(Math.min(m.length, max), ch);
+};
+const formatDate = (fmt, d) => {
+  const usage = getDateTime(d);
+  let res = fmt;
+  res = res.replace(/y+/g, (m) => {
+    const year = usage[0] + "";
+    if (m.length === 2) {
+      return year.substring(2);
+    }
+    return year;
+  });
+  res = res.replace(/M+/g, (m) => fixStart(usage[1], m));
+  res = res.replace(/d+/g, (m) => fixStart(usage[2], m));
+  res = res.replace(/h+/g, (m) => fixStart(usage[4], m));
+  res = res.replace(/m+/g, (m) => fixStart(usage[5], m));
+  res = res.replace(/s+/g, (m) => fixStart(usage[6], m));
+  return res;
+};
+const formatRange$1 = (fmt, a, b, conn = "-") => {
+  const ab = [a, b];
+  if (a.getTime() > b.getTime()) {
+    ab.reverse();
+  }
+  return `${formatDate(fmt, ab[0])} ${conn} ${formatDate(fmt, ab[1])}`;
+};
+const isIn = (a, b) => {
+  if (!b) {
+    return false;
+  }
+  while (a) {
+    if (a === b) {
+      return true;
+    }
+    a = a.parentNode;
+  }
+  return false;
+};
+const invokeFunction = (fn, ...args) => {
+  if (typeof fn === "function") {
+    fn(...args);
+  }
+};
+const getHumanDate = (d) => {
+  const year = d.getFullYear();
+  const month = d.getMonth() + 1;
+  const date = d.getDate();
+  const day = d.getDay();
+  const hour = d.getHours();
+  const minute = d.getMinutes();
+  const second = d.getSeconds();
+  const ms = d.getMilliseconds();
+  return {
+    year,
+    y: year,
+    month,
+    M: month,
+    date,
+    d: date,
+    day,
+    hour,
+    H: hour,
+    h: hour,
+    minute,
+    m: minute,
+    second,
+    s: second,
+    ms
+  };
+};
+const getMonthDays = (year, month) => {
+  const first = new Date(year, month - 1, 1);
+  const last = new Date(year, month, 0);
+  const dates = [];
+  let day = first.getDay();
+  while (day > 0) {
+    day -= 1;
+    dates.push({ date: new Date(year, month - 1, -day), current: -1 });
+  }
+  day = last.getDate() - first.getDate();
+  for (let i = 0; i <= day; i++) {
+    const date = new Date(first);
+    date.setDate(i + 1);
+    dates.push({ date, current: 0 });
+  }
+  day = last.getDay();
+  let tail = last;
+  for (let i = day; i < 6; i++) {
+    tail = new Date(year, month, i - day + 1);
+    dates.push({ date: tail, current: 1 });
+  }
+  if (dates.length < 42) {
+    day = tail.getDate();
+    for (let i = 1; i <= 7; i++) {
+      tail = new Date(year, month, day + i);
+      dates.push({ date: tail, current: 1 });
+    }
+  }
+  return dates;
+};
+const getMonthWeeklyDays = (date = new Date()) => {
+  if (!(date instanceof Date)) {
+    date = new Date();
+  }
+  const { year, month } = getHumanDate(date);
+  const days = getMonthDays(year, month);
+  const dayRows = [];
+  while (days.length > 0) {
+    dayRows.push(days.splice(0, 7));
+  }
+  return dayRows;
+};
+const WEEK_DAYS = ["\u65E5", "\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D"];
+const invokeCallback = (cb, ...args) => {
+  typeof cb === "function" && cb(...args);
+};
+const subDateMonth = (a, b) => {
+  const am = a.getFullYear() * 12 + a.getMonth();
+  const bm = b.getFullYear() * 12 + b.getMonth();
+  return am - bm;
+};
+const ONE_DAY = 1e3 * 60 * 60 * 24;
+const subDateDay = (a, b) => {
+  const ad = new Date(a.getFullYear(), a.getMonth(), a.getDate()).getTime();
+  const bd = new Date(b.getFullYear(), b.getMonth(), b.getDate()).getTime();
+  return (ad - bd) / ONE_DAY;
+};
+const compareDate = (small, big, mode, min) => {
+  if (!small || !big) {
+    return true;
+  }
+  if (mode === "year") {
+    return big.getFullYear() - small.getFullYear() > min;
+  } else {
+    return subDateMonth(big, small) > min;
+  }
+};
+const parseDate = (str) => {
+  if (!str || typeof str !== "string") {
+    return null;
+  }
+  const [dateStr = "", timeStr = ""] = str.split(/([ ]|T)+/);
+  if (!dateStr) {
+    return null;
+  }
+  const [y, m, d] = dateStr.split(/[^\d]+/);
+  const year = _parseInt(y), month = _parseInt(m), date = _parseInt(d) || 1;
+  if (!year || !month) {
+    return null;
+  }
+  const time = parseTime(timeStr);
+  return new Date(year, month - 1, date, ...time);
+};
+const _parseInt = (str, dftVal) => {
+  if (!str || typeof str !== "string") {
+    return dftVal;
+  }
+  const n = parseInt(str);
+  if (isNaN(n)) {
+    return dftVal;
+  }
+  return n;
+};
+const parseTime = (str) => {
+  const [h, m, s, ms] = str.split(/[\:\.]+/);
+  return [_parseInt(h, 0), _parseInt(m, 0), _parseInt(s, 0), _parseInt(ms, 0)];
+};
+const compareDateSort = (d1, d2, type = "d") => {
+  const t1 = dateCounter(d1, type), t2 = dateCounter(d2, type);
+  return t1 < t2 ? -1 : t1 > t2 ? 1 : 0;
+};
+const dateCounter = (date, type) => {
+  switch (type) {
+    case "y":
+      return date.getFullYear();
+    case "m":
+      return date.getFullYear() * 12 + date.getMonth();
+  }
+  return date.getTime() / ONE_DAY >> 0;
+};
+const betweenDate = (date, left, right) => {
+  if (left instanceof Date && compareDateSort(left, date, "d") > 0) {
+    return false;
+  }
+  if (right instanceof Date && compareDateSort(date, right, "d") > 0) {
+    return false;
+  }
+  return true;
+};
+const inputProps = {
+  placeholder: {
+    type: String,
+    default: void 0
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  autoFocus: {
+    type: Boolean,
+    default: false
+  },
+  maxLength: {
+    type: Number,
+    default: Number.MAX_SAFE_INTEGER
+  },
+  cssClass: {
+    type: String,
+    default: ""
+  },
+  error: {
+    type: Boolean,
+    default: false
+  },
+  size: {
+    type: String,
+    default: ""
+  },
+  showPassword: {
+    type: Boolean,
+    default: false
+  },
+  modelValue: {
+    type: String,
+    default: ""
+  },
+  "update:modelValue": {
+    type: Function,
+    default: void 0
+  },
+  onChange: {
+    type: Function,
+    default: void 0
+  },
+  onKeydown: {
+    type: Function,
+    default: void 0
+  },
+  onFocus: {
+    type: Function,
+    default: void 0
+  },
+  onBlur: {
+    type: Function,
+    default: void 0
+  }
+};
+var input = "";
+const formItemInjectionKey = Symbol("dFormItem");
+const dFormItemEvents = {
+  blur: "d.form.blur",
+  change: "d.form.change",
+  input: "d.form.input"
+};
+var Input = defineComponent({
+  name: "DInput",
+  directives: {
+    focus: {
+      mounted: function(el, binding) {
+        if (binding.value) {
+          el.focus();
+        }
+      }
+    }
+  },
+  props: inputProps,
+  emits: ["update:modelValue", "focus", "blur", "change", "keydown"],
+  setup(props, ctx) {
+    const formItem = inject(formItemInjectionKey, {});
+    const hasFormItem = Object.keys(formItem).length > 0;
+    const sizeCls = computed(() => `devui-input-${props.size}`);
+    const showPwdIcon = ref(false);
+    const inputType = ref("text");
+    const inputCls = computed(() => {
+      return {
+        error: props.error,
+        [props.cssClass]: true,
+        [sizeCls.value]: props.size !== ""
+      };
+    });
+    const showPreviewIcon = computed(() => inputType.value === "password");
+    watch(() => props.showPassword, (flg) => {
+      inputType.value = flg ? "password" : "text";
+    }, {
+      immediate: true
+    });
+    watch(() => props.modelValue, (value) => {
+      value && value.length > 0 && showPreviewIcon.value ? showPwdIcon.value = true : showPwdIcon.value = false;
+    });
+    const onInput = ($event) => {
+      ctx.emit("update:modelValue", $event.target.value);
+      hasFormItem && formItem.formItemMitt.emit(dFormItemEvents.input);
+    }, onFocus = () => {
+      ctx.emit("focus");
+    }, onBlur = () => {
+      ctx.emit("blur");
+      hasFormItem && formItem.formItemMitt.emit(dFormItemEvents.blur);
+    }, onChange = ($event) => {
+      ctx.emit("change", $event.target.value);
+      hasFormItem && formItem.formItemMitt.emit(dFormItemEvents.change);
+    }, onKeydown = ($event) => {
+      ctx.emit("keydown", $event);
+    }, onChangeInputType = () => {
+      inputType.value = inputType.value === "password" ? "text" : "password";
+    };
+    return {
+      inputCls,
+      inputType,
+      showPreviewIcon,
+      showPwdIcon,
+      onInput,
+      onFocus,
+      onBlur,
+      onChange,
+      onKeydown,
+      onChangeInputType
+    };
+  },
+  render() {
+    const {
+      modelValue,
+      showPreviewIcon,
+      showPwdIcon,
+      inputCls,
+      inputType,
+      maxLength,
+      autoFocus,
+      placeholder,
+      disabled,
+      onInput,
+      onFocus,
+      onBlur,
+      onChange,
+      onKeydown,
+      onChangeInputType
+    } = this;
+    return createVNode("div", {
+      "class": "devui-input__wrap"
+    }, [withDirectives(createVNode("input", mergeProps({
+      dinput: true
+    }, {
+      "value": modelValue,
+      "disabled": disabled,
+      "type": inputType,
+      "maxlength": maxLength,
+      "placeholder": placeholder,
+      "class": inputCls,
+      "onInput": onInput,
+      "onFocus": onFocus,
+      "onBlur": onBlur,
+      "onChange": onChange,
+      "onKeydown": onKeydown
+    }), null), [[resolveDirective("focus"), autoFocus]]), showPwdIcon && createVNode("div", {
+      "class": "devui-input__preview",
+      "onClick": onChangeInputType
+    }, [showPreviewIcon ? createVNode(resolveComponent("d-icon"), {
+      "name": "preview",
+      "size": "12px",
+      "key": 1
+    }, null) : createVNode(resolveComponent("d-icon"), {
+      "name": "preview-forbidden",
+      "size": "12px",
+      "key": 2
+    }, null)])]);
+  }
+});
+Input.install = function(app) {
+  app.component(Input.name, Input);
+};
+var Icon = defineComponent({
+  name: "DIcon",
+  props: {
+    name: {
+      type: String,
+      required: true
+    },
+    size: {
+      type: String,
+      default: "inherit"
+    },
+    color: {
+      type: String,
+      default: "inherit"
+    },
+    classPrefix: {
+      type: String,
+      default: "icon"
+    }
+  },
+  setup(props) {
+    return __spreadValues({}, props);
+  },
+  render() {
+    const {
+      name,
+      size,
+      color,
+      classPrefix
+    } = this;
+    return /^((https?):)?\/\//.test(name) ? createVNode("img", {
+      "src": name,
+      "alt": name.split("/")[name.split("/").length - 1],
+      "style": {
+        width: size,
+        verticalAlign: "text-bottom"
+      }
+    }, null) : createVNode("i", {
+      "class": `${classPrefix} ${classPrefix}-${name}`,
+      "style": {
+        fontSize: size,
+        color
+      }
+    }, null);
+  }
+});
+Icon.install = function(app) {
+  app.component(Icon.name, Icon);
+};
+const handleCalendarSwitchState = (state, index2, pos, date) => {
+  switch (index2) {
+    case 0:
+      const preYear = new Date(date);
+      preYear.setFullYear(preYear.getFullYear() - 1);
+      pos === 0 ? state.current = preYear : state.next = preYear;
+      break;
+    case 1:
+      const preMonth = new Date(date);
+      preMonth.setMonth(preMonth.getMonth() - 1);
+      pos === 0 ? state.current = preMonth : state.next = preMonth;
+      break;
+    case 2:
+      const nextMonth = new Date(date);
+      nextMonth.setMonth(nextMonth.getMonth() + 1);
+      pos === 0 ? state.current = nextMonth : state.next = nextMonth;
+      break;
+    case 3:
+      const nextYear = new Date(date);
+      nextYear.setFullYear(nextYear.getFullYear() + 1);
+      pos === 0 ? state.current = nextYear : state.next = nextYear;
+      break;
+  }
+};
+const formatValue = (state, props) => {
+  const { format = "y/MM/dd", range, rangeSpliter = "-" } = props || {};
+  if (range) {
+    if (!state.start) {
+      return "";
+    } else if (!state.end) {
+      return formatDate(format, state.start);
+    }
+    if (state.end < state.start) {
+      const end = state.end;
+      state.end = state.start;
+      state.start = end;
+    }
+    return formatRange$1(format, state.start, state.end, rangeSpliter);
+  } else {
+    if (!state.start) {
+      return "";
+    }
+    return formatDate(format, state.start);
+  }
+};
+const formatPlaceholder = (props) => {
+  if (!props)
+    return "";
+  const format = props.format || `y/MM/dd`;
+  const sp = props.rangeSpliter || "-";
+  return props.range ? `${format} ${sp} ${format}` : format;
+};
+const getDateKey = (date) => {
+  return date.toDateString();
+};
+const cellClassName = (props, day, base = "cell") => {
+  if (!betweenDate(day.date, props.dateMin, props.dateMax)) {
+    return `${base} disabled`;
+  } else if (day.current !== 0) {
+    return `${base} not-current`;
+  }
+  const key = getDateKey(day.date);
+  if (props.type === "range") {
+    if (props.dateStart) {
+      if (getDateKey(props.dateStart) === key) {
+        return `${base} selected`;
+      }
+      if (props.dateEnd && getDateKey(props.dateEnd) === key) {
+        return `${base} selected`;
+      }
+      const innerEnd = props.dateEnd || props.dateHover;
+      if (innerEnd) {
+        const range = innerEnd > props.dateStart ? [props.dateStart, innerEnd] : [innerEnd, props.dateStart];
+        if (day.date > range[0] && day.date < range[1]) {
+          return `${base} innerday`;
+        }
+      }
+    }
+    return base;
+  } else {
+    return props.dateStart && getDateKey(props.dateStart) === key ? `${base} selected` : base;
+  }
+};
+const trigEvent = (props, day) => {
+  if (!betweenDate(day.date, props.dateMin, props.dateMax)) {
+    return;
+  }
+  if (props.type === "range") {
+    if (!props.dateStart) {
+      invokeCallback(props.onSelectStart, day.date);
+    } else if (!props.dateEnd) {
+      if (subDateDay(props.dateStart, day.date) !== 0) {
+        invokeCallback(props.onSelectEnd, day.date);
+        typeof props.onChange === "function" && props.onChange(props.type, props);
+      }
+    } else {
+      invokeCallback(props.onReset, day.date);
+    }
+  } else {
+    invokeCallback(props.onSelected, day.date);
+    typeof props.onChange === "function" && props.onChange(props.type, props);
+  }
+};
+const handleDateEnter = (props, day) => {
+  if (day.current !== 0) {
+    return;
+  }
+  const { dateMin, dateMax } = props;
+  if (dateMin && subDateDay(day.date, dateMin) < 0) {
+    return;
+  }
+  if (dateMax && subDateDay(dateMax, day.date) < 0) {
+    return;
+  }
+  if (props.type === "range") {
+    const key = getDateKey(day.date);
+    if (!props.dateStart || getDateKey(props.dateStart) === key || props.dateEnd) {
+      return;
+    }
+    invokeCallback(props.onSelecting, day.date);
+  }
+};
+const Year = (props) => {
+  const {
+    color = "#585d6b",
+    rotate = 0
+  } = props;
+  return createVNode("svg", {
+    "style": {
+      transform: `rotate(${rotate}deg)`
+    },
+    "width": "10px",
+    "height": "10px",
+    "viewBox": "0 0 10 10",
+    "version": "1.1",
+    "xmlns": "http://www.w3.org/2000/svg"
+  }, [createVNode("g", {
+    "fill": color,
+    "transform": "translate(-1.000000, -1.000000)"
+  }, [createVNode("path", {
+    "d": "M11,1.83333333 L11,10.1666667 L7,7.38833333 L7,10.1666667 L1,6 L7,1.83333333 L7,4.61033333 L11,1.83333333 Z"
+  }, null)])]);
+};
+const Month = (props) => {
+  const {
+    color = "#585d6b",
+    rotate = 0
+  } = props;
+  return createVNode("svg", {
+    "style": {
+      transform: `rotate(${rotate}deg)`
+    },
+    "width": "6px",
+    "height": "10px",
+    "viewBox": "0 0 6 10",
+    "version": "1.1",
+    "xmlns": "http://www.w3.org/2000/svg"
+  }, [createVNode("g", {
+    "fill": color,
+    "transform": "translate(-3.000000, -1.000000)"
+  }, [createVNode("polygon", {
+    "points": "6 3 10.1666667 9 1.83333333 9"
+  }, null)])]);
+};
+var index$6 = "";
+const Item = (props) => {
+  const {
+    button: Btn,
+    disabled = false,
+    rotate = 0,
+    date,
+    pos
+  } = props;
+  const color = disabled ? "#cfd0d3" : "#585d6b";
+  const className = `${disabled ? "disabled" : ""}`;
+  const handleClick = disabled ? void 0 : () => invokeCallback(props.cb, date, pos);
+  return createVNode("a", {
+    "class": className,
+    "onClick": handleClick
+  }, [createVNode(Btn, {
+    "color": color,
+    "rotate": rotate
+  }, null)]);
+};
+const Title = (props) => {
+  const {
+    date
+  } = props;
+  return createVNode("a", {
+    "class": "title"
+  }, [`${date.getFullYear()}\u5E74${(date.getMonth() + 1 + "").padStart(2, "0")}\u6708`]);
+};
+const CalendarToolbar = (props) => {
+  const {
+    type,
+    current,
+    compare,
+    pos,
+    dateMax,
+    dateMin,
+    onPreviousYear,
+    onPreviousMonth,
+    onNextMonth,
+    onNextYear
+  } = props;
+  const dis = [false, false, false, false];
+  if (type === "range") {
+    if (pos === 1) {
+      dis[0] = !compareDate(compare, current, "year", 1);
+      dis[1] = !compareDate(compare, current, "month", 1);
+      dis[2] = !compareDate(current, dateMax, "month", 0);
+      dis[3] = !compareDate(current, dateMax, "year", 0);
+    } else {
+      dis[0] = !compareDate(dateMin, current, "year", 0);
+      dis[1] = !compareDate(dateMin, current, "month", 0);
+      dis[2] = !compareDate(current, compare, "month", 1);
+      dis[3] = !compareDate(current, compare, "year", 1);
+    }
+  } else {
+    dis[0] = !compareDate(dateMin, current, "year", 0);
+    dis[1] = !compareDate(dateMin, current, "month", 0);
+    dis[2] = !compareDate(current, dateMax, "month", 0);
+    dis[3] = !compareDate(current, dateMax, "year", 0);
+  }
+  return createVNode("div", {
+    "class": "devui-calendar-toolbar"
+  }, [createVNode(Item, {
+    "disabled": dis[0],
+    "date": current,
+    "pos": pos,
+    "button": Year,
+    "cb": onPreviousYear
+  }, null), createVNode(Item, {
+    "disabled": dis[1],
+    "date": current,
+    "pos": pos,
+    "button": Month,
+    "rotate": -90,
+    "cb": onPreviousMonth
+  }, null), createVNode(Title, {
+    "date": current
+  }, null), createVNode(Item, {
+    "disabled": dis[2],
+    "date": current,
+    "pos": pos,
+    "button": Month,
+    "rotate": 90,
+    "cb": onNextMonth
+  }, null), createVNode(Item, {
+    "disabled": dis[3],
+    "date": current,
+    "pos": pos,
+    "button": Year,
+    "rotate": 180,
+    "cb": onNextYear
+  }, null)]);
+};
+const TodayDefault = (props) => {
+  const {
+    onSelected = () => 0,
+    disabled = false
+  } = props;
+  return createVNode("div", {
+    "class": `today-container ${disabled ? "disabled" : ""}`
+  }, [createVNode("button", {
+    "class": "today-button",
+    "disabled": disabled,
+    "onClick": disabled ? void 0 : () => onSelected(new Date())
+  }, [createTextVNode("\u4ECA\u5929")])]);
+};
+var index$5 = "";
+const CalendarDatePanel = (props) => {
+  const today = new Date();
+  return createVNode("div", {
+    "class": "devui-calendar-panel"
+  }, [createVNode(CalendarToolbar, {
+    "current": props.current,
+    "compare": props.compare,
+    "pos": props.pos,
+    "type": props.type,
+    "showTime": props.showTime,
+    "onPreviousYear": props.onPreviousYear,
+    "onPreviousMonth": props.onPreviousMonth,
+    "onNextMonth": props.onNextMonth,
+    "onNextYear": props.onNextYear,
+    "dateMax": props.dateMax,
+    "dateMin": props.dateMin
+  }, null), createVNode("ol", {
+    "class": "head row"
+  }, [WEEK_DAYS.map((day) => createVNode("li", {
+    "class": "cell"
+  }, [day]))]), createVNode("ul", {
+    "class": "body"
+  }, [getMonthWeeklyDays(props.current).map((row) => createVNode("li", {
+    "class": "row"
+  }, [row.map((day) => {
+    return createVNode("span", {
+      "class": cellClassName(props, day),
+      "onClick": () => trigEvent(props, day),
+      "onMouseenter": () => handleDateEnter(props, day)
+    }, [day.date.getDate()]);
+  })]))]), props.type !== "range" ? createVNode(TodayDefault, {
+    "disabled": !betweenDate(today, props.dateMin, props.dateMax),
+    "onSelected": (today2) => {
+      typeof props.onToday === "function" && props.onToday(today2, 0);
+    }
+  }, null) : null]);
+};
+var index$4 = "";
+const VerticalSlider = defineComponent({
+  props: {
+    size: {
+      type: Number,
+      default: 26
+    },
+    items: {
+      type: Array
+    },
+    selectedIndex: {
+      type: Number
+    },
+    className: {
+      type: String
+    },
+    itemClassNormal: {
+      type: String
+    },
+    itemClassSelected: {
+      type: String
+    },
+    onChange: {
+      type: Function
+    }
+  },
+  setup(props) {
+    const {
+      items = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
+      selectedIndex = 0,
+      size = 26,
+      className = "",
+      itemClassNormal = "",
+      itemClassSelected = "selected",
+      onChange
+    } = props || {};
+    let max_y = 0, min_y = 0;
+    const container = ref();
+    const movbar = ref();
+    let pos_start = null;
+    let pos_cache = null;
+    const state = reactive({
+      selectedIndex,
+      barOpacity: 0,
+      x: 0,
+      y: 0,
+      transition: "none"
+    });
+    const handleMouseDown = (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      pos_start = [e.clientX, e.clientY];
+      state.transition = "none";
+    };
+    const handleMouseMove = (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      if (!pos_start || !pos_cache) {
+        return;
+      }
+      state.x = pos_cache[0] + e.clientX - pos_start[0];
+      state.y = Math.min(max_y, Math.max(min_y, pos_cache[1] + e.clientY - pos_start[1]));
+      state.selectedIndex = (max_y - state.y + size / 2) / size >> 0;
+    };
+    const handleMouseUp = (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      pos_start = null;
+      state.y = max_y - state.selectedIndex * size;
+      state.transition = "transform 0.1s";
+      pos_cache[0] = state.x;
+      pos_cache[1] = state.y;
+      if (typeof onChange === "function") {
+        const idx = state.selectedIndex;
+        const val = items[idx];
+        onChange(val, idx);
+      }
+    };
+    onMounted(() => {
+      const {
+        height: ch
+      } = container.value.getBoundingClientRect();
+      const {
+        height: mh
+      } = movbar.value.getBoundingClientRect();
+      max_y = (ch - size) / 2;
+      min_y = (ch + size) / 2 - mh;
+      pos_cache = [0, max_y - state.selectedIndex * size];
+      state.x = pos_cache[0];
+      state.y = pos_cache[1];
+      state.barOpacity = 1;
+      state.transition = "transform 0.1s";
+    });
+    return () => {
+      return createVNode("div", {
+        "ref": container,
+        "class": `devui-vertical-slider ${className}`
+      }, [createVNode("div", {
+        "ref": movbar,
+        "class": "movable-bar",
+        "style": {
+          opacity: state.barOpacity,
+          transform: `translateY(${state.y}px)`,
+          transition: state.transition
+        }
+      }, [items.map((c, i) => {
+        const className2 = i === state.selectedIndex ? itemClassSelected : itemClassNormal;
+        return createVNode("span", {
+          "class": `slider-item ${className2}`,
+          "style": {
+            height: `${size}px`,
+            lineHeight: `${size}px`
+          }
+        }, [c]);
+      })]), createVNode("div", {
+        "class": "slider-mask",
+        "onMousedown": handleMouseDown,
+        "onMousemove": handleMouseMove,
+        "onMouseup": handleMouseUp,
+        "onMouseout": handleMouseUp
+      }, null)]);
+    };
+  }
+});
+var index$3 = "";
+const TimePicker = defineComponent({
+  props: {
+    time: {
+      type: Date
+    }
+  },
+  setup(props) {
+    const {
+      time = new Date()
+    } = props || {};
+    const state = reactive({
+      hour: time.getHours(),
+      minute: time.getMinutes(),
+      second: time.getSeconds()
+    });
+    const hours = Array(24).fill(0).map((_, i) => `${i}`.padStart(2, "0"));
+    const minutes = Array(60).fill(0).map((_, i) => `${i}`.padStart(2, "0"));
+    return () => {
+      return createVNode("div", {
+        "class": "devui-calendar-timepicker"
+      }, [createVNode("div", {
+        "class": "head"
+      }, [createVNode("div", {
+        "class": "chars"
+      }, [createVNode("span", null, [state.hour.toString().padStart(2, "0"), createTextVNode(":"), state.minute.toString().padStart(2, "0"), createTextVNode(":"), state.second.toString().padStart(2, "0")])])]), createVNode("div", {
+        "class": "select"
+      }, [createVNode(VerticalSlider, {
+        "items": hours,
+        "selectedIndex": state.hour,
+        "onChange": (_, idx) => state.hour = idx
+      }, null), createVNode(VerticalSlider, {
+        "items": minutes,
+        "selectedIndex": state.minute,
+        "onChange": (_, idx) => state.minute = idx
+      }, null), createVNode(VerticalSlider, {
+        "items": minutes,
+        "selectedIndex": state.second,
+        "onChange": (_, idx) => state.second = idx
+      }, null)])]);
+    };
+  }
+});
+var index$2 = "";
+const Calendar = (props) => {
+  const {
+    showTime = false
+  } = props;
+  let {
+    current
+  } = props;
+  if (!(current instanceof Date)) {
+    current = new Date();
+  }
+  if (props.type === "range") {
+    let {
+      next
+    } = props;
+    if (!(next instanceof Date)) {
+      next = new Date(current.getFullYear(), current.getMonth() + 1, 1);
+    }
+    return createVNode("div", {
+      "class": "devui-calendar-container"
+    }, [createVNode(CalendarDatePanel, mergeProps(props, {
+      "pos": 0,
+      "current": current,
+      "compare": next
+    }), null), showTime ? createVNode(TimePicker, {
+      "time": current
+    }, null) : null, createVNode(CalendarDatePanel, mergeProps(props, {
+      "pos": 1,
+      "current": next,
+      "compare": current
+    }), null), showTime ? createVNode(TimePicker, {
+      "time": next
+    }, null) : null]);
+  } else {
+    return createVNode("div", {
+      "class": "devui-calendar-container"
+    }, [createVNode(CalendarDatePanel, mergeProps(props, {
+      "pos": 0,
+      "current": current
+    }), null), showTime ? createVNode(TimePicker, {
+      "time": current
+    }, null) : null]);
+  }
+};
+var datePicker = "";
+const formatRange = (state) => {
+  const [start, end] = [state.start, state.end].sort((a, b) => a.getTime() - b.getTime());
+  state.start = start;
+  state.end = end;
+  if (compareDateSort(start, end, "m") !== 0) {
+    state.current = start;
+    state.next = end;
+  } else {
+    if (compareDateSort(start, state.current) < 0) {
+      state.current = start;
+    }
+    if (compareDateSort(state.next, end) < 0) {
+      state.next = end;
+    }
+  }
+};
+var DatePicker = defineComponent({
+  name: "DDatepicker",
+  props: {
+    selectedDateChange: {
+      type: Function
+    },
+    autoClose: {
+      type: Boolean,
+      default: false
+    },
+    range: {
+      type: Boolean,
+      default: false
+    },
+    showTime: {
+      type: Boolean,
+      default: false
+    },
+    format: {
+      type: String,
+      default: "y/MM/dd"
+    },
+    rangeSpliter: {
+      type: String,
+      default: "-"
+    },
+    attachInputDom: {
+      type: String
+    },
+    dateMin: {
+      type: String
+    },
+    dateMax: {
+      type: String
+    }
+  },
+  setup(props) {
+    const panel = ref(null);
+    const input2 = ref(null);
+    const current = parseDate(props.dateMin) || new Date();
+    const next = new Date(current.getFullYear(), current.getMonth() + 1, 1);
+    const state = reactive({
+      show: false,
+      value: "",
+      placeholder: formatPlaceholder(props),
+      current,
+      next
+    });
+    state.value = formatValue(state, props);
+    state.placeholder = formatPlaceholder(props);
+    const documentClick = (e) => {
+      e.stopPropagation();
+      if (isIn(e.target, panel.value) || isIn(e.target, input2.value)) {
+        return;
+      }
+      state.show = false;
+    };
+    onMounted(() => {
+      document.addEventListener("click", documentClick);
+    });
+    onUnmounted(() => {
+      document.removeEventListener("click", documentClick);
+    });
+    return () => {
+      return createVNode("div", {
+        "class": "devui-datepicker-container"
+      }, [createVNode("div", {
+        "class": "input-container",
+        "ref": input2
+      }, [createVNode(Input, {
+        "ref": input2,
+        "class": "datepicker-input",
+        "modelValue": state.value,
+        "placeholder": state.placeholder,
+        "onFocus": () => state.show = true
+      }, null), createVNode(Icon, {
+        "size": "small",
+        "name": "calendar",
+        "class": "datepicker-input-icon"
+      }, null)]), createVNode("div", {
+        "class": "devui-datepicker-panel",
+        "ref": panel
+      }, [state.show ? createVNode(Calendar, {
+        "type": props.range ? "range" : "select",
+        "showTime": props.showTime,
+        "current": state.current,
+        "next": state.next,
+        "dateMin": parseDate(props.dateMin),
+        "dateMax": parseDate(props.dateMax),
+        "dateStart": state.start,
+        "dateEnd": state.end,
+        "dateHover": state.hover,
+        "onReset": (date) => {
+          state.end = state.hover = void 0;
+          state.start = date;
+        },
+        "onChange": () => {
+          state.value = formatValue(state, props);
+          state.placeholder = formatPlaceholder(props);
+          invokeFunction(props.selectedDateChange, state.value);
+          if (props.autoClose) {
+            state.show = false;
+          }
+        },
+        "onToday": (date) => {
+          state.current = date;
+          state.start = date;
+          state.value = formatValue(state, props);
+          state.placeholder = formatPlaceholder(props);
+          invokeFunction(props.selectedDateChange, state.value);
+          if (props.autoClose) {
+            state.show = false;
+          }
+        },
+        "onSelected": (date) => {
+          state.start = date;
+          if (compareDateSort(state.current, date) !== 0) {
+            state.current = date;
+          }
+        },
+        "onSelectStart": (date) => state.start = date,
+        "onSelectEnd": (date) => {
+          state.end = date;
+          formatRange(state);
+        },
+        "onSelecting": (date) => state.hover = date,
+        "onPreviousYear": (date, pos) => handleCalendarSwitchState(state, 0, pos, date),
+        "onPreviousMonth": (date, pos) => handleCalendarSwitchState(state, 1, pos, date),
+        "onNextMonth": (date, pos) => handleCalendarSwitchState(state, 2, pos, date),
+        "onNextYear": (date, pos) => handleCalendarSwitchState(state, 3, pos, date)
+      }, null) : null])]);
+    };
+  }
+});
+var index$1 = "";
+const StickSlider = defineComponent({
+  name: "DStickSlider",
+  props: {},
+  setup() {
+    const state = reactive({
+      showButtons: false,
+      selectedIndex: 0
+    });
+    const reset = () => {
+      state.showButtons = false;
+    };
+    const handleMainButtonMouseDown = (e) => {
+      e.stopPropagation();
+      state.showButtons = true;
+    };
+    const handleMainButtonMouseUp = (e) => {
+      e.stopPropagation();
+      reset();
+    };
+    return () => {
+      return createVNode("div", {
+        "class": "devui-stick-slider",
+        "onMousedown": handleMainButtonMouseDown,
+        "onMouseup": handleMainButtonMouseUp,
+        "onMouseleave": handleMainButtonMouseUp
+      }, [createVNode("div", {
+        "class": "sub-buttons",
+        "style": {
+          display: state.showButtons ? "" : "none"
+        }
+      }, [Array(16).fill(null).map((_, i) => {
+        return createVNode("div", {
+          "class": `button ${i === state.selectedIndex ? "selected" : ""}`,
+          "onMouseenter": () => state.selectedIndex = i
+        }, [i]);
+      })]), createVNode("div", {
+        "class": "main-button"
+      }, null)]);
+    };
+  }
+});
+DatePicker.install = function(app) {
+  app.component(DatePicker.name, DatePicker);
+  app.component(StickSlider.name, StickSlider);
+};
+var index = {
+  title: "DatePicker \u65E5\u671F\u9009\u62E9\u5668",
+  category: "\u6570\u636E\u5F55\u5165",
+  status: "50%",
+  install(app) {
+    app.use(DatePicker);
+  }
+};
+export { DatePicker, StickSlider, index as default };