@ithinkdt/page 4.2.0 → 4.2.2

package/README.md

@@ -506,6 +506,7 @@ const rules = {
 | 属性/方法 | 说明 |
 |-----------|------|
 | `inModal` | 是否在模态框上下文内 |
+| `modalType` | 模态框类型, `dialog` \| `drawer` |
 | `visible` | 模态框可见状态 |
 | `close()` | 关闭模态框 |
 | `setTitle(title)` | 设置模态框标题 |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ithinkdt/page",
-  "version": "4.2.0",
+  "version": "4.2.2",
   "type": "module",
   "license": "MIT",
   "description": "iThinkDT Page",
@@ -39,9 +39,9 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@vueuse/core": "^14.3.0",
-    "nanoid": "^6.0.0",
-    "@ithinkdt/common": "~4.2.0"
+    "@vueuse/core": "^14.4.0",
+    "nanoid": "^6.0.1",
+    "@ithinkdt/common": "~4.2.1"
   },
   "peerDependencies": {
     "vue": ">=3.5",
@@ -49,9 +49,9 @@
   },
   "devDependencies": {
     "typescript": "~6.0.3",
-    "vite": "^8.1.4",
-    "vue": "^3.5.39",
-    "vue-router": "^5.1.0"
+    "vite": "^8.2.1",
+    "vue": "^3.5.41",
+    "vue-router": "^5.2.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/description.js

@@ -78,7 +78,7 @@ export function useDescriptionsHelper(
 
         ignoreDefaultEmptyRender_ ??= options?.ignoreDefaultEmptyRender
         const render0 = (model) => {
-            if (!unref(ignoreDefaultEmptyRender_) && renderEmptyValue && prop[0] !== '$' && isNone(model[prop])) {
+            if (renderEmptyValue && !unref(ignoreDefaultEmptyRender_) && prop[0] !== '$' && isNone(model[prop])) {
                 return renderEmptyValue(type_, 'description')
             }
             return render_(model)

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 & {})>
 
@@ -218,6 +218,7 @@ export interface FormRenderExtraOptions {
 
 export interface FormRenderParam extends FormRenderExtraOptions, Omit<FormHelper<Record<string, unknown>>, 'invalid'> {
     inModal: boolean
+    modalType: 'dialog' | 'drawer'
     readonly: boolean
     invalid: boolean
     handleSubmit(this: void, model: Record<string, unknown>): Promise<boolean | void>
@@ -247,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

@@ -84,7 +84,7 @@ export function useFormHelper(items, { initial: initial0, rules, onChange, inFil
 
         ignoreDefaultEmptyRender_ ??= options?.ignoreDefaultEmptyRender
         const render0 = (params, model) => {
-            if (!unref(ignoreDefaultEmptyRender_) && renderEmptyValue && name[0] !== '$' && params?.readonly && isNone(model[name])) {
+            if (renderEmptyValue && !unref(ignoreDefaultEmptyRender_) && name[0] !== '$' && params?.readonly && isNone(model[name])) {
                 return renderEmptyValue(type_, 'form')
             }
             return render_(params, model)
@@ -125,7 +125,7 @@ export function useFormHelper(items, { initial: initial0, rules, onChange, inFil
                 ),
             )
             let result2
-            if (!invalid.value && !prop0) {
+            if (!prop0 && !invalid.value) {
                 const ret = await beforeSubmit(prop)
                 result2 = ret[1]
             }
@@ -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.')
@@ -542,6 +542,7 @@ export function useFormModal({ initial, items, rules, onSubmit, submitText, canc
                 ...options,
                 readonly,
                 inModal: true,
+                modalType: unref(options.type) ?? 'dialog',
                 validation: validation.value,
                 restoreValidation: (props) => {
                     form.restoreValidation(props)
@@ -582,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

@@ -12,6 +12,7 @@ export interface ModalOptionsBase {
     cancelDisabled?: MaybeRef<boolean | undefined>
     cancelLoading?: MaybeRef<boolean | undefined>
     footer?: VNodeChild | ((params: ModalRenderParam) => VNodeChild)
+    footerExtra?: VNodeChild | ((params: ModalRenderParam) => 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
@@ -77,8 +79,14 @@ export declare function useModal(options: ModalDrawerOptions | ModalDialogOption
     ModalReturns
     & [open: ModalReturns['open'], close: ModalReturns['close'], visible: ComputedRef<boolean>]
 
-export declare function useModalRef():
-    { inModal: boolean, visible: ComputedRef<boolean>, close: ModalReturns['close'], setTitle: (title: ModalOptionsBase['title']) => void }
-    & [inModal: boolean, visible: ComputedRef<boolean>, close: ModalReturns['close'], setTitle: (title: ModalOptionsBase['title']) => void]
+export declare function useModalRef(): {
+    inModal: true
+    modalType: ComputedRef<'dialog' | 'drawer'>
+    visible: ComputedRef<boolean>
+    close: ModalReturns['close']
+    setTitle: (title: ModalOptionsBase['title']) => void
+} | {
+    inModal: false
+}
 
 export declare const ModalProvider: DefineComponent<{}>

package/src/modal.js

@@ -1,6 +1,6 @@
 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, isVNode, onActivated, onDeactivated, provide, reactive, ref, toValue, unref } from 'vue'
 
 import { IgnoreRejectionError, PAGE_INJECTION, pageInjection } from './plugin.js'
 
@@ -14,7 +14,7 @@ export const ModalProvider = defineComponent({
 
 const ModalInjectionKey = Symbol('__MODAL__')
 
-export function useModal({ content, confirmText, confirmLoading, cancelText, cancelLoading, footer, onConfirm, onCancel, onClose, title, ...options }) {
+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) ?? {}
     if (!getModalRenderer) {
         throw new Error('`useModal` not found `getModalRenderer` in injection, please install the page plugin.')
@@ -24,6 +24,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) {
@@ -100,6 +108,7 @@ export function useModal({ content, confirmText, confirmLoading, cancelText, can
         props: {},
         setup() {
             provide(ModalInjectionKey, {
+                modalType: computed(() => unref(renderParam.type) ?? 'dialog'),
                 visible,
                 close,
                 title2,
@@ -111,6 +120,7 @@ export function useModal({ content, confirmText, confirmLoading, cancelText, can
                     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'))),
                 })
@@ -130,10 +140,9 @@ export function useModal({ content, confirmText, confirmLoading, cancelText, can
 
 export function useModalRef() {
     const modal = inject(ModalInjectionKey, null)
-    const returns = [!!modal, modal?.visible, modal?.close, title2 => modal && (modal.title2.value = title2)]
-    returns.inModal = returns[0]
-    returns.visible = returns[1]
-    returns.close = returns[2]
-    returns.setTitle = returns[3]
-    return returns
+    return {
+        ...modal,
+        inModal: !!modal,
+        setTitle: (title2) => { modal && (modal.title2.value = title2) },
+    }
 }

package/src/rules.js

@@ -70,7 +70,7 @@ export function required(message, { required = true, trigger = ['input', 'blur',
         [requiredRuleSymbol]: true,
         trigger,
         validator: (value) => {
-            if (!unref(required) || typeof value === 'number' || typeof value === 'bigint' || typeof value === 'boolean') return
+            if (typeof value === 'number' || typeof value === 'bigint' || typeof value === 'boolean' || !unref(required)) return
             if (value === undefined || value === null) {
                 return message(value, { required: true })
             }

package/src/table.js

@@ -76,7 +76,7 @@ export function useTableHelper(columns, { customizable, actions, actionWidth, ac
 
         ignoreDefaultEmptyRender_ ??= options?.ignoreDefaultEmptyRender
         const render0 = (record, i) => {
-            if (!unref(ignoreDefaultEmptyRender_) && renderEmptyValue && prop[0] !== '$' && isNone(record[prop])) {
+            if (renderEmptyValue && !unref(ignoreDefaultEmptyRender_) && prop[0] !== '$' && isNone(record[prop])) {
                 return renderEmptyValue(type_, 'description')
             }
             return render_(record, i)
@@ -281,6 +281,9 @@ export function useTableHelper(columns, { customizable, actions, actionWidth, ac
                         prop: '$expand',
                         type: 'expand',
                         expandable: typeof expandable === 'function' ? expandable : undefined,
+                        width: 40,
+                        maxWidth: 40,
+                        resizable: false,
                         renderExpand,
                         hidden: computed(() => unref(expandable) === false),
                         fixed: 'left',
@@ -302,6 +305,7 @@ export function useTableHelper(columns, { customizable, actions, actionWidth, ac
                         width: 50,
                         maxWidth: 50,
                         visible: false,
+                        resizable: false,
                     },
                 )
             }