@ithinkdt/ui 4.0.0-22 → 4.0.0-30

package/locale.d.ts

@@ -62,6 +62,9 @@ export interface UILocale {
             resetText: string
             cancelText: string
             selectFileText: string
+            validate: {
+                fileErrorMessage: string
+            }
         }
         filter: {
             submitText: string

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ithinkdt/ui",
-  "version": "4.0.0-22",
+  "version": "4.0.0-30",
   "type": "module",
   "license": "MIT",
   "description": "iThinkDT UI",
@@ -63,7 +63,7 @@
     "sortablejs": "^1.15.6",
     "@types/sortablejs": "^1.15.8",
     "nanoid": "^5.1.6",
-    "@ithinkdt/common": "^4.0.0-12"
+    "@ithinkdt/common": "^4.0.0-30"
   },
   "peerDependencies": {
     "@ithinkdt/page": ">=4.0",
@@ -82,13 +82,13 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue-jsx": "^5.1.1",
-    "ithinkdt-ui": "^1.7.3",
+    "ithinkdt-ui": "^1.8.0",
     "typescript": "~5.9.3",
     "unocss": ">=66.5.4",
-    "vite": "npm:rolldown-vite@^7.1.17",
+    "vite": "npm:rolldown-vite@^7.1.19",
     "vue": "^3.5.22",
-    "vue-router": "^4.6.0",
-    "@ithinkdt/page": "^4.0.0-14"
+    "vue-router": "^4.6.3",
+    "@ithinkdt/page": "^4.0.0-30"
   },
   "scripts": {
     "release": "pnpm publish --no-git-checks"

package/src/components/Checkboxes.jsx

@@ -3,7 +3,7 @@ import { computed, defineComponent, ref, watch } from 'vue'
 
 import { useI18n } from '../use-i18n.js'
 
-export const NCheckboxes = defineComponent({
+export const NCheckboxes = /* @__PURE__ */ defineComponent({
     name: 'Checkboxes',
     inheritAttrs: false,
     props: {

package/src/components/DataTable.jsx

@@ -125,10 +125,7 @@ export const DataTable = /* @__PURE__ */ defineComponent({
             type: Array,
         },
     },
-    emits: {
-        sort: () => true,
-        select: () => true,
-    },
+    emits: ['sort', 'select', 'custom'],
     setup(props, { slots, emit, expose }) {
         const { keyField } = inject(PAGE_INJECTION)
 
@@ -207,6 +204,13 @@ export const DataTable = /* @__PURE__ */ defineComponent({
             emit('select', keys)
         }
 
+        const onColumnResize = (resizedWidth, limitedWidth, column) => {
+            emit('custom', {
+                key: column.key,
+                width: resizedWidth,
+            })
+        }
+
         return () => (
             <NDataTable
                 class={cls}
@@ -220,6 +224,7 @@ export const DataTable = /* @__PURE__ */ defineComponent({
                 checkedRowKeys={props.selectedKeys}
                 onUpdateSorter={onUpdateSorter}
                 onUpdateCheckedRowKeys={onUpdateCheckedRowKeys}
+                onUnstableColumnResize={onColumnResize}
             >
                 {slots}
             </NDataTable>

package/src/components.d.ts

@@ -157,6 +157,7 @@ export type DataTableProps<Data extends {}, KeyField extends keyof Data>
 export type DataTableEmits<Data extends {}, KeyField extends keyof Data> = {
     (e: 'sort', param: SortParams<Data>): void
     (e: 'select', param: Data[KeyField][]): void
+    (e: 'custom', params: { key: string, width: number }): void
 }
 
 export type DataTableInst<Data extends {}, KeyField extends keyof Data> = NDataTableInst & {
@@ -182,7 +183,7 @@ export declare function useDataTableDrag<T>(
     { data, onSort, ...options }: {
         data: MaybeRef<T[]>
         onSort: (info: { from: number, to: number }) => void
-    } & Omit<Sortable.Options, 'onSort'>
+    } & Omit<Sortable.Options, 'onSort'>,
 ): void
 
 export type DataPaginationProps = (PageParams | { page: PageParams }) & {
@@ -302,7 +303,7 @@ export declare function DataLocaleInput(
 export declare function useLocaleEdit(
     title: VNodeChild | (() => VNodeChild),
     onSubmit: (data: Record<string, string | undefined>) => void,
-    defaultRows?: MaybeRef<number | undefined>
+    defaultRows?: MaybeRef<number | undefined>,
 ): {
     open(this: void, data: MaybePromise<Record<string, string | undefined>>, readonly?: boolean): PromiseLike<Record<string, string | undefined>>
     setSupports(this: void, supports: { label: string, value: string, required?: boolean }[]): void

package/src/page.d.ts

@@ -1,10 +1,11 @@
 import {
-    CheckboxProps, DatePickerProps, DatePickerSlots,
+    CheckboxProps,
+    DatePickerProps, DatePickerSlots,
     DrawerContentProps, DrawerProps,
     InputNumberProps, InputNumberSlots, InputProps, InputSlots,
     ModalOptions,
     SelectGroupOption, SelectOption, SelectProps, SelectSlots,
-    UploadFileInfo,
+    UploadFileInfo, UploadProps,
 } from 'ithinkdt-ui'
 import { MaybeRef, VNode, VNodeProps } from 'vue'
 
@@ -75,6 +76,20 @@ declare module '@ithinkdt/page' {
                 max?: number | undefined
                 accept?: string | undefined
                 maxSize?: number | undefined
+                onBeforeUpload?: UploadProps['onBeforeUpload']
+            } & VNodeProps>
+            slots?: {
+                default?: (() => VNode[]) | undefined
+            }
+        }
+        upload: {
+            props?: DeepMaybeRef<{
+                type?: 'file' | 'image' | undefined
+                multiple?: boolean | undefined
+                max?: number | undefined
+                accept?: string | undefined
+                maxSize?: number | undefined
+                onBeforeUpload?: UploadProps['onBeforeUpload']
             } & VNodeProps>
             slots?: {
                 default?: (() => VNode[]) | undefined
@@ -142,6 +157,7 @@ export declare function createPageFormHelper(options?: {
     uploadFile?: (file: File, options?: {
         onProgress?: ((percent: number) => void) | undefined
     }) => Promise<string>
+    getFileInfos?: (files: string[]) => Promise<UploadFileInfo[]>
 }): PageOptions['getFormItemRenderer']
 export declare function createPageTableHelper(options?: {
     getUsersByUsername?: (usernames: string[]) => Promise<{ username: string, nickname: string }[]>

package/src/page.jsx

@@ -1,10 +1,10 @@
+import { until } from '@vueuse/core'
 import { format } from 'date-fns'
 import {
     NButton, NCheckbox, NColorPicker, NDatePicker, NDrawer, NDrawerContent, NFlex, NInput,
-    NInputNumber, NModal, NScrollbar, NSelect, NText, NUpload,
-    useMessage,
+    NInputNumber, NModal, NScrollbar, NSelect, NText, NUpload, useMessage,
 } from 'ithinkdt-ui'
-import { defineComponent, h, mergeProps, unref } from 'vue'
+import { computed, defineComponent, h, mergeProps, shallowRef, unref } from 'vue'
 
 import { useDict, useDictMap } from '@ithinkdt/common/dict'
 
@@ -14,64 +14,68 @@ import { useI18n } from './use-i18n.js'
 const mapProps = (props) => {
     return Object.fromEntries(Object.entries(props || {}).map(([prop, value]) => [prop, unref(value)]))
 }
-export function createPageFormHelper({
-    getUserGroups, getUsersByGroup, getUsersByDept, getUsersByUsername, uploadFile,
-}) {
-    const SimpleUpload = defineComponent({
-        name: 'SimpleUpload',
-        props: {
-            type: { type: String, default: 'file' }, // file | image
-            multiple: { type: Boolean, default: false },
-            max: { type: Number, default: undefined },
-            accept: { type: String, default: undefined },
-            maxSize: { type: Number, default: undefined }, // MB
-            disabled: { type: Boolean, default: undefined },
-            fileList: { type: Array, default: () => [] },
-            onUpdateFileList: { type: [Array, Function] },
-        },
-        setup(props, { slots }) {
-            const { t } = useI18n()
 
-            const message = useMessage()
-            const customRequest = computed(() => props.customRequest || (
-                async ({ file, onProgress, onFinish, onError }) => {
-                    uploadFile(file, percent => onProgress({ percent }))
-                        .then((id) => {
-                            file.file.fileId = id
-                            onFinish()
-                        }).catch((error) => {
-                            message.success(error.message)
-                            onError(error)
-                        })
-                }
-            ))
-            return () => {
-                const { type, onUpdateFileList, ...props0 } = props
-                return (
-                    <NUpload
-                        {...props0}
-                        onFinish={({ file, event }) => {
-                            props0.onFinish?.({ file, event })
-                            return {
-                                ...file,
-                                id: file.file.fileId,
-                            }
-                        }}
-                        customRequest={customRequest.value}
-                        listType={type === 'image' ? 'image-card' : 'text'}
-                        accept={props0.accept ?? type === 'image' ? 'image/*' : undefined}
-                        onUpdate:fileList={onUpdateFileList}
-                    >
-                        {{
-                            default: () => <NButton disabled={props.disabled}>{t('common.page.form.selectFileText')}</NButton>,
-                            ...slots,
-                        }}
-                    </NUpload>
-                )
+const SimpleUpload = /* @__PURE__ */ defineComponent({
+    name: 'SimpleUpload',
+    props: {
+        type: { type: String, default: 'file' }, // file | image
+        multiple: { type: Boolean, default: false },
+        max: { type: Number, default: undefined },
+        accept: { type: String, default: undefined },
+        maxSize: { type: Number, default: undefined }, // MB
+        disabled: { type: Boolean, default: undefined },
+        fileList: { type: Array, default: () => [] },
+        onUpdateFileList: { type: [Array, Function] },
+        uploadFile: { type: Function },
+    },
+    setup(props, { slots, expose }) {
+        const { t } = useI18n()
+        SimpleUpload.t = t
+
+        const message = useMessage()
+        const customRequest = computed(() => props.customRequest || (
+            ({ file, onProgress, onFinish, onError }) => {
+                props.uploadFile(file.file, percent => onProgress({ percent }))
+                    .then((id) => {
+                        file.file.fileId = id
+                        onFinish()
+                    }).catch((error) => {
+                        message.error(error.message)
+                        onError(error)
+                    })
             }
-        },
-    })
+        ))
 
+        const inst = ref()
+        expose({
+            submit() {
+                return until(inst).toBeTruthy().then(inst => inst.submit())
+            },
+        })
+        return () => {
+            const { type, onUpdateFileList, ...props0 } = props
+            return (
+                <NUpload
+                    {...props0}
+                    ref={inst}
+                    customRequest={customRequest.value}
+                    listType={type === 'image' ? 'image-card' : 'text'}
+                    accept={props0.accept ?? type === 'image' ? 'image/*' : undefined}
+                    onUpdate:fileList={onUpdateFileList}
+                >
+                    {{
+                        default: () => <NButton disabled={props.disabled}>{t('common.page.form.selectFileText')}</NButton>,
+                        ...slots,
+                    }}
+                </NUpload>
+            )
+        }
+    },
+})
+
+export function createPageFormHelper({
+    getUserGroups, getUsersByGroup, getUsersByDept, getUsersByUsername, uploadFile, getFileInfos,
+}) {
     return {
         input: () => (
             { slots, props },
@@ -298,9 +302,10 @@ export function createPageFormHelper({
             ) => {
                 props = mapProps(props)
                 if (readonly) {
-                    if (modelValue.length === 0) return
+                    console.warn(`[file] 原则上此组建不应该显示在详情中`)
+                    if (fileList.value.length === 0) return
                     return (
-                        <NFlex gap="8" wrap>
+                        <NFlex gap="8" vertical>
                             {modelValue.map(it => (
                                 <a
                                     key={it.id}
@@ -318,11 +323,97 @@ export function createPageFormHelper({
                 return h(SimpleUpload, {
                     ...props,
                     ...params,
+                    defaultUpload: false,
+                    uploadFile,
                     fileList: modelValue,
                     onUpdateFileList: onUpdateValue,
                 }, slots)
             }
         },
+        upload: () => {
+            let lastModelValue = null
+            const idMap = new Map()
+            const fileMap = new Map()
+            const fileList = shallowRef([])
+            let key = 0
+
+            const update = (ids) => {
+                const key0 = ++key
+                fileList.value = ids.map(id => fileMap.get(id)).filter(Boolean)
+                const ids0 = ids.filter(id => !fileMap.has(id))
+                Promise.resolve(ids0.length > 0 ? getFileInfos(ids0) : [])
+                    .then((res) => {
+                        if (key0 !== key) return
+                        fileList.value = ids.map(id => fileMap.get(id) || res.find(it => it.id === id))
+                        fileMap.clear()
+                        for (const it of fileList.value) {
+                            fileMap.set(it.id, it)
+                        }
+                    })
+            }
+
+            let inst
+            const renderer = (
+                { slots, props },
+                { modelValue, 'onUpdate:modelValue': onUpdateValue, required, readonly, ...params },
+            ) => {
+                const props0 = mapProps(props)
+                inst = (props0.ref ??= shallowRef())
+                if (lastModelValue !== modelValue) {
+                    lastModelValue = modelValue
+                    update(modelValue?.split(',') ?? [])
+                }
+                if (readonly) {
+                    if (fileList.value.length === 0) return
+                    return (
+                        <NFlex gap="8" vertical>
+                            {fileList.value.map(it => (
+                                <a
+                                    key={it.id}
+                                    href={it.url}
+                                    target="_blank"
+                                    rel="noreferrer"
+                                    title={it.name}
+                                    style="max-width: 100px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: inline-block"
+                                >
+                                    {it.name}
+                                </a>
+                            ))}
+                        </NFlex>
+                    )
+                }
+                return h(SimpleUpload, {
+                    ...props0,
+                    ...params,
+                    uploadFile,
+                    fileList: fileList.value,
+                    onUpdateFileList: (fileList0 = []) => {
+                        fileMap.clear()
+                        for (const f of fileList0) {
+                            if (f.file.fileId) {
+                                idMap.set(f.id, f.file.fileId)
+                            }
+
+                            if (f.file.fileId) fileMap.set(f.file.fileId, f)
+                            else fileMap.set(f.id, f)
+                        }
+                        fileList.value = fileList0
+                        const ids = fileList.value.map(f => idMap.get(f.id) || f.id).join(',') || null
+                        onUpdateValue(ids)
+                    },
+                }, slots)
+            }
+            return {
+                renderer,
+                beforeSubmit: async () => {
+                    await inst?.submit()
+                    await until(fileList).toMatch(list => list.every(file => !['pending', 'uploading'].includes(file.status)))
+                    if (fileList.value.some(file => file.status === 'error')) {
+                        return SimpleUpload.t('common.page.form.validate.fileErrorMessage')
+                    }
+                },
+            }
+        },
         user: () => {
             let users, groups, depts
             return (
@@ -555,7 +646,7 @@ export function createModalHelper() {
         const footer0 = footer
             ? () => footer
             : footer === null
-                ? () => null
+                ? null
                 : () => (
                         <NFlex justify="end" gap="16">
                             {cancelText === null ? undefined : <NButton onClick={onCancel} disabled={cancelDisabled} loading={cancelLoading} style="min-width: 60px">{cancelText}</NButton>}
@@ -598,6 +689,7 @@ export function createModalHelper() {
             )
         }
 
+        const { bodyContentClass, bodyContentStyle, ...options2 } = options
         return (
             <NDrawer
                 show={visible}
@@ -613,9 +705,14 @@ export function createModalHelper() {
                 onAfterEnter={onAfterOpen}
                 onAfterLeave={onAfterClose}
                 style={style}
-                {...options}
+                {...options2}
             >
-                <NDrawerContent closable={closable} nativeScrollbar={nativeScrollbar ?? false}>
+                <NDrawerContent
+                    closable={closable}
+                    nativeScrollbar={nativeScrollbar ?? false}
+                    bodyContentClass={bodyContentClass}
+                    bodyContentStyle={bodyContentStyle}
+                >
                     {{
                         default: () => content,
                         header: () => title,