Add vue3-star-ratings package

This commit is contained in:
Dede Fuji Abdul 2024-03-19 13:58:40 +07:00
parent e987f24ad4
commit 5a40a62279
4 changed files with 40 additions and 2 deletions

11
package-lock.json generated
View File

@ -38,7 +38,8 @@
"uuid": "^9.0.1",
"vue": "^3.3.4",
"vue-router": "^4.2.2",
"vue-tailwind-datepicker": "^1.6.1"
"vue-tailwind-datepicker": "^1.6.1",
"vue3-star-ratings": "^3.0.5"
},
"devDependencies": {
"@rushstack/eslint-patch": "^1.5.1",
@ -9534,6 +9535,14 @@
"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
"dev": true
},
"node_modules/vue3-star-ratings": {
"version": "3.0.5",
"resolved": "https://registry.npmjs.org/vue3-star-ratings/-/vue3-star-ratings-3.0.5.tgz",
"integrity": "sha512-V5k/T/7JoEq1VxhtJr1bVdDT181PqbSYMqhyj4myuMFBYXZ2f7bzAcmwFGEkoMmcIg3IVEhroBPUVtPQ4anQDQ==",
"dependencies": {
"vue": "^3.3.4"
}
},
"node_modules/w3c-xmlserializer": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz",

View File

@ -44,7 +44,8 @@
"uuid": "^9.0.1",
"vue": "^3.3.4",
"vue-router": "^4.2.2",
"vue-tailwind-datepicker": "^1.6.1"
"vue-tailwind-datepicker": "^1.6.1",
"vue3-star-ratings": "^3.0.5"
},
"devDependencies": {
"@rushstack/eslint-patch": "^1.5.1",

View File

@ -439,6 +439,19 @@
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
<template #formatRating="{ data }">
<p class="cursor-pointer">
<vue3starRatings
v-model="data.text"
:starSize="20"
starColor="#CCCC00"
inactiveColor="#D1D5DB"
:numberOfStars="5"
:disableClick="true"
/>
</p>
</template>
</DxDataGrid>
</div>
</div>
@ -600,6 +613,7 @@ import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import InputText from '@/components/InputText.vue'
import vue3starRatings from 'vue3-star-ratings'
import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable'

View File

@ -431,6 +431,19 @@
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
<template #formatRating="{ data }">
<p class="cursor-pointer">
<vue3starRatings
v-model="data.text"
:starSize="20"
starColor="#CCCC00"
inactiveColor="#D1D5DB"
:numberOfStars="5"
:disableClick="true"
/>
</p>
</template>
</DxDataGrid>
</div>
</div>
@ -590,6 +603,7 @@ import { useQuery } from '@vue/apollo-composable'
import { queries } from '@/utils/api/api.graphql'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
import vue3starRatings from 'vue3-star-ratings'
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import InputText from '@/components/InputText.vue'
import { apolloClient } from '@/utils/api/api.graphql'