fix: fix checkbox/radio alignment when there is no label

Author: Justineo

packages/veui-theme-dls/components/button.less

@@ -344,6 +344,8 @@
   &[ui~="icon"] {
     &::after {
       .size(calc(@dls-icon-size-normal + @dls-button-padding-text * 2));
+      .absolute(50%, auto, auto, 50%);
+      transform: translate(-50%, -50%);
     }
   }
 

packages/veui-theme-dls/components/checkbox.less

@@ -123,9 +123,11 @@
     .@{veui-prefix}-checkbox-box {
       .size(@@s);
 
-      // Baseline is around 0.1414em above bottom line for macOS's system font
-      // see https://jsbin.com/yimugoxina/edit?html,css,js,output
-      top: dls-sum(@@s / 2, -@@fs / 2, 0.1414em);
+      &-labelled {
+        // Baseline is around 0.1414em above bottom line for macOS's system font
+        // see https://jsbin.com/yimugoxina/edit?html,css,js,output
+        top: dls-sum(@@s / 2, -@@fs / 2, 0.1414em);
+      }
     }
   }
 

packages/veui-theme-dls/components/radio.less

@@ -127,9 +127,11 @@
     .@{veui-prefix}-radio-box {
       .size(@@s);
 
-      // Baseline is around 0.1414em above bottom line for macOS's system font
-      // see https://jsbin.com/yimugoxina/edit?html,css,js,output
-      top: dls-sum(@@s / 2, -@@fs / 2, 0.1414em);
+      &-labelled {
+        // Baseline is around 0.1414em above bottom line for macOS's system font
+        // see https://jsbin.com/yimugoxina/edit?html,css,js,output
+        top: dls-sum(@@s / 2, -@@fs / 2, 0.1414em);
+      }
 
       &::before {
         .size(@@ds);

packages/veui/src/components/Checkbox.vue

@@ -17,7 +17,12 @@
     @change="handleChange"
     @click.stop
   >
-  <span :class="$c('checkbox-box')">
+  <span
+    :class="{
+      [$c('checkbox-box')]: true,
+      [$c('checkbox-box-labelled')]: !!$slots.default
+    }"
+  >
     <transition :name="$c('checkbox-icon')">
       <veui-icon
         v-if="indeterminate"

packages/veui/src/components/Radio.vue

@@ -18,7 +18,12 @@
     @veui:uncheck="handleUncheck"
     @click.stop
   >
-  <span :class="$c('radio-box')"/>
+  <span
+    :class="{
+      [$c('radio-box')]: true,
+      [$c('radio-box-labelled')]: !!$slots.default
+    }"
+  />
   <span
     v-if="$slots.default"
     :class="$c('radio-label')"
@@ -182,7 +187,7 @@ export default {
       let siblings = form
         ? form.querySelectorAll(`input[name="${name}"][type="radio"]`)
         : orphans.get(name)
-      ;[...(siblings || [])].forEach(sibling => {
+      ;[...(siblings || [])].forEach((sibling) => {
         if (radio !== sibling) {
           triggerCustom(sibling, event)
         }