@ithinkdt/page 4.2.2 → 4.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ithinkdt/page",
-  "version": "4.2.2",
+  "version": "4.2.3",
   "type": "module",
   "license": "MIT",
   "description": "iThinkDT Page",
@@ -49,9 +49,9 @@
   },
   "devDependencies": {
     "typescript": "~6.0.3",
-    "vite": "^8.2.1",
-    "vue": "^3.5.41",
-    "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/modal.d.ts

@@ -3,16 +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)
-    footerExtra?: 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>

package/src/modal.js

@@ -1,21 +1,25 @@
 import { tryOnScopeDispose } from '@vueuse/core'
 import { nanoid } from 'nanoid'
-import { computed, defineComponent, h, hasInjectionContext, inject, isVNode, onActivated, onDeactivated, 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, footerExtra, onConfirm, onCancel, onClose, title, ...options }) {
-    const { i18n: useI18n, getModalRenderer, addModal } = (hasInjectionContext() ? inject(PAGE_INJECTION, pageInjection) : pageInjection) ?? {}
+    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.')
     }
@@ -64,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?.()
@@ -115,14 +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),
-                    footerExtra: isVNode(footerExtra) ? footerExtra : footerExtra?.(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,
+    }
+}