From c65a690d4e217960e5dfb55b9ade584d9c40ee87 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 30 Jul 2022 20:16:25 +0800
Subject: [PATCH 1/5] fix(gui-v2): set color in style instead of safelisting

---
 packages/nc-gui-v2/components/cell/Rating.vue | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/Rating.vue b/packages/nc-gui-v2/components/cell/Rating.vue
index 0893d50bff..ead4b002e6 100644
--- a/packages/nc-gui-v2/components/cell/Rating.vue
+++ b/packages/nc-gui-v2/components/cell/Rating.vue
@@ -36,13 +36,9 @@ const localState = computed({
     <v-rating v-model="localState" :length="ratingMeta.max" dense x-small :readonly="readOnly" clearable>
       <!--      todo:  use the proper slot -->
       <template #item="{ isFilled, click }">
-        <!--        todo : custom color and icon -->
-        <!--        <v-icon v-if="isFilled"- :size="15" :color="ratingMeta.color" @click="click"> -->
-        <MdiStarIcon v-if="isFilled" :class="`text-[${ratingMeta.color}]`" @click="click" />
-        <!--        </v-icon> -->
-        <!--        <v-icon v-else :color="ratingMeta.color" :size="15" class="nc-cell-hover-show" @click="click"> -->
-        <MdiStarOutlineIcon v-else :class="`text-[${ratingMeta.color}]`" @click="click" />
-        <!--        </v-icon> -->
+        <!--        todo : custom icon -->
+        <MdiStarIcon v-if="isFilled" :style="`color: ${ratingMeta.color}`" @click="click" />
+        <MdiStarOutlineIcon v-else :style="`color: ${ratingMeta.color}`" @click="click" />
       </template>
     </v-rating>
   </div>

From 0652d5c0b1589127f7a95fdcf2b1357e7ef5967d Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sun, 31 Jul 2022 12:24:51 +0800
Subject: [PATCH 2/5] chore(gui-v2): add AAlert & ARate

---
 packages/nc-gui-v2/components.d.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 692c3f667c..cc2fc7ce06 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -7,6 +7,7 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    AAlert: typeof import('ant-design-vue/es')['Alert']
     AAnchorLink: typeof import('ant-design-vue/es')['AnchorLink']
     AAutoComplete: typeof import('ant-design-vue/es')['AutoComplete']
     AButton: typeof import('ant-design-vue/es')['Button']
@@ -35,6 +36,7 @@ declare module '@vue/runtime-core' {
     AMenuItemGroup: typeof import('ant-design-vue/es')['MenuItemGroup']
     AModal: typeof import('ant-design-vue/es')['Modal']
     APagination: typeof import('ant-design-vue/es')['Pagination']
+    ARate: typeof import('ant-design-vue/es')['Rate']
     ARow: typeof import('ant-design-vue/es')['Row']
     ASelect: typeof import('ant-design-vue/es')['Select']
     ASelectOption: typeof import('ant-design-vue/es')['SelectOption']

From 4a39ed524760ac3634fb3f034c471893d98c7be8 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sun, 31 Jul 2022 12:25:21 +0800
Subject: [PATCH 3/5] feat(gui-v2): use A-Rate & integrate with column?.meta

---
 packages/nc-gui-v2/components/cell/Rating.vue | 31 +++++++++++--------
 1 file changed, 18 insertions(+), 13 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/Rating.vue b/packages/nc-gui-v2/components/cell/Rating.vue
index ead4b002e6..5daf8c00a9 100644
--- a/packages/nc-gui-v2/components/cell/Rating.vue
+++ b/packages/nc-gui-v2/components/cell/Rating.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { computed, inject } from '#imports'
-import { ColumnInj, IsFormInj } from '~/context'
+import { ColumnInj } from '~/context'
 import MdiStarIcon from '~icons/mdi/star'
-import MdiStarOutlineIcon from '~icons/mdi/star-outline'
+import MdiHeartIcon from '~icons/mdi/heart'
+import MdiMoonFullIcon from '~icons/mdi/moon-full'
+import MdiThumbUpIcon from '~icons/mdi/thumb-up'
+import MdiFlagIcon from '~icons/mdi/flag'
 
 interface Props {
   modelValue?: string | number
@@ -10,9 +13,10 @@ interface Props {
 }
 
 const { modelValue: value, readOnly } = defineProps<Props>()
+
 const emit = defineEmits(['update:modelValue'])
+
 const column = inject(ColumnInj)
-const isForm = inject(IsFormInj)
 
 const ratingMeta = computed(() => {
   return {
@@ -22,25 +26,26 @@ const ratingMeta = computed(() => {
     },
     color: '#fcb401',
     max: 5,
-    // ...(column?.meta || {})
+    ...(column?.meta || {}),
   }
 })
 const localState = computed({
   get: () => value,
-  set: (val) => emit('update:modelValue', val),
+  set: (val: any) => emit('update:modelValue', val),
 })
 </script>
 
 <template>
-  <div class="d-100 h-100" :class="{ 'nc-cell-hover-show': localState === 0 || !localState }">
-    <v-rating v-model="localState" :length="ratingMeta.max" dense x-small :readonly="readOnly" clearable>
-      <!--      todo:  use the proper slot -->
-      <template #item="{ isFilled, click }">
-        <!--        todo : custom icon -->
-        <MdiStarIcon v-if="isFilled" :style="`color: ${ratingMeta.color}`" @click="click" />
-        <MdiStarOutlineIcon v-else :style="`color: ${ratingMeta.color}`" @click="click" />
+  <div class="text-sm" :class="{ 'nc-cell-hover-show': localState === 0 || !localState }">
+    <a-rate v-model:value="localState" :count="ratingMeta.max" :style="`color: ${ratingMeta.color}`">
+      <template #character>
+        <MdiStarIcon v-if="ratingMeta.icon.full === 'mdi-star'" />
+        <MdiHeartIcon v-if="ratingMeta.icon.full === 'mdi-heart'" />
+        <MdiMoonFullIcon v-if="ratingMeta.icon.full === 'mdi-moon-full'" />
+        <MdiThumbUpIcon v-if="ratingMeta.icon.full === 'mdi-thumb-up'" />
+        <MdiFlagIcon v-if="ratingMeta.icon.full === 'mdi-flag'" />
       </template>
-    </v-rating>
+    </a-rate>
   </div>
 </template>
 

From 1a403185e2a81bb0b0df2ad5992ed97e40e1d479 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sun, 31 Jul 2022 18:08:52 +0800
Subject: [PATCH 4/5] fix(gui-v2): revise rating icon size

---
 packages/nc-gui-v2/components/cell/Rating.vue | 20 +++++++++----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/Rating.vue b/packages/nc-gui-v2/components/cell/Rating.vue
index 5daf8c00a9..01c33f6bc5 100644
--- a/packages/nc-gui-v2/components/cell/Rating.vue
+++ b/packages/nc-gui-v2/components/cell/Rating.vue
@@ -36,17 +36,15 @@ const localState = computed({
 </script>
 
 <template>
-  <div class="text-sm" :class="{ 'nc-cell-hover-show': localState === 0 || !localState }">
-    <a-rate v-model:value="localState" :count="ratingMeta.max" :style="`color: ${ratingMeta.color}`">
-      <template #character>
-        <MdiStarIcon v-if="ratingMeta.icon.full === 'mdi-star'" />
-        <MdiHeartIcon v-if="ratingMeta.icon.full === 'mdi-heart'" />
-        <MdiMoonFullIcon v-if="ratingMeta.icon.full === 'mdi-moon-full'" />
-        <MdiThumbUpIcon v-if="ratingMeta.icon.full === 'mdi-thumb-up'" />
-        <MdiFlagIcon v-if="ratingMeta.icon.full === 'mdi-flag'" />
-      </template>
-    </a-rate>
-  </div>
+  <a-rate v-model:value="localState" :count="ratingMeta.max" :style="`color: ${ratingMeta.color}`">
+    <template #character>
+      <MdiStarIcon v-if="ratingMeta.icon.full === 'mdi-star'" class="text-sm" />
+      <MdiHeartIcon v-if="ratingMeta.icon.full === 'mdi-heart'" class="text-sm" />
+      <MdiMoonFullIcon v-if="ratingMeta.icon.full === 'mdi-moon-full'" class="text-sm" />
+      <MdiThumbUpIcon v-if="ratingMeta.icon.full === 'mdi-thumb-up'" class="text-sm" />
+      <MdiFlagIcon v-if="ratingMeta.icon.full === 'mdi-flag'" class="text-sm" />
+    </template>
+  </a-rate>
 </template>
 
 <style scoped></style>

From 844792f812414af339b5d85ac3dfeb7157667ff0 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 1 Aug 2022 11:28:00 +0800
Subject: [PATCH 5/5] refactor(gui-v2): use vModel

---
 packages/nc-gui-v2/components/cell/Rating.vue | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/Rating.vue b/packages/nc-gui-v2/components/cell/Rating.vue
index 01c33f6bc5..54256c5841 100644
--- a/packages/nc-gui-v2/components/cell/Rating.vue
+++ b/packages/nc-gui-v2/components/cell/Rating.vue
@@ -12,9 +12,9 @@ interface Props {
   readOnly?: boolean
 }
 
-const { modelValue: value, readOnly } = defineProps<Props>()
+const props = defineProps<Props>()
 
-const emit = defineEmits(['update:modelValue'])
+const emits = defineEmits(['update:modelValue'])
 
 const column = inject(ColumnInj)
 
@@ -29,14 +29,12 @@ const ratingMeta = computed(() => {
     ...(column?.meta || {}),
   }
 })
-const localState = computed({
-  get: () => value,
-  set: (val: any) => emit('update:modelValue', val),
-})
+
+const vModel = useVModel(props, 'modelValue', emits)
 </script>
 
 <template>
-  <a-rate v-model:value="localState" :count="ratingMeta.max" :style="`color: ${ratingMeta.color}`">
+  <a-rate v-model:value="vModel" :count="ratingMeta.max" :style="`color: ${ratingMeta.color}`" :disabled="props.readOnly">
     <template #character>
       <MdiStarIcon v-if="ratingMeta.icon.full === 'mdi-star'" class="text-sm" />
       <MdiHeartIcon v-if="ratingMeta.icon.full === 'mdi-heart'" class="text-sm" />