diff --git a/packages/components/checkbox/__tests__/checkbox.spec.ts b/packages/components/checkbox/__tests__/checkbox.spec.ts index 6668ff884..05023c9f4 100644 --- a/packages/components/checkbox/__tests__/checkbox.spec.ts +++ b/packages/components/checkbox/__tests__/checkbox.spec.ts @@ -93,11 +93,13 @@ describe('Checkbox', () => { props: { size: 'sm' }, }) - expect(wrapper.classes()).not.toContain('ix-button-sm') + expect(wrapper.classes()).not.toContain('ix-checkbox-sm') + expect(wrapper.classes()).not.toContain('ix-button-xs') await wrapper.setProps({ buttoned: true }) - expect(wrapper.classes()).toContain('ix-button-sm') + expect(wrapper.classes()).toContain('ix-checkbox-sm') + expect(wrapper.classes()).toContain('ix-button-xs') }) test('disabled work', async () => { diff --git a/packages/components/checkbox/__tests__/checkboxGroup.spec.ts b/packages/components/checkbox/__tests__/checkboxGroup.spec.ts index af67ec237..3b81ba851 100644 --- a/packages/components/checkbox/__tests__/checkboxGroup.spec.ts +++ b/packages/components/checkbox/__tests__/checkboxGroup.spec.ts @@ -116,6 +116,6 @@ describe('CheckboxGroup', () => { props: { buttoned: true, size: 'sm' }, }) - expect(wrapper.findAll('.ix-button-sm').length).toBe(3) + expect(wrapper.findAll('.ix-checkbox-sm').length).toBe(3) }) }) diff --git a/packages/components/checkbox/demo/Disabled.vue b/packages/components/checkbox/demo/Disabled.vue index 8556821e0..e2d8c25e7 100644 --- a/packages/components/checkbox/demo/Disabled.vue +++ b/packages/components/checkbox/demo/Disabled.vue @@ -1,12 +1,8 @@ - - diff --git a/packages/components/checkbox/src/Checkbox.tsx b/packages/components/checkbox/src/Checkbox.tsx index 806315635..9aff7e3d4 100644 --- a/packages/components/checkbox/src/Checkbox.tsx +++ b/packages/components/checkbox/src/Checkbox.tsx @@ -51,10 +51,7 @@ export default defineComponent({ return checkboxGroup ? key : undefined }) const isButtoned = computed(() => props.buttoned ?? checkboxGroup?.props.buttoned ?? false) - const mergedSize = computed(() => { - const size = props.size ?? checkboxGroup?.props.size ?? formContext?.size.value ?? config.size - return buttonSizeMap[size] - }) + const size = computed(() => props.size ?? checkboxGroup?.props.size ?? formContext?.size.value ?? config.size) const { isChecked, isDisabled, isFocused, handleChange, handleBlur, handleFocus } = useCheckbox( props, checkboxGroup, @@ -64,16 +61,18 @@ export default defineComponent({ const { indeterminate } = props const buttoned = isButtoned.value const prefixCls = mergedPrefixCls.value + const commonPrefixCls = common.prefixCls const classes = { [prefixCls]: true, [`${prefixCls}-checked`]: !indeterminate && isChecked.value, [`${prefixCls}-disabled`]: isDisabled.value, [`${prefixCls}-focused`]: isFocused.value, [`${prefixCls}-indeterminate`]: indeterminate, - [`${common.prefixCls}-button`]: buttoned, - [`${common.prefixCls}-button-default`]: buttoned, - [`${common.prefixCls}-button-disabled`]: buttoned && isDisabled.value, - [`${common.prefixCls}-button-${mergedSize.value}`]: buttoned, + [`${prefixCls}-${size.value}`]: buttoned, + [`${commonPrefixCls}-button`]: buttoned, + [`${commonPrefixCls}-button-default`]: buttoned, + [`${commonPrefixCls}-button-disabled`]: buttoned && isDisabled.value, + [`${commonPrefixCls}-button-${buttonSizeMap[size.value]}`]: buttoned, } return normalizeClass([classes, attrs.class]) }) diff --git a/packages/components/checkbox/style/index.less b/packages/components/checkbox/style/index.less index 70869a672..9539b8d4c 100644 --- a/packages/components/checkbox/style/index.less +++ b/packages/components/checkbox/style/index.less @@ -1,5 +1,4 @@ @import '../../style/mixins/reset.less'; -@import './mixin.less'; .@{checkbox-prefix} { &:not(.@{button-prefix}) { @@ -27,7 +26,6 @@ &-input { position: relative; line-height: 1; - outline: none; cursor: pointer; &-inner { @@ -46,6 +44,7 @@ display: block; width: 16px; height: 16px; + background-color: @checkbox-background-color; border: 1px solid @checkbox-border-color; border-radius: @checkbox-border-radius; transition: all var(--ix-transition-duration-fast) var(--ix-ease-in-out); @@ -76,6 +75,14 @@ } } + &:hover &-input-box { + border-color: @checkbox-border-color-hover; + } + + &-focused &-input-box { + border-color: @checkbox-border-color-focus; + } + &-checked { .@{checkbox-prefix}-input { &-box { @@ -95,6 +102,7 @@ &.@{button-prefix} { z-index: 2; + color: @checkbox-color-active; border-color: @checkbox-color-active; } } @@ -115,14 +123,6 @@ } } - &:hover &-input-box { - border-color: @checkbox-border-color-hover; - } - - &-focused &-input-box { - border-color: @checkbox-border-color-focus; - } - &&-disabled { cursor: not-allowed; color: @checkbox-color-disabled; @@ -136,10 +136,10 @@ border-color: @checkbox-color-disabled; } } + } - &-tick { - border-top-color: @checkbox-color-disabled; - } + &.@{checkbox-prefix}-checked .@{checkbox-prefix}-input-tick { + border-top-color: @checkbox-color-disabled; } &.@{checkbox-prefix}-indeterminate .@{checkbox-prefix}-input-box { @@ -150,7 +150,7 @@ &.@{button-prefix} { z-index: 0; - border-color: @button-border-color; + border-color: @checkbox-border-color; } } diff --git a/packages/components/checkbox/style/mixin.less b/packages/components/checkbox/style/mixin.less deleted file mode 100644 index 54bb54c47..000000000 --- a/packages/components/checkbox/style/mixin.less +++ /dev/null @@ -1,7 +0,0 @@ -.checkbox-size(@height, @min-width, @font-size, @padding-horizontal) { - height: @height; - min-width: @min-width; - line-height: @height - @checkbox-border-width * 2; - font-size: @font-size; - padding: 0 @padding-horizontal; -} diff --git a/packages/components/checkbox/style/themes/default.less b/packages/components/checkbox/style/themes/default.less index ee11cbbb7..508da6142 100644 --- a/packages/components/checkbox/style/themes/default.less +++ b/packages/components/checkbox/style/themes/default.less @@ -1,5 +1,4 @@ @import '../../../style/themes/default.less'; -@import '../../../button/style/themes/default.variable.less'; @import '../../../form/style/themes/default.variable.less'; @import './default.variable.less'; diff --git a/packages/components/checkbox/style/themes/seer.less b/packages/components/checkbox/style/themes/seer.less index f74d707e0..1cafc81ec 100644 --- a/packages/components/checkbox/style/themes/seer.less +++ b/packages/components/checkbox/style/themes/seer.less @@ -1,5 +1,4 @@ @import '../../../style/themes/seer.less'; -@import '../../../button/style/themes/seer.variable.less'; @import '../../../form/style/themes/seer.variable.less'; @import './seer.variable.less'; diff --git a/packages/components/radio/__tests__/__snapshots__/radioGroup.spec.ts.snap b/packages/components/radio/__tests__/__snapshots__/radioGroup.spec.ts.snap index 3e1320093..930b3b835 100644 --- a/packages/components/radio/__tests__/__snapshots__/radioGroup.spec.ts.snap +++ b/packages/components/radio/__tests__/__snapshots__/radioGroup.spec.ts.snap @@ -1,3 +1,10 @@ // Vitest Snapshot v1 -exports[`RadioGroup > render work 1`] = `"
"`; +exports[`RadioGroup > render work 1`] = ` +"
+
+
+
+
+
" +`; diff --git a/packages/components/radio/__tests__/radio.spec.ts b/packages/components/radio/__tests__/radio.spec.ts index 3751f9b66..4a8c0cd59 100644 --- a/packages/components/radio/__tests__/radio.spec.ts +++ b/packages/components/radio/__tests__/radio.spec.ts @@ -43,11 +43,11 @@ describe('Radio', () => { test('buttoned work', async () => { const wrapper = RadioMount({ props: { buttoned: true } }) - expect(wrapper.classes()).toContain('ix-radio-button') + expect(wrapper.classes()).toContain('ix-button') await wrapper.setProps({ buttoned: false }) - expect(wrapper.classes()).not.toContain('ix-radio-button') + expect(wrapper.classes()).not.toContain('ix-button') }) test('disabled work', async () => { @@ -81,17 +81,21 @@ describe('Radio', () => { }) test('mode work', async () => { - const wrapper = RadioMount({ props: { buttoned: true, mode: 'primary' } }) + const wrapper = RadioMount({ props: { checked: true, buttoned: true, mode: 'primary' } }) - expect(wrapper.classes()).toContain('ix-radio-primary') + expect(wrapper.classes()).toContain('ix-button-primary') await wrapper.setProps({ mode: 'default' }) - expect(wrapper.classes()).toContain('ix-radio-default') + expect(wrapper.classes()).toContain('ix-button-default') - await wrapper.setProps({ buttoned: false, mode: 'primary' }) + await wrapper.setProps({ checked: false, mode: 'primary' }) - expect(wrapper.classes()).not.toContain('ix-radio-primary') + expect(wrapper.classes()).not.toContain('ix-button-primary') + + await wrapper.setProps({ buttoned: false }) + + expect(wrapper.classes()).not.toContain('ix-button-default') }) test('size work', async () => { diff --git a/packages/components/radio/__tests__/radioGroup.spec.ts b/packages/components/radio/__tests__/radioGroup.spec.ts index 169819da6..b48e9046d 100644 --- a/packages/components/radio/__tests__/radioGroup.spec.ts +++ b/packages/components/radio/__tests__/radioGroup.spec.ts @@ -48,11 +48,11 @@ describe('RadioGroup', () => { test('buttoned work', async () => { const wrapper = RadioGroupMount({ props: { buttoned: true } }) - expect(wrapper.findAll('.ix-radio-button').length).toBe(4) + expect(wrapper.findAll('.ix-button').length).toBe(4) await wrapper.setProps({ buttoned: false }) - expect(wrapper.findAll('.ix-radio-button').length).toBe(0) + expect(wrapper.findAll('.ix-button').length).toBe(0) }) test('disabled work', async () => { @@ -65,17 +65,6 @@ describe('RadioGroup', () => { expect(wrapper.findAll('.ix-radio-disabled').length).toBe(0) }) - test('gap work', async () => { - const wrapper = RadioGroupMount() - - expect(wrapper.classes()).not.toContain('ix-radio-group-with-gap') - - await wrapper.setProps({ gap: 8 }) - - expect(wrapper.classes()).toContain('ix-radio-group-with-gap') - expect((wrapper.element as HTMLElement).style.gap).toEqual('8px') - }) - test('name work', async () => { const wrapper = RadioGroupMount({ props: { name: 'city' } }) @@ -87,13 +76,14 @@ describe('RadioGroup', () => { }) test('mode work', async () => { - const wrapper = RadioGroupMount({ props: { mode: 'primary', buttoned: true } }) + const wrapper = RadioGroupMount({ props: { value: 'a', mode: 'primary', buttoned: true } }) - expect(wrapper.findAll('.ix-radio-primary').length).toBe(4) + expect(wrapper.findAll('.ix-button-primary').length).toBe(1) + expect(wrapper.findAll('.ix-button-default').length).toBe(3) await wrapper.setProps({ mode: 'default' }) - expect(wrapper.findAll('.ix-radio-default').length).toBe(4) + expect(wrapper.findAll('.ix-button-default').length).toBe(4) }) test('dataSource work', async () => { diff --git a/packages/components/radio/demo/Disabled.vue b/packages/components/radio/demo/Disabled.vue index 505954eea..b96e23bc5 100644 --- a/packages/components/radio/demo/Disabled.vue +++ b/packages/components/radio/demo/Disabled.vue @@ -1,12 +1,8 @@ - - diff --git a/packages/components/radio/docs/Api.zh.md b/packages/components/radio/docs/Api.zh.md index e2445c2cd..676e4950a 100644 --- a/packages/components/radio/docs/Api.zh.md +++ b/packages/components/radio/docs/Api.zh.md @@ -29,6 +29,8 @@ #### RadioGroupProps + 除以下表格之外还支持 `Space` 组件的[所有属性](/components/space/zh?tab=api#SpaceProps)。 + | 名称 | 说明 | 类型 | 默认值 | 全局配置 | 备注 | | --- | --- | --- | --- | --- | --- | | `control` | 控件控制器 | `string \| number \| AbstractControl` | - | - | 配合 `@idux/cdk/forms` 使用, 参考 [Form](/components/form/zh) | @@ -36,11 +38,10 @@ | `buttoned` | 设置单选框组内 `IxRadio` 的 `buttoned` | `boolean` | - | - | - | | `dataSource` | 以配置形式设置子元素 | `RadioData[]`| - | 优先级高于 `default` 插槽 | | | `disabled` | 设置单选框组内 `IxRadio` 的 `disabled` | `boolean` | - | - | 使用 `control` 时，此配置无效 | -| `gap` | 设置单选框组内的 `IxRadio` 的间隔 | `number \| string` | - | - | - | +| `gap` | 设置单选框组内的 `IxRadio` 的间隔 | `number \| string` | - | - | 也就是 `Space` 的 `size`, 默认为 `8`, 为按钮组时默认为 `0` | | `name` | 设置单选框组内的 `IxRadio` 的原生 `name` 属性 | `string` | - | - | - | | `mode` | 设置单选框组内 `IxRadio` 的 `mode` | `'default' \| 'primary'`| - | - | - | | `size` | 设置单选框组内 `IxRadio` 的 `size` | `'sm' \| 'md' \| 'lg'`| `'md'` | - | - | -| `vertical` | 设置组内排列方向 | `boolean` | - | - | 默认为水平排列方向，可设`true`为垂直排列 | | `onChange` | 选中值发生变化后的回调 | `(value: any, oldValue: any) => void`| - | - | - | ```ts diff --git a/packages/components/radio/docs/Index.zh.md b/packages/components/radio/docs/Index.zh.md index 47417bd4e..84a185152 100644 --- a/packages/components/radio/docs/Index.zh.md +++ b/packages/components/radio/docs/Index.zh.md @@ -3,5 +3,6 @@ category: components type: 数据录入 title: Radio subtitle: 单选框 +theme: true --- diff --git a/packages/components/radio/src/Radio.tsx b/packages/components/radio/src/Radio.tsx index e8feb31a3..24f072f5d 100644 --- a/packages/components/radio/src/Radio.tsx +++ b/packages/components/radio/src/Radio.tsx @@ -15,11 +15,17 @@ import { useAccessorAndControl } from '@idux/cdk/forms' import { callEmit } from '@idux/cdk/utils' import { useGlobalConfig } from '@idux/components/config' import { FORM_TOKEN, useFormElement, useFormItemRegister } from '@idux/components/form' -import { useKey } from '@idux/components/utils' +import { convertStringVNode, useKey } from '@idux/components/utils' import { type RadioGroupContext, radioGroupToken } from './token' import { type RadioProps, radioProps } from './types' +const buttonSizeMap = { + sm: 'xs', + md: 'sm', + lg: 'md', +} + export default defineComponent({ name: 'IxRadio', inheritAttrs: false, @@ -55,25 +61,30 @@ export default defineComponent({ ) const classes = computed(() => { const buttoned = isButtoned.value + const checked = isChecked.value + const isPrimary = buttoned && checked && mode.value === 'primary' const prefixCls = mergedPrefixCls.value + const commonPrefixCls = common.prefixCls const classes = { [prefixCls]: true, - [`${prefixCls}-button`]: buttoned, [`${prefixCls}-checked`]: isChecked.value, [`${prefixCls}-disabled`]: isDisabled.value, [`${prefixCls}-focused`]: isFocused.value, - [`${prefixCls}-${mode.value}`]: buttoned, [`${prefixCls}-${size.value}`]: buttoned, + [`${commonPrefixCls}-button`]: buttoned, + [`${commonPrefixCls}-button-default`]: buttoned && !isPrimary, + [`${commonPrefixCls}-button-primary`]: isPrimary, + [`${commonPrefixCls}-button-disabled`]: buttoned && isDisabled.value, + [`${commonPrefixCls}-button-${buttonSizeMap[size.value]}`]: buttoned, } return normalizeClass([classes, attrs.class]) }) return () => { - const prefixCls = mergedPrefixCls.value const { autofocus, label } = props - const labelNode = slots.default?.() ?? label - const labelWrapper = labelNode && {labelNode} const { class: className, style, type, tabindex, ...restAttrs } = attrs + const prefixCls = mergedPrefixCls.value + const labelNode = convertStringVNode(slots.default, label) return ( ) } diff --git a/packages/components/radio/src/RadioGroup.tsx b/packages/components/radio/src/RadioGroup.tsx index 01110cc61..97e7ecd3d 100644 --- a/packages/components/radio/src/RadioGroup.tsx +++ b/packages/components/radio/src/RadioGroup.tsx @@ -7,10 +7,7 @@ import { type VNodeChild, computed, defineComponent, normalizeClass, provide } from 'vue' -import { isNil } from 'lodash-es' - import { useAccessorAndControl } from '@idux/cdk/forms' -import { convertCssPixel } from '@idux/cdk/utils' import { useGlobalConfig } from '@idux/components/config' import { useFormItemRegister } from '@idux/components/form' import { IxSpace } from '@idux/components/space' @@ -23,30 +20,29 @@ export default defineComponent({ name: 'IxRadioGroup', props: radioGroupProps, setup(props, { slots }) { + const common = useGlobalConfig('common') + const mergedPrefixCls = computed(() => `${common.prefixCls}-radio-group`) const { accessor, control } = useAccessorAndControl() useFormItemRegister(control) - provide(radioGroupToken, { props, accessor }) - const common = useGlobalConfig('common') - const mergedPrefixCls = computed(() => `${common.prefixCls}-radio-group`) + const mergedGap = computed(() => { + return props.gap ?? (props.buttoned ? 0 : 8) + }) const classes = computed(() => { - const { gap } = props + const { buttoned } = props + const gap = mergedGap.value const prefixCls = mergedPrefixCls.value return normalizeClass({ [prefixCls]: true, - [`${prefixCls}-with-gap`]: !isNil(gap), + [`${common.prefixCls}-button-group`]: buttoned, + [`${common.prefixCls}-button-group-compact`]: buttoned && (!gap || gap === '0'), }) }) - const style = computed(() => { - const { gap } = props - return gap != null ? `gap: ${convertCssPixel(gap)};` : undefined - }) - return () => { - const { dataSource, vertical } = props + const { dataSource } = props let children: VNodeChild[] | undefined if (dataSource) { children = dataSource.map(item => { @@ -58,9 +54,9 @@ export default defineComponent({ children = slots.default ? slots.default() : undefined } return ( -
- {vertical ? {children} : children} -
+ + {children} + ) } }, diff --git a/packages/components/radio/src/types.ts b/packages/components/radio/src/types.ts index 75eb2ab44..f0e01d7b2 100644 --- a/packages/components/radio/src/types.ts +++ b/packages/components/radio/src/types.ts @@ -8,11 +8,11 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ import type { AbstractControl } from '@idux/cdk/forms' +import type { ExtractInnerPropTypes, ExtractPublicPropTypes, MaybeArray, VKey } from '@idux/cdk/utils' +import type { FormSize } from '@idux/components/form' +import type { SpaceProps } from '@idux/components/space' import type { DefineComponent, HTMLAttributes, LabelHTMLAttributes, PropType } from 'vue' -import { type ExtractInnerPropTypes, type ExtractPublicPropTypes, MaybeArray, type VKey } from '@idux/cdk/utils' -import { type FormSize } from '@idux/components/form' - export const radioProps = { control: { type: [String, Number, Object] as PropType, default: undefined }, checked: { type: Boolean, default: undefined }, @@ -55,7 +55,6 @@ export const radioGroupProps = { name: { type: String, default: undefined }, mode: { type: String as PropType, default: undefined }, size: { type: String as PropType, default: 'md' }, - vertical: { type: Boolean, default: false }, // events 'onUpdate:value': { type: [Function, Array] as PropType void>> }, @@ -63,7 +62,7 @@ export const radioGroupProps = { } as const export type RadioGroupProps = ExtractInnerPropTypes -export type RadioGroupPublicProps = ExtractPublicPropTypes +export type RadioGroupPublicProps = ExtractPublicPropTypes & Omit export type RadioGroupComponent = DefineComponent< Omit & RadioGroupPublicProps > diff --git a/packages/components/radio/style/index.less b/packages/components/radio/style/index.less index 3d9e2f12b..93365e2ff 100644 --- a/packages/components/radio/style/index.less +++ b/packages/components/radio/style/index.less @@ -1,22 +1,26 @@ @import '../../style/mixins/reset.less'; -@import './mixin.less'; .@{radio-prefix} { - .reset-component(); - - position: relative; - display: inline-flex; - align-items: center; - font-size: @radio-font-size-md; - line-height: @radio-line-height; - color: @radio-color; - cursor: pointer; + &:not(.@{button-prefix}) { + .reset-component-new(); + + display: inline-flex; + align-items: center; + line-height: unset; + cursor: pointer; + + &::after { + display: inline-block; + width: 0; + overflow: hidden; + content: '\a0'; + } - &:not(&-button)::after { - display: inline-block; - width: 0; - overflow: hidden; - content: '\a0'; + .@{radio-prefix}-label { + font-size: @radio-font-size; + line-height: calc(@radio-font-size + var(--ix-line-height-gutter)); + padding: @radio-label-padding; + } } &-input { @@ -38,233 +42,85 @@ &-box { position: relative; display: block; - width: @radio-box-size; - height: @radio-box-size; + width: 16px; + height: 16px; background-color: @radio-background-color; - border: @radio-border-width @radio-border-style @radio-border-color; - border-radius: @radio-box-border-radius; - transition: all @transition-duration-base @ease-in-out; + border: 1px solid @radio-border-color; + border-radius: 50%; + transition: all var(--ix-transition-duration-fast) var(--ix-ease-in-out); &::after { position: absolute; - top: ((@radio-box-size - @radio-dot-size) / 2) - @radio-border-width; - left: ((@radio-box-size - @radio-dot-size) / 2) - @radio-border-width; - width: @radio-dot-size; - height: @radio-dot-size; - background-color: @radio-active-color; - border-radius: @radio-dot-size; + top: 3px; + left: 3px; + width: 8px; + height: 8px; + border-radius: 50%; transform: scale(0); opacity: 0; - transition: all @transition-duration-base @ease-in-out; + transition: all var(--ix-transition-duration-fast) var(--ix-ease-in-out); content: ''; } } } - &-label { - padding: @radio-label-padding; - } - - &:hover:not(&-disabled) &-input-box { - border-color: @radio-hover-color; + &:hover &-input-box { + border-color: @radio-border-color-hover; } - &&-focused:not(&-disabled) &-input-box { - border-color: @radio-focus-color; + &-focused &-input-box { + border-color: @radio-border-color-focus; } &-checked { - .@{radio-prefix} { - &-input { - &-box { - border-color: @radio-active-color; - - &::after { - transform: scale(1); - opacity: 1; - transition: all @transition-duration-base @ease-in-out; - } - } - } - } - } - - &-disabled { - cursor: not-allowed; - color: @radio-disabled-color; - .@{radio-prefix}-input { - &-inner { - cursor: not-allowed; - } - &-box { - background-color: @radio-disabled-background-color; - border-color: @radio-disabled-border-color; + border-color: @radio-color-active; &::after { - background-color: if((@theme = seer), @color-graphite-l10, @radio-disabled-border-color); + opacity: 1; + transform: scale(1); + background-color: @radio-color-active; } } } - } -} - -.@{radio-prefix}-button { - display: inline-block; - text-align: center; - background-color: @radio-background-color; - border: @radio-border-width @radio-border-style @radio-border-color; - border-radius: @radio-border-radius; - transition: all @transition-duration-base @ease-in-out; - .@{radio-prefix} { - &-input { - position: absolute; - top: 0; - left: 0; - z-index: -1; - width: 100%; - height: 100%; - - &-inner { - width: 0; - height: 0; - pointer-events: none; - } + &.@{button-prefix} { + z-index: 2; } - &-label { - padding: 0; + &.@{button-prefix}-default { + color: @radio-color-active; + border-color: @radio-color-active; } } - &:not(.@{radio-prefix}-disabled):hover { - color: @radio-hover-color; - } - - &:not(.@{radio-prefix}-disabled).@{radio-prefix}-focused { - color: @radio-focus-color; - } - - &.@{radio-prefix}-checked { - z-index: 1; - color: @radio-active-color; - border-color: @radio-active-color; - - &:not(.@{radio-prefix}-disabled):hover { - border-color: @radio-hover-color; - } - } + &&-disabled { + cursor: not-allowed; + color: @radio-color-disabled; - &.@{radio-prefix}-primary.@{radio-prefix}-checked { - color: @radio-background-color; - background: @radio-active-color; - border-color: @radio-active-color; + .@{radio-prefix}-input { + &-box { + background-color: @radio-background-color-disabled; + border-color: @radio-border-color; - &:not(.@{radio-prefix}-disabled):hover { - background: @radio-hover-color; - border-color: @radio-hover-color; + &::after { + background-color: @radio-color-disabled; + } + } } - } - - &.@{radio-prefix}-disabled.@{radio-prefix}-checked { - color: @radio-disabled-color; - background-color: @radio-disabled-background-color; - border-color: @radio-border-color; - } - &.@{radio-prefix}-sm { - .radio-size(@radio-height-sm, @radio-min-width-sm, @radio-font-size-sm, @radio-padding-horizontal-sm); - } - - &.@{radio-prefix}-md { - .radio-size(@radio-height-md, @radio-min-width-md, @radio-font-size-md, @radio-padding-horizontal-md); - } - - &.@{radio-prefix}-lg { - .radio-size(@radio-height-lg, @radio-min-width-lg, @radio-font-size-lg, @radio-padding-horizontal-lg); - } -} - -.@{radio-group-prefix} { - display: inline-flex; - align-items: center; - flex-wrap: wrap; - - .@{radio-prefix} { - &:not(&-button):not(:last-child) { - margin-right: @radio-group-item-margin-right; + &.@{button-prefix} { + z-index: 0; + border-color: @radio-border-color; } - &-button { - border-right-width: 0; - border-radius: 0; - - &:first-child { - border-radius: @radio-border-radius 0 0 @radio-border-radius; - } - - &:last-child { - border-radius: 0 @radio-border-radius @radio-border-radius 0; - border-right-width: @radio-border-width; - } - - &:not(:last-child)::before { - position: absolute; - top: -@radio-border-width; - right: -@radio-border-width; - display: block; - box-sizing: content-box; - width: @radio-border-width; - height: 100%; - padding: @radio-border-width 0; - background-color: @radio-border-color; - transition: all @transition-duration-base @ease-in-out; - content: ''; - } - - &.@{radio-prefix}-checked:not(.@{radio-prefix}-disabled) { - &::before { - background-color: @radio-active-color; - } - } + &.@{button-prefix}.@{radio-prefix}-checked { + background-color: @radio-background-color-disabled; } } - &-no-gap { - .@{radio-prefix} { - &:not(&-button):not(:last-child) { - margin-right: @radio-group-item-margin-right; - } - - &-button { - border-right-width: 0; - border-radius: 0; - - &:first-child { - border-radius: @radio-border-radius 0 0 @radio-border-radius; - } - - &:last-child { - border-radius: 0 @radio-border-radius @radio-border-radius 0; - border-right-width: @radio-border-width; - } - - &:first-child:last-child { - border-radius: @radio-border-radius; - } - - &.@{radio-prefix}-checked:not(.@{radio-prefix}-disabled) { - & + .@{radio-prefix}-button { - border-left-color: @radio-active-color; - } - - &:hover + .@{radio-prefix}-button { - border-left-color: @radio-hover-color; - } - } - } - } + &-group { + line-height: 0; } } diff --git a/packages/components/radio/style/mixin.less b/packages/components/radio/style/mixin.less deleted file mode 100644 index 5d994e1ed..000000000 --- a/packages/components/radio/style/mixin.less +++ /dev/null @@ -1,7 +0,0 @@ -.radio-size(@height, @min-width, @font-size, @padding-horizontal) { - height: @height; - min-width: @min-width; - line-height: @height - @radio-border-width * 2; - font-size: @font-size; - padding: 0 @padding-horizontal; -} diff --git a/packages/components/radio/style/themes/default.ts b/packages/components/radio/style/themes/default.ts index 47fe656f7..b49ca87ac 100644 --- a/packages/components/radio/style/themes/default.ts +++ b/packages/components/radio/style/themes/default.ts @@ -1,3 +1,4 @@ // style dependencies +import '@idux/components/button/style/themes/default' import './default.less' diff --git a/packages/components/radio/style/themes/default.variable.less b/packages/components/radio/style/themes/default.variable.less index 390ffddc6..e1b1a5241 100644 --- a/packages/components/radio/style/themes/default.variable.less +++ b/packages/components/radio/style/themes/default.variable.less @@ -1,35 +1,12 @@ -@radio-font-size-sm: @form-font-size-sm; -@radio-font-size-md: @form-font-size-md; -@radio-font-size-lg: @form-font-size-lg; -@radio-line-height: @form-line-height; -@radio-height-sm: @form-height-sm; -@radio-height-md: @form-height-md; -@radio-height-lg: @form-height-lg; -@radio-min-width-sm: @width-xs; -@radio-min-width-md: @width-sm; -@radio-min-width-lg: @width-md; -@radio-padding-horizontal-sm: @spacing-sm; -@radio-padding-horizontal-md: @spacing-md; -@radio-padding-horizontal-lg: @spacing-lg; +@radio-font-size: var(--ix-font-size-md); +@radio-color: var(--ix-text-color); +@radio-color-active: var(--ix-color-primary); +@radio-color-disabled: var(--ix-text-color-disabled); +@radio-background-color: var(--ix-background-color); +@radio-background-color-disabled: var(--ix-background-color-deep); +@radio-border-color: var(--ix-border-color); +@radio-border-color-hover: var(--ix-color-primary); +@radio-border-color-focus: var(--ix-color-primary); +@radio-border-radius: var(--ix-border-radius-md); -@radio-border-width: @form-border-width; -@radio-border-style: @form-border-style; -@radio-border-color: @form-border-color; -@radio-border-radius: @border-radius-sm; - -@radio-color: @form-color; -@radio-background-color: @form-background-color; -@radio-hover-color: @form-hover-color; -@radio-active-color: @form-active-color; -@radio-focus-color: @form-focus-color; -@radio-focus-box-shadow: @form-focus-box-shadow; -@radio-disabled-color: @form-disabled-color; -@radio-disabled-border-color: @form-disabled-border-color; -@radio-disabled-background-color: @form-disabled-background-color; - -@radio-input-top: 0.2em; -@radio-box-size: 16px; -@radio-box-border-radius: @border-radius-full; -@radio-dot-size: @radio-box-size - 8px; -@radio-label-padding: 0 @spacing-sm; -@radio-group-item-margin-right: @spacing-sm; +@radio-label-padding: 0 8px; diff --git a/packages/components/radio/style/themes/seer.ts b/packages/components/radio/style/themes/seer.ts index 8f61ab076..68a0ce6ca 100644 --- a/packages/components/radio/style/themes/seer.ts +++ b/packages/components/radio/style/themes/seer.ts @@ -1,3 +1,4 @@ // style dependencies +import '@idux/components/button/style/themes/seer' import './seer.less' diff --git a/packages/components/radio/style/themes/seer.variable.less b/packages/components/radio/style/themes/seer.variable.less index 02ec500d3..d0af49b36 100644 --- a/packages/components/radio/style/themes/seer.variable.less +++ b/packages/components/radio/style/themes/seer.variable.less @@ -1,6 +1,6 @@ @import './default.variable.less'; -@radio-font-size-md: @form-font-size-sm; +@radio-font-size: var(--ix-font-size-sm); +@radio-border-radius: var(--ix-border-radius-sm); -@radio-hover-color: @form-active-color; -@radio-focus-color: @form-active-color; +@radio-label-padding: 0 4px;