fix: solve disabled switch issue

Author: skaptox

src/components/primitives/Checkbox/Checkbox.vue

@@ -27,26 +27,14 @@ const focus = () => {
 </script>
 
 <template>
-  <label
-    class="v-checkbox checkbox"
-    :class="[ size, { 'is-disabled': disabled }]"
-    ref="label"
-    :disabled="disabled"
-    @click="focus"
-    @keydown.prevent.enter="label?.click()">
-    <input
-      v-model="value"
-      :indeterminate.prop="indeterminate"
-      type="checkbox"
-      ref="input"
-      @click.stop
-      :disabled="disabled"
-      :required="required"
-      :name="name"
-      :value="nativeValue"
-      :true-value="trueValue"
+  <label class="v-checkbox checkbox" :class="[size, { 'is-disabled': disabled }]" ref="label"
+    v-bind="disabled ? { disabled: true } : {}" @click="focus" @keydown.prevent.enter="label?.click()">
+    <input v-model="value" :indeterminate.prop="indeterminate" type="checkbox" ref="input" @click.stop
+      :disabled="disabled" :required="required" :name="name" :value="nativeValue" :true-value="trueValue"
       :false-value="falseValue" />
     <span class="check" :class="type" />
-    <span class="control-label"><slot /></span>
+    <span class="control-label">
+      <slot />
+    </span>
   </label>
 </template>

src/components/primitives/Switch/Switch.vue

@@ -54,30 +54,19 @@ const passiveClass = computed<string | undefined>(() => {
 </script>
 
 <template>
-  <label
-    class="switch"
-    :class="[
-      size,
-      {
-        'is-disabled': disabled,
-        'is-rounded': rounded,
-        'is-outlined': outlined,
-      }
-    ]"
-    :disabled="disabled">
-    <input
-      v-model="value"
-      type="checkbox"
-      @click.stop
-      :disabled="disabled"
-      :name="name"
-      :required="required"
-      :value="nativeValue"
-      :true-value="trueValue"
-      :false-value="falseValue" />
-    <span
-      class="check"
-      :class="[passiveClass, type]" />
-    <span class="control-label"><slot /></span>
+  <label class="switch" :class="[
+    size,
+    {
+      'is-disabled': disabled,
+      'is-rounded': rounded,
+      'is-outlined': outlined,
+    }
+  ]" v-bind="disabled ? { disabled: true } : {}">
+    <input v-model="value" type="checkbox" @click.stop :disabled="disabled" :name="name" :required="required"
+      :value="nativeValue" :true-value="trueValue" :false-value="falseValue" />
+    <span class="check" :class="[passiveClass, type]" />
+    <span class="control-label">
+      <slot />
+    </span>
   </label>
 </template>