@varlet/ui 3.1.0-alpha.1709717246484 → 3.1.0

package/lib/varlet.cjs.js

@@ -587,7 +587,10 @@ function useWindowSize(options = {}) {
 function useVModel(props2, key, options = {}) {
   const { passive: passive2 = true, eventName, defaultValue, emit } = options;
   const event = eventName != null ? eventName : `onUpdate:${key.toString()}`;
-  const getValue = () => props2[key] != null ? props2[key] : defaultValue;
+  const getValue = () => {
+    var _a;
+    return (_a = props2[key]) != null ? _a : defaultValue;
+  };
   if (!passive2) {
     return vue.computed({
       get() {
@@ -973,6 +976,10 @@ const props$1g = {
     type: Boolean,
     default: true
   },
+  closeOnKeyEscape: {
+    type: Boolean,
+    default: true
+  },
   defaultStyle: {
     type: Boolean,
     default: true
@@ -987,16 +994,11 @@ const props$1g = {
   onOpened: defineListenerProp(),
   onClose: defineListenerProp(),
   onClosed: defineListenerProp(),
+  onKeyEscape: defineListenerProp(),
   onClickOverlay: defineListenerProp(),
   "onUpdate:show": defineListenerProp(),
   // internal for Dialog
-  onRouteChange: defineListenerProp(),
-  // internal for esc
-  onKeyEscape: defineListenerProp(),
-  closeOnKeyEscape: {
-    type: Boolean,
-    default: true
-  }
+  onRouteChange: defineListenerProp()
 };
 function resolveLock() {
   const lockCounts = Object.keys(stdin_default$5V.locks).length;
@@ -3377,7 +3379,9 @@ const props$18 = {
   },
   loadingRadius: [Number, String],
   loadingType: pickProps(props$19, "type"),
-  loadingSize: pickProps(props$19, "size"),
+  loadingSize: __spreadProps$7(__spreadValues$o({}, pickProps(props$19, "size")), {
+    default: void 0
+  }),
   loadingColor: __spreadProps$7(__spreadValues$o({}, pickProps(props$19, "color")), {
     default: "currentColor"
   }),
@@ -3443,7 +3447,7 @@ function __render__$1f(_ctx, _cache) {
       "var-button-cover": "",
       color: _ctx.loadingColor,
       type: _ctx.loadingType,
-      size: _ctx.loadingSize,
+      size: _ctx.loadingSize || _ctx.states.size,
       radius: _ctx.loadingRadius
     }, null, 8, ["class", "color", "type", "size", "radius"])) : vue.createCommentVNode("v-if", true),
     vue.createElementVNode(
@@ -3480,11 +3484,12 @@ const __sfc__$1g = vue.defineComponent({
     const { buttonGroup } = useButtonGroup();
     const { hovering, handleHovering } = useHoverOverlay();
     const states = vue.computed(() => {
+      var _a, _b, _c, _d, _e, _f;
       if (!buttonGroup) {
         return {
           elevation: formatElevation(props2.elevation, 2),
-          type: props2.type != null ? props2.type : "default",
-          size: props2.size != null ? props2.size : "normal",
+          type: (_a = props2.type) != null ? _a : "default",
+          size: (_b = props2.size) != null ? _b : "normal",
           color: props2.color,
           text: props2.text,
           textColor: props2.textColor,
@@ -3495,10 +3500,10 @@ const __sfc__$1g = vue.defineComponent({
       const { type, size, color, textColor, mode } = buttonGroup;
       return {
         elevation: "",
-        type: props2.type != null ? props2.type : type.value,
-        size: props2.size != null ? props2.size : size.value,
-        color: props2.color != null ? props2.color : color.value,
-        textColor: props2.textColor != null ? props2.textColor : textColor.value,
+        type: (_c = props2.type) != null ? _c : type.value,
+        size: (_d = props2.size) != null ? _d : size.value,
+        color: (_e = props2.color) != null ? _e : color.value,
+        textColor: (_f = props2.textColor) != null ? _f : textColor.value,
         text: mode.value === "text" || mode.value === "outline",
         outline: mode.value === "outline",
         iconContainer: mode.value === "icon-container"
@@ -3507,8 +3512,7 @@ const __sfc__$1g = vue.defineComponent({
     function attemptAutoLoading(result) {
       if (props2.autoLoading) {
         pending.value = true;
-        result = isArray(result) ? result : [result];
-        Promise.all(result).then(() => {
+        Promise.all(normalizeToArray(result)).then(() => {
           pending.value = false;
         }).catch(() => {
           pending.value = false;
@@ -13736,17 +13740,16 @@ const props$L = {
   },
   sameWidth: Boolean,
   closeOnClickReference: Boolean,
+  closeOnKeyEscape: {
+    type: Boolean,
+    default: true
+  },
   onOpen: defineListenerProp(),
   onOpened: defineListenerProp(),
   onClose: defineListenerProp(),
   onClosed: defineListenerProp(),
   onClickOutside: defineListenerProp(),
-  "onUpdate:show": defineListenerProp(),
-  // internal for esc
-  closeOnKeyEscape: {
-    type: Boolean,
-    default: true
-  }
+  "onUpdate:show": defineListenerProp()
 };
 const { name: name$L, n: n$O, classes: classes$G } = createNamespace("tooltip");
 function __render__$O(_ctx, _cache) {
@@ -17650,10 +17653,8 @@ function useSelectController(options) {
     return (_a = option == null ? void 0 : option.label.value) != null ? _a : "";
   }
   function findValueOrLabel({ value, label: label2 }) {
-    if (value.value != null) {
-      return value.value;
-    }
-    return label2.value;
+    var _a;
+    return (_a = value.value) != null ? _a : label2.value;
   }
   function getSelectedValue(option) {
     const multiple = multipleGetter();
@@ -18640,6 +18641,7 @@ const props$o = __spreadValues$7({
   "show",
   "onUpdate:show",
   "closeOnClickOverlay",
+  "closeOnKeyEscape",
   "teleport",
   "safeArea",
   "onOpen",
@@ -18648,9 +18650,7 @@ const props$o = __spreadValues$7({
   "onClosed",
   "onClickOverlay",
   "onRouteChange",
-  // internal for esc
-  "onKeyEscape",
-  "closeOnKeyEscape"
+  "onKeyEscape"
 ]));
 const { name: name$o, n: n$r, classes: classes$m } = createNamespace("picker");
 const MOMENTUM_RECORD_TIME = 300;
@@ -21580,7 +21580,7 @@ const props$e = {
   "onUpdate:modelValue": defineListenerProp()
 };
 const { name: name$e, n: n$g, classes: classes$c } = createNamespace("slider");
-const _hoisted_1$4 = ["onTouchstart"];
+const _hoisted_1$4 = ["tabindex", "onTouchstart", "onFocusin", "onFocusout"];
 function __render__$e(_ctx, _cache) {
   const _component_var_hover_overlay = vue.resolveComponent("var-hover-overlay");
   const _component_var_form_details = vue.resolveComponent("var-form-details");
@@ -21641,7 +21641,10 @@ function __render__$e(_ctx, _cache) {
                 class: vue.normalizeClass(_ctx.n(`${_ctx.direction}-thumb`)),
                 key: item.enumValue,
                 style: vue.normalizeStyle(_ctx.thumbStyle(item)),
-                onTouchstart: vue.withModifiers(($event) => _ctx.start($event, item.enumValue), ["stop"])
+                tabindex: _ctx.isDisabled ? void 0 : "0",
+                onTouchstart: vue.withModifiers(($event) => _ctx.start($event, item.enumValue), ["stop"]),
+                onFocusin: ($event) => _ctx.handleFocus(item),
+                onFocusout: ($event) => _ctx.handleBlur(item)
               }, [
                 vue.renderSlot(_ctx.$slots, "button", {
                   currentValue: item.text
@@ -21675,8 +21678,9 @@ function __render__$e(_ctx, _cache) {
                     },
                     [
                       vue.createVNode(_component_var_hover_overlay, {
-                        hovering: item.hovering
-                      }, null, 8, ["hovering"])
+                        hovering: !_ctx.isDisabled && item.hovering,
+                        focusing: !_ctx.isDisabled && item.focusing
+                      }, null, 8, ["hovering", "focusing"])
                     ],
                     6
                     /* CLASS, STYLE */
@@ -21743,6 +21747,8 @@ const __sfc__$f = vue.defineComponent({
     const isDisabled = vue.computed(() => props2.disabled || (form == null ? void 0 : form.disabled.value));
     const isReadonly = vue.computed(() => props2.readonly || (form == null ? void 0 : form.readonly.value));
     const isVertical = vue.computed(() => props2.direction === "vertical");
+    const focusingFirst = vue.ref(false);
+    const focusingSecond = vue.ref(false);
     const { bindForm, form } = useForm();
     const { errorMessage, validateWithTrigger: vt, validate: v, resetValidation } = useValidation();
     const { hovering: hoveringFirst, handleHovering: handleHoveringFirst } = useHoverOverlay();
@@ -21756,15 +21762,23 @@ const __sfc__$f = vue.defineComponent({
             value: getValue(modelValue[0]),
             enumValue: Thumbs.First,
             text: toPrecision(modelValue[0]),
-            hovering: vue.unref(hoveringFirst),
-            handleHovering: handleHoveringFirst
+            hovering: hoveringFirst.value,
+            focusing: focusingFirst.value,
+            handleHovering: handleHoveringFirst,
+            handleFocusing(value) {
+              focusingFirst.value = value;
+            }
           },
           {
             value: getValue(modelValue[1]),
             enumValue: Thumbs.Second,
             text: toPrecision(modelValue[1]),
-            hovering: vue.unref(hoveringSecond),
-            handleHovering: handleHoveringSecond
+            hovering: hoveringSecond.value,
+            focusing: focusingSecond.value,
+            handleHovering: handleHoveringSecond,
+            handleFocusing(value) {
+              focusingSecond.value = value;
+            }
           }
         ];
       } else if (isNumber(modelValue)) {
@@ -21773,8 +21787,12 @@ const __sfc__$f = vue.defineComponent({
             value: getValue(modelValue),
             enumValue: Thumbs.First,
             text: toPrecision(modelValue),
-            hovering: vue.unref(hoveringFirst),
-            handleHovering: handleHoveringFirst
+            hovering: hoveringFirst.value,
+            focusing: focusingFirst.value,
+            handleHovering: handleHoveringFirst,
+            handleFocusing(value) {
+              focusingFirst.value = value;
+            }
           }
         ];
       }
@@ -21808,19 +21826,24 @@ const __sfc__$f = vue.defineComponent({
     };
     call(bindForm, sliderProvider);
     vue.watch([() => props2.modelValue, () => props2.step], ([modelValue, step]) => {
-      if (!stepValidator() || !valueValidator() || isScroll.value)
+      if (!stepValidator() || !valueValidator() || isScroll.value) {
         return;
+      }
       setProps(modelValue, toNumber(step));
     });
     vue.watch(maxDistance, () => setProps());
     onSmartMounted(() => {
-      if (!stepValidator() || !valueValidator())
+      if (!stepValidator() || !valueValidator()) {
         return;
-      maxDistance.value = sliderEl.value[isVertical.value ? "offsetHeight" : "offsetWidth"];
-    });
-    vue.onBeforeUnmount(() => {
-      removeDocumentEvents();
+      }
+      resizeMaxDistance();
     });
+    vue.onBeforeUnmount(removeDocumentEvents);
+    useEventListener(() => window, "keydown", handleKeydown);
+    onWindowResize(resizeMaxDistance);
+    function resizeMaxDistance() {
+      maxDistance.value = sliderEl.value[isVertical.value ? "offsetHeight" : "offsetWidth"];
+    }
     function validate() {
       return v(props2.rules, props2.modelValue);
     }
@@ -21837,8 +21860,9 @@ const __sfc__$f = vue.defineComponent({
     }
     function getOffset(e) {
       const currentTarget = e.currentTarget;
-      if (!currentTarget)
+      if (!currentTarget) {
         return 0;
+      }
       if (!isVertical.value) {
         return e.clientX - getLeft(currentTarget);
       }
@@ -21852,36 +21876,49 @@ const __sfc__$f = vue.defineComponent({
       };
     }
     function showLabel(type) {
-      if (props2.labelVisible === "always")
+      if (props2.labelVisible === "always") {
         return true;
-      if (props2.labelVisible === "never")
+      }
+      if (props2.labelVisible === "never") {
         return false;
+      }
       return thumbsProps[type].active;
     }
     function getValue(value) {
       const { min: min2, max: max2 } = props2;
-      if (value < toNumber(min2))
+      if (value < toNumber(min2)) {
         return 0;
-      if (value > toNumber(max2))
+      }
+      if (value > toNumber(max2)) {
         return 100;
+      }
       return (value - toNumber(min2)) / scope.value * 100;
     }
     function toPrecision(value) {
-      if (!isNumber(value))
+      if (!isNumber(value)) {
         return 0;
+      }
       let num = value;
-      if (num < Number(props2.min))
+      if (num < Number(props2.min)) {
         num = Number(props2.min);
-      if (num > Number(props2.max))
+      }
+      if (num > Number(props2.max)) {
         num = Number(props2.max);
+      }
       const isInteger = parseInt(`${num}`, 10) === num;
       return isInteger ? num : toNumber(num.toPrecision(5));
     }
     function hover(value, item) {
-      if (isDisabled.value)
+      if (isDisabled.value) {
         return;
+      }
       item.handleHovering(value);
     }
+    function emitChange(value) {
+      call(props2.onChange, value);
+      call(props2["onUpdate:modelValue"], value);
+      validateWithTrigger();
+    }
     function setPercent(moveDistance, type) {
       let rangeValue = [];
       const { step, range, modelValue, onChange, min: min2 } = props2;
@@ -21895,14 +21932,13 @@ const __sfc__$f = vue.defineComponent({
       }
       if (prevValue !== curValue) {
         const value = range ? rangeValue.map((value2) => toPrecision(value2)) : toPrecision(curValue);
-        call(onChange, value);
-        call(props2["onUpdate:modelValue"], value);
-        validateWithTrigger();
+        emitChange(value);
       }
     }
     function getType(offset2) {
-      if (!props2.range)
+      if (!props2.range) {
         return Thumbs.First;
+      }
       const thumb1Distance = thumbsProps[Thumbs.First].percentValue * unitWidth.value;
       const thumb2Distance = thumbsProps[Thumbs.Second].percentValue * unitWidth.value;
       const offsetToThumb1 = Math.abs(offset2 - thumb1Distance);
@@ -21920,15 +21956,15 @@ const __sfc__$f = vue.defineComponent({
       document.removeEventListener("touchcancel", end2);
     }
     function start2(event, type) {
-      if (!maxDistance.value)
-        maxDistance.value = sliderEl.value.offsetWidth;
+      resizeMaxDistance();
       if (!isDisabled.value) {
         thumbsProps[type].active = true;
       }
       activeThumb = type;
       addDocumentEvents();
-      if (isDisabled.value || isReadonly.value)
+      if (isDisabled.value || isReadonly.value) {
         return;
+      }
       call(props2.onStart);
       isScroll.value = true;
       const { clientX, clientY } = event.touches[0];
@@ -21936,15 +21972,17 @@ const __sfc__$f = vue.defineComponent({
     }
     function move(event) {
       preventDefault(event);
-      if (isDisabled.value || isReadonly.value || !isScroll.value)
+      if (isDisabled.value || isReadonly.value || !isScroll.value) {
         return;
+      }
       const { startPosition, currentOffset } = thumbsProps[activeThumb];
       const { clientX, clientY } = event.touches[0];
       let moveDistance = (isVertical.value ? startPosition - clientY : clientX - startPosition) + currentOffset;
-      if (moveDistance <= 0)
+      if (moveDistance <= 0) {
         moveDistance = 0;
-      else if (moveDistance >= maxDistance.value)
+      } else if (moveDistance >= maxDistance.value) {
         moveDistance = maxDistance.value;
+      }
       setPercent(moveDistance, activeThumb);
     }
     function end2() {
@@ -21953,8 +21991,9 @@ const __sfc__$f = vue.defineComponent({
       if (!isDisabled.value) {
         thumbsProps[activeThumb].active = false;
       }
-      if (isDisabled.value || isReadonly.value)
+      if (isDisabled.value || isReadonly.value) {
         return;
+      }
       let rangeValue = [];
       thumbsProps[activeThumb].currentOffset = thumbsProps[activeThumb].percentValue * unitWidth.value;
       const curValue = thumbsProps[activeThumb].percentValue * toNumber(step) + toNumber(min2);
@@ -22006,10 +22045,12 @@ const __sfc__$f = vue.defineComponent({
     function setProps(modelValue = props2.modelValue, step = toNumber(props2.step)) {
       const getPercent = (value) => {
         const { min: min2, max: max2 } = props2;
-        if (value < toNumber(min2))
+        if (value < toNumber(min2)) {
           return 0;
-        if (value > toNumber(max2))
+        }
+        if (value > toNumber(max2)) {
           return scope.value / step;
+        }
         return (value - toNumber(min2)) / step;
       };
       if (props2.range && isArray(modelValue)) {
@@ -22026,6 +22067,46 @@ const __sfc__$f = vue.defineComponent({
       call(props2["onUpdate:modelValue"], resetValue);
       resetValidation();
     }
+    function moveFocusingThumb(offset2, value) {
+      const stepValue = Number(props2.step);
+      if (isArray(value)) {
+        const updatedFirstValue = value[0] + (focusingFirst.value ? offset2 * stepValue : 0);
+        const updatedSecondValue = value[1] + (focusingSecond.value ? offset2 * stepValue : 0);
+        return [updatedFirstValue, updatedSecondValue].map(toPrecision);
+      }
+      return toPrecision(value + offset2 * stepValue);
+    }
+    function handleKeydown(event) {
+      const keyToOffset = {
+        ArrowRight: 1,
+        ArrowUp: 1,
+        ArrowLeft: -1,
+        ArrowDown: -1
+      };
+      const { key } = event;
+      if (!hasOwn(keyToOffset, key) || isReadonly.value || isDisabled.value) {
+        return;
+      }
+      if (props2.range && !focusingFirst.value && !focusingSecond.value) {
+        return;
+      }
+      if (!props2.range && !focusingFirst.value) {
+        return;
+      }
+      preventDefault(event);
+      const offset2 = keyToOffset[key];
+      const value = moveFocusingThumb(offset2, props2.modelValue);
+      emitChange(value);
+    }
+    function handleFocus(item) {
+      if (isDisabled.value) {
+        return;
+      }
+      item.handleFocusing(true);
+    }
+    function handleBlur(item) {
+      item.handleFocusing(false);
+    }
     return {
       Thumbs,
       sliderEl,
@@ -22035,6 +22116,8 @@ const __sfc__$f = vue.defineComponent({
       errorMessage,
       thumbsProps,
       thumbList,
+      handleFocus,
+      handleBlur,
       n: n$g,
       classes: classes$c,
       thumbStyle,
@@ -24006,6 +24089,7 @@ var stdin_default$2$ = {
   "--date-picker-title-date-font-size": "34px",
   "--date-picker-title-date-font-weight": "500",
   "--date-picker-title-date-range-font-size": "20px",
+  "--date-picker-title-date-justify-content": "normal",
   "--date-picker-body-height": "280px",
   "--date-picker-body-padding": "0",
   "--date-picker-header-padding": "4px 16px",
@@ -24292,7 +24376,8 @@ var stdin_default$2M = {
   "--time-picker-inner-top": "36px",
   "--time-picker-inner-bottom": "36px",
   "--time-picker-body-height": "288px",
-  "--time-picker-actions-padding": "0 8px 12px 8px"
+  "--time-picker-actions-padding": "0 8px 12px 8px",
+  "--time-picker-title-time-container-justify-content": "flex-end"
 };
 var stdin_default$2L = {
   "--uploader-action-background": "#303030",
@@ -25285,7 +25370,8 @@ var stdin_default$1z = {
   "--time-picker-inner-right": "36px",
   "--time-picker-inner-top": "36px",
   "--time-picker-inner-bottom": "36px",
-  "--time-picker-body-height": "288px"
+  "--time-picker-body-height": "288px",
+  "--time-picker-title-time-container-justify-content": "flex-end"
 };
 var stdin_default$1y = {
   "--date-picker-title-background": "var(--color-surface-container-high)",
@@ -25313,6 +25399,7 @@ var stdin_default$1y = {
   "--date-picker-title-date-font-size": "34px",
   "--date-picker-title-date-font-weight": "500",
   "--date-picker-title-date-range-font-size": "20px",
+  "--date-picker-title-date-justify-content": "normal",
   "--month-picker-padding": "0 12px",
   "--month-picker-item-width": "33%",
   "--month-picker-item-height": "56px",
@@ -26326,7 +26413,8 @@ var stdin_default$q = {
   "--time-picker-inner-right": "36px",
   "--time-picker-inner-top": "36px",
   "--time-picker-inner-bottom": "36px",
-  "--time-picker-body-height": "288px"
+  "--time-picker-body-height": "288px",
+  "--time-picker-title-time-container-justify-content": "flex-end"
 };
 var stdin_default$p = {
   "--date-picker-title-background": "var(--color-surface-container-high)",
@@ -26354,6 +26442,7 @@ var stdin_default$p = {
   "--date-picker-title-date-font-size": "34px",
   "--date-picker-title-date-font-weight": "500",
   "--date-picker-title-date-range-font-size": "20px",
+  "--date-picker-title-date-justify-content": "normal",
   "--month-picker-padding": "0 12px",
   "--month-picker-item-width": "33%",
   "--month-picker-item-height": "56px",
@@ -28282,7 +28371,7 @@ withInstall(stdin_default$1);
 withPropsDefaultsSetter(stdin_default$1, props);
 const _WatermarkComponent = stdin_default$1;
 var stdin_default = stdin_default$1;
-const version = "3.1.0-alpha.1709717246484";
+const version = "3.1.0";
 function install(app) {
   stdin_default$5E.install && app.use(stdin_default$5E);
   stdin_default$5C.install && app.use(stdin_default$5C);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/ui",
-  "version": "3.1.0-alpha.1709717246484",
+  "version": "3.1.0",
   "description": "A material like components library",
   "main": "lib/varlet.cjs.js",
   "module": "es/index.mjs",
@@ -48,9 +48,9 @@
     "@popperjs/core": "^2.11.6",
     "dayjs": "^1.10.4",
     "decimal.js": "^10.2.1",
-    "@varlet/icons": "3.1.0-alpha.1709717246484",
-    "@varlet/use": "3.1.0-alpha.1709717246484",
-    "@varlet/shared": "3.1.0-alpha.1709717246484"
+    "@varlet/shared": "3.1.0",
+    "@varlet/icons": "3.1.0",
+    "@varlet/use": "3.1.0"
   },
   "devDependencies": {
     "@vue/runtime-core": "3.4.15",
@@ -66,9 +66,9 @@
     "typescript": "^5.1.5",
     "vue": "3.4.15",
     "vue-router": "4.2.0",
-    "@varlet/cli": "3.1.0-alpha.1709717246484",
-    "@varlet/touch-emulator": "3.1.0-alpha.1709717246484",
-    "@varlet/ui": "3.1.0-alpha.1709717246484"
+    "@varlet/touch-emulator": "3.1.0",
+    "@varlet/ui": "3.1.0",
+    "@varlet/cli": "3.1.0"
   },
   "scripts": {
     "dev": "varlet-cli dev",

package/types/picker.d.ts

@@ -28,9 +28,11 @@ export interface PickerProps {
   cancelButtonText?: string
   confirmButtonTextColor?: string
   cancelButtonTextColor?: string
+  closeOnKeyEscape?: boolean
   onChange?: ListenerProp<(values: (string | number)[], indexes: number[], options: PickerColumnOption[]) => void>
   onConfirm?: ListenerProp<(values: (string | number)[], indexes: number[], options: PickerColumnOption[]) => void>
   onCancel?: ListenerProp<(values: (string | number)[], indexes: number[], options: PickerColumnOption[]) => void>
+  onKeyEscape?: ListenerProp<() => void>
   'onUpdate:modelValue'?: ListenerProp<(values: (string | number)[]) => void>
 }
 
@@ -74,6 +76,7 @@ export interface PickerOptions {
   cancelButtonTextColor?: string
   safeArea?: boolean
   closeOnClickOverlay?: boolean
+  closeOnKeyEscape?: boolean
   onClickOverlay?: () => void
   onOpen?: () => void
   onOpened?: () => void
@@ -82,6 +85,7 @@ export interface PickerOptions {
   onChange?: (values: (string | number)[], indexes: number[], options: PickerColumnOption[]) => void
   onConfirm?: (values: (string | number)[], indexes: number[], options: PickerColumnOption[]) => void
   onCancel?: (values: (string | number)[], indexes: number[], options: PickerColumnOption[]) => void
+  onKeyEscape?: () => void
 }
 
 export interface IPicker {

package/types/popup.d.ts

@@ -13,6 +13,7 @@ export interface PopupProps extends BasicAttributes {
   overlayStyle?: Record<string, any>
   lockScroll?: boolean
   closeOnClickOverlay?: boolean
+  closeOnKeyEscape?: boolean
   defaultStyle?: boolean
   safeArea?: boolean
   safeAreaTop?: boolean
@@ -22,6 +23,7 @@ export interface PopupProps extends BasicAttributes {
   onClose?: ListenerProp<() => void>
   onClosed?: ListenerProp<() => void>
   onClickOverlay?: ListenerProp<() => void>
+  onKeyEscape?: ListenerProp<() => void>
   'onUpdate:show'?: ListenerProp<(show: boolean) => void>
 }
 

package/types/styleVars.d.ts

@@ -481,6 +481,8 @@ export interface StyleVars {
   datePickerTitleDateFontWeight?: string
   '--date-picker-title-date-range-font-size'?: string
   datePickerTitleDateRangeFontSize?: string
+  '--date-picker-title-date-justify-content'?: string
+  datePickerTitleDateJustifyContent?: string
   '--date-picker-body-padding'?: string
   datePickerBodyPadding?: string
   '--date-picker-body-background-color'?: string
@@ -1383,6 +1385,8 @@ export interface StyleVars {
   timePickerTitleTimeBackground?: string
   '--time-picker-title-time-active-background'?: string
   timePickerTitleTimeActiveBackground?: string
+  '--time-picker-title-time-container-justify-content'?: string
+  timePickerTitleTimeContainerJustifyContent?: string
   '--time-picker-title-ampm-button-active-background'?: string
   timePickerTitleAmpmButtonActiveBackground?: string
   '--time-picker-title-ampm-margin-left'?: string

package/types/tooltip.d.ts

@@ -30,6 +30,7 @@ export interface TooltipProps extends BasicAttributes {
   teleport?: TeleportProps['to'] | false
   sameWidth?: boolean
   closeOnClickReference?: boolean
+  closeOnKeyEscape?: boolean
   onOpen?: ListenerProp<() => void>
   onOpened?: ListenerProp<() => void>
   onClose?: ListenerProp<() => void>