skyline-vue-admin 0.0.5 → 0.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/avatar-input/index.cjs +1 -1
- package/dist/components/avatar-input/index.cjs.map +1 -1
- package/dist/components/avatar-input/index.mjs +6 -6
- package/dist/components/avatar-input/index.mjs.map +1 -1
- package/dist/components/file-multiple-input/index.cjs +1 -1
- package/dist/components/file-multiple-input/index.cjs.map +1 -1
- package/dist/components/file-multiple-input/index.mjs +25 -25
- package/dist/components/file-multiple-input/index.mjs.map +1 -1
- package/dist/provides/dataProvider.d.ts +5 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});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
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});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 a=require("vue"),C=require("../../icons/EpPlus.cjs"),l=require("element-plus"),E=require("@vueuse/core"),F=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 R=require("../../hooks/useForm.cjs");require("../../hooks/useShow.cjs");require("../../hooks/useReferenceArrayField.cjs");require("../../hooks/useTreeWithDetails.cjs");const p=require("../../hooks/useFormGrid.cjs");require("../../hooks/useReferenceArrayInput.cjs");const L=require("../../hooks/useUpload.cjs"),y=require("../../setup/index.cjs"),P=require("../can-access/index.cjs"),V=a.defineComponent({name:"SkyAvatarInput",inheritAttrs:!1,props:{reference:{type:String,required:!0},source:{type:String,required:!0},label:String,rules:Object,dataId:{type:String,default:"id"},dataName:{type:String,default:"name"},dataUrl:{type:String,default:"url"},fileList:{type:Array,default:()=>[]}},setup(t,{slots:d,attrs:h}){const S=F.useRoute(),b=p.useFormGrid(),{formData:i,editData:o}=R.useForm(),w=a.computed(()=>t.label||t.source),{fileList:u}=L.useUpload(t.fileList),n=a.useTemplateRef("uploadRef"),U=S.meta;o.value&&(i[t.source]=o.value[t.source]);const k=async r=>{n.value?.clearFiles();const e=r[0];e.uid=l.genFileId(),n.value?.handleStart(e),n.value?.submit()},I=()=>{const r=u.value[0]?.id;if(r)i[t.source]=r;else{const e=u.value[0]?.raw;e?.data?.id&&(i[t.source]=e.data.id)}};let s;const{isLoading:c}=E.useAsyncState(async()=>{const r=i[t.source];if(r){s=new AbortController;const e=await y.skyConfig.dataProvider?.getOne?.(t.reference,{id:r,signal:s.signal});if(e?.data)return u.value=[{id:e.data[t.dataId],name:e.data[t.dataName],url:e.data[t.dataUrl]}],e}},void 0,{immediate:!0}),f=a.ref(""),v=a.shallowRef(),m=a.shallowRef(),q=a.ref(),g=a.ref(),N=async r=>{const e=await y.skyConfig.dataProvider?.getUploadConfig?.({file:r});e?.data&&(f.value=e.data.action,v.value=e.data.data,m.value=e.data.headers,q.value=e.data.method,g.value=e.data.name,r.data={id:e.data.file.id,name:e.data.file.name,url:e.data.file.url})};return()=>a.createVNode(P.SkyCanAccess,{resource:U.resource,action:["create","edit"],column:t.source},{default:()=>[a.createVNode(l.ElFormItem,{class:"sky-avatar-input",label:w.value,prop:t.source,rules:t.rules,style:b?`grid-area: ${t.source}`:""},{default:()=>[a.createVNode(l.ElUpload,a.mergeProps({ref:"uploadRef",action:f.value,method:q.value,name:g.value,withCredentials:t.withCredentials,multiple:t.multiple,limit:1,beforeUpload:N,onSuccess:I,onExceed:k,headers:m.value,data:v.value,listType:"picture-card",fileList:u.value,"onUpdate:file-list":r=>u.value=r,autoUpload:!0,showFileList:!1,disabled:c.value,accept:"image/*"},h),{default:()=>u.value.length?a.withDirectives(a.createVNode("div",{class:"sky-avatar-input__preview",style:{backgroundImage:`url(${u.value[0].url})`}},null),[[l.ElLoadingDirective,c.value||u.value[0].status!=="success"]]):a.createVNode(l.ElIcon,null,{default:()=>[a.createVNode(C.EpPlus,null,null)]}),file:r=>{if(d.default){const e=d.default();return a.h(a.Fragment,e.map(A=>a.cloneVNode(A,{...r})))}}})]})]})}});exports.SkyAvatarInput=V;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../src/components/avatar-input/index.tsx"],"sourcesContent":["import { EpPlus } from '@/icons/EpPlus'\r\nimport type { GetOneResult, Identifier, SkyUploadRawFile } from '@/provides'\r\nimport {\r\n ElFormItem,\r\n ElIcon,\r\n ElLoadingDirective,\r\n ElUpload,\r\n genFileId,\r\n type FormItemRule,\r\n type UploadFile,\r\n type UploadInstance,\r\n type UploadProps,\r\n type UploadRawFile,\r\n} from 'element-plus'\r\nimport {\r\n cloneVNode,\r\n computed,\r\n defineComponent,\r\n Fragment,\r\n h,\r\n ref,\r\n shallowRef,\r\n useTemplateRef,\r\n withDirectives,\r\n} from 'vue'\r\nimport { useAsyncState } from '@vueuse/core'\r\nimport { useRoute } from 'vue-router'\r\nimport { useForm, useFormGrid, useUpload, type SkyUploadUserFile } from '@/hooks'\r\nimport { skyConfig } from '@/setup'\r\nimport { SkyCanAccess } from '../can-access'\r\nimport type { SkyLayoutRouteMeta } from '@/router'\r\n\r\nexport interface SkyOssAvatarInputProps {\r\n reference: string\r\n source: string\r\n label?: string\r\n rules?: FormItemRule | FormItemRule[]\r\n dataId?: string\r\n dataName?: string\r\n dataUrl?: string\r\n fileList?: SkyUploadUserFile[]\r\n}\r\n\r\nexport const SkyAvatarInput = defineComponent<SkyOssAvatarInputProps & Partial<UploadProps>>({\r\n name: 'SkyAvatarInput',\r\n inheritAttrs: false,\r\n props: {\r\n reference: {\r\n type: String,\r\n required: true,\r\n },\r\n source: {\r\n type: String,\r\n required: true,\r\n },\r\n label: String,\r\n rules: Object,\r\n dataId: {\r\n type: String,\r\n default: 'id',\r\n },\r\n dataName: {\r\n type: String,\r\n default: 'name',\r\n },\r\n dataUrl: {\r\n type: String,\r\n default: 'url',\r\n },\r\n fileList: {\r\n type: Array,\r\n default: () => [],\r\n },\r\n },\r\n setup(props, { slots, attrs }) {\r\n const route = useRoute()\r\n const formGrid = useFormGrid()\r\n const { formData, editData } = useForm()!\r\n const title = computed<string>(() => props.label || props.source)\r\n // init fileList\r\n const { fileList } = useUpload(props.fileList!)\r\n const uploadRef = useTemplateRef<UploadInstance>('uploadRef')\r\n const routeMeta = route.meta as SkyLayoutRouteMeta\r\n\r\n if (editData.value) {\r\n formData[props.source] = editData.value[props.source]\r\n }\r\n\r\n const onExceed = async (files: File[]) => {\r\n uploadRef.value?.clearFiles()\r\n const file = files[0] as UploadRawFile\r\n file.uid = genFileId()\r\n uploadRef.value?.handleStart(file)\r\n uploadRef.value?.submit()\r\n }\r\n\r\n const onSuccess = () => {\r\n const id = fileList.value[0]?.id\r\n if (id) {\r\n formData[props.source] = id\r\n } else {\r\n const raw = fileList.value[0]?.raw as SkyUploadRawFile | undefined\r\n if (raw?.data?.id) {\r\n formData[props.source] = raw.data.id\r\n }\r\n }\r\n }\r\n\r\n let controller: AbortController | undefined\r\n const { isLoading } = useAsyncState<GetOneResult | undefined>(\r\n async () => {\r\n const id = formData[props.source]\r\n if (id) {\r\n controller = new AbortController()\r\n const res = await skyConfig.dataProvider?.getOne?.(props.reference, {\r\n id: id as Identifier,\r\n signal: controller.signal,\r\n })\r\n\r\n if (res?.data) {\r\n fileList.value = [\r\n {\r\n id: res.data[props.dataId!] as Identifier,\r\n name: res.data[props.dataName!] as string,\r\n url: res.data[props.dataUrl!] as string,\r\n },\r\n ]\r\n return res\r\n }\r\n }\r\n },\r\n undefined,\r\n {\r\n immediate: true,\r\n },\r\n )\r\n\r\n const action = ref('')\r\n const data = shallowRef<Record<string, unknown>>()\r\n const headers = shallowRef<Record<string, unknown>>()\r\n const method = ref()\r\n const name = ref<string>()\r\n const beforeUpload = async (rawFile: SkyUploadRawFile) => {\r\n const res = await skyConfig.dataProvider?.getUploadConfig?.({\r\n file: rawFile,\r\n })\r\n if (res?.data) {\r\n action.value = res.data.action\r\n data.value = res.data.data\r\n headers.value = res.data.headers\r\n method.value = res.data.method\r\n name.value = res.data.name\r\n rawFile.data = {\r\n id: res.data.file
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../src/components/avatar-input/index.tsx"],"sourcesContent":["import { EpPlus } from '@/icons/EpPlus'\r\nimport type { GetOneResult, Identifier, SkyUploadRawFile } from '@/provides'\r\nimport {\r\n ElFormItem,\r\n ElIcon,\r\n ElLoadingDirective,\r\n ElUpload,\r\n genFileId,\r\n type FormItemRule,\r\n type UploadFile,\r\n type UploadInstance,\r\n type UploadProps,\r\n type UploadRawFile,\r\n} from 'element-plus'\r\nimport {\r\n cloneVNode,\r\n computed,\r\n defineComponent,\r\n Fragment,\r\n h,\r\n ref,\r\n shallowRef,\r\n useTemplateRef,\r\n withDirectives,\r\n} from 'vue'\r\nimport { useAsyncState } from '@vueuse/core'\r\nimport { useRoute } from 'vue-router'\r\nimport { useForm, useFormGrid, useUpload, type SkyUploadUserFile } from '@/hooks'\r\nimport { skyConfig } from '@/setup'\r\nimport { SkyCanAccess } from '../can-access'\r\nimport type { SkyLayoutRouteMeta } from '@/router'\r\n\r\nexport interface SkyOssAvatarInputProps {\r\n reference: string\r\n source: string\r\n label?: string\r\n rules?: FormItemRule | FormItemRule[]\r\n dataId?: string\r\n dataName?: string\r\n dataUrl?: string\r\n fileList?: SkyUploadUserFile[]\r\n}\r\n\r\nexport const SkyAvatarInput = defineComponent<SkyOssAvatarInputProps & Partial<UploadProps>>({\r\n name: 'SkyAvatarInput',\r\n inheritAttrs: false,\r\n props: {\r\n reference: {\r\n type: String,\r\n required: true,\r\n },\r\n source: {\r\n type: String,\r\n required: true,\r\n },\r\n label: String,\r\n rules: Object,\r\n dataId: {\r\n type: String,\r\n default: 'id',\r\n },\r\n dataName: {\r\n type: String,\r\n default: 'name',\r\n },\r\n dataUrl: {\r\n type: String,\r\n default: 'url',\r\n },\r\n fileList: {\r\n type: Array,\r\n default: () => [],\r\n },\r\n },\r\n setup(props, { slots, attrs }) {\r\n const route = useRoute()\r\n const formGrid = useFormGrid()\r\n const { formData, editData } = useForm()!\r\n const title = computed<string>(() => props.label || props.source)\r\n // init fileList\r\n const { fileList } = useUpload(props.fileList!)\r\n const uploadRef = useTemplateRef<UploadInstance>('uploadRef')\r\n const routeMeta = route.meta as SkyLayoutRouteMeta\r\n\r\n if (editData.value) {\r\n formData[props.source] = editData.value[props.source]\r\n }\r\n\r\n const onExceed = async (files: File[]) => {\r\n uploadRef.value?.clearFiles()\r\n const file = files[0] as UploadRawFile\r\n file.uid = genFileId()\r\n uploadRef.value?.handleStart(file)\r\n uploadRef.value?.submit()\r\n }\r\n\r\n const onSuccess = () => {\r\n const id = fileList.value[0]?.id\r\n if (id) {\r\n formData[props.source] = id\r\n } else {\r\n const raw = fileList.value[0]?.raw as SkyUploadRawFile | undefined\r\n if (raw?.data?.id) {\r\n formData[props.source] = raw.data.id\r\n }\r\n }\r\n }\r\n\r\n let controller: AbortController | undefined\r\n const { isLoading } = useAsyncState<GetOneResult | undefined>(\r\n async () => {\r\n const id = formData[props.source]\r\n if (id) {\r\n controller = new AbortController()\r\n const res = await skyConfig.dataProvider?.getOne?.(props.reference, {\r\n id: id as Identifier,\r\n signal: controller.signal,\r\n })\r\n\r\n if (res?.data) {\r\n fileList.value = [\r\n {\r\n id: res.data[props.dataId!] as Identifier,\r\n name: res.data[props.dataName!] as string,\r\n url: res.data[props.dataUrl!] as string,\r\n },\r\n ]\r\n return res\r\n }\r\n }\r\n },\r\n undefined,\r\n {\r\n immediate: true,\r\n },\r\n )\r\n\r\n const action = ref('')\r\n const data = shallowRef<Record<string, unknown>>()\r\n const headers = shallowRef<Record<string, unknown>>()\r\n const method = ref()\r\n const name = ref<string>()\r\n const beforeUpload = async (rawFile: SkyUploadRawFile) => {\r\n const res = await skyConfig.dataProvider?.getUploadConfig?.({\r\n file: rawFile,\r\n })\r\n if (res?.data) {\r\n action.value = res.data.action\r\n data.value = res.data.data\r\n headers.value = res.data.headers\r\n method.value = res.data.method\r\n name.value = res.data.name\r\n rawFile.data = {\r\n id: res.data.file.id,\r\n name: res.data.file.name,\r\n url: res.data.file.url,\r\n }\r\n }\r\n }\r\n\r\n return () => (\r\n <SkyCanAccess resource={routeMeta.resource} action={['create', 'edit']} column={props.source}>\r\n <ElFormItem\r\n class=\"sky-avatar-input\"\r\n label={title.value}\r\n prop={props.source}\r\n rules={props.rules}\r\n style={formGrid ? `grid-area: ${props.source}` : ''}\r\n >\r\n <ElUpload\r\n ref=\"uploadRef\"\r\n action={action.value}\r\n method={method.value}\r\n name={name.value}\r\n withCredentials={props.withCredentials}\r\n multiple={props.multiple}\r\n limit={1}\r\n beforeUpload={beforeUpload}\r\n onSuccess={onSuccess}\r\n onExceed={onExceed}\r\n headers={headers.value}\r\n data={data.value}\r\n listType=\"picture-card\"\r\n fileList={fileList.value}\r\n onUpdate:file-list={(fs: SkyUploadUserFile[]) => (fileList.value = fs)}\r\n autoUpload={true}\r\n showFileList={false}\r\n disabled={isLoading.value}\r\n // https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Attributes/accept\r\n accept={'image/*'}\r\n {...attrs}\r\n >\r\n {{\r\n default: () =>\r\n fileList.value.length ? (\r\n withDirectives(\r\n <div\r\n class=\"sky-avatar-input__preview\"\r\n style={{ backgroundImage: `url(${fileList.value[0]!.url})` }}\r\n ></div>,\r\n [\r\n [\r\n ElLoadingDirective,\r\n isLoading.value || fileList.value[0]!.status !== 'success',\r\n ],\r\n ],\r\n )\r\n ) : (\r\n <ElIcon>\r\n <EpPlus />\r\n </ElIcon>\r\n ),\r\n file: (scope: { file: UploadFile; index: number }) => {\r\n if (slots.default) {\r\n const vnodes = slots.default()\r\n return h(\r\n Fragment,\r\n vnodes.map((vnode) => cloneVNode(vnode, { ...scope })),\r\n )\r\n }\r\n },\r\n }}\r\n </ElUpload>\r\n </ElFormItem>\r\n </SkyCanAccess>\r\n )\r\n },\r\n})\r\n"],"names":["SkyAvatarInput","defineComponent","name","inheritAttrs","props","reference","type","required","source","label","rules","dataId","default","dataName","dataUrl","fileList","attrs","route","useRoute","formGrid","useFormGrid","editData","title","computed","useUpload","uploadRef","useTemplateRef","routeMeta","formData","onExceed","files","file","id","raw","controller","isLoading","res","skyConfig","url","immediate","action","ref","data","shallowRef","headers","method","beforeUpload","rawFile","onSuccess","fs","vnodes","slots","h","Fragment","vnode","cloneVNode"],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import "element-plus/es/components/form-item/style/css";
|
|
2
2
|
import "element-plus/es/components/icon/style/css";
|
|
3
3
|
import "element-plus/es/components/upload/style/css";
|
|
4
|
-
import { defineComponent as L, computed as F, useTemplateRef as R, ref as u, shallowRef as y, createVNode as i, mergeProps as
|
|
4
|
+
import { defineComponent as L, computed as F, useTemplateRef as R, ref as u, shallowRef as y, createVNode as i, mergeProps as D, withDirectives as N, h as P, Fragment as x, cloneVNode as q } from "vue";
|
|
5
5
|
import { EpPlus as G } from "../../icons/EpPlus.mjs";
|
|
6
6
|
import { ElFormItem as O, ElUpload as T, ElLoadingDirective as V, ElIcon as _, genFileId as $ } from "element-plus";
|
|
7
7
|
import { useAsyncState as j } from "@vueuse/core";
|
|
@@ -105,9 +105,9 @@ const we = /* @__PURE__ */ L({
|
|
|
105
105
|
file: a
|
|
106
106
|
});
|
|
107
107
|
e?.data && (m.value = e.data.action, f.value = e.data.data, v.value = e.data.headers, p.value = e.data.method, g.value = e.data.name, a.data = {
|
|
108
|
-
id: e.data.file
|
|
109
|
-
name: e.data.file
|
|
110
|
-
url: e.data.file
|
|
108
|
+
id: e.data.file.id,
|
|
109
|
+
name: e.data.file.name,
|
|
110
|
+
url: e.data.file.url
|
|
111
111
|
});
|
|
112
112
|
};
|
|
113
113
|
return () => i(J, {
|
|
@@ -122,7 +122,7 @@ const we = /* @__PURE__ */ L({
|
|
|
122
122
|
rules: t.rules,
|
|
123
123
|
style: w ? `grid-area: ${t.source}` : ""
|
|
124
124
|
}, {
|
|
125
|
-
default: () => [i(T,
|
|
125
|
+
default: () => [i(T, D({
|
|
126
126
|
ref: "uploadRef",
|
|
127
127
|
action: m.value,
|
|
128
128
|
method: p.value,
|
|
@@ -143,7 +143,7 @@ const we = /* @__PURE__ */ L({
|
|
|
143
143
|
disabled: c.value,
|
|
144
144
|
accept: "image/*"
|
|
145
145
|
}, S), {
|
|
146
|
-
default: () => r.value.length ?
|
|
146
|
+
default: () => r.value.length ? N(i("div", {
|
|
147
147
|
class: "sky-avatar-input__preview",
|
|
148
148
|
style: {
|
|
149
149
|
backgroundImage: `url(${r.value[0].url})`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../../src/components/avatar-input/index.tsx"],"sourcesContent":["import { EpPlus } from '@/icons/EpPlus'\r\nimport type { GetOneResult, Identifier, SkyUploadRawFile } from '@/provides'\r\nimport {\r\n ElFormItem,\r\n ElIcon,\r\n ElLoadingDirective,\r\n ElUpload,\r\n genFileId,\r\n type FormItemRule,\r\n type UploadFile,\r\n type UploadInstance,\r\n type UploadProps,\r\n type UploadRawFile,\r\n} from 'element-plus'\r\nimport {\r\n cloneVNode,\r\n computed,\r\n defineComponent,\r\n Fragment,\r\n h,\r\n ref,\r\n shallowRef,\r\n useTemplateRef,\r\n withDirectives,\r\n} from 'vue'\r\nimport { useAsyncState } from '@vueuse/core'\r\nimport { useRoute } from 'vue-router'\r\nimport { useForm, useFormGrid, useUpload, type SkyUploadUserFile } from '@/hooks'\r\nimport { skyConfig } from '@/setup'\r\nimport { SkyCanAccess } from '../can-access'\r\nimport type { SkyLayoutRouteMeta } from '@/router'\r\n\r\nexport interface SkyOssAvatarInputProps {\r\n reference: string\r\n source: string\r\n label?: string\r\n rules?: FormItemRule | FormItemRule[]\r\n dataId?: string\r\n dataName?: string\r\n dataUrl?: string\r\n fileList?: SkyUploadUserFile[]\r\n}\r\n\r\nexport const SkyAvatarInput = defineComponent<SkyOssAvatarInputProps & Partial<UploadProps>>({\r\n name: 'SkyAvatarInput',\r\n inheritAttrs: false,\r\n props: {\r\n reference: {\r\n type: String,\r\n required: true,\r\n },\r\n source: {\r\n type: String,\r\n required: true,\r\n },\r\n label: String,\r\n rules: Object,\r\n dataId: {\r\n type: String,\r\n default: 'id',\r\n },\r\n dataName: {\r\n type: String,\r\n default: 'name',\r\n },\r\n dataUrl: {\r\n type: String,\r\n default: 'url',\r\n },\r\n fileList: {\r\n type: Array,\r\n default: () => [],\r\n },\r\n },\r\n setup(props, { slots, attrs }) {\r\n const route = useRoute()\r\n const formGrid = useFormGrid()\r\n const { formData, editData } = useForm()!\r\n const title = computed<string>(() => props.label || props.source)\r\n // init fileList\r\n const { fileList } = useUpload(props.fileList!)\r\n const uploadRef = useTemplateRef<UploadInstance>('uploadRef')\r\n const routeMeta = route.meta as SkyLayoutRouteMeta\r\n\r\n if (editData.value) {\r\n formData[props.source] = editData.value[props.source]\r\n }\r\n\r\n const onExceed = async (files: File[]) => {\r\n uploadRef.value?.clearFiles()\r\n const file = files[0] as UploadRawFile\r\n file.uid = genFileId()\r\n uploadRef.value?.handleStart(file)\r\n uploadRef.value?.submit()\r\n }\r\n\r\n const onSuccess = () => {\r\n const id = fileList.value[0]?.id\r\n if (id) {\r\n formData[props.source] = id\r\n } else {\r\n const raw = fileList.value[0]?.raw as SkyUploadRawFile | undefined\r\n if (raw?.data?.id) {\r\n formData[props.source] = raw.data.id\r\n }\r\n }\r\n }\r\n\r\n let controller: AbortController | undefined\r\n const { isLoading } = useAsyncState<GetOneResult | undefined>(\r\n async () => {\r\n const id = formData[props.source]\r\n if (id) {\r\n controller = new AbortController()\r\n const res = await skyConfig.dataProvider?.getOne?.(props.reference, {\r\n id: id as Identifier,\r\n signal: controller.signal,\r\n })\r\n\r\n if (res?.data) {\r\n fileList.value = [\r\n {\r\n id: res.data[props.dataId!] as Identifier,\r\n name: res.data[props.dataName!] as string,\r\n url: res.data[props.dataUrl!] as string,\r\n },\r\n ]\r\n return res\r\n }\r\n }\r\n },\r\n undefined,\r\n {\r\n immediate: true,\r\n },\r\n )\r\n\r\n const action = ref('')\r\n const data = shallowRef<Record<string, unknown>>()\r\n const headers = shallowRef<Record<string, unknown>>()\r\n const method = ref()\r\n const name = ref<string>()\r\n const beforeUpload = async (rawFile: SkyUploadRawFile) => {\r\n const res = await skyConfig.dataProvider?.getUploadConfig?.({\r\n file: rawFile,\r\n })\r\n if (res?.data) {\r\n action.value = res.data.action\r\n data.value = res.data.data\r\n headers.value = res.data.headers\r\n method.value = res.data.method\r\n name.value = res.data.name\r\n rawFile.data = {\r\n id: res.data.file[props.dataId!] as Identifier,\r\n name: res.data.file[props.dataName!] as string,\r\n url: res.data.file[props.dataUrl!] as string,\r\n }\r\n }\r\n }\r\n\r\n return () => (\r\n <SkyCanAccess resource={routeMeta.resource} action={['create', 'edit']} column={props.source}>\r\n <ElFormItem\r\n class=\"sky-avatar-input\"\r\n label={title.value}\r\n prop={props.source}\r\n rules={props.rules}\r\n style={formGrid ? `grid-area: ${props.source}` : ''}\r\n >\r\n <ElUpload\r\n ref=\"uploadRef\"\r\n action={action.value}\r\n method={method.value}\r\n name={name.value}\r\n withCredentials={props.withCredentials}\r\n multiple={props.multiple}\r\n limit={1}\r\n beforeUpload={beforeUpload}\r\n onSuccess={onSuccess}\r\n onExceed={onExceed}\r\n headers={headers.value}\r\n data={data.value}\r\n listType=\"picture-card\"\r\n fileList={fileList.value}\r\n onUpdate:file-list={(fs: SkyUploadUserFile[]) => (fileList.value = fs)}\r\n autoUpload={true}\r\n showFileList={false}\r\n disabled={isLoading.value}\r\n // https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Attributes/accept\r\n accept={'image/*'}\r\n {...attrs}\r\n >\r\n {{\r\n default: () =>\r\n fileList.value.length ? (\r\n withDirectives(\r\n <div\r\n class=\"sky-avatar-input__preview\"\r\n style={{ backgroundImage: `url(${fileList.value[0]!.url})` }}\r\n ></div>,\r\n [\r\n [\r\n ElLoadingDirective,\r\n isLoading.value || fileList.value[0]!.status !== 'success',\r\n ],\r\n ],\r\n )\r\n ) : (\r\n <ElIcon>\r\n <EpPlus />\r\n </ElIcon>\r\n ),\r\n file: (scope: { file: UploadFile; index: number }) => {\r\n if (slots.default) {\r\n const vnodes = slots.default()\r\n return h(\r\n Fragment,\r\n vnodes.map((vnode) => cloneVNode(vnode, { ...scope })),\r\n )\r\n }\r\n },\r\n }}\r\n </ElUpload>\r\n </ElFormItem>\r\n </SkyCanAccess>\r\n )\r\n },\r\n})\r\n"],"names":["SkyAvatarInput","defineComponent","name","inheritAttrs","props","reference","type","required","source","label","rules","dataId","default","dataName","dataUrl","fileList","attrs","route","useRoute","formGrid","useFormGrid","editData","title","computed","useUpload","uploadRef","useTemplateRef","routeMeta","formData","onExceed","files","file","id","raw","controller","isLoading","res","skyConfig","url","immediate","action","ref","data","shallowRef","headers","method","beforeUpload","rawFile","onSuccess","fs","vnodes","slots","h","Fragment","vnode","cloneVNode"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../../src/components/avatar-input/index.tsx"],"sourcesContent":["import { EpPlus } from '@/icons/EpPlus'\r\nimport type { GetOneResult, Identifier, SkyUploadRawFile } from '@/provides'\r\nimport {\r\n ElFormItem,\r\n ElIcon,\r\n ElLoadingDirective,\r\n ElUpload,\r\n genFileId,\r\n type FormItemRule,\r\n type UploadFile,\r\n type UploadInstance,\r\n type UploadProps,\r\n type UploadRawFile,\r\n} from 'element-plus'\r\nimport {\r\n cloneVNode,\r\n computed,\r\n defineComponent,\r\n Fragment,\r\n h,\r\n ref,\r\n shallowRef,\r\n useTemplateRef,\r\n withDirectives,\r\n} from 'vue'\r\nimport { useAsyncState } from '@vueuse/core'\r\nimport { useRoute } from 'vue-router'\r\nimport { useForm, useFormGrid, useUpload, type SkyUploadUserFile } from '@/hooks'\r\nimport { skyConfig } from '@/setup'\r\nimport { SkyCanAccess } from '../can-access'\r\nimport type { SkyLayoutRouteMeta } from '@/router'\r\n\r\nexport interface SkyOssAvatarInputProps {\r\n reference: string\r\n source: string\r\n label?: string\r\n rules?: FormItemRule | FormItemRule[]\r\n dataId?: string\r\n dataName?: string\r\n dataUrl?: string\r\n fileList?: SkyUploadUserFile[]\r\n}\r\n\r\nexport const SkyAvatarInput = defineComponent<SkyOssAvatarInputProps & Partial<UploadProps>>({\r\n name: 'SkyAvatarInput',\r\n inheritAttrs: false,\r\n props: {\r\n reference: {\r\n type: String,\r\n required: true,\r\n },\r\n source: {\r\n type: String,\r\n required: true,\r\n },\r\n label: String,\r\n rules: Object,\r\n dataId: {\r\n type: String,\r\n default: 'id',\r\n },\r\n dataName: {\r\n type: String,\r\n default: 'name',\r\n },\r\n dataUrl: {\r\n type: String,\r\n default: 'url',\r\n },\r\n fileList: {\r\n type: Array,\r\n default: () => [],\r\n },\r\n },\r\n setup(props, { slots, attrs }) {\r\n const route = useRoute()\r\n const formGrid = useFormGrid()\r\n const { formData, editData } = useForm()!\r\n const title = computed<string>(() => props.label || props.source)\r\n // init fileList\r\n const { fileList } = useUpload(props.fileList!)\r\n const uploadRef = useTemplateRef<UploadInstance>('uploadRef')\r\n const routeMeta = route.meta as SkyLayoutRouteMeta\r\n\r\n if (editData.value) {\r\n formData[props.source] = editData.value[props.source]\r\n }\r\n\r\n const onExceed = async (files: File[]) => {\r\n uploadRef.value?.clearFiles()\r\n const file = files[0] as UploadRawFile\r\n file.uid = genFileId()\r\n uploadRef.value?.handleStart(file)\r\n uploadRef.value?.submit()\r\n }\r\n\r\n const onSuccess = () => {\r\n const id = fileList.value[0]?.id\r\n if (id) {\r\n formData[props.source] = id\r\n } else {\r\n const raw = fileList.value[0]?.raw as SkyUploadRawFile | undefined\r\n if (raw?.data?.id) {\r\n formData[props.source] = raw.data.id\r\n }\r\n }\r\n }\r\n\r\n let controller: AbortController | undefined\r\n const { isLoading } = useAsyncState<GetOneResult | undefined>(\r\n async () => {\r\n const id = formData[props.source]\r\n if (id) {\r\n controller = new AbortController()\r\n const res = await skyConfig.dataProvider?.getOne?.(props.reference, {\r\n id: id as Identifier,\r\n signal: controller.signal,\r\n })\r\n\r\n if (res?.data) {\r\n fileList.value = [\r\n {\r\n id: res.data[props.dataId!] as Identifier,\r\n name: res.data[props.dataName!] as string,\r\n url: res.data[props.dataUrl!] as string,\r\n },\r\n ]\r\n return res\r\n }\r\n }\r\n },\r\n undefined,\r\n {\r\n immediate: true,\r\n },\r\n )\r\n\r\n const action = ref('')\r\n const data = shallowRef<Record<string, unknown>>()\r\n const headers = shallowRef<Record<string, unknown>>()\r\n const method = ref()\r\n const name = ref<string>()\r\n const beforeUpload = async (rawFile: SkyUploadRawFile) => {\r\n const res = await skyConfig.dataProvider?.getUploadConfig?.({\r\n file: rawFile,\r\n })\r\n if (res?.data) {\r\n action.value = res.data.action\r\n data.value = res.data.data\r\n headers.value = res.data.headers\r\n method.value = res.data.method\r\n name.value = res.data.name\r\n rawFile.data = {\r\n id: res.data.file.id,\r\n name: res.data.file.name,\r\n url: res.data.file.url,\r\n }\r\n }\r\n }\r\n\r\n return () => (\r\n <SkyCanAccess resource={routeMeta.resource} action={['create', 'edit']} column={props.source}>\r\n <ElFormItem\r\n class=\"sky-avatar-input\"\r\n label={title.value}\r\n prop={props.source}\r\n rules={props.rules}\r\n style={formGrid ? `grid-area: ${props.source}` : ''}\r\n >\r\n <ElUpload\r\n ref=\"uploadRef\"\r\n action={action.value}\r\n method={method.value}\r\n name={name.value}\r\n withCredentials={props.withCredentials}\r\n multiple={props.multiple}\r\n limit={1}\r\n beforeUpload={beforeUpload}\r\n onSuccess={onSuccess}\r\n onExceed={onExceed}\r\n headers={headers.value}\r\n data={data.value}\r\n listType=\"picture-card\"\r\n fileList={fileList.value}\r\n onUpdate:file-list={(fs: SkyUploadUserFile[]) => (fileList.value = fs)}\r\n autoUpload={true}\r\n showFileList={false}\r\n disabled={isLoading.value}\r\n // https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Attributes/accept\r\n accept={'image/*'}\r\n {...attrs}\r\n >\r\n {{\r\n default: () =>\r\n fileList.value.length ? (\r\n withDirectives(\r\n <div\r\n class=\"sky-avatar-input__preview\"\r\n style={{ backgroundImage: `url(${fileList.value[0]!.url})` }}\r\n ></div>,\r\n [\r\n [\r\n ElLoadingDirective,\r\n isLoading.value || fileList.value[0]!.status !== 'success',\r\n ],\r\n ],\r\n )\r\n ) : (\r\n <ElIcon>\r\n <EpPlus />\r\n </ElIcon>\r\n ),\r\n file: (scope: { file: UploadFile; index: number }) => {\r\n if (slots.default) {\r\n const vnodes = slots.default()\r\n return h(\r\n Fragment,\r\n vnodes.map((vnode) => cloneVNode(vnode, { ...scope })),\r\n )\r\n }\r\n },\r\n }}\r\n </ElUpload>\r\n </ElFormItem>\r\n </SkyCanAccess>\r\n )\r\n },\r\n})\r\n"],"names":["SkyAvatarInput","defineComponent","name","inheritAttrs","props","reference","type","required","source","label","rules","dataId","default","dataName","dataUrl","fileList","attrs","route","useRoute","formGrid","useFormGrid","editData","title","computed","useUpload","uploadRef","useTemplateRef","routeMeta","formData","onExceed","files","file","id","raw","controller","isLoading","res","skyConfig","url","immediate","action","ref","data","shallowRef","headers","method","beforeUpload","rawFile","onSuccess","fs","vnodes","slots","h","Fragment","vnode","cloneVNode"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"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:
|
|
1
|
+
"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=$;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../src/components/file-multiple-input/index.tsx"],"sourcesContent":["import { EpPlus } from '@/icons/EpPlus'\r\nimport type { GetManyResult, Identifier, SkyUploadRawFile } from '@/provides'\r\nimport {\r\n ElDialog,\r\n ElFormItem,\r\n ElIcon,\r\n ElLoadingDirective,\r\n ElUpload,\r\n genFileId,\r\n type FormItemRule,\r\n type UploadFile,\r\n type UploadInstance,\r\n type UploadProps,\r\n type UploadRawFile,\r\n} from 'element-plus'\r\nimport {\r\n cloneVNode,\r\n computed,\r\n defineComponent,\r\n Fragment,\r\n h,\r\n ref,\r\n shallowRef,\r\n useTemplateRef,\r\n withDirectives,\r\n} from 'vue'\r\nimport { useRoute } from 'vue-router'\r\nimport { useAsyncState } from '@vueuse/core'\r\nimport { useForm, useFormGrid, type SkyUploadUserFile } from '@/hooks'\r\nimport { skyConfig } from '@/setup'\r\nimport type { SkyLayoutRouteMeta } from '@/router'\r\nimport { SkyCanAccess } from '../can-access'\r\nimport { EpUploadFilled } from '@/icons/EpUploadFilled'\r\nimport { useI18n } from 'vue-i18n'\r\n\r\nexport interface SkyFileMultipleInputProps {\r\n reference: string\r\n source: string\r\n type?: 'file' | 'image'\r\n dataId?: string\r\n dataName?: string\r\n dataUrl?: string\r\n label?: string\r\n rules?: FormItemRule | FormItemRule[]\r\n name?: string\r\n withCredentials?: boolean\r\n limit?: number\r\n fileList?: SkyUploadUserFile[]\r\n autoUpload?: UploadProps['autoUpload']\r\n}\r\n\r\nexport const SkyFileMultipleInput = defineComponent<\r\n SkyFileMultipleInputProps & Partial<UploadProps>\r\n>({\r\n name: 'SkyFileMultipleInput',\r\n inheritAttrs: false,\r\n props: {\r\n reference: {\r\n type: String,\r\n required: true,\r\n },\r\n source: {\r\n type: String,\r\n required: true,\r\n },\r\n type: {\r\n type: String,\r\n default: 'file',\r\n },\r\n dataId: {\r\n type: String,\r\n default: 'id',\r\n },\r\n dataName: {\r\n type: String,\r\n default: 'name',\r\n },\r\n dataUrl: {\r\n type: String,\r\n default: 'url',\r\n },\r\n label: String,\r\n rules: Object,\r\n limit: {\r\n type: Number,\r\n default: 1,\r\n },\r\n fileList: {\r\n type: Array,\r\n default: () => [],\r\n },\r\n autoUpload: {\r\n type: Boolean,\r\n default: true,\r\n },\r\n },\r\n setup(props, { slots, attrs }) {\r\n const { t } = useI18n()\r\n const route = useRoute()\r\n const formGrid = useFormGrid()\r\n const { formData, editData } = useForm()!\r\n const title = computed<string>(() => props.label || props.source)\r\n // init fileList\r\n const fileList = shallowRef<SkyUploadUserFile[]>(props.fileList!)\r\n const uploadRef = useTemplateRef<UploadInstance>('uploadRef')\r\n const routeMeta = route.meta as SkyLayoutRouteMeta\r\n\r\n if (editData.value) {\r\n formData[props.source] = editData.value[props.source]\r\n }\r\n\r\n const onExceed = (files: File[]) => {\r\n if (props.limit === 1) {\r\n uploadRef.value?.clearFiles()\r\n const file = files[0] as UploadRawFile\r\n file.uid = genFileId()\r\n uploadRef.value?.handleStart(file)\r\n if (props.autoUpload) {\r\n uploadRef.value?.submit()\r\n }\r\n }\r\n }\r\n\r\n const onSuccess = () => {\r\n const ids: Identifier[] = []\r\n for (const fl of fileList.value) {\r\n if (fl.id) {\r\n ids.push(fl.id as Identifier)\r\n } else {\r\n const raw = fl.raw as SkyUploadRawFile | undefined\r\n if (raw?.data?.id) {\r\n fl.id = raw.data.id as Identifier\r\n ids.push(raw.data.id as Identifier)\r\n }\r\n }\r\n }\r\n formData[props.source] = ids\r\n }\r\n\r\n const preview = ref(false)\r\n const previewUrl = ref<string>()\r\n const onPreview = (file: UploadFile) => {\r\n previewUrl.value = file.url\r\n preview.value = true\r\n }\r\n\r\n let controller: AbortController | undefined\r\n const { isLoading } = useAsyncState<GetManyResult | undefined>(\r\n async () => {\r\n const ids = formData[props.source]\r\n if (ids) {\r\n controller = new AbortController()\r\n const res = await skyConfig.dataProvider?.getMany?.(props.reference, {\r\n ids: ids as Identifier[],\r\n signal: controller.signal,\r\n })\r\n\r\n if (res?.data) {\r\n fileList.value = res.data.map((d) => ({\r\n id: d[props.dataId!] as Identifier,\r\n name: d[props.dataName!] as string,\r\n url: d[props.dataUrl!] as string,\r\n }))\r\n return res\r\n }\r\n }\r\n },\r\n undefined,\r\n {\r\n immediate: true,\r\n },\r\n )\r\n\r\n const action = ref('')\r\n const data = shallowRef<Record<string, unknown>>()\r\n const headers = shallowRef<Record<string, unknown>>()\r\n const method = ref()\r\n const name = ref<string>()\r\n const beforeUpload = async (rawFile: SkyUploadRawFile) => {\r\n const res = await skyConfig.dataProvider?.getUploadConfig?.({\r\n file: rawFile,\r\n })\r\n if (res?.data) {\r\n action.value = res.data.action\r\n data.value = res.data.data\r\n headers.value = res.data.headers\r\n method.value = res.data.method\r\n name.value = res.data.name\r\n rawFile.data = {\r\n id: res.data.file[props.dataId!] as Identifier,\r\n name: res.data.file[props.dataName!] as string,\r\n url: res.data.file[props.dataUrl!] as string,\r\n }\r\n }\r\n }\r\n\r\n const accept = computed(() => (props.type === 'image' ? 'image/*' : undefined))\r\n const listType = computed(() => (props.type === 'image' ? 'picture-card' : 'text'))\r\n\r\n return () => (\r\n <SkyCanAccess resource={routeMeta.resource} action={['create', 'edit']} column={props.source}>\r\n <ElFormItem\r\n class={['sky-file-multiple-input', `is-${props.type}`]}\r\n label={title.value}\r\n prop={props.source}\r\n rules={props.rules}\r\n style={formGrid ? `grid-area: ${props.source}` : ''}\r\n >\r\n <ElUpload\r\n ref=\"uploadRef\"\r\n action={action.value}\r\n method={method.value}\r\n name={props.name}\r\n withCredentials={props.withCredentials}\r\n multiple={props.limit! > 1}\r\n limit={props.limit}\r\n beforeUpload={beforeUpload}\r\n onSuccess={onSuccess}\r\n onExceed={onExceed}\r\n headers={headers.value}\r\n data={data.value}\r\n listType={listType.value}\r\n fileList={fileList.value}\r\n onUpdate:file-list={(fs: SkyUploadUserFile[]) => (fileList.value = fs)}\r\n autoUpload={props.autoUpload}\r\n drag={props.type === 'file'}\r\n showFileList\r\n onPreview={onPreview}\r\n // https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Attributes/accept\r\n accept={accept.value}\r\n {...attrs}\r\n >\r\n {{\r\n default: () =>\r\n props.type === 'image' ? (\r\n <ElIcon>\r\n <EpPlus />\r\n </ElIcon>\r\n ) : (\r\n <>\r\n <ElIcon class=\"sky-file-multiple-input__icon\">\r\n <EpUploadFilled />\r\n </ElIcon>\r\n <div class=\"sky-file-multiple-input__text\">\r\n {t('upload.drop')}\r\n <em>{t('upload.click')}</em>\r\n </div>\r\n </>\r\n ),\r\n file: (scope: { file: UploadFile; index: number }) => {\r\n if (slots.default) {\r\n const vnodes = slots.default()\r\n return withDirectives(\r\n h(\r\n Fragment,\r\n vnodes.map((vnode) => cloneVNode(vnode, { ...scope })),\r\n ),\r\n [[ElLoadingDirective, isLoading.value]],\r\n )\r\n }\r\n },\r\n }}\r\n </ElUpload>\r\n <ElDialog\r\n appendToBody\r\n modelValue={preview.value}\r\n onUpdate:modelValue={(v) => (preview.value = v)}\r\n >\r\n <img class=\"sky-file-multiple-input__img\" src={previewUrl.value} />\r\n </ElDialog>\r\n </ElFormItem>\r\n </SkyCanAccess>\r\n )\r\n },\r\n})\r\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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"}
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../src/components/file-multiple-input/index.tsx"],"sourcesContent":["import { EpPlus } from '@/icons/EpPlus'\r\nimport type { GetManyResult, Identifier, SkyUploadRawFile } from '@/provides'\r\nimport {\r\n ElDialog,\r\n ElFormItem,\r\n ElIcon,\r\n ElLoadingDirective,\r\n ElUpload,\r\n genFileId,\r\n type FormItemRule,\r\n type UploadFile,\r\n type UploadInstance,\r\n type UploadProps,\r\n type UploadRawFile,\r\n} from 'element-plus'\r\nimport {\r\n cloneVNode,\r\n computed,\r\n defineComponent,\r\n Fragment,\r\n h,\r\n ref,\r\n shallowRef,\r\n useTemplateRef,\r\n withDirectives,\r\n} from 'vue'\r\nimport { useRoute } from 'vue-router'\r\nimport { useAsyncState } from '@vueuse/core'\r\nimport { useForm, useFormGrid, type SkyUploadUserFile } from '@/hooks'\r\nimport { skyConfig } from '@/setup'\r\nimport type { SkyLayoutRouteMeta } from '@/router'\r\nimport { SkyCanAccess } from '../can-access'\r\nimport { EpUploadFilled } from '@/icons/EpUploadFilled'\r\nimport { useI18n } from 'vue-i18n'\r\n\r\nexport interface SkyFileMultipleInputProps {\r\n reference: string\r\n source: string\r\n type?: 'file' | 'image'\r\n dataId?: string\r\n dataName?: string\r\n dataUrl?: string\r\n label?: string\r\n rules?: FormItemRule | FormItemRule[]\r\n name?: string\r\n withCredentials?: boolean\r\n limit?: number\r\n fileList?: SkyUploadUserFile[]\r\n autoUpload?: UploadProps['autoUpload']\r\n}\r\n\r\nexport const SkyFileMultipleInput = defineComponent<\r\n SkyFileMultipleInputProps & Partial<UploadProps>\r\n>({\r\n name: 'SkyFileMultipleInput',\r\n inheritAttrs: false,\r\n props: {\r\n reference: {\r\n type: String,\r\n required: true,\r\n },\r\n source: {\r\n type: String,\r\n required: true,\r\n },\r\n type: {\r\n type: String,\r\n default: 'file',\r\n },\r\n dataId: {\r\n type: String,\r\n default: 'id',\r\n },\r\n dataName: {\r\n type: String,\r\n default: 'name',\r\n },\r\n dataUrl: {\r\n type: String,\r\n default: 'url',\r\n },\r\n label: String,\r\n rules: Object,\r\n limit: {\r\n type: Number,\r\n default: 1,\r\n },\r\n fileList: {\r\n type: Array,\r\n default: () => [],\r\n },\r\n autoUpload: {\r\n type: Boolean,\r\n default: true,\r\n },\r\n },\r\n setup(props, { slots, attrs }) {\r\n const { t } = useI18n()\r\n const route = useRoute()\r\n const formGrid = useFormGrid()\r\n const { formData, editData } = useForm()!\r\n const title = computed<string>(() => props.label || props.source)\r\n // init fileList\r\n const fileList = shallowRef<SkyUploadUserFile[]>(props.fileList!)\r\n const uploadRef = useTemplateRef<UploadInstance>('uploadRef')\r\n const routeMeta = route.meta as SkyLayoutRouteMeta\r\n\r\n if (editData.value) {\r\n formData[props.source] = editData.value[props.source]\r\n }\r\n\r\n const onExceed = (files: File[]) => {\r\n if (props.limit === 1) {\r\n uploadRef.value?.clearFiles()\r\n const file = files[0] as UploadRawFile\r\n file.uid = genFileId()\r\n uploadRef.value?.handleStart(file)\r\n if (props.autoUpload) {\r\n uploadRef.value?.submit()\r\n }\r\n }\r\n }\r\n\r\n const onSuccess = () => {\r\n const ids: Identifier[] = []\r\n for (const fl of fileList.value) {\r\n if (fl.id) {\r\n ids.push(fl.id as Identifier)\r\n } else {\r\n const raw = fl.raw as SkyUploadRawFile | undefined\r\n if (raw?.data?.id) {\r\n fl.id = raw.data.id as Identifier\r\n ids.push(raw.data.id as Identifier)\r\n }\r\n }\r\n }\r\n formData[props.source] = ids\r\n }\r\n\r\n const preview = ref(false)\r\n const previewUrl = ref<string>()\r\n const onPreview = (file: UploadFile) => {\r\n previewUrl.value = file.url\r\n preview.value = true\r\n }\r\n\r\n let controller: AbortController | undefined\r\n const { isLoading } = useAsyncState<GetManyResult | undefined>(\r\n async () => {\r\n const ids = formData[props.source]\r\n if (ids) {\r\n controller = new AbortController()\r\n const res = await skyConfig.dataProvider?.getMany?.(props.reference, {\r\n ids: ids as Identifier[],\r\n signal: controller.signal,\r\n })\r\n\r\n if (res?.data) {\r\n fileList.value = res.data.map((d) => ({\r\n id: d[props.dataId!] as Identifier,\r\n name: d[props.dataName!] as string,\r\n url: d[props.dataUrl!] as string,\r\n }))\r\n return res\r\n }\r\n }\r\n },\r\n undefined,\r\n {\r\n immediate: true,\r\n },\r\n )\r\n\r\n const action = ref('')\r\n const data = shallowRef<Record<string, unknown>>()\r\n const headers = shallowRef<Record<string, unknown>>()\r\n const method = ref()\r\n const name = ref<string>()\r\n const beforeUpload = async (rawFile: SkyUploadRawFile) => {\r\n const res = await skyConfig.dataProvider?.getUploadConfig?.({\r\n file: rawFile,\r\n })\r\n if (res?.data) {\r\n action.value = res.data.action\r\n data.value = res.data.data\r\n headers.value = res.data.headers\r\n method.value = res.data.method\r\n name.value = res.data.name\r\n rawFile.data = {\r\n id: res.data.file.id,\r\n name: res.data.file.name,\r\n url: res.data.file.url,\r\n }\r\n }\r\n }\r\n\r\n const accept = computed(() => (props.type === 'image' ? 'image/*' : undefined))\r\n const listType = computed(() => (props.type === 'image' ? 'picture-card' : 'text'))\r\n\r\n return () => (\r\n <SkyCanAccess resource={routeMeta.resource} action={['create', 'edit']} column={props.source}>\r\n <ElFormItem\r\n class={['sky-file-multiple-input', `is-${props.type}`]}\r\n label={title.value}\r\n prop={props.source}\r\n rules={props.rules}\r\n style={formGrid ? `grid-area: ${props.source}` : ''}\r\n >\r\n <ElUpload\r\n ref=\"uploadRef\"\r\n action={action.value}\r\n method={method.value}\r\n name={props.name}\r\n withCredentials={props.withCredentials}\r\n multiple={props.limit! > 1}\r\n limit={props.limit}\r\n beforeUpload={beforeUpload}\r\n onSuccess={onSuccess}\r\n onExceed={onExceed}\r\n headers={headers.value}\r\n data={data.value}\r\n listType={listType.value}\r\n fileList={fileList.value}\r\n onUpdate:file-list={(fs: SkyUploadUserFile[]) => (fileList.value = fs)}\r\n autoUpload={props.autoUpload}\r\n drag={props.type === 'file'}\r\n showFileList\r\n onPreview={onPreview}\r\n // https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Attributes/accept\r\n accept={accept.value}\r\n {...attrs}\r\n >\r\n {{\r\n default: () =>\r\n props.type === 'image' ? (\r\n <ElIcon>\r\n <EpPlus />\r\n </ElIcon>\r\n ) : (\r\n <>\r\n <ElIcon class=\"sky-file-multiple-input__icon\">\r\n <EpUploadFilled />\r\n </ElIcon>\r\n <div class=\"sky-file-multiple-input__text\">\r\n {t('upload.drop')}\r\n <em>{t('upload.click')}</em>\r\n </div>\r\n </>\r\n ),\r\n file: (scope: { file: UploadFile; index: number }) => {\r\n if (slots.default) {\r\n const vnodes = slots.default()\r\n return withDirectives(\r\n h(\r\n Fragment,\r\n vnodes.map((vnode) => cloneVNode(vnode, { ...scope })),\r\n ),\r\n [[ElLoadingDirective, isLoading.value]],\r\n )\r\n }\r\n },\r\n }}\r\n </ElUpload>\r\n <ElDialog\r\n appendToBody\r\n modelValue={preview.value}\r\n onUpdate:modelValue={(v) => (preview.value = v)}\r\n >\r\n <img class=\"sky-file-multiple-input__img\" src={previewUrl.value} />\r\n </ElDialog>\r\n </ElFormItem>\r\n </SkyCanAccess>\r\n )\r\n },\r\n})\r\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":"wsCAmDAA,EAAAC,EAAAA,gBAAA,CAGEC,KAAAA,uBACAC,aAAAA,GACAC,MAAAA,CACEC,UAAAA,CACEC,KAAAA,OACAC,SAAAA,IAEFC,OAAAA,CACEF,KAAAA,OACAC,SAAAA,IAEFD,KAAAA,CACEA,KAAAA,OACAG,QAAAA,QAEFC,OAAAA,CACEJ,KAAAA,OACAG,QAAAA,MAEFE,SAAAA,CACEL,KAAAA,OACAG,QAAAA,QAEFG,QAAAA,CACEN,KAAAA,OACAG,QAAAA,OAEFI,MAAAA,OACAC,MAAAA,OACAC,MAAAA,CACET,KAAAA,OACAG,QAAAA,GAEFO,SAAAA,CACEV,KAAAA,sBAGFW,WAAAA,CACEX,KAAAA,QACAG,QAAAA,EACF,oBAEoBS,MAAAA,CAAM,EAAA,OAClBC,EAAAA,eACRC,EAAAC,EAAAA,SAAA,EACAC,EAAAC,EAAAA,YAAA,cACkBC,SAAAA,eAClBC,EAAAC,EAAAA,SAAA,IAAAtB,EAAA,OAAAA,EAAA,MAAA,EAEAY,EAAAW,EAAAA,WAAAvB,EAAA,QAAA,EACAwB,EAAAC,EAAAA,eAAA,WAAA,EACAC,EAAAV,EAAA,eAGEW,EAAAA,EAAAA,MAAAA,EAAAA,EAAAA,MAAAA,EAAAA,MAAAA,eAIA,GAAA3B,EAAA,QAAA,EAAA,CACEwB,EAAAA,OAAAA,WAAAA,EACA,MAAAI,EAAAC,EAAA,CAAA,EACAD,EAAAA,IAAAA,YAAAA,EACAJ,EAAAA,OAAAA,YAAAA,CAAAA,gBAEEA,EAAAA,OAAAA,OAAAA,CAEJ,qBAKA,UAAAM,KAAAlB,EAAA,cAEImB,EAAAA,KAAAA,EAAAA,EAAAA,MACF,CACE,MAAAC,EAAAF,EAAA,IACAE,GAAA,MAAA,KACEF,EAAAA,GAAAA,EAAAA,KAAAA,qBAGJ,CAEFH,EAAAA,EAAAA,MAAAA,EAAAA,GAGFM,EAAAC,EAAAA,IAAA,EAAA,EACAC,EAAAD,EAAAA,IAAA,QAEEC,EAAAA,MAAAA,EAAAA,gBAIF,IAAAC,QACQC,UAAAA,6BAEJ,MAAAN,EAAAJ,EAAA3B,EAAA,MAAA,EACA,GAAA+B,EAAA,CACEK,EAAAA,IAAAA,gBACA,MAAAE,EAAA,MAAAC,EAAAA,UAAA,cAAA,UAAAvC,EAAA,UAAA,CACE+B,IAAAA,iBAEF,CAAA,4CAIIS,GAAAA,EAAAA,EAAAA,MAAAA,EACA1C,KAAAA,EAAAA,EAAAA,QAAAA,EACA2C,IAAAA,EAAAA,EAAAA,OAAAA,CACF,EAAA,EACAH,CAEJ,WAIAI,UAAAA,EACF,CAAA,EAGFC,EAAAT,EAAAA,IAAA,EAAA,EACAU,EAAArB,EAAAA,WAAA,EACAsB,EAAAtB,EAAAA,WAAA,EACAuB,EAAAZ,EAAAA,IAAA,EACApC,EAAAoC,EAAAA,IAAA,EACAa,EAAA,MAAAC,GAAA,4DAEIpB,KAAAA,CACF,CAAA,YAEEe,EAAAA,MAAAA,EAAAA,KAAAA,OACAC,EAAAA,MAAAA,EAAAA,KAAAA,KACAC,EAAAA,MAAAA,EAAAA,KAAAA,QACAC,EAAAA,MAAAA,EAAAA,KAAAA,OACAhD,EAAAA,MAAAA,EAAAA,KAAAA,aAEE0C,GAAAA,EAAAA,KAAAA,KAAAA,GACA1C,KAAAA,EAAAA,KAAAA,KAAAA,KACA2C,IAAAA,EAAAA,KAAAA,KAAAA,OAKNQ,EAAA3B,EAAAA,SAAA,IAAAtB,EAAA,OAAA,QAAA,UAAA,MAAA,EACAkD,EAAA5B,EAAAA,SAAA,IAAAtB,EAAA,OAAA,QAAA,eAAA,MAAA,8DAG4C,OAAA,CAAA,SAAA,MAAA,EAA4B,OAAAA,EAAA,MAAsB,EAAA,CAAAK,QAAAA,IAAAA,CAAAA,EAAAA,YAAAA,aAAAA,4FAKtE,MAAAa,EAAA,cAAAlB,EAAA,MAAA,GAAA,EACiC,EAAA,CAAAK,QAAAA,IAAAA,CAAAA,cAAAA,EAAAA,SAAAA,EAAAA,WAAAA,CAAA,IAAA,wFAOX,SAAAL,EAAA,MAAA,gBAEpB,aAAA+C,EACQ,UAAAI,EACN,SAAAC,iEAKI,qBAAAC,GAAAzC,EAAA,MAAAyC,0BAEI,KAAArD,EAAA,OAAA,OACD,aAAA,GAAA,UAAAsD,EAEP,OAAAL,EAAA,KAEA,EAAAnC,CAAA,EAAA,2DAKMT,QAAAA,IAAAA,CAAAA,EAAAA,YAAAA,EAAAA,OAAAA,KAAAA,IAAAA,CAAAA,CAAA,CAAA,EAAAkD,EAAAA,YAAAC,EAAAA,SAAA,KAAA,CAAAD,EAAAA,YAAAE,EAAAA,OAAA,CAAA,MAAA,+BAAA,EAAA,CAAApD,QAAAA,IAAAA,CAAAA,EAAAA,YAAAA,EAAAA,eAAAA,KAAAA,IAAAA,CAAAA,CAAA,CAAA,EAAAkD,EAAAA,YAAA,MAAA,CAAA,MAAA,2HAiBpB,MAAAG,EAAAC,EAAA,QAAA,EACA,OAAAC,EAAAA,eAAAC,EAAAA,EAAAC,WAAAJ,EAAA,IAAAK,GAAAC,EAAAA,WAAAD,EAAA,KAGuD,CAAA,CAAA,CAAA,EAAA,CAAA,CAAAE,EAAAA,mBAAA5B,EAAA,KAAA,CAAA,CAAA,CAIzD,CACF,8BAAC,aAAA,sBAKsB,sBAAA6B,GAAAjC,EAAA,MAAAiC,CACsB,EAAA,mCAAA,MAAA,+BAAA,IAAA/B,EAAA,KAEgB,EAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAKzE,CACF,CAAA"}
|
|
@@ -2,7 +2,7 @@ import "element-plus/es/components/dialog/style/css";
|
|
|
2
2
|
import "element-plus/es/components/form-item/style/css";
|
|
3
3
|
import "element-plus/es/components/icon/style/css";
|
|
4
4
|
import "element-plus/es/components/upload/style/css";
|
|
5
|
-
import { defineComponent as T, computed as m, shallowRef as
|
|
5
|
+
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";
|
|
6
6
|
import { EpPlus as j } from "../../icons/EpPlus.mjs";
|
|
7
7
|
import { ElFormItem as O, ElUpload as z, ElLoadingDirective as H, ElIcon as b, ElDialog as J, genFileId as K } from "element-plus";
|
|
8
8
|
import { useRoute as Q } from "vue-router";
|
|
@@ -27,7 +27,7 @@ import { skyConfig as k } from "../../setup/index.mjs";
|
|
|
27
27
|
import { SkyCanAccess as Z } from "../can-access/index.mjs";
|
|
28
28
|
import { EpUploadFilled as ee } from "../../icons/EpUploadFilled.mjs";
|
|
29
29
|
import { useI18n as te } from "vue-i18n";
|
|
30
|
-
const
|
|
30
|
+
const _e = /* @__PURE__ */ T({
|
|
31
31
|
name: "SkyFileMultipleInput",
|
|
32
32
|
inheritAttrs: !1,
|
|
33
33
|
props: {
|
|
@@ -71,7 +71,7 @@ const Re = /* @__PURE__ */ T({
|
|
|
71
71
|
}
|
|
72
72
|
},
|
|
73
73
|
setup(e, {
|
|
74
|
-
slots:
|
|
74
|
+
slots: c,
|
|
75
75
|
attrs: E
|
|
76
76
|
}) {
|
|
77
77
|
const {
|
|
@@ -79,15 +79,15 @@ const Re = /* @__PURE__ */ T({
|
|
|
79
79
|
} = te(), F = Q(), I = Y(), {
|
|
80
80
|
formData: r,
|
|
81
81
|
editData: p
|
|
82
|
-
} = X(), C = m(() => e.label || e.source), u =
|
|
82
|
+
} = X(), C = m(() => e.label || e.source), u = s(e.fileList), d = V("uploadRef"), L = F.meta;
|
|
83
83
|
p.value && (r[e.source] = p.value[e.source]);
|
|
84
|
-
const
|
|
84
|
+
const P = (a) => {
|
|
85
85
|
if (e.limit === 1) {
|
|
86
86
|
d.value?.clearFiles();
|
|
87
87
|
const t = a[0];
|
|
88
88
|
t.uid = K(), d.value?.handleStart(t), e.autoUpload && d.value?.submit();
|
|
89
89
|
}
|
|
90
|
-
},
|
|
90
|
+
}, R = () => {
|
|
91
91
|
const a = [];
|
|
92
92
|
for (const t of u.value)
|
|
93
93
|
if (t.id)
|
|
@@ -97,12 +97,12 @@ const Re = /* @__PURE__ */ T({
|
|
|
97
97
|
i?.data?.id && (t.id = i.data.id, a.push(i.data.id));
|
|
98
98
|
}
|
|
99
99
|
r[e.source] = a;
|
|
100
|
-
}, n = o(!1), v = o(),
|
|
100
|
+
}, n = o(!1), v = o(), _ = (a) => {
|
|
101
101
|
v.value = a.url, n.value = !0;
|
|
102
102
|
};
|
|
103
103
|
let y;
|
|
104
104
|
const {
|
|
105
|
-
isLoading:
|
|
105
|
+
isLoading: x
|
|
106
106
|
} = W(async () => {
|
|
107
107
|
const a = r[e.source];
|
|
108
108
|
if (a) {
|
|
@@ -120,16 +120,16 @@ const Re = /* @__PURE__ */ T({
|
|
|
120
120
|
}
|
|
121
121
|
}, void 0, {
|
|
122
122
|
immediate: !0
|
|
123
|
-
}), g = o(""), h =
|
|
123
|
+
}), g = o(""), h = s(), S = s(), U = o(), A = o(), D = async (a) => {
|
|
124
124
|
const t = await k.dataProvider?.getUploadConfig?.({
|
|
125
125
|
file: a
|
|
126
126
|
});
|
|
127
|
-
t?.data && (g.value = t.data.action, h.value = t.data.data,
|
|
128
|
-
id: t.data.file
|
|
129
|
-
name: t.data.file
|
|
130
|
-
url: t.data.file
|
|
127
|
+
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 = {
|
|
128
|
+
id: t.data.file.id,
|
|
129
|
+
name: t.data.file.name,
|
|
130
|
+
url: t.data.file.url
|
|
131
131
|
});
|
|
132
|
-
},
|
|
132
|
+
}, N = m(() => e.type === "image" ? "image/*" : void 0), M = m(() => e.type === "image" ? "picture-card" : "text");
|
|
133
133
|
return () => l(Z, {
|
|
134
134
|
resource: L.resource,
|
|
135
135
|
action: ["create", "edit"],
|
|
@@ -145,15 +145,15 @@ const Re = /* @__PURE__ */ T({
|
|
|
145
145
|
default: () => [l(z, q({
|
|
146
146
|
ref: "uploadRef",
|
|
147
147
|
action: g.value,
|
|
148
|
-
method:
|
|
148
|
+
method: U.value,
|
|
149
149
|
name: e.name,
|
|
150
150
|
withCredentials: e.withCredentials,
|
|
151
151
|
multiple: e.limit > 1,
|
|
152
152
|
limit: e.limit,
|
|
153
|
-
beforeUpload:
|
|
154
|
-
onSuccess:
|
|
155
|
-
onExceed:
|
|
156
|
-
headers:
|
|
153
|
+
beforeUpload: D,
|
|
154
|
+
onSuccess: R,
|
|
155
|
+
onExceed: P,
|
|
156
|
+
headers: S.value,
|
|
157
157
|
data: h.value,
|
|
158
158
|
listType: M.value,
|
|
159
159
|
fileList: u.value,
|
|
@@ -161,8 +161,8 @@ const Re = /* @__PURE__ */ T({
|
|
|
161
161
|
autoUpload: e.autoUpload,
|
|
162
162
|
drag: e.type === "file",
|
|
163
163
|
showFileList: !0,
|
|
164
|
-
onPreview:
|
|
165
|
-
accept:
|
|
164
|
+
onPreview: _,
|
|
165
|
+
accept: N.value
|
|
166
166
|
}, E), {
|
|
167
167
|
default: () => e.type === "image" ? l(b, null, {
|
|
168
168
|
default: () => [l(j, null, null)]
|
|
@@ -174,11 +174,11 @@ const Re = /* @__PURE__ */ T({
|
|
|
174
174
|
class: "sky-file-multiple-input__text"
|
|
175
175
|
}, [f("upload.drop"), l("em", null, [f("upload.click")])])]),
|
|
176
176
|
file: (a) => {
|
|
177
|
-
if (
|
|
178
|
-
const t =
|
|
177
|
+
if (c.default) {
|
|
178
|
+
const t = c.default();
|
|
179
179
|
return B(G(w, t.map((i) => $(i, {
|
|
180
180
|
...a
|
|
181
|
-
}))), [[H,
|
|
181
|
+
}))), [[H, x.value]]);
|
|
182
182
|
}
|
|
183
183
|
}
|
|
184
184
|
}), l(J, {
|
|
@@ -196,6 +196,6 @@ const Re = /* @__PURE__ */ T({
|
|
|
196
196
|
}
|
|
197
197
|
});
|
|
198
198
|
export {
|
|
199
|
-
|
|
199
|
+
_e as SkyFileMultipleInput
|
|
200
200
|
};
|
|
201
201
|
//# sourceMappingURL=index.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../../src/components/file-multiple-input/index.tsx"],"sourcesContent":["import { EpPlus } from '@/icons/EpPlus'\r\nimport type { GetManyResult, Identifier, SkyUploadRawFile } from '@/provides'\r\nimport {\r\n ElDialog,\r\n ElFormItem,\r\n ElIcon,\r\n ElLoadingDirective,\r\n ElUpload,\r\n genFileId,\r\n type FormItemRule,\r\n type UploadFile,\r\n type UploadInstance,\r\n type UploadProps,\r\n type UploadRawFile,\r\n} from 'element-plus'\r\nimport {\r\n cloneVNode,\r\n computed,\r\n defineComponent,\r\n Fragment,\r\n h,\r\n ref,\r\n shallowRef,\r\n useTemplateRef,\r\n withDirectives,\r\n} from 'vue'\r\nimport { useRoute } from 'vue-router'\r\nimport { useAsyncState } from '@vueuse/core'\r\nimport { useForm, useFormGrid, type SkyUploadUserFile } from '@/hooks'\r\nimport { skyConfig } from '@/setup'\r\nimport type { SkyLayoutRouteMeta } from '@/router'\r\nimport { SkyCanAccess } from '../can-access'\r\nimport { EpUploadFilled } from '@/icons/EpUploadFilled'\r\nimport { useI18n } from 'vue-i18n'\r\n\r\nexport interface SkyFileMultipleInputProps {\r\n reference: string\r\n source: string\r\n type?: 'file' | 'image'\r\n dataId?: string\r\n dataName?: string\r\n dataUrl?: string\r\n label?: string\r\n rules?: FormItemRule | FormItemRule[]\r\n name?: string\r\n withCredentials?: boolean\r\n limit?: number\r\n fileList?: SkyUploadUserFile[]\r\n autoUpload?: UploadProps['autoUpload']\r\n}\r\n\r\nexport const SkyFileMultipleInput = defineComponent<\r\n SkyFileMultipleInputProps & Partial<UploadProps>\r\n>({\r\n name: 'SkyFileMultipleInput',\r\n inheritAttrs: false,\r\n props: {\r\n reference: {\r\n type: String,\r\n required: true,\r\n },\r\n source: {\r\n type: String,\r\n required: true,\r\n },\r\n type: {\r\n type: String,\r\n default: 'file',\r\n },\r\n dataId: {\r\n type: String,\r\n default: 'id',\r\n },\r\n dataName: {\r\n type: String,\r\n default: 'name',\r\n },\r\n dataUrl: {\r\n type: String,\r\n default: 'url',\r\n },\r\n label: String,\r\n rules: Object,\r\n limit: {\r\n type: Number,\r\n default: 1,\r\n },\r\n fileList: {\r\n type: Array,\r\n default: () => [],\r\n },\r\n autoUpload: {\r\n type: Boolean,\r\n default: true,\r\n },\r\n },\r\n setup(props, { slots, attrs }) {\r\n const { t } = useI18n()\r\n const route = useRoute()\r\n const formGrid = useFormGrid()\r\n const { formData, editData } = useForm()!\r\n const title = computed<string>(() => props.label || props.source)\r\n // init fileList\r\n const fileList = shallowRef<SkyUploadUserFile[]>(props.fileList!)\r\n const uploadRef = useTemplateRef<UploadInstance>('uploadRef')\r\n const routeMeta = route.meta as SkyLayoutRouteMeta\r\n\r\n if (editData.value) {\r\n formData[props.source] = editData.value[props.source]\r\n }\r\n\r\n const onExceed = (files: File[]) => {\r\n if (props.limit === 1) {\r\n uploadRef.value?.clearFiles()\r\n const file = files[0] as UploadRawFile\r\n file.uid = genFileId()\r\n uploadRef.value?.handleStart(file)\r\n if (props.autoUpload) {\r\n uploadRef.value?.submit()\r\n }\r\n }\r\n }\r\n\r\n const onSuccess = () => {\r\n const ids: Identifier[] = []\r\n for (const fl of fileList.value) {\r\n if (fl.id) {\r\n ids.push(fl.id as Identifier)\r\n } else {\r\n const raw = fl.raw as SkyUploadRawFile | undefined\r\n if (raw?.data?.id) {\r\n fl.id = raw.data.id as Identifier\r\n ids.push(raw.data.id as Identifier)\r\n }\r\n }\r\n }\r\n formData[props.source] = ids\r\n }\r\n\r\n const preview = ref(false)\r\n const previewUrl = ref<string>()\r\n const onPreview = (file: UploadFile) => {\r\n previewUrl.value = file.url\r\n preview.value = true\r\n }\r\n\r\n let controller: AbortController | undefined\r\n const { isLoading } = useAsyncState<GetManyResult | undefined>(\r\n async () => {\r\n const ids = formData[props.source]\r\n if (ids) {\r\n controller = new AbortController()\r\n const res = await skyConfig.dataProvider?.getMany?.(props.reference, {\r\n ids: ids as Identifier[],\r\n signal: controller.signal,\r\n })\r\n\r\n if (res?.data) {\r\n fileList.value = res.data.map((d) => ({\r\n id: d[props.dataId!] as Identifier,\r\n name: d[props.dataName!] as string,\r\n url: d[props.dataUrl!] as string,\r\n }))\r\n return res\r\n }\r\n }\r\n },\r\n undefined,\r\n {\r\n immediate: true,\r\n },\r\n )\r\n\r\n const action = ref('')\r\n const data = shallowRef<Record<string, unknown>>()\r\n const headers = shallowRef<Record<string, unknown>>()\r\n const method = ref()\r\n const name = ref<string>()\r\n const beforeUpload = async (rawFile: SkyUploadRawFile) => {\r\n const res = await skyConfig.dataProvider?.getUploadConfig?.({\r\n file: rawFile,\r\n })\r\n if (res?.data) {\r\n action.value = res.data.action\r\n data.value = res.data.data\r\n headers.value = res.data.headers\r\n method.value = res.data.method\r\n name.value = res.data.name\r\n rawFile.data = {\r\n id: res.data.file[props.dataId!] as Identifier,\r\n name: res.data.file[props.dataName!] as string,\r\n url: res.data.file[props.dataUrl!] as string,\r\n }\r\n }\r\n }\r\n\r\n const accept = computed(() => (props.type === 'image' ? 'image/*' : undefined))\r\n const listType = computed(() => (props.type === 'image' ? 'picture-card' : 'text'))\r\n\r\n return () => (\r\n <SkyCanAccess resource={routeMeta.resource} action={['create', 'edit']} column={props.source}>\r\n <ElFormItem\r\n class={['sky-file-multiple-input', `is-${props.type}`]}\r\n label={title.value}\r\n prop={props.source}\r\n rules={props.rules}\r\n style={formGrid ? `grid-area: ${props.source}` : ''}\r\n >\r\n <ElUpload\r\n ref=\"uploadRef\"\r\n action={action.value}\r\n method={method.value}\r\n name={props.name}\r\n withCredentials={props.withCredentials}\r\n multiple={props.limit! > 1}\r\n limit={props.limit}\r\n beforeUpload={beforeUpload}\r\n onSuccess={onSuccess}\r\n onExceed={onExceed}\r\n headers={headers.value}\r\n data={data.value}\r\n listType={listType.value}\r\n fileList={fileList.value}\r\n onUpdate:file-list={(fs: SkyUploadUserFile[]) => (fileList.value = fs)}\r\n autoUpload={props.autoUpload}\r\n drag={props.type === 'file'}\r\n showFileList\r\n onPreview={onPreview}\r\n // https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Attributes/accept\r\n accept={accept.value}\r\n {...attrs}\r\n >\r\n {{\r\n default: () =>\r\n props.type === 'image' ? (\r\n <ElIcon>\r\n <EpPlus />\r\n </ElIcon>\r\n ) : (\r\n <>\r\n <ElIcon class=\"sky-file-multiple-input__icon\">\r\n <EpUploadFilled />\r\n </ElIcon>\r\n <div class=\"sky-file-multiple-input__text\">\r\n {t('upload.drop')}\r\n <em>{t('upload.click')}</em>\r\n </div>\r\n </>\r\n ),\r\n file: (scope: { file: UploadFile; index: number }) => {\r\n if (slots.default) {\r\n const vnodes = slots.default()\r\n return withDirectives(\r\n h(\r\n Fragment,\r\n vnodes.map((vnode) => cloneVNode(vnode, { ...scope })),\r\n ),\r\n [[ElLoadingDirective, isLoading.value]],\r\n )\r\n }\r\n },\r\n }}\r\n </ElUpload>\r\n <ElDialog\r\n appendToBody\r\n modelValue={preview.value}\r\n onUpdate:modelValue={(v) => (preview.value = v)}\r\n >\r\n <img class=\"sky-file-multiple-input__img\" src={previewUrl.value} />\r\n </ElDialog>\r\n </ElFormItem>\r\n </SkyCanAccess>\r\n )\r\n },\r\n})\r\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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"}
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../../src/components/file-multiple-input/index.tsx"],"sourcesContent":["import { EpPlus } from '@/icons/EpPlus'\r\nimport type { GetManyResult, Identifier, SkyUploadRawFile } from '@/provides'\r\nimport {\r\n ElDialog,\r\n ElFormItem,\r\n ElIcon,\r\n ElLoadingDirective,\r\n ElUpload,\r\n genFileId,\r\n type FormItemRule,\r\n type UploadFile,\r\n type UploadInstance,\r\n type UploadProps,\r\n type UploadRawFile,\r\n} from 'element-plus'\r\nimport {\r\n cloneVNode,\r\n computed,\r\n defineComponent,\r\n Fragment,\r\n h,\r\n ref,\r\n shallowRef,\r\n useTemplateRef,\r\n withDirectives,\r\n} from 'vue'\r\nimport { useRoute } from 'vue-router'\r\nimport { useAsyncState } from '@vueuse/core'\r\nimport { useForm, useFormGrid, type SkyUploadUserFile } from '@/hooks'\r\nimport { skyConfig } from '@/setup'\r\nimport type { SkyLayoutRouteMeta } from '@/router'\r\nimport { SkyCanAccess } from '../can-access'\r\nimport { EpUploadFilled } from '@/icons/EpUploadFilled'\r\nimport { useI18n } from 'vue-i18n'\r\n\r\nexport interface SkyFileMultipleInputProps {\r\n reference: string\r\n source: string\r\n type?: 'file' | 'image'\r\n dataId?: string\r\n dataName?: string\r\n dataUrl?: string\r\n label?: string\r\n rules?: FormItemRule | FormItemRule[]\r\n name?: string\r\n withCredentials?: boolean\r\n limit?: number\r\n fileList?: SkyUploadUserFile[]\r\n autoUpload?: UploadProps['autoUpload']\r\n}\r\n\r\nexport const SkyFileMultipleInput = defineComponent<\r\n SkyFileMultipleInputProps & Partial<UploadProps>\r\n>({\r\n name: 'SkyFileMultipleInput',\r\n inheritAttrs: false,\r\n props: {\r\n reference: {\r\n type: String,\r\n required: true,\r\n },\r\n source: {\r\n type: String,\r\n required: true,\r\n },\r\n type: {\r\n type: String,\r\n default: 'file',\r\n },\r\n dataId: {\r\n type: String,\r\n default: 'id',\r\n },\r\n dataName: {\r\n type: String,\r\n default: 'name',\r\n },\r\n dataUrl: {\r\n type: String,\r\n default: 'url',\r\n },\r\n label: String,\r\n rules: Object,\r\n limit: {\r\n type: Number,\r\n default: 1,\r\n },\r\n fileList: {\r\n type: Array,\r\n default: () => [],\r\n },\r\n autoUpload: {\r\n type: Boolean,\r\n default: true,\r\n },\r\n },\r\n setup(props, { slots, attrs }) {\r\n const { t } = useI18n()\r\n const route = useRoute()\r\n const formGrid = useFormGrid()\r\n const { formData, editData } = useForm()!\r\n const title = computed<string>(() => props.label || props.source)\r\n // init fileList\r\n const fileList = shallowRef<SkyUploadUserFile[]>(props.fileList!)\r\n const uploadRef = useTemplateRef<UploadInstance>('uploadRef')\r\n const routeMeta = route.meta as SkyLayoutRouteMeta\r\n\r\n if (editData.value) {\r\n formData[props.source] = editData.value[props.source]\r\n }\r\n\r\n const onExceed = (files: File[]) => {\r\n if (props.limit === 1) {\r\n uploadRef.value?.clearFiles()\r\n const file = files[0] as UploadRawFile\r\n file.uid = genFileId()\r\n uploadRef.value?.handleStart(file)\r\n if (props.autoUpload) {\r\n uploadRef.value?.submit()\r\n }\r\n }\r\n }\r\n\r\n const onSuccess = () => {\r\n const ids: Identifier[] = []\r\n for (const fl of fileList.value) {\r\n if (fl.id) {\r\n ids.push(fl.id as Identifier)\r\n } else {\r\n const raw = fl.raw as SkyUploadRawFile | undefined\r\n if (raw?.data?.id) {\r\n fl.id = raw.data.id as Identifier\r\n ids.push(raw.data.id as Identifier)\r\n }\r\n }\r\n }\r\n formData[props.source] = ids\r\n }\r\n\r\n const preview = ref(false)\r\n const previewUrl = ref<string>()\r\n const onPreview = (file: UploadFile) => {\r\n previewUrl.value = file.url\r\n preview.value = true\r\n }\r\n\r\n let controller: AbortController | undefined\r\n const { isLoading } = useAsyncState<GetManyResult | undefined>(\r\n async () => {\r\n const ids = formData[props.source]\r\n if (ids) {\r\n controller = new AbortController()\r\n const res = await skyConfig.dataProvider?.getMany?.(props.reference, {\r\n ids: ids as Identifier[],\r\n signal: controller.signal,\r\n })\r\n\r\n if (res?.data) {\r\n fileList.value = res.data.map((d) => ({\r\n id: d[props.dataId!] as Identifier,\r\n name: d[props.dataName!] as string,\r\n url: d[props.dataUrl!] as string,\r\n }))\r\n return res\r\n }\r\n }\r\n },\r\n undefined,\r\n {\r\n immediate: true,\r\n },\r\n )\r\n\r\n const action = ref('')\r\n const data = shallowRef<Record<string, unknown>>()\r\n const headers = shallowRef<Record<string, unknown>>()\r\n const method = ref()\r\n const name = ref<string>()\r\n const beforeUpload = async (rawFile: SkyUploadRawFile) => {\r\n const res = await skyConfig.dataProvider?.getUploadConfig?.({\r\n file: rawFile,\r\n })\r\n if (res?.data) {\r\n action.value = res.data.action\r\n data.value = res.data.data\r\n headers.value = res.data.headers\r\n method.value = res.data.method\r\n name.value = res.data.name\r\n rawFile.data = {\r\n id: res.data.file.id,\r\n name: res.data.file.name,\r\n url: res.data.file.url,\r\n }\r\n }\r\n }\r\n\r\n const accept = computed(() => (props.type === 'image' ? 'image/*' : undefined))\r\n const listType = computed(() => (props.type === 'image' ? 'picture-card' : 'text'))\r\n\r\n return () => (\r\n <SkyCanAccess resource={routeMeta.resource} action={['create', 'edit']} column={props.source}>\r\n <ElFormItem\r\n class={['sky-file-multiple-input', `is-${props.type}`]}\r\n label={title.value}\r\n prop={props.source}\r\n rules={props.rules}\r\n style={formGrid ? `grid-area: ${props.source}` : ''}\r\n >\r\n <ElUpload\r\n ref=\"uploadRef\"\r\n action={action.value}\r\n method={method.value}\r\n name={props.name}\r\n withCredentials={props.withCredentials}\r\n multiple={props.limit! > 1}\r\n limit={props.limit}\r\n beforeUpload={beforeUpload}\r\n onSuccess={onSuccess}\r\n onExceed={onExceed}\r\n headers={headers.value}\r\n data={data.value}\r\n listType={listType.value}\r\n fileList={fileList.value}\r\n onUpdate:file-list={(fs: SkyUploadUserFile[]) => (fileList.value = fs)}\r\n autoUpload={props.autoUpload}\r\n drag={props.type === 'file'}\r\n showFileList\r\n onPreview={onPreview}\r\n // https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Attributes/accept\r\n accept={accept.value}\r\n {...attrs}\r\n >\r\n {{\r\n default: () =>\r\n props.type === 'image' ? (\r\n <ElIcon>\r\n <EpPlus />\r\n </ElIcon>\r\n ) : (\r\n <>\r\n <ElIcon class=\"sky-file-multiple-input__icon\">\r\n <EpUploadFilled />\r\n </ElIcon>\r\n <div class=\"sky-file-multiple-input__text\">\r\n {t('upload.drop')}\r\n <em>{t('upload.click')}</em>\r\n </div>\r\n </>\r\n ),\r\n file: (scope: { file: UploadFile; index: number }) => {\r\n if (slots.default) {\r\n const vnodes = slots.default()\r\n return withDirectives(\r\n h(\r\n Fragment,\r\n vnodes.map((vnode) => cloneVNode(vnode, { ...scope })),\r\n ),\r\n [[ElLoadingDirective, isLoading.value]],\r\n )\r\n }\r\n },\r\n }}\r\n </ElUpload>\r\n <ElDialog\r\n appendToBody\r\n modelValue={preview.value}\r\n onUpdate:modelValue={(v) => (preview.value = v)}\r\n >\r\n <img class=\"sky-file-multiple-input__img\" src={previewUrl.value} />\r\n </ElDialog>\r\n </ElFormItem>\r\n </SkyCanAccess>\r\n )\r\n },\r\n})\r\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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"}
|
|
@@ -87,7 +87,11 @@ export interface GetUploadConfigResult {
|
|
|
87
87
|
data?: Record<string, unknown>;
|
|
88
88
|
headers?: Record<string, unknown>;
|
|
89
89
|
withCredentials?: boolean;
|
|
90
|
-
file:
|
|
90
|
+
file: {
|
|
91
|
+
id: Identifier;
|
|
92
|
+
name: string;
|
|
93
|
+
url: string;
|
|
94
|
+
};
|
|
91
95
|
};
|
|
92
96
|
}
|
|
93
97
|
export interface UploadFileParams {
|