vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 00:42:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

Refactor #3922 - For Rating

Browse source
This commit is contained in:
Bahadır Sofuoğlu 2023-05-06 23:34:27 +03:00
parent 9d9f568ce9
commit 510d4b2918
6 changed files with 209 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

33
components/lib/rating/Rating.vue
View file

@ -1,16 +1,28 @@
<template>
<div :class="containerClass">
<div v-if="cancel" :class="['p-rating-item p-rating-cancel-item', { 'p-focus': focusedOptionIndex === 0 }]" @click="onOptionClick($event, 0)">
<span class="p-hidden-accessible">
<input type="radio" value="0" :name="name" :checked="modelValue === 0" :disabled="disabled" :readonly="readonly" :aria-label="cancelAriaLabel()" @focus="onFocus($event, 0)" @blur="onBlur" @change="onChange($event, 0)" />
<div :class="containerClass" v-bind="ptm('root')">
<div v-if="cancel" :class="['p-rating-item p-rating-cancel-item', { 'p-focus': focusedOptionIndex === 0 }]" @click="onOptionClick($event, 0)" v-bind="ptm('cancelItem')">
<span class="p-hidden-accessible" v-bind="ptm('cancelInputAria')">
<input
type="radio"
value="0"
:name="name"
:checked="modelValue === 0"
:disabled="disabled"
:readonly="readonly"
:aria-label="cancelAriaLabel()"
@focus="onFocus($event, 0)"
@blur="onBlur"
@change="onChange($event, 0)"
v-bind="ptm('cancelInput')"
/>
</span>
<slot name="cancelicon">
<component :is="cancelIcon ? 'span' : 'BanIcon'" :class="['p-rating-icon p-rating-cancel', cancelIcon]" />
<component :is="cancelIcon ? 'span' : 'BanIcon'" :class="['p-rating-icon p-rating-cancel', cancelIcon]" v-bind="ptm('cancelIcon')" />
</slot>
</div>
<template v-for="value in stars" :key="value">
<div :class="['p-rating-item', { 'p-rating-item-active': value <= modelValue, 'p-focus': value === focusedOptionIndex }]" @click="onOptionClick($event, value)">
<span class="p-hidden-accessible">
<div :class="['p-rating-item', { 'p-rating-item-active': value <= modelValue, 'p-focus': value === focusedOptionIndex }]" @click="onOptionClick($event, value)" v-bind="ptm('item')">
<span class="p-hidden-accessible" v-bind="ptm('itemInputAria')">
<input
type="radio"
:value="value"
@ -22,13 +34,14 @@
@focus="onFocus($event, value)"
@blur="onBlur"
@change="onChange($event, value)"
v-bind="ptm('itemInput')"
/>
</span>
<slot v-if="value <= modelValue" name="onicon" :value="value">
<component :is="onIcon ? 'span' : 'StarFillIcon'" :class="['p-rating-icon', onIcon]" />
<component :is="onIcon ? 'span' : 'StarFillIcon'" :class="['p-rating-icon', onIcon]" v-bind="ptm('onIcon')" />
</slot>
<slot v-else name="officon" :value="value">
<component :is="onIcon ? 'span' : 'StarIcon'" :class="['p-rating-icon', offIcon]" />
<component :is="onIcon ? 'span' : 'StarIcon'" :class="['p-rating-icon', offIcon]" v-bind="ptm('offIcon')" />
</slot>
</div>
</template>
@ -36,6 +49,7 @@
</template>
<script>
import BaseComponent from 'primevue/basecomponent';
import BanIcon from 'primevue/icons/ban';
import StarIcon from 'primevue/icons/star';
import StarFillIcon from 'primevue/icons/starfill';
@ -43,6 +57,7 @@ import { DomHandler, UniqueComponentId } from 'primevue/utils';
export default {
name: 'Rating',
extends: BaseComponent,
emits: ['update:modelValue', 'change', 'focus', 'blur'],
props: {
modelValue: {