@varlet/ui 3.1.0-alpha.1709717246484 → 3.1.0

package/es/button/Button.mjs

@@ -6,7 +6,7 @@ import { computed, defineComponent, ref } from "vue";
 import { props } from "./props.mjs";
 import { createNamespace, formatElevation } from "../utils/components.mjs";
 import { useButtonGroup } from "./provide.mjs";
-import { isArray, call } from "@varlet/shared";
+import { call, normalizeToArray } from "@varlet/shared";
 const { name, n, classes } = createNamespace("button");
 import { resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, createElementVNode as _createElementVNode, createVNode as _createVNode, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, createElementBlock as _createElementBlock, withDirectives as _withDirectives, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 const _withScopeId = (n2) => (_pushScopeId(""), n2 = n2(), _popScopeId(), n2);
@@ -51,7 +51,7 @@ function __render__(_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"])) : _createCommentVNode("v-if", true),
     _createElementVNode(
@@ -88,11 +88,12 @@ const __sfc__ = defineComponent({
     const { buttonGroup } = useButtonGroup();
     const { hovering, handleHovering } = useHoverOverlay();
     const states = 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,
@@ -103,10 +104,10 @@ const __sfc__ = 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"
@@ -115,8 +116,7 @@ const __sfc__ = 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;

package/es/button/props.mjs

@@ -46,7 +46,9 @@ const props = {
   },
   loadingRadius: [Number, String],
   loadingType: pickProps(loadingProps, "type"),
-  loadingSize: pickProps(loadingProps, "size"),
+  loadingSize: __spreadProps(__spreadValues({}, pickProps(loadingProps, "size")), {
+    default: void 0
+  }),
   loadingColor: __spreadProps(__spreadValues({}, pickProps(loadingProps, "color")), {
     default: "currentColor"
   }),

package/es/date-picker/date-picker.css

@@ -1 +1 @@
-:root { --date-picker-border-radius: 4px; --date-picker-font-size: var(--font-size-md); --date-picker-min-width: 290px; --date-picker-main-color: rgba(0, 0, 0, 0.87); --date-picker-title-hint-color: #fff; --date-picker-title-hint-font-size: var(--font-size-md); --date-picker-title-height: 105px; --date-picker-title-padding: 16px; --date-picker-title-background: var(--color-primary); --date-picker-title-color: #fff; --date-picker-title-year-font-size: var(--font-size-md); --date-picker-title-year-font-weight: 500; --date-picker-title-year-margin-bottom: 8px; --date-picker-title-date-height: 48px; --date-picker-title-date-font-size: 34px; --date-picker-title-date-font-weight: 500; --date-picker-title-date-range-font-size: 20px; --date-picker-body-background-color: #fff; --date-picker-body-height: 280px; --date-picker-body-padding: 0; --date-picker-header-padding: 4px 16px; --date-picker-header-color: #555; --date-picker-actions-padding: 0 8px 12px 8px; --date-picker-header-arrow-filter: opacity(0.54); --month-picker-padding: 0 12px; --month-picker-item-width: 33%; --month-picker-item-height: 56px; --month-picker-item-button-max-width: 140px; --year-picker-padding: 0 12px; --year-picker-item-width: 33%; --year-picker-item-height: 56px; --year-picker-item-button-max-width: 140px; --day-picker-content-item-width: 14.28%; --day-picker-content-item-font-size: var(--font-size-sm); --day-picker-content-item-padding: 2px 0; --day-picker-content-item-button-width: 32px; --day-picker-content-item-button-height: 32px; --day-picker-content-item-button-font-size: var(--font-size-sm); --day-picker-head-item-color: rgba(0, 0, 0, 0.38); --day-picker-head-item-padding: 8px 0; --day-picker-head-item-font-weight: 600;}.var-date-picker { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); border-radius: var(--date-picker-border-radius); contain: layout style; display: flex; width: 100%; flex-direction: column; font-size: var(--date-picker-font-size); position: relative; min-width: var(--date-picker-min-width); overflow: hidden;}.var-date-picker ul { list-style: none; margin: 0; padding: 0;}.var-date-picker__title { min-height: var(--date-picker-title-height); padding: var(--date-picker-title-padding); color: var(--date-picker-title-color); background: var(--date-picker-title-background); display: flex; justify-content: space-between; flex-direction: column; flex-wrap: wrap;}.var-date-picker__title-select { display: inline-flex; align-items: center; justify-content: space-between; margin-bottom: var(--date-picker-title-year-margin-bottom);}.var-date-picker__title-hint { color: var(--date-picker-title-hint-color); font-size: var(--date-picker-title-hint-font-size);}.var-date-picker__title-year { cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-size: var(--date-picker-title-year-font-size); font-weight: var(--date-picker-title-year-font-weight); transition: 0.3s var(--cubic-bezier); margin-bottom: 0;}.var-date-picker__title-year--active { opacity: 1;}.var-date-picker__title-date { height: var(--date-picker-title-date-height); overflow: hidden; font-size: var(--date-picker-title-date-font-size); text-align: left; font-weight: var(--date-picker-title-date-font-weight); position: relative; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: flex; align-items: center; opacity: 0.6; transition: 0.3s var(--cubic-bezier);}.var-date-picker__title-date--active { opacity: 1;}.var-date-picker__title-date--range { font-size: var(--date-picker-title-date-range-font-size);}.var-date-picker__body { position: relative; overflow: auto; height: var(--date-picker-body-height); background-color: var(--date-picker-body-background-color); padding: var(--date-picker-body-padding);}.var-date-picker__body::-webkit-scrollbar { display: none; width: 0; background: transparent;}.var-date-picker__actions { background-color: var(--date-picker-body-background-color); padding: var(--date-picker-actions-padding); display: flex; justify-content: flex-end;}.var-date-picker-header { padding: var(--date-picker-header-padding); align-items: center; display: flex; justify-content: space-between; position: relative; color: var(--date-picker-header-color); background-color: var(--date-picker-body-background-color);}.var-date-picker-header__value { flex: 1; text-align: center; position: relative; overflow: hidden; font-weight: 700; cursor: pointer; user-select: none;}.var-date-picker-header__value div { width: 100%;}.var-date-picker-header__arrow[var-date-picker-header-cover] { filter: var(--date-picker-header-arrow-filter);}.var-date-picker .var-month-picker__content { padding: var(--month-picker-padding);}.var-date-picker .var-month-picker__content ul { display: flex; flex-wrap: wrap; justify-content: space-between;}.var-date-picker .var-month-picker__content ul li { width: var(--month-picker-item-width); display: flex; height: var(--month-picker-item-height); align-items: center; justify-content: center;}.var-date-picker .var-month-picker__button[var-month-picker-cover] { width: 100%; max-width: var(--month-picker-item-button-max-width);}.var-date-picker .var-month-picker__button[var-date-picker-color-cover='true'] { color: var(--date-picker-main-color);}.var-date-picker .var-month-picker__button--disabled { color: var(--color-text-disabled) !important; cursor: not-allowed;}.var-date-picker .var-year-picker { padding: var(--year-picker-padding); display: flex; flex-wrap: wrap; justify-content: space-between;}.var-date-picker .var-year-picker li { width: var(--year-picker-item-width); display: flex; height: var(--year-picker-item-height); align-items: center; justify-content: center;}.var-date-picker .var-year-picker__button[var-year-picker-cover] { width: 100%; max-width: var(--year-picker-item-button-max-width);}.var-date-picker .var-year-picker__button[var-date-picker-color-cover='true'] { color: var(--date-picker-main-color);}.var-date-picker .var-year-picker__button--disabled { color: var(--color-text-disabled) !important; cursor: not-allowed;}.var-date-picker .var-day-picker__content ul { display: flex; flex-wrap: wrap;}.var-date-picker .var-day-picker__content ul li { position: relative; display: flex; justify-content: center; width: var(--day-picker-content-item-width); font-size: var(--day-picker-content-item-font-size); padding: var(--day-picker-content-item-padding);}.var-date-picker .var-day-picker__head li { color: var(--day-picker-head-item-color); padding: var(--day-picker-head-item-padding); font-weight: var(--day-picker-head-item-font-weight);}.var-date-picker .var-day-picker__button[var-day-picker-cover] { width: var(--day-picker-content-item-button-width); height: var(--day-picker-content-item-button-height); font-size: var(--day-picker-content-item-button-font-size);}.var-date-picker .var-day-picker__button:not(.var-day-picker__button--usable) { cursor: unset;}.var-date-picker .var-day-picker__button[var-date-picker-color-cover='true'] { color: var(--date-picker-main-color);}.var-date-picker .var-day-picker__button--disabled { color: var(--color-text-disabled) !important; cursor: not-allowed;}.var-date-picker-translatey-enter-from { opacity: 0; transform: translateY(100%);}.var-date-picker-translatey-enter-active,.var-date-picker-reverse-translatey-enter-active { transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatey-leave-active,.var-date-picker-reverse-translatey-leave-active { position: absolute; transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatey-leave-to { opacity: 0; transform: translateY(-100%);}.var-date-picker-reverse-translatey-enter-from { opacity: 0; transform: translateY(-100%);}.var-date-picker-reverse-translatey-leave-to { opacity: 0; transform: translateY(100%);}.var-date-picker-panel-fade-enter-from,.var-date-picker-panel-fade-leave-to { transition: 0.3s var(--cubic-bezier); opacity: 0;}.var-date-picker-panel-fade-leave-active { position: absolute;}.var-date-picker-translatex-enter-from { opacity: 0; transform: translateX(100%);}.var-date-picker-reverse-translatex-enter-from { opacity: 0; transform: translateX(-100%);}.var-date-picker-translatex-enter-active,.var-date-picker-reverse-translatex-enter-active { transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatex-leave-active,.var-date-picker-reverse-translatex-leave-active { position: absolute; transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatex-leave-to { opacity: 0; transform: translateX(-100%);}.var-date-picker-reverse-translatex-leave-to { opacity: 0; transform: translateX(100%);}
+:root { --date-picker-border-radius: 4px; --date-picker-font-size: var(--font-size-md); --date-picker-min-width: 290px; --date-picker-main-color: rgba(0, 0, 0, 0.87); --date-picker-title-hint-color: #fff; --date-picker-title-hint-font-size: var(--font-size-md); --date-picker-title-height: 105px; --date-picker-title-padding: 16px; --date-picker-title-background: var(--color-primary); --date-picker-title-color: #fff; --date-picker-title-year-font-size: var(--font-size-md); --date-picker-title-year-font-weight: 500; --date-picker-title-year-margin-bottom: 8px; --date-picker-title-date-height: 48px; --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-background-color: #fff; --date-picker-body-height: 280px; --date-picker-body-padding: 0; --date-picker-header-padding: 4px 16px; --date-picker-header-color: #555; --date-picker-actions-padding: 0 8px 12px 8px; --date-picker-header-arrow-filter: opacity(0.54); --month-picker-padding: 0 12px; --month-picker-item-width: 33%; --month-picker-item-height: 56px; --month-picker-item-button-max-width: 140px; --year-picker-padding: 0 12px; --year-picker-item-width: 33%; --year-picker-item-height: 56px; --year-picker-item-button-max-width: 140px; --day-picker-content-item-width: 14.28%; --day-picker-content-item-font-size: var(--font-size-sm); --day-picker-content-item-padding: 2px 0; --day-picker-content-item-button-width: 32px; --day-picker-content-item-button-height: 32px; --day-picker-content-item-button-font-size: var(--font-size-sm); --day-picker-head-item-color: rgba(0, 0, 0, 0.38); --day-picker-head-item-padding: 8px 0; --day-picker-head-item-font-weight: 600;}.var-date-picker { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); border-radius: var(--date-picker-border-radius); contain: layout style; display: flex; width: 100%; flex-direction: column; font-size: var(--date-picker-font-size); position: relative; min-width: var(--date-picker-min-width); overflow: hidden;}.var-date-picker ul { list-style: none; margin: 0; padding: 0;}.var-date-picker__title { min-height: var(--date-picker-title-height); padding: var(--date-picker-title-padding); color: var(--date-picker-title-color); background: var(--date-picker-title-background); display: flex; justify-content: space-between; flex-direction: column; flex-wrap: wrap;}.var-date-picker__title-select { display: inline-flex; align-items: center; justify-content: space-between; margin-bottom: var(--date-picker-title-year-margin-bottom);}.var-date-picker__title-hint { color: var(--date-picker-title-hint-color); font-size: var(--date-picker-title-hint-font-size);}.var-date-picker__title-year { cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-size: var(--date-picker-title-year-font-size); font-weight: var(--date-picker-title-year-font-weight); transition: 0.3s var(--cubic-bezier); margin-bottom: 0;}.var-date-picker__title-year--active { opacity: 1;}.var-date-picker__title-date { height: var(--date-picker-title-date-height); overflow: hidden; font-size: var(--date-picker-title-date-font-size); text-align: left; font-weight: var(--date-picker-title-date-font-weight); position: relative; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: flex; align-items: center; justify-content: var(--date-picker-title-date-justify-content); opacity: 0.6; transition: 0.3s var(--cubic-bezier);}.var-date-picker__title-date--active { opacity: 1;}.var-date-picker__title-date--range { font-size: var(--date-picker-title-date-range-font-size);}.var-date-picker__body { position: relative; overflow: auto; height: var(--date-picker-body-height); background-color: var(--date-picker-body-background-color); padding: var(--date-picker-body-padding);}.var-date-picker__body::-webkit-scrollbar { display: none; width: 0; background: transparent;}.var-date-picker__actions { background-color: var(--date-picker-body-background-color); padding: var(--date-picker-actions-padding); display: flex; justify-content: flex-end;}.var-date-picker-header { padding: var(--date-picker-header-padding); align-items: center; display: flex; justify-content: space-between; position: relative; color: var(--date-picker-header-color); background-color: var(--date-picker-body-background-color);}.var-date-picker-header__value { flex: 1; text-align: center; position: relative; overflow: hidden; font-weight: 700; cursor: pointer; user-select: none;}.var-date-picker-header__value div { width: 100%;}.var-date-picker-header__arrow[var-date-picker-header-cover] { filter: var(--date-picker-header-arrow-filter);}.var-date-picker .var-month-picker__content { padding: var(--month-picker-padding);}.var-date-picker .var-month-picker__content ul { display: flex; flex-wrap: wrap; justify-content: space-between;}.var-date-picker .var-month-picker__content ul li { width: var(--month-picker-item-width); display: flex; height: var(--month-picker-item-height); align-items: center; justify-content: center;}.var-date-picker .var-month-picker__button[var-month-picker-cover] { width: 100%; max-width: var(--month-picker-item-button-max-width);}.var-date-picker .var-month-picker__button[var-date-picker-color-cover='true'] { color: var(--date-picker-main-color);}.var-date-picker .var-month-picker__button--disabled { color: var(--color-text-disabled) !important; cursor: not-allowed;}.var-date-picker .var-year-picker { padding: var(--year-picker-padding); display: flex; flex-wrap: wrap; justify-content: space-between;}.var-date-picker .var-year-picker li { width: var(--year-picker-item-width); display: flex; height: var(--year-picker-item-height); align-items: center; justify-content: center;}.var-date-picker .var-year-picker__button[var-year-picker-cover] { width: 100%; max-width: var(--year-picker-item-button-max-width);}.var-date-picker .var-year-picker__button[var-date-picker-color-cover='true'] { color: var(--date-picker-main-color);}.var-date-picker .var-year-picker__button--disabled { color: var(--color-text-disabled) !important; cursor: not-allowed;}.var-date-picker .var-day-picker__content ul { display: flex; flex-wrap: wrap;}.var-date-picker .var-day-picker__content ul li { position: relative; display: flex; justify-content: center; width: var(--day-picker-content-item-width); font-size: var(--day-picker-content-item-font-size); padding: var(--day-picker-content-item-padding);}.var-date-picker .var-day-picker__head li { color: var(--day-picker-head-item-color); padding: var(--day-picker-head-item-padding); font-weight: var(--day-picker-head-item-font-weight);}.var-date-picker .var-day-picker__button[var-day-picker-cover] { width: var(--day-picker-content-item-button-width); height: var(--day-picker-content-item-button-height); font-size: var(--day-picker-content-item-button-font-size);}.var-date-picker .var-day-picker__button:not(.var-day-picker__button--usable) { cursor: unset;}.var-date-picker .var-day-picker__button[var-date-picker-color-cover='true'] { color: var(--date-picker-main-color);}.var-date-picker .var-day-picker__button--disabled { color: var(--color-text-disabled) !important; cursor: not-allowed;}.var-date-picker-translatey-enter-from { opacity: 0; transform: translateY(100%);}.var-date-picker-translatey-enter-active,.var-date-picker-reverse-translatey-enter-active { transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatey-leave-active,.var-date-picker-reverse-translatey-leave-active { position: absolute; transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatey-leave-to { opacity: 0; transform: translateY(-100%);}.var-date-picker-reverse-translatey-enter-from { opacity: 0; transform: translateY(-100%);}.var-date-picker-reverse-translatey-leave-to { opacity: 0; transform: translateY(100%);}.var-date-picker-panel-fade-enter-from,.var-date-picker-panel-fade-leave-to { transition: 0.3s var(--cubic-bezier); opacity: 0;}.var-date-picker-panel-fade-leave-active { position: absolute;}.var-date-picker-translatex-enter-from { opacity: 0; transform: translateX(100%);}.var-date-picker-reverse-translatex-enter-from { opacity: 0; transform: translateX(-100%);}.var-date-picker-translatex-enter-active,.var-date-picker-reverse-translatex-enter-active { transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatex-leave-active,.var-date-picker-reverse-translatex-leave-active { position: absolute; transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatex-leave-to { opacity: 0; transform: translateX(-100%);}.var-date-picker-reverse-translatex-leave-to { opacity: 0; transform: translateX(100%);}

package/es/index.bundle.mjs

@@ -262,7 +262,7 @@ import './tooltip/style/index.mjs'
 import './uploader/style/index.mjs'
 import './watermark/style/index.mjs'
 
-const version = '3.1.0-alpha.1709717246484'
+const version = '3.1.0'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/index.mjs

@@ -174,7 +174,7 @@ export * from './tooltip/index.mjs'
 export * from './uploader/index.mjs'
 export * from './watermark/index.mjs'
 
-const version = '3.1.0-alpha.1709717246484'
+const version = '3.1.0'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/picker/props.mjs

@@ -65,6 +65,7 @@ const props = __spreadValues({
   "show",
   "onUpdate:show",
   "closeOnClickOverlay",
+  "closeOnKeyEscape",
   "teleport",
   "safeArea",
   "onOpen",
@@ -73,9 +74,7 @@ const props = __spreadValues({
   "onClosed",
   "onClickOverlay",
   "onRouteChange",
-  // internal for esc
-  "onKeyEscape",
-  "closeOnKeyEscape"
+  "onKeyEscape"
 ]));
 export {
   props

package/es/popup/props.mjs

@@ -20,6 +20,10 @@ const props = {
     type: Boolean,
     default: true
   },
+  closeOnKeyEscape: {
+    type: Boolean,
+    default: true
+  },
   defaultStyle: {
     type: Boolean,
     default: true
@@ -34,16 +38,11 @@ const props = {
   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()
 };
 export {
   props

package/es/select/useSelectController.mjs

@@ -34,10 +34,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();

package/es/slider/Slider.mjs

@@ -1,18 +1,18 @@
 import VarFormDetails from "../form-details/index.mjs";
 import VarHoverOverlay, { useHoverOverlay } from "../hover-overlay/index.mjs";
 import Hover from "../hover/index.mjs";
-import { defineComponent, ref, onBeforeUnmount, computed, reactive, nextTick, watch, unref } from "vue";
+import { defineComponent, ref, onBeforeUnmount, computed, reactive, nextTick, watch } from "vue";
 import { useValidation, createNamespace } from "../utils/components.mjs";
 import { useForm } from "../form/provide.mjs";
 import { getLeft, toSizeUnit } from "../utils/elements.mjs";
 import { warn } from "../utils/logger.mjs";
-import { isArray, isNumber, toNumber, getRect, preventDefault, call } from "@varlet/shared";
+import { isArray, isNumber, toNumber, getRect, preventDefault, call, hasOwn } from "@varlet/shared";
 import { props, Thumbs } from "./props.mjs";
-import { onSmartMounted } from "@varlet/use";
+import { onSmartMounted, onWindowResize, useEventListener } from "@varlet/use";
 const { name, n, classes } = createNamespace("slider");
 import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, renderSlot as _renderSlot, resolveDirective as _resolveDirective, withDirectives as _withDirectives, resolveComponent as _resolveComponent, createVNode as _createVNode, toDisplayString as _toDisplayString, withModifiers as _withModifiers, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 const _withScopeId = (n2) => (_pushScopeId(""), n2 = n2(), _popScopeId(), n2);
-const _hoisted_1 = ["onTouchstart"];
+const _hoisted_1 = ["tabindex", "onTouchstart", "onFocusin", "onFocusout"];
 function __render__(_ctx, _cache) {
   const _component_var_hover_overlay = _resolveComponent("var-hover-overlay");
   const _component_var_form_details = _resolveComponent("var-form-details");
@@ -73,7 +73,10 @@ function __render__(_ctx, _cache) {
                 class: _normalizeClass(_ctx.n(`${_ctx.direction}-thumb`)),
                 key: item.enumValue,
                 style: _normalizeStyle(_ctx.thumbStyle(item)),
-                onTouchstart: _withModifiers(($event) => _ctx.start($event, item.enumValue), ["stop"])
+                tabindex: _ctx.isDisabled ? void 0 : "0",
+                onTouchstart: _withModifiers(($event) => _ctx.start($event, item.enumValue), ["stop"]),
+                onFocusin: ($event) => _ctx.handleFocus(item),
+                onFocusout: ($event) => _ctx.handleBlur(item)
               }, [
                 _renderSlot(_ctx.$slots, "button", {
                   currentValue: item.text
@@ -107,8 +110,9 @@ function __render__(_ctx, _cache) {
                     },
                     [
                       _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 */
@@ -175,6 +179,8 @@ const __sfc__ = defineComponent({
     const isDisabled = computed(() => props2.disabled || (form == null ? void 0 : form.disabled.value));
     const isReadonly = computed(() => props2.readonly || (form == null ? void 0 : form.readonly.value));
     const isVertical = computed(() => props2.direction === "vertical");
+    const focusingFirst = ref(false);
+    const focusingSecond = ref(false);
     const { bindForm, form } = useForm();
     const { errorMessage, validateWithTrigger: vt, validate: v, resetValidation } = useValidation();
     const { hovering: hoveringFirst, handleHovering: handleHoveringFirst } = useHoverOverlay();
@@ -188,15 +194,23 @@ const __sfc__ = defineComponent({
             value: getValue(modelValue[0]),
             enumValue: Thumbs.First,
             text: toPrecision(modelValue[0]),
-            hovering: 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: unref(hoveringSecond),
-            handleHovering: handleHoveringSecond
+            hovering: hoveringSecond.value,
+            focusing: focusingSecond.value,
+            handleHovering: handleHoveringSecond,
+            handleFocusing(value) {
+              focusingSecond.value = value;
+            }
           }
         ];
       } else if (isNumber(modelValue)) {
@@ -205,8 +219,12 @@ const __sfc__ = defineComponent({
             value: getValue(modelValue),
             enumValue: Thumbs.First,
             text: toPrecision(modelValue),
-            hovering: unref(hoveringFirst),
-            handleHovering: handleHoveringFirst
+            hovering: hoveringFirst.value,
+            focusing: focusingFirst.value,
+            handleHovering: handleHoveringFirst,
+            handleFocusing(value) {
+              focusingFirst.value = value;
+            }
           }
         ];
       }
@@ -240,19 +258,24 @@ const __sfc__ = defineComponent({
     };
     call(bindForm, sliderProvider);
     watch([() => props2.modelValue, () => props2.step], ([modelValue, step]) => {
-      if (!stepValidator() || !valueValidator() || isScroll.value)
+      if (!stepValidator() || !valueValidator() || isScroll.value) {
         return;
+      }
       setProps(modelValue, toNumber(step));
     });
     watch(maxDistance, () => setProps());
     onSmartMounted(() => {
-      if (!stepValidator() || !valueValidator())
+      if (!stepValidator() || !valueValidator()) {
         return;
-      maxDistance.value = sliderEl.value[isVertical.value ? "offsetHeight" : "offsetWidth"];
-    });
-    onBeforeUnmount(() => {
-      removeDocumentEvents();
+      }
+      resizeMaxDistance();
     });
+    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);
     }
@@ -269,8 +292,9 @@ const __sfc__ = defineComponent({
     }
     function getOffset(e) {
       const currentTarget = e.currentTarget;
-      if (!currentTarget)
+      if (!currentTarget) {
         return 0;
+      }
       if (!isVertical.value) {
         return e.clientX - getLeft(currentTarget);
       }
@@ -284,36 +308,49 @@ const __sfc__ = 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, max } = props2;
-      if (value < toNumber(min))
+      if (value < toNumber(min)) {
         return 0;
-      if (value > toNumber(max))
+      }
+      if (value > toNumber(max)) {
         return 100;
+      }
       return (value - toNumber(min)) / 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 } = props2;
@@ -327,14 +364,13 @@ const __sfc__ = 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(offset) {
-      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(offset - thumb1Distance);
@@ -352,15 +388,15 @@ const __sfc__ = defineComponent({
       document.removeEventListener("touchcancel", end);
     }
     function start(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];
@@ -368,15 +404,17 @@ const __sfc__ = 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 end() {
@@ -385,8 +423,9 @@ const __sfc__ = 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(min);
@@ -438,10 +477,12 @@ const __sfc__ = defineComponent({
     function setProps(modelValue = props2.modelValue, step = toNumber(props2.step)) {
       const getPercent = (value) => {
         const { min, max } = props2;
-        if (value < toNumber(min))
+        if (value < toNumber(min)) {
           return 0;
-        if (value > toNumber(max))
+        }
+        if (value > toNumber(max)) {
           return scope.value / step;
+        }
         return (value - toNumber(min)) / step;
       };
       if (props2.range && isArray(modelValue)) {
@@ -458,6 +499,46 @@ const __sfc__ = defineComponent({
       call(props2["onUpdate:modelValue"], resetValue);
       resetValidation();
     }
+    function moveFocusingThumb(offset, value) {
+      const stepValue = Number(props2.step);
+      if (isArray(value)) {
+        const updatedFirstValue = value[0] + (focusingFirst.value ? offset * stepValue : 0);
+        const updatedSecondValue = value[1] + (focusingSecond.value ? offset * stepValue : 0);
+        return [updatedFirstValue, updatedSecondValue].map(toPrecision);
+      }
+      return toPrecision(value + offset * 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 offset = keyToOffset[key];
+      const value = moveFocusingThumb(offset, props2.modelValue);
+      emitChange(value);
+    }
+    function handleFocus(item) {
+      if (isDisabled.value) {
+        return;
+      }
+      item.handleFocusing(true);
+    }
+    function handleBlur(item) {
+      item.handleFocusing(false);
+    }
     return {
       Thumbs,
       sliderEl,
@@ -467,6 +548,8 @@ const __sfc__ = defineComponent({
       errorMessage,
       thumbsProps,
       thumbList,
+      handleFocus,
+      handleBlur,
       n,
       classes,
       thumbStyle,

package/es/snackbar/style/index.mjs

@@ -1,7 +1,7 @@
 import '../../styles/common.css'
+import '../SnackbarSfc.css'
 import '../../styles/elevation.css'
 import '../../loading/loading.css'
 import '../../icon/icon.css'
 import '../snackbar.css'
 import '../coreSfc.css'
-import '../SnackbarSfc.css'