@opentiny/vue-picker - npm Package Compare versions

Comparing version 3.17.0 to 3.18.0

lib/index.js

@@ -186,3 +186,3 @@ import { defineComponent, directive, setup, $prefix, $props, $setup } from '@opentiny/vue-common';
   for (var _iterator = _createForOfIteratorHelperLoose(props), _step; !(_step = _iterator()).done; ) {
-    var _step$value = _step.value, key = _step$value[0], val = _step$value[1];
+    var _step$value2 = _step.value, key = _step$value2[0], val = _step$value2[1];
     target[key] = val;
@@ -548,96 +548,126 @@ }
     },
-    [_ctx.shape === "filter" ? withDirectives((openBlock(), createBlock(_component_tiny_filter_box, {
-      key: 0,
-      onClick: _ctx.handleFocus,
-      "show-close": _ctx.clearable,
-      placeholder: _ctx.placeholder,
-      disabled: _ctx.state.pickerDisabled,
-      label: _ctx.label,
-      tip: _ctx.tip,
-      value: _ctx.state.displayValue.toString(),
-      "drop-down-visible": _ctx.state.pickerVisible,
-      blank: _ctx.blank
-    }, null, 8, ["onClick", "show-close", "placeholder", "disabled", "label", "tip", "value", "drop-down-visible", "blank"])), [[_directive_clickoutside, _ctx.handleClose, void 0, {
+    [_ctx.shape === "filter" ? withDirectives((openBlock(), createBlock(
+      _component_tiny_filter_box,
+      {
+        key: 0,
+        onClick: _ctx.handleFocus,
+        "show-close": _ctx.clearable,
+        placeholder: _ctx.placeholder,
+        disabled: _ctx.state.pickerDisabled,
+        label: _ctx.label,
+        tip: _ctx.tip,
+        value: _ctx.state.displayValue.toString(),
+        "drop-down-visible": _ctx.state.pickerVisible,
+        blank: _ctx.blank
+      },
+      null,
+      8,
+      ["onClick", "show-close", "placeholder", "disabled", "label", "tip", "value", "drop-down-visible", "blank"]
+    )), [[_directive_clickoutside, _ctx.handleClose, void 0, {
       mousedown: true
-    }]]) : !_ctx.state.ranged ? withDirectives((openBlock(), createBlock(_component_tiny_input, mergeProps({
-      key: 1,
-      tabindex: _ctx.tabindex,
-      "data-tag": "tiny-date-editor",
-      readonly: _ctx.state.isMobileScreen || !_ctx.editable || _ctx.readonly || _ctx.state.type === "dates" || _ctx.state.type === "week",
-      disabled: _ctx.state.pickerDisabled,
-      size: _ctx.state.pickerSize,
-      name: _ctx.name
-    }, _ctx.state.firstInputId, {
-      placeholder: _ctx.placeholder,
-      onFocus: _ctx.handleFocus,
-      onKeydown: _ctx.handleKeydown,
-      "model-value": _ctx.state.displayValue,
-      title: _ctx.state.type === "date" ? "" : _ctx.state.displayValue,
-      "display-only": _ctx.state.isDisplayOnly,
-      "display-only-content": _ctx.state.displayValue,
-      onInput: _ctx.handleInput,
-      onChange: _ctx.handleChange,
-      onMouseenter: _ctx.handleMouseEnter,
-      onMouseleave: _cache[2] || (_cache[2] = function($event) {
-        return _ctx.state.showClose = false;
+    }]]) : !_ctx.state.ranged ? withDirectives((openBlock(), createBlock(
+      _component_tiny_input,
+      mergeProps({
+        key: 1,
+        tabindex: _ctx.tabindex,
+        "data-tag": "tiny-date-editor",
+        readonly: _ctx.state.isMobileMode || !_ctx.editable || _ctx.readonly || _ctx.state.type === "dates" || _ctx.state.type === "week",
+        disabled: _ctx.state.pickerDisabled,
+        size: _ctx.state.pickerSize,
+        name: _ctx.name
+      }, _ctx.state.firstInputId, {
+        placeholder: _ctx.placeholder,
+        onFocus: _ctx.handleFocus,
+        onKeydown: _ctx.handleKeydown,
+        "model-value": _ctx.state.displayValue,
+        title: _ctx.state.type === "date" ? "" : _ctx.state.displayValue,
+        "display-only": _ctx.state.isDisplayOnly,
+        "display-only-content": _ctx.state.displayValue,
+        onInput: _ctx.handleInput,
+        onChange: _ctx.handleChange,
+        onMouseenter: _ctx.handleMouseEnter,
+        onMouseleave: _cache[2] || (_cache[2] = function($event) {
+          return _ctx.state.showClose = false;
+        }),
+        "validate-event": false,
+        "custom-class": "sm:border " + _ctx.gcls(_ctx.state.type)
       }),
-      "validate-event": false,
-      "custom-class": "sm:border " + _ctx.gcls(_ctx.state.type)
-    }), createSlots({
-      suffix: withCtx(function() {
-        return [createElementVNode("i", _hoisted_1, [!_ctx.state.isMobileScreen ? (openBlock(), createBlock(Transition, {
-          key: 0,
-          name: "tiny-transition-icon-scale-in"
-        }, {
-          default: withCtx(function() {
-            return [_ctx.state.haveTrigger ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.state.showClose ? _ctx.clearIcon : null), {
-              key: 0,
-              onClick: _ctx.handleClickIcon,
-              onMouseenter: _cache[0] || (_cache[0] = function($event) {
-                return _ctx.state.showClose = true;
+      createSlots({
+        suffix: withCtx(function() {
+          return [createElementVNode("i", _hoisted_1, [!_ctx.state.isMobileMode ? (openBlock(), createBlock(Transition, {
+            key: 0,
+            name: "tiny-transition-icon-scale-in"
+          }, {
+            default: withCtx(function() {
+              return [_ctx.state.haveTrigger ? (openBlock(), createBlock(
+                resolveDynamicComponent(_ctx.state.showClose ? _ctx.clearIcon : null),
+                {
+                  key: 0,
+                  onClick: _ctx.handleClickIcon,
+                  onMouseenter: _cache[0] || (_cache[0] = function($event) {
+                    return _ctx.state.showClose = true;
+                  }),
+                  onMouseleave: _cache[1] || (_cache[1] = function($event) {
+                    return _ctx.state.showClose = false;
+                  }),
+                  class: "fill-color-text-placeholder hover:fill-color-text-primary"
+                },
+                null,
+                40,
+                ["onClick"]
+              )) : createCommentVNode("v-if", true)];
+            }),
+            _: 1
+            /* STABLE */
+          })) : createCommentVNode("v-if", true), (openBlock(), createBlock(
+            resolveDynamicComponent(_ctx.state.triggerClass),
+            {
+              onClick: _ctx.handleFocus,
+              "custom-class": "h-5 w-5 sm:h-4 sm:w-4",
+              class: normalizeClass(!_ctx.state.isDisplayOnly && _ctx.state.pickerDisabled ? "fill-color-icon-placeholder sm:fill-color-icon-disabled" : "fill-color-icon-secondary sm:fill-color-text-placeholder")
+            },
+            null,
+            8,
+            ["onClick", "class"]
+          ))])];
+        }),
+        _: 2
+        /* DYNAMIC */
+      }, [_ctx.label ? {
+        name: "prefix",
+        fn: withCtx(function() {
+          return [createVNode(
+            _component_tiny_tooltip,
+            {
+              effect: "light",
+              content: _ctx.state.labelTooltip,
+              placement: "top",
+              onMouseenter: _ctx.handleEnterPickerlabel
+            },
+            {
+              default: withCtx(function() {
+                return [createElementVNode(
+                  "span",
+                  {
+                    "data-tag": "tiny-input__label",
+                    class: normalizeClass(_ctx.gcls("input-label")),
+                    ref: "label"
+                  },
+                  toDisplayString(_ctx.label),
+                  3
+                  /* TEXT, CLASS */
+                )];
               }),
-              onMouseleave: _cache[1] || (_cache[1] = function($event) {
-                return _ctx.state.showClose = false;
-              }),
-              class: "fill-color-text-placeholder hover:fill-color-text-primary"
-            }, null, 40, ["onClick"])) : createCommentVNode("v-if", true)];
-          }),
-          _: 1
-          /* STABLE */
-        })) : createCommentVNode("v-if", true), (openBlock(), createBlock(resolveDynamicComponent(_ctx.state.triggerClass), {
-          onClick: _ctx.handleFocus,
-          "custom-class": "h-5 w-5 sm:h-4 sm:w-4",
-          class: normalizeClass(!_ctx.state.isDisplayOnly && _ctx.state.pickerDisabled ? "fill-color-icon-placeholder sm:fill-color-icon-disabled" : "fill-color-icon-secondary sm:fill-color-text-placeholder")
-        }, null, 8, ["onClick", "class"]))])];
-      }),
-      _: 2
-      /* DYNAMIC */
-    }, [_ctx.label ? {
-      name: "prefix",
-      fn: withCtx(function() {
-        return [createVNode(_component_tiny_tooltip, {
-          effect: "light",
-          content: _ctx.state.labelTooltip,
-          placement: "top",
-          onMouseenter: _ctx.handleEnterPickerlabel
-        }, {
-          default: withCtx(function() {
-            return [createElementVNode(
-              "span",
-              {
-                "data-tag": "tiny-input__label",
-                class: normalizeClass(_ctx.gcls("input-label")),
-                ref: "label"
-              },
-              toDisplayString(_ctx.label),
-              3
-              /* TEXT, CLASS */
-            )];
-          }),
-          _: 1
-          /* STABLE */
-        }, 8, ["content", "onMouseenter"])];
-      }),
-      key: "0"
-    } : void 0]), 1040, ["tabindex", "readonly", "disabled", "size", "name", "placeholder", "onFocus", "onKeydown", "model-value", "title", "display-only", "display-only-content", "onInput", "onChange", "onMouseenter", "custom-class"])), [[_directive_clickoutside, _ctx.handleClose, void 0, {
+              _: 1
+              /* STABLE */
+            },
+            8,
+            ["content", "onMouseenter"]
+          )];
+        }),
+        key: "0"
+      } : void 0]),
+      1040,
+      ["tabindex", "readonly", "disabled", "size", "name", "placeholder", "onFocus", "onKeydown", "model-value", "title", "display-only", "display-only-content", "onInput", "onChange", "onMouseenter", "custom-class"]
+    )), [[_directive_clickoutside, _ctx.handleClose, void 0, {
       mousedown: true
@@ -663,24 +693,30 @@ }]]) : withDirectives((openBlock(), createElementBlock(
       },
-      [createVNode(_component_tiny_tooltip, {
-        effect: "light",
-        content: _ctx.state.labelTooltip,
-        placement: "top",
-        onMouseenter: _ctx.handleEnterPickerlabel
-      }, {
-        default: withCtx(function() {
-          return [_ctx.label ? (openBlock(), createElementBlock(
-            "span",
-            {
-              key: 0,
-              "data-tag": "tiny-input__label",
-              ref: "label"
-            },
-            toDisplayString(_ctx.label),
-            513
-            /* TEXT, NEED_PATCH */
-          )) : createCommentVNode("v-if", true)];
-        }),
-        _: 1
-        /* STABLE */
-      }, 8, ["content", "onMouseenter"]), !_ctx.state.isDisplayOnly ? (openBlock(), createElementBlock(
+      [createVNode(
+        _component_tiny_tooltip,
+        {
+          effect: "light",
+          content: _ctx.state.labelTooltip,
+          placement: "top",
+          onMouseenter: _ctx.handleEnterPickerlabel
+        },
+        {
+          default: withCtx(function() {
+            return [_ctx.label ? (openBlock(), createElementBlock(
+              "span",
+              {
+                key: 0,
+                "data-tag": "tiny-input__label",
+                ref: "label"
+              },
+              toDisplayString(_ctx.label),
+              513
+              /* TEXT, NEED_PATCH */
+            )) : createCommentVNode("v-if", true)];
+          }),
+          _: 1
+          /* STABLE */
+        },
+        8,
+        ["content", "onMouseenter"]
+      ), !_ctx.state.isDisplayOnly ? (openBlock(), createElementBlock(
         Fragment,
@@ -690,23 +726,29 @@ {
         },
-        [createElementVNode("input", mergeProps({
-          autocomplete: "off",
-          placeholder: _ctx.startPlaceholder,
-          value: _ctx.state.displayValue && _ctx.state.displayValue[0],
-          title: _ctx.state.displayValue && _ctx.state.displayValue[0],
-          disabled: _ctx.state.pickerDisabled
-        }, _ctx.state.firstInputId, {
-          readonly: _ctx.state.isMobileScreen || !_ctx.editable || _ctx.readonly,
-          name: _ctx.name && _ctx.name[0],
-          onInput: _cache[3] || (_cache[3] = function() {
-            return _ctx.handleStartInput && _ctx.handleStartInput.apply(_ctx, arguments);
+        [createElementVNode(
+          "input",
+          mergeProps({
+            autocomplete: "off",
+            placeholder: _ctx.startPlaceholder,
+            value: _ctx.state.displayValue && _ctx.state.displayValue[0],
+            title: _ctx.state.displayValue && _ctx.state.displayValue[0],
+            disabled: _ctx.state.pickerDisabled
+          }, _ctx.state.firstInputId, {
+            readonly: _ctx.state.isMobileMode || !_ctx.editable || _ctx.readonly,
+            name: _ctx.name && _ctx.name[0],
+            onInput: _cache[3] || (_cache[3] = function() {
+              return _ctx.handleStartInput && _ctx.handleStartInput.apply(_ctx, arguments);
+            }),
+            onChange: _cache[4] || (_cache[4] = function() {
+              return _ctx.handleStartChange && _ctx.handleStartChange.apply(_ctx, arguments);
+            }),
+            onFocus: _cache[5] || (_cache[5] = function() {
+              return _ctx.handleFocus && _ctx.handleFocus.apply(_ctx, arguments);
+            }),
+            "data-tag": "tiny-range-input",
+            class: _ctx.gcls("range-input")
           }),
-          onChange: _cache[4] || (_cache[4] = function() {
-            return _ctx.handleStartChange && _ctx.handleStartChange.apply(_ctx, arguments);
-          }),
-          onFocus: _cache[5] || (_cache[5] = function() {
-            return _ctx.handleFocus && _ctx.handleFocus.apply(_ctx, arguments);
-          }),
-          "data-tag": "tiny-range-input",
-          class: _ctx.gcls("range-input")
-        }), null, 16, _hoisted_2), renderSlot(_ctx.$slots, "range-separator", {}, function() {
+          null,
+          16,
+          _hoisted_2
+        ), renderSlot(_ctx.$slots, "range-separator", {}, function() {
           return [typeof _ctx.rangeSeparator === "string" ? (openBlock(), createElementBlock(
@@ -729,23 +771,29 @@ "span",
           }))];
-        }), createElementVNode("input", mergeProps({
-          autocomplete: "off",
-          placeholder: _ctx.endPlaceholder,
-          value: _ctx.state.displayValue && _ctx.state.displayValue[1],
-          title: _ctx.state.displayValue && _ctx.state.displayValue[1],
-          disabled: _ctx.state.pickerDisabled
-        }, _ctx.state.secondInputId, {
-          readonly: _ctx.state.isMobileScreen || !_ctx.editable || _ctx.readonly,
-          name: _ctx.name && _ctx.name[1],
-          onInput: _cache[6] || (_cache[6] = function() {
-            return _ctx.handleEndInput && _ctx.handleEndInput.apply(_ctx, arguments);
+        }), createElementVNode(
+          "input",
+          mergeProps({
+            autocomplete: "off",
+            placeholder: _ctx.endPlaceholder,
+            value: _ctx.state.displayValue && _ctx.state.displayValue[1],
+            title: _ctx.state.displayValue && _ctx.state.displayValue[1],
+            disabled: _ctx.state.pickerDisabled
+          }, _ctx.state.secondInputId, {
+            readonly: _ctx.state.isMobileMode || !_ctx.editable || _ctx.readonly,
+            name: _ctx.name && _ctx.name[1],
+            onInput: _cache[6] || (_cache[6] = function() {
+              return _ctx.handleEndInput && _ctx.handleEndInput.apply(_ctx, arguments);
+            }),
+            onChange: _cache[7] || (_cache[7] = function() {
+              return _ctx.handleEndChange && _ctx.handleEndChange.apply(_ctx, arguments);
+            }),
+            onFocus: _cache[8] || (_cache[8] = function() {
+              return _ctx.handleFocus && _ctx.handleFocus.apply(_ctx, arguments);
+            }),
+            "data-tag": "tiny-range-input",
+            class: _ctx.gcls("range-input")
           }),
-          onChange: _cache[7] || (_cache[7] = function() {
-            return _ctx.handleEndChange && _ctx.handleEndChange.apply(_ctx, arguments);
-          }),
-          onFocus: _cache[8] || (_cache[8] = function() {
-            return _ctx.handleFocus && _ctx.handleFocus.apply(_ctx, arguments);
-          }),
-          "data-tag": "tiny-range-input",
-          class: _ctx.gcls("range-input")
-        }), null, 16, _hoisted_3), !_ctx.state.isMobileScreen && _ctx.state.haveTrigger ? (openBlock(), createElementBlock(
+          null,
+          16,
+          _hoisted_3
+        ), !_ctx.state.isMobileMode && _ctx.state.haveTrigger ? (openBlock(), createElementBlock(
           "i",
@@ -780,6 +828,12 @@ {
           },
-          [(openBlock(), createBlock(resolveDynamicComponent(_ctx.state.triggerClass), {
-            "custom-class": "h-5 w-5 sm:h-4 sm:w-4",
-            class: normalizeClass(!_ctx.state.isDisplayOnly && _ctx.state.pickerDisabled ? "fill-color-icon-placeholder sm:fill-color-icon-secondary" : "fill-color-icon-secondary sm:fill-color-text-placeholder")
-          }, null, 8, ["class"]))],
+          [(openBlock(), createBlock(
+            resolveDynamicComponent(_ctx.state.triggerClass),
+            {
+              "custom-class": "h-5 w-5 sm:h-4 sm:w-4",
+              class: normalizeClass(!_ctx.state.isDisplayOnly && _ctx.state.pickerDisabled ? "fill-color-icon-placeholder sm:fill-color-icon-secondary" : "fill-color-icon-secondary sm:fill-color-text-placeholder")
+            },
+            null,
+            8,
+            ["class"]
+          ))],
           2
@@ -790,22 +844,28 @@ /* CLASS */
         /* STABLE_FRAGMENT */
-      )) : createCommentVNode("v-if", true), _ctx.state.isDisplayOnly ? (openBlock(), createBlock(_component_tiny_tooltip, {
-        key: 1,
-        "data-tag": "tiny-range-editor-display-only",
-        content: _ctx.state.displayOnlyTooltip,
-        effect: "light",
-        placement: "top",
-        onMouseenter: _ctx.handleEnterDisplayOnlyContent
-      }, {
-        default: withCtx(function() {
-          return [createElementVNode(
-            "span",
-            null,
-            toDisplayString(_ctx.state.displayValue && _ctx.state.displayValue.join(" " + _ctx.t("ui.datepicker.to") + " ")),
-            1
-            /* TEXT */
-          )];
-        }),
-        _: 1
-        /* STABLE */
-      }, 8, ["content", "onMouseenter"])) : createCommentVNode("v-if", true)],
+      )) : createCommentVNode("v-if", true), _ctx.state.isDisplayOnly ? (openBlock(), createBlock(
+        _component_tiny_tooltip,
+        {
+          key: 1,
+          "data-tag": "tiny-range-editor-display-only",
+          content: _ctx.state.displayOnlyTooltip,
+          effect: "light",
+          placement: "top",
+          onMouseenter: _ctx.handleEnterDisplayOnlyContent
+        },
+        {
+          default: withCtx(function() {
+            return [createElementVNode(
+              "span",
+              null,
+              toDisplayString(_ctx.state.displayValue && _ctx.state.displayValue.join(" " + _ctx.t("ui.datepicker.to") + " ")),
+              1
+              /* TEXT */
+            )];
+          }),
+          _: 1
+          /* STABLE */
+        },
+        8,
+        ["content", "onMouseenter"]
+      )) : createCommentVNode("v-if", true)],
       34
@@ -815,50 +875,68 @@ /* CLASS, NEED_HYDRATION */
       mousedown: true
-    }]]), !_ctx.state.isMobileScreen ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.state.panel), {
-      key: 3,
-      step: _ctx.step,
-      "show-week-number": _ctx.showWeekNumber,
-      "format-weeks": _ctx.formatWeeks,
-      ref: "picker",
-      visible: _ctx.state.pickerVisible,
-      onPick: _ctx.handlePick,
-      onSelectRange: _ctx.handleSelectRange,
-      onSelectChange: _ctx.handleSelectChange
-    }, null, 40, ["step", "show-week-number", "format-weeks", "visible", "onPick", "onSelectRange", "onSelectChange"])) : createCommentVNode("v-if", true), _ctx.state.isMobileScreen && _ctx.state.isDateMobileComponent ? (openBlock(), createBlock(_component_tiny_date_picker_mobile, {
-      key: 4,
-      ref: "datePickerMobile",
-      modelValue: _ctx.state.dateMobileOption.value,
-      "onUpdate:modelValue": _cache[14] || (_cache[14] = function($event) {
-        return _ctx.state.dateMobileOption.value = $event;
-      }),
-      title: _ctx.title,
-      clearable: _ctx.clearable,
-      step: _ctx.step,
-      "show-time-second": _ctx.state.showSeconds,
-      "range-separator": _ctx.rangeSeparator,
-      "end-placeholder": _ctx.endPlaceholder,
-      "custom-class": "max-h-[80%]",
-      type: _ctx.state.dateMobileOption.type,
-      visible: _ctx.state.dateMobileOption.visible,
-      "picker-options": _ctx.pickerOptions,
-      onConfirm: _ctx.emitInput,
-      onClear: _ctx.emitInput,
-      "onUpdate:visible": _ctx.dateMobileToggle
-    }, null, 8, ["modelValue", "title", "clearable", "step", "show-time-second", "range-separator", "end-placeholder", "type", "visible", "picker-options", "onConfirm", "onClear", "onUpdate:visible"])) : createCommentVNode("v-if", true), _ctx.state.isMobileScreen && _ctx.state.isTimeMobileComponent ? (openBlock(), createBlock(_component_tiny_time_picker_mobile, {
-      key: 5,
-      ref: "datePickerMobile",
-      modelValue: _ctx.state.timeMobileOption.value,
-      "onUpdate:modelValue": _cache[15] || (_cache[15] = function($event) {
-        return _ctx.state.timeMobileOption.value = $event;
-      }),
-      "default-value": _ctx.state.timeMobileOption.defaultValue,
-      title: _ctx.title,
-      clearable: _ctx.clearable,
-      step: _ctx.step,
-      "show-seconds": _ctx.state.showSeconds,
-      "custom-class": "max-h-[80%]",
-      type: _ctx.state.timeMobileOption.type,
-      visible: _ctx.state.timeMobileOption.visible,
-      onConfirm: _ctx.timeMobileConfirm,
-      "onUpdate:visible": _ctx.timeMobileToggle
-    }, null, 8, ["modelValue", "default-value", "title", "clearable", "step", "show-seconds", "type", "visible", "onConfirm", "onUpdate:visible"])) : createCommentVNode("v-if", true)],
+    }]]), !_ctx.state.isMobileMode ? (openBlock(), createBlock(
+      resolveDynamicComponent(_ctx.state.panel),
+      {
+        key: 3,
+        step: _ctx.step,
+        "show-week-number": _ctx.showWeekNumber,
+        "format-weeks": _ctx.formatWeeks,
+        ref: "picker",
+        visible: _ctx.state.pickerVisible,
+        onPick: _ctx.handlePick,
+        onSelectRange: _ctx.handleSelectRange,
+        onSelectChange: _ctx.handleSelectChange
+      },
+      null,
+      40,
+      ["step", "show-week-number", "format-weeks", "visible", "onPick", "onSelectRange", "onSelectChange"]
+    )) : createCommentVNode("v-if", true), _ctx.state.isMobileMode && _ctx.state.isDateMobileComponent ? (openBlock(), createBlock(
+      _component_tiny_date_picker_mobile,
+      {
+        key: 4,
+        ref: "datePickerMobile",
+        modelValue: _ctx.state.dateMobileOption.value,
+        "onUpdate:modelValue": _cache[14] || (_cache[14] = function($event) {
+          return _ctx.state.dateMobileOption.value = $event;
+        }),
+        title: _ctx.title,
+        clearable: _ctx.clearable,
+        step: _ctx.step,
+        "show-time-second": _ctx.state.showSeconds,
+        "range-separator": _ctx.rangeSeparator,
+        "end-placeholder": _ctx.endPlaceholder,
+        "custom-class": "max-h-[80%]",
+        type: _ctx.state.dateMobileOption.type,
+        visible: _ctx.state.dateMobileOption.visible,
+        "picker-options": _ctx.pickerOptions,
+        onConfirm: _ctx.emitInput,
+        onClear: _ctx.emitInput,
+        "onUpdate:visible": _ctx.dateMobileToggle
+      },
+      null,
+      8,
+      ["modelValue", "title", "clearable", "step", "show-time-second", "range-separator", "end-placeholder", "type", "visible", "picker-options", "onConfirm", "onClear", "onUpdate:visible"]
+    )) : createCommentVNode("v-if", true), _ctx.state.isMobileMode && _ctx.state.isTimeMobileComponent ? (openBlock(), createBlock(
+      _component_tiny_time_picker_mobile,
+      {
+        key: 5,
+        ref: "datePickerMobile",
+        modelValue: _ctx.state.timeMobileOption.value,
+        "onUpdate:modelValue": _cache[15] || (_cache[15] = function($event) {
+          return _ctx.state.timeMobileOption.value = $event;
+        }),
+        "default-value": _ctx.state.timeMobileOption.defaultValue,
+        title: _ctx.title,
+        clearable: _ctx.clearable,
+        step: _ctx.step,
+        "show-seconds": _ctx.state.showSeconds,
+        "custom-class": "max-h-[80%]",
+        type: _ctx.state.timeMobileOption.type,
+        visible: _ctx.state.timeMobileOption.visible,
+        onConfirm: _ctx.timeMobileConfirm,
+        "onUpdate:visible": _ctx.timeMobileToggle
+      },
+      null,
+      8,
+      ["modelValue", "default-value", "title", "clearable", "step", "show-seconds", "type", "visible", "onConfirm", "onUpdate:visible"]
+    )) : createCommentVNode("v-if", true)],
     2
@@ -903,3 +981,3 @@ /* CLASS */
 });
-var version = "3.17.0";
+var version = "3.18.0";
 Picker.model = {
@@ -906,0 +984,0 @@ prop: "modelValue",

lib/mobile-first.js

@@ -183,3 +183,3 @@ import { renderless, api } from '@opentiny/vue-renderless/picker/vue';
   for (var _iterator = _createForOfIteratorHelperLoose(props), _step; !(_step = _iterator()).done; ) {
-    var _step$value = _step.value, key = _step$value[0], val = _step$value[1];
+    var _step$value2 = _step.value, key = _step$value2[0], val = _step$value2[1];
     target[key] = val;
@@ -257,96 +257,126 @@ }
     },
-    [_ctx.shape === "filter" ? withDirectives((openBlock(), createBlock(_component_tiny_filter_box, {
-      key: 0,
-      onClick: _ctx.handleFocus,
-      "show-close": _ctx.clearable,
-      placeholder: _ctx.placeholder,
-      disabled: _ctx.state.pickerDisabled,
-      label: _ctx.label,
-      tip: _ctx.tip,
-      value: _ctx.state.displayValue.toString(),
-      "drop-down-visible": _ctx.state.pickerVisible,
-      blank: _ctx.blank
-    }, null, 8, ["onClick", "show-close", "placeholder", "disabled", "label", "tip", "value", "drop-down-visible", "blank"])), [[_directive_clickoutside, _ctx.handleClose, void 0, {
+    [_ctx.shape === "filter" ? withDirectives((openBlock(), createBlock(
+      _component_tiny_filter_box,
+      {
+        key: 0,
+        onClick: _ctx.handleFocus,
+        "show-close": _ctx.clearable,
+        placeholder: _ctx.placeholder,
+        disabled: _ctx.state.pickerDisabled,
+        label: _ctx.label,
+        tip: _ctx.tip,
+        value: _ctx.state.displayValue.toString(),
+        "drop-down-visible": _ctx.state.pickerVisible,
+        blank: _ctx.blank
+      },
+      null,
+      8,
+      ["onClick", "show-close", "placeholder", "disabled", "label", "tip", "value", "drop-down-visible", "blank"]
+    )), [[_directive_clickoutside, _ctx.handleClose, void 0, {
       mousedown: true
-    }]]) : !_ctx.state.ranged ? withDirectives((openBlock(), createBlock(_component_tiny_input, mergeProps({
-      key: 1,
-      tabindex: _ctx.tabindex,
-      "data-tag": "tiny-date-editor",
-      readonly: _ctx.state.isMobileScreen || !_ctx.editable || _ctx.readonly || _ctx.state.type === "dates" || _ctx.state.type === "week",
-      disabled: _ctx.state.pickerDisabled,
-      size: _ctx.state.pickerSize,
-      name: _ctx.name
-    }, _ctx.state.firstInputId, {
-      placeholder: _ctx.placeholder,
-      onFocus: _ctx.handleFocus,
-      onKeydown: _ctx.handleKeydown,
-      "model-value": _ctx.state.displayValue,
-      title: _ctx.state.type === "date" ? "" : _ctx.state.displayValue,
-      "display-only": _ctx.state.isDisplayOnly,
-      "display-only-content": _ctx.state.displayValue,
-      onInput: _ctx.handleInput,
-      onChange: _ctx.handleChange,
-      onMouseenter: _ctx.handleMouseEnter,
-      onMouseleave: _cache[2] || (_cache[2] = function($event) {
-        return _ctx.state.showClose = false;
+    }]]) : !_ctx.state.ranged ? withDirectives((openBlock(), createBlock(
+      _component_tiny_input,
+      mergeProps({
+        key: 1,
+        tabindex: _ctx.tabindex,
+        "data-tag": "tiny-date-editor",
+        readonly: _ctx.state.isMobileMode || !_ctx.editable || _ctx.readonly || _ctx.state.type === "dates" || _ctx.state.type === "week",
+        disabled: _ctx.state.pickerDisabled,
+        size: _ctx.state.pickerSize,
+        name: _ctx.name
+      }, _ctx.state.firstInputId, {
+        placeholder: _ctx.placeholder,
+        onFocus: _ctx.handleFocus,
+        onKeydown: _ctx.handleKeydown,
+        "model-value": _ctx.state.displayValue,
+        title: _ctx.state.type === "date" ? "" : _ctx.state.displayValue,
+        "display-only": _ctx.state.isDisplayOnly,
+        "display-only-content": _ctx.state.displayValue,
+        onInput: _ctx.handleInput,
+        onChange: _ctx.handleChange,
+        onMouseenter: _ctx.handleMouseEnter,
+        onMouseleave: _cache[2] || (_cache[2] = function($event) {
+          return _ctx.state.showClose = false;
+        }),
+        "validate-event": false,
+        "custom-class": "sm:border " + _ctx.gcls(_ctx.state.type)
       }),
-      "validate-event": false,
-      "custom-class": "sm:border " + _ctx.gcls(_ctx.state.type)
-    }), createSlots({
-      suffix: withCtx(function() {
-        return [createElementVNode("i", _hoisted_1, [!_ctx.state.isMobileScreen ? (openBlock(), createBlock(Transition, {
-          key: 0,
-          name: "tiny-transition-icon-scale-in"
-        }, {
-          default: withCtx(function() {
-            return [_ctx.state.haveTrigger ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.state.showClose ? _ctx.clearIcon : null), {
-              key: 0,
-              onClick: _ctx.handleClickIcon,
-              onMouseenter: _cache[0] || (_cache[0] = function($event) {
-                return _ctx.state.showClose = true;
+      createSlots({
+        suffix: withCtx(function() {
+          return [createElementVNode("i", _hoisted_1, [!_ctx.state.isMobileMode ? (openBlock(), createBlock(Transition, {
+            key: 0,
+            name: "tiny-transition-icon-scale-in"
+          }, {
+            default: withCtx(function() {
+              return [_ctx.state.haveTrigger ? (openBlock(), createBlock(
+                resolveDynamicComponent(_ctx.state.showClose ? _ctx.clearIcon : null),
+                {
+                  key: 0,
+                  onClick: _ctx.handleClickIcon,
+                  onMouseenter: _cache[0] || (_cache[0] = function($event) {
+                    return _ctx.state.showClose = true;
+                  }),
+                  onMouseleave: _cache[1] || (_cache[1] = function($event) {
+                    return _ctx.state.showClose = false;
+                  }),
+                  class: "fill-color-text-placeholder hover:fill-color-text-primary"
+                },
+                null,
+                40,
+                ["onClick"]
+              )) : createCommentVNode("v-if", true)];
+            }),
+            _: 1
+            /* STABLE */
+          })) : createCommentVNode("v-if", true), (openBlock(), createBlock(
+            resolveDynamicComponent(_ctx.state.triggerClass),
+            {
+              onClick: _ctx.handleFocus,
+              "custom-class": "h-5 w-5 sm:h-4 sm:w-4",
+              class: normalizeClass(!_ctx.state.isDisplayOnly && _ctx.state.pickerDisabled ? "fill-color-icon-placeholder sm:fill-color-icon-disabled" : "fill-color-icon-secondary sm:fill-color-text-placeholder")
+            },
+            null,
+            8,
+            ["onClick", "class"]
+          ))])];
+        }),
+        _: 2
+        /* DYNAMIC */
+      }, [_ctx.label ? {
+        name: "prefix",
+        fn: withCtx(function() {
+          return [createVNode(
+            _component_tiny_tooltip,
+            {
+              effect: "light",
+              content: _ctx.state.labelTooltip,
+              placement: "top",
+              onMouseenter: _ctx.handleEnterPickerlabel
+            },
+            {
+              default: withCtx(function() {
+                return [createElementVNode(
+                  "span",
+                  {
+                    "data-tag": "tiny-input__label",
+                    class: normalizeClass(_ctx.gcls("input-label")),
+                    ref: "label"
+                  },
+                  toDisplayString(_ctx.label),
+                  3
+                  /* TEXT, CLASS */
+                )];
               }),
-              onMouseleave: _cache[1] || (_cache[1] = function($event) {
-                return _ctx.state.showClose = false;
-              }),
-              class: "fill-color-text-placeholder hover:fill-color-text-primary"
-            }, null, 40, ["onClick"])) : createCommentVNode("v-if", true)];
-          }),
-          _: 1
-          /* STABLE */
-        })) : createCommentVNode("v-if", true), (openBlock(), createBlock(resolveDynamicComponent(_ctx.state.triggerClass), {
-          onClick: _ctx.handleFocus,
-          "custom-class": "h-5 w-5 sm:h-4 sm:w-4",
-          class: normalizeClass(!_ctx.state.isDisplayOnly && _ctx.state.pickerDisabled ? "fill-color-icon-placeholder sm:fill-color-icon-disabled" : "fill-color-icon-secondary sm:fill-color-text-placeholder")
-        }, null, 8, ["onClick", "class"]))])];
-      }),
-      _: 2
-      /* DYNAMIC */
-    }, [_ctx.label ? {
-      name: "prefix",
-      fn: withCtx(function() {
-        return [createVNode(_component_tiny_tooltip, {
-          effect: "light",
-          content: _ctx.state.labelTooltip,
-          placement: "top",
-          onMouseenter: _ctx.handleEnterPickerlabel
-        }, {
-          default: withCtx(function() {
-            return [createElementVNode(
-              "span",
-              {
-                "data-tag": "tiny-input__label",
-                class: normalizeClass(_ctx.gcls("input-label")),
-                ref: "label"
-              },
-              toDisplayString(_ctx.label),
-              3
-              /* TEXT, CLASS */
-            )];
-          }),
-          _: 1
-          /* STABLE */
-        }, 8, ["content", "onMouseenter"])];
-      }),
-      key: "0"
-    } : void 0]), 1040, ["tabindex", "readonly", "disabled", "size", "name", "placeholder", "onFocus", "onKeydown", "model-value", "title", "display-only", "display-only-content", "onInput", "onChange", "onMouseenter", "custom-class"])), [[_directive_clickoutside, _ctx.handleClose, void 0, {
+              _: 1
+              /* STABLE */
+            },
+            8,
+            ["content", "onMouseenter"]
+          )];
+        }),
+        key: "0"
+      } : void 0]),
+      1040,
+      ["tabindex", "readonly", "disabled", "size", "name", "placeholder", "onFocus", "onKeydown", "model-value", "title", "display-only", "display-only-content", "onInput", "onChange", "onMouseenter", "custom-class"]
+    )), [[_directive_clickoutside, _ctx.handleClose, void 0, {
       mousedown: true
@@ -372,24 +402,30 @@ }]]) : withDirectives((openBlock(), createElementBlock(
       },
-      [createVNode(_component_tiny_tooltip, {
-        effect: "light",
-        content: _ctx.state.labelTooltip,
-        placement: "top",
-        onMouseenter: _ctx.handleEnterPickerlabel
-      }, {
-        default: withCtx(function() {
-          return [_ctx.label ? (openBlock(), createElementBlock(
-            "span",
-            {
-              key: 0,
-              "data-tag": "tiny-input__label",
-              ref: "label"
-            },
-            toDisplayString(_ctx.label),
-            513
-            /* TEXT, NEED_PATCH */
-          )) : createCommentVNode("v-if", true)];
-        }),
-        _: 1
-        /* STABLE */
-      }, 8, ["content", "onMouseenter"]), !_ctx.state.isDisplayOnly ? (openBlock(), createElementBlock(
+      [createVNode(
+        _component_tiny_tooltip,
+        {
+          effect: "light",
+          content: _ctx.state.labelTooltip,
+          placement: "top",
+          onMouseenter: _ctx.handleEnterPickerlabel
+        },
+        {
+          default: withCtx(function() {
+            return [_ctx.label ? (openBlock(), createElementBlock(
+              "span",
+              {
+                key: 0,
+                "data-tag": "tiny-input__label",
+                ref: "label"
+              },
+              toDisplayString(_ctx.label),
+              513
+              /* TEXT, NEED_PATCH */
+            )) : createCommentVNode("v-if", true)];
+          }),
+          _: 1
+          /* STABLE */
+        },
+        8,
+        ["content", "onMouseenter"]
+      ), !_ctx.state.isDisplayOnly ? (openBlock(), createElementBlock(
         Fragment,
@@ -399,23 +435,29 @@ {
         },
-        [createElementVNode("input", mergeProps({
-          autocomplete: "off",
-          placeholder: _ctx.startPlaceholder,
-          value: _ctx.state.displayValue && _ctx.state.displayValue[0],
-          title: _ctx.state.displayValue && _ctx.state.displayValue[0],
-          disabled: _ctx.state.pickerDisabled
-        }, _ctx.state.firstInputId, {
-          readonly: _ctx.state.isMobileScreen || !_ctx.editable || _ctx.readonly,
-          name: _ctx.name && _ctx.name[0],
-          onInput: _cache[3] || (_cache[3] = function() {
-            return _ctx.handleStartInput && _ctx.handleStartInput.apply(_ctx, arguments);
+        [createElementVNode(
+          "input",
+          mergeProps({
+            autocomplete: "off",
+            placeholder: _ctx.startPlaceholder,
+            value: _ctx.state.displayValue && _ctx.state.displayValue[0],
+            title: _ctx.state.displayValue && _ctx.state.displayValue[0],
+            disabled: _ctx.state.pickerDisabled
+          }, _ctx.state.firstInputId, {
+            readonly: _ctx.state.isMobileMode || !_ctx.editable || _ctx.readonly,
+            name: _ctx.name && _ctx.name[0],
+            onInput: _cache[3] || (_cache[3] = function() {
+              return _ctx.handleStartInput && _ctx.handleStartInput.apply(_ctx, arguments);
+            }),
+            onChange: _cache[4] || (_cache[4] = function() {
+              return _ctx.handleStartChange && _ctx.handleStartChange.apply(_ctx, arguments);
+            }),
+            onFocus: _cache[5] || (_cache[5] = function() {
+              return _ctx.handleFocus && _ctx.handleFocus.apply(_ctx, arguments);
+            }),
+            "data-tag": "tiny-range-input",
+            class: _ctx.gcls("range-input")
           }),
-          onChange: _cache[4] || (_cache[4] = function() {
-            return _ctx.handleStartChange && _ctx.handleStartChange.apply(_ctx, arguments);
-          }),
-          onFocus: _cache[5] || (_cache[5] = function() {
-            return _ctx.handleFocus && _ctx.handleFocus.apply(_ctx, arguments);
-          }),
-          "data-tag": "tiny-range-input",
-          class: _ctx.gcls("range-input")
-        }), null, 16, _hoisted_2), renderSlot(_ctx.$slots, "range-separator", {}, function() {
+          null,
+          16,
+          _hoisted_2
+        ), renderSlot(_ctx.$slots, "range-separator", {}, function() {
           return [typeof _ctx.rangeSeparator === "string" ? (openBlock(), createElementBlock(
@@ -438,23 +480,29 @@ "span",
           }))];
-        }), createElementVNode("input", mergeProps({
-          autocomplete: "off",
-          placeholder: _ctx.endPlaceholder,
-          value: _ctx.state.displayValue && _ctx.state.displayValue[1],
-          title: _ctx.state.displayValue && _ctx.state.displayValue[1],
-          disabled: _ctx.state.pickerDisabled
-        }, _ctx.state.secondInputId, {
-          readonly: _ctx.state.isMobileScreen || !_ctx.editable || _ctx.readonly,
-          name: _ctx.name && _ctx.name[1],
-          onInput: _cache[6] || (_cache[6] = function() {
-            return _ctx.handleEndInput && _ctx.handleEndInput.apply(_ctx, arguments);
+        }), createElementVNode(
+          "input",
+          mergeProps({
+            autocomplete: "off",
+            placeholder: _ctx.endPlaceholder,
+            value: _ctx.state.displayValue && _ctx.state.displayValue[1],
+            title: _ctx.state.displayValue && _ctx.state.displayValue[1],
+            disabled: _ctx.state.pickerDisabled
+          }, _ctx.state.secondInputId, {
+            readonly: _ctx.state.isMobileMode || !_ctx.editable || _ctx.readonly,
+            name: _ctx.name && _ctx.name[1],
+            onInput: _cache[6] || (_cache[6] = function() {
+              return _ctx.handleEndInput && _ctx.handleEndInput.apply(_ctx, arguments);
+            }),
+            onChange: _cache[7] || (_cache[7] = function() {
+              return _ctx.handleEndChange && _ctx.handleEndChange.apply(_ctx, arguments);
+            }),
+            onFocus: _cache[8] || (_cache[8] = function() {
+              return _ctx.handleFocus && _ctx.handleFocus.apply(_ctx, arguments);
+            }),
+            "data-tag": "tiny-range-input",
+            class: _ctx.gcls("range-input")
           }),
-          onChange: _cache[7] || (_cache[7] = function() {
-            return _ctx.handleEndChange && _ctx.handleEndChange.apply(_ctx, arguments);
-          }),
-          onFocus: _cache[8] || (_cache[8] = function() {
-            return _ctx.handleFocus && _ctx.handleFocus.apply(_ctx, arguments);
-          }),
-          "data-tag": "tiny-range-input",
-          class: _ctx.gcls("range-input")
-        }), null, 16, _hoisted_3), !_ctx.state.isMobileScreen && _ctx.state.haveTrigger ? (openBlock(), createElementBlock(
+          null,
+          16,
+          _hoisted_3
+        ), !_ctx.state.isMobileMode && _ctx.state.haveTrigger ? (openBlock(), createElementBlock(
           "i",
@@ -489,6 +537,12 @@ {
           },
-          [(openBlock(), createBlock(resolveDynamicComponent(_ctx.state.triggerClass), {
-            "custom-class": "h-5 w-5 sm:h-4 sm:w-4",
-            class: normalizeClass(!_ctx.state.isDisplayOnly && _ctx.state.pickerDisabled ? "fill-color-icon-placeholder sm:fill-color-icon-secondary" : "fill-color-icon-secondary sm:fill-color-text-placeholder")
-          }, null, 8, ["class"]))],
+          [(openBlock(), createBlock(
+            resolveDynamicComponent(_ctx.state.triggerClass),
+            {
+              "custom-class": "h-5 w-5 sm:h-4 sm:w-4",
+              class: normalizeClass(!_ctx.state.isDisplayOnly && _ctx.state.pickerDisabled ? "fill-color-icon-placeholder sm:fill-color-icon-secondary" : "fill-color-icon-secondary sm:fill-color-text-placeholder")
+            },
+            null,
+            8,
+            ["class"]
+          ))],
           2
@@ -499,22 +553,28 @@ /* CLASS */
         /* STABLE_FRAGMENT */
-      )) : createCommentVNode("v-if", true), _ctx.state.isDisplayOnly ? (openBlock(), createBlock(_component_tiny_tooltip, {
-        key: 1,
-        "data-tag": "tiny-range-editor-display-only",
-        content: _ctx.state.displayOnlyTooltip,
-        effect: "light",
-        placement: "top",
-        onMouseenter: _ctx.handleEnterDisplayOnlyContent
-      }, {
-        default: withCtx(function() {
-          return [createElementVNode(
-            "span",
-            null,
-            toDisplayString(_ctx.state.displayValue && _ctx.state.displayValue.join(" " + _ctx.t("ui.datepicker.to") + " ")),
-            1
-            /* TEXT */
-          )];
-        }),
-        _: 1
-        /* STABLE */
-      }, 8, ["content", "onMouseenter"])) : createCommentVNode("v-if", true)],
+      )) : createCommentVNode("v-if", true), _ctx.state.isDisplayOnly ? (openBlock(), createBlock(
+        _component_tiny_tooltip,
+        {
+          key: 1,
+          "data-tag": "tiny-range-editor-display-only",
+          content: _ctx.state.displayOnlyTooltip,
+          effect: "light",
+          placement: "top",
+          onMouseenter: _ctx.handleEnterDisplayOnlyContent
+        },
+        {
+          default: withCtx(function() {
+            return [createElementVNode(
+              "span",
+              null,
+              toDisplayString(_ctx.state.displayValue && _ctx.state.displayValue.join(" " + _ctx.t("ui.datepicker.to") + " ")),
+              1
+              /* TEXT */
+            )];
+          }),
+          _: 1
+          /* STABLE */
+        },
+        8,
+        ["content", "onMouseenter"]
+      )) : createCommentVNode("v-if", true)],
       34
@@ -524,50 +584,68 @@ /* CLASS, NEED_HYDRATION */
       mousedown: true
-    }]]), !_ctx.state.isMobileScreen ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.state.panel), {
-      key: 3,
-      step: _ctx.step,
-      "show-week-number": _ctx.showWeekNumber,
-      "format-weeks": _ctx.formatWeeks,
-      ref: "picker",
-      visible: _ctx.state.pickerVisible,
-      onPick: _ctx.handlePick,
-      onSelectRange: _ctx.handleSelectRange,
-      onSelectChange: _ctx.handleSelectChange
-    }, null, 40, ["step", "show-week-number", "format-weeks", "visible", "onPick", "onSelectRange", "onSelectChange"])) : createCommentVNode("v-if", true), _ctx.state.isMobileScreen && _ctx.state.isDateMobileComponent ? (openBlock(), createBlock(_component_tiny_date_picker_mobile, {
-      key: 4,
-      ref: "datePickerMobile",
-      modelValue: _ctx.state.dateMobileOption.value,
-      "onUpdate:modelValue": _cache[14] || (_cache[14] = function($event) {
-        return _ctx.state.dateMobileOption.value = $event;
-      }),
-      title: _ctx.title,
-      clearable: _ctx.clearable,
-      step: _ctx.step,
-      "show-time-second": _ctx.state.showSeconds,
-      "range-separator": _ctx.rangeSeparator,
-      "end-placeholder": _ctx.endPlaceholder,
-      "custom-class": "max-h-[80%]",
-      type: _ctx.state.dateMobileOption.type,
-      visible: _ctx.state.dateMobileOption.visible,
-      "picker-options": _ctx.pickerOptions,
-      onConfirm: _ctx.emitInput,
-      onClear: _ctx.emitInput,
-      "onUpdate:visible": _ctx.dateMobileToggle
-    }, null, 8, ["modelValue", "title", "clearable", "step", "show-time-second", "range-separator", "end-placeholder", "type", "visible", "picker-options", "onConfirm", "onClear", "onUpdate:visible"])) : createCommentVNode("v-if", true), _ctx.state.isMobileScreen && _ctx.state.isTimeMobileComponent ? (openBlock(), createBlock(_component_tiny_time_picker_mobile, {
-      key: 5,
-      ref: "datePickerMobile",
-      modelValue: _ctx.state.timeMobileOption.value,
-      "onUpdate:modelValue": _cache[15] || (_cache[15] = function($event) {
-        return _ctx.state.timeMobileOption.value = $event;
-      }),
-      "default-value": _ctx.state.timeMobileOption.defaultValue,
-      title: _ctx.title,
-      clearable: _ctx.clearable,
-      step: _ctx.step,
-      "show-seconds": _ctx.state.showSeconds,
-      "custom-class": "max-h-[80%]",
-      type: _ctx.state.timeMobileOption.type,
-      visible: _ctx.state.timeMobileOption.visible,
-      onConfirm: _ctx.timeMobileConfirm,
-      "onUpdate:visible": _ctx.timeMobileToggle
-    }, null, 8, ["modelValue", "default-value", "title", "clearable", "step", "show-seconds", "type", "visible", "onConfirm", "onUpdate:visible"])) : createCommentVNode("v-if", true)],
+    }]]), !_ctx.state.isMobileMode ? (openBlock(), createBlock(
+      resolveDynamicComponent(_ctx.state.panel),
+      {
+        key: 3,
+        step: _ctx.step,
+        "show-week-number": _ctx.showWeekNumber,
+        "format-weeks": _ctx.formatWeeks,
+        ref: "picker",
+        visible: _ctx.state.pickerVisible,
+        onPick: _ctx.handlePick,
+        onSelectRange: _ctx.handleSelectRange,
+        onSelectChange: _ctx.handleSelectChange
+      },
+      null,
+      40,
+      ["step", "show-week-number", "format-weeks", "visible", "onPick", "onSelectRange", "onSelectChange"]
+    )) : createCommentVNode("v-if", true), _ctx.state.isMobileMode && _ctx.state.isDateMobileComponent ? (openBlock(), createBlock(
+      _component_tiny_date_picker_mobile,
+      {
+        key: 4,
+        ref: "datePickerMobile",
+        modelValue: _ctx.state.dateMobileOption.value,
+        "onUpdate:modelValue": _cache[14] || (_cache[14] = function($event) {
+          return _ctx.state.dateMobileOption.value = $event;
+        }),
+        title: _ctx.title,
+        clearable: _ctx.clearable,
+        step: _ctx.step,
+        "show-time-second": _ctx.state.showSeconds,
+        "range-separator": _ctx.rangeSeparator,
+        "end-placeholder": _ctx.endPlaceholder,
+        "custom-class": "max-h-[80%]",
+        type: _ctx.state.dateMobileOption.type,
+        visible: _ctx.state.dateMobileOption.visible,
+        "picker-options": _ctx.pickerOptions,
+        onConfirm: _ctx.emitInput,
+        onClear: _ctx.emitInput,
+        "onUpdate:visible": _ctx.dateMobileToggle
+      },
+      null,
+      8,
+      ["modelValue", "title", "clearable", "step", "show-time-second", "range-separator", "end-placeholder", "type", "visible", "picker-options", "onConfirm", "onClear", "onUpdate:visible"]
+    )) : createCommentVNode("v-if", true), _ctx.state.isMobileMode && _ctx.state.isTimeMobileComponent ? (openBlock(), createBlock(
+      _component_tiny_time_picker_mobile,
+      {
+        key: 5,
+        ref: "datePickerMobile",
+        modelValue: _ctx.state.timeMobileOption.value,
+        "onUpdate:modelValue": _cache[15] || (_cache[15] = function($event) {
+          return _ctx.state.timeMobileOption.value = $event;
+        }),
+        "default-value": _ctx.state.timeMobileOption.defaultValue,
+        title: _ctx.title,
+        clearable: _ctx.clearable,
+        step: _ctx.step,
+        "show-seconds": _ctx.state.showSeconds,
+        "custom-class": "max-h-[80%]",
+        type: _ctx.state.timeMobileOption.type,
+        visible: _ctx.state.timeMobileOption.visible,
+        onConfirm: _ctx.timeMobileConfirm,
+        "onUpdate:visible": _ctx.timeMobileToggle
+      },
+      null,
+      8,
+      ["modelValue", "default-value", "title", "clearable", "step", "show-seconds", "type", "visible", "onConfirm", "onUpdate:visible"]
+    )) : createCommentVNode("v-if", true)],
     2
@@ -574,0 +652,0 @@ /* CLASS */

lib/pc.js

@@ -183,3 +183,3 @@ import { renderless, api } from '@opentiny/vue-renderless/picker/vue';
   for (var _iterator = _createForOfIteratorHelperLoose(props), _step; !(_step = _iterator()).done; ) {
-    var _step$value = _step.value, key = _step$value[0], val = _step$value[1];
+    var _step$value2 = _step.value, key = _step$value2[0], val = _step$value2[1];
     target[key] = val;
@@ -186,0 +186,0 @@ }

package.json

 {
   "name": "@opentiny/vue-picker",
-  "version": "3.17.0",
+  "version": "3.18.0",
   "description": "",
@@ -10,19 +10,19 @@ "main": "./lib/index.js",
   "dependencies": {
-    "@opentiny/vue-common": "~3.17.0",
-    "@opentiny/vue-renderless": "~3.17.0",
-    "@opentiny/vue-input": "~3.17.0",
-    "@opentiny/vue-date-panel": "~3.17.0",
-    "@opentiny/vue-date-range": "~3.17.0",
-    "@opentiny/vue-month-range": "~3.17.0",
-    "@opentiny/vue-quarter-panel": "~3.17.0",
-    "@opentiny/vue-time": "~3.17.0",
-    "@opentiny/vue-time-range": "~3.17.0",
-    "@opentiny/vue-time-panel": "~3.17.0",
-    "@opentiny/vue-year-range": "~3.17.0",
-    "@opentiny/vue-tooltip": "~3.17.0",
-    "@opentiny/vue-filter-box": "~3.17.0",
-    "@opentiny/vue-date-picker-mobile-first": "~3.17.0",
-    "@opentiny/vue-time-picker-mobile": "~3.17.0",
-    "@opentiny/vue-icon": "~3.17.0",
-    "@opentiny/vue-theme": "~3.17.0"
+    "@opentiny/vue-common": "~3.18.0",
+    "@opentiny/vue-renderless": "~3.18.0",
+    "@opentiny/vue-input": "~3.18.0",
+    "@opentiny/vue-date-panel": "~3.18.0",
+    "@opentiny/vue-date-range": "~3.18.0",
+    "@opentiny/vue-month-range": "~3.18.0",
+    "@opentiny/vue-quarter-panel": "~3.18.0",
+    "@opentiny/vue-time": "~3.18.0",
+    "@opentiny/vue-time-range": "~3.18.0",
+    "@opentiny/vue-time-panel": "~3.18.0",
+    "@opentiny/vue-year-range": "~3.18.0",
+    "@opentiny/vue-tooltip": "~3.18.0",
+    "@opentiny/vue-filter-box": "~3.18.0",
+    "@opentiny/vue-date-picker-mobile-first": "~3.18.0",
+    "@opentiny/vue-time-picker-mobile": "~3.18.0",
+    "@opentiny/vue-icon": "~3.18.0",
+    "@opentiny/vue-theme": "~3.18.0"
   },
@@ -29,0 +29,0 @@ "license": "MIT",

src/index.d.ts

@@ -266,3 +266,2 @@ declare const _default: import("@vue/runtime-core").DefineComponent<{
     popperAppendToBody: boolean;
-    id: string;
     readonly: boolean;
@@ -275,2 +274,3 @@ clearable: boolean;
     rangeSeparator: string | Record<string, any>;
+    id: string;
     changeOnConfirm: boolean;
@@ -277,0 +277,0 @@ autoFormat: boolean;

src/mobile-first.vue.d.ts

@@ -266,3 +266,2 @@ declare const _default: import("@vue/runtime-core").DefineComponent<{
     popperAppendToBody: boolean;
-    id: string;
     readonly: boolean;
@@ -275,2 +274,3 @@ clearable: boolean;
     rangeSeparator: string | Record<string, any>;
+    id: string;
     changeOnConfirm: boolean;
@@ -277,0 +277,0 @@ autoFormat: boolean;

src/pc.vue.d.ts

@@ -266,3 +266,2 @@ declare const _default: import("@vue/runtime-core").DefineComponent<{
     popperAppendToBody: boolean;
-    id: string;
     readonly: boolean;
@@ -275,2 +274,3 @@ clearable: boolean;
     rangeSeparator: string | Record<string, any>;
+    id: string;
     changeOnConfirm: boolean;
@@ -277,0 +277,0 @@ autoFormat: boolean;

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

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

111216

increased by2.22%

Lines of code

3126

increased by5.04%

Dependency changes

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

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

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

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

• + Added@opentiny/vue-date-panel@3.18.0(transitive)

• + Added@opentiny/vue-date-picker-mobile-first@3.18.0(transitive)

• + Added@opentiny/vue-date-range@3.18.0(transitive)

• + Added@opentiny/vue-date-table@3.18.0(transitive)

• + Added@opentiny/vue-dialog-box@3.18.0(transitive)

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

• + Added@opentiny/vue-filter-box@3.18.0(transitive)

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

• + Added@opentiny/vue-input@3.18.0(transitive)

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

• + Added@opentiny/vue-month-range@3.18.0(transitive)

• + Added@opentiny/vue-month-table@3.18.0(transitive)

• + Added@opentiny/vue-popup@3.18.0(transitive)

• + Added@opentiny/vue-quarter-panel@3.18.0(transitive)

• + Added@opentiny/vue-recycle-scroller@3.18.0(transitive)

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

• + Added@opentiny/vue-scrollbar@3.18.0(transitive)

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

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

• + Added@opentiny/vue-time@3.18.0(transitive)

• + Added@opentiny/vue-time-panel@3.18.0(transitive)

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

• + Added@opentiny/vue-time-range@3.18.0(transitive)

• + Added@opentiny/vue-time-spinner@3.18.0(transitive)

• + Added@opentiny/vue-tooltip@3.18.0(transitive)

• + Added@opentiny/vue-year-range@3.18.0(transitive)

• + Added@opentiny/vue-year-table@3.18.0(transitive)

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

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

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

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

• - Removed@opentiny/vue-date-panel@3.17.0(transitive)

• - Removed@opentiny/vue-date-picker-mobile-first@3.17.0(transitive)

• - Removed@opentiny/vue-date-range@3.17.0(transitive)

• - Removed@opentiny/vue-date-table@3.17.0(transitive)

• - Removed@opentiny/vue-dialog-box@3.17.0(transitive)

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

• - Removed@opentiny/vue-filter-box@3.17.0(transitive)

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

• - Removed@opentiny/vue-input@3.17.0(transitive)

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

• - Removed@opentiny/vue-month-range@3.17.0(transitive)

• - Removed@opentiny/vue-month-table@3.17.0(transitive)

• - Removed@opentiny/vue-popup@3.17.0(transitive)

• - Removed@opentiny/vue-quarter-panel@3.17.0(transitive)

• - Removed@opentiny/vue-recycle-scroller@3.17.0(transitive)

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

• - Removed@opentiny/vue-scrollbar@3.17.0(transitive)

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

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

• - Removed@opentiny/vue-time@3.17.0(transitive)

• - Removed@opentiny/vue-time-panel@3.17.0(transitive)

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

• - Removed@opentiny/vue-time-range@3.17.0(transitive)

• - Removed@opentiny/vue-time-spinner@3.17.0(transitive)

• - Removed@opentiny/vue-tooltip@3.17.0(transitive)

• - Removed@opentiny/vue-year-range@3.17.0(transitive)

• - Removed@opentiny/vue-year-table@3.17.0(transitive)

• Updated@opentiny/vue-common@~3.18.0

• Updated@opentiny/vue-date-panel@~3.18.0

• Updated@opentiny/vue-date-picker-mobile-first@~3.18.0

• Updated@opentiny/vue-date-range@~3.18.0

• Updated@opentiny/vue-filter-box@~3.18.0

• Updated@opentiny/vue-icon@~3.18.0

• Updated@opentiny/vue-input@~3.18.0

• Updated@opentiny/vue-month-range@~3.18.0

• Updated@opentiny/vue-quarter-panel@~3.18.0

• Updated@opentiny/vue-renderless@~3.18.0

• Updated@opentiny/vue-theme@~3.18.0

• Updated@opentiny/vue-time@~3.18.0

• Updated@opentiny/vue-time-panel@~3.18.0

• Updated@opentiny/vue-time-picker-mobile@~3.18.0

• Updated@opentiny/vue-time-range@~3.18.0

• Updated@opentiny/vue-tooltip@~3.18.0

• Updated@opentiny/vue-year-range@~3.18.0