From 6d97d9ff55c6ff22ca53df68e9cb2f2899509e3d Mon Sep 17 00:00:00 2001
From: guochao <463561248@qq.com>
Date: Wed, 15 Feb 2023 18:29:01 +0800
Subject: [PATCH] fix(checkbox):  add checkbox-input style to solve the problem
 of checkbox nesting

---
 .../web-vue/components/checkbox/checkbox.tsx  | 56 ++++++++++---------
 .../components/checkbox/style/index.less      | 46 +++++++++------
 2 files changed, 57 insertions(+), 45 deletions(-)

diff --git a/packages/web-vue/components/checkbox/checkbox.tsx b/packages/web-vue/components/checkbox/checkbox.tsx
index 092df8867..3e19c6122 100644
--- a/packages/web-vue/components/checkbox/checkbox.tsx
+++ b/packages/web-vue/components/checkbox/checkbox.tsx
@@ -208,33 +208,35 @@ export default defineComponent({
 
     return () => (
       <label aria-disabled={mergedDisabled.value} class={cls.value}>
-        <input
-          ref={checkboxRef}
-          type="checkbox"
-          checked={computedChecked.value}
-          value={props.value}
-          class={`${prefixCls}-target`}
-          disabled={mergedDisabled.value}
-          onClick={handleClick}
-          onChange={handleChange}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-        />
-        {(slots.checkbox ?? checkboxGroupCtx?.slots?.checkbox)?.({
-          checked: computedChecked.value,
-          disabled: mergedDisabled.value,
-        }) ?? (
-          <IconHover
-            class={`${prefixCls}-icon-hover`}
-            disabled={mergedDisabled.value || computedChecked.value}
-          >
-            <div class={`${prefixCls}-icon`}>
-              {computedChecked.value && (
-                <IconCheck class={`${prefixCls}-icon-check`} />
-              )}
-            </div>
-          </IconHover>
-        )}
+        <span class={`${prefixCls}-input`}>
+          <input
+            ref={checkboxRef}
+            type="checkbox"
+            checked={computedChecked.value}
+            value={props.value}
+            class={`${prefixCls}-target`}
+            disabled={mergedDisabled.value}
+            onClick={handleClick}
+            onChange={handleChange}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+          />
+          {(slots.checkbox ?? checkboxGroupCtx?.slots?.checkbox)?.({
+            checked: computedChecked.value,
+            disabled: mergedDisabled.value,
+          }) ?? (
+            <IconHover
+              class={`${prefixCls}-icon-hover`}
+              disabled={mergedDisabled.value || computedChecked.value}
+            >
+              <div class={`${prefixCls}-icon`}>
+                {computedChecked.value && (
+                  <IconCheck class={`${prefixCls}-icon-check`} />
+                )}
+              </div>
+            </IconHover>
+          )}
+        </span>
         {slots.default && (
           <span class={`${prefixCls}-label`}>{slots.default()}</span>
         )}
diff --git a/packages/web-vue/components/checkbox/style/index.less b/packages/web-vue/components/checkbox/style/index.less
index 4ad4093db..0591bfbd9 100644
--- a/packages/web-vue/components/checkbox/style/index.less
+++ b/packages/web-vue/components/checkbox/style/index.less
@@ -13,7 +13,15 @@
   line-height: unset;
   cursor: pointer;
 
-  > input[type='checkbox'] {
+  &-input {
+    position: relative;
+    display: inline-flex;
+    white-space: nowrap;
+    outline: none;
+    cursor: pointer;
+  }
+
+  &-input > input[type='checkbox'] {
     position: absolute;
     top: 0;
     left: 0;
@@ -27,8 +35,10 @@
   }
 
   &:hover {
-    .@{checkbox-prefix-cls}-icon-hover::before {
-      background-color: @checkbox-mask-bg-color-bg;
+    > .@{checkbox-prefix-cls}-input {
+      .@{checkbox-prefix-cls}-icon-hover::before {
+        background-color: @checkbox-mask-bg-color-bg;
+      }
     }
   }
 
@@ -74,20 +84,20 @@
     }
   }
 
-  &:hover &-icon {
+  &:hover > &-input &-icon {
     border-color: @checkbox-mask-color-border_hover;
     transition: border-color @transition-duration-1
         @transition-timing-function-linear,
       transform @transition-duration-3 @transition-timing-function-overshoot;
   }
 
-  &-checked:hover &-icon,
-  &-indeterminate:hover &-icon {
+  &-checked:hover > &-input &-icon,
+  &-indeterminate:hover > &-input &-icon {
     transition: transform @transition-duration-3
       @transition-timing-function-overshoot;
   }
 
-  &-checked &-icon {
+  &-checked > &-input &-icon {
     background-color: @checkbox-mask-color-bg_checked;
     border-color: @checkbox-mask-color-border_checked;
 
@@ -98,7 +108,7 @@
     }
   }
 
-  &-indeterminate &-icon {
+  &-indeterminate > &-input &-icon {
     background-color: @checkbox-mask-color-bg_checked;
     border-color: @checkbox-mask-color-border_checked;
 
@@ -116,27 +126,27 @@
   &&-disabled {
     cursor: not-allowed;
 
-    .@{checkbox-prefix-cls}-icon-hover {
+    > .@{checkbox-prefix-cls}-input .@{checkbox-prefix-cls}-icon-hover {
       cursor: not-allowed;
     }
 
-    &:hover .@{checkbox-prefix-cls}-mask {
+    &:hover > .@{checkbox-prefix-cls}-input .@{checkbox-prefix-cls}-mask {
       border-color: @checkbox-mask-color-border_disabled;
     }
   }
 
-  &-checked:hover &-icon,
-  &-indeterminate:hover &-icon {
+  &-checked:hover > &-input &-icon,
+  &-indeterminate:hover > &-input &-icon {
     border-color: @checkbox-mask-color-border_checked;
   }
 
-  &-disabled &-icon {
+  &-disabled > &-input &-icon {
     background-color: @checkbox-mask-color-bg_disabled;
     border-color: @checkbox-mask-color-border_disabled;
   }
 
-  &-disabled&-checked &-icon,
-  &-disabled&-checked:hover &-icon {
+  &-disabled&-checked > &-input &-icon,
+  &-disabled&-checked:hover > &-input &-icon {
     background-color: @checkbox-mask-color-bg_checked_disabled;
     border-color: @checkbox-mask-color-border_checked_disabled;
   }
@@ -144,12 +154,12 @@
   &-disabled:hover,
   &-checked:hover,
   &-indeterminate:hover {
-    .@{checkbox-prefix-cls}-icon-hover::before {
+    > @{checkbox-prefix-cls}-input .@{checkbox-prefix-cls}-icon-hover::before {
       background-color: @color-transparent;
     }
   }
 
-  &-disabled:hover &-icon {
+  &-disabled:hover > &-input &-icon {
     border-color: @checkbox-mask-color-border;
   }
 
@@ -157,7 +167,7 @@
     color: @checkbox-color-text_disabled;
   }
 
-  &-disabled &-icon-check {
+  &-disabled > &-input &-icon-check {
     color: @checkbox-color-check-icon_disabled;
   }
 }