@opentinyvue/vue-date-picker-mobile-first 2.22.0 → 3.22.0

package/lib/index.js

@@ -4,37 +4,41 @@ import Button from '@opentinyvue/vue-button';
 import TimePickerMobile from '@opentinyvue/vue-time-picker-mobile';
 import ActionSheet from '@opentinyvue/vue-action-sheet';
 import RecycleScroller from '@opentinyvue/vue-recycle-scroller';
+import { openBlock, createElementBlock, renderSlot, createTextVNode, toDisplayString, resolveComponent, createVNode, createSlots, withCtx, createElementVNode, Fragment, renderList, normalizeStyle, normalizeClass, withModifiers, createBlock, resolveDynamicComponent, createCommentVNode } from 'vue';
 import { t } from '@opentinyvue/vue-locale';
 
-function normalizeComponent(scriptExports, render, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
-  var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
-  if (render) {
-    options.render = render;
-    options.staticRenderFns = staticRenderFns;
-    options._compiled = true;
+function _createForOfIteratorHelperLoose(r, e) {
+  var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (t) return (t = t.call(r)).next.bind(t);
+  if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) {
+    t && (r = t);
+    var o = 0;
+    return function() {
+      return o >= r.length ? { done: true } : { done: false, value: r[o++] };
+    };
   }
-  var hook;
-  if (injectStyles) {
-    hook = injectStyles;
-  }
-  if (hook) {
-    if (options.functional) {
-      options._injectStyles = hook;
-      var originalRender = options.render;
-      options.render = function renderWithStyleInjection(h, context) {
-        hook.call(context);
-        return originalRender(h, context);
-      };
-    } else {
-      var existing = options.beforeCreate;
-      options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
-    }
+  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
   }
-  return {
-    exports: scriptExports,
-    options
-  };
 }
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+var _export_sfc = function _export_sfc2(sfc, props) {
+  var target = sfc.__vccOpts || sfc;
+  for (var _iterator = _createForOfIteratorHelperLoose(props), _step; !(_step = _iterator()).done; ) {
+    var _step$value = _step.value, key = _step$value[0], val = _step$value[1];
+    target[key] = val;
+  }
+  return target;
+};
 
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function(n) {
@@ -45,37 +49,29 @@ function _extends() {
     return n;
   }, _extends.apply(null, arguments);
 }
-var render$2 = function render$22() {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c("div", {
-    staticClass: "w-full flex"
-  }, [_vm._t("default", function() {
-    return [_vm._v(_vm._s(_vm.data.value))];
-  }, {
-    "data": _vm.data
-  })], 2);
-};
-var staticRenderFns$2 = [];
-var __vue2_script$2 = {
+var _sfc_main$2 = {
   inheritAttrs: false,
   components: {},
   props: {
     data: Object
   }
 };
-var __cssModules$2 = {};
-var __component__$2 = /* @__PURE__ */ normalizeComponent(__vue2_script$2, render$2, staticRenderFns$2, false, __vue2_injectStyles$2);
-function __vue2_injectStyles$2(context) {
-  for (var o in __cssModules$2) {
-    this[o] = __cssModules$2[o];
-  }
+var _hoisted_1$2 = {
+  class: "w-full flex"
+};
+function _sfc_render$2(_ctx, _cache, $props2, $setup2, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1$2, [renderSlot(_ctx.$slots, "default", {
+    data: $props2.data
+  }, function() {
+    return [createTextVNode(
+      toDisplayString($props2.data.value),
+      1
+      /* TEXT */
+    )];
+  })]);
 }
-var Option = /* @__PURE__ */ function() {
-  return __component__$2.exports;
-}();
-var __vue2_script$1 = defineComponent({
+var Option = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2]]);
+var _sfc_main$1 = defineComponent({
   components: {
     TinyOption: Option,
     TinyActionSheet: ActionSheet,
@@ -94,275 +90,398 @@ var __vue2_script$1 = defineComponent({
     });
   }
 });
-var render$1 = function render$12() {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c("div", {
-    attrs: {
-      "data-tag": "tiny-date-picker-mobile"
-    }
-  }, [_c("tiny-action-sheet", {
+var _hoisted_1$1 = {
+  "data-tag": "tiny-date-picker-mobile"
+};
+var _hoisted_2$1 = {
+  "data-tag": "tiny-date-picker-inner",
+  class: /* @__PURE__ */ normalizeClass(["flex flex-col flex-auto h-full"])
+};
+var _hoisted_3$1 = {
+  "data-tag": "date-picker-header",
+  class: "flex leading-6 py-2.5 px-4 text-sm items-center text-center border-b border-color-bg-4 shadow-sm"
+};
+var _hoisted_4$1 = {
+  ref: "datePickerBody",
+  "data-tag": "date-picker-body",
+  class: "flex-auto overflow-hidden px-4"
+};
+var _hoisted_5$1 = {
+  class: "mt-4"
+};
+var _hoisted_6$1 = {
+  class: "text-xl leading-7 text-color-text-primary"
+};
+var _hoisted_7$1 = {
+  class: "text-center leading-9 text-xs font-medium"
+};
+var _hoisted_8$1 = ["onClick"];
+var _hoisted_9$1 = {
+  "data-tag": "date-picker-footer",
+  class: "flex flex-none flex-col items-center justify-center p-4 border-t border-color-bg-4 shadow-sm"
+};
+var _hoisted_10$1 = {
+  key: 0,
+  "data-tag": "rang-box",
+  class: "w-full"
+};
+var _hoisted_11$1 = {
+  class: "w-full flex mb-4 h-6 leading-6 text-base text-center"
+};
+var _hoisted_12$1 = {
+  class: "min-w-[theme(spacing.32)]"
+};
+var _hoisted_13$1 = {
+  class: "flex-auto min-w-[theme(spacing.4)]"
+};
+var _hoisted_14$1 = {
+  key: 0,
+  class: "h-9 border-l-0.5 inline-block rotate-45 relative top-6 border-color-bg-2"
+};
+var _hoisted_15$1 = {
+  key: 1,
+  class: "text-center"
+};
+var _hoisted_16$1 = {
+  class: "min-w-[theme(spacing.32)]"
+};
+var _hoisted_17 = {
+  key: 0,
+  class: "text-color-icon-placeholder"
+};
+var _hoisted_18 = {
+  key: 1
+};
+var _hoisted_19 = {
+  key: 0,
+  class: "w-full h-9 flex mb-4 leading-9 text-base text-center"
+};
+var _hoisted_20 = /* @__PURE__ */ createElementVNode(
+  "div",
+  {
+    class: "flex-auto min-w-[theme(spacing.4)]"
+  },
+  null,
+  -1
+  /* HOISTED */
+);
+var _hoisted_21 = {
+  key: 1,
+  "data-tag": "datetime-box",
+  class: "w-full"
+};
+var _hoisted_22 = {
+  class: "w-full flex mb-4 leading-6 text-base text-center"
+};
+var _hoisted_23 = {
+  class: "min-w-[theme(spacing.32)]"
+};
+var _hoisted_24 = /* @__PURE__ */ createElementVNode(
+  "div",
+  {
+    class: "flex-auto min-w-[theme(spacing.4)]"
+  },
+  null,
+  -1
+  /* HOISTED */
+);
+var _hoisted_25 = {
+  class: "w-full text-center"
+};
+function _sfc_render$1(_ctx, _cache, $props2, $setup2, $data, $options) {
+  var _component_tiny_option = resolveComponent("tiny-option");
+  var _component_tiny_recycle_scroller = resolveComponent("tiny-recycle-scroller");
+  var _component_tiny_button = resolveComponent("tiny-button");
+  var _component_tiny_action_sheet = resolveComponent("tiny-action-sheet");
+  var _component_tiny_time_picker_mobile = resolveComponent("tiny-time-picker-mobile");
+  return openBlock(), createElementBlock("div", _hoisted_1$1, [createVNode(_component_tiny_action_sheet, {
     ref: "actionSheet",
-    attrs: {
-      "title": _vm.title,
-      "custom-class": _vm.m("h-full max-h-full rounded-none min-h-[95vh]", _vm.customClass),
-      "lock-scroll": _vm.lockScroll,
-      "visible": _vm.visible
-    },
-    on: {
-      "update:visible": function updateVisible($event) {
-        return _vm.$emit("update:visible", $event);
-      }
-    },
-    scopedSlots: _vm._u([_vm.clearable ? {
-      key: "header-left",
-      fn: function fn() {
-        return [_c("div", {
-          staticClass: "cursor-pointer text-color-brand",
-          on: {
-            "click": _vm.clear
-          }
-        }, [_vm._v(_vm._s(_vm.t("ui.datepicker.clear")))])];
-      },
-      proxy: true
-    } : null], null, true)
-  }, [_c("div", {
-    class: ["flex flex-col flex-auto h-full"],
-    attrs: {
-      "data-tag": "tiny-date-picker-inner"
-    }
-  }, [_c("div", {
-    staticClass: "flex leading-6 py-2.5 px-4 text-sm items-center text-center border-b border-color-bg-4 shadow-sm",
-    attrs: {
-      "data-tag": "date-picker-header"
-    }
-  }, _vm._l(7, function(item, index) {
-    return _c("div", {
-      key: index,
-      staticClass: "flex-1"
-    }, [_vm._v(" " + _vm._s(_vm.t("ui.calendarBar.week." + index)) + " ")]);
-  }), 0), _c("div", {
-    ref: "datePickerBody",
-    staticClass: "flex-auto overflow-hidden px-4",
-    attrs: {
-      "data-tag": "date-picker-body"
-    }
-  }, [_c("tiny-recycle-scroller", {
-    ref: "recycleScroller",
-    staticClass: "h-full scrollbar-size-0",
-    style: {
-      height: _vm.state.scrollerHeight ? _vm.state.scrollerHeight + "px" : null
-    },
-    attrs: {
-      "key-field": "id",
-      "items": _vm.state.months,
-      "item-size": _vm.state.itemSize,
-      "buffer": _vm.state.buffer
-    },
-    on: {
-      "scroll-start": _vm.scrollStart,
-      "scroll-end": _vm.scrollEnd
-    },
-    scopedSlots: _vm._u([{
-      key: "default",
-      fn: function fn(scopeSlots) {
-        return [_c("div", {
-          staticClass: "mt-4"
-        }, [_c("div", {
-          staticClass: "text-xl leading-7 text-color-text-primary"
-        }, [_vm._v(" " + _vm._s(_vm.formatDate(scopeSlots.item.yearMonth, _vm.t("ui.datepicker.yearMonth", {
-          year: "yyyy",
-          month: "MM"
-        }))) + " ")]), _c("div", {
-          staticClass: "text-center leading-9 text-xs font-medium"
-        }, _vm._l(_vm.getWeeksByMonth(scopeSlots.item.yearMonth), function(item, week) {
-          return _c("div", {
-            key: week,
-            class: ["flex mt-2"]
-          }, _vm._l(7, function(item2, index) {
-            return _c("div", {
+    title: _ctx.title,
+    "custom-class": _ctx.m("h-full max-h-full rounded-none min-h-[95vh]", _ctx.customClass),
+    "lock-scroll": _ctx.lockScroll,
+    visible: _ctx.visible,
+    "onUpdate:visible": _cache[4] || (_cache[4] = function($event) {
+      return _ctx.$emit("update:visible", $event);
+    })
+  }, createSlots({
+    default: withCtx(function() {
+      return [createElementVNode("div", _hoisted_2$1, [createElementVNode("div", _hoisted_3$1, [(openBlock(), createElementBlock(
+        Fragment,
+        null,
+        renderList(7, function(item, index) {
+          return createElementVNode(
+            "div",
+            {
               key: index,
-              class: ["flex-1 h-9 cursor-pointer", index === 0 || index === 6 ? "text-color-text-placeholder" : "text-color-text-primary"],
-              on: {
-                "click": function click($event) {
-                  $event.stopPropagation();
-                  return _vm.selectOption({
-                    value: scopeSlots.item.yearMonth,
-                    index: index + week * 7
-                  });
-                }
-              }
-            }, [_c("tiny-option", {
-              attrs: {
-                "data": _vm.getDate({
-                  yearMonth: scopeSlots.item.yearMonth,
-                  index: index + week * 7
-                })
-              },
-              scopedSlots: _vm._u([{
-                key: "default",
-                fn: function fn2(_ref) {
-                  var data = _ref.data;
-                  return [_c("div", {
-                    class: ["flex-1", {
-                      "bg-color-info-primary-subtler": !data.disabled && _vm.state.date.length === 2 && ["end", "inner"].includes(_vm.getSelectedPosition(data.value))
-                    }, {
-                      "rounded-l": index === 0
-                    }]
-                  }), _c("div", {
-                    class: _vm.m("w-9 h-9", {
-                      "text-color-brand border-0.5 border-current rounded": data.isToday
+              class: "flex-1"
+            },
+            toDisplayString(_ctx.t("ui.calendarBar.week." + index)),
+            1
+            /* TEXT */
+          );
+        }),
+        64
+        /* STABLE_FRAGMENT */
+      ))]), createElementVNode(
+        "div",
+        _hoisted_4$1,
+        [createVNode(_component_tiny_recycle_scroller, {
+          ref: "recycleScroller",
+          class: "h-full scrollbar-size-0",
+          "key-field": "id",
+          style: normalizeStyle({
+            height: _ctx.state.scrollerHeight ? _ctx.state.scrollerHeight + "px" : null
+          }),
+          items: _ctx.state.months,
+          "item-size": _ctx.state.itemSize,
+          buffer: _ctx.state.buffer,
+          onScrollStart: _ctx.scrollStart,
+          onScrollEnd: _ctx.scrollEnd
+        }, {
+          default: withCtx(function(scopeSlots) {
+            return [createElementVNode("div", _hoisted_5$1, [createElementVNode(
+              "div",
+              _hoisted_6$1,
+              toDisplayString(_ctx.formatDate(scopeSlots.item.yearMonth, _ctx.t("ui.datepicker.yearMonth", {
+                year: "yyyy",
+                month: "MM"
+              }))),
+              1
+              /* TEXT */
+            ), createElementVNode("div", _hoisted_7$1, [(openBlock(true), createElementBlock(
+              Fragment,
+              null,
+              renderList(_ctx.getWeeksByMonth(scopeSlots.item.yearMonth), function(item, week) {
+                return openBlock(), createElementBlock("div", {
+                  key: week,
+                  class: normalizeClass(["flex mt-2"])
+                }, [(openBlock(), createElementBlock(
+                  Fragment,
+                  null,
+                  renderList(7, function(item2, index) {
+                    return createElementVNode("div", {
+                      key: index,
+                      class: normalizeClass(["flex-1 h-9 cursor-pointer", index === 0 || index === 6 ? "text-color-text-placeholder" : "text-color-text-primary"]),
+                      onClick: withModifiers(function($event) {
+                        return _ctx.selectOption({
+                          value: scopeSlots.item.yearMonth,
+                          index: index + week * 7
+                        });
+                      }, ["stop"])
+                    }, [createVNode(_component_tiny_option, {
+                      data: _ctx.getDate({
+                        yearMonth: scopeSlots.item.yearMonth,
+                        index: index + week * 7
+                      })
                     }, {
-                      "bg-color-info-primary-subtler": ["inner"].includes(_vm.getSelectedPosition(data.value))
-                    }, {
-                      "bg-color-brand text-color-text-inverse rounded": ["start", "end"].includes(_vm.getSelectedPosition(data.value))
-                    }, {
-                      "bg-white text-color-text-disabled cursor-not-allowed": data.disabled
-                    })
-                  }, [_vm._t("default", function() {
-                    return [_vm._v(" " + _vm._s(data.day) + " ")];
-                  }, {
-                    "data": data
-                  })], 2), _c("div", {
-                    class: ["flex-1", {
-                      "bg-color-info-primary-subtler": !data.disabled && _vm.state.date.length === 2 && _vm.state.selected.length > 1 && ["start", "inner"].includes(_vm.getSelectedPosition(data.value))
-                    }, {
-                      "rounded-r": index === 6
-                    }]
-                  })];
-                }
-              }], null, true)
-            })], 1);
-          }), 0);
-        }), 0)])];
-      }
-    }])
-  })], 1), _c("div", {
-    staticClass: "flex flex-none flex-col items-center justify-center p-4 border-t border-color-bg-4 shadow-sm",
-    attrs: {
-      "data-tag": "date-picker-footer"
-    }
-  }, [["datetimerange", "daterange"].includes(_vm.type) && _vm.state.date.length ? _c("div", {
-    staticClass: "w-full",
-    attrs: {
-      "data-tag": "rang-box"
-    }
-  }, [_c("div", {
-    staticClass: "w-full flex mb-4 h-6 leading-6 text-base text-center"
-  }, [_c("div", {
-    staticClass: "min-w-[theme(spacing.32)]"
-  }, [_vm._v(" " + _vm._s(_vm.formatDate(_vm.state.date[0], _vm.t("ui.datepicker.yearMonthDay", {
-    year: "yyyy",
-    month: "MM",
-    day: "dd"
-  }))) + " ")]), _c("div", {
-    staticClass: "flex-auto min-w-[theme(spacing.4)]"
-  }, [["datetimerange"].includes(_vm.type) ? _c("div", {
-    staticClass: "h-9 border-l-0.5 inline-block rotate-45 relative top-6 border-color-bg-2"
-  }) : _c("div", {
-    staticClass: "text-center"
-  }, [typeof _vm.rangeSeparator === "string" ? [_vm._v(_vm._s(_vm.rangeSeparator))] : _c(_vm.rangeSeparator, {
-    tag: "component"
-  })], 2)]), _c("div", {
-    staticClass: "min-w-[theme(spacing.32)]"
-  }, [_vm.state.btnDisabled ? _c("span", {
-    staticClass: "text-color-icon-placeholder"
-  }, [_vm._v(_vm._s(_vm.endPlaceholder))]) : _c("span", [_vm._v(_vm._s(_vm.formatDate(_vm.state.date[1], _vm.t("ui.datepicker.yearMonthDay", {
-    year: "yyyy",
-    month: "MM",
-    day: "dd"
-  }))))])])]), _vm.type === "datetimerange" ? _c("div", {
-    staticClass: "w-full h-9 flex mb-4 leading-9 text-base text-center"
-  }, [_c("div", {
-    staticClass: "w-32 bg-color-bg-2",
-    on: {
-      "click": function click($event) {
-        $event.stopPropagation();
-        return _vm.timeToggle(0);
-      }
-    }
-  }, [_vm._v(_vm._s(_vm.state.timeList[0].join(":")))]), _c("div", {
-    staticClass: "flex-auto min-w-[theme(spacing.4)]"
-  }), _c("div", {
-    staticClass: "w-32 bg-color-bg-2",
-    on: {
-      "click": function click($event) {
-        $event.stopPropagation();
-        return _vm.timeToggle(1);
-      }
-    }
-  }, [_vm._v(_vm._s(_vm.state.timeList[1].join(":")))])]) : _vm._e()]) : _vm._e(), ["datetime"].includes(_vm.type) && _vm.state.date ? _c("div", {
-    staticClass: "w-full",
-    attrs: {
-      "data-tag": "datetime-box"
-    }
-  }, [_c("div", {
-    staticClass: "w-full flex mb-4 leading-6 text-base text-center"
-  }, [_c("div", {
-    staticClass: "min-w-[theme(spacing.32)]"
-  }, [_vm._v(" " + _vm._s(_vm.formatDate(_vm.state.date, _vm.t("ui.datepicker.yearMonthDay", {
-    year: "yyyy",
-    month: "MM",
-    day: "dd"
-  }))) + " ")]), _c("div", {
-    staticClass: "flex-auto min-w-[theme(spacing.4)]"
-  }), _c("div", {
-    staticClass: "w-32 bg-color-bg-2",
-    on: {
-      "click": function click($event) {
-        $event.stopPropagation();
-        return _vm.timeToggle(0);
-      }
-    }
-  }, [_vm._v(_vm._s(_vm.state.timeList[0].join(":")))])])]) : _vm._e(), _c("div", {
-    staticClass: "w-full text-center"
-  }, [_c("tiny-button", {
-    attrs: {
-      "tiny_mode": "mobile-first",
-      "custom-class": "w-full",
-      "disabled": _vm.state.btnDisabled,
-      "type": "primary",
-      "size": "medium",
-      "reset-time": 0
-    },
-    on: {
-      "click": _vm.confirm
-    }
-  }, [_vm._v(" " + _vm._s(_vm.t("ui.button.confirm")) + " ")])], 1)])])]), _c("tiny-time-picker-mobile", {
-    attrs: {
-      "title": _vm.t("ui.datepicker.selectTime"),
-      "step": _vm.step,
-      "show-seconds": _vm.showTimeSecond,
-      "visible": _vm.state.timeVisible
-    },
-    on: {
-      "update:visible": function updateVisible($event) {
-        _vm.state.timeVisible = $event;
-      },
-      "confirm": _vm.timeConfirm
-    },
-    model: {
-      value: _vm.state.time,
-      callback: function callback($$v) {
-        _vm.$set(_vm.state, "time", $$v);
-      },
-      expression: "state.time"
-    }
-  })], 1);
-};
-var staticRenderFns$1 = [];
-var __cssModules$1 = {};
-var __component__$1 = /* @__PURE__ */ normalizeComponent(__vue2_script$1, render$1, staticRenderFns$1, false, __vue2_injectStyles$1);
-function __vue2_injectStyles$1(context) {
-  for (var o in __cssModules$1) {
-    this[o] = __cssModules$1[o];
-  }
+                      default: withCtx(function(_ref) {
+                        var data = _ref.data;
+                        return [createElementVNode(
+                          "div",
+                          {
+                            class: normalizeClass(["flex-1", {
+                              "bg-color-info-primary-subtler": !data.disabled && _ctx.state.date.length === 2 && ["end", "inner"].includes(_ctx.getSelectedPosition(data.value))
+                            }, {
+                              "rounded-l": index === 0
+                            }])
+                          },
+                          null,
+                          2
+                          /* CLASS */
+                        ), createElementVNode(
+                          "div",
+                          {
+                            class: normalizeClass(_ctx.m("w-9 h-9", {
+                              "text-color-brand border-0.5 border-current rounded": data.isToday
+                            }, {
+                              "bg-color-info-primary-subtler": ["inner"].includes(_ctx.getSelectedPosition(data.value))
+                            }, {
+                              "bg-color-brand text-color-text-inverse rounded": ["start", "end"].includes(_ctx.getSelectedPosition(data.value))
+                            }, {
+                              "bg-white text-color-text-disabled cursor-not-allowed": data.disabled
+                            }))
+                          },
+                          [renderSlot(_ctx.$slots, "default", {
+                            data
+                          }, function() {
+                            return [createTextVNode(
+                              toDisplayString(data.day),
+                              1
+                              /* TEXT */
+                            )];
+                          })],
+                          2
+                          /* CLASS */
+                        ), createElementVNode(
+                          "div",
+                          {
+                            class: normalizeClass(["flex-1", {
+                              "bg-color-info-primary-subtler": !data.disabled && _ctx.state.date.length === 2 && _ctx.state.selected.length > 1 && ["start", "inner"].includes(_ctx.getSelectedPosition(data.value))
+                            }, {
+                              "rounded-r": index === 6
+                            }])
+                          },
+                          null,
+                          2
+                          /* CLASS */
+                        )];
+                      }),
+                      _: 2
+                      /* DYNAMIC */
+                    }, 1032, ["data"])], 10, _hoisted_8$1);
+                  }),
+                  64
+                  /* STABLE_FRAGMENT */
+                ))]);
+              }),
+              128
+              /* KEYED_FRAGMENT */
+            ))])])];
+          }),
+          _: 3
+          /* FORWARDED */
+        }, 8, ["style", "items", "item-size", "buffer", "onScrollStart", "onScrollEnd"])],
+        512
+        /* NEED_PATCH */
+      ), createElementVNode("div", _hoisted_9$1, [["datetimerange", "daterange"].includes(_ctx.type) && _ctx.state.date.length ? (openBlock(), createElementBlock("div", _hoisted_10$1, [createElementVNode("div", _hoisted_11$1, [createElementVNode(
+        "div",
+        _hoisted_12$1,
+        toDisplayString(_ctx.formatDate(_ctx.state.date[0], _ctx.t("ui.datepicker.yearMonthDay", {
+          year: "yyyy",
+          month: "MM",
+          day: "dd"
+        }))),
+        1
+        /* TEXT */
+      ), createElementVNode("div", _hoisted_13$1, [["datetimerange"].includes(_ctx.type) ? (openBlock(), createElementBlock("div", _hoisted_14$1)) : (openBlock(), createElementBlock("div", _hoisted_15$1, [typeof _ctx.rangeSeparator === "string" ? (openBlock(), createElementBlock(
+        Fragment,
+        {
+          key: 0
+        },
+        [createTextVNode(
+          toDisplayString(_ctx.rangeSeparator),
+          1
+          /* TEXT */
+        )],
+        64
+        /* STABLE_FRAGMENT */
+      )) : (openBlock(), createBlock(resolveDynamicComponent(_ctx.rangeSeparator), {
+        key: 1
+      }))]))]), createElementVNode("div", _hoisted_16$1, [_ctx.state.btnDisabled ? (openBlock(), createElementBlock(
+        "span",
+        _hoisted_17,
+        toDisplayString(_ctx.endPlaceholder),
+        1
+        /* TEXT */
+      )) : (openBlock(), createElementBlock(
+        "span",
+        _hoisted_18,
+        toDisplayString(_ctx.formatDate(_ctx.state.date[1], _ctx.t("ui.datepicker.yearMonthDay", {
+          year: "yyyy",
+          month: "MM",
+          day: "dd"
+        }))),
+        1
+        /* TEXT */
+      ))])]), _ctx.type === "datetimerange" ? (openBlock(), createElementBlock("div", _hoisted_19, [createElementVNode(
+        "div",
+        {
+          class: "w-32 bg-color-bg-2",
+          onClick: _cache[1] || (_cache[1] = withModifiers(function($event) {
+            return _ctx.timeToggle(0);
+          }, ["stop"]))
+        },
+        toDisplayString(_ctx.state.timeList[0].join(":")),
+        1
+        /* TEXT */
+      ), _hoisted_20, createElementVNode(
+        "div",
+        {
+          class: "w-32 bg-color-bg-2",
+          onClick: _cache[2] || (_cache[2] = withModifiers(function($event) {
+            return _ctx.timeToggle(1);
+          }, ["stop"]))
+        },
+        toDisplayString(_ctx.state.timeList[1].join(":")),
+        1
+        /* TEXT */
+      )])) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true), ["datetime"].includes(_ctx.type) && _ctx.state.date ? (openBlock(), createElementBlock("div", _hoisted_21, [createElementVNode("div", _hoisted_22, [createElementVNode(
+        "div",
+        _hoisted_23,
+        toDisplayString(_ctx.formatDate(_ctx.state.date, _ctx.t("ui.datepicker.yearMonthDay", {
+          year: "yyyy",
+          month: "MM",
+          day: "dd"
+        }))),
+        1
+        /* TEXT */
+      ), _hoisted_24, createElementVNode(
+        "div",
+        {
+          class: "w-32 bg-color-bg-2",
+          onClick: _cache[3] || (_cache[3] = withModifiers(function($event) {
+            return _ctx.timeToggle(0);
+          }, ["stop"]))
+        },
+        toDisplayString(_ctx.state.timeList[0].join(":")),
+        1
+        /* TEXT */
+      )])])) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_25, [createVNode(_component_tiny_button, {
+        tiny_mode: "mobile-first",
+        "custom-class": "w-full",
+        disabled: _ctx.state.btnDisabled,
+        type: "primary",
+        size: "medium",
+        "reset-time": 0,
+        onClick: _ctx.confirm
+      }, {
+        default: withCtx(function() {
+          return [createTextVNode(
+            toDisplayString(_ctx.t("ui.button.confirm")),
+            1
+            /* TEXT */
+          )];
+        }),
+        _: 1
+        /* STABLE */
+      }, 8, ["disabled", "onClick"])])])])];
+    }),
+    _: 2
+    /* DYNAMIC */
+  }, [_ctx.clearable ? {
+    name: "header-left",
+    fn: withCtx(function() {
+      return [createElementVNode(
+        "div",
+        {
+          class: "cursor-pointer text-color-brand",
+          onClick: _cache[0] || (_cache[0] = function() {
+            return _ctx.clear && _ctx.clear.apply(_ctx, arguments);
+          })
+        },
+        toDisplayString(_ctx.t("ui.datepicker.clear")),
+        1
+        /* TEXT */
+      )];
+    }),
+    key: "0"
+  } : void 0]), 1032, ["title", "custom-class", "lock-scroll", "visible"]), createVNode(_component_tiny_time_picker_mobile, {
+    modelValue: _ctx.state.time,
+    "onUpdate:modelValue": _cache[5] || (_cache[5] = function($event) {
+      return _ctx.state.time = $event;
+    }),
+    title: _ctx.t("ui.datepicker.selectTime"),
+    step: _ctx.step,
+    "show-seconds": _ctx.showTimeSecond,
+    visible: _ctx.state.timeVisible,
+    "onUpdate:visible": _cache[6] || (_cache[6] = function($event) {
+      return _ctx.state.timeVisible = $event;
+    }),
+    onConfirm: _ctx.timeConfirm
+  }, null, 8, ["modelValue", "title", "step", "show-seconds", "visible", "onConfirm"])]);
 }
-var NormalTemplate = /* @__PURE__ */ function() {
-  return __component__$1.exports;
-}();
-var __vue2_script = defineComponent({
+var NormalTemplate = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
+var _sfc_main = defineComponent({
   components: {
     TinyOption: Option,
     TinyActionSheet: ActionSheet,
@@ -380,170 +499,240 @@ var __vue2_script = defineComponent({
     });
   }
 });
-var render = function render2() {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c("div", {
-    attrs: {
-      "data-tag": "tiny-date-picker-mobile year-month"
-    }
-  }, [_c("tiny-action-sheet", {
-    attrs: {
-      "custom-class": "h-full",
-      "title": _vm.title,
-      "lock-scroll": _vm.lockScroll,
-      "visible": _vm.visible
-    },
-    on: {
-      "update:visible": function updateVisible($event) {
-        return _vm.$emit("update:visible", $event);
-      }
-    }
-  }, [_c("div", {
-    class: ["flex flex-col overflow-hidden"],
-    attrs: {
-      "data-tag": "tiny-date-picker-inner"
-    }
-  }, [_c("div", {
-    ref: "datePickerBody",
-    staticClass: "flex-auto overflow-hidden px-4",
-    attrs: {
-      "data-tag": "date-picker-body"
-    }
-  }, [_c("tiny-recycle-scroller", {
-    ref: "recycleScroller",
-    staticClass: "h-full scrollbar-size-0",
-    style: {
-      height: _vm.state.scrollerHeight ? _vm.state.scrollerHeight + "px" : null
-    },
-    attrs: {
-      "key-field": "id",
-      "items": _vm.state.computedYears,
-      "item-size": _vm.state.itemSize,
-      "buffer": _vm.state.buffer
-    },
-    on: {
-      "scroll-start": _vm.scrollStart,
-      "scroll-end": _vm.scrollEnd
-    },
-    scopedSlots: _vm._u([{
-      key: "default",
-      fn: function fn(scopeSlots) {
-        return [_c("div", {
-          staticClass: "mt-4"
-        }, [_c("div", {
-          staticClass: "text-xl leading-7"
-        }, [_vm._v(_vm._s(scopeSlots.item.year) + _vm._s(_vm.t("ui.datepicker.year")))]), _c("div", {
-          staticClass: "text-center leading-9 text-xs font-medium"
-        }, _vm._l(2, function(v, row) {
-          return _c("div", {
-            key: row,
-            class: ["flex mt-2"]
-          }, _vm._l(6, function(v2, col) {
-            return _c("div", {
-              key: col,
-              class: ["flex-1 h-9 cursor-pointer"],
-              on: {
-                "click": function click($event) {
-                  $event.stopPropagation();
-                  return _vm.selectOption({
-                    value: scopeSlots.item.year,
-                    index: row * 6 + col
-                  });
-                }
-              }
-            }, [_c("tiny-option", {
-              attrs: {
-                "data": _vm.state.years[scopeSlots.item.year][row * 6 + col]
-              },
-              scopedSlots: _vm._u([{
-                key: "default",
-                fn: function fn2(_ref) {
-                  var data = _ref.data;
-                  return [_c("div", {
-                    class: ["flex-1", {
-                      "bg-color-info-primary-subtler": !data.disabled && _vm.state.date.length === 2 && ["end", "inner"].includes(_vm.getSelectedPosition(data.value))
-                    }]
-                  }), _c("div", {
-                    class: _vm.m("w-9 h-9", {
-                      "text-color-brand border-0.5 border-current": data.isToday
-                    }, {
-                      "bg-color-info-primary-subtler": ["inner"].includes(_vm.getSelectedPosition(data.value))
-                    }, {
-                      "bg-color-brand text-color-text-inverse": ["start", "end"].includes(_vm.getSelectedPosition(data.value))
+var _hoisted_1 = {
+  "data-tag": "tiny-date-picker-mobile year-month"
+};
+var _hoisted_2 = {
+  "data-tag": "tiny-date-picker-inner",
+  class: /* @__PURE__ */ normalizeClass(["flex flex-col overflow-hidden"])
+};
+var _hoisted_3 = {
+  ref: "datePickerBody",
+  "data-tag": "date-picker-body",
+  class: "flex-auto overflow-hidden px-4"
+};
+var _hoisted_4 = {
+  class: "mt-4"
+};
+var _hoisted_5 = {
+  class: "text-xl leading-7"
+};
+var _hoisted_6 = {
+  class: "text-center leading-9 text-xs font-medium"
+};
+var _hoisted_7 = ["onClick"];
+var _hoisted_8 = {
+  "data-tag": "date-picker-footer",
+  class: "w-full flex-none flex flex-col items-center justify-center p-4 border-t border-color-bg-4 shadow-sm"
+};
+var _hoisted_9 = {
+  key: 0,
+  "data-tag": "rang-box",
+  class: "w-full"
+};
+var _hoisted_10 = {
+  class: "w-full flex mb-4 h-6 leading-6 text-base text-center"
+};
+var _hoisted_11 = {
+  class: "min-w-[theme(spacing.32)]"
+};
+var _hoisted_12 = /* @__PURE__ */ createElementVNode(
+  "div",
+  {
+    class: "flex-auto min-w-[theme(spacing.4)] justify-center"
+  },
+  "~",
+  -1
+  /* HOISTED */
+);
+var _hoisted_13 = {
+  class: "min-w-[theme(spacing.32)]"
+};
+var _hoisted_14 = {
+  key: 0,
+  class: "text-color-icon-placeholder"
+};
+var _hoisted_15 = {
+  key: 1
+};
+var _hoisted_16 = {
+  class: "w-full text-center"
+};
+function _sfc_render(_ctx, _cache, $props2, $setup2, $data, $options) {
+  var _component_tiny_option = resolveComponent("tiny-option");
+  var _component_tiny_recycle_scroller = resolveComponent("tiny-recycle-scroller");
+  var _component_tiny_button = resolveComponent("tiny-button");
+  var _component_tiny_action_sheet = resolveComponent("tiny-action-sheet");
+  return openBlock(), createElementBlock("div", _hoisted_1, [createVNode(_component_tiny_action_sheet, {
+    "custom-class": "h-full",
+    title: _ctx.title,
+    "lock-scroll": _ctx.lockScroll,
+    visible: _ctx.visible,
+    "onUpdate:visible": _cache[0] || (_cache[0] = function($event) {
+      return _ctx.$emit("update:visible", $event);
+    })
+  }, {
+    default: withCtx(function() {
+      return [createElementVNode("div", _hoisted_2, [createElementVNode(
+        "div",
+        _hoisted_3,
+        [createVNode(_component_tiny_recycle_scroller, {
+          ref: "recycleScroller",
+          "key-field": "id",
+          class: "h-full scrollbar-size-0",
+          style: normalizeStyle({
+            height: _ctx.state.scrollerHeight ? _ctx.state.scrollerHeight + "px" : null
+          }),
+          items: _ctx.state.computedYears,
+          "item-size": _ctx.state.itemSize,
+          buffer: _ctx.state.buffer,
+          onScrollStart: _ctx.scrollStart,
+          onScrollEnd: _ctx.scrollEnd
+        }, {
+          default: withCtx(function(scopeSlots) {
+            return [createElementVNode("div", _hoisted_4, [createElementVNode(
+              "div",
+              _hoisted_5,
+              toDisplayString(scopeSlots.item.year) + toDisplayString(_ctx.t("ui.datepicker.year")),
+              1
+              /* TEXT */
+            ), createElementVNode("div", _hoisted_6, [(openBlock(), createElementBlock(
+              Fragment,
+              null,
+              renderList(2, function(v, row) {
+                return createElementVNode("div", {
+                  key: row,
+                  class: normalizeClass(["flex mt-2"])
+                }, [(openBlock(), createElementBlock(
+                  Fragment,
+                  null,
+                  renderList(6, function(v2, col) {
+                    return createElementVNode("div", {
+                      key: col,
+                      class: normalizeClass(["flex-1 h-9 cursor-pointer"]),
+                      onClick: withModifiers(function($event) {
+                        return _ctx.selectOption({
+                          value: scopeSlots.item.year,
+                          index: row * 6 + col
+                        });
+                      }, ["stop"])
+                    }, [createVNode(_component_tiny_option, {
+                      data: _ctx.state.years[scopeSlots.item.year][row * 6 + col]
                     }, {
-                      "bg-white text-color-text-disabled cursor-not-allowed": data.disabled
-                    })
-                  }, [_vm._t("default", function() {
-                    return [_vm._v(" " + _vm._s(data.month) + " ")];
-                  }, {
-                    "data": data
-                  })], 2), _c("div", {
-                    class: ["flex-1", {
-                      "bg-color-info-primary-subtler": !data.disabled && _vm.state.date.length === 2 && _vm.state.selected.length > 1 && ["start", "inner"].includes(_vm.getSelectedPosition(data.value))
-                    }]
-                  })];
-                }
-              }], null, true)
-            })], 1);
-          }), 0);
-        }), 0)])];
-      }
-    }])
-  })], 1), _c("div", {
-    staticClass: "w-full flex-none flex flex-col items-center justify-center p-4 border-t border-color-bg-4 shadow-sm",
-    attrs: {
-      "data-tag": "date-picker-footer"
-    }
-  }, [["year-month-range"].includes(_vm.type) && _vm.state.date.length ? _c("div", {
-    staticClass: "w-full",
-    attrs: {
-      "data-tag": "rang-box"
-    }
-  }, [_c("div", {
-    staticClass: "w-full flex mb-4 h-6 leading-6 text-base text-center"
-  }, [_c("div", {
-    staticClass: "min-w-[theme(spacing.32)]"
-  }, [_vm._v(" " + _vm._s(_vm.formatDate(_vm.state.date[0], _vm.t("ui.datepicker.yearMonth", {
-    year: "yyyy",
-    month: "MM"
-  }))) + " ")]), _c("div", {
-    staticClass: "flex-auto min-w-[theme(spacing.4)] justify-center"
-  }, [_vm._v("~")]), _c("div", {
-    staticClass: "min-w-[theme(spacing.32)]"
-  }, [_vm.state.btnDisabled ? _c("span", {
-    staticClass: "text-color-icon-placeholder"
-  }, [_vm._v(_vm._s(_vm.t("ui.datepicker.endTime")))]) : _c("span", [_vm._v(_vm._s(_vm.formatDate(_vm.state.date[1], _vm.t("ui.datepicker.yearMonth", {
-    year: "yyyy",
-    month: "MM"
-  }))))])])])]) : _vm._e(), _c("div", {
-    staticClass: "w-full text-center"
-  }, [_c("tiny-button", {
-    attrs: {
-      "tiny_mode": "mobile-first",
-      "custom-class": "w-full",
-      "disabled": _vm.state.btnDisabled,
-      "type": "primary",
-      "size": "medium",
-      "reset-time": 0
-    },
-    on: {
-      "click": _vm.confirm
-    }
-  }, [_vm._v(" " + _vm._s(_vm.t("ui.button.confirm")) + " ")])], 1)])])])], 1);
-};
-var staticRenderFns = [];
-var __cssModules = {};
-var __component__ = /* @__PURE__ */ normalizeComponent(__vue2_script, render, staticRenderFns, false, __vue2_injectStyles);
-function __vue2_injectStyles(context) {
-  for (var o in __cssModules) {
-    this[o] = __cssModules[o];
-  }
+                      default: withCtx(function(_ref2) {
+                        var data = _ref2.data;
+                        return [createElementVNode(
+                          "div",
+                          {
+                            class: normalizeClass(["flex-1", {
+                              "bg-color-info-primary-subtler": !data.disabled && _ctx.state.date.length === 2 && ["end", "inner"].includes(_ctx.getSelectedPosition(data.value))
+                            }])
+                          },
+                          null,
+                          2
+                          /* CLASS */
+                        ), createElementVNode(
+                          "div",
+                          {
+                            class: normalizeClass(_ctx.m("w-9 h-9", {
+                              "text-color-brand border-0.5 border-current": data.isToday
+                            }, {
+                              "bg-color-info-primary-subtler": ["inner"].includes(_ctx.getSelectedPosition(data.value))
+                            }, {
+                              "bg-color-brand text-color-text-inverse": ["start", "end"].includes(_ctx.getSelectedPosition(data.value))
+                            }, {
+                              "bg-white text-color-text-disabled cursor-not-allowed": data.disabled
+                            }))
+                          },
+                          [renderSlot(_ctx.$slots, "default", {
+                            data
+                          }, function() {
+                            return [createTextVNode(
+                              toDisplayString(data.month),
+                              1
+                              /* TEXT */
+                            )];
+                          })],
+                          2
+                          /* CLASS */
+                        ), createElementVNode(
+                          "div",
+                          {
+                            class: normalizeClass(["flex-1", {
+                              "bg-color-info-primary-subtler": !data.disabled && _ctx.state.date.length === 2 && _ctx.state.selected.length > 1 && ["start", "inner"].includes(_ctx.getSelectedPosition(data.value))
+                            }])
+                          },
+                          null,
+                          2
+                          /* CLASS */
+                        )];
+                      }),
+                      _: 2
+                      /* DYNAMIC */
+                    }, 1032, ["data"])], 8, _hoisted_7);
+                  }),
+                  64
+                  /* STABLE_FRAGMENT */
+                ))]);
+              }),
+              64
+              /* STABLE_FRAGMENT */
+            ))])])];
+          }),
+          _: 3
+          /* FORWARDED */
+        }, 8, ["style", "items", "item-size", "buffer", "onScrollStart", "onScrollEnd"])],
+        512
+        /* NEED_PATCH */
+      ), createElementVNode("div", _hoisted_8, [["year-month-range"].includes(_ctx.type) && _ctx.state.date.length ? (openBlock(), createElementBlock("div", _hoisted_9, [createElementVNode("div", _hoisted_10, [createElementVNode(
+        "div",
+        _hoisted_11,
+        toDisplayString(_ctx.formatDate(_ctx.state.date[0], _ctx.t("ui.datepicker.yearMonth", {
+          year: "yyyy",
+          month: "MM"
+        }))),
+        1
+        /* TEXT */
+      ), _hoisted_12, createElementVNode("div", _hoisted_13, [_ctx.state.btnDisabled ? (openBlock(), createElementBlock(
+        "span",
+        _hoisted_14,
+        toDisplayString(_ctx.t("ui.datepicker.endTime")),
+        1
+        /* TEXT */
+      )) : (openBlock(), createElementBlock(
+        "span",
+        _hoisted_15,
+        toDisplayString(_ctx.formatDate(_ctx.state.date[1], _ctx.t("ui.datepicker.yearMonth", {
+          year: "yyyy",
+          month: "MM"
+        }))),
+        1
+        /* TEXT */
+      ))])])])) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_16, [createVNode(_component_tiny_button, {
+        tiny_mode: "mobile-first",
+        "custom-class": "w-full",
+        disabled: _ctx.state.btnDisabled,
+        type: "primary",
+        size: "medium",
+        "reset-time": 0,
+        onClick: _ctx.confirm
+      }, {
+        default: withCtx(function() {
+          return [createTextVNode(
+            toDisplayString(_ctx.t("ui.button.confirm")),
+            1
+            /* TEXT */
+          )];
+        }),
+        _: 1
+        /* STABLE */
+      }, 8, ["disabled", "onClick"])])])])];
+    }),
+    _: 3
+    /* FORWARDED */
+  }, 8, ["title", "lock-scroll", "visible"])]);
 }
-var YearMonthTemplate = /* @__PURE__ */ function() {
-  return __component__.exports;
-}();
+var YearMonthTemplate = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 var $constants = {
   TYPE: {
     DATE: "date",
@@ -630,7 +819,7 @@ var DatePickerMobile = defineComponent({
     });
   }
 });
-var version = "2.22.0";
+var version = "3.22.0";
 DatePickerMobile.model = {
   prop: "modelValue",
   event: "update:modelValue"