skyline-vue-admin 0.0.16 → 0.0.17

package/dist/components/edit/index.mjs

@@ -19,9 +19,9 @@ import "../../hooks/useReferenceArrayField.mjs";
 import { useTreeWithDetails as V } from "../../hooks/useTreeWithDetails.mjs";
 import "../../hooks/useFormGrid.mjs";
 import "../../hooks/useReferenceArrayInput.mjs";
+import { skyConfig as d } from "../../setup/index.mjs";
 import { EpDelete as W } from "../../icons/EpDelete.mjs";
 import { EpDocumentAdd as B } from "../../icons/EpDocumentAdd.mjs";
-import { skyConfig as d } from "../../setup/index.mjs";
 import { useAsyncState as c } from "@vueuse/core";
 import { ElCard as F, ElButton as y, ElPopconfirm as q, ElSkeleton as z, ElMessage as G } from "element-plus";
 import { useI18n as H } from "vue-i18n";

package/dist/components/file-multiple-input/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("element-plus/es/components/dialog/style/css");require("element-plus/es/components/form-item/style/css");require("element-plus/es/components/icon/style/css");require("element-plus/es/components/upload/style/css");const e=require("vue"),L=require("../../icons/EpPlus.cjs"),u=require("element-plus"),x=require("vue-router"),M=require("@vueuse/core");require("../../hooks/useUser.cjs");require("../../hooks/usePermission.cjs");require("../../hooks/useMenu.cjs");require("../../hooks/useTab.cjs");require("../../hooks/useRouteKeepAlive.cjs");require("../../hooks/useSize.cjs");require("../../hooks/useLang.cjs");require("../../hooks/useTheme.cjs");require("../../hooks/useList.cjs");require("../../hooks/useHiddenTitle.cjs");const _=require("../../hooks/useForm.cjs");require("../../hooks/useShow.cjs");require("../../hooks/useReferenceArrayField.cjs");require("../../hooks/useTreeWithDetails.cjs");const A=require("../../hooks/useFormGrid.cjs");require("../../hooks/useReferenceArrayInput.cjs");const h=require("../../setup/index.cjs"),D=require("../can-access/index.cjs"),T=require("../../icons/EpUploadFilled.cjs"),G=require("vue-i18n"),$=e.defineComponent({name:"SkyFileMultipleInput",inheritAttrs:!1,props:{reference:{type:String,required:!0},source:{type:String,required:!0},type:{type:String,default:"file"},dataId:{type:String,default:"id"},dataName:{type:String,default:"name"},dataUrl:{type:String,default:"url"},label:String,rules:Object,limit:{type:Number,default:1},fileList:{type:Array,default:()=>[]},autoUpload:{type:Boolean,default:!0}},setup(t,{slots:c,attrs:S}){const{t:s}=G.useI18n(),N=x.useRoute(),w=A.useFormGrid(),{formData:n,editData:f}=_.useForm(),U=e.computed(()=>t.label||t.source),r=e.shallowRef(t.fileList),d=e.useTemplateRef("uploadRef"),V=N.meta;f.value&&(n[t.source]=f.value[t.source]);const F=l=>{if(t.limit===1){d.value?.clearFiles();const a=l[0];a.uid=u.genFileId(),d.value?.handleStart(a),t.autoUpload&&d.value?.submit()}},E=()=>{const l=[];for(const a of r.value)if(a.id)l.push(a.id);else{const i=a.raw;i?.data?.id&&(a.id=i.data.id,l.push(i.data.id))}n[t.source]=l},o=e.ref(!1),m=e.ref(),b=l=>{m.value=l.url,o.value=!0};let v;const{isLoading:k}=M.useAsyncState(async()=>{const l=n[t.source];if(l){v=new AbortController;const a=await h.skyConfig.dataProvider?.getMany?.(t.reference,{ids:l,signal:v.signal});if(a?.data)return r.value=a.data.map(i=>({id:i[t.dataId],name:i[t.dataName],url:i[t.dataUrl]})),a}},void 0,{immediate:!0}),y=e.ref(""),g=e.shallowRef(),q=e.shallowRef(),p=e.ref(),I=e.ref(),P=async l=>{const a=await h.skyConfig.dataProvider?.getUploadConfig?.({file:l});a?.data&&(y.value=a.data.action,g.value=a.data.data,q.value=a.data.headers,p.value=a.data.method,I.value=a.data.name,l.data={id:a.data.file.id,name:a.data.file.name,url:a.data.file.url})},R=e.computed(()=>t.type==="image"?"image/*":void 0),C=e.computed(()=>t.type==="image"?"picture-card":"text");return()=>e.createVNode(D.SkyCanAccess,{resource:V.resource,action:["create","edit"],column:t.source},{default:()=>[e.createVNode(u.ElFormItem,{class:["sky-file-multiple-input",`is-${t.type}`],label:U.value,prop:t.source,rules:t.rules,style:w?`grid-area: ${t.source}`:""},{default:()=>[e.createVNode(u.ElUpload,e.mergeProps({ref:"uploadRef",action:y.value,method:p.value,name:t.name,withCredentials:t.withCredentials,multiple:t.limit>1,limit:t.limit,beforeUpload:P,onSuccess:E,onExceed:F,headers:q.value,data:g.value,listType:C.value,fileList:r.value,"onUpdate:file-list":l=>r.value=l,autoUpload:t.autoUpload,drag:t.type==="file",showFileList:!0,onPreview:b,accept:R.value},S),{default:()=>t.type==="image"?e.createVNode(u.ElIcon,null,{default:()=>[e.createVNode(L.EpPlus,null,null)]}):e.createVNode(e.Fragment,null,[e.createVNode(u.ElIcon,{class:"sky-file-multiple-input__icon"},{default:()=>[e.createVNode(T.EpUploadFilled,null,null)]}),e.createVNode("div",{class:"sky-file-multiple-input__text"},[s("upload.drop"),e.createVNode("em",null,[s("upload.click")])])]),file:l=>{if(c.default){const a=c.default();return e.withDirectives(e.h(e.Fragment,a.map(i=>e.cloneVNode(i,{...l}))),[[u.ElLoadingDirective,k.value]])}}}),e.createVNode(u.ElDialog,{appendToBody:!0,modelValue:o.value,"onUpdate:modelValue":l=>o.value=l},{default:()=>[e.createVNode("img",{class:"sky-file-multiple-input__img",src:m.value},null)]})]})]})}});exports.SkyFileMultipleInput=$;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("element-plus/es/components/form-item/style/css");const t=require("vue"),s=require("element-plus"),m=require("vue-router");require("../../hooks/useUser.cjs");require("../../hooks/usePermission.cjs");require("../../hooks/useMenu.cjs");require("../../hooks/useTab.cjs");require("../../hooks/useRouteKeepAlive.cjs");require("../../hooks/useSize.cjs");require("../../hooks/useLang.cjs");require("../../hooks/useTheme.cjs");require("../../hooks/useList.cjs");require("../../hooks/useHiddenTitle.cjs");const q=require("../../hooks/useForm.cjs");require("../../hooks/useShow.cjs");require("../../hooks/useReferenceArrayField.cjs");require("../../hooks/useTreeWithDetails.cjs");const y=require("../../hooks/useFormGrid.cjs");require("../../hooks/useReferenceArrayInput.cjs");require("vue-i18n");const f=require("../can-access/index.cjs"),S=require("../file-multiple-model-input/index.cjs"),g=t.defineComponent({name:"SkyFileMultipleInput",inheritAttrs:!1,props:{source:{type:String,required:!0},label:String,rules:Object,type:{type:String,default:"file"},dataName:{type:String,default:"name"},dataUrl:{type:String,default:"url"},limit:{type:Number,default:1},autoUpload:{type:Boolean,default:!0}},setup(e,{slots:i,attrs:l}){const a=m.useRoute(),o=y.useFormGrid(),{formData:r,editData:u}=q.useForm(),n=t.computed(()=>e.label||e.source),d=a.meta;return u.value&&(r[e.source]=u.value[e.source]),()=>t.createVNode(f.SkyCanAccess,{resource:d.resource,action:["create","edit"],column:e.source},{default:()=>[t.createVNode(s.ElFormItem,{class:["sky-file-multiple-input",`is-${e.type}`],label:n.value,prop:e.source,rules:e.rules,style:o?`grid-area: ${e.source}`:""},{default:()=>[t.createVNode(S.SkyFileMultipleModelInput,t.mergeProps({modelValue:r[e.source],"onUpdate:modelValue":c=>r[e.source]=c,type:e.type,dataName:e.dataName,dataUrl:e.dataUrl,limit:e.limit,autoUpload:e.autoUpload},l),{default:()=>[i.default?.()]})]})]})}});exports.SkyFileMultipleInput=g;
 //# sourceMappingURL=index.cjs.map

package/dist/components/file-multiple-input/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/file-multiple-input/index.tsx"],"sourcesContent":["import { EpPlus } from '@/icons/EpPlus'\nimport type { GetManyResult, Identifier, SkyUploadRawFile } from '@/provides'\nimport {\n  ElDialog,\n  ElFormItem,\n  ElIcon,\n  ElLoadingDirective,\n  ElUpload,\n  genFileId,\n  type FormItemRule,\n  type UploadFile,\n  type UploadInstance,\n  type UploadProps,\n  type UploadRawFile,\n} from 'element-plus'\nimport {\n  cloneVNode,\n  computed,\n  defineComponent,\n  Fragment,\n  h,\n  ref,\n  shallowRef,\n  useTemplateRef,\n  withDirectives,\n} from 'vue'\nimport { useRoute } from 'vue-router'\nimport { useAsyncState } from '@vueuse/core'\nimport { useForm, useFormGrid, type SkyUploadUserFile } from '@/hooks'\nimport { skyConfig } from '@/setup'\nimport type { SkyLayoutRouteMeta } from '@/router'\nimport { SkyCanAccess } from '../can-access'\nimport { EpUploadFilled } from '@/icons/EpUploadFilled'\nimport { useI18n } from 'vue-i18n'\n\nexport interface SkyFileMultipleInputProps {\n  reference: string\n  source: string\n  type?: 'file' | 'image'\n  dataId?: string\n  dataName?: string\n  dataUrl?: string\n  label?: string\n  rules?: FormItemRule | FormItemRule[]\n  name?: string\n  withCredentials?: boolean\n  limit?: number\n  fileList?: SkyUploadUserFile[]\n  autoUpload?: UploadProps['autoUpload']\n}\n\nexport const SkyFileMultipleInput = defineComponent<\n  SkyFileMultipleInputProps & Partial<UploadProps>\n>({\n  name: 'SkyFileMultipleInput',\n  inheritAttrs: false,\n  props: {\n    reference: {\n      type: String,\n      required: true,\n    },\n    source: {\n      type: String,\n      required: true,\n    },\n    type: {\n      type: String,\n      default: 'file',\n    },\n    dataId: {\n      type: String,\n      default: 'id',\n    },\n    dataName: {\n      type: String,\n      default: 'name',\n    },\n    dataUrl: {\n      type: String,\n      default: 'url',\n    },\n    label: String,\n    rules: Object,\n    limit: {\n      type: Number,\n      default: 1,\n    },\n    fileList: {\n      type: Array,\n      default: () => [],\n    },\n    autoUpload: {\n      type: Boolean,\n      default: true,\n    },\n  },\n  setup(props, { slots, attrs }) {\n    const { t } = useI18n()\n    const route = useRoute()\n    const formGrid = useFormGrid()\n    const { formData, editData } = useForm()!\n    const title = computed<string>(() => props.label || props.source)\n    // init fileList\n    const fileList = shallowRef<SkyUploadUserFile[]>(props.fileList!)\n    const uploadRef = useTemplateRef<UploadInstance>('uploadRef')\n    const routeMeta = route.meta as SkyLayoutRouteMeta\n\n    if (editData.value) {\n      formData[props.source] = editData.value[props.source]\n    }\n\n    const onExceed = (files: File[]) => {\n      if (props.limit === 1) {\n        uploadRef.value?.clearFiles()\n        const file = files[0] as UploadRawFile\n        file.uid = genFileId()\n        uploadRef.value?.handleStart(file)\n        if (props.autoUpload) {\n          uploadRef.value?.submit()\n        }\n      }\n    }\n\n    const onSuccess = () => {\n      const ids: Identifier[] = []\n      for (const fl of fileList.value) {\n        if (fl.id) {\n          ids.push(fl.id as Identifier)\n        } else {\n          const raw = fl.raw as SkyUploadRawFile | undefined\n          if (raw?.data?.id) {\n            fl.id = raw.data.id as Identifier\n            ids.push(raw.data.id as Identifier)\n          }\n        }\n      }\n      formData[props.source] = ids\n    }\n\n    const preview = ref(false)\n    const previewUrl = ref<string>()\n    const onPreview = (file: UploadFile) => {\n      previewUrl.value = file.url\n      preview.value = true\n    }\n\n    let controller: AbortController | undefined\n    const { isLoading } = useAsyncState<GetManyResult | undefined>(\n      async () => {\n        const ids = formData[props.source]\n        if (ids) {\n          controller = new AbortController()\n          const res = await skyConfig.dataProvider?.getMany?.(props.reference, {\n            ids: ids as Identifier[],\n            signal: controller.signal,\n          })\n\n          if (res?.data) {\n            fileList.value = res.data.map((d) => ({\n              id: d[props.dataId!] as Identifier,\n              name: d[props.dataName!] as string,\n              url: d[props.dataUrl!] as string,\n            }))\n            return res\n          }\n        }\n      },\n      undefined,\n      {\n        immediate: true,\n      },\n    )\n\n    const action = ref('')\n    const data = shallowRef<Record<string, unknown>>()\n    const headers = shallowRef<Record<string, unknown>>()\n    const method = ref()\n    const name = ref<string>()\n    const beforeUpload = async (rawFile: SkyUploadRawFile) => {\n      const res = await skyConfig.dataProvider?.getUploadConfig?.({\n        file: rawFile,\n      })\n      if (res?.data) {\n        action.value = res.data.action\n        data.value = res.data.data\n        headers.value = res.data.headers\n        method.value = res.data.method\n        name.value = res.data.name\n        rawFile.data = {\n          id: res.data.file.id,\n          name: res.data.file.name,\n          url: res.data.file.url,\n        }\n      }\n    }\n\n    const accept = computed(() => (props.type === 'image' ? 'image/*' : undefined))\n    const listType = computed(() => (props.type === 'image' ? 'picture-card' : 'text'))\n\n    return () => (\n      <SkyCanAccess resource={routeMeta.resource} action={['create', 'edit']} column={props.source}>\n        <ElFormItem\n          class={['sky-file-multiple-input', `is-${props.type}`]}\n          label={title.value}\n          prop={props.source}\n          rules={props.rules}\n          style={formGrid ? `grid-area: ${props.source}` : ''}\n        >\n          <ElUpload\n            ref=\"uploadRef\"\n            action={action.value}\n            method={method.value}\n            name={props.name}\n            withCredentials={props.withCredentials}\n            multiple={props.limit! > 1}\n            limit={props.limit}\n            beforeUpload={beforeUpload}\n            onSuccess={onSuccess}\n            onExceed={onExceed}\n            headers={headers.value}\n            data={data.value}\n            listType={listType.value}\n            fileList={fileList.value}\n            onUpdate:file-list={(fs: SkyUploadUserFile[]) => (fileList.value = fs)}\n            autoUpload={props.autoUpload}\n            drag={props.type === 'file'}\n            showFileList\n            onPreview={onPreview}\n            // https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Attributes/accept\n            accept={accept.value}\n            {...attrs}\n          >\n            {{\n              default: () =>\n                props.type === 'image' ? (\n                  <ElIcon>\n                    <EpPlus />\n                  </ElIcon>\n                ) : (\n                  <>\n                    <ElIcon class=\"sky-file-multiple-input__icon\">\n                      <EpUploadFilled />\n                    </ElIcon>\n                    <div class=\"sky-file-multiple-input__text\">\n                      {t('upload.drop')}\n                      <em>{t('upload.click')}</em>\n                    </div>\n                  </>\n                ),\n              file: (scope: { file: UploadFile; index: number }) => {\n                if (slots.default) {\n                  const vnodes = slots.default()\n                  return withDirectives(\n                    h(\n                      Fragment,\n                      vnodes.map((vnode) => cloneVNode(vnode, { ...scope })),\n                    ),\n                    [[ElLoadingDirective, isLoading.value]],\n                  )\n                }\n              },\n            }}\n          </ElUpload>\n          <ElDialog\n            appendToBody\n            modelValue={preview.value}\n            onUpdate:modelValue={(v) => (preview.value = v)}\n          >\n            <img class=\"sky-file-multiple-input__img\" src={previewUrl.value} />\n          </ElDialog>\n        </ElFormItem>\n      </SkyCanAccess>\n    )\n  },\n})\n"],"names":["SkyFileMultipleInput","defineComponent","name","inheritAttrs","props","reference","type","required","source","default","dataId","dataName","dataUrl","label","rules","limit","fileList","autoUpload","attrs","t","route","useRoute","formGrid","useFormGrid","editData","title","computed","shallowRef","uploadRef","useTemplateRef","routeMeta","formData","file","files","fl","ids","raw","preview","ref","previewUrl","controller","isLoading","res","skyConfig","id","url","immediate","action","data","headers","method","beforeUpload","rawFile","accept","listType","onSuccess","onExceed","fs","onPreview","_createVNode","_Fragment","ElIcon","vnodes","slots","withDirectives","h","Fragment","vnode","cloneVNode","ElLoadingDirective","v"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/file-multiple-input/index.tsx"],"sourcesContent":["import { ElFormItem, type FormItemRule, type UploadProps } from 'element-plus'\nimport { computed, defineComponent } from 'vue'\nimport { useRoute } from 'vue-router'\nimport { useForm, useFormGrid, type FormContext } from '@/hooks'\nimport type { SkyLayoutRouteMeta } from '@/router'\nimport { SkyCanAccess } from '../can-access'\nimport { SkyFileMultipleModelInput } from '../file-multiple-model-input'\n\nexport interface SkyFileMultipleInputProps {\n  source: string\n  label?: string\n  rules?: FormItemRule | FormItemRule[]\n  type?: 'file' | 'image'\n  dataName?: string\n  dataUrl?: string\n  limit?: number\n  autoUpload?: UploadProps['autoUpload']\n}\n\nexport const SkyFileMultipleInput = defineComponent<\n  SkyFileMultipleInputProps & Partial<UploadProps>\n>({\n  name: 'SkyFileMultipleInput',\n  inheritAttrs: false,\n  props: {\n    source: {\n      type: String,\n      required: true,\n    },\n    label: String,\n    rules: Object,\n    type: {\n      type: String,\n      default: 'file',\n    },\n    dataName: {\n      type: String,\n      default: 'name',\n    },\n    dataUrl: {\n      type: String,\n      default: 'url',\n    },\n    limit: {\n      type: Number,\n      default: 1,\n    },\n    autoUpload: {\n      type: Boolean,\n      default: true,\n    },\n  },\n  setup(props, { slots, attrs }) {\n    const route = useRoute()\n    const formGrid = useFormGrid()\n    const { formData, editData } = useForm()! as FormContext<\n      Record<string, Array<Record<string, unknown>>>\n    >\n    const title = computed<string>(() => props.label || props.source)\n    // init fileList\n    const routeMeta = route.meta as SkyLayoutRouteMeta\n\n    if (editData.value) {\n      formData[props.source] = editData.value[props.source] as Array<Record<string, unknown>>\n    }\n\n    return () => (\n      <SkyCanAccess resource={routeMeta.resource} action={['create', 'edit']} column={props.source}>\n        <ElFormItem\n          class={['sky-file-multiple-input', `is-${props.type}`]}\n          label={title.value}\n          prop={props.source}\n          rules={props.rules}\n          style={formGrid ? `grid-area: ${props.source}` : ''}\n        >\n          <SkyFileMultipleModelInput\n            modelValue={formData[props.source]}\n            onUpdate:modelValue={(v) => (formData[props.source] = v)}\n            type={props.type}\n            dataName={props.dataName}\n            dataUrl={props.dataUrl}\n            limit={props.limit}\n            autoUpload={props.autoUpload}\n            {...attrs}\n          >\n            {slots.default?.()}\n          </SkyFileMultipleModelInput>\n        </ElFormItem>\n      </SkyCanAccess>\n    )\n  },\n})\n"],"names":["SkyFileMultipleInput","defineComponent","name","inheritAttrs","props","source","type","required","label","rules","default","dataName","dataUrl","limit","autoUpload","attrs","route","useRoute","formGrid","useFormGrid","editData","title","computed","routeMeta","formData"],"mappings":"08BAmBAA,EAAAC,EAAAA,gBAAA,CAGEC,KAAAA,uBACAC,aAAAA,GACAC,MAAAA,CACEC,OAAAA,CACEC,KAAAA,OACAC,SAAAA,IAEFC,MAAAA,OACAC,MAAAA,OACAH,KAAAA,CACEA,KAAAA,OACAI,QAAAA,QAEFC,SAAAA,CACEL,KAAAA,OACAI,QAAAA,QAEFE,QAAAA,CACEN,KAAAA,OACAI,QAAAA,OAEFG,MAAAA,CACEP,KAAAA,OACAI,QAAAA,GAEFI,WAAAA,CACER,KAAAA,QACAI,QAAAA,EACF,oBAEoBK,MAAAA,CAAM,EAAA,CAC1B,MAAAC,EAAAC,EAAAA,SAAA,EACAC,EAAAC,EAAAA,YAAA,cACkBC,SAAAA,eAGlBC,EAAAC,EAAAA,SAAA,IAAAlB,EAAA,OAAAA,EAAA,MAAA,EAEAmB,EAAAP,EAAA,sBAGEQ,EAAAA,EAAAA,MAAAA,EAAAA,EAAAA,MAAAA,EAAAA,MAAAA,yDAI0C,OAAA,CAAA,SAAA,MAAA,EAA4B,OAAApB,EAAA,MAAsB,EAAA,CAAAM,QAAAA,IAAAA,CAAAA,EAAAA,YAAAA,aAAAA,4FAKtE,MAAAQ,EAAA,cAAAd,EAAA,MAAA,GAAA,EACiC,EAAA,CAAAM,QAAAA,IAAAA,CAAAA,cAAAA,EAAAA,0BAAAA,EAAAA,WAAAA,CAAA,WAAAc,EAAApB,EAAA,MAAA,yGAQ/B,WAAAA,EAAA,UACU,EAAAW,CAAA,EAAA,CACnBL,QAAAA,IAAAA,CAAAA,EAAAA,UAAAA,CAAAA,CAES,CAAA,CAAA,CAAA,CAAA,CAAA,GAK5B,CACF,CAAA"}

package/dist/components/file-multiple-input/index.d.ts

@@ -1,18 +1,12 @@
 import { FormItemRule, UploadProps } from 'element-plus';
-import { SkyUploadUserFile } from '../../hooks';
 export interface SkyFileMultipleInputProps {
-    reference: string;
     source: string;
+    label?: string;
+    rules?: FormItemRule | FormItemRule[];
     type?: 'file' | 'image';
-    dataId?: string;
     dataName?: string;
     dataUrl?: string;
-    label?: string;
-    rules?: FormItemRule | FormItemRule[];
-    name?: string;
-    withCredentials?: boolean;
     limit?: number;
-    fileList?: SkyUploadUserFile[];
     autoUpload?: UploadProps['autoUpload'];
 }
 export declare const SkyFileMultipleInput: import('vue').DefineComponent<SkyFileMultipleInputProps & Partial<UploadProps>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SkyFileMultipleInputProps & Partial<UploadProps>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/file-multiple-input/index.mjs

@@ -1,12 +1,7 @@
-import "element-plus/es/components/dialog/style/css";
 import "element-plus/es/components/form-item/style/css";
-import "element-plus/es/components/icon/style/css";
-import "element-plus/es/components/upload/style/css";
-import { defineComponent as T, computed as m, shallowRef as s, useTemplateRef as V, ref as o, createVNode as l, mergeProps as q, withDirectives as B, h as G, Fragment as w, cloneVNode as $ } from "vue";
-import { EpPlus as j } from "../../icons/EpPlus.mjs";
-import { ElFormItem as O, ElUpload as z, ElLoadingDirective as H, ElIcon as b, ElDialog as J, genFileId as K } from "element-plus";
-import { useRoute as Q } from "vue-router";
-import { useAsyncState as W } from "@vueuse/core";
+import { defineComponent as c, computed as p, createVNode as r, mergeProps as f } from "vue";
+import { ElFormItem as s } from "element-plus";
+import { useRoute as y } from "vue-router";
 import "../../hooks/useUser.mjs";
 import "../../hooks/usePermission.mjs";
 import "../../hooks/useMenu.mjs";
@@ -17,36 +12,29 @@ import "../../hooks/useLang.mjs";
 import "../../hooks/useTheme.mjs";
 import "../../hooks/useList.mjs";
 import "../../hooks/useHiddenTitle.mjs";
-import { useForm as X } from "../../hooks/useForm.mjs";
+import { useForm as S } from "../../hooks/useForm.mjs";
 import "../../hooks/useShow.mjs";
 import "../../hooks/useReferenceArrayField.mjs";
 import "../../hooks/useTreeWithDetails.mjs";
-import { useFormGrid as Y } from "../../hooks/useFormGrid.mjs";
+import { useFormGrid as g } from "../../hooks/useFormGrid.mjs";
 import "../../hooks/useReferenceArrayInput.mjs";
-import { skyConfig as k } from "../../setup/index.mjs";
-import { SkyCanAccess as Z } from "../can-access/index.mjs";
-import { EpUploadFilled as ee } from "../../icons/EpUploadFilled.mjs";
-import { useI18n as te } from "vue-i18n";
-const _e = /* @__PURE__ */ T({
+import "vue-i18n";
+import { SkyCanAccess as U } from "../can-access/index.mjs";
+import { SkyFileMultipleModelInput as F } from "../file-multiple-model-input/index.mjs";
+const H = /* @__PURE__ */ c({
   name: "SkyFileMultipleInput",
   inheritAttrs: !1,
   props: {
-    reference: {
-      type: String,
-      required: !0
-    },
     source: {
       type: String,
       required: !0
     },
+    label: String,
+    rules: Object,
     type: {
       type: String,
       default: "file"
     },
-    dataId: {
-      type: String,
-      default: "id"
-    },
     dataName: {
       type: String,
       default: "name"
@@ -55,147 +43,51 @@ const _e = /* @__PURE__ */ T({
       type: String,
       default: "url"
     },
-    label: String,
-    rules: Object,
     limit: {
       type: Number,
       default: 1
     },
-    fileList: {
-      type: Array,
-      default: () => []
-    },
     autoUpload: {
       type: Boolean,
       default: !0
     }
   },
-  setup(e, {
-    slots: c,
-    attrs: E
+  setup(t, {
+    slots: i,
+    attrs: a
   }) {
-    const {
-      t: f
-    } = te(), F = Q(), I = Y(), {
-      formData: r,
-      editData: p
-    } = X(), C = m(() => e.label || e.source), u = s(e.fileList), d = V("uploadRef"), L = F.meta;
-    p.value && (r[e.source] = p.value[e.source]);
-    const P = (a) => {
-      if (e.limit === 1) {
-        d.value?.clearFiles();
-        const t = a[0];
-        t.uid = K(), d.value?.handleStart(t), e.autoUpload && d.value?.submit();
-      }
-    }, R = () => {
-      const a = [];
-      for (const t of u.value)
-        if (t.id)
-          a.push(t.id);
-        else {
-          const i = t.raw;
-          i?.data?.id && (t.id = i.data.id, a.push(i.data.id));
-        }
-      r[e.source] = a;
-    }, n = o(!1), v = o(), _ = (a) => {
-      v.value = a.url, n.value = !0;
-    };
-    let y;
-    const {
-      isLoading: x
-    } = W(async () => {
-      const a = r[e.source];
-      if (a) {
-        y = new AbortController();
-        const t = await k.dataProvider?.getMany?.(e.reference, {
-          ids: a,
-          signal: y.signal
-        });
-        if (t?.data)
-          return u.value = t.data.map((i) => ({
-            id: i[e.dataId],
-            name: i[e.dataName],
-            url: i[e.dataUrl]
-          })), t;
-      }
-    }, void 0, {
-      immediate: !0
-    }), g = o(""), h = s(), S = s(), U = o(), A = o(), D = async (a) => {
-      const t = await k.dataProvider?.getUploadConfig?.({
-        file: a
-      });
-      t?.data && (g.value = t.data.action, h.value = t.data.data, S.value = t.data.headers, U.value = t.data.method, A.value = t.data.name, a.data = {
-        id: t.data.file.id,
-        name: t.data.file.name,
-        url: t.data.file.url
-      });
-    }, N = m(() => e.type === "image" ? "image/*" : void 0), M = m(() => e.type === "image" ? "picture-card" : "text");
-    return () => l(Z, {
-      resource: L.resource,
+    const l = y(), u = g(), {
+      formData: e,
+      editData: o
+    } = S(), m = p(() => t.label || t.source), d = l.meta;
+    return o.value && (e[t.source] = o.value[t.source]), () => r(U, {
+      resource: d.resource,
       action: ["create", "edit"],
-      column: e.source
+      column: t.source
     }, {
-      default: () => [l(O, {
-        class: ["sky-file-multiple-input", `is-${e.type}`],
-        label: C.value,
-        prop: e.source,
-        rules: e.rules,
-        style: I ? `grid-area: ${e.source}` : ""
+      default: () => [r(s, {
+        class: ["sky-file-multiple-input", `is-${t.type}`],
+        label: m.value,
+        prop: t.source,
+        rules: t.rules,
+        style: u ? `grid-area: ${t.source}` : ""
       }, {
-        default: () => [l(z, q({
-          ref: "uploadRef",
-          action: g.value,
-          method: U.value,
-          name: e.name,
-          withCredentials: e.withCredentials,
-          multiple: e.limit > 1,
-          limit: e.limit,
-          beforeUpload: D,
-          onSuccess: R,
-          onExceed: P,
-          headers: S.value,
-          data: h.value,
-          listType: M.value,
-          fileList: u.value,
-          "onUpdate:file-list": (a) => u.value = a,
-          autoUpload: e.autoUpload,
-          drag: e.type === "file",
-          showFileList: !0,
-          onPreview: _,
-          accept: N.value
-        }, E), {
-          default: () => e.type === "image" ? l(b, null, {
-            default: () => [l(j, null, null)]
-          }) : l(w, null, [l(b, {
-            class: "sky-file-multiple-input__icon"
-          }, {
-            default: () => [l(ee, null, null)]
-          }), l("div", {
-            class: "sky-file-multiple-input__text"
-          }, [f("upload.drop"), l("em", null, [f("upload.click")])])]),
-          file: (a) => {
-            if (c.default) {
-              const t = c.default();
-              return B(G(w, t.map((i) => $(i, {
-                ...a
-              }))), [[H, x.value]]);
-            }
-          }
-        }), l(J, {
-          appendToBody: !0,
-          modelValue: n.value,
-          "onUpdate:modelValue": (a) => n.value = a
-        }, {
-          default: () => [l("img", {
-            class: "sky-file-multiple-input__img",
-            src: v.value
-          }, null)]
+        default: () => [r(F, f({
+          modelValue: e[t.source],
+          "onUpdate:modelValue": (n) => e[t.source] = n,
+          type: t.type,
+          dataName: t.dataName,
+          dataUrl: t.dataUrl,
+          limit: t.limit,
+          autoUpload: t.autoUpload
+        }, a), {
+          default: () => [i.default?.()]
         })]
       })]
     });
   }
 });
 export {
-  _e as SkyFileMultipleInput
+  H as SkyFileMultipleInput
 };
 //# sourceMappingURL=index.mjs.map

package/dist/components/file-multiple-input/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/components/file-multiple-input/index.tsx"],"sourcesContent":["import { EpPlus } from '@/icons/EpPlus'\nimport type { GetManyResult, Identifier, SkyUploadRawFile } from '@/provides'\nimport {\n  ElDialog,\n  ElFormItem,\n  ElIcon,\n  ElLoadingDirective,\n  ElUpload,\n  genFileId,\n  type FormItemRule,\n  type UploadFile,\n  type UploadInstance,\n  type UploadProps,\n  type UploadRawFile,\n} from 'element-plus'\nimport {\n  cloneVNode,\n  computed,\n  defineComponent,\n  Fragment,\n  h,\n  ref,\n  shallowRef,\n  useTemplateRef,\n  withDirectives,\n} from 'vue'\nimport { useRoute } from 'vue-router'\nimport { useAsyncState } from '@vueuse/core'\nimport { useForm, useFormGrid, type SkyUploadUserFile } from '@/hooks'\nimport { skyConfig } from '@/setup'\nimport type { SkyLayoutRouteMeta } from '@/router'\nimport { SkyCanAccess } from '../can-access'\nimport { EpUploadFilled } from '@/icons/EpUploadFilled'\nimport { useI18n } from 'vue-i18n'\n\nexport interface SkyFileMultipleInputProps {\n  reference: string\n  source: string\n  type?: 'file' | 'image'\n  dataId?: string\n  dataName?: string\n  dataUrl?: string\n  label?: string\n  rules?: FormItemRule | FormItemRule[]\n  name?: string\n  withCredentials?: boolean\n  limit?: number\n  fileList?: SkyUploadUserFile[]\n  autoUpload?: UploadProps['autoUpload']\n}\n\nexport const SkyFileMultipleInput = defineComponent<\n  SkyFileMultipleInputProps & Partial<UploadProps>\n>({\n  name: 'SkyFileMultipleInput',\n  inheritAttrs: false,\n  props: {\n    reference: {\n      type: String,\n      required: true,\n    },\n    source: {\n      type: String,\n      required: true,\n    },\n    type: {\n      type: String,\n      default: 'file',\n    },\n    dataId: {\n      type: String,\n      default: 'id',\n    },\n    dataName: {\n      type: String,\n      default: 'name',\n    },\n    dataUrl: {\n      type: String,\n      default: 'url',\n    },\n    label: String,\n    rules: Object,\n    limit: {\n      type: Number,\n      default: 1,\n    },\n    fileList: {\n      type: Array,\n      default: () => [],\n    },\n    autoUpload: {\n      type: Boolean,\n      default: true,\n    },\n  },\n  setup(props, { slots, attrs }) {\n    const { t } = useI18n()\n    const route = useRoute()\n    const formGrid = useFormGrid()\n    const { formData, editData } = useForm()!\n    const title = computed<string>(() => props.label || props.source)\n    // init fileList\n    const fileList = shallowRef<SkyUploadUserFile[]>(props.fileList!)\n    const uploadRef = useTemplateRef<UploadInstance>('uploadRef')\n    const routeMeta = route.meta as SkyLayoutRouteMeta\n\n    if (editData.value) {\n      formData[props.source] = editData.value[props.source]\n    }\n\n    const onExceed = (files: File[]) => {\n      if (props.limit === 1) {\n        uploadRef.value?.clearFiles()\n        const file = files[0] as UploadRawFile\n        file.uid = genFileId()\n        uploadRef.value?.handleStart(file)\n        if (props.autoUpload) {\n          uploadRef.value?.submit()\n        }\n      }\n    }\n\n    const onSuccess = () => {\n      const ids: Identifier[] = []\n      for (const fl of fileList.value) {\n        if (fl.id) {\n          ids.push(fl.id as Identifier)\n        } else {\n          const raw = fl.raw as SkyUploadRawFile | undefined\n          if (raw?.data?.id) {\n            fl.id = raw.data.id as Identifier\n            ids.push(raw.data.id as Identifier)\n          }\n        }\n      }\n      formData[props.source] = ids\n    }\n\n    const preview = ref(false)\n    const previewUrl = ref<string>()\n    const onPreview = (file: UploadFile) => {\n      previewUrl.value = file.url\n      preview.value = true\n    }\n\n    let controller: AbortController | undefined\n    const { isLoading } = useAsyncState<GetManyResult | undefined>(\n      async () => {\n        const ids = formData[props.source]\n        if (ids) {\n          controller = new AbortController()\n          const res = await skyConfig.dataProvider?.getMany?.(props.reference, {\n            ids: ids as Identifier[],\n            signal: controller.signal,\n          })\n\n          if (res?.data) {\n            fileList.value = res.data.map((d) => ({\n              id: d[props.dataId!] as Identifier,\n              name: d[props.dataName!] as string,\n              url: d[props.dataUrl!] as string,\n            }))\n            return res\n          }\n        }\n      },\n      undefined,\n      {\n        immediate: true,\n      },\n    )\n\n    const action = ref('')\n    const data = shallowRef<Record<string, unknown>>()\n    const headers = shallowRef<Record<string, unknown>>()\n    const method = ref()\n    const name = ref<string>()\n    const beforeUpload = async (rawFile: SkyUploadRawFile) => {\n      const res = await skyConfig.dataProvider?.getUploadConfig?.({\n        file: rawFile,\n      })\n      if (res?.data) {\n        action.value = res.data.action\n        data.value = res.data.data\n        headers.value = res.data.headers\n        method.value = res.data.method\n        name.value = res.data.name\n        rawFile.data = {\n          id: res.data.file.id,\n          name: res.data.file.name,\n          url: res.data.file.url,\n        }\n      }\n    }\n\n    const accept = computed(() => (props.type === 'image' ? 'image/*' : undefined))\n    const listType = computed(() => (props.type === 'image' ? 'picture-card' : 'text'))\n\n    return () => (\n      <SkyCanAccess resource={routeMeta.resource} action={['create', 'edit']} column={props.source}>\n        <ElFormItem\n          class={['sky-file-multiple-input', `is-${props.type}`]}\n          label={title.value}\n          prop={props.source}\n          rules={props.rules}\n          style={formGrid ? `grid-area: ${props.source}` : ''}\n        >\n          <ElUpload\n            ref=\"uploadRef\"\n            action={action.value}\n            method={method.value}\n            name={props.name}\n            withCredentials={props.withCredentials}\n            multiple={props.limit! > 1}\n            limit={props.limit}\n            beforeUpload={beforeUpload}\n            onSuccess={onSuccess}\n            onExceed={onExceed}\n            headers={headers.value}\n            data={data.value}\n            listType={listType.value}\n            fileList={fileList.value}\n            onUpdate:file-list={(fs: SkyUploadUserFile[]) => (fileList.value = fs)}\n            autoUpload={props.autoUpload}\n            drag={props.type === 'file'}\n            showFileList\n            onPreview={onPreview}\n            // https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Attributes/accept\n            accept={accept.value}\n            {...attrs}\n          >\n            {{\n              default: () =>\n                props.type === 'image' ? (\n                  <ElIcon>\n                    <EpPlus />\n                  </ElIcon>\n                ) : (\n                  <>\n                    <ElIcon class=\"sky-file-multiple-input__icon\">\n                      <EpUploadFilled />\n                    </ElIcon>\n                    <div class=\"sky-file-multiple-input__text\">\n                      {t('upload.drop')}\n                      <em>{t('upload.click')}</em>\n                    </div>\n                  </>\n                ),\n              file: (scope: { file: UploadFile; index: number }) => {\n                if (slots.default) {\n                  const vnodes = slots.default()\n                  return withDirectives(\n                    h(\n                      Fragment,\n                      vnodes.map((vnode) => cloneVNode(vnode, { ...scope })),\n                    ),\n                    [[ElLoadingDirective, isLoading.value]],\n                  )\n                }\n              },\n            }}\n          </ElUpload>\n          <ElDialog\n            appendToBody\n            modelValue={preview.value}\n            onUpdate:modelValue={(v) => (preview.value = v)}\n          >\n            <img class=\"sky-file-multiple-input__img\" src={previewUrl.value} />\n          </ElDialog>\n        </ElFormItem>\n      </SkyCanAccess>\n    )\n  },\n})\n"],"names":["SkyFileMultipleInput","defineComponent","name","inheritAttrs","props","reference","type","required","source","default","dataId","dataName","dataUrl","label","rules","limit","fileList","autoUpload","attrs","t","route","useRoute","formGrid","useFormGrid","editData","title","computed","shallowRef","uploadRef","useTemplateRef","routeMeta","formData","file","files","fl","ids","raw","preview","ref","previewUrl","controller","isLoading","res","skyConfig","id","url","immediate","action","data","headers","method","beforeUpload","rawFile","accept","listType","onSuccess","onExceed","fs","onPreview","_createVNode","_Fragment","ElIcon","vnodes","slots","withDirectives","h","Fragment","vnode","cloneVNode","ElLoadingDirective","v"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../../src/components/file-multiple-input/index.tsx"],"sourcesContent":["import { ElFormItem, type FormItemRule, type UploadProps } from 'element-plus'\nimport { computed, defineComponent } from 'vue'\nimport { useRoute } from 'vue-router'\nimport { useForm, useFormGrid, type FormContext } from '@/hooks'\nimport type { SkyLayoutRouteMeta } from '@/router'\nimport { SkyCanAccess } from '../can-access'\nimport { SkyFileMultipleModelInput } from '../file-multiple-model-input'\n\nexport interface SkyFileMultipleInputProps {\n  source: string\n  label?: string\n  rules?: FormItemRule | FormItemRule[]\n  type?: 'file' | 'image'\n  dataName?: string\n  dataUrl?: string\n  limit?: number\n  autoUpload?: UploadProps['autoUpload']\n}\n\nexport const SkyFileMultipleInput = defineComponent<\n  SkyFileMultipleInputProps & Partial<UploadProps>\n>({\n  name: 'SkyFileMultipleInput',\n  inheritAttrs: false,\n  props: {\n    source: {\n      type: String,\n      required: true,\n    },\n    label: String,\n    rules: Object,\n    type: {\n      type: String,\n      default: 'file',\n    },\n    dataName: {\n      type: String,\n      default: 'name',\n    },\n    dataUrl: {\n      type: String,\n      default: 'url',\n    },\n    limit: {\n      type: Number,\n      default: 1,\n    },\n    autoUpload: {\n      type: Boolean,\n      default: true,\n    },\n  },\n  setup(props, { slots, attrs }) {\n    const route = useRoute()\n    const formGrid = useFormGrid()\n    const { formData, editData } = useForm()! as FormContext<\n      Record<string, Array<Record<string, unknown>>>\n    >\n    const title = computed<string>(() => props.label || props.source)\n    // init fileList\n    const routeMeta = route.meta as SkyLayoutRouteMeta\n\n    if (editData.value) {\n      formData[props.source] = editData.value[props.source] as Array<Record<string, unknown>>\n    }\n\n    return () => (\n      <SkyCanAccess resource={routeMeta.resource} action={['create', 'edit']} column={props.source}>\n        <ElFormItem\n          class={['sky-file-multiple-input', `is-${props.type}`]}\n          label={title.value}\n          prop={props.source}\n          rules={props.rules}\n          style={formGrid ? `grid-area: ${props.source}` : ''}\n        >\n          <SkyFileMultipleModelInput\n            modelValue={formData[props.source]}\n            onUpdate:modelValue={(v) => (formData[props.source] = v)}\n            type={props.type}\n            dataName={props.dataName}\n            dataUrl={props.dataUrl}\n            limit={props.limit}\n            autoUpload={props.autoUpload}\n            {...attrs}\n          >\n            {slots.default?.()}\n          </SkyFileMultipleModelInput>\n        </ElFormItem>\n      </SkyCanAccess>\n    )\n  },\n})\n"],"names":["SkyFileMultipleInput","defineComponent","name","inheritAttrs","props","source","type","required","label","rules","default","dataName","dataUrl","limit","autoUpload","attrs","route","useRoute","formGrid","useFormGrid","editData","title","computed","routeMeta","formData"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAmBA,MAAAA,IAAA,gBAAAC,EAAA;AAAA,EAGEC,MAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,OAAAA;AAAAA,IACEC,QAAAA;AAAAA,MACEC,MAAAA;AAAAA,MACAC,UAAAA;AAAAA;IAEFC,OAAAA;AAAAA,IACAC,OAAAA;AAAAA,IACAH,MAAAA;AAAAA,MACEA,MAAAA;AAAAA,MACAI,SAAAA;AAAAA;IAEFC,UAAAA;AAAAA,MACEL,MAAAA;AAAAA,MACAI,SAAAA;AAAAA;IAEFE,SAAAA;AAAAA,MACEN,MAAAA;AAAAA,MACAI,SAAAA;AAAAA;IAEFG,OAAAA;AAAAA,MACEP,MAAAA;AAAAA,MACAI,SAAAA;AAAAA;IAEFI,YAAAA;AAAAA,MACER,MAAAA;AAAAA,MACAI,SAAAA;AAAAA,IACF;AAAA;;;IAEoBK,OAAAA;AAAAA,EAAM,GAAA;AAC1B,UAAAC,IAAAC,EAAA,GACAC,IAAAC,EAAA;;MACkBC,UAAAA;AAAAA,aAGlBC,IAAAC,EAAA,MAAAlB,EAAA,SAAAA,EAAA,MAAA,GAEAmB,IAAAP,EAAA;uBAGEQ,EAAAA,EAAAA,MAAAA,IAAAA,EAAAA,MAAAA,EAAAA,MAAAA;;MAI0C,QAAA,CAAA,UAAA,MAAA;AAAA,MAA4B,QAAApB,EAAA;AAAA,IAAsB,GAAA;AAAA,MAAAM,SAAAA,MAAAA,CAAAA,EAAAA,GAAAA;AAAAA;;;;QAKtE,OAAAQ,IAAA,cAAAd,EAAA,MAAA,KAAA;AAAA,MACiC,GAAA;AAAA,QAAAM,SAAAA,MAAAA,CAAAA,EAAAA,GAAAA,EAAAA;AAAAA,UAAA,YAAAc,EAAApB,EAAA,MAAA;AAAA;;;;;UAQ/B,YAAAA,EAAA;AAAA,QACU,GAAAW,CAAA,GAAA;AAAA,UACnBL,SAAAA,MAAAA,CAAAA,EAAAA,UAAAA,CAAAA;AAAAA,QAES,CAAA,CAAA;AAAA,MAAA,CAAA,CAAA;AAAA;EAK5B;AACF,CAAA;"}

package/dist/components/file-multiple-model-input/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("element-plus/es/components/dialog/style/css");require("element-plus/es/components/icon/style/css");require("element-plus/es/components/upload/style/css");const e=require("vue"),E=require("../../icons/EpPlus.cjs"),a=require("element-plus");require("../../hooks/useUser.cjs");require("../../hooks/usePermission.cjs");require("../../hooks/useMenu.cjs");require("../../hooks/useTab.cjs");require("../../hooks/useRouteKeepAlive.cjs");require("../../hooks/useSize.cjs");require("../../hooks/useLang.cjs");require("../../hooks/useTheme.cjs");require("../../hooks/useList.cjs");require("../../hooks/useHiddenTitle.cjs");require("../../hooks/useForm.cjs");require("../../hooks/useShow.cjs");require("../../hooks/useReferenceArrayField.cjs");require("../../hooks/useTreeWithDetails.cjs");require("../../hooks/useFormGrid.cjs");require("../../hooks/useReferenceArrayInput.cjs");const k=require("../../hooks/useUpload.cjs"),I=require("../../icons/EpUploadFilled.cjs"),w=require("vue-i18n"),M=e.defineComponent({name:"SkyFileMultipleModelInput",inheritAttrs:!1,props:{type:{type:String,default:"file"},dataName:{type:String,default:"name"},dataUrl:{type:String,default:"url"},limit:{type:Number,default:1},autoUpload:{type:Boolean,default:!0},modelValue:{type:Array,default:()=>[]}},emits:{"update:modelValue":t=>t},setup(t,{slots:n,attrs:p,emit:m}){const{t:c}=w.useI18n(),{fileList:i,action:f,data:v,headers:q,method:y,name:g,beforeUpload:V}=k.useUpload(),o=e.useTemplateRef("uploadRef");i.value=t.modelValue.map(l=>({upload:l,name:l[t.dataName],url:l[t.dataUrl]}));const U=l=>{if(t.limit===1){o.value?.clearFiles();const u=l[0];u.uid=a.genFileId(),o.value?.handleStart(u),t.autoUpload&&o.value?.submit()}},N=()=>{const l=[];for(const u of i.value)if(u.upload)l.push(u.upload);else{const r=u.raw;r?.upload&&l.push(r.upload)}m("update:modelValue",l)},d=e.ref(!1),s=e.ref(),F=l=>{s.value=l.url,d.value=!0},S=e.computed(()=>t.type==="image"?"image/*":void 0),h=e.computed(()=>t.type==="image"?"picture-card":"text");return()=>e.createVNode(e.Fragment,null,[e.createVNode(a.ElUpload,e.mergeProps({class:"sky-file-multiple-model-input",ref:"uploadRef",action:f.value,method:y.value,name:g.value,multiple:t.limit>1,limit:t.limit,beforeUpload:V,onSuccess:N,onExceed:U,headers:q.value,data:v.value,listType:h.value,fileList:i.value,"onUpdate:file-list":l=>i.value=l,autoUpload:t.autoUpload,drag:t.type==="file",showFileList:!0,onPreview:F,accept:S.value},p),{default:()=>t.type==="image"?e.createVNode(a.ElIcon,null,{default:()=>[e.createVNode(E.EpPlus,null,null)]}):e.createVNode(e.Fragment,null,[e.createVNode(a.ElIcon,{class:"sky-file-multiple-model-input__icon"},{default:()=>[e.createVNode(I.EpUploadFilled,null,null)]}),e.createVNode("div",{class:"sky-file-multiple-model-input__text"},[c("upload.drop"),e.createVNode("em",null,[c("upload.click")])])]),file:l=>{if(n.default){const u=n.default();return e.h(e.Fragment,u.map(r=>e.cloneVNode(r,{...l})))}}}),e.createVNode(a.ElDialog,{appendToBody:!0,modelValue:d.value,"onUpdate:modelValue":l=>d.value=l},{default:()=>[e.createVNode("img",{class:"sky-file-multiple-model-input__img",src:s.value},null)]})])}});exports.SkyFileMultipleModelInput=M;
+//# sourceMappingURL=index.cjs.map

package/dist/components/file-multiple-model-input/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../src/components/file-multiple-model-input/index.tsx"],"sourcesContent":["import { EpPlus } from '@/icons/EpPlus'\nimport type { SkyUploadRawFile } from '@/provides'\nimport {\n  ElDialog,\n  ElIcon,\n  ElUpload,\n  genFileId,\n  type UploadFile,\n  type UploadInstance,\n  type UploadProps,\n  type UploadRawFile,\n} from 'element-plus'\nimport {\n  cloneVNode,\n  computed,\n  defineComponent,\n  Fragment,\n  h,\n  ref,\n  useTemplateRef,\n  type PropType,\n} from 'vue'\nimport { useUpload, type SkyUploadUserFile } from '@/hooks'\nimport { EpUploadFilled } from '@/icons/EpUploadFilled'\nimport { useI18n } from 'vue-i18n'\n\nexport type SkyFileMultipleModelInputProps = {\n  type?: 'file' | 'image'\n  dataName?: string\n  dataUrl?: string\n  limit?: number\n  autoUpload?: UploadProps['autoUpload']\n  modelValue?: Array<Record<string, unknown>>\n} & Partial<UploadProps>\n\nexport const SkyFileMultipleModelInput = defineComponent({\n  name: 'SkyFileMultipleModelInput',\n  inheritAttrs: false,\n  props: {\n    // 这样就不能透传了\n    // ...uploadProps,\n    type: {\n      type: String,\n      default: 'file',\n    },\n    dataName: {\n      type: String,\n      default: 'name',\n    },\n    dataUrl: {\n      type: String,\n      default: 'url',\n    },\n    limit: {\n      type: Number,\n      default: 1,\n    },\n    autoUpload: {\n      type: Boolean,\n      default: true,\n    },\n    modelValue: {\n      type: Array as PropType<Array<Record<string, unknown>>>,\n      default: () => [],\n    },\n  },\n  emits: {\n    'update:modelValue': (value: Array<Record<string, unknown>>) => value,\n  },\n  setup(props, { slots, attrs, emit }) {\n    const { t } = useI18n()\n    // init fileList\n    const { fileList, action, data, headers, method, name, beforeUpload } = useUpload()\n    const uploadRef = useTemplateRef<UploadInstance>('uploadRef')\n\n    fileList.value = props.modelValue!.map((md) => ({\n      upload: md,\n      name: md[props.dataName!] as string,\n      url: md[props.dataUrl!] as string,\n    }))\n\n    const onExceed = (files: File[]) => {\n      if (props.limit === 1) {\n        uploadRef.value?.clearFiles()\n        const file = files[0] as UploadRawFile\n        file.uid = genFileId()\n        uploadRef.value?.handleStart(file)\n        if (props.autoUpload) {\n          uploadRef.value?.submit()\n        }\n      }\n    }\n\n    const onSuccess = () => {\n      const result: Array<Record<string, unknown>> = []\n      for (const fl of fileList.value) {\n        if (fl.upload) {\n          result.push(fl.upload)\n        } else {\n          const raw = fl.raw as SkyUploadRawFile | undefined\n          if (raw?.upload) {\n            result.push(raw.upload)\n          }\n        }\n      }\n      emit('update:modelValue', result)\n    }\n\n    const preview = ref(false)\n    const previewUrl = ref<string>()\n    const onPreview = (file: UploadFile) => {\n      previewUrl.value = file.url\n      preview.value = true\n    }\n\n    const accept = computed(() => (props.type === 'image' ? 'image/*' : undefined))\n    const listType = computed(() => (props.type === 'image' ? 'picture-card' : 'text'))\n\n    return () => (\n      <>\n        <ElUpload\n          class=\"sky-file-multiple-model-input\"\n          ref=\"uploadRef\"\n          action={action.value}\n          method={method.value}\n          name={name.value}\n          multiple={props.limit! > 1}\n          limit={props.limit}\n          beforeUpload={beforeUpload}\n          onSuccess={onSuccess}\n          onExceed={onExceed}\n          headers={headers.value}\n          data={data.value}\n          listType={listType.value}\n          fileList={fileList.value}\n          onUpdate:file-list={(fs: SkyUploadUserFile[]) => (fileList.value = fs)}\n          autoUpload={props.autoUpload}\n          drag={props.type === 'file'}\n          showFileList\n          onPreview={onPreview}\n          // https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Attributes/accept\n          accept={accept.value}\n          {...attrs}\n        >\n          {{\n            default: () =>\n              props.type === 'image' ? (\n                <ElIcon>\n                  <EpPlus />\n                </ElIcon>\n              ) : (\n                <>\n                  <ElIcon class=\"sky-file-multiple-model-input__icon\">\n                    <EpUploadFilled />\n                  </ElIcon>\n                  <div class=\"sky-file-multiple-model-input__text\">\n                    {t('upload.drop')}\n                    <em>{t('upload.click')}</em>\n                  </div>\n                </>\n              ),\n            file: (scope: { file: UploadFile; index: number }) => {\n              if (slots.default) {\n                const vnodes = slots.default()\n                return h(\n                  Fragment,\n                  vnodes.map((vnode) => cloneVNode(vnode, { ...scope })),\n                )\n              }\n            },\n          }}\n        </ElUpload>\n        <ElDialog\n          appendToBody\n          modelValue={preview.value}\n          onUpdate:modelValue={(v) => (preview.value = v)}\n        >\n          <img class=\"sky-file-multiple-model-input__img\" src={previewUrl.value} />\n        </ElDialog>\n      </>\n    )\n  },\n})\n"],"names":["SkyFileMultipleModelInput","defineComponent","name","inheritAttrs","props","type","default","dataName","dataUrl","limit","autoUpload","modelValue","emits","emit","t","beforeUpload","uploadRef","useTemplateRef","upload","url","file","files","fl","fileList","result","raw","preview","ref","previewUrl","accept","computed","listType","onSuccess","onExceed","fs","onPreview","attrs","_createVNode","_Fragment","ElIcon","vnodes","slots","h","Fragment","vnode","cloneVNode","v"],"mappings":"2iCAmCAA,EAAAC,EAAAA,gBAAA,CACEC,KAAAA,4BACAC,aAAAA,GACAC,MAAAA,CAGEC,KAAAA,CACEA,KAAAA,OACAC,QAAAA,QAEFC,SAAAA,CACEF,KAAAA,OACAC,QAAAA,QAEFE,QAAAA,CACEH,KAAAA,OACAC,QAAAA,OAEFG,MAAAA,CACEJ,KAAAA,OACAC,QAAAA,GAEFI,WAAAA,CACEL,KAAAA,QACAC,QAAAA,IAEFK,WAAAA,CACEN,KAAAA,oBAEF,GAEFO,MAAAA,oDAG6BC,KAAAA,CAAK,EAAA,OACxBC,EAAAA,qEAE+CC,aAAAA,iBACvDC,EAAAC,EAAAA,eAAA,WAAA,gCAGEC,OAAAA,EACAhB,KAAAA,EAAAA,EAAAA,QAAAA,EACAiB,IAAAA,EAAAA,EAAAA,OAAAA,CACF,EAAA,cAGE,GAAAf,EAAA,QAAA,EAAA,CACEY,EAAAA,OAAAA,WAAAA,EACA,MAAAI,EAAAC,EAAA,CAAA,EACAD,EAAAA,IAAAA,YAAAA,EACAJ,EAAAA,OAAAA,YAAAA,CAAAA,gBAEEA,EAAAA,OAAAA,OAAAA,CAEJ,qBAKA,UAAAM,KAAAC,EAAA,kBAEIC,EAAAA,KAAAA,EAAAA,MAAAA,MACF,CACE,MAAAC,EAAAH,EAAA,eAEEE,EAAAA,KAAAA,EAAAA,MAAAA,CAEJ,CAEFX,EAAAA,oBAAAA,CAAAA,GAGFa,EAAAC,EAAAA,IAAA,EAAA,EACAC,EAAAD,EAAAA,IAAA,QAEEC,EAAAA,MAAAA,EAAAA,gBAIFC,EAAAC,EAAAA,SAAA,IAAA1B,EAAA,OAAA,QAAA,UAAA,MAAA,EACA2B,EAAAD,EAAAA,SAAA,IAAA1B,EAAA,OAAA,QAAA,eAAA,MAAA,kFAEO,MAAA,gCAAA,IAAA,uDAOe,SAAAA,EAAA,MAAA,gBAEE,aAAAW,EACQ,UAAAiB,EACN,SAAAC,iEAKI,qBAAAC,GAAAX,EAAA,MAAAW,0BAEI,KAAA9B,EAAA,OAAA,OACD,aAAA,GAAA,UAAA+B,EAEP,OAAAN,EAAA,KAEA,EAAAO,CAAA,EAAA,2DAKM9B,QAAAA,IAAAA,CAAAA,EAAAA,YAAAA,EAAAA,OAAAA,KAAAA,IAAAA,CAAAA,CAAA,CAAA,EAAA+B,EAAAA,YAAAC,EAAAA,SAAA,KAAA,CAAAD,EAAAA,YAAAE,EAAAA,OAAA,CAAA,MAAA,qCAAA,EAAA,CAAAjC,QAAAA,IAAAA,CAAAA,EAAAA,YAAAA,EAAAA,eAAAA,KAAAA,IAAAA,CAAAA,CAAA,CAAA,EAAA+B,EAAAA,YAAA,MAAA,CAAA,MAAA,iIAiBpB,MAAAG,EAAAC,EAAA,QAAA,EACA,OAAAC,EAAAA,EAAAC,EAAAA,SAAAH,EAAA,IAAAI,GAAAC,EAAAA,WAAAD,EAAA,SAIF,CACF,8BAAC,aAAA,sBAKsB,sBAAAE,GAAApB,EAAA,MAAAoB,CACsB,EAAA,mCAAA,MAAA,qCAAA,IAAAlB,EAAA,KAEsB,EAAA,IAAA,CAAA,KAI7E,CACF,CAAA"}

package/dist/components/file-multiple-model-input/index.d.ts

@@ -0,0 +1,72 @@
+import { UploadProps } from 'element-plus';
+import { PropType } from 'vue';
+export type SkyFileMultipleModelInputProps = {
+    type?: 'file' | 'image';
+    dataName?: string;
+    dataUrl?: string;
+    limit?: number;
+    autoUpload?: UploadProps['autoUpload'];
+    modelValue?: Array<Record<string, unknown>>;
+} & Partial<UploadProps>;
+export declare const SkyFileMultipleModelInput: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    dataName: {
+        type: StringConstructor;
+        default: string;
+    };
+    dataUrl: {
+        type: StringConstructor;
+        default: string;
+    };
+    limit: {
+        type: NumberConstructor;
+        default: number;
+    };
+    autoUpload: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    modelValue: {
+        type: PropType<Array<Record<string, unknown>>>;
+        default: () => never[];
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    'update:modelValue': (value: Array<Record<string, unknown>>) => Record<string, unknown>[];
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    dataName: {
+        type: StringConstructor;
+        default: string;
+    };
+    dataUrl: {
+        type: StringConstructor;
+        default: string;
+    };
+    limit: {
+        type: NumberConstructor;
+        default: number;
+    };
+    autoUpload: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    modelValue: {
+        type: PropType<Array<Record<string, unknown>>>;
+        default: () => never[];
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((value: Record<string, unknown>[]) => any) | undefined;
+}>, {
+    type: string;
+    modelValue: Record<string, unknown>[];
+    autoUpload: boolean;
+    limit: number;
+    dataName: string;
+    dataUrl: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/components/file-multiple-model-input/index.mjs

@@ -0,0 +1,154 @@
+import "element-plus/es/components/dialog/style/css";
+import "element-plus/es/components/icon/style/css";
+import "element-plus/es/components/upload/style/css";
+import { defineComponent as I, useTemplateRef as N, ref as f, computed as s, createVNode as t, Fragment as d, mergeProps as b, h as M, cloneVNode as P } from "vue";
+import { EpPlus as R } from "../../icons/EpPlus.mjs";
+import { ElUpload as T, ElIcon as c, ElDialog as L, genFileId as A } from "element-plus";
+import "../../hooks/useUser.mjs";
+import "../../hooks/usePermission.mjs";
+import "../../hooks/useMenu.mjs";
+import "../../hooks/useTab.mjs";
+import "../../hooks/useRouteKeepAlive.mjs";
+import "../../hooks/useSize.mjs";
+import "../../hooks/useLang.mjs";
+import "../../hooks/useTheme.mjs";
+import "../../hooks/useList.mjs";
+import "../../hooks/useHiddenTitle.mjs";
+import "../../hooks/useForm.mjs";
+import "../../hooks/useShow.mjs";
+import "../../hooks/useReferenceArrayField.mjs";
+import "../../hooks/useTreeWithDetails.mjs";
+import "../../hooks/useFormGrid.mjs";
+import "../../hooks/useReferenceArrayInput.mjs";
+import { useUpload as B } from "../../hooks/useUpload.mjs";
+import { EpUploadFilled as C } from "../../icons/EpUploadFilled.mjs";
+import { useI18n as D } from "vue-i18n";
+const ne = /* @__PURE__ */ I({
+  name: "SkyFileMultipleModelInput",
+  inheritAttrs: !1,
+  props: {
+    // 这样就不能透传了
+    // ...uploadProps,
+    type: {
+      type: String,
+      default: "file"
+    },
+    dataName: {
+      type: String,
+      default: "name"
+    },
+    dataUrl: {
+      type: String,
+      default: "url"
+    },
+    limit: {
+      type: Number,
+      default: 1
+    },
+    autoUpload: {
+      type: Boolean,
+      default: !0
+    },
+    modelValue: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: {
+    "update:modelValue": (l) => l
+  },
+  setup(l, {
+    slots: p,
+    attrs: v,
+    emit: y
+  }) {
+    const {
+      t: r
+    } = D(), {
+      fileList: o,
+      action: g,
+      data: U,
+      headers: h,
+      method: S,
+      name: V,
+      beforeUpload: k
+    } = B(), u = N("uploadRef");
+    o.value = l.modelValue.map((e) => ({
+      upload: e,
+      name: e[l.dataName],
+      url: e[l.dataUrl]
+    }));
+    const w = (e) => {
+      if (l.limit === 1) {
+        u.value?.clearFiles();
+        const a = e[0];
+        a.uid = A(), u.value?.handleStart(a), l.autoUpload && u.value?.submit();
+      }
+    }, E = () => {
+      const e = [];
+      for (const a of o.value)
+        if (a.upload)
+          e.push(a.upload);
+        else {
+          const i = a.raw;
+          i?.upload && e.push(i.upload);
+        }
+      y("update:modelValue", e);
+    }, m = f(!1), n = f(), F = (e) => {
+      n.value = e.url, m.value = !0;
+    }, _ = s(() => l.type === "image" ? "image/*" : void 0), x = s(() => l.type === "image" ? "picture-card" : "text");
+    return () => t(d, null, [t(T, b({
+      class: "sky-file-multiple-model-input",
+      ref: "uploadRef",
+      action: g.value,
+      method: S.value,
+      name: V.value,
+      multiple: l.limit > 1,
+      limit: l.limit,
+      beforeUpload: k,
+      onSuccess: E,
+      onExceed: w,
+      headers: h.value,
+      data: U.value,
+      listType: x.value,
+      fileList: o.value,
+      "onUpdate:file-list": (e) => o.value = e,
+      autoUpload: l.autoUpload,
+      drag: l.type === "file",
+      showFileList: !0,
+      onPreview: F,
+      accept: _.value
+    }, v), {
+      default: () => l.type === "image" ? t(c, null, {
+        default: () => [t(R, null, null)]
+      }) : t(d, null, [t(c, {
+        class: "sky-file-multiple-model-input__icon"
+      }, {
+        default: () => [t(C, null, null)]
+      }), t("div", {
+        class: "sky-file-multiple-model-input__text"
+      }, [r("upload.drop"), t("em", null, [r("upload.click")])])]),
+      file: (e) => {
+        if (p.default) {
+          const a = p.default();
+          return M(d, a.map((i) => P(i, {
+            ...e
+          })));
+        }
+      }
+    }), t(L, {
+      appendToBody: !0,
+      modelValue: m.value,
+      "onUpdate:modelValue": (e) => m.value = e
+    }, {
+      default: () => [t("img", {
+        class: "sky-file-multiple-model-input__img",
+        src: n.value
+      }, null)]
+    })]);
+  }
+});
+export {
+  ne as SkyFileMultipleModelInput
+};
+//# sourceMappingURL=index.mjs.map