vue-devui 1.0.0-rc.2 → 1.0.0-rc.5

package/date-picker/index.es.js

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