fix(collapse、checkbox、readio): 样式修改功能优化 (#413)

* style: 样式修改

* fix: docs props name

* fix: 视觉走查修改

* upd: 折叠面板组件优化

Co-authored-by: richard1015 <51844712@qq.com>

src/packages/checkbox/demo.vue

@@ -7,9 +7,6 @@
       >
       <span>{{ checkbox1 }}</span>
     </div>
-    <p class="p-word"
-      >组合使用 checkbox 时推荐使用 checkboxgroup 组件，见下方示例</p
-    >
     <h4>CheckboxGroup基本用法</h4>
     <div class="show-demo">
       <nut-checkboxgroup v-model="checkboxGroup1">
@@ -179,7 +176,7 @@ export default createDemo({
     const getChange3 = (val: string) => {
       result.result4 = '选中状态选项：' + val;
     };
-    const checkboxGroupDemo = ref(null);
+    const checkboxGroupDemo = ref();
     const chooseAll = (val: boolean | string) => {
       (checkboxGroupDemo.value as any).toggleAll(val);
     };
@@ -203,7 +200,7 @@ export default createDemo({
   margin: 60px 0;
   padding: 17px;
   h4 {
-    margin-top: 10px;
+    margin: 20px 0 10px;
     line-height: 20px;
     color: #909ca4;
     font-size: 14px;
@@ -227,13 +224,6 @@ export default createDemo({
       margin: 10px 10px 0 0;
     }
   }
-  .p-word {
-    margin: 15px 0;
-    font-size: 14px;
-    color: #636363;
-    padding-left: 5px;
-    border-left: 8px solid #03a9f4;
-  }
   .show-demo-block {
     view {
       display: block;

src/packages/checkbox/index.vue

@@ -20,20 +20,13 @@
   </view>
 </template>
 <script lang="ts">
-import {
-  reactive,
-  ref,
-  toRefs,
-  watch,
-  watchEffect,
-  computed,
-  getCurrentInstance,
-  inject
-} from 'vue';
+import { reactive, computed, getCurrentInstance, inject } from 'vue';
 import { createComponent } from '@/utils/create';
-const { componentName, create } = createComponent('checkbox');
+import checkboxgroup from '@/packages/checkboxgroup/index.vue';
+const { create } = createComponent('checkbox');
 
 export default create({
+  children: [checkboxgroup],
   props: {
     name: {
       type: String
@@ -47,7 +40,7 @@ export default create({
       default: ''
     },
     modelValue: {
-      required: true
+      required: false
     },
     trueValue: {
       default: true
@@ -93,9 +86,6 @@ export default create({
         return isCheckedVal;
       }
     });
-    const isObject = obj => {
-      return obj !== null && typeof obj === 'object';
-    };
 
     const isDisabled = computed(() => {
       if (parentGroup && parentGroup.parentNode) {
@@ -115,7 +105,7 @@ export default create({
 
     const isAnimated = computed(() => {
       if (parentGroup && parentGroup.parentNode) {
-        return parentProps?.animated;
+        return parentProps?.animation;
       } else {
         return props.animation;
       }
@@ -123,7 +113,7 @@ export default create({
 
     const { label, name, submittedValue } = reactive(props);
 
-    const setParentValue = checked => {
+    const setParentValue = (checked: boolean) => {
       // const { label } = props;
       // const { max, modelValue } = parentProps?.modelValue;
       const modelValue = parentProps?.modelValue;

src/packages/checkboxgroup/index.vue

@@ -4,9 +4,9 @@
   </view>
 </template>
 <script lang="ts">
-import { toRefs, watch, reactive, provide, getCurrentInstance } from 'vue';
+import { watch, provide, getCurrentInstance } from 'vue';
 import { createComponent } from '@/utils/create';
-const { componentName, create } = createComponent('checkboxgroup');
+const { create } = createComponent('checkboxgroup');
 
 export default create({
   props: {
@@ -22,7 +22,7 @@ export default create({
       type: String,
       default: 'base'
     },
-    animated: {
+    animation: {
       type: Boolean,
       default: true
     },
@@ -47,23 +47,25 @@ export default create({
       }
     }
 
-    const toggleAll = checked => {
+    const toggleAll = (checked: boolean) => {
       const children = (slots as any)?.default();
       if (checked === false) {
         emit('update:modelValue', []);
       } else if (checked === true) {
-        const labels = children.map(item => item.props?.label);
+        const labels = children.map(
+          (item: { props: { label: any } }) => item.props?.label
+        );
         emit('update:modelValue', labels);
       } else {
         const names = children
-          .filter(item => {
+          .filter((item: { props: { label: any } }) => {
             const label = item.props?.label;
             const idx = props.modelValue.indexOf(label);
             if (idx == -1) {
               return label;
             }
           })
-          .map(item => item.props?.label);
+          .map((item: { props: { label: any } }) => item.props?.label);
         emit('update:modelValue', names);
       }
     };
@@ -71,7 +73,7 @@ export default create({
 
     provide('checkboxgroup', {
       parentNode: true,
-      changeVal: val => {
+      changeVal: (val: []) => {
         if (props.disabled) {
           return false;
         }

src/packages/collapse/demo.vue

@@ -2,7 +2,7 @@
   <div class="demo-list">
     <h4>基本用法</h4>
     <div class="show-demo">
-      <nut-collapse v-model:active="active1">
+      <nut-collapse v-model:active="active1" icon="down-arrow">
         <nut-collapse-item :title="title1" :name="1">
           京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府
         </nut-collapse-item>
@@ -15,7 +15,7 @@
     </div>
     <h4>无icon样式</h4>
     <div class="show-demo">
-      <nut-collapse v-model:active="active4" :accordion="true" :icon="icon2">
+      <nut-collapse v-model:active="active4" :accordion="true">
         <nut-collapse-item :title="title1" :name="1">
           2020年中国数字游戏市场规模超2786亿元
         </nut-collapse-item>
@@ -26,7 +26,11 @@
     </div>
     <div class="show-demo">
       <h4>手风琴</h4>
-      <nut-collapse v-model:active="active2" :accordion="true">
+      <nut-collapse
+        v-model:active="active2"
+        :accordion="true"
+        icon="down-arrow"
+      >
         <nut-collapse-item :title="title1" :name="1">
           华为终端操作系统EMUI 11发布，9月11日正式开启
         </nut-collapse-item>
@@ -44,10 +48,8 @@
         v-model:active="active3"
         :accordion="true"
         :expandIconPosition="expandIconPosition"
-        :icon="icon"
-        :iconWidth="iconWidth"
-        :iconHeight="iconHeight"
-        :rotate="rotate"
+        icon="arrow-right2"
+        rotate="90"
       >
         <nut-collapse-item :title="title1" :name="1">
           京东数科IPO将引入“绿鞋机制”
@@ -61,9 +63,12 @@
       <h4>自定义标题图标</h4>
       <nut-collapse
         v-model:active="active5"
-        :titleIcon="titleIcon"
+        title-icon="issue"
+        title-icon-color="red"
+        title-icon-size="20px"
+        title-icon-position="left"
+        icon="down-arrow"
         :accordion="true"
-        :rotate="rotate"
       >
         <nut-collapse-item :title="title1" :name="1">
           “森亿智能”获4亿元D轮融资
@@ -91,15 +96,7 @@ export default createDemo({
       title1: '标题1',
       title2: '标题2',
       title3: '标题3',
-      subTitle: '副标题',
-      icon:
-        'https://img11.360buyimg.com/imagetools/jfs/t1/132849/8/9709/550/5f5f0d8aE802abee7/68bd02b3a52c3988.png',
-      icon2: 'none',
-      titleIcon:
-        'https://img13.360buyimg.com/imagetools/jfs/t1/144156/13/19748/1977/5fe2f5f8E21020483/a15144ab447bfbf2.png',
-      iconWidth: '20px',
-      iconHeight: '20px',
-      rotate: 90
+      subTitle: '副标题'
     });
     const change = (name: string) => {
       console.log(`点击了name是${name}的面板`);

src/packages/collapse/index.vue

@@ -4,7 +4,7 @@
   </view>
 </template>
 <script lang="ts">
-import { toRefs, provide } from 'vue';
+import { provide } from 'vue';
 import { createComponent } from '@/utils/create';
 import collapseitem from '@/packages/collapseitem/index.vue';
 const { create } = createComponent('collapse');
@@ -25,13 +25,13 @@ export default create({
       type: String,
       default: ''
     },
-    titleIconWidth: {
+    titleIconSize: {
       type: String,
-      default: '13px'
+      default: '16px'
     },
-    titleIconHeight: {
+    titleIconColor: {
       type: String,
-      default: '13px'
+      default: ''
     },
     titleIconPosition: {
       type: String,
@@ -41,13 +41,13 @@ export default create({
       type: String,
       default: ''
     },
-    iconWidth: {
+    iconSize: {
       type: String,
-      default: '24px'
+      default: '16px'
     },
-    iconHeight: {
+    iconColor: {
       type: String,
-      default: '12px'
+      default: ''
     },
     rotate: {
       type: [String, Number],

src/packages/collapseitem/index.scss

@@ -13,6 +13,9 @@
       -webkit-transform: scaleY(0.5);
       transform: scaleY(0.5);
     }
+    .collapse-title-value {
+      display: inline-block;
+    }
   }
   .collapse-item {
     position: relative;
@@ -29,14 +32,14 @@
       display: block;
       position: absolute;
       top: 50%;
-      margin-top: -6px;
+      // margin-top: -6px;
       right: 16px;
-      width: 24px;
-      height: 12px;
-      line-height: 24px;
-      background-image: url(https://img13.360buyimg.com/imagetools/jfs/t1/153504/23/6125/464/5fb240abE562ed1c5/382909c698fa3c1f.png);
-      background-repeat: no-repeat;
-      background-size: 100% 100%;
+      // width: 24px;
+      // height: 12px;
+      // line-height: 24px;
+      // background-image: url(https://img13.360buyimg.com/imagetools/jfs/t1/153504/23/6125/464/5fb240abE562ed1c5/382909c698fa3c1f.png);
+      // background-repeat: no-repeat;
+      // background-size: 100% 100%;
       transition: transform 0.3s;
     }
     .col-expanded {
@@ -51,11 +54,11 @@
     }
     .titleIconRight {
       vertical-align: middle;
-      margin: -1px 0 0 10px;
+      margin: 0px 0 0 10px;
     }
     .titleIconLeft {
       vertical-align: middle;
-      margin: -1px 10px 0 0;
+      margin: 0px 10px 0 0;
     }
   }
   .collapse-wrapper {
@@ -77,13 +80,14 @@
     color: #c8c9cc;
     cursor: not-allowed;
     pointer-events: none;
-    .collapse-icon-disabled {
-      background-image: url(https://img12.360buyimg.com/imagetools/jfs/t1/150103/9/14710/474/5fb2419aE63e79ef3/8db2699c11139027.png);
-      background-repeat: no-repeat;
-      background-size: 100% 100%;
-    }
+    // .collapse-icon-disabled {
+    //   background-image: url(https://img12.360buyimg.com/imagetools/jfs/t1/150103/9/14710/474/5fb2419aE63e79ef3/8db2699c11139027.png);
+    //   background-repeat: no-repeat;
+    //   background-size: 100% 100%;
+    // }
   }
-  .nut-collapse-item-left {
+  .titleIconLeft {
+    float: left;
     .collapse-item {
       padding: 10px 16px 10px 50px;
       .collapse-icon {
@@ -94,6 +98,9 @@
       }
     }
   }
+  .titleIconRight {
+    float: right;
+  }
   // .nut-collapse-item.nut-collapse-item-icon {
   //     .collapse-icon {
   //         transform: rotate(0deg);

src/packages/collapseitem/index.vue

@@ -10,47 +10,33 @@
     >
       <view class="collapse-title">
         <view>
-          <img
-            v-if="
-              titleIcon != '' &&
-                titleIcon != 'none' &&
-                titleIconPosition == 'left'
-            "
-            :src="titleIcon"
-            :style="titleIconWH"
-            class="titleIconLeft"
-          />
-          <view v-html="title"></view>
-          <img
-            v-if="
-              titleIcon != '' &&
-                titleIcon != 'none' &&
-                titleIconPosition == 'right'
-            "
-            :src="titleIcon"
-            :style="titleIconWH"
-            class="titleIconRight"
-          />
+          <view class="collapse-title-value">
+            <nut-icon
+              v-if="titleIcon"
+              :name="titleIcon"
+              :size="titleIconSize"
+              :color="titleIconColor"
+              :class="[
+                titleIconPosition == 'left' ? 'titleIconLeft' : 'titleIconRight'
+              ]"
+            ></nut-icon>
+            <view v-html="title"></view>
+          </view>
         </view>
       </view>
       <view v-if="subTitle" v-html="subTitle" class="subTitle"></view>
-      <i
-        v-if="icon && icon != 'none'"
+      <nut-icon
+        v-if="icon"
+        :name="icon"
+        :size="iconSize"
+        :color="iconColor"
         :class="[
           'collapse-icon',
           { 'col-expanded': openExpanded },
           { 'collapse-icon-disabled': disabled }
         ]"
         :style="iconStyle"
-      ></i>
-      <i
-        v-else-if="icon != 'none'"
-        :class="[
-          'collapse-icon',
-          { 'col-expanded': openExpanded },
-          { 'collapse-icon-disabled': disabled }
-        ]"
-      ></i>
+      ></nut-icon>
     </view>
     <view class="collapse-wrapper" ref="wrapperRef">
       <view class="collapse-content" ref="contentRef">
@@ -106,7 +92,7 @@ export default create({
       return {
         [prefixCls]: true,
         [`${prefixCls}-left`]: parent.props.classDirection === 'left',
-        [`${prefixCls}-icon`]: parent.props.icon && parent.props.icon !== 'none'
+        [`${prefixCls}-icon`]: parent.props.icon
       };
     });
     const relation = (child: ComponentInternalInstance): void => {
@@ -116,28 +102,28 @@ export default create({
     };
     relation(getCurrentInstance() as ComponentInternalInstance);
     const proxyData = reactive({
+      icon: parent.props.icon,
+      iconSize: parent.props.iconSize,
+      iconColor: parent.props.iconColor,
       openExpanded: false,
       classDirection: 'right',
       iconStyle: {
-        width: '20px',
-        height: '20px',
-        'background-image':
-          'url(https://img10.360buyimg.com/imagetools/jfs/t1/111306/10/17422/341/5f58aa0eEe9218dd6/28d76a42db334e31.png)',
-        'background-repeat': 'no-repeat',
-        'background-size': '100% 100%',
         transform: 'rotate(0deg)',
         marginTop: parent.props.iconHeght
           ? '-' + parent.props.iconHeght / 2 + 'px'
           : '-10px'
       }
     });
+
     const titleIconStyle = reactive({
       titleIcon: parent.props.titleIcon,
-      titleIconPosition: parent.props.titleIconPosition,
-      titleIconWH: {
-        width: '13px',
-        height: '13px'
-      }
+      titleIconSize: parent.props.titleIconSize,
+      titleIconColor: parent.props.titleIconColor,
+      titleIconPosition: parent.props.titleIconPosition
+      // titleIconWH: {
+      //   width: '13px',
+      //   height: '13px'
+      // }
     });
 
     // 获取 Dom 元素
@@ -166,11 +152,7 @@ export default create({
         wrapperRefEle.style.height = !proxyData.openExpanded
           ? 0
           : contentHeight;
-        if (
-          parent.props.icon &&
-          parent.props.icon != 'none' &&
-          !proxyData.openExpanded
-        ) {
+        if (parent.props.icon && !proxyData.openExpanded) {
           proxyData.iconStyle['transform'] = 'rotate(0deg)';
         } else {
           proxyData.iconStyle['transform'] =
@@ -189,7 +171,7 @@ export default create({
 
     const defaultOpen = () => {
       open();
-      if (parent.props.icon && parent.props.icon != 'none') {
+      if (parent.props.icon) {
         proxyData['iconStyle']['transform'] =
           'rotate(' + parent.props.rotate + 'deg)';
       }
@@ -249,16 +231,16 @@ export default create({
       }
 
       proxyData.classDirection = parent.props.expandIconPosition;
-      if (parent.props.icon && parent.props.icon != 'none') {
-        proxyData.iconStyle['background-image'] =
-          'url(' + parent.props.icon + ')';
-      }
-      if (parent.props.iconWidth && parent.props.icon != 'none') {
-        proxyData.iconStyle['width'] = parent.props.conWidth;
-      }
-      if (parent.props.iconHeght && parent.props.icon != 'none') {
-        proxyData.iconStyle['height'] = parent.props.iconHeight;
-      }
+      // if (parent.props.icon && parent.props.icon != 'none') {
+      //   proxyData.iconStyle['background-image'] =
+      //     'url(' + parent.props.icon + ')';
+      // }
+      // if (parent.props.iconWidth && parent.props.icon != 'none') {
+      //   proxyData.iconStyle['width'] = parent.props.conWidth;
+      // }
+      // if (parent.props.iconHeght && parent.props.icon != 'none') {
+      //   proxyData.iconStyle['height'] = parent.props.iconHeight;
+      // }
     });
 
     return {

src/packages/radio/index.vue

@@ -17,12 +17,14 @@
 <script lang="ts">
 import { computed, getCurrentInstance, inject } from 'vue';
 import { createComponent } from '@/utils/create';
+import radiogroup from '@/packages/radiogroup/index.vue';
 const { componentName, create } = createComponent('radio');
 
 type Iparent = {
   parentNode: boolean;
 };
 export default create({
+  children: [radiogroup],
   props: {
     value: {
       type: [String, Number, Boolean],