@varlet/ui 2.9.1-alpha.1678893658852 → 2.9.1

package/es/checkbox/Checkbox.mjs

@@ -1,11 +1,13 @@
 import VarIcon from '../icon/index.mjs';
 import VarFormDetails from '../form-details/index.mjs';
 import Ripple from '../ripple/index.mjs';
+import Hover from '../hover/index.mjs';
 import { defineComponent, ref, computed, watch, nextTick } from 'vue';
 import { props } from './props.mjs';
 import { useValidation, createNamespace, call } from '../utils/components.mjs';
 import { useCheckboxGroup } from './provide.mjs';
 import { useForm } from '../form/provide.mjs';
+import VarHoverOverlay, { useHoverOverlay } from '../hover-overlay/index.mjs';
 var {
   n,
   classes
@@ -15,8 +17,12 @@ import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, norma
 function __render__(_ctx, _cache) {
   var _component_var_icon = _resolveComponent("var-icon");
 
+  var _component_var_hover_overlay = _resolveComponent("var-hover-overlay");
+
   var _component_var_form_details = _resolveComponent("var-form-details");
 
+  var _directive_hover = _resolveDirective("hover");
+
   var _directive_ripple = _resolveDirective("ripple");
 
   return _openBlock(), _createElementBlock("div", {
@@ -49,9 +55,13 @@ function __render__(_ctx, _cache) {
     "var-checkbox-cover": ""
   }, null, 8
   /* PROPS */
-  , ["class", "size"])])], 6
+  , ["class", "size"])]), _createVNode(_component_var_hover_overlay, {
+    hovering: !_ctx.disabled && !_ctx.formDisabled && _ctx.hovering
+  }, null, 8
+  /* PROPS */
+  , ["hovering"])], 6
   /* CLASS, STYLE */
-  )), [[_directive_ripple, {
+  )), [[_directive_hover, _ctx.handleHovering, "desktop"], [_directive_ripple, {
     disabled: _ctx.formReadonly || _ctx.readonly || _ctx.formDisabled || _ctx.disabled || !_ctx.ripple
   }]]), _createElementVNode("div", {
     class: _normalizeClass(_ctx.classes(_ctx.n('text'), [_ctx.errorMessage || _ctx.checkboxGroupErrorMessage, _ctx.n('--error')], [_ctx.formDisabled || _ctx.disabled, _ctx.n('--disabled')]))
@@ -71,11 +81,13 @@ function __render__(_ctx, _cache) {
 var __sfc__ = defineComponent({
   name: 'VarCheckbox',
   directives: {
-    Ripple
+    Ripple,
+    Hover
   },
   components: {
     VarIcon,
-    VarFormDetails
+    VarFormDetails,
+    VarHoverOverlay
   },
   props,
 
@@ -88,6 +100,10 @@ var __sfc__ = defineComponent({
       checkboxGroup,
       bindCheckboxGroup
     } = useCheckboxGroup();
+    var {
+      hovering,
+      handleHovering
+    } = useHoverOverlay();
     var {
       form,
       bindForm
@@ -211,6 +227,8 @@ var __sfc__ = defineComponent({
       checkboxGroupErrorMessage: checkboxGroup == null ? void 0 : checkboxGroup.errorMessage,
       formDisabled: form == null ? void 0 : form.disabled,
       formReadonly: form == null ? void 0 : form.readonly,
+      hovering,
+      handleHovering,
       n,
       classes,
       handleClick,

package/es/checkbox/checkbox.css

@@ -1 +1 @@
-:root { --checkbox-checked-color: var(--color-primary); --checkbox-unchecked-color: #555; --checkbox-disabled-color: var(--color-text-disabled); --checkbox-error-color: var(--color-danger); --checkbox-action-padding: 6px; --checkbox-icon-size: 24px;}@keyframes var-vibrate-animation { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.8; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1); }}.var-checkbox { display: flex; align-items: center; transform: translateX(calc(-1 * var(--checkbox-action-padding))); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-checkbox__wrap { display: inline-flex; flex-direction: column;}.var-checkbox__action { display: flex; justify-content: center; align-items: center; padding: var(--checkbox-action-padding); border-radius: 50%; transition: background-color 0.25s, color 0.25s;}.var-checkbox__icon[var-checkbox-cover] { display: block; font-size: var(--checkbox-icon-size);}.var-checkbox--with-animation { animation: var-vibrate-animation 0.25s;}.var-checkbox--checked { color: var(--checkbox-checked-color);}.var-checkbox--unchecked { color: var(--checkbox-unchecked-color);}.var-checkbox--disabled { color: var(--checkbox-disabled-color); cursor: not-allowed;}.var-checkbox--error { color: var(--checkbox-error-color);}
+:root { --checkbox-checked-color: var(--color-primary); --checkbox-unchecked-color: #555; --checkbox-disabled-color: var(--color-text-disabled); --checkbox-error-color: var(--color-danger); --checkbox-action-padding: 6px; --checkbox-text-padding: 6px 6px 6px 0; --checkbox-icon-size: 24px;}@keyframes var-vibrate-animation { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.8; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1); }}.var-checkbox { display: flex; align-items: center; transform: translateX(calc(-1 * var(--checkbox-action-padding))); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-checkbox__wrap { display: inline-flex; flex-direction: column;}.var-checkbox__action { position: relative; display: flex; justify-content: center; align-items: center; padding: var(--checkbox-action-padding); border-radius: 50%; transition: background-color 0.25s, color 0.25s;}.var-checkbox__icon[var-checkbox-cover] { display: block; font-size: var(--checkbox-icon-size);}.var-checkbox--with-animation { animation: var-vibrate-animation 0.25s;}.var-checkbox--checked { color: var(--checkbox-checked-color);}.var-checkbox--unchecked { color: var(--checkbox-unchecked-color);}.var-checkbox--disabled { color: var(--checkbox-disabled-color); cursor: not-allowed;}.var-checkbox--error { color: var(--checkbox-error-color);}

package/es/index.bundle.mjs

@@ -241,7 +241,7 @@ import './time-picker/style/index.mjs'
 import './tooltip/style/index.mjs'
 import './uploader/style/index.mjs'
 
-const version = '2.9.1-alpha.1678893658852'
+const version = '2.9.1'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/index.mjs

@@ -160,7 +160,7 @@ export * from './time-picker/index.mjs'
 export * from './tooltip/index.mjs'
 export * from './uploader/index.mjs'
 
-const version = '2.9.1-alpha.1678893658852'
+const version = '2.9.1'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/radio/Radio.mjs

@@ -1,11 +1,13 @@
 import VarIcon from '../icon/index.mjs';
 import VarFormDetails from '../form-details/index.mjs';
 import Ripple from '../ripple/index.mjs';
+import Hover from '../hover/index.mjs';
 import { computed, defineComponent, nextTick, ref, watch } from 'vue';
 import { props } from './props.mjs';
 import { useValidation, createNamespace, call } from '../utils/components.mjs';
 import { useRadioGroup } from './provide.mjs';
 import { useForm } from '../form/provide.mjs';
+import VarHoverOverlay, { useHoverOverlay } from '../hover-overlay/index.mjs';
 var {
   n,
   classes
@@ -15,10 +17,14 @@ import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, norma
 function __render__(_ctx, _cache) {
   var _component_var_icon = _resolveComponent("var-icon");
 
+  var _component_var_hover_overlay = _resolveComponent("var-hover-overlay");
+
   var _component_var_form_details = _resolveComponent("var-form-details");
 
   var _directive_ripple = _resolveDirective("ripple");
 
+  var _directive_hover = _resolveDirective("hover");
+
   return _openBlock(), _createElementBlock("div", {
     class: _normalizeClass(_ctx.n('wrap'))
   }, [_createElementVNode("div", _mergeProps({
@@ -49,11 +55,15 @@ function __render__(_ctx, _cache) {
     size: _ctx.iconSize
   }, null, 8
   /* PROPS */
-  , ["class", "size"])])], 6
+  , ["class", "size"])]), _createVNode(_component_var_hover_overlay, {
+    hovering: !_ctx.disabled && !_ctx.formDisabled && _ctx.hovering
+  }, null, 8
+  /* PROPS */
+  , ["hovering"])], 6
   /* CLASS, STYLE */
   )), [[_directive_ripple, {
     disabled: _ctx.formReadonly || _ctx.readonly || _ctx.formDisabled || _ctx.disabled || !_ctx.ripple
-  }]]), _createElementVNode("div", {
+  }], [_directive_hover, _ctx.handleHovering, "desktop"]]), _createElementVNode("div", {
     class: _normalizeClass(_ctx.classes(_ctx.n('text'), [_ctx.errorMessage || _ctx.radioGroupErrorMessage, _ctx.n('--error')], [_ctx.formDisabled || _ctx.disabled, _ctx.n('--disabled')]))
   }, [_renderSlot(_ctx.$slots, "default")], 2
   /* CLASS */
@@ -71,11 +81,13 @@ function __render__(_ctx, _cache) {
 var __sfc__ = defineComponent({
   name: 'VarRadio',
   directives: {
-    Ripple
+    Ripple,
+    Hover
   },
   components: {
     VarIcon,
-    VarFormDetails
+    VarFormDetails,
+    VarHoverOverlay
   },
   inheritAttrs: false,
   props,
@@ -88,6 +100,10 @@ var __sfc__ = defineComponent({
       radioGroup,
       bindRadioGroup
     } = useRadioGroup();
+    var {
+      hovering,
+      handleHovering
+    } = useHoverOverlay();
     var {
       form,
       bindForm
@@ -203,6 +219,8 @@ var __sfc__ = defineComponent({
       radioGroupErrorMessage: radioGroup == null ? void 0 : radioGroup.errorMessage,
       formDisabled: form == null ? void 0 : form.disabled,
       formReadonly: form == null ? void 0 : form.readonly,
+      hovering,
+      handleHovering,
       n,
       classes,
       handleClick,

package/es/radio/radio.css

@@ -1 +1 @@
-:root { --radio-checked-color: var(--color-primary); --radio-unchecked-color: #555; --radio-disabled-color: var(--color-text-disabled); --radio-error-color: var(--color-danger); --radio-icon-size: 24px; --radio-action-padding: 6px;}@keyframes var-vibrate-animation { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.8; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1); }}.var-radio { display: flex; align-items: center; transform: translateX(calc(-1 * var(--radio-action-padding))); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-radio__wrap { display: inline-flex; flex-direction: column;}.var-radio__action { display: flex; justify-content: center; align-items: center; padding: var(--radio-action-padding); border-radius: 50%; transition: background-color 0.25s, color 0.25s;}.var-radio__icon[var-radio-cover] { display: block; font-size: var(--radio-icon-size);}.var-radio--with-animation[var-radio-cover] { animation: var-vibrate-animation 0.25s;}.var-radio--checked { color: var(--radio-checked-color);}.var-radio--unchecked { color: var(--radio-unchecked-color);}.var-radio--disabled { color: var(--radio-disabled-color); cursor: not-allowed;}.var-radio--error { color: var(--radio-error-color);}
+:root { --radio-checked-color: var(--color-primary); --radio-unchecked-color: #555; --radio-disabled-color: var(--color-text-disabled); --radio-error-color: var(--color-danger); --radio-icon-size: 24px; --radio-action-padding: 6px; --radio-text-padding: 6px 6px 6px 0;}@keyframes var-vibrate-animation { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.8; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1); }}.var-radio { display: flex; align-items: center; transform: translateX(calc(-1 * var(--radio-action-padding))); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-radio__wrap { display: inline-flex; flex-direction: column;}.var-radio__action { display: flex; justify-content: center; position: relative; align-items: center; padding: var(--radio-action-padding); border-radius: 50%; transition: background-color 0.25s, color 0.25s;}.var-radio__icon[var-radio-cover] { display: block; font-size: var(--radio-icon-size);}.var-radio--with-animation[var-radio-cover] { animation: var-vibrate-animation 0.25s;}.var-radio--checked { color: var(--radio-checked-color);}.var-radio--unchecked { color: var(--radio-unchecked-color);}.var-radio--disabled { color: var(--radio-disabled-color); cursor: not-allowed;}.var-radio--error { color: var(--radio-error-color);}

package/es/rate/Rate.mjs

@@ -1,7 +1,9 @@
 import VarIcon from '../icon/index.mjs';
 import VarFormDetails from '../form-details/index.mjs';
 import Ripple from '../ripple/index.mjs';
-import { defineComponent, nextTick } from 'vue';
+import VarHoverOverlay, { useHoverOverlay } from '../hover-overlay/index.mjs';
+import Hover from '../hover/index.mjs';
+import { defineComponent, nextTick, ref } from 'vue';
 import { useForm } from '../form/provide.mjs';
 import { useValidation, call, createNamespace } from '../utils/components.mjs';
 import { toSizeUnit } from '../utils/elements.mjs';
@@ -19,36 +21,44 @@ var _hoisted_1 = ["onClick"];
 function __render__(_ctx, _cache) {
   var _component_var_icon = _resolveComponent("var-icon");
 
+  var _component_var_hover_overlay = _resolveComponent("var-hover-overlay");
+
   var _component_var_form_details = _resolveComponent("var-form-details");
 
   var _directive_ripple = _resolveDirective("ripple");
 
+  var _directive_hover = _resolveDirective("hover");
+
   return _openBlock(), _createElementBlock("div", {
     class: _normalizeClass(_ctx.n('wrap'))
   }, [_createElementVNode("div", {
     class: _normalizeClass(_ctx.n())
-  }, [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.toNumber(_ctx.count), val => {
+  }, [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.toNumber(_ctx.count), value => {
     return _withDirectives((_openBlock(), _createElementBlock("div", {
-      key: val,
-      style: _normalizeStyle(_ctx.getStyle(val)),
-      class: _normalizeClass(_ctx.getClass(val)),
-      onClick: $event => _ctx.handleClick(val, $event)
+      key: value,
+      style: _normalizeStyle(_ctx.getStyle(value)),
+      class: _normalizeClass(_ctx.getClass(value)),
+      onClick: $event => _ctx.handleClick(value, $event)
     }, [_createVNode(_component_var_icon, {
       class: _normalizeClass(_ctx.n('content-icon')),
       "var-rate-cover": "",
       transition: 0,
       namespace: _ctx.namespace,
-      name: _ctx.getCurrentState(val).name,
+      name: _ctx.getCurrentState(value).name,
       style: _normalizeStyle({
         fontSize: _ctx.toSizeUnit(_ctx.size)
       })
     }, null, 8
     /* PROPS */
-    , ["class", "namespace", "name", "style"])], 14
+    , ["class", "namespace", "name", "style"]), _createVNode(_component_var_hover_overlay, {
+      hovering: _ctx.hovering && value === _ctx.currentHoveringValue && !_ctx.disabled && !_ctx.formDisabled
+    }, null, 8
+    /* PROPS */
+    , ["hovering"])], 14
     /* CLASS, STYLE, PROPS */
     , _hoisted_1)), [[_directive_ripple, {
       disabled: _ctx.formReadonly || _ctx.readonly || _ctx.formDisabled || _ctx.disabled || !_ctx.ripple
-    }]]);
+    }], [_directive_hover, _ctx.createHoverHandler(value), "desktop"]]);
   }), 128
   /* KEYED_FRAGMENT */
   ))], 2
@@ -66,10 +76,12 @@ var __sfc__ = defineComponent({
   name: 'VarRate',
   components: {
     VarIcon,
-    VarFormDetails
+    VarFormDetails,
+    VarHoverOverlay
   },
   directives: {
-    Ripple
+    Ripple,
+    Hover
   },
   props,
 
@@ -84,6 +96,10 @@ var __sfc__ = defineComponent({
       validate: v,
       resetValidation
     } = useValidation();
+    var {
+      hovering
+    } = useHoverOverlay();
+    var currentHoveringValue = ref(-1);
 
     var getStyle = val => {
       var {
@@ -175,6 +191,13 @@ var __sfc__ = defineComponent({
       validateWithTrigger();
     };
 
+    var createHoverHandler = value => {
+      return isHover => {
+        currentHoveringValue.value = value;
+        hovering.value = isHover;
+      };
+    };
+
     var reset = () => {
       call(props['onUpdate:modelValue'], 0);
       resetValidation();
@@ -194,6 +217,9 @@ var __sfc__ = defineComponent({
       getClass,
       getCurrentState,
       handleClick,
+      hovering,
+      currentHoveringValue,
+      createHoverHandler,
       reset,
       validate,
       resetValidation,

package/es/rate/rate.css

@@ -1 +1 @@
-:root { --rate-color: var(--color-text); --rate-disabled-color: var(--color-text-disabled); --rate-error-color: var(--color-danger); --rate-action-padding: 4px; --rate-primary-color: var(--color-primary);}.var-rate { display: flex; transform: translateX(calc(-1 * var(--rate-action-padding)));}.var-rate__wrap { width: 100%;}.var-rate__content { padding: var(--rate-action-padding); cursor: pointer; border-radius: 50%; color: var(--rate-color); transition: color 0.25s; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-rate__content-icon[var-rate-cover] { font-size: 24px;}.var-rate--primary { color: var(--rate-primary-color);}.var-rate--disabled { color: var(--rate-disabled-color); cursor: not-allowed;}.var-rate--error { color: var(--rate-error-color);}
+:root { --rate-color: var(--color-text); --rate-disabled-color: var(--color-text-disabled); --rate-error-color: var(--color-danger); --rate-action-padding: 4px; --rate-primary-color: var(--color-primary);}.var-rate { display: flex; transform: translateX(calc(-1 * var(--rate-action-padding)));}.var-rate__wrap { width: 100%;}.var-rate__content { position: relative; padding: var(--rate-action-padding); cursor: pointer; border-radius: 50%; color: var(--rate-color); transition: color 0.25s; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-rate__content-icon[var-rate-cover] { font-size: 24px;}.var-rate--primary { color: var(--rate-primary-color);}.var-rate--disabled { color: var(--rate-disabled-color); cursor: not-allowed;}.var-rate--error { color: var(--rate-error-color);}

package/es/rate/style/index.mjs

@@ -2,5 +2,6 @@ import '../../styles/common.css'
 import '../../ripple/ripple.css'
 import '../../icon/icon.css'
 import '../../form-details/formDetails.css'
+import '../../hover-overlay/hoverOverlay.css'
 import '../rate.css'
 import '../RateSfc.css'