117 lines
3.4 KiB
TypeScript
117 lines
3.4 KiB
TypeScript
import { computed } from 'vue'
|
|
import { useComponentColor, useNamespace } from '../../../../hooks'
|
|
import { isEmpty } from '../../../../utils'
|
|
import { useCheckboxCommonProps } from './use-checkbox-common-props'
|
|
|
|
import type { CSSProperties } from 'vue'
|
|
import type { CheckboxProps } from '../checkbox'
|
|
|
|
type selectedClass = (selected: boolean) => string
|
|
type selectedStyle = (selected: boolean) => CSSProperties
|
|
|
|
export const useCheckboxCustomStyle = (props: CheckboxProps) => {
|
|
const ns = useNamespace('checkbox')
|
|
|
|
const { activeColor, disabled, maxDisabled, size, border, checkedShape } =
|
|
useCheckboxCommonProps(props)
|
|
|
|
// 解析颜色
|
|
const [bgColorClass, bgColorStyle] = useComponentColor(activeColor, 'bg')
|
|
const [textColorClass, textColorStyle] = useComponentColor(
|
|
activeColor,
|
|
'text'
|
|
)
|
|
const [borderColorClass, borderColorStyle] = useComponentColor(
|
|
activeColor,
|
|
'border'
|
|
)
|
|
|
|
// 复选框所属类
|
|
const checkboxClass = computed<selectedClass>(() => {
|
|
return (selected: boolean) => {
|
|
const cls: string[] = [ns.b()]
|
|
|
|
// 禁止选择
|
|
if (disabled.value || maxDisabled.value) cls.push(ns.m('disabled'))
|
|
|
|
// 设置尺寸
|
|
if (size.value) cls.push(ns.m(size.value))
|
|
|
|
// 激活样式
|
|
if (selected) {
|
|
cls.push(ns.m('selected'))
|
|
if (textColorClass.value) cls.push(textColorClass.value)
|
|
}
|
|
|
|
// 设置激活时的边框颜色
|
|
if (border.value) {
|
|
cls.push('tn-border')
|
|
if (selected && borderColorClass.value) cls.push(borderColorClass.value)
|
|
else cls.push('tn-gray-disabled_border')
|
|
} else {
|
|
cls.push(ns.m('no-border'))
|
|
}
|
|
|
|
if (props.customClass) cls.push(props.customClass)
|
|
return cls.join(' ')
|
|
}
|
|
})
|
|
|
|
// 复选框所属样式
|
|
const checkboxStyle = computed<selectedStyle>(() => {
|
|
return (selected: boolean) => {
|
|
const style: CSSProperties = {}
|
|
|
|
// 设置激活时的颜色
|
|
if (selected) {
|
|
if (border.value && !borderColorClass.value)
|
|
style.borderColor =
|
|
borderColorStyle.value || 'var(--tn-color-primary)'
|
|
if (!textColorClass.value) {
|
|
style.color = textColorStyle.value || 'var(--tn-color-primary)'
|
|
}
|
|
}
|
|
|
|
if (!isEmpty(props.customStyle)) Object.assign(style, props.customStyle)
|
|
return style
|
|
}
|
|
})
|
|
|
|
// 复选框选框所属类
|
|
const checkboxCheckedBoxClass = computed<selectedClass>(() => {
|
|
return (selected: boolean) => {
|
|
const cls: string[] = [ns.e('checked-box')]
|
|
|
|
// 复选框选框的形状
|
|
if (checkedShape.value) cls.push(ns.em('checked-box', checkedShape.value))
|
|
|
|
if (selected || props.indeterminate) {
|
|
cls.push(ns.em('checked-box', 'selected'))
|
|
if (bgColorClass.value) cls.push(bgColorClass.value)
|
|
} else {
|
|
cls.push('tn-border tn-gray-disabled_border')
|
|
}
|
|
return cls.join(' ')
|
|
}
|
|
})
|
|
|
|
// 复选框选框所属样式
|
|
const checkboxCheckedBoxStyle = computed<selectedStyle>(() => {
|
|
return (selected: boolean) => {
|
|
const style: CSSProperties = {}
|
|
if ((selected || props.indeterminate) && !bgColorClass.value) {
|
|
style.backgroundColor = bgColorStyle.value || 'var(--tn-color-primary)'
|
|
}
|
|
return style
|
|
}
|
|
})
|
|
|
|
return {
|
|
ns,
|
|
checkboxClass,
|
|
checkboxStyle,
|
|
checkboxCheckedBoxClass,
|
|
checkboxCheckedBoxStyle,
|
|
}
|
|
}
|