Skip to content

Commit 0f99bca

Browse files
haoziqaqhaoziqaq
committed
feat(segmented-buttons): add error handling styles and validation logic
1 parent 0ac5a15 commit 0f99bca

10 files changed

Lines changed: 81 additions & 1 deletion

File tree

‎packages/varlet-ui/src/segmented-buttons/SegmentedButtons.vue‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div :class="n('wrap')">
3-
<div :role="multiple ? 'group' : 'radiogroup'" :class="n()">
3+
<div :role="multiple ? 'group' : 'radiogroup'" :class="[n(), hasError ? n('--error') : null]">
44
<template v-if="options.length">
55
<var-segmented-button
66
v-for="option in options"
@@ -210,6 +210,8 @@ export default defineComponent({
210210
validateWithTrigger('onChange')
211211
}
212212
213+
const hasError = computed(() => !!errorMessage.value)
214+
213215
// expose
214216
function validate() {
215217
return v(props.rules, getSafeModelValue())
@@ -227,6 +229,7 @@ export default defineComponent({
227229
classes,
228230
renderOptionLabel,
229231
getOptionValue,
232+
hasError,
230233
validate,
231234
reset,
232235
resetValidation,

‎packages/varlet-ui/src/segmented-buttons/__tests__/index.spec.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -544,11 +544,41 @@ test('form reset clears segmented buttons without emitting change', async () =>
544544

545545
expect(wrapper.vm.value).toBeUndefined()
546546
expect(onChange).toHaveBeenCalledTimes(0)
547+
expect(wrapper.find('.var-segmented-buttons').classes()).not.toContain('var-segmented-buttons--error')
547548
expect(wrapper.find('.var-form-details__error-message').exists()).toBeFalsy()
548549

549550
wrapper.unmount()
550551
})
551552

553+
test('validation applies error class to segmented buttons group only', async () => {
554+
const wrapper = mount(VarSegmentedButtons, {
555+
props: {
556+
modelValue: undefined,
557+
rules: [(v) => !!v || 'Please choose one option'],
558+
},
559+
slots: {
560+
default: `
561+
<var-segmented-button checked-value="day">Day</var-segmented-button>
562+
<var-segmented-button checked-value="week">Week</var-segmented-button>
563+
`,
564+
},
565+
global: {
566+
components: {
567+
[VarSegmentedButton.name]: VarSegmentedButton,
568+
},
569+
},
570+
})
571+
572+
const group = wrapper.find('.var-segmented-buttons')
573+
await expect(wrapper.vm.validate()).resolves.toBe(false)
574+
await delay(16)
575+
576+
expect(wrapper.find('.var-form-details__error-message').text()).toBe('Please choose one option')
577+
expect(group.classes()).toContain('var-segmented-buttons--error')
578+
579+
wrapper.unmount()
580+
})
581+
552582
test('segmented button checkmark slot', async () => {
553583
const wrapper = mount(VarSegmentedButtons, {
554584
props: {

‎packages/varlet-ui/src/segmented-buttons/docs/en-US.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -287,6 +287,9 @@ Here are the CSS variables used by the component. Styles can be customized using
287287
| `--segmented-buttons-border-color` | `var(--color-outline)` |
288288
| `--segmented-buttons-border-radius` | `4px` |
289289
| `--segmented-buttons-border-width` | `1px` |
290+
| `--segmented-buttons-error-border-color` | `var(--color-danger)` |
291+
| `--segmented-buttons-error-color` | `var(--color-danger)` |
292+
| `--segmented-buttons-error-checked-background` | `hsla(var(--hsl-danger), 0.12)` |
290293

291294
#### SegmentedButton Variables
292295

‎packages/varlet-ui/src/segmented-buttons/docs/zh-CN.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -287,6 +287,9 @@ function validate() {
287287
| `--segmented-buttons-border-color` | `var(--color-outline)` |
288288
| `--segmented-buttons-border-radius` | `4px` |
289289
| `--segmented-buttons-border-width` | `1px` |
290+
| `--segmented-buttons-error-border-color` | `var(--color-danger)` |
291+
| `--segmented-buttons-error-color` | `var(--color-danger)` |
292+
| `--segmented-buttons-error-checked-background` | `hsla(var(--hsl-danger), 0.12)` |
290293

291294
#### SegmentedButton Variables
292295

‎packages/varlet-ui/src/segmented-buttons/segmentedButtons.less‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22
--segmented-buttons-border-color: var(--color-outline);
33
--segmented-buttons-border-radius: 4px;
44
--segmented-buttons-border-width: 1px;
5+
--segmented-buttons-error-border-color: var(--color-danger);
6+
--segmented-buttons-error-color: var(--color-danger);
7+
--segmented-buttons-error-checked-background: hsla(var(--hsl-danger), 0.12);
58
}
69

710
.var-segmented-buttons {
@@ -22,4 +25,21 @@
2225
border-right: var(--segmented-buttons-border-width) solid var(--segmented-buttons-border-color);
2326
}
2427
}
28+
29+
&--error {
30+
border-color: var(--segmented-buttons-error-border-color);
31+
32+
.var-segmented-button {
33+
color: var(--segmented-buttons-error-color);
34+
35+
&:not(:last-child) {
36+
border-right-color: var(--segmented-buttons-error-border-color);
37+
}
38+
}
39+
40+
.var-segmented-button--checked {
41+
background-color: var(--segmented-buttons-error-checked-background);
42+
color: var(--segmented-buttons-error-color);
43+
}
44+
}
2545
}

‎packages/varlet-ui/src/themes/__tests__/__snapshots__/index.spec.js.snap‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -677,6 +677,9 @@ exports[`dark theme 1`] = `
677677
"--segmented-buttons-border-color": "var(--color-outline)",
678678
"--segmented-buttons-border-radius": "4px",
679679
"--segmented-buttons-border-width": "1px",
680+
"--segmented-buttons-error-border-color": "var(--color-danger)",
681+
"--segmented-buttons-error-checked-background": "hsla(var(--hsl-danger), 0.12)",
682+
"--segmented-buttons-error-color": "var(--color-danger)",
680683
"--select-arrow-size": "20px",
681684
"--select-chip-background-color": "#555",
682685
"--select-chip-margin": "5px 5px 0 0",
@@ -1631,6 +1634,9 @@ exports[`md3Dark theme 1`] = `
16311634
"--segmented-buttons-border-color": "#938F99",
16321635
"--segmented-buttons-border-radius": "100px",
16331636
"--segmented-buttons-border-width": "1px",
1637+
"--segmented-buttons-error-border-color": "var(--color-danger)",
1638+
"--segmented-buttons-error-checked-background": "hsla(var(--hsl-danger), 0.12)",
1639+
"--segmented-buttons-error-color": "var(--color-danger)",
16341640
"--select-arrow-size": "20px",
16351641
"--select-chip-background-color": "var(--color-surface-container-highest)",
16361642
"--select-chip-margin": "5px 5px 0 0",
@@ -2569,6 +2575,9 @@ exports[`md3Light theme 1`] = `
25692575
"--segmented-buttons-border-color": "#79747E",
25702576
"--segmented-buttons-border-radius": "100px",
25712577
"--segmented-buttons-border-width": "1px",
2578+
"--segmented-buttons-error-border-color": "var(--color-danger)",
2579+
"--segmented-buttons-error-checked-background": "hsla(var(--hsl-danger), 0.12)",
2580+
"--segmented-buttons-error-color": "var(--color-danger)",
25722581
"--select-arrow-size": "20px",
25732582
"--select-chip-background-color": "rgb(218, 212, 219)",
25742583
"--select-chip-margin": "5px 5px 0 0",

‎packages/varlet-ui/src/themes/dark/segmentedButtons.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,7 @@ export default {
22
'--segmented-buttons-border-color': 'var(--color-outline)',
33
'--segmented-buttons-border-radius': '4px',
44
'--segmented-buttons-border-width': '1px',
5+
'--segmented-buttons-error-border-color': 'var(--color-danger)',
6+
'--segmented-buttons-error-color': 'var(--color-danger)',
7+
'--segmented-buttons-error-checked-background': 'hsla(var(--hsl-danger), 0.12)',
58
}

‎packages/varlet-ui/src/themes/md3-dark/segmentedButtons.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,7 @@ export default {
22
'--segmented-buttons-border-color': '#938F99',
33
'--segmented-buttons-border-radius': '100px',
44
'--segmented-buttons-border-width': '1px',
5+
'--segmented-buttons-error-border-color': 'var(--color-danger)',
6+
'--segmented-buttons-error-color': 'var(--color-danger)',
7+
'--segmented-buttons-error-checked-background': 'hsla(var(--hsl-danger), 0.12)',
58
}

‎packages/varlet-ui/src/themes/md3-light/segmentedButtons.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,7 @@ export default {
22
'--segmented-buttons-border-color': '#79747E',
33
'--segmented-buttons-border-radius': '100px',
44
'--segmented-buttons-border-width': '1px',
5+
'--segmented-buttons-error-border-color': 'var(--color-danger)',
6+
'--segmented-buttons-error-color': 'var(--color-danger)',
7+
'--segmented-buttons-error-checked-background': 'hsla(var(--hsl-danger), 0.12)',
58
}

‎packages/varlet-ui/types/styleVars.d.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -608,6 +608,9 @@ interface BaseStyleVars {
608608
'--segmented-buttons-border-color'?: string
609609
'--segmented-buttons-border-radius'?: string
610610
'--segmented-buttons-border-width'?: string
611+
'--segmented-buttons-error-border-color'?: string
612+
'--segmented-buttons-error-color'?: string
613+
'--segmented-buttons-error-checked-background'?: string
611614
'--segmented-button-text-color'?: string
612615
'--segmented-button-checked-background'?: string
613616
'--segmented-button-checked-text-color'?: string

0 commit comments

Comments
 (0)