fix(nc-gui): PR review changes

packages/nc-gui/components/general/BaseIconColorPicker.vue

@@ -19,11 +19,12 @@ const props = withDefaults(
 
 const emit = defineEmits(['update:modelValue'])
 
-const { modelValue, size, readonly } = props
+const { modelValue } = toRefs(props)
+const { size, readonly } = props
 
 const isOpen = ref(false)
 
-const colorRef = ref(tinycolor(modelValue).isValid() ? modelValue : baseIconColors[0])
+const colorRef = ref(tinycolor(modelValue.value).isValid() ? modelValue.value : baseIconColors[0])
 
 const updateIconColor = (color: string) => {
   const tcolor = tinycolor(color)
@@ -43,7 +44,7 @@ const onClick = (e: Event) => {
 watch(
   isOpen,
   (value) => {
-    if (!value && colorRef.value !== modelValue) {
+    if (!value && colorRef.value !== modelValue.value) {
       emit('update:modelValue', colorRef.value)
     }
   },

packages/nc-gui/components/general/ColorPicker.vue

@@ -73,8 +73,8 @@ watch(picked, (n, _o) => {
           class="color-selector"
           :class="{ 'selected': compare(picked, color), 'new-design': isNewDesign }"
           :style="{
-            'background-color': `${color}`,
-            'border': colorBoxBorder ? `1px solid ${tinycolor(color).darken(30).toString()}` : undefined,
+            backgroundColor: `${color}`,
+            border: colorBoxBorder ? `1px solid ${tinycolor(color).darken(30).toString()}` : undefined,
           }"
           @click="selectColor(color, true)"
         >

packages/nc-gui/components/general/ColorSliderWrapper.vue

@@ -8,8 +8,8 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  modelValue: () => '#3069FE',
-  mode: () => 'hsv',
+  modelValue: '#3069FE',
+  mode: 'hsv',
 })
 
 const emit = defineEmits(['update:modelValue', 'input'])
@@ -30,7 +30,7 @@ const picked = computed({
     v-model="picked"
     class="nc-color-slider-wrapper min-w-[200px]"
     :style="{
-      ['--nc-color-slider-pointer']: tinycolor(`hsv(${picked.h ?? 199}, 100%, 100%)`).toHexString(),
+      '--nc-color-slider-pointer': tinycolor(`hsv(${picked.h ?? 199}, 100%, 100%)`).toHexString(),
     }"
   />
 </template>

packages/nc-gui/components/smartsheet/Form.vue

@@ -1541,8 +1541,8 @@ useEventListener(
                           '#E5D4F5',
                           '#FFCFE6',
                         ]"
-                        :color-box-border="true"
-                        :is-new-design="true"
+                        color-box-border
+                        is-new-design
                         class="nc-form-theme-color-picker !pb-0 !pl-0 -ml-1"
                         @input="handleChangeBackground"
                       />