Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 4aaddbe

Browse files
dwgraydwgray
authored
docs(BFormRating): Parity pass (#2749)
1 parent bf8f577 commit 4aaddbe

File tree

4 files changed

+55
-59
lines changed

4 files changed

+55
-59
lines changed

‎apps/docs/src/data/components/FormRating.data.ts

Lines changed: 41 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,22 @@ export default {
1515
description:
1616
'CSS color to use instead of variant. Accepts either a HEX or RGB/RGBA string',
1717
},
18+
inline: {
19+
type: 'boolean',
20+
default: 'false',
21+
description:
22+
'When `true` renders as an inline element rather than a block (100% width) element',
23+
},
1824
modelValue: {
1925
type: 'number',
2026
default: 0,
2127
description: 'The current rating value (supports v-model two-way binding).',
2228
},
29+
noBorder: {
30+
type: 'boolean',
31+
default: 'false',
32+
description: 'When `true`, removes the border around the rating component',
33+
},
2334
precision: {
2435
type: 'number',
2536
default: undefined,
@@ -31,7 +42,12 @@ export default {
3142
default: 'false',
3243
description:
3344
'When `true` makes the rating readonly. When `true`, fractional ratings values are allowed (half icons will be shown)',
34-
}, //
45+
},
46+
showClear: {
47+
type: 'boolean',
48+
default: 'false',
49+
description: 'When `true`, shows a clear button to reset the rating',
50+
},
3551
showValue: {
3652
type: 'boolean',
3753
default: 'false',
@@ -43,57 +59,18 @@ export default {
4359
description:
4460
'When set to `true` and prop `show-value` is `true`, includes the maximum star rating possible in the formatted value',
4561
},
46-
stars: {
47-
type: 'number',
48-
default: '5',
49-
description: 'The number of stars to show. Minimum value is `3`, default is `5`',
50-
},
51-
variant: {
52-
type: 'string',
53-
default: undefined,
54-
description: 'Applies one of the Bootstrap theme color variants to the component',
55-
},
5662
size: {
57-
type: 'string',
63+
type: "'sm' | 'lg' | string",
5864
default: '1rem',
5965
description:
6066
"Icon size: accepts CSS units (e.g. '1.5rem', '24px') or the presets 'sm' (.875rem) and 'lg' (1.25rem); defaults to 1rem.",
6167
},
62-
noBorder: {
63-
type: 'boolean',
64-
default: 'false',
65-
description: 'When `true`, removes the border around the rating component',
66-
},
67-
showClear: {
68-
type: 'boolean',
69-
default: 'false',
70-
description: 'When `true`, shows a clear button to reset the rating',
71-
},
72-
iconFull: {
73-
type: 'string',
74-
default: undefined,
75-
description:
76-
'Icon name or component to use for filled stars when using custom slot rendering',
77-
},
78-
iconHalf: {
79-
type: 'string',
80-
default: undefined,
81-
description:
82-
'Icon name or component to use for half-filled stars when using custom slot rendering',
83-
},
84-
iconEmpty: {
85-
type: 'string',
86-
default: undefined,
87-
description:
88-
'Icon name or component to use for empty stars when using custom slot rendering',
89-
},
90-
inline: {
91-
type: 'boolean',
92-
default: 'false',
93-
description:
94-
'When `true` renders as an inline element rather than a block (100% width) element',
68+
stars: {
69+
type: 'number',
70+
default: 5,
71+
description: 'The number of stars to show. Minimum value is `3`, default is `5`',
9572
},
96-
...pick(buildCommonProps(), ['form', 'id', 'name']),
73+
...pick(buildCommonProps(), ['id', 'variant']),
9774
} satisfies Record<keyof BvnComponentProps['BFormRating'], PropertyReference>,
9875
},
9976
emits: [
@@ -113,8 +90,24 @@ export default {
11390
slots: [
11491
{
11592
name: 'default',
116-
description:
117-
'Custom renderer for each star. Receives `starIndex`, `isFilled`, `isHalf`, `iconFull`, `iconHalf`, and `iconEmpty` as slot-scope props.',
93+
description: 'Custom renderer for each star.',
94+
scope: [
95+
{
96+
prop: 'starIndex',
97+
type: 'number',
98+
description: 'The index of the star being rendered (0-based index)',
99+
},
100+
{
101+
prop: 'isFilled',
102+
type: 'boolean',
103+
description: 'When `true`, the star is filled (selected)',
104+
},
105+
{
106+
prop: 'isHalf',
107+
type: 'boolean',
108+
description: 'When `true`, the star is half-filled (partially selected)',
109+
},
110+
],
118111
},
119112
],
120113
},

‎apps/docs/src/docs/components/form-rating.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -169,10 +169,10 @@ optional displayed value and the left-to-right or right-to-left orientation of t
169169

170170
## Implementation notes
171171

172-
The ratings control uses the Bootstrap v4 `form-control*`, `d-*` (display), `border-*` and
172+
The ratings control uses the Bootstrap v5 `form-control*`, `d-*` (display), and
173173
`text-{variant}` classes, as well as BootstrapVue's custom CSS for proper styling.
174174

175-
The root element of the control is an `<output>` element, which allows a `<label>` element to be
175+
<NotYetImplemented/>The root element of the control is an `<output>` element, which allows a `<label>` element to be
176176
associated with it.
177177

178178
## Accessibility

‎packages/bootstrap-vue-next/src/components/BFormRating/BFormRating.vue

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<template>
22
<div
3+
:id="computedId"
34
:class="computedClasses"
45
role="slider"
56
:aria-valuemin="0"
@@ -77,22 +78,26 @@
7778
import {computed, defineSlots, ref} from 'vue'
7879
import {useDefaults} from '../../composables/useDefaults'
7980
import type {BFormRatingProps} from '../../types/ComponentProps'
81+
import {useId} from '../../composables/useId'
8082
8183
const _props = withDefaults(defineProps<Omit<BFormRatingProps, 'modelValue'>>(), {
82-
readonly: false,
83-
variant: '',
8484
color: '',
85-
stars: 5,
85+
id: undefined,
86+
inline: false,
87+
noBorder: false,
8688
precision: 0,
89+
readonly: false,
8790
showClear: false,
8891
showValue: false,
8992
showValueMax: false,
9093
size: '1rem',
91-
noBorder: false,
92-
inline: false,
94+
stars: 5,
95+
variant: undefined,
9396
})
9497
const props = useDefaults(_props, 'BFormRating')
9598
99+
const computedId = useId(() => props.id, 'form-rating')
100+
96101
const computedClasses = computed(() => ({
97102
'is-readonly': props.readonly,
98103
'no-border': props.noBorder,

‎packages/bootstrap-vue-next/src/types/ComponentProps.ts

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -355,6 +355,8 @@ export interface BFormRadioGroupProps {
355355
}
356356
export interface BFormRatingProps {
357357
color?: string
358+
id?: string
359+
inline?: boolean
358360
modelValue?: number
359361
noBorder?: boolean
360362
precision?: number
@@ -374,10 +376,6 @@ export interface BFormRatingProps {
374376
| 'light'
375377
| 'dark'
376378
| string
377-
iconFull?: string
378-
iconHalf?: string
379-
iconEmpty?: string
380-
inline?: boolean
381379
}
382380

383381
export interface BFormSelectProps {

0 commit comments

Comments
 (0)