chore(gui-v2): type cleanups

packages/nc-gui-v2/components/cell/Rating.vue

@@ -5,47 +5,27 @@ import MdiStarIcon from '~icons/mdi/star'
 import MdiStarOutlineIcon from '~icons/mdi/star-outline'
 
 interface Props {
-  modelValue?: string | number
+  modelValue?: number
   readOnly?: boolean
 }
 
-const { modelValue: value, readOnly } = defineProps<Props>()
+const props = defineProps<Props>()
+
 const emit = defineEmits(['update:modelValue'])
+
+const vModel = useVModel(props, 'modelValue', emit)
+
 const column = inject(ColumnInj)
 const isForm = inject(IsFormInj)
-
-const ratingMeta = computed(() => {
-  return {
-    icon: {
-      full: 'mdi-star',
-      empty: 'mdi-star-outline',
-    },
-    color: '#fcb401',
-    max: 5,
-    // ...(column?.meta || {})
-  }
-})
-const localState = computed({
-  get: () => value,
-  set: (val) => emit('update:modelValue', val),
-})
 </script>
 
 <template>
-  <div class="d-100 h-100" :class="{ 'nc-cell-hover-show': localState === 0 || !localState }">
+  <div class="d-100 h-100" :class="{ 'nc-cell-hover-show': vModel === 0 || !vModel }">
-    <v-rating v-model="localState" :length="ratingMeta.max" dense x-small :readonly="readOnly" clearable>
+    <v-rating v-model="vModel" :length="5" dense x-small :readonly="readOnly" clearable>
-      <!--      todo:  use the proper slot -->
       <template #item="{ isFilled, click }">
-        <!--        todo : custom color and icon -->
+        <MdiStarIcon v-if="isFilled" class="text-[#fcb40]" @click="click" />
-        <!--        <v-icon v-if="isFilled"- :size="15" :color="ratingMeta.color" @click="click"> -->
+        <MdiStarOutlineIcon v-else class="text-[#fcb40]" @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> -->
       </template>
     </v-rating>
   </div>
 </template>
-
-<style scoped></style>

packages/nc-gui-v2/components/dlg/TableCreate.vue

@@ -4,6 +4,7 @@ import { Form } from 'ant-design-vue'
 import { useToast } from 'vue-toastification'
 import { onMounted, useProject, useTableCreate, useTabs } from '#imports'
 import { validateTableName } from '~/utils/validation'
+import { TabType } from '~/composables'
 
 interface Props {
   modelValue?: boolean
@@ -34,7 +35,7 @@ const { table, createTable, generateUniqueTitle, tables, project } = useTableCre
   addTab({
     id: table.id as string,
     title: table.title,
-    type: 'table',
+    type: TabType.TABLE,
   })
   dialogShow.value = false
 })

packages/nc-gui-v2/components/dlg/ViewDelete.vue

@@ -60,7 +60,9 @@ async function onDelete() {
 
     <template #footer>
       <a-button key="back" @click="vModel = false">{{ $t('general.cancel') }}</a-button>
-      <a-button key="submit" type="danger" :loading="isLoading" @click="onDelete">{{ $t('general.submit') }}</a-button>
+      <a-button key="submit" danger html-type="submit" :loading="isLoading" @click="onDelete">{{
+        $t('general.submit')
+      }}</a-button>
     </template>
   </a-modal>
 </template>

packages/nc-gui-v2/components/general/Share.vue

@@ -3,7 +3,7 @@ interface Props {
   url: string
   socialMedias: string[]
   title?: string
-  summary: string
+  summary?: string
   hashTags?: string
   css?: string
   iconClass?: string

packages/nc-gui-v2/components/smartsheet/Pagination.vue

@@ -73,7 +73,7 @@ export default {
         @keydown.enter="changePage(page)"
       >
         <template #append>
-          <MdiKeyboardIcon small icon.class="mt-1" @click="changePage(page)" />
+          <MdiKeyboardIcon class="mt-1" @click="changePage(page)" />
         </template>
       </v-text-field>
     </div>

packages/nc-gui-v2/components/tabs/Smartsheet.vue

@@ -29,7 +29,7 @@ provide(FieldsInj, fields)
 provide('navDrawerOpen', ref(true))
 
 watch(
-  () => tabMeta && tabMeta?.id,
+  () => tabMeta && tabMeta.value.id,
   async (newVal, oldVal) => {
     if (newVal !== oldVal) await getMeta(newVal)
   },

packages/nc-gui-v2/components/virtual-cell/Rollup.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const { value } = defineProps<{ value: any }>()
+const { value } = defineProps<{ value?: any }>()
 </script>
 
 <template>

packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue

@@ -14,16 +14,10 @@ const readonly = inject(ReadonlyInj, false)
 
 <template>
   <v-chip class="chip" :class="{ active }" small text-color="textColor">
-    <!--
+    <span class="name">{{ value }}</span>
-    :color="isDark ? '' : 'primary lighten-5'"
-    @click="!readonly && active && $emit('edit', item)" -->
-    <span class="name" :title="value">{{ value }}</span>
 
-    <!--    && _isUIAllowed('xcDatatableEditable') -->
     <div v-show="active" v-if="!readonly" class="mr-n1 ml-2">
-      <MdiCloseThickIcon class="unlink-icon">
+      <MdiCloseThickIcon class="unlink-icon" />
-        <!--        @click.stop="$emit('unlink', item)" -->
-      </MdiCloseThickIcon>
     </div>
   </v-chip>
 </template>

packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue

@@ -148,7 +148,7 @@ export default {
                 :tooltip="`Unlink this '${meta.title}' from '${parentMeta.title}'`"
                 :color="['error', 'grey']"
                 small
-                icon.class="mr-1 mt-n1"
+                class="mr-1 mt-n1"
                 @click.stop="$emit('unlink', ch, i)"
               >
                 mdi-link-variant-remove

packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue

@@ -122,7 +122,7 @@ export default {
           @keydown.enter="loadData"
         >
           <template #append>
-            <x-icon tooltip="Apply filter" small icon.class="mt-1" @click="loadData"> mdi-keyboard-return </x-icon>
+            <x-icon tooltip="Apply filter" small icon class="mt-1" @click="loadData"> mdi-keyboard-return </x-icon>
           </template>
         </v-text-field>
         <v-spacer />

packages/nc-gui-v2/pages/signin.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
+import type { RuleObject } from 'ant-design-vue/es/form'
 import { definePageMeta } from '#imports'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
 import { navigateTo, useNuxtApp } from '#app'
@@ -25,7 +26,7 @@ const form = reactive({
   password: '',
 })
 
-const formRules = {
+const formRules: Record<string, RuleObject[]> = {
   email: [
     // E-mail is required
     { required: true, message: t('msg.error.signUpRules.emailReqd') },
@@ -33,7 +34,7 @@ const formRules = {
     {
       validator: (_: unknown, v: string) => {
         return new Promise((resolve, reject) => {
-          if (isEmail(v)) return resolve(true)
+          if (isEmail(v)) return resolve()
           reject(new Error(t('msg.error.signUpRules.emailInvalid')))
         })
       },