vue-devui 1.0.0-rc.11 → 1.0.0-rc.12

package/{date-picker → time-picker}/index.es.js

@@ -29,208 +29,58 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import { defineComponent, toRefs, computed, createVNode, resolveDynamicComponent, mergeProps, watch, provide, reactive, onUnmounted, Transition, ref, unref, nextTick, Comment, Text, h, Fragment, inject, withDirectives, cloneVNode, onMounted, Teleport, createTextVNode, onBeforeUnmount, shallowRef } from "vue";
-import { offset, autoPlacement, arrow, shift, computePosition } from "@floating-ui/dom";
-const getDateTime = (d) => {
-  const year = d.getFullYear();
-  const month = d.getMonth() + 1;
-  const date4 = 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, date4, 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);
-  }
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
 };
-const getHumanDate = (d) => {
-  const year = d.getFullYear();
-  const month = d.getMonth() + 1;
-  const date4 = 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: date4,
-    d: date4,
-    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 date4 = new Date(first);
-    date4.setDate(i + 1);
-    dates.push({ date: date4, 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 = (date4 = new Date()) => {
-  if (!(date4 instanceof Date)) {
-    date4 = new Date();
-  }
-  const { year, month } = getHumanDate(date4);
-  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), date4 = _parseInt(d) || 1;
-  if (!year || !month) {
-    return null;
-  }
-  const time = parseTime(timeStr);
-  return new Date(year, month - 1, date4, ...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 [h2, m, s, ms] = str.split(/[\:\.]+/);
-  return [_parseInt(h2, 0), _parseInt(m, 0), _parseInt(s, 0), _parseInt(ms, 0)];
-};
-const compareDateSort = (d1, d2, type4 = "d") => {
-  const t1 = dateCounter(d1, type4), t2 = dateCounter(d2, type4);
-  return t1 < t2 ? -1 : t1 > t2 ? 1 : 0;
-};
-const dateCounter = (date4, type4) => {
-  switch (type4) {
-    case "y":
-      return date4.getFullYear();
-    case "m":
-      return date4.getFullYear() * 12 + date4.getMonth();
-  }
-  return date4.getTime() / ONE_DAY >> 0;
-};
-const betweenDate = (date4, left, right) => {
-  if (left instanceof Date && compareDateSort(left, date4, "d") > 0) {
-    return false;
-  }
-  if (right instanceof Date && compareDateSort(date4, right, "d") > 0) {
-    return false;
+import { defineComponent, toRefs, computed, createVNode, resolveDynamicComponent, mergeProps, ref, reactive, onMounted, onBeforeUnmount, onUnmounted, Fragment, h, render, inject, withDirectives, resolveDirective, provide, toRef, getCurrentInstance, watch, isVNode, Transition, unref, nextTick, Comment, Text, cloneVNode, Teleport, createTextVNode, shallowRef } from "vue";
+import { onClickOutside } from "@vueuse/core";
+import { offset, autoPlacement, arrow, shift, computePosition } from "@floating-ui/dom";
+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
+  },
+  size: {
+    type: String,
+    default: "md"
+  },
+  readonly: {
+    type: Boolean,
+    default: false
   }
-  return true;
 };
 const DEFAULT_PREFIX = "icon";
 const iconProps = {
@@ -395,6 +245,7 @@ function useIconDom(props, ctx) {
 var Icon = defineComponent({
   name: "DIcon",
   props: iconProps,
+  emits: ["click"],
   setup(props, ctx) {
     const {
       disabled,
@@ -410,10 +261,10 @@ var Icon = defineComponent({
       [ns2.m("operable")]: operable.value
     }));
     const onClick = (e) => {
-      e.stopImmediatePropagation();
       if (disabled.value) {
-        e.preventDefault();
+        return;
       }
+      ctx.emit("click", e);
     };
     return () => {
       var _a, _b, _c, _d;
@@ -424,115 +275,861 @@ var Icon = defineComponent({
     };
   }
 });
-const inputProps = {
-  modelValue: {
-    type: String,
-    default: ""
-  },
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  error: {
-    type: Boolean,
-    default: false
-  },
-  size: {
-    type: String
-  },
-  validateEvent: {
-    type: Boolean,
-    default: true
+var iconGroup = "";
+defineComponent({
+  name: "DIconGroup",
+  setup(_, ctx) {
+    const ns2 = useNamespace("icon-group");
+    return () => {
+      var _a, _b;
+      return createVNode("div", {
+        "class": ns2.b()
+      }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)]);
+    };
+  }
+});
+function useTimePicker(hh, mm, ss, format2, props) {
+  const showPopup = ref(false);
+  const devuiTimePicker = ref();
+  const inputDom = ref();
+  const overlayRef = ref();
+  const timePopupDom = ref();
+  const timePickerValue = ref("");
+  const showClearIcon = ref(false);
+  const firsthandActiveTime = ref(`${hh.value}:${mm.value}:${ss.value}`);
+  const vModeValue = ref(props.modelValue);
+  const formatTime = () => {
+    let modelValue = vModeValue.value || "00:00:00";
+    if (["hh:mm", "mm:ss"].includes(format2)) {
+      modelValue = vModeValue.value || "00:00";
+    }
+    const timeArr = modelValue.split(":");
+    let trueValue = "00:00:00";
+    if (format2 === "hh:mm:ss") {
+      trueValue = modelValue;
+    } else if (format2 === "mm:hh:ss") {
+      trueValue = `${timeArr[1]}:${timeArr[0]}:${timeArr[2]}`;
+    } else if (format2 === "hh:mm") {
+      trueValue = `${timeArr[0]}:${timeArr[1]}:${ss.value}`;
+    } else if (format2 === "mm:ss") {
+      trueValue = `${hh.value}:${timeArr[0]}:${timeArr[1]}`;
+    }
+    return trueValue;
+  };
+  const trueTimeValue = computed(() => {
+    return formatTime();
+  });
+  const setInputValue = (h2, m, s) => {
+    if (format2 === "hh:mm:ss") {
+      vModeValue.value = `${h2}:${m}:${s}`;
+    } else if (format2 === "mm:hh:ss") {
+      vModeValue.value = `${m}:${h2}:${s}`;
+    } else if (format2 === "hh:mm") {
+      vModeValue.value = `${h2}:${m}`;
+    } else if (format2 === "mm:ss") {
+      vModeValue.value = `${m}:${s}`;
+    }
+  };
+  const initData = () => {
+    if (vModeValue.value) {
+      firsthandActiveTime.value = props.modelValue;
+      const time = vModeValue.value.split(":");
+      setInputValue(time[0], time[1], time[2]);
+    }
+  };
+  initData();
+  const changeTimeData = ({ activeHour, activeMinute, activeSecond }) => {
+    hh.value = activeHour.value || "00";
+    mm.value = activeMinute.value || "00";
+    ss.value = activeSecond.value || "00";
+    firsthandActiveTime.value = `${hh.value}:${mm.value}:${ss.value}`;
+    setInputValue(hh.value, mm.value, ss.value);
+  };
+  const mouseInputFun = () => {
+    if (!vModeValue.value) {
+      vModeValue.value = "00:00:00";
+    }
+    const minTimeValueArr = props.minTime.split(":");
+    const maxTimeValueArr = props.maxTime.split(":");
+    if (vModeValue.value > props.maxTime) {
+      firsthandActiveTime.value = props.maxTime;
+      setInputValue(maxTimeValueArr[0], maxTimeValueArr[1], maxTimeValueArr[2]);
+    } else if (vModeValue.value < props.minTime) {
+      firsthandActiveTime.value = props.minTime;
+      setInputValue(minTimeValueArr[0], minTimeValueArr[1], minTimeValueArr[2]);
+    }
+    showPopup.value = true;
+  };
+  const clickVerifyFun = (e) => {
+    e.stopPropagation();
+    if (props.disabled || props.readonly) {
+      return;
+    }
+    mouseInputFun();
+  };
+  onClickOutside(devuiTimePicker, () => {
+    showPopup.value = false;
+  });
+  const clearAll = (e) => {
+    e.stopPropagation();
+    if (props.minTime !== "00:00:00") {
+      const minTimeArr = props.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 (props.autoOpen) {
+      mouseInputFun();
+      showPopup.value = props.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 {
+    showPopup,
+    trueTimeValue,
+    devuiTimePicker,
+    timePickerValue,
+    inputDom,
+    timePopupDom,
+    showClearIcon,
+    firsthandActiveTime,
+    vModeValue,
+    clickVerifyFun,
+    isOutOpen,
+    clearAll,
+    chooseTime,
+    overlayRef,
+    changeTimeData
+  };
+}
+function initializeTimeData(type4) {
+  const timeArr = reactive([]);
+  let arrLength = 0;
+  if (type4 === "hour") {
+    arrLength = 24;
+  } else {
+    arrLength = 60;
+  }
+  for (let i = 0; i < arrLength; i++) {
+    timeArr.push({
+      time: i < 10 ? "0" + i : i + "",
+      isActive: false,
+      flag: type4,
+      isDisabled: false,
+      type: type4
+    });
+  }
+  return timeArr;
+}
+const setTimeAstrict = (hourList, minuteList, secondList, minTime, maxTime, format2) => {
+  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) => {
+    if (item.time < minTimeHour || item.time > maxTimeHour) {
+      item.isDisabled = true;
+    }
+  });
+  if (format2 === "mm:ss") {
+    minuteList.map((item) => {
+      if (item.time < minTimeMinute || item.time > maxTimeMinute) {
+        item.isDisabled = true;
+      }
+    });
+  } else {
+    minuteList.map((item) => {
+      if (item.time < minTimeMinute) {
+        item.isDisabled = true;
+      }
+    });
+  }
+  secondList.map((item) => {
+    if (item.time < minTimeSecond) {
+      item.isDisabled = true;
+    }
+  });
+};
+const usePopupLine = (hourListRef, minuteListRef, secondListRef, minTime, maxTime, format2, itemHeight, timeListDom, ctx) => {
+  const activeTime = ref("00:00:00");
+  const activeHour = ref("00");
+  const activeMinute = ref("00");
+  const activeSecond = ref("00");
+  const setItemAstrict = (timeArr, min, max) => {
+    timeArr.map((item) => {
+      if (min !== "00" && item.time < min) {
+        item.isDisabled = true;
+      } else if (max !== "00" && item.time > max) {
+        item.isDisabled = true;
+      } else {
+        item.isDisabled = false;
+      }
+    });
+  };
+  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" && format2 === "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 resetTimeActive = (timeArr, itemValue) => {
+    timeArr.map((item) => {
+      item.isActive = item.time === itemValue;
+    });
+  };
+  const resetTimeAstrict = (timeArr, time) => {
+    timeArr.map((item) => {
+      if (item.time === time) {
+        getItemAstrict(item);
+      }
+    });
+  };
+  const resetTimeValue = (time) => {
+    const timeValueArr = time.split(":");
+    minTime.split(":");
+    let hh = 0;
+    let mm = 0;
+    let ss = 0;
+    if (format2 === "hh:mm:ss") {
+      hh = parseInt(timeValueArr[0]);
+      mm = parseInt(timeValueArr[1]);
+      ss = parseInt(timeValueArr[2]);
+      timeListDom.value.children[0].lastElementChild.children[0].scrollTop = hh * itemHeight;
+      timeListDom.value.children[1].lastElementChild.children[0].scrollTop = mm * itemHeight;
+      timeListDom.value.children[2].lastElementChild.children[0].scrollTop = ss * itemHeight;
+      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 (format2 === "mm:hh:ss") {
+      hh = parseInt(timeValueArr[0]);
+      mm = parseInt(timeValueArr[1]);
+      ss = parseInt(timeValueArr[2]);
+      timeListDom.value.children[0].lastElementChild.children[0].scrollTop = mm * itemHeight;
+      timeListDom.value.children[1].lastElementChild.children[0].scrollTop = hh * itemHeight;
+      timeListDom.value.children[2].lastElementChild.children[0].scrollTop = ss * itemHeight;
+      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 (format2 === "hh:mm") {
+      hh = parseInt(timeValueArr[0]);
+      mm = parseInt(timeValueArr[1]);
+      timeListDom.value.children[0].lastElementChild.children[0].scrollTop = hh * itemHeight;
+      timeListDom.value.children[1].lastElementChild.children[0].scrollTop = mm * itemHeight;
+      activeHour.value = timeValueArr[0];
+      activeMinute.value = timeValueArr[1];
+      activeSecond.value = timeValueArr[2];
+      resetTimeActive(hourListRef, timeValueArr[0]);
+      resetTimeActive(minuteListRef, timeValueArr[1]);
+      resetTimeAstrict(hourListRef, activeHour.value);
+    } else if (format2 === "mm:ss") {
+      mm = parseInt(timeValueArr[1]);
+      ss = parseInt(timeValueArr[2]);
+      timeListDom.value.children[0].lastElementChild.children[0].scrollTop = mm * itemHeight;
+      timeListDom.value.children[1].lastElementChild.children[0].scrollTop = ss * itemHeight;
+      activeHour.value = timeValueArr[0];
+      activeMinute.value = timeValueArr[1];
+      activeSecond.value = timeValueArr[2];
+      resetTimeActive(minuteListRef, timeValueArr[1]);
+      resetTimeActive(secondListRef, timeValueArr[2]);
+      resetTimeAstrict(minuteListRef, activeMinute.value);
+    }
+  };
+  const setTimeActive = (item, index2) => {
+    let activeTimeList = [];
+    let activeTimeValue = ref("");
+    if (item.flag === "hour") {
+      activeTimeList = hourListRef;
+      activeTimeValue = activeHour;
+      getItemAstrict(item);
+    } else if (item.flag === "minute") {
+      activeTimeList = minuteListRef;
+      activeTimeValue = activeMinute;
+      getItemAstrict(item);
+    } else if (item.flag === "second") {
+      activeTimeList = secondListRef;
+      activeTimeValue = activeSecond;
+    }
+    activeTimeList.map((timeItem, timeIndex) => {
+      timeItem.isActive = index2 === timeIndex;
+    });
+    activeTimeValue.value = activeTimeList[index2].time;
+    activeTime.value = `${activeHour.value}:${activeMinute.value}:${activeSecond.value}`;
+    if (activeTime.value < minTime) {
+      activeTime.value = minTime;
+      resetTimeValue(minTime);
+    } else if (format2 === "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 activeTimeFun = (e, item, index2) => {
+    if (item.isDisabled) {
+      return false;
+    } else {
+      setTimeActive(item, index2);
+      e.target.parentElement.parentElement.scrollTop = index2 * itemHeight;
+    }
+    ctx.emit("change", { activeHour, activeMinute, activeSecond });
+  };
+  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 offsetNum = scrollTrackDom.value.getBoundingClientRect().top - e.clientY;
+    const offset2 = Math.abs(offsetNum > 0 ? 0 : offsetNum);
+    const thumbCenter = scrollThumbDom.value.offsetHeight / 2;
+    const thumbPosition = (offset2 - thumbCenter) * 100 / scrollContentDom.value.offsetHeight;
+    scrollContentDom.value.scrollTop = thumbPosition * scrollContentDom.value.scrollHeight / 100;
+    scrollContentDom.value.style.top = scrollContentDom.value.scrollTop + "px";
+  };
+  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 mouseDownThum = () => {
+    isDown.value = true;
+    scrollTrackDom.value.style.opacity = 1;
+  };
+  const mouseOutThum = (e) => {
+    isDown.value = false;
+    thumbMouseMove(e);
+  };
+  const getScrollWidth = () => {
+    var _a;
+    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;
+      (_a = outer.parentNode) == null ? void 0 : _a.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 ns2 = useNamespace("scroll-box");
+    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": ns2.b()
+      }, [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
   },
-  prefix: {
-    type: String,
-    default: ""
+  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"
+    },
+    itemHeight: {
+      type: Number,
+      default: 32
+    }
   },
-  suffix: {
-    type: String,
-    default: ""
+  emits: ["change"],
+  setup(props, ctx) {
+    const ns2 = useNamespace("time-list");
+    const timeListDom = ref();
+    const {
+      getNewTime,
+      activeTimeFun,
+      resetTimeValue,
+      resetScrollTop
+    } = usePopupLine(props.hourList, props.minuteList, props.secondList, props.minTime, props.maxTime, props.format, props.itemHeight, timeListDom, ctx);
+    const setOuterTime = (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((timeItem) => {
+        return TimeUl(timeList[timeItem]);
+      });
+    };
+    ctx.expose({
+      resetScrollTop,
+      setOuterTime,
+      getNewTime
+    });
+    return () => {
+      return createVNode("div", {
+        "class": ns2.b(),
+        "ref": timeListDom
+      }, [formatTimeUl()]);
+    };
+  }
+});
+class View {
+  constructor() {
+    __publicField(this, "top", "50%");
+    __publicField(this, "left", "50%");
+  }
+}
+const loadingProps = {
+  message: String,
+  backdrop: Boolean,
+  view: {
+    type: Object,
+    default: () => new View()
   },
-  showPassword: {
+  zIndex: Number,
+  isFull: {
     type: Boolean,
     default: false
+  }
+};
+class LoadingOptions {
+  constructor() {
+    __publicField(this, "target");
+    __publicField(this, "message");
+    __publicField(this, "loadingTemplateRef");
+    __publicField(this, "backdrop", true);
+    __publicField(this, "positionType", "relative");
+    __publicField(this, "view", new View());
+    __publicField(this, "zIndex");
+  }
+}
+var loading = "";
+var Loading = defineComponent({
+  name: "DLoading",
+  inheritAttrs: false,
+  props: loadingProps,
+  setup(props) {
+    const style = {
+      top: props.view.top,
+      left: props.view.left,
+      zIndex: props.zIndex
+    };
+    if (!props.message) {
+      style.background = "none";
+    }
+    const isShow = ref(false);
+    const open = () => {
+      isShow.value = true;
+    };
+    const close = () => {
+      isShow.value = false;
+    };
+    return {
+      style,
+      isShow,
+      open,
+      close
+    };
   },
-  clearable: {
-    type: Boolean,
-    default: false
+  render() {
+    var _a;
+    const {
+      isShow,
+      isFull,
+      backdrop,
+      style,
+      message,
+      $slots
+    } = this;
+    const ns2 = useNamespace("loading");
+    return isShow && createVNode("div", {
+      "class": [ns2.b(), isFull ? ns2.m("full") : ""]
+    }, [((_a = $slots.default) == null ? void 0 : _a.call($slots)) || createVNode("div", {
+      "class": ns2.e("wrapper")
+    }, [backdrop ? createVNode("div", {
+      "class": ns2.e("mask")
+    }, null) : null, createVNode("div", {
+      "style": style,
+      "class": ns2.e("area")
+    }, [createVNode("div", {
+      "class": ns2.e("busy-default-spinner")
+    }, [createVNode("div", {
+      "class": ns2.e("bar1")
+    }, null), createVNode("div", {
+      "class": ns2.e("bar2")
+    }, null), createVNode("div", {
+      "class": ns2.e("bar3")
+    }, null), createVNode("div", {
+      "class": ns2.e("bar4")
+    }, null)]), message ? createVNode("span", {
+      "class": ns2.e("text")
+    }, [message]) : null])])]);
+  }
+});
+const COMPONENT_CONTAINER_SYMBOL = Symbol("dev_component_container");
+function createComponent(component, props, children = null) {
+  const vnode = h(component, __spreadValues({}, props), children);
+  const container = document.createElement("div");
+  vnode[COMPONENT_CONTAINER_SYMBOL] = container;
+  render(vnode, container);
+  return vnode.component;
+}
+function unmountComponent(ComponnetInstance) {
+  render(null, ComponnetInstance == null ? void 0 : ComponnetInstance.vnode[COMPONENT_CONTAINER_SYMBOL]);
+}
+const loadingConstructor = defineComponent(Loading);
+const cacheInstance = /* @__PURE__ */ new WeakSet();
+const isEmpty = (val) => {
+  if (!val) {
+    return true;
+  }
+  if (Array.isArray(val)) {
+    return val.length === 0;
+  }
+  if (val instanceof Set || val instanceof Map) {
+    return val.size === 0;
+  }
+  if (val instanceof Promise) {
+    return false;
+  }
+  if (typeof val === "object") {
+    try {
+      return Object.keys(val).length === 0;
+    } catch (e) {
+      return false;
+    }
+  }
+  return false;
+};
+const getType = (vari) => {
+  return Object.prototype.toString.call(vari).slice(8, -1).toLowerCase();
+};
+const isPromise = (value) => {
+  const type4 = getType(value);
+  switch (type4) {
+    case "promise":
+      return [value];
+    case "array":
+      if (value.some((val) => getType(val) !== "promise")) {
+        console.error(new TypeError("Binding values should all be of type Promise"));
+        return "error";
+      }
+      return value;
+    default:
+      return false;
   }
 };
-const formItemProps = {
-  label: {
-    type: String
-  },
-  field: {
-    type: String,
-    default: ""
-  },
-  required: {
-    type: Boolean,
-    default: false
-  },
-  messageType: {
-    type: String
-  },
-  popPosition: {
-    type: Array
-  },
-  rules: {
-    type: [Object, Array]
-  },
-  showFeedback: {
-    type: Boolean,
-    default: void 0
-  },
-  helpTips: {
-    type: String,
-    default: ""
-  },
-  feedbackStatus: {
-    type: String
-  },
-  extraInfo: {
-    type: String,
-    default: ""
+const unmount = (el) => {
+  cacheInstance.delete(el);
+  el.instance.proxy.close();
+  unmountComponent(el.instance);
+};
+const toggleLoading = (el, binding) => {
+  var _a, _b, _c;
+  if (binding.value) {
+    const vals = isPromise(binding.value);
+    if (vals === "error") {
+      return;
+    }
+    (_c = (_b = (_a = el == null ? void 0 : el.instance) == null ? void 0 : _a.proxy) == null ? void 0 : _b.open) == null ? void 0 : _c.call(_b);
+    el.appendChild(el.mask);
+    cacheInstance.add(el);
+    if (vals) {
+      Promise.all(vals).catch((err) => {
+        console.error(new Error("Promise handling errors"), err);
+      }).finally(() => {
+        unmount(el);
+      });
+    }
+  } else {
+    unmount(el);
   }
 };
-const FORM_ITEM_TOKEN = Symbol("dFormItem");
-const LABEL_DATA = Symbol("labelData");
-const formProps = {
-  data: {
-    type: Object,
-    default: () => ({})
+const removeAttribute = (el) => {
+  el.removeAttribute("zindex");
+  el.removeAttribute("positiontype");
+  el.removeAttribute("backdrop");
+  el.removeAttribute("message");
+  el.removeAttribute("view");
+  el.removeAttribute("loadingtemplateref");
+};
+const handleProps = (el, vprops) => {
+  var _a;
+  const props = __spreadValues(__spreadValues({}, new LoadingOptions()), vprops);
+  const loadingTemplateRef = props.loadingTemplateRef;
+  const loadingInstance = createComponent(loadingConstructor, __spreadValues({}, props), loadingTemplateRef ? () => loadingTemplateRef : null);
+  el.style.position = props.positionType;
+  el.options = props;
+  el.instance = loadingInstance;
+  el.mask = (_a = loadingInstance == null ? void 0 : loadingInstance.proxy) == null ? void 0 : _a.$el;
+};
+const loadingDirective = {
+  mounted: function(el, binding, vnode) {
+    handleProps(el, vnode.props);
+    removeAttribute(el);
+    !isEmpty(binding.value) && toggleLoading(el, binding);
   },
-  layout: {
+  updated: function(el, binding, vnode) {
+    if (!isEmpty(binding.value) && cacheInstance.has(el) || isEmpty(binding.value) && !cacheInstance.has(el)) {
+      return;
+    }
+    !cacheInstance.has(el) && handleProps(el, vnode.props);
+    removeAttribute(el);
+    toggleLoading(el, binding);
+  }
+};
+const buttonProps = {
+  variant: {
     type: String,
-    default: "horizontal"
+    default: "outline"
   },
-  labelSize: {
+  size: {
     type: String,
     default: "md"
   },
-  labelAlign: {
-    type: String,
-    default: "start"
-  },
-  rules: {
-    type: Object
+  color: {
+    type: String
   },
-  messageType: {
+  icon: {
     type: String,
-    default: "popover"
-  },
-  popPosition: {
-    type: Array,
-    default: ["right", "bottom"]
-  },
-  validateOnRuleChange: {
-    type: Boolean,
-    default: false
+    default: ""
   },
-  showFeedback: {
+  loading: {
     type: Boolean,
     default: false
   },
@@ -540,21 +1137,17 @@ const formProps = {
     type: Boolean,
     default: false
   },
-  size: {
+  shape: {
     type: String
   }
 };
-const FORM_TOKEN = Symbol("dForm");
-function useFieldCollection() {
-  const itemContexts = [];
-  const addItemContext = (field) => {
-    itemContexts.push(field);
-  };
-  const removeItemContext = (field) => {
-    itemContexts.splice(itemContexts.indexOf(field), 1);
-  };
-  return { itemContexts, addItemContext, removeItemContext };
-}
+const buttonGroupProps = {
+  size: {
+    type: String,
+    default: "md"
+  }
+};
+const buttonGroupInjectionKey = Symbol("d-button-group");
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 var lodash = { exports: {} };
 /**
@@ -1277,10 +1870,10 @@ var lodash = { exports: {} };
       }();
       var ctxClearTimeout = context.clearTimeout !== root.clearTimeout && context.clearTimeout, ctxNow = Date2 && Date2.now !== root.Date.now && Date2.now, ctxSetTimeout = context.setTimeout !== root.setTimeout && context.setTimeout;
       var nativeCeil = Math2.ceil, nativeFloor = Math2.floor, nativeGetSymbols = Object2.getOwnPropertySymbols, nativeIsBuffer = Buffer2 ? Buffer2.isBuffer : undefined$1, nativeIsFinite = context.isFinite, nativeJoin = arrayProto.join, nativeKeys = overArg(Object2.keys, Object2), nativeMax = Math2.max, nativeMin = Math2.min, nativeNow = Date2.now, nativeParseInt = context.parseInt, nativeRandom = Math2.random, nativeReverse = arrayProto.reverse;
-      var DataView = getNative(context, "DataView"), Map2 = getNative(context, "Map"), Promise2 = getNative(context, "Promise"), Set = getNative(context, "Set"), WeakMap2 = getNative(context, "WeakMap"), nativeCreate = getNative(Object2, "create");
+      var DataView = getNative(context, "DataView"), Map2 = getNative(context, "Map"), Promise2 = getNative(context, "Promise"), Set2 = getNative(context, "Set"), WeakMap2 = getNative(context, "WeakMap"), nativeCreate = getNative(Object2, "create");
       var metaMap = WeakMap2 && new WeakMap2();
       var realNames = {};
-      var dataViewCtorString = toSource(DataView), mapCtorString = toSource(Map2), promiseCtorString = toSource(Promise2), setCtorString = toSource(Set), weakMapCtorString = toSource(WeakMap2);
+      var dataViewCtorString = toSource(DataView), mapCtorString = toSource(Map2), promiseCtorString = toSource(Promise2), setCtorString = toSource(Set2), weakMapCtorString = toSource(WeakMap2);
       var symbolProto = Symbol2 ? Symbol2.prototype : undefined$1, symbolValueOf = symbolProto ? symbolProto.valueOf : undefined$1, symbolToString = symbolProto ? symbolProto.toString : undefined$1;
       function lodash2(value) {
         if (isObjectLike(value) && !isArray(value) && !(value instanceof LazyWrapper)) {
@@ -1636,7 +2229,7 @@ var lodash = { exports: {} };
       function baseAt(object4, paths) {
         var index2 = -1, length = paths.length, result2 = Array2(length), skip = object4 == null;
         while (++index2 < length) {
-          result2[index2] = skip ? undefined$1 : get(object4, paths[index2]);
+          result2[index2] = skip ? undefined$1 : get2(object4, paths[index2]);
         }
         return result2;
       }
@@ -2081,7 +2674,7 @@ var lodash = { exports: {} };
           return matchesStrictComparable(toKey(path), srcValue);
         }
         return function(object4) {
-          var objValue = get(object4, path);
+          var objValue = get2(object4, path);
           return objValue === undefined$1 && objValue === srcValue ? hasIn(object4, path) : baseIsEqual(srcValue, objValue, COMPARE_PARTIAL_FLAG | COMPARE_UNORDERED_FLAG);
         };
       }
@@ -2972,8 +3565,8 @@ var lodash = { exports: {} };
           return func(number4);
         };
       }
-      var createSet = !(Set && 1 / setToArray(new Set([, -0]))[1] == INFINITY) ? noop : function(values2) {
-        return new Set(values2);
+      var createSet = !(Set2 && 1 / setToArray(new Set2([, -0]))[1] == INFINITY) ? noop : function(values2) {
+        return new Set2(values2);
       };
       function createToPairs(keysFunc) {
         return function(object4) {
@@ -3272,7 +3865,7 @@ var lodash = { exports: {} };
         return result2;
       };
       var getTag = baseGetTag;
-      if (DataView && getTag(new DataView(new ArrayBuffer(1))) != dataViewTag || Map2 && getTag(new Map2()) != mapTag || Promise2 && getTag(Promise2.resolve()) != promiseTag || Set && getTag(new Set()) != setTag || WeakMap2 && getTag(new WeakMap2()) != weakMapTag) {
+      if (DataView && getTag(new DataView(new ArrayBuffer(1))) != dataViewTag || Map2 && getTag(new Map2()) != mapTag || Promise2 && getTag(Promise2.resolve()) != promiseTag || Set2 && getTag(new Set2()) != setTag || WeakMap2 && getTag(new WeakMap2()) != weakMapTag) {
         getTag = function(value) {
           var result2 = baseGetTag(value), Ctor = result2 == objectTag ? value.constructor : undefined$1, ctorString = Ctor ? toSource(Ctor) : "";
           if (ctorString) {
@@ -4559,7 +5152,7 @@ var lodash = { exports: {} };
       function isElement(value) {
         return isObjectLike(value) && value.nodeType === 1 && !isPlainObject(value);
       }
-      function isEmpty(value) {
+      function isEmpty2(value) {
         if (value == null) {
           return true;
         }
@@ -4814,7 +5407,7 @@ var lodash = { exports: {} };
       function functionsIn(object4) {
         return object4 == null ? [] : baseFunctions(object4, keysIn(object4));
       }
-      function get(object4, path, defaultValue) {
+      function get2(object4, path, defaultValue) {
         var result2 = object4 == null ? undefined$1 : baseGet(object4, path);
         return result2 === undefined$1 ? defaultValue : result2;
       }
@@ -5669,7 +6262,7 @@ var lodash = { exports: {} };
       lodash2.forInRight = forInRight;
       lodash2.forOwn = forOwn;
       lodash2.forOwnRight = forOwnRight;
-      lodash2.get = get;
+      lodash2.get = get2;
       lodash2.gt = gt;
       lodash2.gte = gte;
       lodash2.has = has;
@@ -5689,7 +6282,7 @@ var lodash = { exports: {} };
       lodash2.isBuffer = isBuffer;
       lodash2.isDate = isDate;
       lodash2.isElement = isElement;
-      lodash2.isEmpty = isEmpty;
+      lodash2.isEmpty = isEmpty2;
       lodash2.isEqual = isEqual;
       lodash2.isEqualWith = isEqualWith;
       lodash2.isError = isError;
@@ -5967,6 +6560,366 @@ var lodash = { exports: {} };
     }
   }).call(commonjsGlobal);
 })(lodash, lodash.exports);
+function useButton(props, ctx) {
+  const ns2 = useNamespace("button");
+  const hasContent = computed(() => ctx.slots.default);
+  const colorMap = {
+    solid: "primary",
+    outline: "secondary",
+    text: "secondary"
+  };
+  const defaultColor = colorMap[props.variant];
+  const buttonGroupConf = inject(buttonGroupInjectionKey, null);
+  const buttonSize = computed(() => {
+    return (buttonGroupConf == null ? void 0 : buttonGroupConf.size.value) || props.size;
+  });
+  const classes = computed(() => ({
+    [ns2.b()]: true,
+    [ns2.m(props.variant)]: true,
+    [`${ns2.m(props.variant)}--${props.color || defaultColor}`]: true,
+    [ns2.m(buttonSize.value)]: true,
+    [ns2.e("icon-wrap")]: props.icon,
+    [ns2.e("icon")]: props.icon && !hasContent.value,
+    [ns2.m("is-loading")]: props.loading,
+    [ns2.m(props.shape || "")]: props.shape && lodash.exports.isString(props.shape) ? true : false
+  }));
+  const iconClass = computed(() => {
+    if (!props.icon) {
+      return "";
+    }
+    const origin = `${ns2.e("icon-fix")} icon`;
+    if (hasContent.value) {
+      return `${origin} clear-right-5`;
+    } else {
+      return origin;
+    }
+  });
+  return { classes, iconClass };
+}
+var button = "";
+var Button = defineComponent({
+  name: "DButton",
+  directives: {
+    dLoading: loadingDirective
+  },
+  props: buttonProps,
+  emits: ["click"],
+  setup(props, ctx) {
+    const {
+      icon: icon2,
+      disabled,
+      loading: loading2
+    } = toRefs(props);
+    const {
+      classes,
+      iconClass
+    } = useButton(props, ctx);
+    const onClick = (e) => {
+      if (loading2.value) {
+        return;
+      }
+      ctx.emit("click", e);
+    };
+    return () => {
+      var _a, _b;
+      return withDirectives(createVNode("button", {
+        "class": classes.value,
+        "disabled": disabled.value,
+        "onClick": onClick
+      }, [icon2.value && createVNode(Icon, {
+        "name": icon2.value,
+        "size": "var(--devui-font-size, 12px)",
+        "color": "",
+        "class": iconClass.value
+      }, null), createVNode("span", {
+        "class": "button-content"
+      }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)])]), [[resolveDirective("dLoading"), loading2.value]]);
+    };
+  }
+});
+var buttonGroup = "";
+defineComponent({
+  name: "DButtonGroup",
+  props: buttonGroupProps,
+  setup(props, {
+    slots
+  }) {
+    const ns2 = useNamespace("button-group");
+    provide(buttonGroupInjectionKey, {
+      size: toRef(props, "size")
+    });
+    return () => {
+      return createVNode("div", {
+        "class": ns2.b()
+      }, [slots.default && slots.default()]);
+    };
+  }
+});
+var index$1 = "";
+const camelize = (name) => name.substring(1).replace(/^\S/, (s) => s.toLocaleLowerCase());
+function get(object4, path) {
+  const keys = path.split(".");
+  let result = object4;
+  keys.forEach((key) => {
+    var _a;
+    result = (_a = result[key]) != null ? _a : "";
+  });
+  return result;
+}
+function createI18nTranslate(name, app, newPrefix) {
+  const prefix = newPrefix || camelize(name) + ".";
+  return (path) => {
+    const messages2 = app == null ? void 0 : app.appContext.config.globalProperties.langMessages.value;
+    const message = get(messages2, prefix + path) || get(messages2, path);
+    return message;
+  };
+}
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+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: ["submitData", "change"],
+  setup(props, ctx) {
+    const app = getCurrentInstance();
+    const t = createI18nTranslate("DTimePopup", app);
+    const ns2 = useNamespace("time-popup");
+    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);
+      timeListDom.value.setOuterTime(props.bindData);
+    });
+    watch(() => [props.showPopup, props.bindData], ([showPopup, newTimeVal], [, oldTimeVal]) => {
+      if (showPopup || newTimeVal !== oldTimeVal) {
+        timeListDom.value.setOuterTime(newTimeVal);
+      } else {
+        timeListDom.value.resetScrollTop();
+      }
+    });
+    const changTimeData = () => {
+      return timeListDom.value.getNewTime();
+    };
+    const changeData = (value) => {
+      ctx.emit("change", value);
+    };
+    const subDataFun = (e) => {
+      e.stopPropagation();
+      ctx.emit("submitData");
+    };
+    ctx.expose({
+      changTimeData
+    });
+    return () => {
+      var _a, _b;
+      let _slot;
+      return createVNode(Fragment, null, [createVNode("div", {
+        "ref": popupDome,
+        "class": ns2.b(),
+        "style": {
+          width: props.popupWidth + "px"
+        }
+      }, [createVNode(TimeList, {
+        "ref": timeListDom,
+        "hourList": hourList,
+        "minuteList": minuteList,
+        "secondList": secondList,
+        "minTime": props.minTime,
+        "maxTime": props.maxTime,
+        "format": props.popupFormat,
+        "onChange": changeData
+      }, null), createVNode("div", {
+        "class": ns2.m("btn")
+      }, [createVNode("div", {
+        "class": "popup-slots"
+      }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)]), createVNode("div", {
+        "onClick": subDataFun
+      }, [createVNode(Button, {
+        "variant": "solid",
+        "color": "secondary",
+        "size": "sm"
+      }, _isSlot(_slot = t("ok")) ? _slot : {
+        default: () => [_slot]
+      })])])])]);
+    };
+  }
+});
+const inputProps = {
+  modelValue: {
+    type: String,
+    default: ""
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  error: {
+    type: Boolean,
+    default: false
+  },
+  size: {
+    type: String
+  },
+  validateEvent: {
+    type: Boolean,
+    default: true
+  },
+  prefix: {
+    type: String,
+    default: ""
+  },
+  suffix: {
+    type: String,
+    default: ""
+  },
+  showPassword: {
+    type: Boolean,
+    default: false
+  },
+  clearable: {
+    type: Boolean,
+    default: false
+  },
+  placeholder: {
+    type: String,
+    default: ""
+  }
+};
+const formItemProps = {
+  label: {
+    type: String
+  },
+  field: {
+    type: String,
+    default: ""
+  },
+  required: {
+    type: Boolean,
+    default: false
+  },
+  messageType: {
+    type: String
+  },
+  popPosition: {
+    type: Array
+  },
+  rules: {
+    type: [Object, Array]
+  },
+  showFeedback: {
+    type: Boolean,
+    default: void 0
+  },
+  helpTips: {
+    type: String,
+    default: ""
+  },
+  feedbackStatus: {
+    type: String
+  },
+  extraInfo: {
+    type: String,
+    default: ""
+  }
+};
+const FORM_ITEM_TOKEN = Symbol("dFormItem");
+const LABEL_DATA = Symbol("labelData");
+const formProps = {
+  data: {
+    type: Object,
+    default: () => ({})
+  },
+  layout: {
+    type: String,
+    default: "horizontal"
+  },
+  labelSize: {
+    type: String,
+    default: "md"
+  },
+  labelAlign: {
+    type: String,
+    default: "start"
+  },
+  rules: {
+    type: Object
+  },
+  messageType: {
+    type: String,
+    default: "popover"
+  },
+  popPosition: {
+    type: Array,
+    default: ["right", "bottom"]
+  },
+  validateOnRuleChange: {
+    type: Boolean,
+    default: false
+  },
+  showFeedback: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  size: {
+    type: String
+  }
+};
+const FORM_TOKEN = Symbol("dForm");
+function useFieldCollection() {
+  const itemContexts = [];
+  const addItemContext = (field) => {
+    itemContexts.push(field);
+  };
+  const removeItemContext = (field) => {
+    itemContexts.splice(itemContexts.indexOf(field), 1);
+  };
+  return { itemContexts, addItemContext, removeItemContext };
+}
 function useFormValidation(itemContexts) {
   const getValidateFields = (fields) => {
     if (!itemContexts.length) {
@@ -7855,7 +8808,7 @@ var Schema = /* @__PURE__ */ function() {
       complete(results);
     }, source);
   };
-  _proto.getType = function getType(rule) {
+  _proto.getType = function getType2(rule) {
     if (rule.type === void 0 && rule.pattern instanceof RegExp) {
       rule.type = "pattern";
     }
@@ -8177,6 +9130,7 @@ function useInputEvent(isFocus, props, ctx, focus) {
     }
   };
   const onInput = (e) => {
+    ctx.emit("input", e.target.value);
     ctx.emit("update:modelValue", e.target.value);
   };
   const onChange = (e) => {
@@ -8209,12 +9163,14 @@ function useInputFunction(input2) {
   return { select, focus, blur };
 }
 var input = "";
-var Input = defineComponent({
+var DInput = defineComponent({
   name: "DInput",
   inheritAttrs: false,
   props: inputProps,
   emits: ["update:modelValue", "focus", "blur", "input", "change", "keydown", "clear"],
   setup(props, ctx) {
+    const app = getCurrentInstance();
+    const t = createI18nTranslate("DInput", app);
     const formItemContext = inject(FORM_ITEM_TOKEN, void 0);
     const {
       modelValue
@@ -8280,7 +9236,8 @@ var Input = defineComponent({
         "ref": input2,
         "value": modelValue.value,
         "disabled": inputDisabled.value,
-        "class": ns2.e("inner")
+        "class": ns2.e("inner"),
+        "placeholder": props.placeholder || t("placeholder")
       }, otherAttrs, {
         "type": props.showPassword ? passwordVisible.value ? "text" : "password" : "text",
         "onInput": onInput,
@@ -8309,742 +9266,118 @@ var Input = defineComponent({
     };
   }
 });
-var iconGroup = "";
-defineComponent({
-  name: "DIconGroup",
-  setup(_, ctx) {
-    const ns2 = useNamespace("icon-group");
-    return () => {
-      var _a, _b;
-      return createVNode("div", {
-        "class": ns2.b()
-      }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)]);
-    };
-  }
-});
-const handleCalendarSwitchState = (state, index2, pos, date4) => {
-  switch (index2) {
-    case 0:
-      const preYear = new Date(date4);
-      preYear.setFullYear(preYear.getFullYear() - 1);
-      pos === 0 ? state.current = preYear : state.next = preYear;
-      break;
-    case 1:
-      const preMonth = new Date(date4);
-      preMonth.setMonth(preMonth.getMonth() - 1);
-      pos === 0 ? state.current = preMonth : state.next = preMonth;
-      break;
-    case 2:
-      const nextMonth = new Date(date4);
-      nextMonth.setMonth(nextMonth.getMonth() + 1);
-      pos === 0 ? state.current = nextMonth : state.next = nextMonth;
-      break;
-    case 3:
-      const nextYear = new Date(date4);
-      nextYear.setFullYear(nextYear.getFullYear() + 1);
-      pos === 0 ? state.current = nextYear : state.next = nextYear;
-      break;
-  }
-};
-const formatValue = (state, props) => {
-  const { format: format2 = "y/MM/dd", range: range3, rangeSpliter = "-" } = props || {};
-  if (range3) {
-    if (!state.start) {
-      return "";
-    } else if (!state.end) {
-      return formatDate(format2, state.start);
-    }
-    if (state.end < state.start) {
-      const end = state.end;
-      state.end = state.start;
-      state.start = end;
-    }
-    return formatRange$1(format2, state.start, state.end, rangeSpliter);
-  } else {
-    if (!state.start) {
-      return "";
-    }
-    return formatDate(format2, state.start);
-  }
-};
-const formatPlaceholder = (props) => {
-  if (!props) {
-    return "";
-  }
-  const format2 = props.format || `y/MM/dd`;
-  const sp = props.rangeSpliter || "-";
-  return props.range ? `${format2} ${sp} ${format2}` : format2;
-};
-const getDateKey = (date4) => {
-  return date4.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 range3 = innerEnd > props.dateStart ? [props.dateStart, innerEnd] : [innerEnd, props.dateStart];
-        if (day.date > range3[0] && day.date < range3[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: date4,
-    pos
-  } = props;
-  const color = disabled ? "#cfd0d3" : "#585d6b";
-  const className = `${disabled ? "disabled" : ""}`;
-  const handleClick = disabled ? void 0 : () => invokeCallback(props.cb, date4, pos);
-  return createVNode("a", {
-    "class": className,
-    "onClick": handleClick
-  }, [createVNode(Btn, {
-    "color": color,
-    "rotate": rotate
-  }, null)]);
-};
-const Title = (props) => {
-  const {
-    date: date4
-  } = props;
-  return createVNode("a", {
-    "class": "title"
-  }, [`${date4.getFullYear()}\u5E74${(date4.getMonth() + 1 + "").padStart(2, "0")}\u6708`]);
-};
-const CalendarToolbar = (props) => {
-  const {
-    type: type4,
-    current,
-    compare,
-    pos,
-    dateMax,
-    dateMin,
-    onPreviousYear,
-    onPreviousMonth,
-    onNextMonth,
-    onNextYear
-  } = props;
-  const dis = [false, false, false, false];
-  if (type4 === "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
-    }
+var timePicker = "";
+var TimePicker = defineComponent({
+  name: "DTimePicker",
+  components: {
+    TimePopup,
+    DInput
   },
-  setup(props) {
+  props: timePickerProps,
+  emits: ["change", "update:modelValue"],
+  setup(props, ctx) {
+    const ns2 = useNamespace("time-picker");
+    const activeHour = ref("00");
+    const activeMinute = ref("00");
+    const activeSecond = ref("00");
+    const format2 = props.format.toLowerCase();
     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);
-      }
+      showPopup,
+      trueTimeValue,
+      devuiTimePicker,
+      inputDom,
+      overlayRef,
+      showClearIcon,
+      firsthandActiveTime,
+      chooseTime,
+      clickVerifyFun,
+      isOutOpen,
+      clearAll,
+      timePopupDom,
+      vModeValue,
+      changeTimeData
+    } = useTimePicker(activeHour, activeMinute, activeSecond, format2, props);
+    const selectedTimeChange = () => {
+      showPopup.value = false;
+      ctx.emit("change", trueTimeValue.value);
     };
     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
+      isOutOpen();
     });
-    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;
+    watch(trueTimeValue, (newValue) => {
+      ctx.emit("update:modelValue", trueTimeValue.value);
+      if (newValue !== props.minTime && newValue !== "00:00") {
+        showClearIcon.value = true;
+      } else {
+        showClearIcon.value = false;
       }
-      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": (date4) => {
-          state.end = state.hover = void 0;
-          state.start = date4;
-        },
-        "onChange": () => {
-          state.value = formatValue(state, props);
-          state.placeholder = formatPlaceholder(props);
-          invokeFunction(props.selectedDateChange, state.value);
-          if (props.autoClose) {
-            state.show = false;
-          }
-        },
-        "onToday": (date4) => {
-          state.current = date4;
-          state.start = date4;
-          state.value = formatValue(state, props);
-          state.placeholder = formatPlaceholder(props);
-          invokeFunction(props.selectedDateChange, state.value);
-          if (props.autoClose) {
-            state.show = false;
-          }
-        },
-        "onSelected": (date4) => {
-          state.start = date4;
-          if (compareDateSort(state.current, date4) !== 0) {
-            state.current = date4;
-          }
-        },
-        "onSelectStart": (date4) => state.start = date4,
-        "onSelectEnd": (date4) => {
-          state.end = date4;
-          formatRange(state);
-        },
-        "onSelecting": (date4) => state.hover = date4,
-        "onPreviousYear": (date4, pos) => handleCalendarSwitchState(state, 0, pos, date4),
-        "onPreviousMonth": (date4, pos) => handleCalendarSwitchState(state, 1, pos, date4),
-        "onNextMonth": (date4, pos) => handleCalendarSwitchState(state, 2, pos, date4),
-        "onNextYear": (date4, pos) => handleCalendarSwitchState(state, 3, pos, date4)
-      }, null) : null])]);
-    };
-  }
-});
-var index$1 = "";
-const StickSlider = defineComponent({
-  name: "DStickSlider",
-  props: {},
-  setup() {
-    const state = reactive({
-      showButtons: false,
-      selectedIndex: 0
+    ctx.expose({
+      clearAll,
+      chooseTime
     });
-    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
+        "class": ns2.b(),
+        "ref": devuiTimePicker
       }, [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)]);
+        "ref": inputDom
+      }, [createVNode(DInput, {
+        "modelValue": vModeValue.value,
+        "placeholder": props.placeholder,
+        "disabled": props.disabled,
+        "readonly": props.readonly,
+        "size": props.size,
+        "onFocus": clickVerifyFun
+      }, {
+        suffix: () => createVNode("span", {
+          "class": "time-input-icon"
+        }, [createVNode("span", {
+          "onClick": clearAll,
+          "class": "clear-button"
+        }, [showClearIcon.value ? createVNode(Icon, {
+          "size": "small",
+          "name": "close"
+        }, null) : ""]), createVNode(Icon, {
+          "size": "small",
+          "name": "time"
+        }, null)])
+      })]), createVNode(Transition, {
+        "name": "fade"
+      }, {
+        default: () => [createVNode(FlexibleOverlay, {
+          "modelValue": showPopup.value,
+          "onUpdate:modelValue": ($event) => showPopup.value = $event,
+          "ref": overlayRef,
+          "origin": inputDom.value
+        }, {
+          default: () => [createVNode(TimePopup, {
+            "ref": timePopupDom,
+            "showPopup": showPopup.value,
+            "popupWidth": props.timePickerWidth,
+            "popupFormat": props.format.toLowerCase(),
+            "minTime": props.minTime,
+            "maxTime": props.maxTime,
+            "bindData": firsthandActiveTime.value,
+            "onSubmitData": selectedTimeChange,
+            "onChange": changeTimeData
+          }, {
+            default: () => {
+              var _a, _b;
+              return [(_b = (_a = ctx.slots).customViewTemplate) == null ? void 0 : _b.call(_a)];
+            }
+          })]
+        })]
+      })]);
     };
   }
 });
-DatePicker.install = function(app) {
-  app.component(DatePicker.name, DatePicker);
-  app.component(StickSlider.name, StickSlider);
-};
 var index = {
-  title: "DatePicker \u65E5\u671F\u9009\u62E9\u5668",
+  title: "TimePicker \u65F6\u95F4\u9009\u62E9\u5668",
   category: "\u6570\u636E\u5F55\u5165",
-  status: "50%",
+  status: "100%",
   install(app) {
-    app.use(DatePicker);
+    app.component(TimePicker.name, TimePicker);
   }
 };
-export { DatePicker, StickSlider, index as default };
+export { TimePicker, index as default };