vue-devui 1.0.0-rc.7 → 1.0.0

package/date-picker/index.es.js

@@ -1,1145 +0,0 @@
-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
-  }
-};
-const FORM_ITEM_TOKEN = Symbol("dFormItem");
-var 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 formItemContext = inject(FORM_ITEM_TOKEN);
-    const sizeCls = computed(() => `devui-input-${props.size}`);
-    const showPwdIcon = ref(false);
-    const inputType = ref("text");
-    const isValidateError = computed(() => (formItemContext == null ? void 0 : formItemContext.validateState) === "error");
-    const inputCls = computed(() => ({
-      "devui-error": props.error || isValidateError.value,
-      [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
-    });
-    watch(() => props.modelValue, () => {
-      formItemContext == null ? void 0 : formItemContext.validate("change").catch((err) => console.warn(err));
-    });
-    const onInput = ($event) => {
-      ctx.emit("update:modelValue", $event.target.value);
-    }, onFocus = () => {
-      ctx.emit("focus");
-    }, onBlur = () => {
-      ctx.emit("blur");
-      formItemContext == null ? void 0 : formItemContext.validate("blur").catch((err) => console.warn(err));
-    }, onChange = ($event) => {
-      ctx.emit("change", $event.target.value);
-    }, 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 };