@opentiny/vue-renderless 3.9.2 → 3.10.0

package/tag-group/index.js

@@ -1,24 +1,37 @@
-import "../chunk-PKUHTIDK.js";
+import {
+  __spreadValues
+} from "../chunk-PKUHTIDK.js";
+const handelItemClick = ({ emit }) => (item, index, $event) => {
+  emit("item-click", item, index, $event);
+};
 const getHiddenTags = ({ props, vm, state }) => () => {
   if (!props.data.length)
     return;
   const tagGroup = vm.$refs.tagGroup || {};
   const tags = tagGroup.children;
   const moreDom = vm.$refs.more || {};
-  const height = tags[0] && tags[0].getBoundingClientRect().height + "px";
-  tagGroup.style && (tagGroup.style.height = height);
-  moreDom.style && (moreDom.style.height = height);
+  const extrasHeightMap = {
+    mini: 4,
+    small: 2,
+    medium: 0
+  };
+  const height = tags[0] && tags[0].getBoundingClientRect().height + extrasHeightMap[props.size] + "px";
+  if (tagGroup.style) {
+    tagGroup.style.height = height;
+  }
+  if (moreDom.style) {
+    moreDom.style.height = height;
+  }
   state.hiddenTags = [];
   Array.from(tags).forEach((el, index) => {
-    if (el.offsetTop > 0) {
-      state.hiddenTags.push({
-        name: el.innerText,
-        type: props.data[index] && props.data[index].type
-      });
+    const item = props.data[index];
+    if (el.offsetTop >= el.offsetHeight && item) {
+      state.hiddenTags.push(__spreadValues({}, item));
     }
   });
   state.showMore = !!state.hiddenTags.length;
 };
 export {
-  getHiddenTags
+  getHiddenTags,
+  handelItemClick
 };

package/tag-group/vue.js

@@ -1,9 +1,9 @@
 import "../chunk-PKUHTIDK.js";
 import { addResizeListener, removeResizeListener } from "../common/deps/resize-event";
 import debounce from "../common/deps/debounce";
-import { getHiddenTags } from "./index";
-const api = ["state"];
-const renderless = (props, { onMounted, onBeforeUnmount, reactive }, { vm }) => {
+import { getHiddenTags, handelItemClick } from "./index";
+const api = ["state", "handelItemClick"];
+const renderless = (props, { onMounted, onBeforeUnmount, reactive }, { vm, emit }) => {
   const delay = 100;
   const state = reactive({
     showMore: false,
@@ -11,7 +11,8 @@ const renderless = (props, { onMounted, onBeforeUnmount, reactive }, { vm }) =>
   });
   const api2 = {
     state,
-    getHiddenTags: getHiddenTags({ props, vm, state })
+    getHiddenTags: getHiddenTags({ props, vm, state }),
+    handelItemClick: handelItemClick({ emit })
   };
   onMounted(() => {
     api2.getHiddenTags();

package/time/index.js

@@ -5,7 +5,7 @@ const watchValue = ({ api, nextTick, state }) => (value) => {
   if (value instanceof Date) {
     date = limitTimeRange(value, state.selectableRange, state.format);
   } else if (!value) {
-    date = state.defaultValue ? new Date(state.defaultValue) : /* @__PURE__ */ new Date();
+    date = state.defaultValue ? new Date(state.defaultValue) : new Date();
   }
   state.date = date;
   if (state.visible && state.needInitAdjust) {
@@ -13,10 +13,10 @@ const watchValue = ({ api, nextTick, state }) => (value) => {
     state.needInitAdjust = false;
   }
 };
-const watchVisible = ({ nextTick, refs, state }) => (value) => {
+const watchVisible = ({ nextTick, vm, state }) => (value) => {
   if (value) {
     state.oldValue = state.value;
-    nextTick(() => refs.spinner.emitSelectRange("hours"));
+    nextTick(() => vm.$refs.spinner.emitSelectRange("hours"));
   } else {
     state.needInitAdjust = true;
   }
@@ -43,7 +43,7 @@ const handleConfirm = ({ state, emit }) => (visible = false, first = null) => {
   const date = clearMilliseconds(limitTimeRange(state.date, state.selectableRange, state.format));
   emit("pick", date, visible, first);
 };
-const handleKeydown = ({ api, refs }) => (event) => {
+const handleKeydown = ({ api, vm }) => (event) => {
   const mapping = { 38: -1, 40: 1, 37: -1, 39: 1 };
   const keyCode = event.keyCode;
   if (keyCode === 37 || keyCode === 39) {
@@ -54,18 +54,18 @@ const handleKeydown = ({ api, refs }) => (event) => {
   }
   if (keyCode === 38 || keyCode === 40) {
     const key = mapping[keyCode];
-    refs.spinner.scrollDown(key);
+    vm.$refs.spinner.scrollDown(key);
     event.preventDefault();
   }
 };
 const isValidValue = ({ state }) => (date) => timeWithinRange(date, state.selectableRange, state.format);
-const adjustSpinners = (refs) => () => refs.spinner.adjustSpinners();
-const changeSelectionRange = ({ refs, state }) => (step) => {
+const adjustSpinners = (vm) => () => vm.$refs.spinner.adjustSpinners();
+const changeSelectionRange = ({ vm, state }) => (step) => {
   const list = [0, 3].concat(state.showSeconds ? [6] : []);
   const mapping = ["hours", "minutes"].concat(state.showSeconds ? ["seconds"] : []);
   const index = list.indexOf(state.selectionRange[0]);
   const next = (index + step + list.length) % list.length;
-  refs.spinner.emitSelectRange(mapping[next]);
+  vm.$refs.spinner.emitSelectRange(mapping[next]);
 };
 export {
   adjustSpinners,

package/time/vue.js

@@ -20,8 +20,8 @@ const initState = ({ reactive, props, computed, api: api2 }) => {
     format: "HH:mm:ss",
     value: "",
     defaultValue: null,
-    date: props.value || /* @__PURE__ */ new Date(),
-    oldValue: /* @__PURE__ */ new Date(),
+    date: props.value || new Date(),
+    oldValue: new Date(),
     selectableRange: [],
     selectionRange: [0, 2],
     disabled: false,
@@ -34,7 +34,7 @@ const initState = ({ reactive, props, computed, api: api2 }) => {
   });
   return state;
 };
-const renderless = (props, { computed, onMounted, reactive, watch, nextTick }, { t, emit: $emit, refs }) => {
+const renderless = (props, { computed, onMounted, reactive, watch, nextTick }, { t, emit: $emit, vm }) => {
   const api2 = {};
   const emit = props.emitter ? props.emitter.emit : $emit;
   const state = initState({ reactive, props, computed, api: api2 });
@@ -42,14 +42,14 @@ const renderless = (props, { computed, onMounted, reactive, watch, nextTick }, {
     t,
     state,
     compuAmPmMode: compuAmPmMode(state),
-    adjustSpinners: adjustSpinners(refs),
+    adjustSpinners: adjustSpinners(vm),
     handleCancel: handleCancel({ state, emit }),
     setSelectionRange: setSelectionRange({ state, emit }),
-    watchVisible: watchVisible({ nextTick, refs, state }),
+    watchVisible: watchVisible({ nextTick, vm, state }),
     isValidValue: isValidValue({ state }),
-    changeSelectionRange: changeSelectionRange({ refs, state }),
+    changeSelectionRange: changeSelectionRange({ vm, state }),
     handleConfirm: handleConfirm({ state, emit }),
-    handleKeydown: handleKeydown({ api: api2, refs }),
+    handleKeydown: handleKeydown({ api: api2, vm }),
     handleChange: handleChange({ api: api2, emit, state }),
     watchValue: watchValue({ api: api2, emit, nextTick, state })
   });
@@ -63,11 +63,11 @@ const renderless = (props, { computed, onMounted, reactive, watch, nextTick }, {
   );
   watch(
     () => state.selectableRange,
-    (value) => refs.spinner.state.selectableRange = value
+    (value) => vm.$refs.spinner.state.selectableRange = value
   );
   watch(
     () => state.defaultValue,
-    (value) => !isDate(state.value) && (state.date = value ? new Date(value) : /* @__PURE__ */ new Date())
+    (value) => !isDate(state.value) && (state.date = value ? new Date(value) : new Date())
   );
   onMounted(() => {
     api2.handleConfirm(true, true);

package/time-line/index.js

@@ -1,4 +1,7 @@
-import "../chunk-PKUHTIDK.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "../chunk-PKUHTIDK.js";
 import { format } from "../common/date";
 const getDate = (dateTime) => ({
   date: format(dateTime, "yyyy-MM-dd"),
@@ -35,7 +38,12 @@ const getStatusCls = ({ constants, state }) => (index, node) => {
   }
   return cls;
 };
-const computedData = ({ props, state }) => () => state.isReverse ? props.data.map((item, i) => props.data[props.data.length - 1 - i]) : props.data;
+const computedData = ({ props, state }) => () => {
+  if (props.data) {
+    return state.isReverse ? props.data.map((item, i) => __spreadProps(__spreadValues({}, props.data[props.data.length - 1 - i]), { index: i })) : props.data.map((item, i) => __spreadProps(__spreadValues({}, item), { index: i }));
+  }
+  return state.timelineItems;
+};
 const computedCurrent = ({ props, state }) => () => state.isReverse ? state.nodes.length - props.active - 1 : props.active;
 const computedIsReverse = (props) => () => props.reverse && props.vertical;
 const computedStackNodes = ({ state, constants }) => () => {
@@ -49,6 +57,19 @@ const changeStatus = ({ state }) => () => {
   state.showAll = !state.showAll;
   return state.showAll;
 };
+const computedWrapperClass = ({ props }) => () => {
+  const { vertical, reverse, textPosition, showDivider } = props;
+  const wrapperClass = [];
+  if (vertical) {
+    wrapperClass.push("tiny-steps-timeline", { reverse });
+  } else {
+    wrapperClass.push("tiny-steps-normal", textPosition === "right" ? "text-right" : "text-bottom");
+  }
+  if (showDivider && textPosition === "right") {
+    wrapperClass.push("show-divider");
+  }
+  return wrapperClass;
+};
 export {
   changeStatus,
   computedCurrent,
@@ -56,6 +77,7 @@ export {
   computedIsReverse,
   computedSpace,
   computedStackNodes,
+  computedWrapperClass,
   getDate,
   getStatus,
   getStatusCls,

package/time-line/vue.js

@@ -1,16 +1,30 @@
 import "../chunk-PKUHTIDK.js";
-import { handleClick, getStatusCls, getStatus, computedData, getDate, computedCurrent, computedIsReverse, changeStatus, computedStackNodes, computedSpace } from "./index";
+import {
+  handleClick,
+  getStatusCls,
+  getStatus,
+  computedData,
+  getDate,
+  computedCurrent,
+  computedIsReverse,
+  changeStatus,
+  computedStackNodes,
+  computedSpace,
+  computedWrapperClass
+} from "./index";
 const api = ["state", "handleClick", "getStatusCls", "getStatus", "getDate", "changeStatus"];
-const renderless = (props, { computed, reactive }, { t, emit, constants }) => {
+const renderless = (props, { computed, reactive, provide, watch }, { t, emit, constants }) => {
   const api2 = {};
   const state = reactive({
     nodes: computed(() => api2.computedData()),
+    timelineItems: [],
     current: computed(() => api2.computedCurrent()),
     isReverse: computed(() => api2.computedIsReverse()),
     stackNodes: computed(() => state.showAll ? state.nodes : api2.computedStackNodes()),
     computedSpace: computed(() => computedSpace({ props })),
     showData: false,
-    showAll: false
+    showAll: false,
+    computedWrapperClass: computed(() => api2.computedWrapperClass())
   });
   Object.assign(api2, {
     state,
@@ -22,8 +36,20 @@ const renderless = (props, { computed, reactive }, { t, emit, constants }) => {
     handleClick: handleClick({ emit, state, api: api2 }),
     getStatusCls: getStatusCls({ constants, props, state }),
     computedStackNodes: computedStackNodes({ state, constants }),
-    changeStatus: changeStatus({ state })
+    changeStatus: changeStatus({ state }),
+    computedWrapperClass: computedWrapperClass({ props })
   });
+  provide("nodesInject", { timelineItems: state.timelineItems, nodes: state.nodes, props });
+  watch(
+    () => state.timelineItems,
+    (newVal) => {
+      newVal.forEach((item, i) => item.index = i);
+    },
+    {
+      immediate: true,
+      deep: true
+    }
+  );
   return api2;
 };
 export {

package/time-panel/index.js

@@ -74,8 +74,8 @@ const handleClear = ({ api, state }) => () => {
   state.defaultTime = "";
   api.emitPick();
 };
-const scrollToOption = ({ refs }) => (selector = DATEPICKER.selClass) => {
-  const menu = refs.popper.querySelector(DATEPICKER.queryClass);
+const scrollToOption = ({ vm }) => (selector = DATEPICKER.selClass) => {
+  const menu = vm.$refs.popper.querySelector(DATEPICKER.queryClass);
   scrollIntoView(menu, menu.querySelector(selector));
 };
 const handleMenuEnter = ({ api, nextTick, state }) => () => {

package/time-panel/vue.js

@@ -45,7 +45,7 @@ const initState = ({ reactive, computed, api: api2 }) => {
   });
   return state;
 };
-const renderless = (props, { computed, reactive, watch, nextTick }, { refs, emit: $emit }) => {
+const renderless = (props, { computed, reactive, watch, nextTick }, { vm, emit: $emit }) => {
   const api2 = {};
   const emit = props.emitter ? props.emitter.emit : $emit;
   const state = initState({ reactive, computed, api: api2 });
@@ -54,7 +54,7 @@ const renderless = (props, { computed, reactive, watch, nextTick }, { refs, emit
     parseTime: parseTime(),
     formatTime: formatTime(),
     isValidValue: isValidValue(state),
-    scrollToOption: scrollToOption({ refs }),
+    scrollToOption: scrollToOption({ vm }),
     emitPick: emitPick({ emit, state }),
     emitDestroy: emitDestroy(emit),
     nextTime: nextTime(api2),

package/time-range/index.js

@@ -17,12 +17,12 @@ const watchValue = ({ api, state }) => (value) => {
     if (value[0]) {
       state.minDate = new Date(value[0]);
     } else {
-      state.minDate = value[1] ? new Date(api.minTimeOfDay(new Date(value[1])).getTime()) : /* @__PURE__ */ new Date();
+      state.minDate = value[1] ? new Date(api.minTimeOfDay(new Date(value[1])).getTime()) : new Date();
     }
     if (value[1]) {
       state.maxDate = new Date(value[1]);
     } else {
-      state.maxDate = value[0] ? api.advanceTime(new Date(value[0]), 60 * 60 * 1e3) : api.advanceTime(/* @__PURE__ */ new Date(), 60 * 60 * 1e3);
+      state.maxDate = value[0] ? api.advanceTime(new Date(value[0]), 60 * 60 * 1e3) : api.advanceTime(new Date(), 60 * 60 * 1e3);
     }
   } else {
     if (Array.isArray(state.defaultValue)) {
@@ -32,14 +32,16 @@ const watchValue = ({ api, state }) => (value) => {
       state.minDate = new Date(state.defaultValue);
       state.maxDate = api.advanceTime(new Date(state.defaultValue), 60 * 60 * 1e3);
     } else {
-      state.minDate = /* @__PURE__ */ new Date();
-      state.maxDate = api.advanceTime(/* @__PURE__ */ new Date(), 60 * 60 * 1e3);
+      state.minDate = new Date();
+      state.maxDate = api.advanceTime(new Date(), 60 * 60 * 1e3);
     }
   }
 };
-const adjustSpinners = (refs) => {
-  refs.minSpinner.adjustSpinners();
-  refs.maxSpinner.adjustSpinners();
+const adjustSpinners = ({ vm }) => () => {
+  if (vm.$refs.minSpinner) {
+    vm.$refs.minSpinner.adjustSpinners();
+    vm.$refs.maxSpinner.adjustSpinners();
+  }
 };
 const setMaxMinData = (state) => {
   if (Array.isArray(state.oldValue)) {
@@ -47,21 +49,21 @@ const setMaxMinData = (state) => {
     state.oldValue[1] && (state.maxDate = clearMilliseconds(state.oldValue[1]));
   }
 };
-const watchVisible = ({ nextTick, refs, state }) => (value) => {
+const watchVisible = ({ nextTick, api, state }) => (value) => {
   if (value) {
     state.oldValue = state.value;
     nextTick(() => {
       setMaxMinData(state);
-      adjustSpinners(refs);
+      api.adjustSpinners();
     });
   }
 };
 const handleClear = (emit) => () => emit("pick", null);
-const handleCancel = ({ emit, refs, state }) => () => {
+const handleCancel = ({ emit, api, state }) => () => {
   state.visible = false;
   emit("pick", state.oldValue);
   setMaxMinData(state);
-  adjustSpinners(refs);
+  api.adjustSpinners();
 };
 const handleMinChange = ({ api, state }) => (date) => {
   state.minDate = clearMilliseconds(date);
@@ -71,10 +73,10 @@ const handleMaxChange = ({ api, state }) => (date) => {
   state.maxDate = clearMilliseconds(date);
   api.handleChange();
 };
-const handleChange = ({ api, emit, refs, state }) => () => {
+const handleChange = ({ api, emit, vm, state }) => () => {
   if (api.isValidValue([state.minDate, state.maxDate])) {
-    refs.minSpinner.state.selectableRange = [[api.minTimeOfDay(state.minDate), state.maxDate]];
-    refs.maxSpinner.state.selectableRange = [[state.minDate, api.maxTimeOfDay(state.maxDate)]];
+    vm.$refs.minSpinner.state.selectableRange = [[api.minTimeOfDay(state.minDate), state.maxDate]];
+    vm.$refs.maxSpinner.state.selectableRange = [[state.minDate, api.maxTimeOfDay(state.maxDate)]];
     emit("pick", [state.minDate, state.maxDate], state.visible);
   }
 };
@@ -86,26 +88,26 @@ const setMaxSelectionRange = ({ emit, state }) => (start, end) => {
   emit("select-range", start, end, "max");
   state.selectionRange = [start + state.offset, end + state.offset];
 };
-const handleConfirm = ({ emit, refs, state }) => (visible = false) => {
-  const minSelectableRange = refs.minSpinner.state.selectableRange;
-  const maxSelectableRange = refs.maxSpinner.state.selectableRange;
+const handleConfirm = ({ emit, vm, state }) => (visible = false) => {
+  const minSelectableRange = vm.$refs.minSpinner.state.selectableRange;
+  const maxSelectableRange = vm.$refs.maxSpinner.state.selectableRange;
   state.minDate = limitTimeRange(state.minDate, minSelectableRange, state.format);
   state.maxDate = limitTimeRange(state.maxDate, maxSelectableRange, state.format);
   emit("pick", [state.minDate, state.maxDate], visible);
 };
-const changeSelectionRange = ({ refs, state }) => (step) => {
+const changeSelectionRange = ({ vm, state }) => (step) => {
   const list = state.showSeconds ? [0, 3, 6, 11, 14, 17] : [0, 3, 8, 11];
   const mapping = ["hours", "minutes"].concat(state.showSeconds ? ["seconds"] : []);
   const index = list.indexOf(state.selectionRange[0]);
   const next = (index + step + list.length) % list.length;
   const half = list.length / 2;
   if (next < half) {
-    refs.minSpinner.emitSelectRange(mapping[next]);
+    vm.$refs.minSpinner.emitSelectRange(mapping[next]);
   } else {
-    refs.maxSpinner.emitSelectRange(mapping[next - half]);
+    vm.$refs.maxSpinner.emitSelectRange(mapping[next - half]);
   }
 };
-const isValidValue = ({ refs, state }) => (date) => Array.isArray(date) && timeWithinRange(state.minDate, refs.minSpinner.state.selectableRange) && timeWithinRange(state.maxDate, refs.maxSpinner.state.selectableRange);
+const isValidValue = ({ vm, state }) => (date) => Array.isArray(date) && timeWithinRange(state.minDate, vm.$refs.minSpinner.state.selectableRange) && timeWithinRange(state.maxDate, vm.$refs.maxSpinner.state.selectableRange);
 const handleKeydown = ({ api, state }) => (event) => {
   const keyCode = event.keyCode;
   const mapping = { 38: -1, 40: 1, 37: -1, 39: 1 };
@@ -122,6 +124,7 @@ const handleKeydown = ({ api, state }) => (event) => {
   }
 };
 export {
+  adjustSpinners,
   advanceTime,
   changeSelectionRange,
   compuAmPmMode,

package/time-range/vue.js

@@ -16,36 +16,45 @@ import {
   minTimeOfDay,
   maxTimeOfDay,
   advanceTime,
-  compuAmPmMode
+  compuAmPmMode,
+  adjustSpinners
 } from "./index";
 import { parseDate } from "../common/deps/date-util";
-const api = ["state", "handleMinChange", "handleConfirm", "setMinSelectionRange", "handleCancel", "setMaxSelectionRange", "handleMaxChange"];
-const initState = ({ reactive, computed, refs, api: api2 }) => {
+const api = [
+  "state",
+  "handleMinChange",
+  "handleConfirm",
+  "setMinSelectionRange",
+  "handleCancel",
+  "setMaxSelectionRange",
+  "handleMaxChange"
+];
+const initState = ({ reactive, computed, vm, api: api2 }) => {
   const state = reactive({
     popperClass: "",
     defaultValue: null,
     format: "HH:mm:ss",
     visible: false,
     value: [],
-    oldValue: [/* @__PURE__ */ new Date(), /* @__PURE__ */ new Date()],
+    oldValue: [new Date(), new Date()],
     selectionRange: [0, 2],
     arrowControl: false,
-    maxDate: /* @__PURE__ */ new Date(),
-    minDate: /* @__PURE__ */ new Date(),
+    maxDate: new Date(),
+    minDate: new Date(),
     showSeconds: computed(() => (state.format || "").includes("ss")),
     offset: computed(() => state.showSeconds ? 11 : 8),
-    spinner: computed(() => state.selectionRange[0] < state.offset ? refs.minSpinner : refs.maxSpinner),
+    spinner: computed(() => state.selectionRange[0] < state.offset ? vm.$refs.minSpinner : vm.$refs.maxSpinner),
     btnDisabled: computed(() => state.minDate.getTime() > state.maxDate.getTime()),
     amPmMode: computed(() => api2.compuAmPmMode())
   });
   return state;
 };
-const renderless = (props, { computed, reactive, watch, nextTick }, { t, refs, emit: $emit }) => {
+const renderless = (props, { computed, reactive, watch, nextTick }, { t, vm, emit: $emit }) => {
   const api2 = {};
   const emit = props.emitter ? props.emitter.emit : $emit;
   const MIN_TIME = parseDate("00:00:00", "HH:mm:ss", t);
   const MAX_TIME = parseDate("23:59:59", "HH:mm:ss", t);
-  const state = initState({ reactive, computed, refs, api: api2 });
+  const state = initState({ reactive, computed, vm, api: api2 });
   Object.assign(api2, {
     t,
     state,
@@ -53,19 +62,20 @@ const renderless = (props, { computed, reactive, watch, nextTick }, { t, refs, e
     compuAmPmMode: compuAmPmMode(state),
     maxTimeOfDay: maxTimeOfDay({ MAX_TIME }),
     minTimeOfDay: minTimeOfDay({ MIN_TIME }),
-    changeSelectionRange: changeSelectionRange({ refs, state }),
+    changeSelectionRange: changeSelectionRange({ vm, state }),
     setMaxSelectionRange: setMaxSelectionRange({ emit, state }),
     setMinSelectionRange: setMinSelectionRange({ emit, state }),
-    isValidValue: isValidValue({ refs, state }),
-    handleConfirm: handleConfirm({ emit, refs, state }),
-    handleCancel: handleCancel({ emit, refs, state }),
-    watchVisible: watchVisible({ nextTick, refs, state }),
+    isValidValue: isValidValue({ vm, state }),
+    handleConfirm: handleConfirm({ emit, vm, state }),
+    handleCancel: handleCancel({ emit, api: api2, state }),
+    watchVisible: watchVisible({ nextTick, api: api2, state }),
     advanceTime: advanceTime(api2),
     watchValue: watchValue({ api: api2, state }),
     handleKeydown: handleKeydown({ api: api2, state }),
-    handleChange: handleChange({ api: api2, emit, refs, state }),
+    handleChange: handleChange({ api: api2, emit, vm, state }),
     handleMinChange: handleMinChange({ api: api2, state }),
-    handleMaxChange: handleMaxChange({ api: api2, state })
+    handleMaxChange: handleMaxChange({ api: api2, state }),
+    adjustSpinners: adjustSpinners({ vm })
   });
   watch(() => state.value, api2.watchValue);
   watch(() => state.visible, api2.watchVisible);

package/time-spinner/index.js

@@ -3,18 +3,21 @@ import { modifyTime } from "../common/deps/date-util";
 import { DATEPICKER } from "../common";
 const getArrowHourList = (state) => () => {
   const hours = state.hours;
-  return [hours > 0 ? hours - 1 : void 0, hours, hours < 23 ? hours + 1 : void 0];
+  const step = state.step.hours;
+  return [hours - step >= 0 ? hours - step : void 0, hours, hours + step <= 23 ? hours + step : void 0];
 };
 const getArrowMinuteList = (state) => () => {
   const minutes = state.minutes;
-  return [minutes > 0 ? minutes - 1 : void 0, minutes, minutes < 59 ? minutes + 1 : void 0];
+  const step = state.step.minutes;
+  return [minutes - step >= 0 ? minutes - step : void 0, minutes, minutes + step <= 59 ? minutes + step : void 0];
 };
 const getArrowSecondList = (state) => () => {
   const seconds = state.seconds;
-  return [seconds > 0 ? seconds - 1 : void 0, seconds, seconds < 59 ? seconds + 1 : void 0];
+  const step = state.step.seconds;
+  return [seconds - step >= 0 ? seconds - step : void 0, seconds, seconds + step <= 59 ? seconds + step : void 0];
 };
-const increase = (api) => () => api.scrollDown(1);
-const decrease = (api) => () => api.scrollDown(-1);
+const increase = ({ api, state }) => () => api.scrollDown(state.step[state.currentScrollbar]);
+const decrease = ({ api, state }) => () => api.scrollDown(-state.step[state.currentScrollbar]);
 const modifyDateField = ({ emit, props, state }) => (type, value) => {
   if (state[type] === value) {
     return;
@@ -50,9 +53,9 @@ const emitSelectRange = ({ emit, state }) => (type) => {
   }
   state.currentScrollbar = type;
 };
-const bindScrollEvent = ({ api, refs }) => () => {
+const bindScrollEvent = ({ api, vm }) => () => {
   const bindFuntion = (type) => {
-    refs[type].$refs.wrap.onscroll = (e) => {
+    vm.$refs[type].$refs.wrap.onscroll = (e) => {
       api.handleScroll(type, e);
     };
   };
@@ -60,11 +63,14 @@ const bindScrollEvent = ({ api, refs }) => () => {
   bindFuntion("minutes");
   bindFuntion("seconds");
 };
-const handleScroll = ({ api, refs }) => (type) => {
-  const value = Math.min(
-    Math.round((refs[type].$refs.wrap.scrollTop - (api.scrollBarHeight(type) * 0.5 - 10) / api.typeItemHeight(type) + 3) / api.typeItemHeight(type)),
-    type === "hours" ? 23 : 59
+const handleScroll = ({ api, vm, state }) => (type) => {
+  let value = Math.round(
+    (vm.$refs[type].$refs.wrap.scrollTop - (api.scrollBarHeight(type) * 0.5 - 10) / api.typeItemHeight(type) + 3) / api.typeItemHeight(type)
   );
+  const step = state.step[type];
+  const limitVal = { hours: 23, minutes: 59, seconds: 59 };
+  Object.keys(limitVal).forEach((key) => limitVal[key] = Math.floor(limitVal[key] / step) * step);
+  value = Math.min(value * step, limitVal[type]);
   api.modifyDateField(type, value);
 };
 const adjustSpinners = ({ api, state }) => () => {
@@ -75,13 +81,13 @@ const adjustSpinners = ({ api, state }) => () => {
 const adjustCurrentSpinner = ({ api, state }) => (type) => {
   api.adjustSpinner(type, state[type]);
 };
-const adjustSpinner = ({ api, props, refs }) => (type, value) => {
+const adjustSpinner = ({ api, props, vm, state }) => (type, value) => {
   if (props.arrowControl) {
     return;
   }
-  const el = refs[type].$refs.wrap;
+  const el = vm.$refs[type].$refs.wrap;
   if (el) {
-    el.scrollTop = Math.max(0, value * api.typeItemHeight(type));
+    el.scrollTop = Math.max(0, value / state.step[type] * api.typeItemHeight(type));
   }
 };
 const scrollDown = ({ api, state }) => (step) => {
@@ -91,22 +97,27 @@ const scrollDown = ({ api, state }) => (step) => {
   const label = state.currentScrollbar;
   const hoursArr = state.hoursList;
   let now = state[label];
+  let diabledHour;
+  const find = (arr, value, key) => arr.find((item) => item[key] === value);
   if (state.currentScrollbar === "hours") {
     let total = Math.abs(step);
-    step = step > 0 ? 1 : -1;
     let length = hoursArr.length;
     while (length-- && total) {
-      now = (now + step + hoursArr.length) % hoursArr.length;
-      if (!hoursArr[now]) {
-        total--;
+      now = (now + step + hoursArr.length * total) % (hoursArr.length * total);
+      diabledHour = find(hoursArr, now, "hour");
+      if (diabledHour && diabledHour.disabled) {
+        continue;
       }
+      60;
+      total -= total;
     }
-    if (hoursArr[now]) {
+    if (diabledHour && diabledHour.disabled) {
       return;
     }
   } else {
     now = (now + step + 60) % 60;
   }
+  now = Math.round(now / state.step[label]) * state.step[label];
   api.modifyDateField(label, now);
   api.adjustSpinner(label, now);
 };
@@ -122,8 +133,8 @@ const amPm = (props) => (hour) => {
   }
   return content;
 };
-const typeItemHeight = ({ refs }) => (type) => refs[type].$el.querySelector(DATEPICKER.Qurtyli).offsetHeight;
-const scrollBarHeight = (refs) => (type) => refs[type].$el.offsetHeight;
+const typeItemHeight = ({ vm }) => (type) => vm.$refs[type].$el.querySelector(DATEPICKER.Qurtyli).offsetHeight;
+const scrollBarHeight = (vm) => (type) => vm.$refs[type].$el.offsetHeight;
 export {
   adjustCurrentSpinner,
   adjustSpinner,