feat(checkbox): [checkbox] Adapting to the SMB theme

examples/sites/demos/pc/app/checkbox/basic-usage.spec.ts

@@ -6,8 +6,8 @@ test('基础用法', async ({ page }) => {
   const demo = page.locator('#basic-usage')
   const checkbox = demo.locator('.tiny-checkbox')
   await expect(checkbox).toHaveClass(/is-checked/)
-  await expect(checkbox.locator('.tiny-checkbox__inner')).toHaveCSS('background-color', 'rgb(94, 124, 224)')
-  await expect(checkbox.locator('.tiny-checkbox__inner')).toHaveCSS('border-left-color', 'rgb(94, 124, 224)')
+  await expect(checkbox.locator('.tiny-checkbox__inner')).toHaveCSS('background-color', 'rgb(20, 118, 255)')
+  await expect(checkbox.locator('.tiny-checkbox__inner')).toHaveCSS('border-left-color', 'rgb(20, 118, 255)')
   await checkbox.click()
   await expect(checkbox).not.toHaveClass(/is-checked/)
 })

examples/sites/demos/pc/app/checkbox/border.spec.ts

@@ -10,8 +10,8 @@ test('带边框复选框', async ({ page }) => {
 
   await expect(checkbox).toHaveCSS('width', '158px')
   await expect(checkbox).toHaveCSS('height', '40px')
-  await expect(checkbox).toHaveCSS('border-left-color', 'rgb(173, 176, 184)')
-  await expect(checkbox).toHaveCSS('border-bottom-color', 'rgb(173, 176, 184)')
+  await expect(checkbox).toHaveCSS('border-left-color', 'rgb(194, 194, 194)')
+  await expect(checkbox).toHaveCSS('border-bottom-color', 'rgb(194, 194, 194)')
   await expect(label).toHaveClass(/content-overflow/)
   await label.hover()
   await expect(demo.locator('.tiny-tooltip').filter({ hasText: '备选项1 提示文字 提示文字' })).toBeVisible()

examples/sites/demos/pc/app/checkbox/checkbox-button.spec.ts

@@ -7,12 +7,12 @@ test('复选框按钮', async ({ page }) => {
   const demo = page.locator('#checkbox-button')
   const checkboxButton = demo.locator('.tiny-checkbox-button .tiny-checkbox-button__inner')
 
-  await expect(checkboxButton.first()).toHaveCSS('background-color', 'rgb(94, 124, 224)')
-  await expect(checkboxButton.first()).toHaveCSS('border-bottom-color', 'rgb(94, 124, 224)')
-  await expect(checkboxButton.nth(1)).toHaveCSS('background-color', 'rgb(233, 237, 250)')
-  await expect(checkboxButton.nth(1)).toHaveCSS('border-bottom-color', 'rgb(233, 237, 250)')
+  await expect(checkboxButton.first()).toHaveCSS('background-color', 'rgb(255, 255, 255)')
+  await expect(checkboxButton.first()).toHaveCSS('border-bottom-color', 'rgb(20, 118, 255)')
+  await expect(checkboxButton.nth(1)).toHaveCSS('background-color', 'rgb(255, 255, 255)')
+  await expect(checkboxButton.nth(1)).toHaveCSS('border-bottom-color', 'rgb(194, 194, 194)')
 
   await checkboxButton.nth(1).click()
-  await expect(checkboxButton.nth(1)).toHaveCSS('background-color', 'rgb(94, 124, 224)')
-  await expect(checkboxButton.nth(1)).toHaveCSS('border-bottom-color', 'rgb(94, 124, 224)')
+  await expect(checkboxButton.nth(1)).toHaveCSS('background-color', 'rgb(255, 255, 255)')
+  await expect(checkboxButton.nth(1)).toHaveCSS('border-bottom-color', 'rgb(20, 118, 255)')
 })

examples/sites/demos/pc/app/checkbox/size.spec.ts

@@ -8,12 +8,12 @@ test('复选框组', async ({ page }) => {
   const getCheckboxBtn = (index: number) =>
     demo.locator('.tiny-checkbox-group').nth(index).locator('.tiny-checkbox-button').first()
 
-  await expect(getCheckboxBtn(0)).toHaveCSS('width', '98px')
-  await expect(getCheckboxBtn(0)).toHaveCSS('height', '44px')
-  await expect(getCheckboxBtn(1)).toHaveCSS('width', '64px')
+  await expect(getCheckboxBtn(0)).toHaveCSS('width', '102px')
+  await expect(getCheckboxBtn(0)).toHaveCSS('height', '40px')
+  await expect(getCheckboxBtn(1)).toHaveCSS('width', '86px')
   await expect(getCheckboxBtn(1)).toHaveCSS('height', '32px')
-  await expect(getCheckboxBtn(2)).toHaveCSS('width', '60px')
-  await expect(getCheckboxBtn(2)).toHaveCSS('height', '30px')
-  await expect(getCheckboxBtn(3)).toHaveCSS('width', '54px')
+  await expect(getCheckboxBtn(2)).toHaveCSS('width', '82px')
+  await expect(getCheckboxBtn(2)).toHaveCSS('height', '28px')
+  await expect(getCheckboxBtn(3)).toHaveCSS('width', '66px')
   await expect(getCheckboxBtn(3)).toHaveCSS('height', '24px')
 })

examples/sites/demos/pc/app/checkbox/vertical-checkbox-composition-api.vue

@@ -1,13 +1,56 @@
 <template>
-  <tiny-checkbox-group v-model="checkboxGroup" vertical>
-    <tiny-checkbox-button v-for="city in cities" :label="city" :key="city">{{ city }}</tiny-checkbox-button>
-  </tiny-checkbox-group>
+  <div class="demo-checkbox-vertical">
+    <div>
+      <tiny-checkbox-group v-model="checkboxGroup" vertical>
+        <tiny-checkbox-button v-for="city in cities" :label="city" :key="city">{{ city }}</tiny-checkbox-button>
+      </tiny-checkbox-group>
+    </div>
+    <div>
+      <tiny-checkbox :indeterminate="isIndeterminate" v-model="checkAll"> 全选 </tiny-checkbox>
+      <br /><br />
+      <tiny-checkbox-group v-model="checkboxGroup" vertical>
+        <tiny-checkbox v-for="(city, index) in cities" :label="city" :key="index">
+          {{ city }}
+        </tiny-checkbox>
+      </tiny-checkbox-group>
+    </div>
+  </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import { CheckboxGroup as TinyCheckboxGroup, CheckboxButton as TinyCheckboxButton } from '@opentiny/vue'
+import { ref, computed } from 'vue'
+import {
+  CheckboxGroup as TinyCheckboxGroup,
+  CheckboxButton as TinyCheckboxButton,
+  Checkbox as TinyCheckbox
+} from '@opentiny/vue'
 
 const checkboxGroup = ref(['上海'])
 const cities = ref(['上海', '北京', '广州', '深圳'])
+const isIndeterminate = computed({
+  get() {
+    return checkboxGroup.value.length > 0 && checkboxGroup.value.length !== cities.value.length
+  }
+})
+const checkAll = computed({
+  get() {
+    return checkboxGroup.value.length === cities.value.length
+  },
+  set(val) {
+    if (val) {
+      checkboxGroup.value = [...cities.value]
+    } else {
+      checkboxGroup.value = []
+    }
+  }
+})
 </script>
+
+<style scoped>
+.demo-checkbox-vertical {
+  display: flex;
+  align-items: center;
+  width: 300px;
+  justify-content: space-between;
+}
+</style>

examples/sites/demos/pc/app/checkbox/vertical-checkbox.spec.ts

@@ -18,7 +18,7 @@ test('垂直布局', async ({ page }) => {
   const checkedLabelSZ = demo.getByRole('checkbox', { name: '深圳' }).filter({ hasText: '深圳' })
   await checkedLabelSZ.click()
   await expect(checkedLabelSZ).toHaveClass(/is-checked/)
-  const parentWrapper = demo.locator('div.tiny-checkbox-group.is-vertical')
+  const parentWrapper = page.getByLabel('checkbox-group').first()
   await expect(parentWrapper).toHaveCSS('display', 'inline-block')
   await expect(checkedLabelBJ).toHaveCSS('display', 'block')
   await expect(checkedLabelSH).toHaveCSS('display', 'block')

examples/sites/demos/pc/app/checkbox/vertical-checkbox.vue

@@ -1,22 +1,64 @@
 <template>
-  <tiny-checkbox-group v-model="checkboxGroup" vertical>
-    <tiny-checkbox-button v-for="city in cities" :label="city" :key="city">{{ city }}</tiny-checkbox-button>
-  </tiny-checkbox-group>
+  <div class="demo-checkbox-vertical">
+    <div>
+      <tiny-checkbox-group v-model="checkboxGroup" vertical>
+        <tiny-checkbox-button v-for="city in cities" :label="city" :key="city">{{ city }}</tiny-checkbox-button>
+      </tiny-checkbox-group>
+    </div>
+    <div>
+      <tiny-checkbox :indeterminate="isIndeterminate" v-model="checkAll"> 全选 </tiny-checkbox>
+      <br /><br />
+      <tiny-checkbox-group v-model="checkboxGroup" vertical>
+        <tiny-checkbox v-for="(city, index) in cities" :label="city" :key="index">
+          {{ city }}
+        </tiny-checkbox>
+      </tiny-checkbox-group>
+    </div>
+  </div>
 </template>
 
 <script>
-import { CheckboxGroup, CheckboxButton } from '@opentiny/vue'
+import { Checkbox, CheckboxGroup, CheckboxButton } from '@opentiny/vue'
 
 export default {
   components: {
     TinyCheckboxGroup: CheckboxGroup,
-    TinyCheckboxButton: CheckboxButton
+    TinyCheckboxButton: CheckboxButton,
+    TinyCheckbox: Checkbox
   },
   data() {
     return {
       checkboxGroup: ['上海'],
       cities: ['上海', '北京', '广州', '深圳']
     }
+  },
+  computed: {
+    isIndeterminate: {
+      get() {
+        return this.checkboxGroup.length > 0 && this.checkboxGroup.length !== this.cities.length
+      }
+    },
+    checkAll: {
+      get() {
+        return this.checkboxGroup.length === this.cities.length
+      },
+      set(val) {
+        if (val) {
+          this.checkboxGroup = [...this.cities]
+        } else {
+          this.checkboxGroup = []
+        }
+      }
+    }
   }
 }
 </script>
+
+<style scoped>
+.demo-checkbox-vertical {
+  display: flex;
+  align-items: center;
+  width: 300px;
+  justify-content: space-between;
+}
+</style>

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

@@ -30,9 +30,9 @@
   // 按钮形式复选框未选中项文本色
   --ti-checkbox-button-text-color: var(--ti-common-color-info-normal, #252b3a);
   // 按钮形式复选框选中项文本色
-  --ti-checkbox-button-checked-text-color: var(--ti-common-color-text-white, #fff);
+  --ti-checkbox-button-checked-text-color: #1476FF;
   // 按钮形式复选框选中项背景色
-  --ti-checkbox-button-checked-bg-color: var(--ti-common-color-bg-emphasize, #5e7ce0);
+  --ti-checkbox-button-checked-bg-color: #FFFFFF;
   // 按钮形式复选框悬浮背景色
   --ti-checkbox-button-bg-color-hover: #fff;
   // 按钮形式复选框边框色

packages/theme/src/checkbox/index.less

@@ -57,23 +57,22 @@
     &:hover {
       border-color: var(--ti-checkbox-border-color-hover);
     }
+    svg {
+      width: 14px;
+      height: 14px;
+    }
 
-    &::after {
-      box-sizing: content-box;
-      content: '';
-      border: 1px solid #fff;
-      border-width: 0 var(--ti-checkbox-checkline-width) var(--ti-checkbox-checkline-width) 0; // 对勾的线宽
-      border-left: 0;
-      border-top: 0;
-      height: var(--ti-checkbox-icon-height);
-      width: var(--ti-checkbox-icon-width);
-      position: absolute;
-      margin-left: var(--ti-checkbox-icon-margin-left);
-      margin-top: var(--ti-checkbox-icon-margin-top);
-      transform: rotate(45deg) scaleY(0);
-      transition: transform 0.15s ease-in 0.05s;
-      transform-origin: center;
-      left: 0;
+    .icon-checked-sur {
+      fill: #fff;
+    }
+    .icon-no-checked {
+      fill: transparent;
+    }
+    .icon-halfselect {
+      fill: #1476FF;
+    }
+    .icon-halfselect:hover {
+      fill: transparent;
     }
   }
 
@@ -189,48 +188,22 @@
       display: inline-block;
     }
 
-    .@{checkbox-prefix-cls}__inner {
-      svg {
-        fill: var(--ti-checkbox-border-color);
-      }
-
-      &:hover {
-        svg {
-          fill: var(--ti-checkbox-button-hover-text-color);
-        }
-      }
-    }
 
     &.is-disabled {
       .checkbox-input-disabled(var(--ti-checkbox-bg-color-disable), var(--ti-checkbox-border-color-unchecked-disabled),
       var(--ti-checkbox-bg-color-checked-disabled), var(--ti-checkbox-border-color-checked-disabled),
       var(--ti-checkbox-label-text-color-disabled), var(--ti-checkbox-icon-color-disabled));
     }
 
-    &.is-checked {
-      .@{checkbox-prefix-cls}__inner::after {
-        transform: rotate(45deg) scaleY(1);
-      }
-    }
-
-    &.is-indeterminate {
-      .@{checkbox-prefix-cls}__inner::before {
-        content: '';
-        position: absolute;
-        display: block;
-        border-radius: 1px;
-        background-color: #fff;
-        height: 6px;
-        width: 6px;
-        left: 0;
-        right: 0;
-        top: 0;
-        bottom: 0;
-        margin: auto;
-      }
-
-      .@{checkbox-prefix-cls}__inner::after {
-        display: none;
+    &.is-disabled,
+    .@{checkbox-prefix-cls}__input.is-disabled {
+      .@{checkbox-prefix-cls}__inner {  
+        .icon-halfselect {
+          fill: #DBDBDB;
+        }
+        .icon-no-checked {
+          fill: transparent;
+        }
       }
     }
 

packages/vue/src/checkbox/src/pc.vue

@@ -68,9 +68,9 @@
         @click.stop
       />
       <span class="tiny-checkbox__inner">
-        <icon-halfselect v-if="indeterminate && state.shape !== 'filter'" class="tiny-svg-size icon-halfselect" />
-        <icon-checked-sur v-else-if="state.isChecked" class="tiny-svg-size icon-checked-sur" />
-        <icon-check v-else class="tiny-svg-size icon-check" />
+        <icon-halfselect v-if="indeterminate && state.shape !== 'filter'" class="icon-halfselect" />
+        <icon-checked-sur v-else-if="state.isChecked" class="icon-checked-sur" />
+        <icon-checked-sur v-else class="icon-no-checked" />
       </span>
     </span>
     <span
@@ -87,7 +87,7 @@
 import { renderless, api } from '@opentiny/vue-renderless/checkbox/vue'
 import { props, setup, defineComponent } from '@opentiny/vue-common'
 import '@opentiny/vue-theme/checkbox/index.less'
-import { iconHalfselect, iconCheckedSur, iconCheck } from '@opentiny/vue-icon'
+import { iconHalfselect, iconYes } from '@opentiny/vue-icon'
 import type { ICheckboxApi } from '@opentiny/vue-renderless/types/checkbox.type'
 import { AutoTip } from '@opentiny/vue-directive'
 export default defineComponent({
@@ -117,8 +117,7 @@ export default defineComponent({
   ],
   components: {
     IconHalfselect: iconHalfselect(),
-    IconCheckedSur: iconCheckedSur(),
-    IconCheck: iconCheck()
+    IconCheckedSur: iconYes()
   },
   setup(props, context) {
     return setup({ props, context, renderless, api }) as unknown as ICheckboxApi