@varlet/ui 2.9.0 → 2.9.1-alpha.1678874318012

package/es/slider/Slider.mjs

@@ -1,7 +1,9 @@
 import VarFormDetails from '../form-details/index.mjs';
-import { defineComponent, ref, computed, reactive, nextTick, watch } from 'vue';
+import { defineComponent, ref, computed, reactive, nextTick, watch, unref } from 'vue';
 import { useValidation, createNamespace, call } from '../utils/components.mjs';
 import { useForm } from '../form/provide.mjs';
+import VarHoverOverlay, { useHoverOverlay } from '../hover-overlay/index.mjs';
+import Hover from '../hover/index.mjs';
 import { getLeft, multiplySizeUnit } from '../utils/elements.mjs';
 import { isArray, isNumber, toNumber } from '@varlet/shared';
 import { props, Thumbs } from './props.mjs';
@@ -10,15 +12,19 @@ var {
   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, toDisplayString as _toDisplayString, withModifiers as _withModifiers, resolveComponent as _resolveComponent, createVNode as _createVNode, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+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";
 
 var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 
 var _hoisted_1 = ["onTouchstart", "onTouchmove", "onTouchend", "onTouchcancel"];
 
 function __render__(_ctx, _cache) {
+  var _component_var_hover_overlay = _resolveComponent("var-hover-overlay");
+
   var _component_var_form_details = _resolveComponent("var-form-details");
 
+  var _directive_hover = _resolveDirective("hover");
+
   return _openBlock(), _createElementBlock("div", {
     class: _normalizeClass(_ctx.n())
   }, [_createElementVNode("div", {
@@ -58,19 +64,23 @@ function __render__(_ctx, _cache) {
       onTouchcancel: $event => _ctx.end(item.enumValue)
     }, [_renderSlot(_ctx.$slots, "button", {
       currentValue: item.text
-    }, () => [_createElementVNode("div", {
+    }, () => [_withDirectives(_createElementVNode("div", {
       class: _normalizeClass(_ctx.n('thumb-block')),
       style: _normalizeStyle({
         background: _ctx.thumbColor
       })
     }, null, 6
     /* CLASS, STYLE */
-    ), _createElementVNode("div", {
+    ), [[_directive_hover, value => _ctx.hover(value, item), "desktop"]]), _createElementVNode("div", {
       class: _normalizeClass(_ctx.classes(_ctx.n('thumb-ripple'), [_ctx.thumbsProps[item.enumValue].active, _ctx.n('thumb-ripple--active')])),
       style: _normalizeStyle({
-        background: _ctx.thumbColor
+        background: _ctx.thumbsProps[item.enumValue].active ? _ctx.thumbColor : undefined
       })
-    }, null, 6
+    }, [_createVNode(_component_var_hover_overlay, {
+      hovering: item.hovering
+    }, null, 8
+    /* PROPS */
+    , ["hovering"])], 6
     /* CLASS, STYLE */
     ), _createElementVNode("div", {
       class: _normalizeClass(_ctx.classes(_ctx.n('thumb-label'), [_ctx.showLabel(item.enumValue), _ctx.n('thumb-label--active')])),
@@ -105,7 +115,11 @@ function __render__(_ctx, _cache) {
 var __sfc__ = defineComponent({
   name: 'VarSlider',
   components: {
-    VarFormDetails
+    VarFormDetails,
+    VarHoverOverlay
+  },
+  directives: {
+    Hover
   },
   props,
 
@@ -120,6 +134,14 @@ var __sfc__ = defineComponent({
       validate: v,
       resetValidation
     } = useValidation();
+    var {
+      hovering: hoveringFirst,
+      handleHovering: handleHoveringFirst
+    } = useHoverOverlay();
+    var {
+      hovering: hoveringSecond,
+      handleHovering: handleHoveringSecond
+    } = useHoverOverlay();
 
     var validate = () => v(props.rules, props.modelValue);
 
@@ -152,17 +174,23 @@ var __sfc__ = defineComponent({
         list = [{
           value: getValue(modelValue[0]),
           enumValue: Thumbs.First,
-          text: toPrecision(modelValue[0])
+          text: toPrecision(modelValue[0]),
+          hovering: unref(hoveringFirst),
+          handleHovering: handleHoveringFirst
         }, {
           value: getValue(modelValue[1]),
           enumValue: Thumbs.Second,
-          text: toPrecision(modelValue[1])
+          text: toPrecision(modelValue[1]),
+          hovering: unref(hoveringSecond),
+          handleHovering: handleHoveringSecond
         }];
       } else if (isNumber(modelValue)) {
         list = [{
           value: getValue(modelValue),
           enumValue: Thumbs.First,
-          text: toPrecision(modelValue)
+          text: toPrecision(modelValue),
+          hovering: unref(hoveringFirst),
+          handleHovering: handleHoveringFirst
         }];
       }
 
@@ -210,6 +238,11 @@ var __sfc__ = defineComponent({
       return isInteger ? num : toNumber(num.toPrecision(5));
     };
 
+    var hover = (value, item) => {
+      if (isDisabled.value) return;
+      item.handleHovering(value);
+    };
+
     var setPercent = (moveDistance, type) => {
       var rangeValue = [];
       var {
@@ -248,6 +281,11 @@ var __sfc__ = defineComponent({
 
     var start = (event, type) => {
       if (!maxWidth.value) maxWidth.value = sliderEl.value.offsetWidth;
+
+      if (!isDisabled.value) {
+        thumbsProps[type].active = true;
+      }
+
       if (isDisabled.value || isReadonly.value) return;
       call(props.onStart);
       isScroll.value = true;
@@ -257,7 +295,6 @@ var __sfc__ = defineComponent({
     var move = (event, type) => {
       if (isDisabled.value || isReadonly.value || !isScroll.value) return;
       var moveDistance = event.touches[0].clientX - thumbsProps[type].startPosition + thumbsProps[type].currentLeft;
-      thumbsProps[type].active = true;
       if (moveDistance <= 0) moveDistance = 0;else if (moveDistance >= maxWidth.value) moveDistance = maxWidth.value;
       setPercent(moveDistance, type);
     };
@@ -270,10 +307,14 @@ var __sfc__ = defineComponent({
         step,
         min
       } = props;
+
+      if (!isDisabled.value) {
+        thumbsProps[type].active = false;
+      }
+
       if (isDisabled.value || isReadonly.value) return;
       var rangeValue = [];
       thumbsProps[type].currentLeft = thumbsProps[type].percentValue * unitWidth.value;
-      thumbsProps[type].active = false;
       var curValue = thumbsProps[type].percentValue * toNumber(step) + toNumber(min);
 
       if (range && isArray(modelValue)) {
@@ -394,6 +435,7 @@ var __sfc__ = defineComponent({
       errorMessage,
       thumbsProps,
       thumbList,
+      hover,
       multiplySizeUnit,
       toNumber,
       showLabel,

package/es/slider/slider.css

@@ -1 +1 @@
-:root { --slider-error-color: var(--color-danger); --slider-track-background: #bdbdbd; --slider-track-fill-background: var(--color-primary); --slider-thumb-block-background: var(--color-primary); --slider-thumb-ripple-background: var(--color-primary); --slider-thumb-label-background: var(--color-primary); --slider-thumb-label-font-size: var(--font-size-sm); --slider-disabled-opacity: var(--opacity-disabled);}.var-slider { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 100%;}.var-slider__block { display: flex; align-items: center; position: relative; flex: 1; user-select: none; height: 36px; margin: 0 6px; transition: filter 0.25s;}.var-slider--disabled { filter: opacity(var(--slider-disabled-opacity)); cursor: not-allowed;}.var-slider__track { width: 100%; align-items: center; position: relative;}.var-slider__track-background { width: 100%; height: 2px; background: var(--slider-track-background); transition: filter, background-color, 0.25s;}.var-slider__track-fill { position: absolute; height: 100%; left: 0; top: 0; transition: background-color 0.25s; background-color: var(--slider-track-fill-background);}.var-slider__thumb { position: absolute;}.var-slider__thumb-block { position: absolute; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%, -50%); transition: background-color 0.25s; background-color: var(--slider-thumb-block-background);}.var-slider__thumb-ripple { position: absolute; width: 0; z-index: -1; height: 0; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; opacity: 0.3; background: var(--slider-thumb-ripple-background); transition: 0.3s var(--cubic-bezier);}.var-slider__thumb-ripple--active { width: 36px; height: 36px;}.var-slider__thumb-label { height: 24px; width: 24px; background-color: var(--slider-thumb-label-background); display: flex; align-items: center; border: none; justify-content: center; color: #fff; border-radius: 50% 50% 0; bottom: 60%; user-select: none; position: absolute; left: 45%; transition: 0.3s var(--cubic-bezier); font-size: var(--slider-thumb-label-font-size); overflow: hidden; transform: translateY(0) translateY(0) translateX(-50%) rotate(45deg) scale(0);}.var-slider__thumb-label span { transform: rotate(-45deg);}.var-slider__thumb-label--active { transform: translateY(-20%) translateY(-8px) translateX(-50%) rotate(45deg) scale(1);}.var-slider--error .var-slider__track-background { background-color: var(--slider-error-color) !important; filter: opacity(0.6);}.var-slider--error .var-slider__track-fill { background-color: var(--slider-error-color) !important;}.var-slider--error .var-slider__thumb-block { background-color: var(--slider-error-color) !important;}.var-slider--error .var-slider__thumb-ripple { background-color: var(--slider-error-color) !important;}.var-slider--error .var-slider__thumb-label { background-color: var(--slider-error-color) !important;}.var-slider__form[var-slider-cover] { margin: 0;}
+:root { --slider-error-color: var(--color-danger); --slider-track-background: #bdbdbd; --slider-track-fill-background: var(--color-primary); --slider-thumb-block-background: var(--color-primary); --slider-thumb-ripple-background: var(--color-primary); --slider-thumb-label-background: var(--color-primary); --slider-thumb-label-font-size: var(--font-size-sm); --slider-disabled-opacity: var(--opacity-disabled);}.var-slider { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 100%;}.var-slider__block { display: flex; align-items: center; position: relative; flex: 1; user-select: none; height: 36px; margin: 0 6px; transition: filter 0.25s;}.var-slider--disabled { filter: opacity(var(--slider-disabled-opacity)); cursor: not-allowed;}.var-slider__track { width: 100%; align-items: center; position: relative;}.var-slider__track-background { width: 100%; height: 2px; background: var(--slider-track-background); transition: filter, background-color, 0.25s;}.var-slider__track-fill { position: absolute; height: 100%; left: 0; top: 0; transition: background-color 0.25s; background-color: var(--slider-track-fill-background);}.var-slider__thumb { position: absolute; cursor: pointer;}.var-slider__thumb-block { position: absolute; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%, -50%); transition: background-color 0.25s; z-index: 1; background-color: var(--slider-thumb-block-background);}.var-slider__thumb-ripple { position: absolute; width: 36px; height: 36px; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; opacity: 0.3; background: transparent; transition: 0.3s var(--cubic-bezier);}.var-slider__thumb-ripple--active { background: var(--slider-thumb-ripple-background);}.var-slider__thumb-label { height: 24px; width: 24px; background-color: var(--slider-thumb-label-background); display: flex; align-items: center; border: none; justify-content: center; color: #fff; border-radius: 50% 50% 0; bottom: 60%; user-select: none; position: absolute; left: 45%; transition: 0.3s var(--cubic-bezier); font-size: var(--slider-thumb-label-font-size); overflow: hidden; transform: translateY(0) translateY(0) translateX(-50%) rotate(45deg) scale(0);}.var-slider__thumb-label span { transform: rotate(-45deg);}.var-slider__thumb-label--active { transform: translateY(-20%) translateY(-8px) translateX(-50%) rotate(45deg) scale(1);}.var-slider--error .var-slider__track-background { background-color: var(--slider-error-color) !important; filter: opacity(0.6);}.var-slider--error .var-slider__track-fill { background-color: var(--slider-error-color) !important;}.var-slider--error .var-slider__thumb-block { background-color: var(--slider-error-color) !important;}.var-slider--error .var-slider__thumb-ripple--active { background-color: var(--slider-error-color) !important;}.var-slider--error .var-slider__thumb-label { background-color: var(--slider-error-color) !important;}.var-slider__form[var-slider-cover] { margin: 0;}

package/es/slider/style/index.mjs

@@ -1,4 +1,5 @@
 import '../../styles/common.css'
 import '../../form-details/formDetails.css'
+import '../../hover-overlay/hoverOverlay.css'
 import '../slider.css'
 import '../SliderSfc.css'

package/es/snackbar/style/index.mjs

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