From 4d63e494e8bbe026f3c465f96005edac105c6e9f Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 1 Aug 2022 14:07:56 +0800
Subject: [PATCH] refactor(gui-v2): use useVModel for dialogShow

---
 .../nc-gui-v2/components/dlg/QuickImport.vue  | 19 ++++++-------------
 1 file changed, 6 insertions(+), 13 deletions(-)

diff --git a/packages/nc-gui-v2/components/dlg/QuickImport.vue b/packages/nc-gui-v2/components/dlg/QuickImport.vue
index a109a313ce..16e86c9969 100644
--- a/packages/nc-gui-v2/components/dlg/QuickImport.vue
+++ b/packages/nc-gui-v2/components/dlg/QuickImport.vue
@@ -18,7 +18,7 @@ interface Props {
   importType: 'csv' | 'json' | 'excel'
 }
 
-const { modelValue, importType } = defineProps<Props>()
+const props = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
@@ -55,11 +55,11 @@ const importState = reactive({
   },
 })
 
-const isImportTypeJson = computed(() => importType === 'json')
+const isImportTypeJson = computed(() => props.importType === 'json')
 
-const isImportTypeCsv = computed(() => importType === 'csv')
+const isImportTypeCsv = computed(() => props.importType === 'csv')
 
-const IsImportTypeExcel = computed(() => importType === 'excel')
+const IsImportTypeExcel = computed(() => props.importType === 'excel')
 
 const validators = computed(() => {
   return {
@@ -97,14 +97,7 @@ const importMeta = computed(() => {
   return {}
 })
 
-const dialogShow = computed({
-  get() {
-    return modelValue
-  },
-  set(v) {
-    emit('update:modelValue', v)
-  },
-})
+const dialogShow = useVModel(props, 'modelValue', emit)
 
 const disablePreImportButton = computed(() => {
   if (activeKey.value === 'uploadTab') {
@@ -124,7 +117,7 @@ const disableImportButton = computed(() => {
 const disableFormatJsonButton = computed(() => !jsonEditorRef.value?.isValid)
 
 const modalWidth = computed(() => {
-  if (importType === 'excel' && templateEditorModal.value) {
+  if (props.importType === 'excel' && templateEditorModal.value) {
     return 'max(90vw, 600px)'
   }
   return 'max(60vw, 600px)'