From 93cb391f6851b3a3fb6e675071c68250705b1b9a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?0o=E5=BC=A0=E4=B8=8D=E6=AD=AAo0?= <zhangzheng7856@126.com>
Date: Wed, 13 Jul 2022 17:21:56 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(component):=20=E6=96=B0=E5=A2=9Eradio?=
 =?UTF-8?q?Group=E7=BB=84=E4=BB=B6=20disabled=E5=B1=9E=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/component/checkbox/index.less         |  7 +++-
 .../src/component/checkbox/index.vue          | 14 +++++--
 .../src/component/checkboxGroup/index.vue     |  9 ++++-
 .../component/src/component/radio/index.vue   | 38 ++++++++++---------
 .../src/component/radioGroup/index.vue        | 13 ++++++-
 .../src/document/zh-CN/components/checkbox.md |  7 +---
 .../src/document/zh-CN/components/radio.md    |  3 ++
 .../src/document/zh-CN/guide/changelog.md     |  3 +-
 8 files changed, 62 insertions(+), 32 deletions(-)

diff --git a/package/component/src/component/checkbox/index.less b/package/component/src/component/checkbox/index.less
index f5d3d076..896b6ec1 100644
--- a/package/component/src/component/checkbox/index.less
+++ b/package/component/src/component/checkbox/index.less
@@ -102,7 +102,7 @@
 }
 
 .layui-form-checked[lay-skin="primary"] i {
-  border-color: var(--global-checked-color) !important;
+  border-color: var(--global-checked-color);
   background-color: var(--global-checked-color);
   color: #fff;
 }
@@ -136,3 +136,8 @@
 .layui-checkbox-disabled:hover i {
   color: #fff !important;
 }
+
+.layui-checkbox-disabled .layui-icon-ok,.layui-checkbox-disabled .layui-icon-subtraction{
+  background-color: var(--global-neutral-color-3) !important;
+  border-color: var(--global-neutral-color-3) !important;
+}
\ No newline at end of file
diff --git a/package/component/src/component/checkbox/index.vue b/package/component/src/component/checkbox/index.vue
index 0076976f..13384af4 100644
--- a/package/component/src/component/checkbox/index.vue
+++ b/package/component/src/component/checkbox/index.vue
@@ -27,7 +27,6 @@ const props = withDefaults(defineProps<LayCheckboxProps>(), {
 });
 
 const checkboxGroup: any = inject("checkboxGroup", {});
-const checkboxGroupDisabled: boolean = inject("checkboxGroupDisabled", false);
 
 const isGroup = computed(() => {
   return (
@@ -93,10 +92,19 @@ const setArrayModelValue = function (checked: any) {
 };
 
 const handleClick = function () {
-  if (!props.disabled&&!checkboxGroupDisabled) {
+  if (!ifDisabled.value) {
     isChecked.value = !isChecked.value;
   }
 };
+const ifDisabled = computed(() => {
+  if (props.disabled) {
+    return true;
+  }
+  if (checkboxGroup.hasOwnProperty('disabled')&&checkboxGroup.disabled.value) {
+    return true;
+  }
+  return false;
+})
 </script>
 
 <template>
@@ -105,8 +113,8 @@ const handleClick = function () {
     <div
       class="layui-unselect layui-form-checkbox"
       :class="{
-        'layui-checkbox-disabled layui-disabled': disabled||checkboxGroupDisabled,
         'layui-form-checked': isChecked,
+        'layui-checkbox-disabled layui-disabled': ifDisabled,
       }"
       :lay-skin="skin"
     >
diff --git a/package/component/src/component/checkboxGroup/index.vue b/package/component/src/component/checkboxGroup/index.vue
index ec59c996..035ea3b0 100644
--- a/package/component/src/component/checkboxGroup/index.vue
+++ b/package/component/src/component/checkboxGroup/index.vue
@@ -21,9 +21,9 @@ const props = withDefaults(defineProps<LayCheckboxGroupProps>(), {
 const emit = defineEmits(["update:modelValue", "change"]);
 
 const modelValue = ref(props.modelValue);
+const disabled=ref(props.disabled)
+provide("checkboxGroup", { name: "LayCheckboxGroup", modelValue: modelValue,disabled:disabled });
 
-provide("checkboxGroup", { name: "LayCheckboxGroup", modelValue: modelValue });
-provide("checkboxGroupDisabled",props.disabled)
 watch(
   () => modelValue,
   (val) => {
@@ -38,6 +38,11 @@ watch(
   (val) => (modelValue.value = val)
 );
 
+watch(
+  () => props.disabled,
+  (val) => (disabled.value = val)
+);
+
 </script>
 
 <template>
diff --git a/package/component/src/component/radio/index.vue b/package/component/src/component/radio/index.vue
index fee1c8cb..ae813c4e 100644
--- a/package/component/src/component/radio/index.vue
+++ b/package/component/src/component/radio/index.vue
@@ -7,6 +7,7 @@ export default {
 
 <script setup lang="ts">
 import "./index.less";
+import { disable } from '@umijs/ssr-darkreader';
 
 export interface LayRadioProps {
   modelValue?: string | boolean;
@@ -55,32 +56,33 @@ const isChecked = computed({
 });
 
 const handleClick = function () {
-  if (!props.disabled) {
+  if (!ifDisabled.value) {
     isChecked.value = !isChecked.value;
   }
 };
+const ifDisabled = computed(() => {
+  if (props.disabled) {
+    return true;
+  }
+  if (radioGroup.hasOwnProperty('disabled')&&radioGroup.disabled.value) {
+    return true;
+  }
+  return false;
+})
 </script>
 
 <template>
   <span class="layui-radio">
     <input type="radio" :value="value" :name="naiveName" />
-    <div
-      class="layui-unselect layui-form-radio"
-      :class="{
-        'layui-form-radioed': isChecked,
-        'layui-radio-disabled layui-disabled': disabled,
-      }"
-      @click.stop="handleClick"
-    >
-      <i v-if="isChecked" class="layui-anim layui-icon layui-anim-scaleSpring"
-        >&#xe643;</i
-      >
-      <i
-        v-else
-        class="layui-icon layui-form-radioed"
-        >&#xe63f;</i
-      >
-      <span><slot>{{label}}</slot></span>
+    <div class="layui-unselect layui-form-radio" :class="{
+      'layui-form-radioed': isChecked,
+      'layui-radio-disabled layui-disabled': ifDisabled,
+    }" @click.stop="handleClick">
+      <i v-if="isChecked" class="layui-anim layui-icon layui-anim-scaleSpring">&#xe643;</i>
+      <i v-else class="layui-icon layui-form-radioed">&#xe63f;</i>
+      <span>
+        <slot>{{ label }}</slot>
+      </span>
     </div>
   </span>
 </template>
diff --git a/package/component/src/component/radioGroup/index.vue b/package/component/src/component/radioGroup/index.vue
index 3b86b266..2d6ae28f 100644
--- a/package/component/src/component/radioGroup/index.vue
+++ b/package/component/src/component/radioGroup/index.vue
@@ -10,18 +10,22 @@ import { provide, ref, watch } from "vue";
 export interface LayRadioGroupProps {
   modelValue?: string | boolean;
   name?: string;
+  disabled?:boolean;
 }
 
-const props = withDefaults(defineProps<LayRadioGroupProps>(), {});
+const props = withDefaults(defineProps<LayRadioGroupProps>(), {
+  disabled:false
+});
 
 const emit = defineEmits(["update:modelValue", "change"]);
 
 const modelValue = ref(props.modelValue);
-
+const disabled=ref(props.disabled)
 provide("radioGroup", {
   name: "LayRadioGroup",
   modelValue: modelValue,
   naiveName: props.name,
+  disabled:disabled
 });
 
 watch(
@@ -37,6 +41,11 @@ watch(
   () => props.modelValue,
   (val) => (modelValue.value = val)
 );
+
+watch(
+  () => props.disabled,
+  (val) => (disabled.value = val)
+);
 </script>
 
 <template>
diff --git a/package/document-component/src/document/zh-CN/components/checkbox.md b/package/document-component/src/document/zh-CN/components/checkbox.md
index 13031de0..87c02264 100644
--- a/package/document-component/src/document/zh-CN/components/checkbox.md
+++ b/package/document-component/src/document/zh-CN/components/checkbox.md
@@ -42,7 +42,7 @@ export default {
 ::: demo
 
 <template>
-    <lay-checkbox name="like" value="1" v-model="checked2" >普通</lay-checkbox>
+    <lay-checkbox name="like" value="1" v-model="checked2">普通</lay-checkbox>
 </template>
 
 <script>
@@ -134,7 +134,7 @@ export default {
 <template>
     <lay-checkbox name="like" skin="primary" value="1" :disabled="disabled" v-model="checked6">禁用</lay-checkbox>
     <br/><br/>
-    <lay-checkbox-group v-model="checkeds" disabled>
+    <lay-checkbox-group v-model="checkeds" :disabled="disabled">
       <lay-checkbox name="like" skin="primary" value="1">写作</lay-checkbox>
       <lay-checkbox name="like" skin="primary" value="2">画画</lay-checkbox>
       <lay-checkbox name="like" skin="primary" value="3">运动</lay-checkbox>
@@ -146,11 +146,8 @@ import { ref } from 'vue'
 
 export default {
   setup() {
-
     const disabled = ref(true)
-
     const checked6 = ref(false);
-
     return {
       disabled,checked6
     }
diff --git a/package/document-component/src/document/zh-CN/components/radio.md b/package/document-component/src/document/zh-CN/components/radio.md
index c08e4603..4d42af0a 100644
--- a/package/document-component/src/document/zh-CN/components/radio.md
+++ b/package/document-component/src/document/zh-CN/components/radio.md
@@ -121,6 +121,7 @@ export default {
     const change4 = function( current ) {
         console.log("当前值:" + current)
     }
+    const disabled1=ref(false)
     return {
         selected4,
         change4
@@ -142,6 +143,7 @@ export default {
 | label   | 显示值        | --     |
 | value   | 绑定值        | --     |
 | v-model | 选中值        | --     |
+| disabled   | 是否禁用    | `false`     |
 
 :::
 
@@ -164,6 +166,7 @@ export default {
 | 属性    | 描述          | 默认值 |
 | ------- | ------------- | ------ |
 | v-model | 选中值        | --     |
+| disabled   | 是否整体禁用    | `false`     |
 
 :::
 
diff --git a/package/document-component/src/document/zh-CN/guide/changelog.md b/package/document-component/src/document/zh-CN/guide/changelog.md
index f227c5e9..6a6cd122 100644
--- a/package/document-component/src/document/zh-CN/guide/changelog.md
+++ b/package/document-component/src/document/zh-CN/guide/changelog.md
@@ -25,7 +25,8 @@
           <li>[新增] formItem 组件 label-width属性，用于控制宽度 by @SmallWai</li> 
           <li>[优化] inputNumber 组件 禁用状态下的样式 by @SmallWai</li>
           <li>[优化] botton 组件 禁用状态下的icon hover样式 by @SmallWai</li>
-          <li>[新增] CheckboxGroup 组件 disabled属性  by @SmallWai</li>
+          <li>[新增] checkboxGroup 组件 disabled属性  by @SmallWai</li>
+          <li>[新增] radioGroup 组件 disabled属性  by @SmallWai</li>
         </ul>
       </li>
     </ul>