+95
-9
lines changedFilter options
+95
-9
lines changed Original file line number Diff line number Diff line change
@@ -12,7 +12,7 @@ inside [input groups](/docs/components/input-group).
12 12
There are two main modes for `<b-form-rating>`: interactive and readonly.
13 13 14 14
Interactive mode allows the user to chose a rating from `1` to the number of stars (default `5`) in
15 -
whole number increments.
15 +
_whole number_ increments.
16 16 17 17
**Interactive rating (input mode):**
18 18
@@ -209,6 +209,39 @@ decimal) simply set the `precision` prop to the number of digits after the decim
209 209
<!-- b-form-rating-value-precision.vue -->
210 210
```
211 211 212 +
#### Show maximum value
213 + 214 +
<span class="badge badge-info small">2.13.0+</span>
215 + 216 +
Optionally show the maximum rating possible by also setting the prop `show-value-max` to `true`:
217 + 218 +
```html
219 +
<template>
220 +
<div>
221 +
<b-form-rating
222 +
v-model="value"
223 +
readonly
224 +
show-value
225 +
show-value-max
226 +
precision="2"
227 +
></b-form-rating>
228 +
<p class="mt-2">Value: {{ value }}</p>
229 +
</div>
230 +
</template>
231 + 232 +
<script>
233 +
export default {
234 +
data() {
235 +
return {
236 +
value: 3.555
237 +
}
238 +
}
239 +
}
240 +
</script>
241 + 242 +
<!-- b-form-rating-value-max.vue -->
243 +
```
244 + 212 245
### Control sizing
213 246 214 247
Fancy a small or large rating control? Simply set the prop `size` to either `'sm'` or `'lg'`
@@ -127,6 +127,10 @@ export const BFormRating = /*#__PURE__*/ Vue.extend({
127 127
type: Boolean,
128 128
default: false
129 129
},
130 +
showValueMax: {
131 +
type: Boolean,
132 +
default: false
133 +
},
130 134
disabled: {
131 135
type: Boolean,
132 136
default: false
@@ -216,15 +220,22 @@ export const BFormRating = /*#__PURE__*/ Vue.extend({
216 220
return isLocaleRTL(this.computedLocale)
217 221
},
218 222
formattedRating() {
219 -
const value = this.localValue
220 223
const precision = toInteger(this.precision)
221 -
return isNull(value)
222 -
? ''
223 -
: value.toLocaleString(this.computedLocale, {
224 -
notation: 'standard',
225 -
minimumFractionDigits: isNaN(precision) ? 0 : precision,
226 -
maximumFractionDigits: isNaN(precision) ? 3 : precision
227 -
})
224 +
const showValueMax = this.showValueMax
225 +
const locale = this.computedLocale
226 +
const formatOptions = {
227 +
notation: 'standard',
228 +
minimumFractionDigits: isNaN(precision) ? 0 : precision,
229 +
maximumFractionDigits: isNaN(precision) ? 3 : precision
230 +
}
231 +
const stars = this.computedStars.toLocaleString(locale)
232 +
let value = this.localValue
233 +
value = isNull(value)
234 +
? showValueMax
235 +
? '-'
236 +
: ''
237 +
: value.toLocaleString(locale, formatOptions)
238 +
return showValueMax ? `${value}/${stars}` : value
228 239
}
229 240
},
230 241
watch: {
@@ -252,6 +252,43 @@ describe('form-rating', () => {
252 252
wrapper.destroy()
253 253
})
254 254 255 +
it('has expected structure when prop `show-value` and `show-value-max` are set', async () => {
256 +
const wrapper = mount(BFormRating, {
257 +
propsData: {
258 +
showValue: true,
259 +
showValueMax: true,
260 +
value: '3.5',
261 +
precision: 2
262 +
}
263 +
})
264 + 265 +
expect(wrapper.isVueInstance()).toBe(true)
266 +
await waitNT(wrapper.vm)
267 + 268 +
const $stars = wrapper.findAll('.b-rating-star')
269 +
expect($stars.length).toBe(5)
270 + 271 +
const $value = wrapper.find('.b-rating-value')
272 +
expect($value.exists()).toBe(true)
273 +
expect($value.text()).toEqual('3.50/5')
274 + 275 +
wrapper.setProps({
276 +
value: null
277 +
})
278 +
await waitNT(wrapper.vm)
279 + 280 +
expect($value.text()).toEqual('-/5')
281 + 282 +
wrapper.setProps({
283 +
value: '1.236'
284 +
})
285 +
await waitNT(wrapper.vm)
286 + 287 +
expect($value.text()).toEqual('1.24/5')
288 + 289 +
wrapper.destroy()
290 +
})
291 + 255 292
it('focus and blur methods work', async () => {
256 293
const wrapper = mount(BFormRating, {
257 294
attachToDocument: true,
@@ -36,6 +36,11 @@
36 36
"prop": "showValue",
37 37
"description": "When `true` shows the current rating value in the control"
38 38
},
39 +
{
40 +
"prop": "showValueMax",
41 +
"version": "2.13.0",
42 +
"description": "When set to `true` and prop `show-value` is `true`, includes the maximum star rating possible in the formatted value"
43 +
},
39 44
{
40 45
"prop": "noBorder",
41 46
"description": "When `true` disables the default border"
You can’t perform that action at this time.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4