@varlet/ui 2.9.0 → 2.9.1-alpha.1678874318012

package/es/button/Button.mjs

@@ -1,5 +1,6 @@
 import Ripple from '../ripple/index.mjs';
 import VarLoading from '../loading/index.mjs';
+import VarHoverOverlay, { useHoverOverlay } from '../hover-overlay/index.mjs';
 import Hover from '../hover/index.mjs';
 import { computed, defineComponent, ref } from 'vue';
 import { props } from './props.mjs';
@@ -10,7 +11,7 @@ var {
   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, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, createElementBlock as _createElementBlock, withDirectives as _withDirectives, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+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";
 
 var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 
@@ -19,6 +20,8 @@ var _hoisted_1 = ["type", "disabled"];
 function __render__(_ctx, _cache) {
   var _component_var_loading = _resolveComponent("var-loading");
 
+  var _component_var_hover_overlay = _resolveComponent("var-hover-overlay");
+
   var _directive_ripple = _resolveDirective("ripple");
 
   var _directive_hover = _resolveDirective("hover");
@@ -51,21 +54,22 @@ function __render__(_ctx, _cache) {
     class: _normalizeClass(_ctx.classes(_ctx.n('content'), [_ctx.loading || _ctx.pending, _ctx.n('--hidden')]))
   }, [_renderSlot(_ctx.$slots, "default")], 2
   /* CLASS */
-  ), _createElementVNode("div", {
-    class: _normalizeClass(_ctx.classes(_ctx.n('overlay'), [_ctx.hovering, _ctx.n('--hovering')]))
-  }, null, 2
-  /* CLASS */
-  )], 46
+  ), _createVNode(_component_var_hover_overlay, {
+    hovering: _ctx.hovering
+  }, null, 8
+  /* PROPS */
+  , ["hovering"])], 46
   /* CLASS, STYLE, PROPS, HYDRATE_EVENTS */
   , _hoisted_1)), [[_directive_ripple, {
     disabled: _ctx.disabled || !_ctx.ripple
-  }], [_directive_hover, _ctx.handleHover, "desktop"]]);
+  }], [_directive_hover, _ctx.handleHovering, "desktop"]]);
 }
 
 var __sfc__ = defineComponent({
   name: 'VarButton',
   components: {
-    VarLoading
+    VarLoading,
+    VarHoverOverlay
   },
   directives: {
     Ripple,
@@ -75,10 +79,13 @@ var __sfc__ = defineComponent({
 
   setup(props) {
     var pending = ref(false);
-    var hovering = ref(false);
     var {
       buttonGroup
     } = useButtonGroup();
+    var {
+      hovering,
+      handleHovering
+    } = useHoverOverlay();
     var states = computed(() => {
       if (!buttonGroup) {
         return {
@@ -150,17 +157,13 @@ var __sfc__ = defineComponent({
       attemptAutoLoading(call(onTouchstart, e));
     };
 
-    var handleHover = isHover => {
-      hovering.value = isHover;
-    };
-
     return {
       n,
       classes,
       pending,
       states,
       hovering,
-      handleHover,
+      handleHovering,
       handleClick,
       handleTouchstart
     };

package/es/button/button.css

@@ -1 +1 @@
-:root { --button-default-color: #f5f5f5; --button-primary-color: var(--color-primary); --button-danger-color: var(--color-danger); --button-success-color: var(--color-success); --button-warning-color: var(--color-warning); --button-info-color: var(--color-info); --button-disabled-color: var(--color-disabled); --button-disabled-text-color: var(--color-text-disabled); --button-border-radius: 4px; --button-mini-padding: 0 9px; --button-small-padding: 0 11px; --button-normal-padding: 0 15px; --button-large-padding: 0 22px; --button-round-padding: 6px; --button-mini-height: 20px; --button-small-height: 28px; --button-normal-height: 36px; --button-large-height: 44px; --button-mini-font-size: var(--font-size-xs); --button-small-font-size: var(--font-size-sm); --button-normal-font-size: var(--font-size-md); --button-large-font-size: var(--font-size-lg);}.var-button { position: relative; justify-content: center; align-items: center; outline: none; border: none; border-radius: var(--button-border-radius); user-select: none; cursor: pointer; font-family: inherit; transition: box-shadow 0.2s, background-color 0.25s; will-change: box-shadow; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); white-space: nowrap;}.var-button:active { box-shadow: 0 3px 5px -1px var(--shadow-key-umbra-opacity), 0 5px 8px 0 var(--shadow-key-penumbra-opacity), 0 1px 14px 0 var(--shadow-key-ambient-opacity);}.var-button__content { display: flex; align-items: center; flex-wrap: wrap;}.var-button__loading[var-button-cover] { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}.var-button__overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: inherit; background-color: currentColor; opacity: 0; transition: opacity 0.15s; will-change: opacity; pointer-events: none;}.var-button--hovering { opacity: 0.15;}.var-button--default { color: inherit; background-color: var(--button-default-color);}.var-button--primary { color: #fff; background-color: var(--button-primary-color);}.var-button--info { color: #fff; background-color: var(--button-info-color);}.var-button--success { color: #fff; background-color: var(--button-success-color);}.var-button--warning { color: #fff; background-color: var(--button-warning-color);}.var-button--danger { color: #fff; background-color: var(--button-danger-color);}.var-button--disabled { background-color: var(--button-disabled-color); color: var(--button-disabled-text-color); cursor: not-allowed; box-shadow: none !important;}.var-button--block { width: 100%;}.var-button--text { background-color: transparent;}.var-button--text:active { box-shadow: none;}.var-button--text-default { color: inherit;}.var-button--text-primary { color: var(--button-primary-color);}.var-button--text-info { color: var(--button-info-color);}.var-button--text-success { color: var(--button-success-color);}.var-button--text-warning { color: var(--button-warning-color);}.var-button--text-danger { color: var(--button-danger-color);}.var-button--text-disabled { color: var(--button-disabled-text-color);}.var-button--normal { height: var(--button-normal-height); padding: var(--button-normal-padding); font-size: var(--button-normal-font-size);}.var-button--large { height: var(--button-large-height); padding: var(--button-large-padding); font-size: var(--button-large-font-size);}.var-button--small { height: var(--button-small-height); padding: var(--button-small-padding); font-size: var(--button-small-font-size);}.var-button--mini { height: var(--button-mini-height); padding: var(--button-mini-padding); font-size: var(--button-mini-font-size);}.var-button--round { padding: var(--button-round-padding); border-radius: 50%; height: auto;}.var-button--outline { border: thin solid currentColor;}.var-button--hidden { opacity: 0;}
+:root { --button-default-color: #f5f5f5; --button-primary-color: var(--color-primary); --button-danger-color: var(--color-danger); --button-success-color: var(--color-success); --button-warning-color: var(--color-warning); --button-info-color: var(--color-info); --button-disabled-color: var(--color-disabled); --button-disabled-text-color: var(--color-text-disabled); --button-border-radius: 4px; --button-mini-padding: 0 9px; --button-small-padding: 0 11px; --button-normal-padding: 0 15px; --button-large-padding: 0 22px; --button-round-padding: 6px; --button-mini-height: 20px; --button-small-height: 28px; --button-normal-height: 36px; --button-large-height: 44px; --button-mini-font-size: var(--font-size-xs); --button-small-font-size: var(--font-size-sm); --button-normal-font-size: var(--font-size-md); --button-large-font-size: var(--font-size-lg);}.var-button { position: relative; justify-content: center; align-items: center; outline: none; border: none; border-radius: var(--button-border-radius); user-select: none; cursor: pointer; font-family: inherit; transition: box-shadow 0.2s, background-color 0.25s; will-change: box-shadow; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); white-space: nowrap;}.var-button:active { box-shadow: 0 3px 5px -1px var(--shadow-key-umbra-opacity), 0 5px 8px 0 var(--shadow-key-penumbra-opacity), 0 1px 14px 0 var(--shadow-key-ambient-opacity);}.var-button__content { display: flex; align-items: center; flex-wrap: wrap;}.var-button__loading[var-button-cover] { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}.var-button--default { color: inherit; background-color: var(--button-default-color);}.var-button--primary { color: #fff; background-color: var(--button-primary-color);}.var-button--info { color: #fff; background-color: var(--button-info-color);}.var-button--success { color: #fff; background-color: var(--button-success-color);}.var-button--warning { color: #fff; background-color: var(--button-warning-color);}.var-button--danger { color: #fff; background-color: var(--button-danger-color);}.var-button--disabled { background-color: var(--button-disabled-color); color: var(--button-disabled-text-color); cursor: not-allowed; box-shadow: none !important;}.var-button--block { width: 100%;}.var-button--text { background-color: transparent;}.var-button--text:active { box-shadow: none;}.var-button--text-default { color: inherit;}.var-button--text-primary { color: var(--button-primary-color);}.var-button--text-info { color: var(--button-info-color);}.var-button--text-success { color: var(--button-success-color);}.var-button--text-warning { color: var(--button-warning-color);}.var-button--text-danger { color: var(--button-danger-color);}.var-button--text-disabled { color: var(--button-disabled-text-color);}.var-button--normal { height: var(--button-normal-height); padding: var(--button-normal-padding); font-size: var(--button-normal-font-size);}.var-button--large { height: var(--button-large-height); padding: var(--button-large-padding); font-size: var(--button-large-font-size);}.var-button--small { height: var(--button-small-height); padding: var(--button-small-padding); font-size: var(--button-small-font-size);}.var-button--mini { height: var(--button-mini-height); padding: var(--button-mini-padding); font-size: var(--button-mini-font-size);}.var-button--round { padding: var(--button-round-padding); border-radius: 50%; height: auto;}.var-button--outline { border: thin solid currentColor;}.var-button--hidden { opacity: 0;}

package/es/button/style/index.mjs

@@ -1,5 +1,6 @@
 import '../../styles/common.css'
 import '../../styles/elevation.css'
+import '../../hover-overlay/hoverOverlay.css'
 import '../../ripple/ripple.css'
 import '../../loading/loading.css'
 import '../button.css'

package/es/counter/Counter.mjs

@@ -1,3 +1,4 @@
+import VarButton from '../button/index.mjs';
 import VarIcon from '../icon/index.mjs';
 import VarFormDetails from '../form-details/index.mjs';
 import Ripple from '../ripple/index.mjs';
@@ -14,7 +15,7 @@ var {
 } = createNamespace('counter');
 var SPEED = 100;
 var DELAY = 600;
-import { resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, createVNode as _createVNode, withDirectives as _withDirectives, vModelText as _vModelText, createElementVNode as _createElementVNode, mergeProps as _mergeProps, openBlock as _openBlock, createElementBlock as _createElementBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { resolveComponent as _resolveComponent, createVNode as _createVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, withCtx as _withCtx, vModelText as _vModelText, createElementVNode as _createElementVNode, withDirectives as _withDirectives, mergeProps as _mergeProps, openBlock as _openBlock, createElementBlock as _createElementBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
 var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 
@@ -23,9 +24,9 @@ var _hoisted_1 = ["inputmode", "readonly", "disabled"];
 function __render__(_ctx, _cache) {
   var _component_var_icon = _resolveComponent("var-icon");
 
-  var _component_var_form_details = _resolveComponent("var-form-details");
+  var _component_var_button = _resolveComponent("var-button");
 
-  var _directive_ripple = _resolveDirective("ripple");
+  var _component_var_form_details = _resolveComponent("var-form-details");
 
   return _openBlock(), _createElementBlock("div", {
     class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n('$--box')))
@@ -34,23 +35,29 @@ function __render__(_ctx, _cache) {
     style: {
       background: _ctx.color ? _ctx.color : undefined
     }
-  }, _ctx.$attrs), [_withDirectives(_createVNode(_component_var_icon, {
-    "var-counter-cover": "",
-    name: "minus",
+  }, _ctx.$attrs), [_createVNode(_component_var_button, {
     class: _normalizeClass(_ctx.classes(_ctx.n('decrement-button'), [!_ctx.decrementButton, _ctx.n('--hidden')], [_ctx.disabled || _ctx.formDisabled, _ctx.n('--not-allowed')])),
     style: _normalizeStyle({
       width: _ctx.toSizeUnit(_ctx.buttonSize),
       height: _ctx.toSizeUnit(_ctx.buttonSize)
     }),
+    round: "",
+    "var-counter-cover": "",
+    ripple: _ctx.ripple && _ctx.decrementButton && !_ctx.disabled && !_ctx.formDisabled && !_ctx.readonly && !_ctx.formReadonly && !_ctx.disableDecrement && !_ctx.isMin,
     onClick: _ctx.decrement,
     onTouchstart: _ctx.pressDecrement,
     onTouchend: _ctx.releaseDecrement,
     onTouchcancel: _ctx.releaseDecrement
-  }, null, 8
+  }, {
+    default: _withCtx(() => [_createVNode(_component_var_icon, {
+      name: "minus"
+    })]),
+    _: 1
+    /* STABLE */
+
+  }, 8
   /* PROPS */
-  , ["class", "style", "onClick", "onTouchstart", "onTouchend", "onTouchcancel"]), [[_directive_ripple, {
-    disabled: !_ctx.ripple || _ctx.disabled || _ctx.formDisabled || _ctx.readonly || _ctx.formReadonly || _ctx.disableDecrement || !_ctx.decrementButton || _ctx.isMin
-  }]]), _withDirectives(_createElementVNode("input", {
+  , ["class", "style", "ripple", "onClick", "onTouchstart", "onTouchend", "onTouchcancel"]), _withDirectives(_createElementVNode("input", {
     class: _normalizeClass(_ctx.classes(_ctx.n('input'), [_ctx.disabled || _ctx.formDisabled, _ctx.n('--not-allowed')])),
     style: _normalizeStyle({
       width: _ctx.toSizeUnit(_ctx.inputWidth),
@@ -65,23 +72,29 @@ function __render__(_ctx, _cache) {
     })
   }, null, 46
   /* CLASS, STYLE, PROPS, HYDRATE_EVENTS */
-  , _hoisted_1), [[_vModelText, _ctx.inputValue]]), _withDirectives(_createVNode(_component_var_icon, {
-    "var-counter-cover": "",
-    name: "plus",
+  , _hoisted_1), [[_vModelText, _ctx.inputValue]]), _createVNode(_component_var_button, {
     class: _normalizeClass(_ctx.classes(_ctx.n('increment-button'), [!_ctx.incrementButton, _ctx.n('--hidden')], [_ctx.disabled || _ctx.formDisabled, _ctx.n('--not-allowed')])),
     style: _normalizeStyle({
       width: _ctx.toSizeUnit(_ctx.buttonSize),
       height: _ctx.toSizeUnit(_ctx.buttonSize)
     }),
+    round: "",
+    "var-counter-cover": "",
+    ripple: _ctx.ripple && _ctx.incrementButton && !_ctx.disabled && !_ctx.formDisabled && !_ctx.readonly && !_ctx.formReadonly && !_ctx.disableIncrement && !_ctx.isMax,
     onClick: _ctx.increment,
     onTouchstart: _ctx.pressIncrement,
     onTouchend: _ctx.releaseIncrement,
     onTouchcancel: _ctx.releaseIncrement
-  }, null, 8
+  }, {
+    default: _withCtx(() => [_createVNode(_component_var_icon, {
+      name: "plus"
+    })]),
+    _: 1
+    /* STABLE */
+
+  }, 8
   /* PROPS */
-  , ["class", "style", "onClick", "onTouchstart", "onTouchend", "onTouchcancel"]), [[_directive_ripple, {
-    disabled: !_ctx.ripple || _ctx.disabled || _ctx.readonly || _ctx.formDisabled || _ctx.formReadonly || _ctx.disableIncrement || !_ctx.incrementButton || _ctx.isMax
-  }]])], 16
+  , ["class", "style", "ripple", "onClick", "onTouchstart", "onTouchend", "onTouchcancel"])], 16
   /* FULL_PROPS */
   ), _createVNode(_component_var_form_details, {
     "error-message": _ctx.errorMessage
@@ -95,6 +108,7 @@ function __render__(_ctx, _cache) {
 var __sfc__ = defineComponent({
   name: 'VarCounter',
   components: {
+    VarButton,
     VarIcon,
     VarFormDetails
   },
@@ -106,10 +120,6 @@ var __sfc__ = defineComponent({
 
   setup(props) {
     var inputValue = ref('');
-    var incrementTimer;
-    var decrementTimer;
-    var incrementDelayTimer;
-    var decrementDelayTimer;
     var {
       bindForm,
       form
@@ -124,7 +134,11 @@ var __sfc__ = defineComponent({
     var {
       readonly: formReadonly,
       disabled: formDisabled
-    } = form != null ? form : {}; // expose
+    } = form != null ? form : {};
+    var incrementTimer;
+    var decrementTimer;
+    var incrementDelayTimer;
+    var decrementDelayTimer; // expose
 
     var validate = () => v(props.rules, props.modelValue);
 

package/es/counter/counter.css

@@ -1 +1 @@
-:root { --counter-padding: 0 4px; --counter-font-color: #fff; --counter-background: var(--color-primary); --counter-input-width: 28px; --counter-input-margin: 0 4px; --counter-input-font-size: 14px; --counter-button-size: 28px; --counter-button-icon-size: 100%; --counter-disabled-color: var(--color-disabled); --counter-disabled-opacity: var(--opacity-disabled); --counter-error-color: var(--color-danger);}.var-counter { display: inline-flex; flex-direction: column; align-items: flex-start;}.var-counter__controller { display: flex; align-items: center; color: var(--counter-font-color); border-radius: var(--counter-button-size); padding: var(--counter-padding); background: var(--counter-background); transition: color 0.25s, background-color 0.25s, opacity 0.25s;}.var-counter__decrement-button[var-counter-cover] { width: var(--counter-button-size); height: var(--counter-button-size); font-size: var(--counter-button-icon-size); border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-select: none; user-select: none;}.var-counter__input { width: var(--counter-input-width); font-size: var(--counter-input-font-size); outline: none; border: none; background: transparent; padding: 0; text-align: center; color: var(--counter-font-color); margin: var(--counter-input-margin);}.var-counter__input[disabled] { background: transparent;}.var-counter__increment-button[var-counter-cover] { width: var(--counter-button-size); height: var(--counter-button-size); font-size: var(--counter-button-icon-size); border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-select: none; user-select: none;}.var-counter--disabled { opacity: var(--counter-disabled-opacity); cursor: not-allowed;}.var-counter--not-allowed { cursor: not-allowed !important;}.var-counter--hidden { opacity: 0;}.var-counter--error { background: var(--counter-error-color);}
+:root { --counter-padding: 0 4px; --counter-font-color: #fff; --counter-background: var(--color-primary); --counter-input-width: 28px; --counter-input-margin: 0 4px; --counter-input-font-size: 14px; --counter-button-size: 28px; --counter-button-icon-size: 100%; --counter-disabled-color: var(--color-disabled); --counter-disabled-opacity: var(--opacity-disabled); --counter-error-color: var(--color-danger);}.var-counter { display: inline-flex; flex-direction: column; align-items: flex-start;}.var-counter__controller { display: flex; align-items: center; color: var(--counter-font-color); border-radius: var(--counter-button-size); padding: var(--counter-padding); background: var(--counter-background); transition: color 0.25s, background-color 0.25s, opacity 0.25s;}.var-counter__input { width: var(--counter-input-width); font-size: var(--counter-input-font-size); outline: none; border: none; background: transparent; padding: 0; text-align: center; color: var(--counter-font-color); margin: var(--counter-input-margin);}.var-counter__input[disabled] { background: transparent;}.var-counter__increment-button[var-counter-cover],.var-counter__decrement-button[var-counter-cover] { width: var(--counter-button-size); height: var(--counter-button-size); font-size: var(--counter-button-icon-size); border-radius: 50%; padding: 0; background-color: rgba(0, 0, 0, 0); box-shadow: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-select: none; user-select: none;}.var-counter__increment-button[var-counter-cover]:active,.var-counter__decrement-button[var-counter-cover]:active { box-shadow: none;}.var-counter--disabled { opacity: var(--counter-disabled-opacity); cursor: not-allowed;}.var-counter--disabled .var-hover-overlay { opacity: 0;}.var-counter--not-allowed { cursor: not-allowed !important;}.var-counter--hidden { opacity: 0;}.var-counter--error { background: var(--counter-error-color);}

package/es/counter/style/index.mjs

@@ -1,6 +1,8 @@
 import '../../styles/common.css'
 import '../../styles/elevation.css'
 import '../../icon/icon.css'
+import '../../loading/loading.css'
+import '../../button/button.css'
 import '../../form-details/formDetails.css'
 import '../../ripple/ripple.css'
 import '../counter.css'

package/es/hover-overlay/HoverOverlay.mjs

@@ -0,0 +1,32 @@
+import { defineComponent } from 'vue';
+import { props } from './props.mjs';
+import { createNamespace } from '../utils/components.mjs';
+var {
+  n,
+  classes
+} = createNamespace('hover-overlay');
+import { normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+
+function __render__(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.hovering, _ctx.n('--hovering')]))
+  }, null, 2
+  /* CLASS */
+  );
+}
+
+var __sfc__ = defineComponent({
+  name: 'VarHoverOverlay',
+  props,
+
+  setup() {
+    return {
+      n,
+      classes
+    };
+  }
+
+});
+
+__sfc__.render = __render__;
+export default __sfc__;

package/es/hover-overlay/hoverOverlay.css

@@ -0,0 +1 @@
+.var-hover-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: inherit; background-color: currentColor; opacity: 0; transition: opacity 0.15s; will-change: opacity; pointer-events: none;}.var-hover-overlay--hovering { opacity: 0.15;}

package/es/hover-overlay/index.mjs

@@ -0,0 +1,21 @@
+import HoverOverlay from './HoverOverlay.mjs';
+import { ref } from 'vue';
+
+HoverOverlay.install = function (app) {
+  app.component(HoverOverlay.name, HoverOverlay);
+};
+
+export function useHoverOverlay() {
+  var hovering = ref(false);
+
+  var handleHovering = value => {
+    hovering.value = value;
+  };
+
+  return {
+    hovering,
+    handleHovering
+  };
+}
+export var _HoverOverlayComponent = HoverOverlay;
+export default HoverOverlay;

package/es/hover-overlay/props.mjs

@@ -0,0 +1,6 @@
+export var props = {
+  hovering: {
+    type: Boolean,
+    default: true
+  }
+};

package/es/hover-overlay/style/index.mjs

@@ -0,0 +1,2 @@
+import '../hoverOverlay.css'
+import '../HoverOverlaySfc.css'

package/es/image-preview/index.mjs

@@ -1,8 +1,31 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import VarImagePreview from './ImagePreview.mjs';
 import { nextTick, reactive } from 'vue';
 import { inBrowser, isArray, isString } from '@varlet/shared';
 import { call, mountInstance } from '../utils/components.mjs';
 var singletonOptions;
+var defaultOptions = {};
+
+function normalizeOptions(options) {
+  if (options === void 0) {
+    options = {};
+  }
+
+  if (isString(options)) {
+    return _extends({}, defaultOptions, {
+      images: [options]
+    });
+  }
+
+  if (isArray(options)) {
+    return _extends({}, defaultOptions, {
+      images: options
+    });
+  }
+
+  return _extends({}, defaultOptions, options);
+}
 
 function ImagePreview(options) {
   if (!inBrowser()) {
@@ -10,11 +33,7 @@ function ImagePreview(options) {
   }
 
   ImagePreview.close();
-  var imagePreviewOptions = isString(options) ? {
-    images: [options]
-  } : isArray(options) ? {
-    images: options
-  } : options;
+  var imagePreviewOptions = normalizeOptions(options);
   var reactiveImagePreviewOptions = reactive(imagePreviewOptions);
   reactiveImagePreviewOptions.teleport = 'body';
   singletonOptions = reactiveImagePreviewOptions;
@@ -48,6 +67,14 @@ ImagePreview.close = () => {
   }
 };
 
+ImagePreview.setDefaultOptions = options => {
+  defaultOptions = options;
+};
+
+ImagePreview.resetDefaultOptions = () => {
+  defaultOptions = {};
+};
+
 VarImagePreview.install = function (app) {
   app.component(VarImagePreview.name, VarImagePreview);
 };

package/es/index.bundle.mjs

@@ -29,6 +29,7 @@ import Fab from './fab/index.mjs'
 import Form from './form/index.mjs'
 import FormDetails from './form-details/index.mjs'
 import Hover from './hover/index.mjs'
+import HoverOverlay from './hover-overlay/index.mjs'
 import Icon from './icon/index.mjs'
 import Image from './image/index.mjs'
 import ImagePreview from './image-preview/index.mjs'
@@ -109,6 +110,7 @@ export * from './fab/index.mjs'
 export * from './form/index.mjs'
 export * from './form-details/index.mjs'
 export * from './hover/index.mjs'
+export * from './hover-overlay/index.mjs'
 export * from './icon/index.mjs'
 export * from './image/index.mjs'
 export * from './image-preview/index.mjs'
@@ -189,6 +191,7 @@ import './fab/style/index.mjs'
 import './form/style/index.mjs'
 import './form-details/style/index.mjs'
 import './hover/style/index.mjs'
+import './hover-overlay/style/index.mjs'
 import './icon/style/index.mjs'
 import './image/style/index.mjs'
 import './image-preview/style/index.mjs'
@@ -238,7 +241,7 @@ import './time-picker/style/index.mjs'
 import './tooltip/style/index.mjs'
 import './uploader/style/index.mjs'
 
-const version = '2.9.0'
+const version = '2.9.1-alpha.1678874318012'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)
@@ -272,6 +275,7 @@ function install(app) {
   Form.install && app.use(Form)
   FormDetails.install && app.use(FormDetails)
   Hover.install && app.use(Hover)
+  HoverOverlay.install && app.use(HoverOverlay)
   Icon.install && app.use(Icon)
   Image.install && app.use(Image)
   ImagePreview.install && app.use(ImagePreview)
@@ -356,6 +360,7 @@ export {
   Form,
   FormDetails,
   Hover,
+  HoverOverlay,
   Icon,
   Image,
   ImagePreview,
@@ -440,6 +445,7 @@ export default {
   Form,
   FormDetails,
   Hover,
+  HoverOverlay,
   Icon,
   Image,
   ImagePreview,

package/es/index.mjs

@@ -29,6 +29,7 @@ import Fab from './fab/index.mjs'
 import Form from './form/index.mjs'
 import FormDetails from './form-details/index.mjs'
 import Hover from './hover/index.mjs'
+import HoverOverlay from './hover-overlay/index.mjs'
 import Icon from './icon/index.mjs'
 import Image from './image/index.mjs'
 import ImagePreview from './image-preview/index.mjs'
@@ -109,6 +110,7 @@ export * from './fab/index.mjs'
 export * from './form/index.mjs'
 export * from './form-details/index.mjs'
 export * from './hover/index.mjs'
+export * from './hover-overlay/index.mjs'
 export * from './icon/index.mjs'
 export * from './image/index.mjs'
 export * from './image-preview/index.mjs'
@@ -158,7 +160,7 @@ export * from './time-picker/index.mjs'
 export * from './tooltip/index.mjs'
 export * from './uploader/index.mjs'
 
-const version = '2.9.0'
+const version = '2.9.1-alpha.1678874318012'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)
@@ -192,6 +194,7 @@ function install(app) {
   Form.install && app.use(Form)
   FormDetails.install && app.use(FormDetails)
   Hover.install && app.use(Hover)
+  HoverOverlay.install && app.use(HoverOverlay)
   Icon.install && app.use(Icon)
   Image.install && app.use(Image)
   ImagePreview.install && app.use(ImagePreview)
@@ -276,6 +279,7 @@ export {
   Form,
   FormDetails,
   Hover,
+  HoverOverlay,
   Icon,
   Image,
   ImagePreview,
@@ -360,6 +364,7 @@ export default {
   Form,
   FormDetails,
   Hover,
+  HoverOverlay,
   Icon,
   Image,
   ImagePreview,

package/es/input/Input.mjs

@@ -264,9 +264,7 @@ var __sfc__ = defineComponent({
         value = formatNumber(value);
       }
 
-      value = withMaxlength(withTrim(value));
-      target.value = value;
-      return value;
+      return withMaxlength(withTrim(value));
     };
 
     var handleCompositionStart = e => {