feat(checkbox): [checkbox] adapte checkbox saas theme and x-design theme (#2260)
* feat(checkbox): adapte checkbox saas theme and x-design theme * feat(checkbox): adapte checkbox saas theme and x-design theme * feat(checkbox): adapte checkbox saas theme and x-design theme * feat(checkbox): adapte checkbox saas theme and x-design theme
This commit is contained in:
ajaxzheng
GitHub
parent
c6d505be7c
commit
cb34b70e54
|
|
@ -6,8 +6,7 @@ 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(20, 118, 255)')
|
||||
await expect(checkbox.locator('.tiny-checkbox__inner')).toHaveCSS('border-left-color', 'rgb(20, 118, 255)')
|
||||
await expect(checkbox.locator('.tiny-checkbox__inner svg')).toHaveCSS('fill', 'rgb(20, 118, 255)')
|
||||
await checkbox.click()
|
||||
await expect(checkbox).not.toHaveClass(/is-checked/)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -38,40 +38,21 @@
|
|||
.@{checkbox-prefix-cls}__inner {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
border: 1px solid var(--tv-Checkbox-border-color);
|
||||
border-radius: var(--tv-Checkbox-border-radius);
|
||||
box-sizing: border-box;
|
||||
width: var(--tv-Checkbox-width);
|
||||
height: var(--tv-Checkbox-height);
|
||||
outline: none;
|
||||
z-index: 1;
|
||||
transition:
|
||||
border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
|
||||
background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--tv-Checkbox-border-color-hover);
|
||||
}
|
||||
|
||||
svg {
|
||||
width: var(--tv-Checkbox-svg-width);
|
||||
height: var(--tv-Checkbox-svg-height);
|
||||
}
|
||||
|
||||
.icon-checked-sur {
|
||||
fill: var(--tv-Checkbox-icon-color);
|
||||
}
|
||||
|
||||
.icon-no-checked {
|
||||
fill: transparent;
|
||||
}
|
||||
|
||||
.icon-halfselect {
|
||||
fill: var(--tv-Checkbox-icon-halfselect);
|
||||
}
|
||||
|
||||
.icon-halfselect:hover {
|
||||
fill: transparent;
|
||||
svg.icon-check:hover {
|
||||
fill: var(--tv-Checkbox-icon-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -117,41 +98,40 @@
|
|||
line-height: 1;
|
||||
cursor: pointer;
|
||||
|
||||
&.is-disabled {
|
||||
.checkbox-input-disabled(
|
||||
var(--tv-Checkbox-bg-color-disabled),
|
||||
var(--tv-Checkbox-border-color-disabled),
|
||||
var(--tv-Checkbox-bg-color-checked-disabled),
|
||||
var(--tv-Checkbox-label-text-color-disabled),
|
||||
var(--tv-Checkbox-icon-color-disabled)
|
||||
);
|
||||
}
|
||||
|
||||
&.is-disabled,
|
||||
.@{checkbox-prefix-cls}__input.is-disabled {
|
||||
.@{checkbox-prefix-cls}__inner {
|
||||
.icon-halfselect {
|
||||
fill: var(--tv-Checkbox-icon-halfselect-disabled);
|
||||
}
|
||||
|
||||
.icon-no-checked {
|
||||
fill: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-checked,
|
||||
&.is-indeterminate {
|
||||
.@{checkbox-prefix-cls}__inner {
|
||||
background-color: var(--tv-Checkbox-bg-color-checked);
|
||||
border-color: var(--tv-Checkbox-border-color-checked);
|
||||
svg {
|
||||
fill: var(--tv-Checkbox-icon-selected);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input:focus-visible + .@{checkbox-prefix-cls}__inner {
|
||||
outline: 2px solid var(--tv-Checkbox-bg-color-checked);
|
||||
outline-offset: 1px;
|
||||
&.is-disabled {
|
||||
& + span.@{checkbox-prefix-cls}__label {
|
||||
color: var(--tv-Checkbox-label-text-color-disabled);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.@{checkbox-prefix-cls}__inner {
|
||||
svg {
|
||||
fill: var(--tv-Checkbox-icon-selected-disabled);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
svg:hover {
|
||||
fill: var(--tv-Checkbox-icon-selected-disabled);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.is-checked):not(.is-indeterminate) {
|
||||
svg {
|
||||
> path:first-child {
|
||||
fill: var(--tv-Checkbox-bg-color-disabled);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 原始表单input组件，需要隐藏
|
||||
|
|
|
|||
|
|
@ -11,53 +11,38 @@
|
|||
*/
|
||||
|
||||
.inject-Checkbox-vars() {
|
||||
// 复选框宽度
|
||||
--tv-Checkbox-width: 16px;
|
||||
// 复选框高度
|
||||
--tv-Checkbox-height: 16px;
|
||||
// 复选框内部svg宽度
|
||||
--tv-Checkbox-svg-width: calc(var(--tv-Checkbox-width) - 2px);
|
||||
--tv-Checkbox-svg-width: var(--tv-icon-size);
|
||||
// 复选框内部svg高度
|
||||
--tv-Checkbox-svg-height: calc(var(--tv-Checkbox-height) - 2px);
|
||||
--tv-Checkbox-svg-height: var(--tv-icon-size);
|
||||
// 复选框svg颜色
|
||||
--tv-Checkbox-icon-color: var(--tv-color-icon-white);
|
||||
--tv-Checkbox-icon-color: var(--tv-color-bg-control);
|
||||
// 复选框svg悬浮颜色
|
||||
--tv-Checkbox-icon-color-hover: var(--tv-color-icon-hover);
|
||||
// 复选框半选svg颜色
|
||||
--tv-Checkbox-icon-halfselect: var(--tv-color-icon-control-active);
|
||||
--tv-Checkbox-icon-selected: var(--tv-color-icon-control-active);
|
||||
// 复选框半选svg颜色
|
||||
--tv-Checkbox-icon-halfselect-disabled: var(--tv-color-icon-control-disabled);
|
||||
--tv-Checkbox-icon-selected-disabled: var(--tv-color-icon-control-disabled);
|
||||
// 默认复选框禁用时，未选中时背景色
|
||||
--tv-Checkbox-bg-color-disabled: var(--tv-color-bg-disabled);
|
||||
// 默认复选框文本色
|
||||
--tv-Checkbox-text-color: var(--tv-color-text);
|
||||
// 默认复选框字号
|
||||
--tv-Checkbox-font-size: var(--tv-font-size-md);
|
||||
// 默认复选框字重
|
||||
--tv-Checkbox-font-weight: var(--tv-font-weight-regular);
|
||||
// 默认复选框选中项背景色
|
||||
--tv-Checkbox-bg-color-checked: var(--tv-color-bg-active-control);
|
||||
// 默认复选框选中项边框色
|
||||
--tv-Checkbox-border-color-checked: var(--tv-color-border-active-control);
|
||||
// 默认复选框未选中项边框色
|
||||
--tv-Checkbox-border-color: var(--tv-color-border);
|
||||
// 默认复选框未选中项悬浮边框色
|
||||
--tv-Checkbox-border-color-hover: var(--tv-color-border-hover);
|
||||
|
||||
// 默认复选框禁用时，未选中时背景色
|
||||
--tv-Checkbox-bg-color-disabled: var(--tv-color-bg-disabled);
|
||||
// 默认复选框禁用时，选中项背景颜色
|
||||
--tv-Checkbox-bg-color-checked-disabled: var(--tv-color-bg-disabled-control-checked);
|
||||
// 默认复选框禁用时，选中项对勾颜色以及半选时图标的颜色
|
||||
--tv-Checkbox-icon-color-disabled: var(--tv-color-icon-white);
|
||||
// 默认复选框禁用边框色
|
||||
--tv-Checkbox-border-color-disabled: var(--tv-color-border-disabled);
|
||||
// 默认复选框禁用时，label文本色
|
||||
--tv-Checkbox-label-text-color-disabled: var(--tv-color-text-disabled);
|
||||
|
||||
// 默认复选框边框圆角
|
||||
--tv-Checkbox-border-radius: var(--tv-border-radius-sm);
|
||||
// 默认复选框外边框圆角
|
||||
--tv-Checkbox-outline-border-radius: var(--tv-border-radius-md);
|
||||
// 默认复选框的右侧外边距
|
||||
--tv-Checkbox-label-margin-right: 24px;
|
||||
|
||||
// 边框模式复选框禁用边框色
|
||||
--tv-Checkbox-border-color-disabled: var(--tv-color-border-disabled);
|
||||
// 复选框过滤器模式底色
|
||||
--tv-Checkbox-bg-color-filter: var(--tv-color-bg-gray-2);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,49 +40,3 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-input-disabled(@bg-color, @border-color, @bg-color-checked, @label-color, @icon-color) {
|
||||
.@{checkbox-prefix-cls}__inner {
|
||||
background-color: @bg-color;
|
||||
border-color: @border-color;
|
||||
cursor: not-allowed;
|
||||
|
||||
svg {
|
||||
fill: @icon-color;
|
||||
}
|
||||
|
||||
& + .@{checkbox-prefix-cls}__label {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-checked {
|
||||
.@{checkbox-prefix-cls}__inner,
|
||||
.@{checkbox-prefix-cls}__inner:hover {
|
||||
background-color: @bg-color-checked;
|
||||
border-color: @border-color;
|
||||
|
||||
&:after {
|
||||
border-color: @icon-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-indeterminate {
|
||||
.@{checkbox-prefix-cls}__inner,
|
||||
.@{checkbox-prefix-cls}__inner:hover {
|
||||
background-color: @bg-color-checked;
|
||||
border-color: @border-color;
|
||||
|
||||
&:before {
|
||||
background-color: @icon-color;
|
||||
border-color: @icon-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& + span.@{checkbox-prefix-cls}__label {
|
||||
color: @label-color;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -68,9 +68,9 @@
|
|||
@click.stop
|
||||
/>
|
||||
<span class="tiny-checkbox__inner">
|
||||
<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" />
|
||||
<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" />
|
||||
</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, iconYes } from '@opentiny/vue-icon'
|
||||
import { iconHalfselect, iconCheckedSur, iconCheck } from '@opentiny/vue-icon'
|
||||
import type { ICheckboxApi } from '@opentiny/vue-renderless/types/checkbox.type'
|
||||
import { AutoTip } from '@opentiny/vue-directive'
|
||||
export default defineComponent({
|
||||
|
|
@ -117,7 +117,8 @@ export default defineComponent({
|
|||
],
|
||||
components: {
|
||||
IconHalfselect: iconHalfselect(),
|
||||
IconCheckedSur: iconYes()
|
||||
IconCheckedSur: iconCheckedSur(),
|
||||
IconCheck: iconCheck()
|
||||
},
|
||||
setup(props, context) {
|
||||
return setup({ props, context, renderless, api }) as unknown as ICheckboxApi
|
||||
|
|
|
|||
Loading…
Reference in New Issue