feat: add useDefault

src/hooks/index.ts

@@ -1,4 +1,4 @@
 export * from './useBoolean'
 export * from './useEcharts'
 export * from './usePermission'
-export * from './refForm'
+export * from './useDefault'

src/hooks/refForm.ts

@@ -1,15 +0,0 @@
-export function refForm<T>(initValue: T) {
-  function jsonClone(value: T) {
-    return JSON.parse(JSON.stringify(value))
-  }
-  const target = ref<T>(initValue)
-
-  function setDefault() {
-    target.value = jsonClone(initValue)
-  }
-
-  return {
-    target,
-    setDefault,
-  }
-}

src/hooks/useDefault.ts

@@ -0,0 +1,15 @@
+/**
+ * Apply default value to a ref.
+ */
+export function useDefault<T>(defaultValue: T): Ref<T> {
+  const source: Ref<T | undefined | null> = ref()
+
+  return computed({
+    get() {
+      return source.value ?? defaultValue
+    },
+    set(value) {
+      source.value = value
+    },
+  })
+}

src/views/setting/account/components/TableModal.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { refForm, useBoolean } from '@/hooks'
+import { useBoolean, useDefault } from '@/hooks'
 import { fetchRoleList } from '@/service'
 
 interface Props {
@@ -19,7 +19,7 @@ const { bool: modalVisible, setTrue: showModal, setFalse: hiddenModal } = useBoo
 
 const { bool: submitLoading, setTrue: startLoading, setFalse: endLoading } = useBoolean(false)
 
-const { target: formModel, setDefault } = refForm<Entity.User>({
+const formModel = useDefault<Entity.User>({
   userName: '',
   gender: undefined,
   email: '',
@@ -46,7 +46,8 @@ async function openModal(type: ModalType = 'add', data: any) {
   getRoleList()
   const handlers = {
     async add() {
-      setDefault()
+      // @ts-expect-error undefined is safe
+      formModel.value = undefined
     },
     async view() {
       if (!data)

src/views/setting/menu/components/TableModal.vue

@@ -3,7 +3,7 @@ import type {
   FormItemRule,
 } from 'naive-ui'
 import HelpInfo from '@/components/common/HelpInfo.vue'
-import { refForm, useBoolean } from '@/hooks'
+import { useBoolean, useDefault } from '@/hooks'
 import { Regex } from '@/constants'
 import { fetchRoleList } from '@/service'
 
@@ -24,7 +24,7 @@ const emit = defineEmits<{
 const { bool: modalVisible, setTrue: showModal, setFalse: hiddenModal } = useBoolean(false)
 const { bool: submitLoading, setTrue: startLoading, setFalse: endLoading } = useBoolean(false)
 
-const { target: formModel, setDefault } = refForm<AppRoute.RowRoute>({
+const formModel = useDefault<AppRoute.RowRoute>({
   'name': '',
   'path': '',
   'id': -1,
@@ -61,7 +61,8 @@ async function openModal(type: ModalType = 'add', data: AppRoute.RowRoute) {
   showModal()
   const handlers = {
     async add() {
-      setDefault()
+      // @ts-expect-error undefined is safe
+      formModel.value = undefined
     },
     async view() {
       if (!data)