@opentiny/vue-date-picker-mobile-first - npm Package Compare versions

Comparing version 3.10.0 to 3.11.0-alpha.0

index.d.ts

@@ -1,2 +0,2 @@
-import DatePickerMobile from './src/mobile-first.vue';
+import DatePickerMobile from './src/index';
 export default DatePickerMobile;

lib/index.js

@@ -15,9 +15,10 @@ function _extends() {
 }
+import { defineComponent, props, setup as _setup, $prefix, $props, $setup } from "@opentiny/vue-common";
 import { renderless, api } from "@opentiny/vue-renderless/date-picker-mobile/vue";
-import { defineComponent, $prefix, $props, setup as _setup } from "@opentiny/vue-common";
 import Button from "@opentiny/vue-button";
 import TimePickerMobile from "@opentiny/vue-time-picker-mobile";
 import ActionSheet from "@opentiny/vue-action-sheet";
-import { openBlock, createElementBlock, renderSlot, createTextVNode, toDisplayString, resolveComponent, createVNode, withCtx, createElementVNode, Fragment, renderList, normalizeClass, withModifiers, createCommentVNode } from "vue";
-function _createForOfIteratorHelperLoose(o, allowArrayLike) {
+import RecycleScroller from "@opentiny/vue-recycle-scroller";
+import { openBlock, createElementBlock, renderSlot, createTextVNode, toDisplayString, resolveComponent, createVNode, withCtx, createElementVNode, Fragment, renderList, normalizeStyle, normalizeClass, withModifiers, createCommentVNode } from "vue";
+function _createForOfIteratorHelperLoose_tiny(o, allowArrayLike) {
   var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
@@ -60,3 +61,3 @@ if (it)
   var target = sfc.__vccOpts || sfc;
-  for (var _iterator = _createForOfIteratorHelperLoose(props), _step; !(_step = _iterator()).done; ) {
+  for (var _iterator = _createForOfIteratorHelperLoose_tiny(props), _step; !(_step = _iterator()).done; ) {
     var _step$value = _step.value, key = _step$value[0], val = _step$value[1];
@@ -68,3 +69,3 @@ target[key] = val;
 
-var _sfc_main$1 = {
+var _sfc_main$2 = {
   inheritAttrs: false,
@@ -76,11 +77,11 @@ components: {},
 };
-var _hoisted_1$1 = {
+var _hoisted_1$2 = {
   class: "w-full w-full flex"
 };
-function _sfc_render$1(_ctx, _cache, $props2, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$1, [renderSlot(_ctx.$slots, "default", {
+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.day),
+      toDisplayString($props2.data.value),
       1
@@ -91,5 +92,4 @@ /* TEXT */
 }
-var Option = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
-var _sfc_main = defineComponent({
-  name: $prefix + "DatePickerMobile",
+var Option = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2]]);
+var _sfc_main$1 = defineComponent({
   components: {
@@ -99,54 +99,47 @@ TinyOption: Option,
     TinyTimePickerMobile: TimePickerMobile,
+    TinyRecycleScroller: RecycleScroller,
     TinyButton: Button
   },
-  props: _extends({}, $props, {
-    modelValue: [Number, String, Array, Date],
-    visible: {
-      type: Boolean,
-      default: false
-    },
-    title: String,
-    type: {
-      type: String,
-      default: "date"
-    }
-  }),
-  setup: function setup(props, context) {
+  emits: ["click", "confirm", "update:visible", "update:modelValue", "time-confirm"],
+  props: [].concat(props, ["modelValue", "visible", "title", "type", "lockScroll", "pickerOptions"]),
+  setup: function setup(props2, context) {
     return _setup({
-      props,
+      props: props2,
       context,
       renderless,
-      api,
-      mono: true
+      api
     });
   }
 });
-var _hoisted_1 = {
+var _hoisted_1$1 = {
   "data-tag": "tiny-date-picker-mobile"
 };
-var _hoisted_2 = {
+var _hoisted_2$1 = {
   "data-tag": "tiny-date-picker-inner",
   class: /* @__PURE__ */ normalizeClass(["flex flex-col flex-auto h-full"])
 };
-var _hoisted_3 = {
+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 = {
+var _hoisted_4$1 = {
   ref: "datePickerBody",
   "data-tag": "date-picker-body",
-  class: "flex-auto overflow-auto px-4 scrollbar-size-0"
+  class: "flex-auto overflow-hidden px-4"
 };
-var _hoisted_5 = {
+var _hoisted_5$1 = {
+  class: "mt-4"
+};
+var _hoisted_6$1 = {
   class: "text-xl leading-7"
 };
-var _hoisted_6 = {
+var _hoisted_7$1 = {
   class: "text-center leading-9 text-xs font-medium"
 };
-var _hoisted_7 = ["onClick"];
-var _hoisted_8 = {
+var _hoisted_8$1 = ["onClick"];
+var _hoisted_9$1 = {
   "data-tag": "date-picker-footer",
-  class: "flex flex-col items-center justify-center p-4 border-t border-color-bg-4 shadow-sm"
+  class: "flex flex-none flex-col items-center justify-center p-4 border-t border-color-bg-4 shadow-sm"
 };
-var _hoisted_9 = {
+var _hoisted_10$1 = {
   key: 0,
@@ -156,33 +149,33 @@ "data-tag": "rang-box",
 };
-var _hoisted_10 = {
-  class: "w-full flex mb-4 leading-6 text-base text-center"
+var _hoisted_11$1 = {
+  class: "w-full flex mb-4 h-6 leading-6 text-base text-center"
 };
-var _hoisted_11 = {
-  class: "min-w-[8rem]"
+var _hoisted_12$1 = {
+  class: "min-w-[theme(spacing.32)]"
 };
-var _hoisted_12 = {
-  class: "flex-auto min-w-[1rem]"
+var _hoisted_13$1 = {
+  class: "flex-auto min-w-[theme(spacing.4)]"
 };
-var _hoisted_13 = {
+var _hoisted_14$1 = {
   key: 0,
-  class: "h-9 h-9 border-l-0.5 inline-block rotate-45 relative top-6 border-color-bg-2"
+  class: "h-9 border-l-0.5 inline-block rotate-45 relative top-6 border-color-bg-2"
 };
-var _hoisted_14 = {
-  class: "min-w-[8rem]"
+var _hoisted_15$1 = {
+  class: "min-w-[theme(spacing.32)]"
 };
-var _hoisted_15 = {
+var _hoisted_16$1 = {
   key: 0,
   class: "text-color-icon-placeholder"
 };
-var _hoisted_16 = {
+var _hoisted_17 = {
   key: 1
 };
-var _hoisted_17 = {
+var _hoisted_18 = {
   key: 0,
   class: "w-full h-9 flex mb-4 leading-9 text-base text-center"
 };
-var _hoisted_18 = /* @__PURE__ */ createElementVNode(
+var _hoisted_19 = /* @__PURE__ */ createElementVNode(
   "div",
   {
-    class: "flex-auto min-w-[1rem]"
+    class: "flex-auto min-w-[theme(spacing.4)]"
   },
@@ -193,3 +186,3 @@ null,
 );
-var _hoisted_19 = {
+var _hoisted_20 = {
   key: 1,
@@ -199,12 +192,12 @@ "data-tag": "datetime-box",
 };
-var _hoisted_20 = {
+var _hoisted_21 = {
   class: "w-full flex mb-4 leading-6 text-base text-center"
 };
-var _hoisted_21 = {
-  class: "min-w-[8rem]"
+var _hoisted_22 = {
+  class: "min-w-[theme(spacing.32)]"
 };
-var _hoisted_22 = /* @__PURE__ */ createElementVNode(
+var _hoisted_23 = /* @__PURE__ */ createElementVNode(
   "div",
   {
-    class: "flex-auto min-w-[1rem]"
+    class: "flex-auto min-w-[theme(spacing.4)]"
   },
@@ -215,13 +208,15 @@ null,
 );
-var _hoisted_23 = {
+var _hoisted_24 = {
   class: "w-full text-center"
 };
-function _sfc_render(_ctx, _cache, $props2, $setup, $data, $options) {
+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, [createVNode(_component_tiny_action_sheet, {
+  return openBlock(), createElementBlock("div", _hoisted_1$1, [createVNode(_component_tiny_action_sheet, {
     title: _ctx.title,
-    "custom-class": "h-full max-h-[100%] rounded-none",
+    "custom-class": "h-full max-h-full rounded-none",
+    "lock-scroll": _ctx.lockScroll,
     visible: _ctx.visible,
@@ -233,3 +228,3 @@ "onUpdate:visible": _cache[3] || (_cache[3] = function($event) {
     default: withCtx(function() {
-      return [createElementVNode("div", _hoisted_2, [createElementVNode("div", _hoisted_3, [(openBlock(), createElementBlock(
+      return [createElementVNode("div", _hoisted_2$1, [createElementVNode("div", _hoisted_3$1, [(openBlock(), createElementBlock(
         Fragment,
@@ -253,20 +248,30 @@ null,
         "div",
-        _hoisted_4,
-        [(openBlock(true), createElementBlock(
-          Fragment,
-          null,
-          renderList(_ctx.state.months, function(yearMonth) {
-            return openBlock(), createElementBlock("div", {
-              key: yearMonth,
-              class: "mt-4"
-            }, [createElementVNode(
+        _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_5,
-              toDisplayString(yearMonth.replace("/", "年") + "月"),
+              _hoisted_6$1,
+              toDisplayString(_ctx.formatDate(scopeSlots.item.yearMonth, _ctx.t("ui.datepicker.yearMonth", {
+                year: "yyyy",
+                month: "MM"
+              }))),
               1
               /* TEXT */
-            ), createElementVNode("div", _hoisted_6, [(openBlock(true), createElementBlock(
+            ), createElementVNode("div", _hoisted_7$1, [(openBlock(true), createElementBlock(
               Fragment,
               null,
-              renderList(_ctx.getWeeksByMonth(yearMonth), function(item, week) {
+              renderList(_ctx.getWeeksByMonth(scopeSlots.item.yearMonth), function(item, week) {
                 return openBlock(), createElementBlock("div", {
@@ -286,3 +291,3 @@ key: week,
                         return _ctx.selectOption({
-                          yearMonth,
+                          value: scopeSlots.item.yearMonth,
                           index: index + week * 7
@@ -293,3 +298,3 @@ });
                       data: _ctx.getDate({
-                        yearMonth,
+                        yearMonth: scopeSlots.item.yearMonth,
                         index: index + week * 7
@@ -304,3 +309,3 @@ })
                             class: normalizeClass(["flex-1", {
-                              "bg-color-info-primary-subtler": ["end", "inner"].includes(_ctx.getSelectedPosition(data.date)) && _ctx.state.date.length === 2
+                              "bg-color-info-primary-subtler": !data.disabled && _ctx.state.date.length === 2 && ["end", "inner"].includes(_ctx.getSelectedPosition(data.value))
                             }])
@@ -314,7 +319,11 @@ },
                           {
-                            class: normalizeClass(["w-9 h-9", {
-                              "bg-color-info-primary-subtler": ["inner"].includes(_ctx.getSelectedPosition(data.date))
+                            class: normalizeClass(_ctx.m("w-9 h-9", {
+                              "text-color-brand border-0.5 border-current": data.isToday
                             }, {
-                              "bg-color-brand text-white": ["start", "end"].includes(_ctx.getSelectedPosition(data.date))
-                            }])
+                              "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
+                            }))
                           },
@@ -336,3 +345,3 @@ [renderSlot(_ctx.$slots, "default", {
                             class: normalizeClass(["flex-1", {
-                              "bg-color-info-primary-subtler": ["start", "inner"].includes(_ctx.getSelectedPosition(data.date)) && _ctx.state.date.length === 2
+                              "bg-color-info-primary-subtler": !data.disabled && _ctx.state.date.length === 2 && _ctx.state.selected.length > 1 && ["start", "inner"].includes(_ctx.getSelectedPosition(data.value))
                             }])
@@ -347,3 +356,3 @@ },
                       /* DYNAMIC */
-                    }, 1032, ["data"])], 10, _hoisted_7);
+                    }, 1032, ["data"])], 10, _hoisted_8$1);
                   }),
@@ -356,22 +365,36 @@ 64
               /* KEYED_FRAGMENT */
-            ))])]);
+            ))])])];
           }),
-          128
-          /* KEYED_FRAGMENT */
-        ))],
+          _: 3
+          /* FORWARDED */
+        }, 8, ["style", "items", "item-size", "buffer", "onScrollStart", "onScrollEnd"])],
         512
         /* NEED_PATCH */
-      ), createElementVNode("div", _hoisted_8, [["datetimerange", "daterange"].includes(_ctx.type) && _ctx.state.date.length ? (openBlock(), createElementBlock("div", _hoisted_9, [createElementVNode("div", _hoisted_10, [createElementVNode(
+      ), 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_11,
-        toDisplayString(_ctx.getFormatDate(_ctx.state.date[0], "年", "月", "日")),
+        _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_12, [["datetimerange"].includes(_ctx.type) ? (openBlock(), createElementBlock("div", _hoisted_13)) : createCommentVNode("v-if", true)]), createElementVNode("div", _hoisted_14, [_ctx.state.btnDisabled ? (openBlock(), createElementBlock("span", _hoisted_15, "结束时间")) : (openBlock(), createElementBlock(
+      ), createElementVNode("div", _hoisted_13$1, [["datetimerange"].includes(_ctx.type) ? (openBlock(), createElementBlock("div", _hoisted_14$1)) : createCommentVNode("v-if", true)]), createElementVNode("div", _hoisted_15$1, [_ctx.state.btnDisabled ? (openBlock(), createElementBlock(
         "span",
-        _hoisted_16,
-        toDisplayString(_ctx.getFormatDate(_ctx.state.date[1], "年", "月", "日")),
+        _hoisted_16$1,
+        toDisplayString(_ctx.t("ui.datepicker.endTime")),
         1
         /* TEXT */
-      ))])]), _ctx.type === "datetimerange" ? (openBlock(), createElementBlock("div", _hoisted_17, [createElementVNode(
+      )) : (openBlock(), createElementBlock(
+        "span",
+        _hoisted_17,
+        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_18, [createElementVNode(
         "div",
@@ -387,3 +410,3 @@ {
         /* TEXT */
-      ), _hoisted_18, createElementVNode(
+      ), _hoisted_19, createElementVNode(
         "div",
@@ -399,9 +422,13 @@ {
         /* TEXT */
-      )])) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true), ["datetime"].includes(_ctx.type) && _ctx.state.date ? (openBlock(), createElementBlock("div", _hoisted_19, [createElementVNode("div", _hoisted_20, [createElementVNode(
+      )])) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true), ["datetime"].includes(_ctx.type) && _ctx.state.date ? (openBlock(), createElementBlock("div", _hoisted_20, [createElementVNode("div", _hoisted_21, [createElementVNode(
         "div",
-        _hoisted_21,
-        toDisplayString(_ctx.getFormatDate(_ctx.state.date, "年", "月", "日")),
+        _hoisted_22,
+        toDisplayString(_ctx.formatDate(_ctx.state.date, _ctx.t("ui.datepicker.yearMonthDay", {
+          year: "yyyy",
+          month: "MM",
+          day: "dd"
+        }))),
         1
         /* TEXT */
-      ), _hoisted_22, createElementVNode(
+      ), _hoisted_23, createElementVNode(
         "div",
@@ -417,5 +444,5 @@ {
         /* TEXT */
-      )])])) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_23, [createVNode(_component_tiny_button, {
-        tiny_mode: "mobile-first",
-        "button-class": "w-full",
+      )])])) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_24, [createVNode(_component_tiny_button, {
+        aui_mode: "mobile-first",
+        "custom-class": "w-full",
         disabled: _ctx.state.btnDisabled,
@@ -440,3 +467,3 @@ type: "primary",
     /* FORWARDED */
-  }, 8, ["title", "visible"]), createVNode(_component_tiny_time_picker_mobile, {
+  }, 8, ["title", "lock-scroll", "visible"]), createVNode(_component_tiny_time_picker_mobile, {
     modelValue: _ctx.state.time,
@@ -446,3 +473,3 @@ "onUpdate:modelValue": _cache[4] || (_cache[4] = function($event) {
     }),
-    title: "时间选择",
+    title: _ctx.t("ui.datepicker.selectTime"),
     visible: _ctx.state.timeVisible,
@@ -453,6 +480,315 @@ "onUpdate:visible": _cache[5] || (_cache[5] = function($event) {
     onConfirm: _ctx.timeConfirm
-  }, null, 8, ["modelValue", "visible", "onConfirm"])]);
+  }, null, 8, ["modelValue", "title", "visible", "onConfirm"])]);
 }
-var DatePickerMobile = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
-var version = "3.10.0";
+var NormalTemplate = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
+var _sfc_main = defineComponent({
+  components: {
+    TinyOption: Option,
+    TinyActionSheet: ActionSheet,
+    TinyRecycleScroller: RecycleScroller,
+    TinyButton: Button
+  },
+  emits: ["click", "confirm", "update:visible", "update:modelValue", "time-confirm"],
+  props: [].concat(props, ["modelValue", "visible", "title", "type", "lockScroll", "pickerOptions"]),
+  setup: function setup2(props2, context) {
+    return _setup({
+      props: props2,
+      context,
+      renderless,
+      api
+    });
+  }
+});
+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]
+                    }, {
+                      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, {
+        aui_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__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+var $constants = {
+  TYPE: {
+    DATE: "date",
+    DATE_TIME: "datetime",
+    DATE_RANGE: "daterange",
+    DATE_TIME_RANGE: "datetimerange",
+    YEAR_MONTH_RANGE: "year-month-range",
+    YEAR_MONTH: "year-month"
+  }
+};
+var template = function template2(mode, props2) {
+  var _$constants$TYPE = $constants.TYPE, YEAR_MONTH_RANGE = _$constants$TYPE.YEAR_MONTH_RANGE, YEAR_MONTH = _$constants$TYPE.YEAR_MONTH;
+  return [YEAR_MONTH_RANGE, YEAR_MONTH].includes(props2.type) ? YearMonthTemplate : NormalTemplate;
+};
+var DatePickerMobile = defineComponent({
+  name: $prefix + "DatePickerMobile",
+  props: _extends({}, $props, {
+    _constants: {
+      type: Object,
+      default: function _default() {
+        return $constants;
+      }
+    },
+    modelValue: [Number, String, Array, Date],
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    title: String,
+    type: {
+      type: String,
+      default: "date",
+      validator: function validator(value) {
+        return !value || ~Object.values($constants.TYPE).indexOf(value);
+      }
+    },
+    lockScroll: {
+      type: Boolean,
+      default: true
+    },
+    pickerOptions: {
+      type: Object,
+      default: function _default2() {
+        return {
+          disabledDate: null
+        };
+      }
+    }
+  }),
+  setup: function setup3(props2, context) {
+    return $setup({
+      props: props2,
+      context,
+      template
+    });
+  }
+});
+var version = "3.11.0-alpha.0";
 DatePickerMobile.model = {
@@ -459,0 +795,0 @@ prop: "modelValue",

package.json

 {
   "name": "@opentiny/vue-date-picker-mobile-first",
-  "version": "3.10.0",
+  "version": "3.11.0-alpha.0",
   "description": "",
@@ -10,7 +10,7 @@ "main": "./lib/index.js",
   "dependencies": {
-    "@opentiny/vue-action-sheet": "~3.10.0",
-    "@opentiny/vue-button": "~3.10.0",
-    "@opentiny/vue-common": "~3.10.0",
-    "@opentiny/vue-time-picker-mobile": "~3.10.0",
-    "@opentiny/vue-renderless": "~3.10.0"
+    "@opentiny/vue-action-sheet": "~3.11.0-alpha.0",
+    "@opentiny/vue-button": "~3.11.0-alpha.0",
+    "@opentiny/vue-common": "~3.11.0-alpha.0",
+    "@opentiny/vue-time-picker-mobile": "~3.11.0-alpha.0",
+    "@opentiny/vue-renderless": "~3.11.0-alpha.0"
   },
@@ -17,0 +17,0 @@ "license": "MIT",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

34644

increased by77.31%

Number of package files

8

increased by33.33%

Lines of code

910

increased by81.27%

Worsened metrics

Number of low quality alerts

2

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@opentiny/vue-action-sheet@3.11.0(transitive)

• + Added@opentiny/vue-button@3.11.0(transitive)

• + Added@opentiny/vue-cascader-select@3.11.0(transitive)

• + Added@opentiny/vue-common@3.11.0(transitive)

• + Added@opentiny/vue-drawer@3.11.0(transitive)

• + Added@opentiny/vue-icon@3.11.0(transitive)

• + Added@opentiny/vue-locale@3.11.0(transitive)

• + Added@opentiny/vue-renderless@3.11.8(transitive)

• + Added@opentiny/vue-theme@3.11.6(transitive)

• + Added@opentiny/vue-theme-mobile@3.11.1(transitive)

• + Added@opentiny/vue-time-picker-mobile@3.11.0(transitive)

• + Addedcolor@4.2.3(transitive)

• + Addedcolor-convert@2.0.1(transitive)

• + Addedcolor-name@1.1.4(transitive)

• + Addedcolor-string@1.9.1(transitive)

• + Addedis-arrayish@0.3.2(transitive)

• + Addedsimple-swizzle@0.2.2(transitive)

• - Removed@opentiny/vue-action-sheet@3.10.0(transitive)

• - Removed@opentiny/vue-button@3.10.0(transitive)

• - Removed@opentiny/vue-cascader-select@3.10.0(transitive)

• - Removed@opentiny/vue-common@3.10.0(transitive)

• - Removed@opentiny/vue-drawer@3.10.0(transitive)

• - Removed@opentiny/vue-icon@3.10.1(transitive)

• - Removed@opentiny/vue-locale@3.10.0(transitive)

• - Removed@opentiny/vue-renderless@3.10.7(transitive)

• - Removed@opentiny/vue-theme@3.10.4(transitive)

• - Removed@opentiny/vue-theme-mobile@3.10.1(transitive)

• - Removed@opentiny/vue-time-picker-mobile@3.10.0(transitive)

• Updated@opentiny/vue-action-sheet@~3.11.0-alpha.0

• Updated@opentiny/vue-button@~3.11.0-alpha.0

• Updated@opentiny/vue-common@~3.11.0-alpha.0

• Updated@opentiny/vue-renderless@~3.11.0-alpha.0

• Updated@opentiny/vue-time-picker-mobile@~3.11.0-alpha.0