checkbox 组件 size 大小使用scss变量向标准统一 #1199

packages/devui-vue/devui/checkbox/src/checkbox-button.scss

@@ -1,19 +1,27 @@
 @import '../../styles-var/devui-var.scss';
 
+$devui-btn-sm-padding: var(--devui-btn-sm-padding, 0 16px);
+$devui-btn-padding: var(--devui-btn-padding, 0 20px);
+$devui-btn-lg-padding: var(--devui-btn-lg-padding, 0 24px);
+
 $font-size-map: (
   lg: $devui-font-size-lg,
-  md: $devui-font-size-lg,
+  md: $devui-font-size-md,
   sm: $devui-font-size-sm,
-  xs: $devui-font-size-sm,
 );
 $button-padding-map: (
-  lg: 12px 20px,
-  md: 10px 20px,
-  sm: 9px 15px,
-  xs: 7px 15px,
+  lg: $devui-btn-lg-padding,
+  md: $devui-btn-padding,
+  sm: $devui-btn-sm-padding,
+);
+$checkbox-label-height-map: (
+  lg: $devui-size-lg,
+  md: $devui-size-md,
+  sm: $devui-size-sm,
 );
 .#{$devui-prefix}-checkbox-button {
-  display: inline-block;
+  display: flex;
+  align-items: center;
   position: relative;
 
   &__input {
@@ -39,10 +47,12 @@ $button-padding-map: (
     line-height: 1;
     user-select: none;
     box-shadow: -1px 0 0 0 $devui-disabled-line;
-    @each $size in ('lg', 'md', 'sm', 'xs') {
+    @each $size in ('lg', 'md', 'sm') {
       &.#{$devui-prefix}-checkbox-button--#{$size} {
         font-size: map-get($font-size-map, #{$size});
         padding: map-get($button-padding-map, #{$size});
+        height: map-get($checkbox-label-height-map, #{$size});
+        line-height: map-get($checkbox-label-height-map, #{$size});
       }
     }
   }

packages/devui-vue/devui/checkbox/src/checkbox-group.scss

@@ -1,23 +1,24 @@
 @import '../../styles-var/devui-var.scss';
 
 .#{$devui-prefix}-checkbox__group {
-  display: inline-block;
-}
-
-.#{$devui-prefix}-checkbox--list-inline {
-  min-height: 28px;
-  line-height: 28px;
-  display: flex;
+  display: inline-flex;
   flex-wrap: wrap;
   justify-content: flex-start;
-  align-items: center;
-  margin: -8px 0 0 0;
-
-  & div:not(:last-child) {
-    margin-right: 20px;
-  }
+  align-items: flex-start;
 
   & > * {
     margin-top: 8px;
   }
+
+  &.is-row {
+    flex-direction: row;
+
+    & div:not(:last-child) {
+      margin-right: 20px;
+    }
+  }
+
+  &.is-column {
+    flex-direction: column;
+  }
 }

packages/devui-vue/devui/checkbox/src/checkbox-group.tsx

@@ -41,9 +41,18 @@ export default defineComponent({
         }
       };
 
+
       return (
-        <div class={ns.e('group')}>
-          <div class={{ [ns.m('list-inline')]: props.direction === 'row' }}>{getContent()}</div>
+        <div
+          class={[
+            ns.e('group'),
+            {
+              'is-row': props.direction === 'row',
+              'is-column': props.direction === 'column',
+            },
+          ]}
+        >
+          {getContent()}
         </div>
       );
     };

packages/devui-vue/devui/checkbox/src/checkbox-types.ts

@@ -1,7 +1,7 @@
 import { PropType, InjectionKey, Ref, ExtractPropTypes, ComputedRef } from 'vue';
 
 type Direction = 'row' | 'column';
-type Size = 'lg' | 'md' | 'sm' | 'xs';
+type Size = 'lg' | 'md' | 'sm';
 
 const commonProps = {
   name: {

packages/devui-vue/devui/checkbox/src/checkbox.scss

@@ -2,21 +2,18 @@
 
 $font-size-map: (
   lg: $devui-font-size-lg,
-  md: $devui-font-size-lg,
+  md: $devui-font-size-md,
   sm: $devui-font-size-sm,
-  xs: $devui-font-size-sm,
 );
 $checkbox-width-map: (
-  lg: 16px,
+  lg: 18px,
   md: 16px,
   sm: 14px,
-  xs: 14px,
 );
 $checkbox-label-height-map: (
-  lg: 40px,
-  md: 36px,
-  sm: 32px,
-  xs: 28px,
+  lg: $devui-size-lg,
+  md: $devui-size-md,
+  sm: $devui-size-sm,
 );
 .#{$devui-prefix}-checkbox {
   position: relative;
@@ -184,8 +181,10 @@ $checkbox-label-height-map: (
     color: $devui-text;
     margin: 0;
     display: block;
-    @each $size in ('lg', 'md', 'sm', 'xs') {
+    @each $size in ('lg', 'md', 'sm') {
       &.#{$devui-prefix}-checkbox--#{$size} {
+        display: flex;
+        align-items: center;
         font-size: map-get($font-size-map, #{$size});
 
         .#{$devui-prefix}-checkbox__material {
@@ -200,7 +199,6 @@ $checkbox-label-height-map: (
 
         &.#{$devui-prefix}-checkbox--bordered {
           height: map-get($checkbox-label-height-map, #{$size});
-          line-height: map-get($checkbox-label-height-map, #{$size});
           padding: 0 15px 0 10px;
         }
       }

packages/devui-vue/docs/components/checkbox/index.md

@@ -97,6 +97,7 @@ export default defineComponent({
 .checkbox-basic-demo .devui-checkbox {
   margin-bottom: 10px;
 }
+
 .checkbox-basic-demo .inline-row .devui-select {
   width: 150px;
   margin-right: 10px;
@@ -111,6 +112,7 @@ export default defineComponent({
 :::demo
 
 ```vue
+
 <template>
   <div class="checkbox-group-demo">
     <h4 class="title">Input Object Array</h4>
@@ -120,7 +122,8 @@ export default defineComponent({
     <d-checkbox-group v-model="values2" :options="options2" :isShowTitle="false" direction="row"></d-checkbox-group>
 
     <h4 class="title">Disabled Group</h4>
-    <d-checkbox-group v-model="values2" :options="options2" :isShowTitle="false" direction="row" :disabled="true"></d-checkbox-group>
+    <d-checkbox-group v-model="values2" :options="options2" :isShowTitle="false" direction="row" :disabled="true"
+    ></d-checkbox-group>
 
     <h4 class="title">Custom Selected Color</h4>
     <d-checkbox-group
@@ -132,10 +135,12 @@ export default defineComponent({
     ></d-checkbox-group>
 
     <h4 class="title">Set showAnimation false</h4>
-    <d-checkbox-group v-model="values4" :options="options3" :isShowTitle="false" direction="row" :showAnimation="false"></d-checkbox-group>
+    <d-checkbox-group v-model="values4" :options="options3" :isShowTitle="false" direction="row" :showAnimation="false"
+    ></d-checkbox-group>
 
     <h4 class="title">Multi-line Checkbox</h4>
-    <d-checkbox-group v-model="values5" :options="options5" :isShowTitle="false" direction="row" :itemWidth="94"></d-checkbox-group>
+    <d-checkbox-group v-model="values5" :options="options5" :isShowTitle="false" direction="row" :itemWidth="94"
+    ></d-checkbox-group>
 
     <h4 class="title">可选项目数量的限制</h4>
     <d-checkbox-group
@@ -218,39 +223,37 @@ export default defineComponent({
 :::demo
 
 ```vue
+
 <template>
-  <div>
-    <div style="margin-bottom: 10px">
-      <d-checkbox-group v-model="borderSizeValues1" :options="borderSizeOptions1" direction="row" size="lg" border></d-checkbox-group>
-    </div>
-    <div style="margin-bottom: 10px">
-      <d-checkbox-group v-model="borderSizeValues2" :options="borderSizeOptions1" direction="row" size="md" border></d-checkbox-group>
-    </div>
-    <div style="margin-bottom: 10px">
-      <d-checkbox-group v-model="borderSizeValues3" :options="borderSizeOptions1" direction="row" size="sm" border></d-checkbox-group>
-    </div>
-    <div style="margin-bottom: 10px">
-      <d-checkbox-group v-model="borderSizeValues4" :options="borderSizeOptions1" direction="row" size="xs" border></d-checkbox-group>
-    </div>
-  </div>
+  <h4>Small</h4>
+  <d-checkbox-group v-model="borderSizeValues1" :options="borderSizeOptions1" direction="row" size="sm" border
+  ></d-checkbox-group>
+
+  <h4>Middle</h4>
+  <d-checkbox-group v-model="borderSizeValues2" :options="borderSizeOptions1" direction="row" size="md" border
+  ></d-checkbox-group>
+
+  <h4>Large</h4>
+  <d-checkbox-group v-model="borderSizeValues3" :options="borderSizeOptions1" direction="row" size="lg" border
+  ></d-checkbox-group>
 </template>
 <script>
 import { defineComponent, ref } from 'vue';
+
 export default defineComponent({
   setup() {
     const borderSizeOptions1 = ref([
-      { name: '选项1', disabled: true, value: '1', id: 1 },
-      { name: '选项2', value: '2', id: 2 },
+      { name: 'Summer', value: '1', id: 1 },
+      { name: 'Spring', disabled: true, value: '2', id: 2 },
     ]);
-    const borderSizeValues1 = ref([{ name: '选项2', value: '2', id: 2 }]);
-    const borderSizeValues2 = ref([{ name: '选项2', value: '2', id: 2 }]);
-    const borderSizeValues3 = ref([{ name: '选项2', value: '2', id: 2 }]);
-    const borderSizeValues4 = ref([{ name: '选项2', value: '2', id: 2 }]);
+    const borderSizeValues1 = ref([{ name: 'Summer', value: '1', id: 1 }]);
+    const borderSizeValues2 = ref([{ name: 'Summer', value: '1', id: 1 }]);
+    const borderSizeValues3 = ref([{ name: 'Summer', value: '1', id: 1 }]);
+
     return {
       borderSizeValues1,
       borderSizeValues2,
       borderSizeValues3,
-      borderSizeValues4,
       borderSizeOptions1,
     };
   },
@@ -262,41 +265,46 @@ export default defineComponent({
 
 ### 按钮形态
 
+需要把 `d-checkbox` 替换成 `d-checkbox-button`， 数组源可为普通数组、对象数组等。
+
 :::demo
 
 ```vue
+
 <template>
-  <div>
-    <div style="margin-bottom: 10px">
-      <d-checkbox-group v-model="buttonValues1" size="lg" is-show-title color="#FA9841" text-color="#fff">
-        <d-checkbox-button
-          v-for="item in buttonOptions1"
-          :label="item.label"
-          :value="item.value"
-          :key="item.value"
-          :title="item.title"
-        ></d-checkbox-button
-      ></d-checkbox-group>
-      <d-checkbox-group v-model="buttonValues2" style="margin-top: 10px;">
-        <d-checkbox-button v-for="item in buttonOptions1" :label="item.label" :value="item.value" :key="item.value"></d-checkbox-button
-      ></d-checkbox-group>
-      <d-checkbox-group v-model="buttonValues3" size="sm" style="margin-top: 10px;">
-        <d-checkbox-button
-          v-for="item in buttonOptions1"
-          :label="item.label"
-          :value="item.value"
-          :key="item.value"
-          :disabled="item.disabled"
-        ></d-checkbox-button
-      ></d-checkbox-group>
-      <d-checkbox-group v-model="buttonValues4" size="xs" disabled style="margin-top: 10px;">
-        <d-checkbox-button v-for="item in buttonOptions1" :label="item.label" :value="item.value" :key="item.value"></d-checkbox-button
-      ></d-checkbox-group>
-    </div>
-  </div>
+  <h4>禁用</h4>
+  <d-checkbox-group v-model="buttonValues1" size="sm" direction="row">
+    <d-checkbox-button
+      v-for="item in buttonOptions1"
+      :label="item.label"
+      :value="item.value"
+      :key="item.value"
+      :disabled="item.disabled"
+    >
+    </d-checkbox-button>
+  </d-checkbox-group>
+
+  <h4>默认</h4>
+  <d-checkbox-group v-model="buttonValues2" direction="row">
+    <d-checkbox-button v-for="item in buttonOptions1" :label="item.label" :value="item.value" :key="item.value"
+    ></d-checkbox-button>
+  </d-checkbox-group>
+
+  <h4>自定义填充颜色、文字颜色</h4>
+  <d-checkbox-group v-model="buttonValues3" size="lg" is-show-title color="#FA9841" text-color="#fff" direction="row">
+    <d-checkbox-button
+      v-for="item in buttonOptions1"
+      :label="item.label"
+      :value="item.value"
+      :key="item.value"
+      :title="item.title"
+    >
+    </d-checkbox-button>
+  </d-checkbox-group>
 </template>
 <script>
 import { defineComponent, ref } from 'vue';
+
 export default defineComponent({
   setup() {
     const buttonOptions1 = ref([
@@ -307,12 +315,11 @@ export default defineComponent({
     const buttonValues1 = ref([2]);
     const buttonValues2 = ref([2]);
     const buttonValues3 = ref([2]);
-    const buttonValues4 = ref([2]);
+
     return {
       buttonValues1,
       buttonValues2,
       buttonValues3,
-      buttonValues4,
       buttonOptions1,
     };
   },
@@ -328,6 +335,7 @@ export default defineComponent({
 :::demo
 
 ```vue
+
 <template>
   <div style="margin-bottom: 10px">
     <d-checkbox
@@ -350,6 +358,7 @@ export default defineComponent({
 </template>
 <script>
 import { defineComponent, ref } from 'vue';
+
 export default defineComponent({
   setup() {
     const checkboxChecked1 = ref(true);
@@ -381,6 +390,7 @@ export default defineComponent({
 :::demo
 
 ```vue
+
 <template>
   <div>
     <d-checkbox-group
@@ -487,5 +497,5 @@ export default defineComponent({
 #### ICheckboxSize
 
 ```ts
-type ICheckboxSize = 'lg' | 'md' | 'sm' | 'xs';
+type ICheckboxSize = 'lg' | 'md' | 'sm';
 ```