feat(slider): add hover overlay

varletjs · Mar 14, 2023 · 9adfdca · 9adfdca
1 parent 7a3f769
commit 9adfdca
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 14 deletions.
diff --git a/packages/varlet-ui/src/form/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/form/__tests__/__snapshots__/index.spec.js.snap
@@ -489,7 +489,9 @@ exports[`test form with slider 1`] = `
       </div>
       <div class=\\"var-slider__thumb\\" style=\\"left: 5%;\\">
         <div class=\\"var-slider__thumb-block\\"></div>
-        <div class=\\"var-slider__thumb-ripple\\"></div>
+        <div class=\\"var-slider__thumb-ripple\\">
+          <div class=\\"var-hover-overlay\\"></div>
+        </div>
         <div class=\\"var-slider__thumb-label\\"><span>5</span></div>
       </div>
     </div>
@@ -510,7 +512,9 @@ exports[`test form with slider 2`] = `
       </div>
       <div class=\\"var-slider__thumb\\" style=\\"left: 5%;\\">
         <div class=\\"var-slider__thumb-block\\"></div>
-        <div class=\\"var-slider__thumb-ripple\\"></div>
+        <div class=\\"var-slider__thumb-ripple\\">
+          <div class=\\"var-hover-overlay\\"></div>
+        </div>
         <div class=\\"var-slider__thumb-label\\"><span>5</span></div>
       </div>
     </div>
@@ -542,7 +546,9 @@ exports[`test form with slider 3`] = `
       </div>
       <div class=\\"var-slider__thumb\\" style=\\"left: 0%;\\">
         <div class=\\"var-slider__thumb-block\\"></div>
-        <div class=\\"var-slider__thumb-ripple\\"></div>
+        <div class=\\"var-slider__thumb-ripple\\">
+          <div class=\\"var-hover-overlay\\"></div>
+        </div>
         <div class=\\"var-slider__thumb-label\\"><span>0</span></div>
       </div>
     </div>

diff --git a/packages/varlet-ui/src/slider/Slider.vue b/packages/varlet-ui/src/slider/Slider.vue
@@ -34,13 +34,16 @@
             :style="{
               background: thumbColor,
             }"
+            v-hover:desktop="(value) => hover(value, item)"
           ></div>
           <div
             :class="classes(n('thumb-ripple'), [thumbsProps[item.enumValue].active, n('thumb-ripple--active')])"
             :style="{
-              background: thumbColor,
+              background: thumbsProps[item.enumValue].active ? thumbColor : undefined,
             }"
-          ></div>
+          >
+            <var-hover-overlay :hovering="item.hovering" />
+          </div>
           <div
             :class="classes(n('thumb-label'), [showLabel(item.enumValue), n('thumb-label--active')])"
             :style="{
@@ -68,12 +71,15 @@ import {
   reactive,
   nextTick,
   watch,
+  unref,
   type Ref,
   type ComputedRef,
   type UnwrapRef,
 } from 'vue'
 import { useValidation, createNamespace, call } from '../utils/components'
 import { useForm } from '../form/provide'
+import VarHoverOverlay, { useHoverOverlay } from '../hover-overlay'
+import Hover from '../hover'
 import { getLeft, multiplySizeUnit } from '../utils/elements'
 import { isArray, isNumber, toNumber } from '@varlet/shared'
 import { props, Thumbs, type ThumbProps, type ThumbsProps, type ThumbsListProps } from './props'
@@ -86,11 +92,15 @@ export default defineComponent({
   name: 'VarSlider',
   components: {
     VarFormDetails,
+    VarHoverOverlay,
   },
+  directives: { Hover },
   props,
   setup(props) {
     const { bindForm, form } = useForm()
     const { errorMessage, validateWithTrigger: vt, validate: v, resetValidation } = useValidation()
+    const { hovering: hoveringFirst, handleHovering: handleHoveringFirst } = useHoverOverlay()
+    const { hovering: hoveringSecond, handleHovering: handleHoveringSecond } = useHoverOverlay()
 
     const validate = () => v(props.rules, props.modelValue)
 
@@ -120,15 +130,29 @@ export default defineComponent({
 
       if (range && isArray(modelValue)) {
         list = [
-          { value: getValue(modelValue[0]), enumValue: Thumbs.First, text: toPrecision(modelValue[0]) },
-          { value: getValue(modelValue[1]), enumValue: Thumbs.Second, text: toPrecision(modelValue[1]) },
+          {
+            value: getValue(modelValue[0]),
+            enumValue: Thumbs.First,
+            text: toPrecision(modelValue[0]),
+            hovering: unref(hoveringFirst),
+            handleHovering: handleHoveringFirst,
+          },
+          {
+            value: getValue(modelValue[1]),
+            enumValue: Thumbs.Second,
+            text: toPrecision(modelValue[1]),
+            hovering: unref(hoveringSecond),
+            handleHovering: handleHoveringSecond,
+          },
         ]
       } else if (isNumber(modelValue)) {
         list = [
           {
             value: getValue(modelValue),
             enumValue: Thumbs.First,
             text: toPrecision(modelValue),
+            hovering: unref(hoveringFirst),
+            handleHovering: handleHoveringFirst,
           },
         ]
       }
@@ -184,6 +208,12 @@ export default defineComponent({
       return isInteger ? num : toNumber(num.toPrecision(5))
     }
 
+    const hover = (value: boolean, item: ThumbsListProps) => {
+      if (isDisabled.value) return
+
+      item.handleHovering(value)
+    }
+
     const setPercent = (moveDistance: number, type: keyof ThumbsProps) => {
       let rangeValue: Array<number> = []
       const { step, range, modelValue, onChange, min } = props
@@ -217,6 +247,9 @@ export default defineComponent({
 
     const start = (event: TouchEvent, type: keyof ThumbsProps) => {
       if (!maxWidth.value) maxWidth.value = (sliderEl.value as HTMLDivElement).offsetWidth
+      if (!isDisabled.value) {
+        thumbsProps[type].active = true
+      }
       if (isDisabled.value || isReadonly.value) return
       call(props.onStart)
       isScroll.value = true
@@ -226,7 +259,6 @@ export default defineComponent({
     const move = (event: TouchEvent, type: keyof ThumbsProps) => {
       if (isDisabled.value || isReadonly.value || !isScroll.value) return
       let 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
@@ -236,11 +268,13 @@ export default defineComponent({
 
     const end = (type: keyof ThumbsProps) => {
       const { range, modelValue, onEnd, step, min } = props
+      if (!isDisabled.value) {
+        thumbsProps[type].active = false
+      }
       if (isDisabled.value || isReadonly.value) return
       let rangeValue: Array<number> = []
 
       thumbsProps[type].currentLeft = thumbsProps[type].percentValue * unitWidth.value
-      thumbsProps[type].active = false
 
       const curValue = thumbsProps[type].percentValue * toNumber(step) + toNumber(min)
 
@@ -349,6 +383,7 @@ export default defineComponent({
       errorMessage,
       thumbsProps,
       thumbList,
+      hover,
       multiplySizeUnit,
       toNumber,
       showLabel,

diff --git a/packages/varlet-ui/src/slider/props.ts b/packages/varlet-ui/src/slider/props.ts
@@ -26,6 +26,8 @@ export interface ThumbsListProps {
   value: number | number[]
   enumValue: Thumbs
   text: number
+  hovering: boolean
+  handleHovering: (value: boolean) => void
 }
 
 export const props = {

diff --git a/packages/varlet-ui/src/slider/slider.less b/packages/varlet-ui/src/slider/slider.less
@@ -66,20 +66,19 @@
 
     &-ripple {
       position: absolute;
-      width: 0;
+      width: 36px;
+      height: 36px;
       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);
+      background: transparent;
       transition: 0.3s var(--cubic-bezier);
 
       &--active {
-        width: 36px;
-        height: 36px;
+        background: var(--slider-thumb-ripple-background);
       }
     }