feat(ui/radio): support hover effect (#908)

varletjs · Mar 16, 2023 · d0621ad · d0621ad
1 parent d853427
commit d0621ad
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 23 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
@@ -265,7 +265,9 @@ exports[`test form with radio 1`] = `
 "<div class=\\"var-form\\">
   <div class=\\"var-radio__wrap\\">
     <div class=\\"var-radio\\">
-      <div class=\\"var-radio__action var-radio--unchecked var-radio--disabled\\"><i class=\\"var-icon var-icon--set var-icon-radio-blank var-radio__icon\\" style=\\"transition-duration: 0ms;\\" var-radio-cover=\\"\\"></i></div>
+      <div class=\\"var-radio__action var-radio--unchecked var-radio--disabled\\"><i class=\\"var-icon var-icon--set var-icon-radio-blank var-radio__icon\\" style=\\"transition-duration: 0ms;\\" var-radio-cover=\\"\\"></i>
+        <div class=\\"var-hover-overlay\\"></div>
+      </div>
       <div class=\\"var-radio__text var-radio--disabled\\"></div>
     </div>
     <transition-stub>
@@ -279,7 +281,9 @@ exports[`test form with radio 2`] = `
 "<div class=\\"var-form\\">
   <div class=\\"var-radio__wrap\\">
     <div class=\\"var-radio\\">
-      <div class=\\"var-radio__action var-radio--unchecked\\"><i class=\\"var-icon var-icon--set var-icon-radio-blank var-radio__icon\\" style=\\"transition-duration: 0ms;\\" var-radio-cover=\\"\\"></i></div>
+      <div class=\\"var-radio__action var-radio--unchecked\\"><i class=\\"var-icon var-icon--set var-icon-radio-blank var-radio__icon\\" style=\\"transition-duration: 0ms;\\" var-radio-cover=\\"\\"></i>
+        <div class=\\"var-hover-overlay\\"></div>
+      </div>
       <div class=\\"var-radio__text\\"></div>
     </div>
     <transition-stub>
@@ -293,7 +297,9 @@ exports[`test form with radio 3`] = `
 "<div class=\\"var-form\\">
   <div class=\\"var-radio__wrap\\">
     <div class=\\"var-radio\\">
-      <div class=\\"var-radio__action var-radio--unchecked var-radio--error\\"><i class=\\"var-icon var-icon--set var-icon-radio-blank var-radio__icon\\" style=\\"transition-duration: 0ms;\\" var-radio-cover=\\"\\"></i></div>
+      <div class=\\"var-radio__action var-radio--unchecked var-radio--error\\"><i class=\\"var-icon var-icon--set var-icon-radio-blank var-radio__icon\\" style=\\"transition-duration: 0ms;\\" var-radio-cover=\\"\\"></i>
+        <div class=\\"var-hover-overlay\\"></div>
+      </div>
       <div class=\\"var-radio__text var-radio--error\\"></div>
     </div>
     <transition-stub>
@@ -318,7 +324,9 @@ exports[`test form with radio 4`] = `
 "<div class=\\"var-form\\">
   <div class=\\"var-radio__wrap\\">
     <div class=\\"var-radio\\">
-      <div class=\\"var-radio__action var-radio--unchecked\\"><i class=\\"var-icon var-icon--set var-icon-radio-blank var-radio__icon\\" style=\\"transition-duration: 0ms;\\" var-radio-cover=\\"\\"></i></div>
+      <div class=\\"var-radio__action var-radio--unchecked\\"><i class=\\"var-icon var-icon--set var-icon-radio-blank var-radio__icon\\" style=\\"transition-duration: 0ms;\\" var-radio-cover=\\"\\"></i>
+        <div class=\\"var-hover-overlay\\"></div>
+      </div>
       <div class=\\"var-radio__text\\"></div>
     </div>
     <transition-stub>

diff --git a/packages/varlet-ui/src/radio-group/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/radio-group/__tests__/__snapshots__/index.spec.js.snap
@@ -4,7 +4,9 @@ exports[`test radio example 1`] = `
 "<div class=\\"app-type\\">基本使用</div>
 <div class=\\"var-radio__wrap\\">
   <div class=\\"var-radio\\">
-    <div class=\\"var-radio__action var-radio--unchecked\\"><i class=\\"var-icon var-icon--set var-icon-radio-blank var-radio__icon\\" style=\\"transition-duration: 0ms;\\" var-radio-cover=\\"\\"></i></div>
+    <div class=\\"var-radio__action var-radio--unchecked\\"><i class=\\"var-icon var-icon--set var-icon-radio-blank var-radio__icon\\" style=\\"transition-duration: 0ms;\\" var-radio-cover=\\"\\"></i>
+      <div class=\\"var-hover-overlay\\"></div>
+    </div>
     <div class=\\"var-radio__text\\">当前的值: false</div>
   </div>
   <transition-stub>
@@ -14,7 +16,9 @@ exports[`test radio example 1`] = `
 <div class=\\"app-type\\">设置状态值</div>
 <div class=\\"var-radio__wrap\\">
   <div class=\\"var-radio\\">
-    <div class=\\"var-radio__action var-radio--unchecked\\"><i class=\\"var-icon var-icon--set var-icon-radio-blank var-radio__icon\\" style=\\"transition-duration: 0ms;\\" var-radio-cover=\\"\\"></i></div>
+    <div class=\\"var-radio__action var-radio--unchecked\\"><i class=\\"var-icon var-icon--set var-icon-radio-blank var-radio__icon\\" style=\\"transition-duration: 0ms;\\" var-radio-cover=\\"\\"></i>
+      <div class=\\"var-hover-overlay\\"></div>
+    </div>
     <div class=\\"var-radio__text\\">当前的值: 0</div>
   </div>
   <transition-stub>
@@ -24,7 +28,9 @@ exports[`test radio example 1`] = `
 <div class=\\"app-type\\">修改图标和颜色</div>
 <div class=\\"var-radio__wrap\\">
   <div class=\\"var-radio\\">
-    <div class=\\"var-radio__action var-radio--unchecked\\" style=\\"color: rgb(233, 158, 180);\\"><i class=\\"var-icon var-icon--set var-icon-heart-half-full\\" style=\\"transition-duration: 0ms; font-size: 24px;\\"></i></div>
+    <div class=\\"var-radio__action var-radio--unchecked\\" style=\\"color: rgb(233, 158, 180);\\"><i class=\\"var-icon var-icon--set var-icon-heart-half-full\\" style=\\"transition-duration: 0ms; font-size: 24px;\\"></i>
+      <div class=\\"var-hover-overlay\\"></div>
+    </div>
     <div class=\\"var-radio__text\\">当前的值: false</div>
   </div>
   <transition-stub>
@@ -34,7 +40,9 @@ exports[`test radio example 1`] = `
 <div class=\\"app-type\\">禁用</div>
 <div class=\\"var-radio__wrap\\">
   <div class=\\"var-radio\\">
-    <div class=\\"var-radio__action var-radio--unchecked var-radio--disabled\\"><i class=\\"var-icon var-icon--set var-icon-radio-blank var-radio__icon\\" style=\\"transition-duration: 0ms;\\" var-radio-cover=\\"\\"></i></div>
+    <div class=\\"var-radio__action var-radio--unchecked var-radio--disabled\\"><i class=\\"var-icon var-icon--set var-icon-radio-blank var-radio__icon\\" style=\\"transition-duration: 0ms;\\" var-radio-cover=\\"\\"></i>
+      <div class=\\"var-hover-overlay\\"></div>
+    </div>
     <div class=\\"var-radio__text var-radio--disabled\\">当前的值: false</div>
   </div>
   <transition-stub>
@@ -44,7 +52,9 @@ exports[`test radio example 1`] = `
 <div class=\\"app-type\\">只读</div>
 <div class=\\"var-radio__wrap\\">
   <div class=\\"var-radio\\">
-    <div class=\\"var-radio__action var-radio--unchecked\\"><i class=\\"var-icon var-icon--set var-icon-radio-blank var-radio__icon\\" style=\\"transition-duration: 0ms;\\" var-radio-cover=\\"\\"></i></div>
+    <div class=\\"var-radio__action var-radio--unchecked\\"><i class=\\"var-icon var-icon--set var-icon-radio-blank var-radio__icon\\" style=\\"transition-duration: 0ms;\\" var-radio-cover=\\"\\"></i>
+      <div class=\\"var-hover-overlay\\"></div>
+    </div>
     <div class=\\"var-radio__text\\">当前的值: false</div>
   </div>
   <transition-stub>
@@ -56,7 +66,9 @@ exports[`test radio example 1`] = `
   <div class=\\"var-radio-group var-radio-group--horizontal\\">
     <div class=\\"var-radio__wrap\\">
       <div class=\\"var-radio\\">
-        <div class=\\"var-radio__action var-radio--unchecked\\"><i class=\\"var-icon var-icon--set var-icon-radio-blank var-radio__icon\\" style=\\"transition-duration: 0ms;\\" var-radio-cover=\\"\\"></i></div>
+        <div class=\\"var-radio__action var-radio--unchecked\\"><i class=\\"var-icon var-icon--set var-icon-radio-blank var-radio__icon\\" style=\\"transition-duration: 0ms;\\" var-radio-cover=\\"\\"></i>
+          <div class=\\"var-hover-overlay\\"></div>
+        </div>
         <div class=\\"var-radio__text\\">吃饭</div>
       </div>
       <transition-stub>
@@ -65,7 +77,9 @@ exports[`test radio example 1`] = `
     </div>
     <div class=\\"var-radio__wrap\\">
       <div class=\\"var-radio\\">
-        <div class=\\"var-radio__action var-radio--unchecked\\"><i class=\\"var-icon var-icon--set var-icon-radio-blank var-radio__icon\\" style=\\"transition-duration: 0ms;\\" var-radio-cover=\\"\\"></i></div>
+        <div class=\\"var-radio__action var-radio--unchecked\\"><i class=\\"var-icon var-icon--set var-icon-radio-blank var-radio__icon\\" style=\\"transition-duration: 0ms;\\" var-radio-cover=\\"\\"></i>
+          <div class=\\"var-hover-overlay\\"></div>
+        </div>
         <div class=\\"var-radio__text\\">睡觉</div>
       </div>
       <transition-stub>
@@ -81,7 +95,9 @@ exports[`test radio example 1`] = `
 <div class=\\"app-type\\">单选框字段校验</div>
 <div class=\\"var-radio__wrap\\">
   <div class=\\"var-radio\\">
-    <div class=\\"var-radio__action var-radio--unchecked\\"><i class=\\"var-icon var-icon--set var-icon-radio-blank var-radio__icon\\" style=\\"transition-duration: 0ms;\\" var-radio-cover=\\"\\"></i></div>
+    <div class=\\"var-radio__action var-radio--unchecked\\"><i class=\\"var-icon var-icon--set var-icon-radio-blank var-radio__icon\\" style=\\"transition-duration: 0ms;\\" var-radio-cover=\\"\\"></i>
+      <div class=\\"var-hover-overlay\\"></div>
+    </div>
     <div class=\\"var-radio__text\\">当前的值: false</div>
   </div>
   <transition-stub>
@@ -93,7 +109,9 @@ exports[`test radio example 1`] = `
   <div class=\\"var-radio-group var-radio-group--horizontal\\">
     <div class=\\"var-radio__wrap\\">
       <div class=\\"var-radio\\">
-        <div class=\\"var-radio__action var-radio--unchecked\\"><i class=\\"var-icon var-icon--set var-icon-radio-blank var-radio__icon\\" style=\\"transition-duration: 0ms;\\" var-radio-cover=\\"\\"></i></div>
+        <div class=\\"var-radio__action var-radio--unchecked\\"><i class=\\"var-icon var-icon--set var-icon-radio-blank var-radio__icon\\" style=\\"transition-duration: 0ms;\\" var-radio-cover=\\"\\"></i>
+          <div class=\\"var-hover-overlay\\"></div>
+        </div>
         <div class=\\"var-radio__text\\">吃饭</div>
       </div>
       <transition-stub>
@@ -102,7 +120,9 @@ exports[`test radio example 1`] = `
     </div>
     <div class=\\"var-radio__wrap\\">
       <div class=\\"var-radio\\">
-        <div class=\\"var-radio__action var-radio--unchecked\\"><i class=\\"var-icon var-icon--set var-icon-radio-blank var-radio__icon\\" style=\\"transition-duration: 0ms;\\" var-radio-cover=\\"\\"></i></div>
+        <div class=\\"var-radio__action var-radio--unchecked\\"><i class=\\"var-icon var-icon--set var-icon-radio-blank var-radio__icon\\" style=\\"transition-duration: 0ms;\\" var-radio-cover=\\"\\"></i>
+          <div class=\\"var-hover-overlay\\"></div>
+        </div>
         <div class=\\"var-radio__text\\">睡觉</div>
       </div>
       <transition-stub>
@@ -123,7 +143,9 @@ exports[`test radio group layout direction 1`] = `
   <div class=\\"var-radio-group var-radio-group--vertical\\">
     <div class=\\"var-radio__wrap\\">
       <div class=\\"var-radio\\">
-        <div class=\\"var-radio__action var-radio--unchecked\\"><i class=\\"var-icon var-icon--set var-icon-radio-blank var-radio__icon\\" style=\\"transition-duration: 0ms;\\" var-radio-cover=\\"\\"></i></div>
+        <div class=\\"var-radio__action var-radio--unchecked\\"><i class=\\"var-icon var-icon--set var-icon-radio-blank var-radio__icon\\" style=\\"transition-duration: 0ms;\\" var-radio-cover=\\"\\"></i>
+          <div class=\\"var-hover-overlay\\"></div>
+        </div>
         <div class=\\"var-radio__text\\"></div>
       </div>
       <transition-stub>
@@ -132,7 +154,9 @@ exports[`test radio group layout direction 1`] = `
     </div>
     <div class=\\"var-radio__wrap\\">
       <div class=\\"var-radio\\">
-        <div class=\\"var-radio__action var-radio--unchecked\\"><i class=\\"var-icon var-icon--set var-icon-radio-blank var-radio__icon\\" style=\\"transition-duration: 0ms;\\" var-radio-cover=\\"\\"></i></div>
+        <div class=\\"var-radio__action var-radio--unchecked\\"><i class=\\"var-icon var-icon--set var-icon-radio-blank var-radio__icon\\" style=\\"transition-duration: 0ms;\\" var-radio-cover=\\"\\"></i>
+          <div class=\\"var-hover-overlay\\"></div>
+        </div>
         <div class=\\"var-radio__text\\"></div>
       </div>
       <transition-stub>
@@ -151,7 +175,9 @@ exports[`test radio group validation 1`] = `
   <div class=\\"var-radio-group var-radio-group--horizontal\\">
     <div class=\\"var-radio__wrap\\">
       <div class=\\"var-radio\\">
-        <div class=\\"var-radio__action var-radio--unchecked var-radio--error\\"><i class=\\"var-icon var-icon--set var-icon-radio-blank var-radio__icon\\" style=\\"transition-duration: 0ms;\\" var-radio-cover=\\"\\"></i></div>
+        <div class=\\"var-radio__action var-radio--unchecked var-radio--error\\"><i class=\\"var-icon var-icon--set var-icon-radio-blank var-radio__icon\\" style=\\"transition-duration: 0ms;\\" var-radio-cover=\\"\\"></i>
+          <div class=\\"var-hover-overlay\\"></div>
+        </div>
         <div class=\\"var-radio__text var-radio--error\\"></div>
       </div>
       <transition-stub>
@@ -160,7 +186,9 @@ exports[`test radio group validation 1`] = `
     </div>
     <div class=\\"var-radio__wrap\\">
       <div class=\\"var-radio\\">
-        <div class=\\"var-radio__action var-radio--checked var-radio--error\\"><i class=\\"var-icon var-icon--set var-icon-radio-marked var-radio__icon\\" style=\\"transition-duration: 0ms;\\" var-radio-cover=\\"\\"></i></div>
+        <div class=\\"var-radio__action var-radio--checked var-radio--error\\"><i class=\\"var-icon var-icon--set var-icon-radio-marked var-radio__icon\\" style=\\"transition-duration: 0ms;\\" var-radio-cover=\\"\\"></i>
+          <div class=\\"var-hover-overlay\\"></div>
+        </div>
         <div class=\\"var-radio__text var-radio--error\\"></div>
       </div>
       <transition-stub>
@@ -190,7 +218,9 @@ exports[`test radio group validation 2`] = `
   <div class=\\"var-radio-group var-radio-group--horizontal\\">
     <div class=\\"var-radio__wrap\\">
       <div class=\\"var-radio\\">
-        <div class=\\"var-radio__action var-radio--checked\\"><i class=\\"var-icon var-icon--set var-icon-radio-marked var-radio__icon var-radio--with-animation\\" style=\\"transition-duration: 0ms;\\" var-radio-cover=\\"\\"></i></div>
+        <div class=\\"var-radio__action var-radio--checked\\"><i class=\\"var-icon var-icon--set var-icon-radio-marked var-radio__icon var-radio--with-animation\\" style=\\"transition-duration: 0ms;\\" var-radio-cover=\\"\\"></i>
+          <div class=\\"var-hover-overlay\\"></div>
+        </div>
         <div class=\\"var-radio__text\\"></div>
       </div>
       <transition-stub>
@@ -199,7 +229,9 @@ exports[`test radio group validation 2`] = `
     </div>
     <div class=\\"var-radio__wrap\\">
       <div class=\\"var-radio\\">
-        <div class=\\"var-radio__action var-radio--unchecked\\"><i class=\\"var-icon var-icon--set var-icon-radio-blank var-radio__icon\\" style=\\"transition-duration: 0ms;\\" var-radio-cover=\\"\\"></i></div>
+        <div class=\\"var-radio__action var-radio--unchecked\\"><i class=\\"var-icon var-icon--set var-icon-radio-blank var-radio__icon\\" style=\\"transition-duration: 0ms;\\" var-radio-cover=\\"\\"></i>
+          <div class=\\"var-hover-overlay\\"></div>
+        </div>
         <div class=\\"var-radio__text\\"></div>
       </div>
       <transition-stub>
@@ -216,7 +248,9 @@ exports[`test radio group validation 2`] = `
 exports[`test radio validation 1`] = `
 "<div class=\\"var-radio__wrap\\">
   <div class=\\"var-radio\\">
-    <div class=\\"var-radio__action var-radio--unchecked var-radio--error\\"><i class=\\"var-icon var-icon--set var-icon-radio-blank var-radio__icon\\" style=\\"transition-duration: 0ms;\\" var-radio-cover=\\"\\"></i></div>
+    <div class=\\"var-radio__action var-radio--unchecked var-radio--error\\"><i class=\\"var-icon var-icon--set var-icon-radio-blank var-radio__icon\\" style=\\"transition-duration: 0ms;\\" var-radio-cover=\\"\\"></i>
+      <div class=\\"var-hover-overlay\\"></div>
+    </div>
     <div class=\\"var-radio__text var-radio--error\\"></div>
   </div>
   <transition-stub>
@@ -239,7 +273,9 @@ exports[`test radio validation 1`] = `
 exports[`test radio validation 2`] = `
 "<div class=\\"var-radio__wrap\\">
   <div class=\\"var-radio\\">
-    <div class=\\"var-radio__action var-radio--checked\\"><i class=\\"var-icon var-icon--set var-icon-radio-marked var-radio__icon var-radio--with-animation\\" style=\\"transition-duration: 0ms;\\" var-radio-cover=\\"\\"></i></div>
+    <div class=\\"var-radio__action var-radio--checked\\"><i class=\\"var-icon var-icon--set var-icon-radio-marked var-radio__icon var-radio--with-animation\\" style=\\"transition-duration: 0ms;\\" var-radio-cover=\\"\\"></i>
+      <div class=\\"var-hover-overlay\\"></div>
+    </div>
     <div class=\\"var-radio__text\\"></div>
   </div>
   <transition-stub>

diff --git a/packages/varlet-ui/src/radio/Radio.vue b/packages/varlet-ui/src/radio/Radio.vue
@@ -11,6 +11,7 @@
           )
         "
         v-ripple="{ disabled: formReadonly || readonly || formDisabled || disabled || !ripple }"
+        v-hover:desktop="handleHovering"
         :style="{ color: checked ? checkedColor : uncheckedColor }"
       >
         <slot name="checked-icon" v-if="checked">
@@ -29,6 +30,7 @@
             :size="iconSize"
           />
         </slot>
+        <var-hover-overlay :hovering="!disabled && !formDisabled && hovering" />
       </div>
       <div
         :class="
@@ -51,19 +53,22 @@
 import VarIcon from '../icon'
 import VarFormDetails from '../form-details'
 import Ripple from '../ripple'
+import Hover from '../hover'
 import { computed, defineComponent, nextTick, ref, watch, type Ref, type ComputedRef } from 'vue'
 import { props, type ValidateTrigger } from './props'
 import { useValidation, createNamespace, call } from '../utils/components'
 import { useRadioGroup, type RadioProvider } from './provide'
 import { useForm } from '../form/provide'
+import VarHoverOverlay, { useHoverOverlay } from '../hover-overlay'
 
 const { n, classes } = createNamespace('radio')
 export default defineComponent({
   name: 'VarRadio',
-  directives: { Ripple },
+  directives: { Ripple, Hover },
   components: {
     VarIcon,
     VarFormDetails,
+    VarHoverOverlay,
   },
   inheritAttrs: false,
   props,
@@ -72,6 +77,7 @@ export default defineComponent({
     const checked: ComputedRef<boolean> = computed(() => value.value === props.checkedValue)
     const withAnimation: Ref<boolean> = ref(false)
     const { radioGroup, bindRadioGroup } = useRadioGroup()
+    const { hovering, handleHovering } = useHoverOverlay()
     const { form, bindForm } = useForm()
     const {
       errorMessage,
@@ -170,6 +176,8 @@ export default defineComponent({
       radioGroupErrorMessage: radioGroup?.errorMessage,
       formDisabled: form?.disabled,
       formReadonly: form?.readonly,
+      hovering,
+      handleHovering,
       n,
       classes,
       handleClick,

diff --git a/packages/varlet-ui/src/radio/radio.less b/packages/varlet-ui/src/radio/radio.less
@@ -5,6 +5,7 @@
   --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 {
@@ -39,6 +40,7 @@
   &__action {
     display: flex;
     justify-content: center;
+    position: relative;
     align-items: center;
     padding: var(--radio-action-padding);
     border-radius: 50%;