skyline-vue-admin 0.0.18 → 0.0.19
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/file-multiple-model-input/index.cjs +1 -1
- package/dist/components/file-multiple-model-input/index.cjs.map +1 -1
- package/dist/components/file-multiple-model-input/index.mjs +16 -16
- package/dist/components/file-multiple-model-input/index.mjs.map +1 -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/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:
|
|
1
|
+
"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:y,method:q,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=>{t.type==="image"&&(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:q.value,name:g.value,multiple:t.limit>1,limit:t.limit,beforeUpload:V,onSuccess:N,onExceed:U,headers:y.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})))}}}),t.type==="image"&&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;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
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
|
|
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 if (props.type === 'image') {\n previewUrl.value = file.url\n preview.value = true\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 <>\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 {props.type === 'image' && (\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})\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,QAEEvB,EAAA,OAAA,UACEwB,EAAAA,MAAAA,EAAAA,iBAKJC,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,gDAGmB,aAAA,sBAGM,sBAAAE,GAAApB,EAAA,MAAAoB,CACsB,EAAA,mCAAA,MAAA,qCAAA,IAAAlB,EAAA,KAEsB,EAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAK/E,CACF,CAAA"}
|
|
@@ -23,7 +23,7 @@ import "../../hooks/useReferenceArrayInput.mjs";
|
|
|
23
23
|
import { useUpload as B } from "../../hooks/useUpload.mjs";
|
|
24
24
|
import { EpUploadFilled as C } from "../../icons/EpUploadFilled.mjs";
|
|
25
25
|
import { useI18n as D } from "vue-i18n";
|
|
26
|
-
const
|
|
26
|
+
const re = /* @__PURE__ */ I({
|
|
27
27
|
name: "SkyFileMultipleModelInput",
|
|
28
28
|
inheritAttrs: !1,
|
|
29
29
|
props: {
|
|
@@ -63,9 +63,9 @@ const ne = /* @__PURE__ */ I({
|
|
|
63
63
|
emit: y
|
|
64
64
|
}) {
|
|
65
65
|
const {
|
|
66
|
-
t:
|
|
66
|
+
t: n
|
|
67
67
|
} = D(), {
|
|
68
|
-
fileList:
|
|
68
|
+
fileList: i,
|
|
69
69
|
action: g,
|
|
70
70
|
data: U,
|
|
71
71
|
headers: h,
|
|
@@ -73,7 +73,7 @@ const ne = /* @__PURE__ */ I({
|
|
|
73
73
|
name: V,
|
|
74
74
|
beforeUpload: k
|
|
75
75
|
} = B(), u = N("uploadRef");
|
|
76
|
-
|
|
76
|
+
i.value = l.modelValue.map((e) => ({
|
|
77
77
|
upload: e,
|
|
78
78
|
name: e[l.dataName],
|
|
79
79
|
url: e[l.dataUrl]
|
|
@@ -86,16 +86,16 @@ const ne = /* @__PURE__ */ I({
|
|
|
86
86
|
}
|
|
87
87
|
}, E = () => {
|
|
88
88
|
const e = [];
|
|
89
|
-
for (const a of
|
|
89
|
+
for (const a of i.value)
|
|
90
90
|
if (a.upload)
|
|
91
91
|
e.push(a.upload);
|
|
92
92
|
else {
|
|
93
|
-
const
|
|
94
|
-
|
|
93
|
+
const o = a.raw;
|
|
94
|
+
o?.upload && e.push(o.upload);
|
|
95
95
|
}
|
|
96
96
|
y("update:modelValue", e);
|
|
97
|
-
}, m = f(!1),
|
|
98
|
-
|
|
97
|
+
}, m = f(!1), r = f(), F = (e) => {
|
|
98
|
+
l.type === "image" && (r.value = e.url, m.value = !0);
|
|
99
99
|
}, _ = s(() => l.type === "image" ? "image/*" : void 0), x = s(() => l.type === "image" ? "picture-card" : "text");
|
|
100
100
|
return () => t(d, null, [t(T, b({
|
|
101
101
|
class: "sky-file-multiple-model-input",
|
|
@@ -111,8 +111,8 @@ const ne = /* @__PURE__ */ I({
|
|
|
111
111
|
headers: h.value,
|
|
112
112
|
data: U.value,
|
|
113
113
|
listType: x.value,
|
|
114
|
-
fileList:
|
|
115
|
-
"onUpdate:file-list": (e) =>
|
|
114
|
+
fileList: i.value,
|
|
115
|
+
"onUpdate:file-list": (e) => i.value = e,
|
|
116
116
|
autoUpload: l.autoUpload,
|
|
117
117
|
drag: l.type === "file",
|
|
118
118
|
showFileList: !0,
|
|
@@ -127,28 +127,28 @@ const ne = /* @__PURE__ */ I({
|
|
|
127
127
|
default: () => [t(C, null, null)]
|
|
128
128
|
}), t("div", {
|
|
129
129
|
class: "sky-file-multiple-model-input__text"
|
|
130
|
-
}, [
|
|
130
|
+
}, [n("upload.drop"), t("em", null, [n("upload.click")])])]),
|
|
131
131
|
file: (e) => {
|
|
132
132
|
if (p.default) {
|
|
133
133
|
const a = p.default();
|
|
134
|
-
return M(d, a.map((
|
|
134
|
+
return M(d, a.map((o) => P(o, {
|
|
135
135
|
...e
|
|
136
136
|
})));
|
|
137
137
|
}
|
|
138
138
|
}
|
|
139
|
-
}), t(L, {
|
|
139
|
+
}), l.type === "image" && t(L, {
|
|
140
140
|
appendToBody: !0,
|
|
141
141
|
modelValue: m.value,
|
|
142
142
|
"onUpdate:modelValue": (e) => m.value = e
|
|
143
143
|
}, {
|
|
144
144
|
default: () => [t("img", {
|
|
145
145
|
class: "sky-file-multiple-model-input__img",
|
|
146
|
-
src:
|
|
146
|
+
src: r.value
|
|
147
147
|
}, null)]
|
|
148
148
|
})]);
|
|
149
149
|
}
|
|
150
150
|
});
|
|
151
151
|
export {
|
|
152
|
-
|
|
152
|
+
re as SkyFileMultipleModelInput
|
|
153
153
|
};
|
|
154
154
|
//# sourceMappingURL=index.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","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
|
|
1
|
+
{"version":3,"file":"index.mjs","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 if (props.type === 'image') {\n previewUrl.value = file.url\n preview.value = true\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 <>\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 {props.type === 'image' && (\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})\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":"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"}
|