mirror of
https://github.com/nocodb/nocodb.git
synced 2026-05-01 10:56:36 +00:00
83 lines
2.2 KiB
Vue
83 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
interface Props {
|
|
modelValue?: number | null | undefined
|
|
}
|
|
|
|
const { modelValue: _modelValue } = defineProps<Props>()
|
|
|
|
const { isDark, getColor } = useTheme()
|
|
|
|
const column = inject(ColumnInj)!
|
|
|
|
const rowHeight = inject(RowHeightInj, ref(undefined))
|
|
|
|
const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
|
|
|
|
const ratingMeta = computed(() => {
|
|
const icon = extractRatingIcon(column?.value?.meta)
|
|
const result = {
|
|
color: '#fcb401',
|
|
max: 5,
|
|
...parseProp(column.value?.meta),
|
|
icon,
|
|
}
|
|
|
|
if (isDark.value) {
|
|
result.color = getOppositeColorOfBackground(getColor('var(--nc-bg-default)'), result.color, ['#4a5268', '#d5dce8'])
|
|
}
|
|
|
|
return result
|
|
})
|
|
|
|
const modelValue = computed(() => Number(_modelValue))
|
|
|
|
const rateDomRef = ref()
|
|
|
|
// Remove tabindex from rate inputs set by antd
|
|
watch(rateDomRef, () => {
|
|
if (!rateDomRef.value) return
|
|
|
|
const rateInputs = rateDomRef.value.$el.querySelectorAll('div[role="radio"]')
|
|
if (!rateInputs) return
|
|
|
|
for (let i = 0; i < rateInputs.length; i++) {
|
|
rateInputs[i].setAttribute('tabindex', '-1')
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<a-rate
|
|
ref="rateDomRef"
|
|
:key="ratingMeta.icon.full"
|
|
:value="modelValue"
|
|
disabled
|
|
:count="ratingMeta.max"
|
|
class="pointer-events-none"
|
|
:style="{
|
|
'color': ratingMeta.color,
|
|
'padding': isExpandedFormOpen ? '0px 8px' : '0px 2px',
|
|
'display': '-webkit-box',
|
|
'max-width': '100%',
|
|
'-webkit-line-clamp': rowHeight === 6 ? 5 : rowHeightTruncateLines(rowHeight, true),
|
|
'-webkit-box-orient': 'vertical',
|
|
'overflow': 'hidden',
|
|
'line-height': '16px',
|
|
}"
|
|
>
|
|
<template #character>
|
|
<MdiStar v-if="ratingMeta.icon.full === 'mdi-star'" class="text-sm" />
|
|
<MdiHeart v-if="ratingMeta.icon.full === 'mdi-heart'" class="text-sm" />
|
|
<MdiMoonFull v-if="ratingMeta.icon.full === 'mdi-moon-full'" class="text-sm" />
|
|
<MdiThumbUp v-if="ratingMeta.icon.full === 'mdi-thumb-up'" class="text-sm" />
|
|
<MdiFlag v-if="ratingMeta.icon.full === 'mdi-flag'" class="text-sm" />
|
|
</template>
|
|
</a-rate>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
:deep(li:not(:last-child)) {
|
|
@apply mr-[1.5px];
|
|
}
|
|
</style>
|