@ithinkdt/ui 4.0.0-35 → 4.0.0-37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ithinkdt/ui",
-  "version": "4.0.0-35",
+  "version": "4.0.0-37",
   "type": "module",
   "license": "MIT",
   "description": "iThinkDT UI",
@@ -88,7 +88,7 @@
     "vite": "npm:rolldown-vite@^7.1.19",
     "vue": "^3.5.22",
     "vue-router": "^4.6.3",
-    "@ithinkdt/page": "^4.0.0-33"
+    "@ithinkdt/page": "^4.0.0-34"
   },
   "scripts": {
     "release": "pnpm publish --no-git-checks"

package/src/page.jsx

@@ -4,6 +4,7 @@ import {
     NButton, NCheckbox, NColorPicker, NDatePicker, NDrawer, NDrawerContent, NFlex, NInput,
     NInputNumber, NModal, NScrollbar, NSelect, NText, NUpload, useMessage,
 } from 'ithinkdt-ui'
+import { useFormItem } from 'ithinkdt-ui/es/_mixins'
 import { computed, defineComponent, h, mergeProps, ref, shallowRef, unref } from 'vue'
 
 import { useDict, useDictMap } from '@ithinkdt/common/dict'
@@ -19,6 +20,7 @@ const SimpleUpload = /* @__PURE__ */ defineComponent({
     name: 'SimpleUpload',
     props: {
         type: { type: String, default: 'file' }, // file | image
+        size: { type: String, default: 'medium' },
         multiple: { type: Boolean, default: false },
         max: { type: Number, default: undefined },
         accept: { type: String, default: undefined },
@@ -32,6 +34,8 @@ const SimpleUpload = /* @__PURE__ */ defineComponent({
         const { t } = useI18n()
         SimpleUpload.t = t
 
+        const formItem = useFormItem(props)
+
         const message = useMessage()
         const customRequest = computed(() => props.customRequest || (
             ({ file, onProgress, onFinish, onError }) => {
@@ -52,6 +56,11 @@ const SimpleUpload = /* @__PURE__ */ defineComponent({
                 return until(inst).toBeTruthy().then(inst => inst.submit())
             },
         })
+
+        const onUpdate = (fileList) => {
+            props.onUpdateFileList?.(fileList)
+            nextTick(() => formItem.nTriggerFormChange())
+        }
         return () => {
             const { type, onUpdateFileList, ...props0 } = props
             return (
@@ -61,10 +70,16 @@ const SimpleUpload = /* @__PURE__ */ defineComponent({
                     customRequest={customRequest.value}
                     listType={type === 'image' ? 'image-card' : 'text'}
                     accept={props0.accept ?? type === 'image' ? 'image/*' : undefined}
-                    onUpdate:fileList={onUpdateFileList}
+                    onUpdate:fileList={onUpdate}
                 >
                     {{
-                        default: () => <NButton disabled={props.disabled}>{t('common.page.form.selectFileText')}</NButton>,
+                        default: () => (
+                            <NButton disabled={formItem.mergedDisabledRef.value} size={formItem.mergedSizeRef.value}>
+                                {
+                                    t('common.page.form.selectFileText')
+                                }
+                            </NButton>
+                        ),
                         ...slots,
                     }}
                 </NUpload>
@@ -125,12 +140,12 @@ export function createPageFormHelper({
                 }
                 if (readonly) {
                     if (props.multiple) {
-                        const items = modelValue ? options0?.filter(item => modelValue.includes(item[props.valueField || 'value'])) : []
+                        const items = modelValue?.map(it => options0?.find(it2 => it2[props.valueField || 'value'] === it)) ?? []
                         return (
                             <NText depth={2} style="line-height: 1.25">
                                 {
                                     items.map((it, i, arr) => {
-                                        const vn = props.renderLabel ? props.renderLabel(it) ?? '' : it[props.labelField || 'label'] ?? ''
+                                        const vn = it ? (props.renderLabel ? props.renderLabel(it) ?? '' : it[props.labelField || 'label'] ?? '') : (modelValue[i] ?? '')
                                         return (
                                             <span key={it[props.valueField || 'value']}>
                                                 {vn}
@@ -143,7 +158,7 @@ export function createPageFormHelper({
                         )
                     } else {
                         const it = options0?.find(item => item[props.valueField || 'value'] === modelValue)
-                        return <NText depth={2} style="line-height: 1.25">{it ? props.renderLabel ? props.renderLabel(it) ?? '' : it[props.labelField || 'label'] ?? '' : ''}</NText>
+                        return <NText depth={2} style="line-height: 1.25">{it ? (props.renderLabel ? props.renderLabel(it) ?? '' : it[props.labelField || 'label'] ?? '') : (modelValue ?? '')}</NText>
                     }
                 }
 
@@ -200,12 +215,12 @@ export function createPageFormHelper({
                     }
                 }
                 if (readonly) {
-                    const items = options0?.filter(item => modelValue.includes(item[props.valueField ?? 'value']))
+                    const items = modelValue?.map(it => options0?.find(it2 => it2[props.valueField || 'value'] === it)) ?? []
                     return (
                         <NText depth={2} style="line-height: 2.4">
                             {
                                 items.map((it, i, arr) => {
-                                    const vn = it[props.labelField ?? 'label'] ?? ''
+                                    const vn = it ? (it[props.labelField ?? 'label'] ?? '') : (modelValue[i] ?? '')
                                     return (
                                         <span key={it[props.valueField ?? 'value']}>
                                             {vn}
@@ -248,7 +263,7 @@ export function createPageFormHelper({
 
                 if (readonly) {
                     const it = options0?.find(item => item[props.valueField ?? 'value'] === modelValue)
-                    return <NText depth={2} style="line-height: 1.25">{it?.[props.labelField ?? 'label'] ?? ''}</NText>
+                    return <NText depth={2} style="line-height: 1.25">{it ? (it[props.labelField ?? 'label'] ?? '') : (modelValue ?? '')}</NText>
                 }
 
                 return h(
@@ -406,7 +421,7 @@ export function createPageFormHelper({
             return {
                 renderer,
                 beforeSubmit: async () => {
-                    await inst?.submit()
+                    await inst?.value?.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')