@ithinkdt/page 4.2.1 → 4.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ithinkdt/page",
-  "version": "4.2.1",
+  "version": "4.2.3",
   "type": "module",
   "license": "MIT",
   "description": "iThinkDT Page",
@@ -39,8 +39,8 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@vueuse/core": "^14.3.0",
-    "nanoid": "^6.0.0",
+    "@vueuse/core": "^14.4.0",
+    "nanoid": "^6.0.1",
     "@ithinkdt/common": "~4.2.1"
   },
   "peerDependencies": {
@@ -49,9 +49,9 @@
   },
   "devDependencies": {
     "typescript": "~6.0.3",
-    "vite": "^8.1.5",
-    "vue": "^3.5.40",
-    "vue-router": "^5.2.0"
+    "vite": "^8.2.2",
+    "vue": "^3.5.42",
+    "vue-router": "^5.3.0"
   },
   "scripts": {
     "release": "pnpm publish --no-git-checks"

package/src/crud.d.ts

@@ -1,9 +1,10 @@
 import { MaybeRef, VNodeChild } from 'vue'
 
-import { Awaitable, Falsely, MaybeArray } from '@ithinkdt/common/typed'
+import { Awaitable, Falsely, MaybeArray, MaybePromise } from '@ithinkdt/common/typed'
 
 import { PresetKeyField, _DataWithPresetKeyField } from './data-source.js'
 import { FormItemHelper, FormItemOptions, FormModalOptionsBase } from './form.js'
+import { ModalRenderParam } from './modal.js'
 
 export interface CrudConfirmParams {
     title: () => VNodeChild
@@ -71,13 +72,18 @@ type SimpleCrudOptions<
     submitText?: VNodeChild | (() => VNodeChild)
     cancelText?: VNodeChild | (() => VNodeChild)
     action?: (
-        params: {
-            onSubmit(this: void): Promise<boolean>
-            onCancel(this: void): void
-            onClose(this: void): void
-        } & ({ model: CreateParams, type: 'create' }
-            | { model: UpdateParams, type: 'edit' }
-            | { model: DetailEntity, type: 'view' }),
+        params: Omit<ModalRenderParam, 'onConfirm'> & {
+            onSubmit(this: void): MaybePromise<boolean | void>
+        } & ({ /** @reactively */ model: CreateParams, type: 'create' }
+            | { /** @reactively */ model: UpdateParams, type: 'edit' }
+            | { /** @reactively */ model: DetailEntity, type: 'view' }),
+    ) => VNodeChild
+    actionExtra?: (
+        params: Omit<ModalRenderParam, 'onConfirm'> & {
+            onSubmit(this: void): MaybePromise<boolean | void>
+        } & ({ /** @reactively */ model: CreateParams, type: 'create' }
+            | { /** @reactively */ model: UpdateParams, type: 'edit' }
+            | { /** @reactively */ model: DetailEntity, type: 'view' }),
     ) => VNodeChild
     resizable?: MaybeRef<boolean | undefined>
     draggable?: MaybeRef<boolean | undefined>

package/src/crud.js

@@ -100,6 +100,12 @@ function _useSimpleCrudModal(crudType, getItems, request, options) {
                 type: crudType,
             })
             : undefined,
+        actionExtra: options.actionExtra
+            ? params => options.actionExtra({
+                ...params,
+                type: crudType,
+            })
+            : undefined,
     })
 
     return {

package/src/form.d.ts

@@ -2,7 +2,7 @@ import { ComputedRef, MaybeRef, MaybeRefOrGetter, VNodeChild } from 'vue'
 
 import { Awaitable, MaybeArray, MaybePromise } from '@ithinkdt/common'
 
-import { ModalDialogOptions, ModalDrawerOptions, ModalReturns } from './modal.js'
+import { ModalDialogOptions, ModalDrawerOptions, ModalRenderParam, ModalReturns } from './modal.js'
 
 export type ValidationTrigger = MaybeArray<'input' | 'blur' | (string & {})>
 
@@ -248,10 +248,18 @@ export type FormModalOptions<Model extends {}> = FormModalOptionsBase & FormHelp
     submitText?: VNodeChild | (() => VNodeChild)
     readonly?: MaybeRefOrGetter<boolean>
     action?: (
-        params: {
-            onSubmit(this: void): Promise<boolean>
-            onCancel(this: void): void
-            onClose(this: void): void
+        params: Omit<ModalRenderParam, 'onConfirm'> & {
+            onSubmit(this: void): MaybePromise<boolean | void>
+            /**
+             * 数据
+             * @reactively
+             */
+            model: Partial<Model>
+        },
+    ) => VNodeChild
+    actionExtra?: (
+        params: Omit<ModalRenderParam, 'onConfirm'> & {
+            onSubmit(this: void): MaybePromise<boolean | void>
             /**
              * 数据
              * @reactively

package/src/form.js

@@ -502,7 +502,7 @@ export class ValidationError extends Error {
     }
 }
 
-export function useFormModal({ initial, items, rules, onSubmit, submitText, cancelText, action, readonly = false, ...options }) {
+export function useFormModal({ initial, items, rules, onSubmit, submitText, cancelText, action, actionExtra, readonly = false, ...options }) {
     const { i18n: useI18n, getFormRenderer } = (hasInjectionContext() ? inject(PAGE_INJECTION, pageInjection) : pageInjection) ?? {}
     if (!getFormRenderer) {
         throw new Error('`useFormModal` not found `getFormRenderer` in injection, please install the page plugin.')
@@ -583,7 +583,10 @@ export function useFormModal({ initial, items, rules, onSubmit, submitText, canc
             validation2.value = {}
         },
         footer: action
-            ? params => action({ ...params, model: form.model })
+            ? params => action({ ...params, onSubmit: params.onConfirm, model: form.model })
+            : undefined,
+        footerExtra: actionExtra
+            ? params => actionExtra({ ...params, onSubmit: params.onConfirm, model: form.model })
             : undefined,
     })
 

package/src/modal.d.ts

@@ -3,15 +3,16 @@ import { CSSProperties, ComputedRef, DefineComponent, MaybeRef, VNodeChild } fro
 import { MaybePromise } from '@ithinkdt/common'
 
 export interface ModalOptionsBase {
-    title?: VNodeChild | (() => VNodeChild)
-    content: VNodeChild | (() => VNodeChild)
+    title?: VNodeChild | ((params: Omit<ModalRenderParam, 'title' | 'content' | 'footer' | 'footerExtra'>) => VNodeChild)
+    content: VNodeChild | ((params: Omit<ModalRenderParam, 'content'>) => VNodeChild)
     confirmText?: VNodeChild | (() => VNodeChild)
     confirmDisabled?: MaybeRef<boolean | undefined>
     confirmLoading?: MaybeRef<boolean | undefined>
     cancelText?: VNodeChild | (() => VNodeChild)
     cancelDisabled?: MaybeRef<boolean | undefined>
     cancelLoading?: MaybeRef<boolean | undefined>
-    footer?: VNodeChild | ((params: ModalRenderParam) => VNodeChild)
+    footer?: VNodeChild | ((params: Omit<ModalRenderParam, 'content' | 'footer' | 'footerExtra'>) => VNodeChild)
+    footerExtra?: VNodeChild | ((params: Omit<ModalRenderParam, 'content' | 'footer' | 'footerExtra'>) => VNodeChild)
     closable?: MaybeRef<boolean | undefined>
     closeOnEsc?: MaybeRef<boolean | undefined>
     showMask?: MaybeRef<boolean | undefined>
@@ -41,6 +42,7 @@ export interface ModalRenderParam {
     title: VNodeChild
     content: VNodeChild
     footer: VNodeChild
+    footerExtra: VNodeChild
     visible: boolean
     loading: boolean | undefined
     resizable: boolean | undefined

package/src/modal.js

@@ -1,21 +1,25 @@
 import { tryOnScopeDispose } from '@vueuse/core'
 import { nanoid } from 'nanoid'
-import { computed, defineComponent, h, hasInjectionContext, inject, isVNode, provide, reactive, ref, toValue, unref } from 'vue'
+import { computed, defineComponent, h, hasInjectionContext, inject, onActivated, onDeactivated, provide, reactive, ref, renderSlot, toValue, unref, useSlots } from 'vue'
 
-import { IgnoreRejectionError, PAGE_INJECTION, pageInjection } from './plugin.js'
+import { IgnoreRejectionError, PAGE_INJECTION, initModals, pageInjection } from './plugin.js'
 
+const ModalProviderInjectionKey = Symbol('__MODAL_PROVIDER__')
 export const ModalProvider = defineComponent({
     name: 'ModalProvider',
     setup() {
-        const { __modals } = inject(PAGE_INJECTION) ?? {}
-        return () => __modals.value
+        const modalProviderInjection = inject(ModalProviderInjectionKey, () => inject(PAGE_INJECTION, pageInjection), true)
+        const { modals, addModal } = initModals()
+        provide(ModalProviderInjectionKey, { ...modalProviderInjection, __modals: modals, addModal, __isGlobal: false })
+        const slots = useSlots()
+        return () => [renderSlot(slots, 'default'), ...(modalProviderInjection.__isGlobal === false ? [] : pageInjection.__modals.value), ...modals.value]
     },
 })
 
 const ModalInjectionKey = Symbol('__MODAL__')
 
-export function useModal({ content, confirmText, confirmLoading, cancelText, cancelLoading, footer, onConfirm, onCancel, onClose, title, ...options }) {
-    const { i18n: useI18n, getModalRenderer, addModal } = (hasInjectionContext() ? inject(PAGE_INJECTION, pageInjection) : pageInjection) ?? {}
+export function useModal({ content, confirmText, confirmLoading, cancelText, cancelLoading, footer, footerExtra, onConfirm, onCancel, onClose, title, ...options }) {
+    const { i18n: useI18n, getModalRenderer, addModal } = (hasInjectionContext() ? inject(ModalProviderInjectionKey, pageInjection) : pageInjection) ?? {}
     if (!getModalRenderer) {
         throw new Error('`useModal` not found `getModalRenderer` in injection, please install the page plugin.')
     }
@@ -24,6 +28,14 @@ export function useModal({ content, confirmText, confirmLoading, cancelText, can
 
     const title2 = ref()
     const visible = ref(false)
+    let visibleSaved = visible.value
+    onActivated(() => {
+        visible.value = visibleSaved
+    })
+    onDeactivated(() => {
+        visibleSaved = visible.value
+        visible.value = false
+    })
     let resolve0, reject0
     const open = (title0) => {
         if (visible.value) {
@@ -56,6 +68,8 @@ export function useModal({ content, confirmText, confirmLoading, cancelText, can
         ...options,
         confirmLoading: computed(() => unref(confirmLoading) ?? confirming.value),
         cancelLoading: computed(() => unref(cancelLoading) ?? canceling.value),
+        confirmText: computed(() => toValue(confirmText ?? (confirmText === null ? null : t('common.confirm.defaultOk')))),
+        cancelText: computed(() => toValue(cancelText ?? (cancelText === null ? null : t('common.page.form.cancelText')))),
         visible,
         onAfterOpen: () => {
             options.onAfterOpen?.()
@@ -107,13 +121,16 @@ export function useModal({ content, confirmText, confirmLoading, cancelText, can
             })
 
             return () => {
+                const title0 = title2.value ?? (typeof title === 'function' ? title(renderParam) : title)
+                const footer0 = typeof footer === 'function' ? footer({ ...renderParam, title: title0 }) : footer
+                const footerExtra0 = typeof footerExtra === 'function' ? footerExtra({ ...renderParam, title: title0 }) : footerExtra
+                const content0 = typeof content === 'function' ? content({ ...renderParam, title: title0, footer: footer0, footerExtra: footerExtra0 }) : content
                 return renderModal({
                     ...renderParam,
-                    title: toValue(title2.value ?? title),
-                    content: toValue(content),
-                    footer: isVNode(footer) ? footer : footer === null ? null : footer?.(renderParam),
-                    confirmText: toValue(confirmText ?? (confirmText === null ? null : t('common.confirm.defaultOk'))),
-                    cancelText: toValue(cancelText ?? (cancelText === null ? null : t('common.page.form.cancelText'))),
+                    title: title0,
+                    footer: footer0,
+                    footerExtra: footerExtra0,
+                    content: content0,
                 })
             }
         },

package/src/plugin.js

@@ -7,22 +7,9 @@ export class IgnoreRejectionError extends Error {}
 export let pageInjection
 export function plugin(app, options) {
     if (options.getModalRenderer) {
-        options.__modals = shallowRef([])
-        options.addModal = (modal) => {
-            if (!options.__modals.value.includes(modal)) {
-                options.__modals.value = [
-                    ...options.__modals.value,
-                    modal,
-                ]
-            }
-            return () => {
-                const index = options.__modals.value.indexOf(modal)
-                if (index !== -1) {
-                    options.__modals.value.splice(index, 1)
-                    options.__modals.value = [...options.__modals.value] // trigger reactivity
-                }
-            }
-        }
+        const { modals, addModal } = initModals()
+        options.__modals = modals
+        options.addModal = addModal
     }
     pageInjection = { keyField: 'key', ...options }
     app.provide(PAGE_INJECTION, pageInjection)
@@ -45,3 +32,26 @@ export const PageProvider = defineComponent(
         return () => renderSlot(slots, 'default')
     },
 )
+
+export function initModals() {
+    const modals = shallowRef([])
+    const addModal = (modal) => {
+        if (!modals.value.includes(modal)) {
+            modals.value = [
+                ...modals.value,
+                modal,
+            ]
+        }
+        return () => {
+            const index = modals.value.indexOf(modal)
+            if (index !== -1) {
+                modals.value.splice(index, 1)
+                modals.value = [...modals.value] // trigger reactivity
+            }
+        }
+    }
+    return {
+        modals,
+        addModal,
+    }
+}