feat: enhance modal component with loading states and action handling

Author: Ayideyia

frontend/src/components/Modal/index.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import { computed, provide } from 'vue'
+import { computed, provide, ref } from 'vue'
 
 import { WindowToggleMaximise } from '@/bridge'
 import useI18n from '@/lang'
 
 export interface Props {
-  open: boolean
   title?: string
   footer?: boolean
   maxHeight?: string
@@ -19,6 +18,10 @@ export interface Props {
   cancelText?: string
   submitText?: string
   maskClosable?: boolean
+  onOk?: () => MaybePromise<boolean | void>
+  onCancel?: () => MaybePromise<boolean | void>
+  beforeClose?: (isOk: boolean) => MaybePromise<boolean | void>
+  afterClose?: (isOk: boolean) => void
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -37,16 +40,32 @@ const props = withDefaults(defineProps<Props>(), {
   maskClosable: false,
 })
 
+const open = defineModel('open', { default: false })
+
+const cancelLoading = ref(false)
+const submitLoading = ref(false)
+
 const { t } = useI18n.global
 
-const emits = defineEmits(['update:open', 'ok'])
+const handleAction = async (isOk: boolean) => {
+  const loading = isOk ? submitLoading : cancelLoading
+  const action = isOk ? props.onOk : props.onCancel
+
+  loading.value = true
+  try {
+    if (!((await action?.()) ?? true) || !((await props.beforeClose?.(isOk)) ?? true)) {
+      return
+    }
+  } finally {
+    loading.value = false
+  }
 
-const handleSubmit = () => {
-  emits('update:open', false)
-  emits('ok')
+  open.value = false
+  props.afterClose?.(isOk)
 }
 
-const handleCancel = () => emits('update:open', false)
+const handleSubmit = () => handleAction(true)
+const handleCancel = () => handleAction(false)
 
 const onMaskClick = () => props.maskClosable && handleCancel()
 
@@ -81,10 +100,17 @@ provide('submit', handleSubmit)
           </div>
           <div v-if="footer" class="action">
             <slot name="action" />
-            <Button v-if="cancel" @click="handleCancel" :type="maskClosable ? 'text' : 'normal'">
+            <Button
+              v-if="cancel"
+              @click="handleCancel"
+              :loading="cancelLoading"
+              :type="maskClosable ? 'text' : 'normal'"
+            >
               {{ t(cancelText) }}
             </Button>
-            <Button v-if="submit" @click="handleSubmit" type="primary">{{ t(submitText) }}</Button>
+            <Button v-if="submit" @click="handleSubmit" :loading="submitLoading" type="primary">
+              {{ t(submitText) }}
+            </Button>
           </div>
         </div>
       </div>

frontend/src/types/typescript.d.ts

@@ -1 +1,3 @@
 type Recordable<T = any> = { [x: string]: T }
+
+type MaybePromise<T> = T | Promise<T>

frontend/src/utils/others.ts

@@ -5,12 +5,17 @@ import { APP_TITLE, APP_VERSION } from '@/utils'
 
 export const deepClone = <T>(json: T): T => JSON.parse(JSON.stringify(json))
 
-export const omit = <T, K extends keyof T>(obj: T, fields: K[]): Omit<T, K> => {
-  const _obj = deepClone(obj)
-  fields.forEach((field) => {
-    delete _obj[field]
-  })
-  return _obj
+export const omit = <T extends object, K extends keyof T>(obj: T, props: K[]): Omit<T, K> => {
+  const result = {} as T
+  const omitSet = new Set(props)
+  for (const key in obj) {
+    if (Object.prototype.hasOwnProperty.call(obj, key)) {
+      if (!omitSet.has(key as unknown as K)) {
+        result[key] = obj[key]
+      }
+    }
+  }
+  return result as Omit<T, K>
 }
 
 export const omitArray = <T, K extends keyof T>(arr: T[], fields: K[]): Omit<T, K>[] => {

frontend/src/views/ProfilesView/components/DnsRulesConfig.vue

@@ -170,7 +170,7 @@ const renderRule = (rule: IDNSRule) => {
 
   <Modal
     v-model:open="showEditModal"
-    @ok="handleAddEnd"
+    :on-ok="handleAddEnd"
     title="kernel.dns.tab.rules"
     max-width="80"
     max-height="80"

frontend/src/views/ProfilesView/components/DnsServersConfig.vue

@@ -147,7 +147,7 @@ const renderServer = (server: IDNSServer) => {
 
   <Modal
     v-model:open="showEditModal"
-    @ok="handleAddEnd"
+    :on-ok="handleAddEnd"
     title="kernel.dns.tab.servers"
     max-width="80"
     max-height="80"

frontend/src/views/ProfilesView/components/OutboundsConfig.vue

@@ -214,7 +214,7 @@ subscribesStore.subscribes.forEach(async ({ id, name, proxies }) => {
 
   <Modal
     v-model:open="showSortModal"
-    @ok="handleSortGroupEnd"
+    :on-ok="handleSortGroupEnd"
     mask-closable
     title="kernel.outbounds.sort"
     max-width="80"
@@ -233,7 +233,7 @@ subscribesStore.subscribes.forEach(async ({ id, name, proxies }) => {
 
   <Modal
     v-model:open="showEditModal"
-    @ok="handleAddEnd"
+    :on-ok="handleAddEnd"
     title="kernel.outbounds.name"
     width="80"
     height="80"

frontend/src/views/ProfilesView/components/RouteRulesConfig.vue

@@ -162,7 +162,7 @@ const renderRule = (rule: IRule) => {
 
   <Modal
     v-model:open="showEditModal"
-    @ok="handleAddEnd"
+    :on-ok="handleAddEnd"
     title="kernel.route.tab.rules"
     max-width="80"
     max-height="80"

frontend/src/views/ProfilesView/components/RouteRulesetConfig.vue

@@ -101,7 +101,7 @@ const handleUse = (ruleset: any) => {
 
   <Modal
     v-model:open="showEditModal"
-    @ok="handleAddEnd"
+    :on-ok="handleAddEnd"
     title="kernel.route.tab.rule_set"
     max-width="80"
     max-height="80"

frontend/src/views/SubscribesView/components/ProxiesView.vue

@@ -243,7 +243,7 @@ const getProxyByTag = async (tag: string) => {
     :cancel="isEdit"
     :mask-closable="!isEdit"
     :title="isEdit ? (details ? 'common.edit' : 'common.add') : 'common.details'"
-    @ok="onEditEnd"
+    :on-ok="onEditEnd"
     cancel-text="common.close"
     max-height="80"
     max-width="80"