fix: modify the issue of radio and checkbox components being unclickable (#37)

* fix: optimize the radio component

* fix: revised version

* fix(radio): remove invalid events

* fix: modify the test version

* fix: modify the test version

* fix: optimize label tags and add corresponding IDs

* fix: cannot click after component reference, modify checkbox style

* fix: modify version

* fix: modify the selection of invalid issues for radio and checkbox

Author: James-9696

packages/demos/app/radio/event.vue

@@ -4,22 +4,36 @@
     <tiny-radio v-model="value" label="1" @change="changeAction">男</tiny-radio>
     <tiny-radio v-model="value" label="2" @change="changeAction">女</tiny-radio>
     <p>{{ text }}</p>
+    <br/> <br/>
+    <tiny-checkbox-group v-model="checked" class="demo-checkbox-group">
+      <tiny-checkbox label="复选框1">复选框1</tiny-checkbox>
+      <tiny-checkbox label="复选框2">复选框2</tiny-checkbox>
+    </tiny-checkbox-group>
+    <p>当前选中的值为：{{ checked }}</p>
   </div>
 </template>
 
 <script setup>
 import { ref } from 'vue'
-import { TinyRadio } from '@opentiny/vue-mobile'
+import { TinyRadio, TinyCheckbox, TinyCheckboxGroup } from '@opentiny/vue-mobile'
 
 const value = ref('1')
 const text = ref('男')
+const checked = ref(['复选框1'])
+
 
 function changeAction(value) { // NISVUE3 FIXME: value重复定义，请手工修改
   text.value = value === '1' ? '男' : '女'
 }
 </script>
 
 <style>
+.demo-checkbox-group {
+  display: flex;
+  justify-content: flex-start;
+  flex-wrap: nowrap;
+  width: 200px;
+}
 .demo {
   height: 100%;
   overflow-y: auto;

packages/mobile/components/radio/src/mobile.vue

@@ -12,12 +12,16 @@
 <template>
   <label
     class="tiny-mobile-radio"
-    :class="[{ 'is-disabled': state.isDisabled }, { 'is-focus': state.focus }, { 'is-checked': state.model === label }]"
+    :class="[{ 'is-disabled': state.isDisabled },
+             { 'is-focus': state.focus },
+             { 'is-checked': state.model === label }]"
     role="radio"
     :aria-checked="state.model === label"
     :aria-disabled="state.isDisabled"
     :tabindex="state.tabIndex"
-    @keydown.space.stop.prevent="state.model = state.isDisabled ? state.model : label"
+    @keydown.space.stop.prevent="
+      state.model = state.isDisabled ? state.model : label
+    "
   >
     <div class="tiny-mobile-radio__input">
       <div class="tiny-mobile-radio__outer">
@@ -29,7 +33,6 @@
         class="tiny-mobile-radio__original"
         :value="label"
         type="radio"
-        aria-hidden="true"
         v-model="state.model"
         @focus="state.focus = true"
         @blur="state.focus = false"
@@ -39,9 +42,9 @@
         tabindex="-1"
       />
     </div>
-    <span class="tiny-mobile-radio__label" @keydown.stop>
-      <slot>{{ text || label }}</slot>
-    </span>
+      <span class="tiny-mobile-radio__label">
+        <slot>{{ text || label }}</slot>
+      </span>
   </label>
 </template>
 

packages/mobile/components/radio/src/renderless/index.ts

@@ -103,3 +103,4 @@ export const toggleEvent = ({ props, vm, type }: Pick<IRadioRenderlessParams, 'p
     })
   }
 }
+

packages/mobile/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@opentiny/vue-mobile",
   "type": "module",
-  "version": "1.0.0-alpha.11",
+  "version": "1.0.0-alpha.11.5",
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "author": "OpenTiny Team",
   "license": "MIT",

packages/theme-mobile/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-theme-mobile",
-  "version": "1.0.0-alpha.11",
+  "version": "1.0.0-alpha.11.5",
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "homepage": "https://opentiny.design/tiny-vue",
   "main": "index.css",

packages/theme-mobile/src/checkbox/index.less

@@ -19,7 +19,8 @@
 
 .@{checkbox-prefix-cls} {
   .inject-Checkbox-vars();
-
+        
+  width: 100%;
   position: relative;
   display: inline-block;
   white-space: nowrap;
@@ -85,10 +86,11 @@
     opacity: 0;
     outline: 0;
     position: absolute;
-    margin: 0;
-    width: 0;
-    height: 0;
-    z-index: -1;
+    inset: 0;
+    width: var(--tvm-Checkbox-heatmap-width);
+    height: var(--tvm-Checkbox-heatmap-height);
+    opacity: 0;
+    z-index: 2;    
   }
 
   &__label {

packages/theme-mobile/src/checkbox/vars.less

@@ -35,4 +35,8 @@
   --tvm-Checkbox-checked-disabled-bg-color: var(--tvm-color-bg-disabled-control-checked, #dbdbdb);
   // 复选框禁用图标边框色
   --tvm-Checkbox-disabled-border-color: var(--tvm-color-bg-disabled-control-unactive, #dbdbdb);
+  // 复选框热区宽度
+  --tvm-Checkbox-heatmap-width: var(--tvm-base-size-width-large);
+  // 复选框热区高度
+  --tvm-Checkbox-heatmap-height: var(--tvm-base-size-height-mini);
 }

packages/theme-mobile/src/radio/index.less

@@ -137,11 +137,10 @@
     opacity: 0;
     outline: 0;
     position: absolute;
-    z-index: -1;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    z-index: 1;
+    inset: 0;
+    width: var(--tvm-Radio-heatmap-width);
+    height: var(--tvm-Radio-heatmap-height);
     margin: 0;
   }
 

packages/theme-mobile/src/radio/vars.less

@@ -21,4 +21,8 @@
   --tvm-Radio-label-text-color: var(--tvm-color-text, #191919);
   // 文字左边距
   --tvm-Radio-label-padding-left: var(--tvm-space-lg, 12px);
+  // 热区宽度
+  --tvm-Radio-heatmap-width: var(--tvm-base-size-width-large);
+  // 热区高度   
+  --tvm-Radio-heatmap-height: var(--tvm-base-size-height-mini);
 }