vue-devui 1.0.0-alpha.4 → 1.0.0-beta.10

package/time-picker/index.es.js

@@ -1 +1,1053 @@
-var e=Object.defineProperty,t=Object.getOwnPropertySymbols,l=Object.prototype.hasOwnProperty,a=Object.prototype.propertyIsEnumerable,i=(t,l,a)=>l in t?e(t,l,{enumerable:!0,configurable:!0,writable:!0,value:a}):t[l]=a;"undefined"!=typeof require&&require;import{defineComponent as u,createVNode as o,reactive as n,ref as s,createTextVNode as r,computed as p,mergeProps as m,onMounted as v,watch as c,Fragment as d,onUnmounted as f}from"vue";const h={modelValue:{type:String,default:""},placeholder:{type:String,default:"00:00:00"},disabled:{type:Boolean,default:!1},timePickerWidth:{type:Number,default:210},minTime:{type:String,default:"00:00:00"},maxTime:{type:String,default:"23:59:59"},format:{type:String,default:"hh:mm:ss"},autoOpen:{type:Boolean,default:!1}};var T=u({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,u)=>{for(var o in u||(u={}))l.call(u,o)&&i(e,o,u[o]);if(t)for(var o of t(u))a.call(u,o)&&i(e,o,u[o]);return e})({},e),render(){const{name:e,size:t,color:l,classPrefix:a}=this;return o("i",{class:`${a} ${a}-${e}`,style:{fontSize:t,color:l}},null)}});function y(e){const t=n([]);let l=0;l="hour"==e?24:60;for(let a=0;a<l;a++)t.push({time:a<10?"0"+a:a+"",isActive:!1,flag:e,isDisabled:!1});return t}T.install=function(e){e.component(T.name,T)};function g(e,t,l,a,i,u,o,n){const r=s(!1),p=s(!1),m=s(),v=s(),c=s(-100),d=s(-100),f=s(),h=s(""),T=s(!1),y=s(`${e.value}:${t.value}:${l.value}`),g=s(n),b=()=>{"hh:mm:ss"==i?g.value=`${e.value}:${t.value}:${l.value}`:"mm:hh:ss"==i?g.value=`${t.value}:${e.value}:${l.value}`:"hh:mm"==i?g.value=`${e.value}:${t.value}`:"mm:ss"==i&&(g.value=`${t.value}:${l.value}`)};return{isActive:r,showPopup:p,devuiTimePicker:m,timePickerValue:h,inputDom:v,timePopupDom:f,left:c,top:d,showClearIcon:T,firsthandActiveTime:y,vModeValue:g,getPopupPosition:()=>{!function(e,t,l){const a=e.getBoundingClientRect();window.innerHeight-(a.top+20)>a.top+20?(t.value=a.x,l.value=a.top+20+10):(t.value=a.x,l.value=a.top-316)}(m.value,c,d)},setInputValue:b,getTimeValue:a=>{a.stopPropagation(),p.value&&(e.value=f.value.changTimeData().activeHour.value,t.value=f.value.changTimeData().activeMinute.value,l.value=f.value.changTimeData().activeSecond.value,y.value=`${e.value}:${t.value}:${l.value}`,b())},clickVerifyFun:e=>{if(e.stopPropagation(),r.value=!1,p.value=!1,o)return;(e.composedPath&&e.composedPath()||e.path).map((e=>{e==m.value&&("00:00:00"==y.value&&(""==g.value&&(g.value="00:00:00"),g.value>a?y.value=g.value:y.value=a),b(),r.value=!0,p.value=!0)}))},isOutOpen:()=>{if(u){const a=g.value.split(":");e.value=a[0],t.value=a[1],l.value=a[2],y.value=g.value,b(),r.value=!0,p.value=u}},clearAll:i=>{if(i.stopPropagation(),p.value=!1,"00:00:00"!=a){const i=a.split(":");e.value=i[0],t.value=i[1],l.value=i[2]}else e.value="00",t.value="00",l.value="00";y.value=`${e.value}:${t.value}:${l.value}`,b()},chooseTime:a=>{if(a.type)"hh"==a.type.toLowerCase()?e.value=a.time:"mm"==a.type.toLowerCase()?t.value=a.time:"ss"==a.type.toLowerCase()&&(l.value=a.time),y.value=`${e.value}:${t.value}:${l.value}`,b();else{const i=a.time.split(":");e.value=i[0],t.value=i[1],l.value=i[2],y.value=`${e.value}:${t.value}:${l.value}`,b()}}}}var b=u({name:"TTimeList",props:{hourList:{type:Array,default:()=>[]},minuteList:{type:Array,default:()=>[]},secondList:{type:Array,default:()=>[]},format:{type:String,default:"hh:mm:ss"},minTime:{type:String,default:"00:00:00"},maxTime:{type:String,default:"23:59:59"}},setup(e,t){const l=s(),{getNewTime:a,activeTimeFun:i,resetTimeValue:u}=((e,t,l,a,i,u,o)=>{const n=s("00:00:00"),r=s("00"),p=s("00"),m=s("00"),v=(o,v)=>{let d=[],h=s("");if("hour"==o.flag?(d=e,h=r,c(o)):"minute"==o.flag?(d=t,h=p,c(o)):"second"==o.flag&&(d=l,h=m),d.map(((e,t)=>{e.isActive=!1})),d[v].isActive=!0,h.value=d[v].time,n.value=`${r.value}:${p.value}:${m.value}`,n.value<a)n.value=a,f(a);else if("mm:ss"==u&&`${p.value}:${m.value}`>i.slice(3)){const e=a.slice(0,3)+i.slice(3);f(e)}else n.value>i&&(n.value=i,f(i))},c=e=>{let o="00",n="00";const s=a.split(":")[0],m=a.split(":")[1],v=a.split(":")[2],c=i.split(":")[0],f=i.split(":")[1],h=i.split(":")[2];"hour"==e.flag&&(e.time==s?(o=m,d(t,o,n),p.value<m&&d(l,v,n)):e.time==c?(n=f,d(t,o,n),d(l,o,h)):(d(t,o,n),d(l,o,n))),"minute"==e.flag&&"mm:ss"==u?e.time==m?(o=v,d(l,o,n)):e.time==f?(n=h,d(l,o,n)):d(l,o,n):"minute"==e.flag&&(r.value==s&&e.time==m?(o=v,d(l,o,n)):r.value==c&&e.time==f?(n=h,d(l,o,n)):d(l,o,n))},d=(e,t,l)=>{e.map((e=>{"00"!=t&&e.time<t||"00"!=l&&e.time>l?e.isDisabled=!0:e.isDisabled=!1}))},f=i=>{const n=i.split(":"),s=a.split(":");let v=0,c=0,d=0;"hh:mm:ss"==u?(v=parseInt(n[0]),c=parseInt(n[1]),d=parseInt(n[2]),o.value.children[0].scrollTop=30*v,o.value.children[1].scrollTop=30*c,o.value.children[2].scrollTop=30*d,r.value=n[0],p.value=n[1],m.value=n[2],T(e,n[0]),T(t,n[1]),T(l,n[2]),h(e,r.value),h(t,p.value)):"mm:hh:ss"==u?(v=parseInt(n[0]),c=parseInt(n[1]),d=parseInt(n[2]),o.value.children[0].scrollTop=30*c,o.value.children[1].scrollTop=30*v,o.value.children[2].scrollTop=30*d,r.value=n[0],p.value=n[1],m.value=n[2],T(e,n[0]),T(t,n[1]),T(l,n[2]),h(e,r.value),h(t,p.value)):"hh:mm"==u?(v=parseInt(n[0]),c=parseInt(n[1]),o.value.children[0].scrollTop=30*v,o.value.children[1].scrollTop=30*c,r.value=n[0],p.value=n[1],T(e,n[0]),T(t,n[1]),h(e,r.value)):"mm:ss"==u&&(c=parseInt(n[1]),d=parseInt(n[2]),o.value.children[0].scrollTop=30*c,o.value.children[1].scrollTop=30*d,r.value=s[0],p.value=n[1],m.value=n[2],T(t,n[1]),T(l,n[2]),h(t,p.value))},h=(e,t)=>{e.map((e=>{e.time==t&&c(e)}))},T=(e,t)=>{e.map((e=>{e.time==t?e.isActive=!0:e.isActive=!1}))};return{activeTime:n,activeHour:r,activeMinute:p,activeSecond:m,activeTimeFun:(e,t,l)=>{if(t.isDisabled)return!1;v(t,l),e.target.parentElement.scrollTop=30*l},resetTimeValue:f,getNewTime:()=>({activeTime:n,activeHour:r,activeMinute:p,activeSecond:m})}})(e.hourList,e.minuteList,e.secondList,e.minTime,e.maxTime,e.format,l),n=()=>{const t={hh:e.hourList,mm:e.minuteList,ss:e.secondList};return e.format.split(":").map((l=>(t=>{return o("ul",{class:"time-ul",style:{width:e.format.length>6?"33.33%":"50%"}},[r(" "),(l=t,l.map(((e,t)=>o("li",{class:`${e.flag}Id-${t} ${e.isActive?"active-li":""} ${e.isDisabled?"disabled-li":""}`,onClick:l=>{i(l,e,t)}},[e.time]))))]);var l})(t[l])))};return t.expose({restScrooTop:()=>{for(let e=0;e<l.value.children.length;e++)l.value.children[e].scrollTop=0},setOutoTime:e=>{u(e)},getNewTime:a}),()=>o("div",{class:"devui-time-list",ref:l},[n()])}});var $=u({name:"DButton",props:{type:{type:String,default:"button"},btnStyle:{type:String,default:"primary"},size:{type:String,default:"md"},position:{type:String,default:"default"},bordered:{type:Boolean,default:!1},icon:{type:String,default:""},showLoading:{type:Boolean,default:!1},width:{type:String},disabled:{type:Boolean,default:!1},autofocus:{type:Boolean,default:!1},onClick:{type:Function}},setup(e,t){const l=s(null),a=t=>{var l;e.showLoading||null==(l=e.onClick)||l.call(e,t)},i=p((()=>t.slots.default)),u=p((()=>{const{btnStyle:t,size:l,position:a,bordered:u,icon:o}=e;return`${`devui-btn devui-btn-${t} devui-btn-${l} devui-btn-${a}`} ${u?"bordered":""} ${o&&!i.value&&"primary"!==t?"d-btn-icon":""} ${o?"d-btn-icon-wrap":""}`})),n=p((()=>{if(!e.icon)return;const t="devui-icon-fix icon";return i.value?`${t} clear-right-5`:t}));return()=>{var i,s;const{icon:r,type:p,disabled:v,showLoading:c,width:d}=e;return o("div",m({class:"devui-btn-host"},t.attrs),[o("button",{class:u.value,type:p,disabled:v,style:{width:d},onClick:a},[r?o(T,{name:e.icon,class:n.value},null):null,o("span",{class:"button-content",ref:l},[null==(s=(i=t.slots).default)?void 0:s.call(i)])])])}}});$.install=function(e){e.component($.name,$)};var w=u({name:"DTimePopup",components:{TimeList:b,Button:$},props:{showPopup:{type:Boolean,default:!1},popupTop:{type:Number,default:-100},popupLeft:{type:Number,default:-100},popupWidth:{type:Number,default:300},popupFormat:{type:String,default:"hh:mm:ss"},minTime:{type:String,default:"00:00:00"},maxTime:{type:String,default:"23:59:59"},bindData:{type:String,default:"00:00:00"}},emits:["subData"],setup(e,t){const l=s(),a=s(),i=y("hour"),u=y("minute"),n=y("second");v((()=>{((e,t,l,a,i,u)=>{const o=i.split(":")[0],n=i.split(":")[1],s=a.split(":")[0],r=a.split(":")[1],p=a.split(":")[2];e.map(((e,t)=>{(e.time<s||e.time>o)&&(e.isDisabled=!0)})),"mm:ss"==u?t.map(((e,t)=>{(e.time<r||e.time>n)&&(e.isDisabled=!0)})):t.map(((e,t)=>{e.time<r&&(e.isDisabled=!0)})),l.map(((e,t)=>{e.time<p&&(e.isDisabled=!0)}))})(i,u,n,e.minTime,e.maxTime,e.popupFormat)})),c((()=>[e.showPopup,e.bindData]),(([e,t],[l,i])=>{e||t!=i?a.value.setOutoTime(t):a.value.restScrooTop()}));const p=e=>{e.stopPropagation(),t.emit("subData")};return t.expose({changTimeData:()=>a.value.getNewTime()}),()=>{var s,m;return o(d,null,[o("div",{ref:l,class:"devui-time-popup "+(e.showPopup?"devui-show-time-popup":""),style:{width:e.popupWidth+"px",top:e.popupTop+"px",left:e.popupLeft+"px"}},[o(b,{ref:a,hourList:i,minuteList:u,secondList:n,minTime:e.minTime,maxTime:e.maxTime,format:e.popupFormat},null),o("div",{class:"devui-time-popup-btn"},[o("div",{class:"popup-slots"},[null==(m=(s=t.slots).default)?void 0:m.call(s)]),o("div",{onClick:p},[o($,{btnStyle:"common"},{default:()=>[r("确定")]})])])])])}}}),L=u({name:"DTimePicker",components:{TimePopup:w},props:h,emits:["selectedTimeChage","update:modelValue"],setup(e,t){const l=s("00"),a=s("00"),i=s("00"),u=e.format.toLowerCase(),{isActive:n,showPopup:r,devuiTimePicker:p,inputDom:m,left:h,top:y,showClearIcon:b,firsthandActiveTime:$,chooseTime:L,getTimeValue:S,clickVerifyFun:P,isOutOpen:D,clearAll:k,timePopupDom:x,vModeValue:A,getPopupPosition:C}=g(l,a,i,e.minTime,u,e.autoOpen,e.disabled,e.modelValue),I=e=>{n.value=!1,r.value=!1,t.emit("selectedTimeChage",A.value)};return v((()=>{C(),D(),document.addEventListener("click",P),document.addEventListener("click",S),document.addEventListener("scroll",C),window.addEventListener("resize",C)})),f((()=>{document.removeEventListener("click",P),document.removeEventListener("click",S),document.removeEventListener("scroll",C),window.removeEventListener("resize",C)})),c(A,(l=>{t.emit("update:modelValue",A.value),l!=e.minTime?b.value=!0:b.value=!1})),t.expose({clearAll:k,chooseTime:L}),()=>o(d,null,[o("div",{class:`devui-time-picker ${n.value?"time-picker-active":""} ${e.disabled?"picker-disabled":""}`,ref:p},[o(w,{ref:x,showPopup:r.value,popupTop:y.value,popupLeft:h.value,popupWidth:e.timePickerWidth,popupFormat:e.format.toLowerCase(),minTime:e.minTime,maxTime:e.maxTime,bindData:$.value,onSubData:I},{default:()=>{var e,l;return[null==(l=(e=t.slots).customViewTemplate)?void 0:l.call(e)]}}),o("input",{ref:m,type:"text",value:A.value,placeholder:`${e.placeholder}`,disabled:e.disabled,class:"time-input"},null),o("div",{class:"time-input-icon"},[o("div",{onClick:k},[b.value?o(T,{size:"small",name:"close"},null):""]),o("div",null,[o(T,{size:"small",name:"time"},null)])])])])}});L.install=function(e){e.component(L.name,L)};var S={title:"TimePicker 时间选择器",category:"数据录入",status:void 0,install(e){e.use(L)}};export{L as TimePicker,S 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, createVNode, reactive, ref, onMounted, onBeforeUnmount, onUnmounted, Fragment, computed, withDirectives, mergeProps, resolveDirective, watch, createTextVNode } from "vue";
+const timePickerProps = {
+  modelValue: {
+    type: String,
+    default: ""
+  },
+  placeholder: {
+    type: String,
+    default: "00:00:00"
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  timePickerWidth: {
+    type: Number,
+    default: 212
+  },
+  minTime: {
+    type: String,
+    default: "00:00:00"
+  },
+  maxTime: {
+    type: String,
+    default: "23:59:59"
+  },
+  format: {
+    type: String,
+    default: "hh:mm:ss"
+  },
+  autoOpen: {
+    type: Boolean,
+    default: false
+  },
+  showAnimation: {
+    type: Boolean,
+    default: true
+  }
+};
+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);
+};
+function getPositionFun(el, left, top) {
+  const inputDom = el.getBoundingClientRect();
+  const button2 = window.innerHeight - (inputDom.top + 20);
+  if (button2 > inputDom.top + 20) {
+    left.value = inputDom.x;
+    top.value = inputDom.top + 20 + 10;
+  } else {
+    left.value = inputDom.x;
+    top.value = inputDom.top - 316;
+  }
+}
+function initializeTimeData(type) {
+  const timeArr = reactive([]);
+  let arrLenght = 0;
+  if (type == "hour") {
+    arrLenght = 24;
+  } else {
+    arrLenght = 60;
+  }
+  for (let i = 0; i < arrLenght; i++) {
+    timeArr.push({
+      time: i < 10 ? "0" + i : i + "",
+      isActive: false,
+      flag: type,
+      isDisabled: false
+    });
+  }
+  return timeArr;
+}
+const setTimeAstrict = (hourList, minuteList, secondList, minTime, maxTime, format) => {
+  const maxTimeHour = maxTime.split(":")[0];
+  const maxTimeMinute = maxTime.split(":")[1];
+  const minTimeHour = minTime.split(":")[0];
+  const minTimeMinute = minTime.split(":")[1];
+  const minTimeSecond = minTime.split(":")[2];
+  hourList.map((item, index2) => {
+    if (item.time < minTimeHour || item.time > maxTimeHour) {
+      item.isDisabled = true;
+    }
+  });
+  if (format == "mm:ss") {
+    minuteList.map((item, index2) => {
+      if (item.time < minTimeMinute || item.time > maxTimeMinute) {
+        item.isDisabled = true;
+      }
+    });
+  } else {
+    minuteList.map((item, index2) => {
+      if (item.time < minTimeMinute) {
+        item.isDisabled = true;
+      }
+    });
+  }
+  secondList.map((item, index2) => {
+    if (item.time < minTimeSecond) {
+      item.isDisabled = true;
+    }
+  });
+};
+function useTimePicker(hh, mm, ss, minTime, maxTime, format, autoOpen, disabled, value) {
+  const isActive = ref(false);
+  const showPopup = ref(false);
+  const devuiTimePicker = ref();
+  const inputDom = ref();
+  const left = ref(-100);
+  const top = ref(-100);
+  const timePopupDom = ref();
+  const timePickerValue = ref("");
+  const showClearIcon = ref(false);
+  const firsthandActiveTime = ref(`${hh.value}:${mm.value}:${ss.value}`);
+  const vModeValue = ref(value);
+  const getPopupPosition = () => {
+    getPositionFun(devuiTimePicker.value, left, top);
+  };
+  const clickVerifyFun = (e) => {
+    e.stopPropagation();
+    isActive.value = false;
+    showPopup.value = false;
+    if (disabled)
+      return;
+    const path = e.composedPath && e.composedPath() || e.path;
+    const inInputDom = path.includes(devuiTimePicker.value);
+    inInputDom && mouseInIputFun();
+  };
+  const mouseInIputFun = () => {
+    if (firsthandActiveTime.value == "00:00:00") {
+      const vModelValueArr = value.split(":");
+      const minTimeValueArr = minTime.split(":");
+      vModeValue.value == "" ? vModeValue.value = "00:00:00" : "";
+      if (vModeValue.value > minTime) {
+        firsthandActiveTime.value = value;
+        setInputValue(vModelValueArr[0], vModelValueArr[1], vModelValueArr[2]);
+      } else {
+        firsthandActiveTime.value = minTime;
+        setInputValue(minTimeValueArr[0], minTimeValueArr[1], minTimeValueArr[2]);
+      }
+    }
+    isActive.value = true;
+    showPopup.value = true;
+  };
+  const vModelIsBeyond = () => {
+    if (vModeValue.value != "" && vModeValue.value < minTime) {
+      vModeValue.value = minTime;
+    } else if (vModeValue.value != "" && vModeValue.value > maxTime) {
+      vModeValue.value = maxTime;
+    }
+    const vModelValueArr = vModeValue.value.split(":");
+    vModeValue.value && setInputValue(vModelValueArr[0], vModelValueArr[1], vModelValueArr[2]);
+  };
+  const getTimeValue = (e) => {
+    e.stopPropagation();
+    if (showPopup.value) {
+      hh.value = timePopupDom.value.changTimeData().activeHour.value;
+      mm.value = timePopupDom.value.changTimeData().activeMinute.value;
+      ss.value = timePopupDom.value.changTimeData().activeSecond.value;
+      firsthandActiveTime.value = `${hh.value}:${mm.value}:${ss.value}`;
+      setInputValue(hh.value, mm.value, ss.value);
+    }
+  };
+  const setInputValue = (hh2, mm2, ss2) => {
+    if (format == "hh:mm:ss") {
+      vModeValue.value = `${hh2}:${mm2}:${ss2}`;
+    } else if (format == "mm:hh:ss") {
+      vModeValue.value = `${mm2}:${hh2}:${ss2}`;
+    } else if (format == "hh:mm") {
+      vModeValue.value = `${hh2}:${mm2}`;
+    } else if (format == "mm:ss") {
+      vModeValue.value = `${mm2}:${ss2}`;
+    }
+  };
+  const clearAll = (e) => {
+    e.stopPropagation();
+    showPopup.value = false;
+    if (minTime != "00:00:00") {
+      const minTimeArr = minTime.split(":");
+      hh.value = minTimeArr[0];
+      mm.value = minTimeArr[1];
+      ss.value = minTimeArr[2];
+    } else {
+      hh.value = "00";
+      mm.value = "00";
+      ss.value = "00";
+    }
+    firsthandActiveTime.value = `${hh.value}:${mm.value}:${ss.value}`;
+    setInputValue(hh.value, mm.value, ss.value);
+  };
+  const isOutOpen = () => {
+    if (autoOpen) {
+      const timeArr = vModeValue.value.split(":");
+      hh.value = timeArr[0];
+      mm.value = timeArr[1];
+      ss.value = timeArr[2];
+      firsthandActiveTime.value = vModeValue.value;
+      setInputValue(hh.value, mm.value, ss.value);
+      isActive.value = true;
+      showPopup.value = autoOpen;
+    }
+  };
+  const chooseTime = (slotTime) => {
+    if (slotTime.type) {
+      if (slotTime.type.toLowerCase() == "hh") {
+        hh.value = slotTime.time;
+      } else if (slotTime.type.toLowerCase() == "mm") {
+        mm.value = slotTime.time;
+      } else if (slotTime.type.toLowerCase() == "ss") {
+        ss.value = slotTime.time;
+      }
+      firsthandActiveTime.value = `${hh.value}:${mm.value}:${ss.value}`;
+      setInputValue(hh.value, mm.value, ss.value);
+    } else {
+      const timeArr = slotTime.time.split(":");
+      hh.value = timeArr[0];
+      mm.value = timeArr[1];
+      ss.value = timeArr[2];
+      firsthandActiveTime.value = `${hh.value}:${mm.value}:${ss.value}`;
+      setInputValue(hh.value, mm.value, ss.value);
+    }
+  };
+  return {
+    isActive,
+    showPopup,
+    devuiTimePicker,
+    timePickerValue,
+    inputDom,
+    timePopupDom,
+    left,
+    top,
+    showClearIcon,
+    firsthandActiveTime,
+    vModeValue,
+    getPopupPosition,
+    getTimeValue,
+    clickVerifyFun,
+    isOutOpen,
+    vModelIsBeyond,
+    clearAll,
+    chooseTime
+  };
+}
+const usePopupLine = (hourListRef, minuteListRef, secondListRef, minTime, maxTime, format, timeListDom) => {
+  const activeTime = ref("00:00:00");
+  const activeHour = ref("00");
+  const activeMinute = ref("00");
+  const activeSecond = ref("00");
+  const activeTimeFun = (e, item, index2) => {
+    if (item.isDisabled) {
+      return false;
+    } else {
+      setTimeActive(item, index2);
+      e.target.parentElement.parentElement.scrollTop = index2 * 32;
+    }
+  };
+  const setTimeActive = (item, index2) => {
+    let activeTimeList = [];
+    let acitveTimeValue = ref("");
+    if (item.flag == "hour") {
+      activeTimeList = hourListRef;
+      acitveTimeValue = activeHour;
+      getItemAstrict(item);
+    } else if (item.flag == "minute") {
+      activeTimeList = minuteListRef;
+      acitveTimeValue = activeMinute;
+      getItemAstrict(item);
+    } else if (item.flag == "second") {
+      activeTimeList = secondListRef;
+      acitveTimeValue = activeSecond;
+    }
+    activeTimeList.map((tiemItem, tiemeIndex) => {
+      tiemItem.isActive = index2 === tiemeIndex;
+    });
+    acitveTimeValue.value = activeTimeList[index2].time;
+    activeTime.value = `${activeHour.value}:${activeMinute.value}:${activeSecond.value}`;
+    if (activeTime.value < minTime) {
+      activeTime.value = minTime;
+      resetTimeValue(minTime);
+    } else if (format == "mm:ss" && `${activeMinute.value}:${activeSecond.value}` > maxTime.slice(3)) {
+      const newMinTime = minTime.slice(0, 3) + maxTime.slice(3);
+      resetTimeValue(newMinTime);
+    } else if (activeTime.value > maxTime) {
+      activeTime.value = maxTime;
+      resetTimeValue(maxTime);
+    }
+  };
+  const getItemAstrict = (item) => {
+    let min = "00";
+    let max = "00";
+    const minTimeHour = minTime.split(":")[0];
+    const minTimeMinute = minTime.split(":")[1];
+    const minTimeSecond = minTime.split(":")[2];
+    const maxTimeHour = maxTime.split(":")[0];
+    const maxTimeMinute = maxTime.split(":")[1];
+    const maxTimeSecond = maxTime.split(":")[2];
+    if (item.flag == "hour") {
+      if (item.time == minTimeHour) {
+        min = minTimeMinute;
+        setItemAstrict(minuteListRef, min, max);
+        activeMinute.value < minTimeMinute && setItemAstrict(secondListRef, minTimeSecond, max);
+      } else if (item.time == maxTimeHour) {
+        max = maxTimeMinute;
+        setItemAstrict(minuteListRef, min, max);
+        setItemAstrict(secondListRef, min, maxTimeSecond);
+      } else {
+        setItemAstrict(minuteListRef, min, max);
+        setItemAstrict(secondListRef, min, max);
+      }
+    }
+    if (item.flag == "minute" && format == "mm:ss") {
+      if (item.time == minTimeMinute) {
+        min = minTimeSecond;
+        setItemAstrict(secondListRef, min, max);
+      } else if (item.time == maxTimeMinute) {
+        max = maxTimeSecond;
+        setItemAstrict(secondListRef, min, max);
+      } else {
+        setItemAstrict(secondListRef, min, max);
+      }
+    } else if (item.flag == "minute") {
+      if (activeHour.value == minTimeHour && item.time == minTimeMinute) {
+        min = minTimeSecond;
+        setItemAstrict(secondListRef, min, max);
+      } else if (activeHour.value == maxTimeHour && item.time == maxTimeMinute) {
+        max = maxTimeSecond;
+        setItemAstrict(secondListRef, min, max);
+      } else {
+        setItemAstrict(secondListRef, min, max);
+      }
+    }
+  };
+  const setItemAstrict = (timeArr, min, max) => {
+    timeArr.map((itme) => {
+      if (min != "00" && itme.time < min) {
+        itme.isDisabled = true;
+      } else if (max != "00" && itme.time > max) {
+        itme.isDisabled = true;
+      } else {
+        itme.isDisabled = false;
+      }
+    });
+  };
+  const resetTimeValue = (time) => {
+    const timeValueArr = time.split(":");
+    const minTiveArr = minTime.split(":");
+    let hh = 0;
+    let mm = 0;
+    let ss = 0;
+    if (format == "hh:mm:ss") {
+      hh = parseInt(timeValueArr[0]);
+      mm = parseInt(timeValueArr[1]);
+      ss = parseInt(timeValueArr[2]);
+      timeListDom.value.children[0].lastElementChild.children[0].scrollTop = hh * 32;
+      timeListDom.value.children[1].lastElementChild.children[0].scrollTop = mm * 32;
+      timeListDom.value.children[2].lastElementChild.children[0].scrollTop = ss * 32;
+      activeHour.value = timeValueArr[0];
+      activeMinute.value = timeValueArr[1];
+      activeSecond.value = timeValueArr[2];
+      resetTimeActive(hourListRef, timeValueArr[0]);
+      resetTimeActive(minuteListRef, timeValueArr[1]);
+      resetTimeActive(secondListRef, timeValueArr[2]);
+      resetTimeAstrict(hourListRef, activeHour.value);
+      resetTimeAstrict(minuteListRef, activeMinute.value);
+    } else if (format == "mm:hh:ss") {
+      hh = parseInt(timeValueArr[0]);
+      mm = parseInt(timeValueArr[1]);
+      ss = parseInt(timeValueArr[2]);
+      timeListDom.value.children[0].lastElementChild.children[0].scrollTop = mm * 32;
+      timeListDom.value.children[1].lastElementChild.children[0].scrollTop = hh * 32;
+      timeListDom.value.children[2].lastElementChild.children[0].scrollTop = ss * 32;
+      activeHour.value = timeValueArr[0];
+      activeMinute.value = timeValueArr[1];
+      activeSecond.value = timeValueArr[2];
+      resetTimeActive(hourListRef, timeValueArr[0]);
+      resetTimeActive(minuteListRef, timeValueArr[1]);
+      resetTimeActive(secondListRef, timeValueArr[2]);
+      resetTimeAstrict(hourListRef, activeHour.value);
+      resetTimeAstrict(minuteListRef, activeMinute.value);
+    } else if (format == "hh:mm") {
+      hh = parseInt(timeValueArr[0]);
+      mm = parseInt(timeValueArr[1]);
+      timeListDom.value.children[0].lastElementChild.children[0].scrollTop = hh * 32;
+      timeListDom.value.children[1].lastElementChild.children[0].scrollTop = mm * 32;
+      activeHour.value = timeValueArr[0];
+      activeMinute.value = timeValueArr[1];
+      resetTimeActive(hourListRef, timeValueArr[0]);
+      resetTimeActive(minuteListRef, timeValueArr[1]);
+      resetTimeAstrict(hourListRef, activeHour.value);
+    } else if (format == "mm:ss") {
+      mm = parseInt(timeValueArr[1]);
+      ss = parseInt(timeValueArr[2]);
+      timeListDom.value.children[0].lastElementChild.children[0].scrollTop = mm * 32;
+      timeListDom.value.children[1].lastElementChild.children[0].scrollTop = ss * 32;
+      activeHour.value = minTiveArr[0];
+      activeMinute.value = timeValueArr[1];
+      activeSecond.value = timeValueArr[2];
+      resetTimeActive(minuteListRef, timeValueArr[1]);
+      resetTimeActive(secondListRef, timeValueArr[2]);
+      resetTimeAstrict(minuteListRef, activeMinute.value);
+    }
+  };
+  const resetTimeAstrict = (timeArr, time) => {
+    timeArr.map((item) => {
+      if (item.time == time) {
+        getItemAstrict(item);
+      }
+    });
+  };
+  const resetTimeActive = (timeArr, itemValue) => {
+    timeArr.map((item) => {
+      item.isActive = item.time === itemValue;
+    });
+  };
+  const getNewTime = () => {
+    return { activeTime, activeHour, activeMinute, activeSecond };
+  };
+  const resetScrollTop = () => {
+    for (let i = 0; i < timeListDom.value.children.length; i++) {
+      timeListDom.value.children[i].lastElementChild.children[0].scrollTop = 0;
+    }
+  };
+  return {
+    activeTime,
+    activeHour,
+    activeMinute,
+    activeSecond,
+    activeTimeFun,
+    resetTimeValue,
+    getNewTime,
+    resetScrollTop
+  };
+};
+function useTimeScroll() {
+  const scrollBoxDom = ref();
+  const scrollContentDom = ref();
+  const scrollThumbDom = ref();
+  const scrollTrackDom = ref();
+  const isDown = ref(false);
+  const getScrollHeight = () => {
+    const thumbHeight = scrollContentDom.value.clientHeight / scrollContentDom.value.scrollHeight * 100;
+    scrollThumbDom.value.style.height = thumbHeight + "%";
+  };
+  const setVirtualScroll = () => {
+    const thumbMoveY = scrollContentDom.value.scrollTop * 100 / scrollContentDom.value.clientHeight;
+    scrollThumbDom.value.style.transform = `translateY(${thumbMoveY}%)`;
+  };
+  const clickTrackFun = (e) => {
+    const offset = Math.abs(scrollTrackDom.value.getBoundingClientRect().top - e.clientY);
+    const thumbCenter = scrollThumbDom.value.offsetHeight / 2;
+    const thumbPosition = (offset - thumbCenter) * 100 / scrollContentDom.value.offsetHeight;
+    scrollContentDom.value.scrollTop = thumbPosition * scrollContentDom.value.scrollHeight / 100;
+    scrollContentDom.value.style.top = scrollContentDom.value.scrollTop + "px";
+  };
+  const mouseDownThum = () => {
+    isDown.value = true;
+    scrollTrackDom.value.style.opacity = 1;
+  };
+  const mouseOutThum = (e) => {
+    isDown.value = false;
+    thumbMouseMove(e);
+  };
+  const thumbMouseMove = (e) => {
+    const path = e.composedPath && e.composedPath() || e.path;
+    if (path.includes(scrollBoxDom.value) || isDown.value) {
+      scrollTrackDom.value.style.opacity = 1;
+    } else {
+      scrollTrackDom.value.style.opacity = 0;
+    }
+    if (!isDown.value)
+      return;
+    clickTrackFun(e);
+  };
+  const getScrollWidth = () => {
+    const ua = navigator.userAgent;
+    let marginRight = -20;
+    if (ua.indexOf("Chrome") > -1) {
+      marginRight = -8;
+    } else {
+      const outer = document.createElement("div");
+      outer.className = "devui-scrollbar-wrap";
+      outer.style.width = "100px";
+      outer.style.visibility = "hidden";
+      outer.style.position = "absolute";
+      outer.style.top = "-9999px";
+      document.body.appendChild(outer);
+      const widthNoScroll = outer.offsetWidth;
+      outer.style.overflow = "scroll";
+      const inner = document.createElement("div");
+      inner.style.width = "100%";
+      outer.appendChild(inner);
+      const widthWithScroll = inner.offsetWidth;
+      outer.parentNode.removeChild(outer);
+      marginRight = (widthNoScroll - widthWithScroll + 3) * -1;
+    }
+    return marginRight;
+  };
+  return {
+    scrollThumbDom,
+    scrollTrackDom,
+    scrollContentDom,
+    scrollBoxDom,
+    isDown,
+    getScrollHeight,
+    setVirtualScroll,
+    clickTrackFun,
+    mouseDownThum,
+    mouseOutThum,
+    thumbMouseMove,
+    getScrollWidth
+  };
+}
+var index$3 = "";
+var TimeScroll = defineComponent({
+  name: "DTimeScroll",
+  props: timePickerProps,
+  setup(props, ctx) {
+    const {
+      scrollBoxDom,
+      scrollThumbDom,
+      scrollTrackDom,
+      scrollContentDom,
+      isDown,
+      getScrollHeight,
+      setVirtualScroll,
+      clickTrackFun,
+      mouseDownThum,
+      mouseOutThum,
+      thumbMouseMove,
+      getScrollWidth
+    } = useTimeScroll();
+    const marginRight = getScrollWidth();
+    onMounted(() => {
+      getScrollWidth();
+      getScrollHeight();
+      scrollBoxDom.value.addEventListener("click", setVirtualScroll);
+      scrollContentDom.value.addEventListener("scroll", setVirtualScroll);
+      scrollThumbDom.value.addEventListener("mousedown", mouseDownThum);
+      document.addEventListener("mouseup", mouseOutThum);
+      document.addEventListener("mousemove", thumbMouseMove);
+    });
+    onBeforeUnmount(() => {
+      scrollBoxDom.value.removeEventListener("click", setVirtualScroll);
+      scrollContentDom.value.removeEventListener("scroll", setVirtualScroll);
+      scrollThumbDom.value.removeEventListener("mousedown", mouseDownThum);
+    });
+    onUnmounted(() => {
+      document.removeEventListener("mouseup", mouseOutThum);
+      document.removeEventListener("mousemove", thumbMouseMove);
+    });
+    return () => {
+      var _a, _b;
+      return createVNode(Fragment, null, [createVNode("div", {
+        "ref": scrollBoxDom,
+        "class": "devui-scroll-box"
+      }, [createVNode("div", {
+        "ref": scrollContentDom,
+        "class": `box-content ${isDown.value || !props.showAnimation ? "box-content-behavior-auto" : ""}`,
+        "style": {
+          "margin-right": marginRight + "px"
+        }
+      }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)]), createVNode("div", {
+        "ref": scrollTrackDom,
+        "class": "box-sroll",
+        "onClick": clickTrackFun
+      }, [createVNode("div", {
+        "ref": scrollThumbDom,
+        "class": "scroll-child"
+      }, null)])])]);
+    };
+  }
+});
+var index$2 = "";
+var TimeList = defineComponent({
+  name: "DTimeList",
+  components: {
+    TimeScroll
+  },
+  props: {
+    hourList: {
+      type: Array,
+      default: () => []
+    },
+    minuteList: {
+      type: Array,
+      default: () => []
+    },
+    secondList: {
+      type: Array,
+      default: () => []
+    },
+    format: {
+      type: String,
+      default: "hh:mm:ss"
+    },
+    minTime: {
+      type: String,
+      default: "00:00:00"
+    },
+    maxTime: {
+      type: String,
+      default: "23:59:59"
+    }
+  },
+  setup(props, ctx) {
+    const timeListDom = ref();
+    const {
+      getNewTime,
+      activeTimeFun,
+      resetTimeValue,
+      resetScrollTop
+    } = usePopupLine(props.hourList, props.minuteList, props.secondList, props.minTime, props.maxTime, props.format, timeListDom);
+    const setOutoTime = (time) => {
+      resetTimeValue(time);
+    };
+    const TimeLi = (timeArr) => {
+      return timeArr.map((item, index2) => {
+        return createVNode("li", {
+          "class": `time-li ${item.flag}Id-${index2} ${item.isActive ? "active-li" : ""} ${item.isDisabled ? "disabled-li" : ""}`,
+          "onClick": (e) => {
+            activeTimeFun(e, item, index2);
+          }
+        }, [createVNode("span", null, [item.time])]);
+      });
+    };
+    const TimeUl = (timeList) => {
+      return createVNode("div", {
+        "class": "time-item",
+        "style": {
+          "flex": 1
+        }
+      }, [createVNode(TimeScroll, null, {
+        default: () => [createVNode("ul", {
+          "class": "time-ul"
+        }, [TimeLi(timeList)])]
+      })]);
+    };
+    const formatTimeUl = () => {
+      const timeList = {
+        "hh": props.hourList,
+        "mm": props.minuteList,
+        "ss": props.secondList
+      };
+      const timeFormatArr = props.format.split(":");
+      return timeFormatArr.map((timeItme) => {
+        return TimeUl(timeList[timeItme]);
+      });
+    };
+    ctx.expose({
+      resetScrollTop,
+      setOutoTime,
+      getNewTime
+    });
+    return () => {
+      return createVNode("div", {
+        "class": "devui-time-list",
+        "ref": timeListDom
+      }, [formatTimeUl()]);
+    };
+  }
+});
+const buttonProps = {
+  type: {
+    type: String,
+    default: "button"
+  },
+  btnStyle: {
+    type: String,
+    default: "primary"
+  },
+  size: {
+    type: String,
+    default: "md"
+  },
+  position: {
+    type: String,
+    default: "default"
+  },
+  bordered: {
+    type: Boolean,
+    default: false
+  },
+  icon: {
+    type: String,
+    default: ""
+  },
+  showLoading: {
+    type: Boolean,
+    default: false
+  },
+  width: {
+    type: String
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  autofocus: {
+    type: Boolean,
+    default: false
+  },
+  onClick: {
+    type: Function
+  }
+};
+var button = "";
+var Button = defineComponent({
+  name: "DButton",
+  props: buttonProps,
+  setup(props, ctx) {
+    const buttonContent = ref(null);
+    const onClick = (e) => {
+      var _a;
+      if (props.showLoading) {
+        return;
+      }
+      (_a = props.onClick) == null ? void 0 : _a.call(props, e);
+    };
+    const hasContent = computed(() => ctx.slots.default);
+    const btnClass = computed(() => {
+      const {
+        btnStyle,
+        size,
+        position,
+        bordered,
+        icon
+      } = props;
+      const origin = `devui-btn devui-btn-${btnStyle} devui-btn-${size} devui-btn-${position}`;
+      const borderedClass = bordered ? "bordered" : "";
+      const btnIcon = !!icon && !hasContent.value && btnStyle !== "primary" ? "d-btn-icon" : "";
+      const btnIconWrap = !!icon ? "d-btn-icon-wrap" : "";
+      return `${origin} ${borderedClass} ${btnIcon} ${btnIconWrap}`;
+    });
+    const iconClass = computed(() => {
+      if (!props.icon) {
+        return;
+      }
+      const origin = "devui-icon-fix icon";
+      if (hasContent.value) {
+        return `${origin} clear-right-5`;
+      } else {
+        return origin;
+      }
+    });
+    return () => {
+      var _a, _b;
+      const {
+        icon,
+        type,
+        disabled,
+        showLoading,
+        width
+      } = props;
+      return withDirectives(createVNode("div", mergeProps({
+        "class": "devui-btn-host"
+      }, ctx.attrs), [createVNode("button", {
+        "class": btnClass.value,
+        "type": type,
+        "disabled": disabled,
+        "style": {
+          width
+        },
+        "onClick": onClick
+      }, [!!icon ? createVNode(Icon, {
+        "name": icon,
+        "class": iconClass.value
+      }, null) : null, createVNode("span", {
+        "class": "button-content",
+        "ref": buttonContent
+      }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)])])]), [[resolveDirective("dLoading"), showLoading]]);
+    };
+  }
+});
+Button.install = function(app) {
+  app.component(Button.name, Button);
+};
+var index$1 = "";
+var TimePopup = defineComponent({
+  name: "DTimePopup",
+  components: {
+    TimeList,
+    Button
+  },
+  props: {
+    showPopup: {
+      type: Boolean,
+      default: false
+    },
+    popupTop: {
+      type: Number,
+      default: -100
+    },
+    popupLeft: {
+      type: Number,
+      default: -100
+    },
+    popupWidth: {
+      type: Number,
+      default: 300
+    },
+    popupFormat: {
+      type: String,
+      default: "hh:mm:ss"
+    },
+    minTime: {
+      type: String,
+      default: "00:00:00"
+    },
+    maxTime: {
+      type: String,
+      default: "23:59:59"
+    },
+    bindData: {
+      type: String,
+      default: "00:00:00"
+    }
+  },
+  emits: ["subData"],
+  setup(props, ctx) {
+    const popupDome = ref();
+    const timeListDom = ref();
+    const hourList = initializeTimeData("hour");
+    const minuteList = initializeTimeData("minute");
+    const secondList = initializeTimeData("second");
+    onMounted(() => {
+      setTimeAstrict(hourList, minuteList, secondList, props.minTime, props.maxTime, props.popupFormat);
+    });
+    watch(() => [props.showPopup, props.bindData], ([showPopup, newTimeVal], [oldShowPopup, oldTimeVal]) => {
+      if (showPopup || newTimeVal != oldTimeVal) {
+        timeListDom.value.setOutoTime(newTimeVal);
+      } else {
+        timeListDom.value.resetScrollTop();
+      }
+    });
+    const changTimeData = () => {
+      return timeListDom.value.getNewTime();
+    };
+    const subDataFun = (e) => {
+      e.stopPropagation();
+      ctx.emit("subData");
+    };
+    ctx.expose({
+      changTimeData
+    });
+    return () => {
+      var _a, _b;
+      return createVNode(Fragment, null, [createVNode("div", {
+        "ref": popupDome,
+        "class": `devui-time-popup ${props.showPopup ? "devui-show-time-popup" : ""}`,
+        "style": {
+          "width": props.popupWidth + "px",
+          "top": props.popupTop + "px",
+          "left": props.popupLeft + "px"
+        }
+      }, [createVNode(TimeList, {
+        "ref": timeListDom,
+        "hourList": hourList,
+        "minuteList": minuteList,
+        "secondList": secondList,
+        "minTime": props.minTime,
+        "maxTime": props.maxTime,
+        "format": props.popupFormat
+      }, null), createVNode("div", {
+        "class": "devui-time-popup-btn"
+      }, [createVNode("div", {
+        "class": "popup-slots"
+      }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)]), createVNode("div", {
+        "onClick": subDataFun
+      }, [createVNode(Button, {
+        "btnStyle": "common"
+      }, {
+        default: () => [createTextVNode("\u786E\u5B9A")]
+      })])])])]);
+    };
+  }
+});
+var timePicker = "";
+var TimePicker = defineComponent({
+  name: "DTimePicker",
+  components: {
+    TimePopup
+  },
+  props: timePickerProps,
+  emits: ["selectedTimeChage", "update:modelValue"],
+  setup(props, ctx) {
+    const activeHour = ref("00");
+    const activeMinute = ref("00");
+    const activeSecond = ref("00");
+    const format = props.format.toLowerCase();
+    const {
+      isActive,
+      showPopup,
+      devuiTimePicker,
+      inputDom,
+      left,
+      top,
+      showClearIcon,
+      firsthandActiveTime,
+      chooseTime,
+      getTimeValue,
+      clickVerifyFun,
+      isOutOpen,
+      vModelIsBeyond,
+      clearAll,
+      timePopupDom,
+      vModeValue,
+      getPopupPosition
+    } = useTimePicker(activeHour, activeMinute, activeSecond, props.minTime, props.maxTime, format, props.autoOpen, props.disabled, props.modelValue);
+    const selectedTimeChage = (e) => {
+      isActive.value = false;
+      showPopup.value = false;
+      ctx.emit("selectedTimeChage", vModeValue.value);
+    };
+    onMounted(() => {
+      getPopupPosition();
+      isOutOpen();
+      vModelIsBeyond();
+      document.addEventListener("click", clickVerifyFun);
+      document.addEventListener("click", getTimeValue);
+      document.addEventListener("scroll", getPopupPosition);
+      window.addEventListener("resize", getPopupPosition);
+    });
+    onUnmounted(() => {
+      document.removeEventListener("click", clickVerifyFun);
+      document.removeEventListener("click", getTimeValue);
+      document.removeEventListener("scroll", getPopupPosition);
+      window.removeEventListener("resize", getPopupPosition);
+    });
+    watch(vModeValue, (newValue) => {
+      ctx.emit("update:modelValue", vModeValue.value);
+      if (newValue != props.minTime && newValue != "00:00") {
+        showClearIcon.value = true;
+      } else {
+        showClearIcon.value = false;
+      }
+    });
+    ctx.expose({
+      clearAll,
+      chooseTime
+    });
+    return () => {
+      return createVNode(Fragment, null, [createVNode("div", {
+        "class": `devui-time-picker ${isActive.value ? "time-picker-active" : ""} ${props.disabled ? "picker-disabled" : ""}`,
+        "ref": devuiTimePicker
+      }, [createVNode(TimePopup, {
+        "ref": timePopupDom,
+        "showPopup": showPopup.value,
+        "popupTop": top.value,
+        "popupLeft": left.value,
+        "popupWidth": props.timePickerWidth,
+        "popupFormat": props.format.toLowerCase(),
+        "minTime": props.minTime,
+        "maxTime": props.maxTime,
+        "bindData": firsthandActiveTime.value,
+        "onSubData": selectedTimeChage
+      }, {
+        default: () => {
+          var _a, _b;
+          return [(_b = (_a = ctx.slots).customViewTemplate) == null ? void 0 : _b.call(_a)];
+        }
+      }), createVNode("input", {
+        "ref": inputDom,
+        "type": "text",
+        "value": vModeValue.value,
+        "placeholder": `${props.placeholder}`,
+        "disabled": props.disabled,
+        "class": "time-input"
+      }, null), createVNode("div", {
+        "class": "time-input-icon"
+      }, [createVNode("div", {
+        "onClick": clearAll
+      }, [showClearIcon.value ? createVNode(Icon, {
+        "size": "small",
+        "name": "close"
+      }, null) : ""]), createVNode("div", null, [createVNode(Icon, {
+        "size": "small",
+        "name": "time"
+      }, null)])])])]);
+    };
+  }
+});
+TimePicker.install = function(app) {
+  app.component(TimePicker.name, TimePicker);
+};
+var index = {
+  title: "TimePicker \u65F6\u95F4\u9009\u62E9\u5668",
+  category: "\u6570\u636E\u5F55\u5165",
+  status: "90%",
+  install(app) {
+    app.use(TimePicker);
+  }
+};
+export { TimePicker, index as default };