@windwalker-io/unicorn-next 0.1.18 → 0.1.21

package/dist/chunks/field-multi-uploader.js

@@ -1,263 +1,256 @@
+import { t as mergeDeep } from "./arr.js";
+import { t as data } from "./data.js";
+import { s as injectCssToDocument } from "./dom.js";
+import { n as useStack } from "./useStack.js";
+import { n as forceArray } from "./helper.js";
 import { Modal } from "bootstrap";
-import { createApp, defineComponent, ref, getCurrentInstance, useTemplateRef, computed, onMounted, nextTick } from "vue";
+import { computed, createApp, defineComponent, getCurrentInstance, nextTick, onMounted, ref, useTemplateRef } from "vue";
 import { VueDraggable } from "vue-draggable-plus";
-import { ItemCardPlaceholder, ItemCard, MultiUploader, createItem } from "vue-multi-uploader";
-import { a6 as mergeDeep, ab as injectCssToDocument, af as forceArray, ae as data, m as useStack } from "./unicorn.js";
-const css = ".vue-drag-uploader {\n  --vmu-img-size: 155px;\n  display: flex;\n  flex-wrap: wrap;\n  padding: 1rem;\n  border: 1px dotted #999;\n  border-radius: 4px;\n  cursor: pointer;\n  color: #999;\n  min-height: 250px;\n}\n.vue-drag-uploader--readonly {\n  border: 1px solid #999;\n}\n.vue-drag-uploader.h-ondrag {\n  border: 1px dotted #666;\n  background-color: rgba(0, 0, 0, 0.05);\n  color: #666;\n}\n.vue-drag-uploader__wrapper {\n  width: 100%;\n}\n.vue-drag-uploader__draggable-wrapper, .vue-drag-uploader__transition-wrapper {\n  display: flex;\n  flex-wrap: wrap;\n}\n.vue-drag-uploader-item {\n  width: var(--vmu-img-size);\n  height: var(--vmu-img-size);\n  border: 1px solid rgba(0, 0, 0, 0.25);\n  border-radius: 3px;\n  cursor: pointer;\n  padding: 0.5rem;\n}\n.vue-drag-uploader .add-button {\n  display: flex;\n  align-items: center;\n  text-align: center;\n  transition: background-color 0.5s;\n}\n.vue-drag-uploader .add-button:hover {\n  background-color: rgba(0, 0, 0, 0.05);\n}\n.vue-drag-uploader .add-button__body {\n  margin: 0 auto;\n}\n.vue-drag-uploader .add-button__icon {\n  margin-bottom: 10px;\n}\n.vue-drag-uploader .add-button__text {\n  font-size: 14px;\n}\n.vue-drag-uploader .preview-img {\n  position: relative;\n  cursor: pointer;\n  padding: 1px;\n}\n.vue-drag-uploader .preview-img > * {\n  position: absolute;\n}\n.vue-drag-uploader .preview-img:hover .error-message__message {\n  display: block;\n  padding: 10px;\n}\n.vue-drag-uploader .preview-img__body {\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  background: transparent no-repeat center center;\n  background-size: cover;\n}\n.vue-drag-uploader .preview-img__title {\n  margin: 0 auto;\n}\n.vue-drag-uploader .preview-img__overlay {\n  display: flex;\n  align-items: center;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  background-color: rgba(0, 0, 0, 0.35);\n  opacity: 0;\n  transition: opacity 0.5s;\n}\n.vue-drag-uploader .preview-img__overlay:hover {\n  opacity: 1;\n}\n.vue-drag-uploader .preview-img__remove-icon {\n  position: absolute;\n  top: 5px;\n  right: 5px;\n  color: white;\n  opacity: 0.75;\n  transition: opacity 0.5s;\n}\n.vue-drag-uploader .preview-img__remove-icon:hover {\n  opacity: 1;\n}\n.vue-drag-uploader .preview-img__progress {\n  height: 5px;\n  background-color: rgba(255, 255, 255, 0.8);\n  width: 100%;\n  bottom: 0;\n  left: 0;\n}\n.vue-drag-uploader .preview-img__progress-bar {\n  background-color: var(--bs-primary, #007bff);\n  width: 0;\n  height: 100%;\n}\n.vue-drag-uploader .error-message {\n  width: 100%;\n  background-color: #dc3545;\n  color: white;\n  font-size: 14px;\n  word-break: break-all;\n  top: calc(100% - 26px);\n  min-height: 26px;\n}\n.vue-drag-uploader .error-message__notice {\n  display: inline-block;\n  padding: 3px;\n  text-align: center;\n  width: 100%;\n}\n.vue-drag-uploader .error-message__message {\n  display: none;\n}";
-const defaultOptions = {
-  readonly: false,
-  disabled: false,
-  sortable: false,
-  thumbSize: 150,
-  maxConcurrent: 5,
-  canReplace: false,
-  tmplSelector: "#multi-uploader-field-tmpl"
+import { ItemCard, ItemCardPlaceholder, MultiUploader, createItem } from "vue-multi-uploader";
+//#region ../../../../node_modules/vue-multi-uploader/src/vue-multi-uploader.scss?inline
+var vue_multi_uploader_default = ".vue-drag-uploader {\n  --vmu-img-size: 155px;\n  display: flex;\n  flex-wrap: wrap;\n  padding: 1rem;\n  border: 1px dotted #999;\n  border-radius: 4px;\n  cursor: pointer;\n  color: #999;\n  min-height: 250px;\n}\n.vue-drag-uploader--readonly {\n  border: 1px solid #999;\n}\n.vue-drag-uploader.h-ondrag {\n  border: 1px dotted #666;\n  background-color: rgba(0, 0, 0, 0.05);\n  color: #666;\n}\n.vue-drag-uploader__wrapper {\n  width: 100%;\n}\n.vue-drag-uploader__draggable-wrapper, .vue-drag-uploader__transition-wrapper {\n  display: flex;\n  flex-wrap: wrap;\n}\n.vue-drag-uploader-item {\n  width: var(--vmu-img-size);\n  height: var(--vmu-img-size);\n  border: 1px solid rgba(0, 0, 0, 0.25);\n  border-radius: 3px;\n  cursor: pointer;\n  padding: 0.5rem;\n}\n.vue-drag-uploader .add-button {\n  display: flex;\n  align-items: center;\n  text-align: center;\n  transition: background-color 0.5s;\n}\n.vue-drag-uploader .add-button:hover {\n  background-color: rgba(0, 0, 0, 0.05);\n}\n.vue-drag-uploader .add-button__body {\n  margin: 0 auto;\n}\n.vue-drag-uploader .add-button__icon {\n  margin-bottom: 10px;\n}\n.vue-drag-uploader .add-button__text {\n  font-size: 14px;\n}\n.vue-drag-uploader .preview-img {\n  position: relative;\n  cursor: pointer;\n  padding: 1px;\n}\n.vue-drag-uploader .preview-img > * {\n  position: absolute;\n}\n.vue-drag-uploader .preview-img:hover .error-message__message {\n  display: block;\n  padding: 10px;\n}\n.vue-drag-uploader .preview-img__body {\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  background: transparent no-repeat center center;\n  background-size: cover;\n}\n.vue-drag-uploader .preview-img__title {\n  margin: 0 auto;\n}\n.vue-drag-uploader .preview-img__overlay {\n  display: flex;\n  align-items: center;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  background-color: rgba(0, 0, 0, 0.35);\n  opacity: 0;\n  transition: opacity 0.5s;\n}\n.vue-drag-uploader .preview-img__overlay:hover {\n  opacity: 1;\n}\n.vue-drag-uploader .preview-img__remove-icon {\n  position: absolute;\n  top: 5px;\n  right: 5px;\n  color: white;\n  opacity: 0.75;\n  transition: opacity 0.5s;\n}\n.vue-drag-uploader .preview-img__remove-icon:hover {\n  opacity: 1;\n}\n.vue-drag-uploader .preview-img__progress {\n  height: 5px;\n  background-color: rgba(255, 255, 255, 0.8);\n  width: 100%;\n  bottom: 0;\n  left: 0;\n}\n.vue-drag-uploader .preview-img__progress-bar {\n  background-color: var(--bs-primary, #007bff);\n  width: 0;\n  height: 100%;\n}\n.vue-drag-uploader .error-message {\n  width: 100%;\n  background-color: #dc3545;\n  color: white;\n  font-size: 14px;\n  word-break: break-all;\n  top: calc(100% - 26px);\n  min-height: 26px;\n}\n.vue-drag-uploader .error-message__notice {\n  display: inline-block;\n  padding: 3px;\n  text-align: center;\n  width: 100%;\n}\n.vue-drag-uploader .error-message__message {\n  display: none;\n}";
+//#endregion
+//#region src/module/field-multi-uploader.ts
+var defaultOptions = {
+	readonly: false,
+	disabled: false,
+	sortable: false,
+	thumbSize: 150,
+	maxConcurrent: 5,
+	canReplace: false,
+	tmplSelector: "#multi-uploader-field-tmpl"
+};
+var MultiUploaderElement = class extends HTMLElement {
+	static is = "uni-multi-uploader";
+	modalElement;
+	vm;
+	async connectedCallback() {
+		const resolvedOptions = mergeDeep({}, defaultOptions, JSON.parse(this.getAttribute("options") || "{}"));
+		resolvedOptions.thumbSize ??= 150;
+		this.modalElement = this.querySelector(".modal");
+		const tmplSelector = resolvedOptions.tmplSelector;
+		this.vm = createApp(createAppInstance(resolvedOptions, document.querySelector(tmplSelector).innerHTML, this)).mount(this);
+	}
 };
-class MultiUploaderElement extends HTMLElement {
-  static is = "uni-multi-uploader";
-  modalElement;
-  vm;
-  async connectedCallback() {
-    let options = JSON.parse(
-      this.getAttribute("options") || "{}"
-    );
-    const resolvedOptions = mergeDeep({}, defaultOptions, options);
-    resolvedOptions.thumbSize ??= 150;
-    this.modalElement = this.querySelector(".modal");
-    const tmplSelector = resolvedOptions.tmplSelector;
-    const app = createApp(
-      createAppInstance(resolvedOptions, document.querySelector(tmplSelector).innerHTML, this)
-    );
-    this.vm = app.mount(this);
-  }
-}
 async function init() {
-  injectCssToDocument(css);
-  customElements.define(MultiUploaderElement.is, MultiUploaderElement);
+	injectCssToDocument(vue_multi_uploader_default);
+	customElements.define(MultiUploaderElement.is, MultiUploaderElement);
 }
-const ready = /* @__PURE__ */ init();
+var ready = /* @__PURE__ */ init();
 function createAppInstance(opt, tmpl, el) {
-  return defineComponent({
-    name: "MultiUploaderFieldApp",
-    template: tmpl,
-    components: {
-      VueDraggable,
-      MultiUploader,
-      ItemCard,
-      ItemCardPlaceholder
-    },
-    props: {
-      stackName: String
-    },
-    setup(props, { expose }) {
-      const options = ref(opt);
-      const current = ref();
-      const currentIndex = ref();
-      const loading = ref(false);
-      const dragarea = ref();
-      const modal = ref();
-      const app = getCurrentInstance();
-      const uploader = useTemplateRef("uploader");
-      const canModify = computed(() => !options.value.disabled && !options.value.readonly);
-      const instance = ref();
-      onMounted(() => {
-        instance.value = uploader.value.instance;
-        domEmit("multi-uploader:mounted", { app, uploader });
-      });
-      const items = ref([]);
-      for (let item of forceArray(options.value.value)) {
-        if (typeof item === "string") {
-          item = {
-            url: item
-          };
-        }
-        const uploadItem = createItem({
-          url: item.url || "",
-          thumbUrl: item.thumbUrl || item.thumb_url || item.url || "",
-          data: item
-        });
-        items.value.push(uploadItem);
-      }
-      const uploadUrl = options.value.uploadUrl;
-      const value = items.value;
-      const uploaderOptions = ref({
-        maxFiles: () => options.value.maxFiles,
-        readonly: () => options.value.readonly,
-        disabled: () => options.value.disabled,
-        accept: () => options.value.accept,
-        maxConcurrent: () => options.value.maxConcurrent,
-        prepareXhr(xhr) {
-          xhr.setRequestHeader(
-            "X-CSRF-TOKEN",
-            data("csrf-token")
-          );
-        },
-        onItemUploadSuccess(item, xhr) {
-          const res = JSON.parse(xhr.responseText);
-          item.url = res.data.url;
-          item.thumbUrl = res.data.thumbUrl || res.data.thumb_url || res.data.url;
-          item.data = res.data;
-          item.data.title ??= item.url.split("/").pop()?.split("?").shift() || "";
-        }
-      });
-      const draggableOptions = {
-        draggable: ".c-drag-item",
-        animation: 300,
-        disabled: !canModify.value
-      };
-      function openFile(item) {
-        if (options.value.openFileHandler) {
-          options.value.openFileHandler(item);
-        } else {
-          window.open(item.download_url || item.url);
-        }
-      }
-      async function itemClick(item, i, event) {
-        current.value = item;
-        currentIndex.value = i;
-        domEmit("item-click", { item, i });
-        nextTick().then(() => {
-          Modal.getOrCreateInstance(modal.value).show();
-        });
-      }
-      function metaSave() {
-        current.value = void 0;
-        currentIndex.value = void 0;
-      }
-      function isImage(url) {
-        const ext = url.split(".").pop().split("?").shift() || "";
-        const allow = ["png", "jpeg", "jpg", "gif", "bmp", "webp"];
-        return allow.indexOf(ext.toLowerCase()) !== -1;
-      }
-      function dragover(e) {
-        if (!options.value.canReplace) {
-          return;
-        }
-        dragarea.value.style.opacity = "0.75";
-      }
-      function dragleave(e) {
-        if (!options.value.canReplace) {
-          return;
-        }
-        dragarea.value.style.opacity = "1";
-      }
-      function drop(event) {
-        if (!options.value.canReplace) {
-          return;
-        }
-        dragarea.value.style.opacity = "1";
-        const item = current.value;
-        const file = event.dataTransfer?.files[0] || null;
-        if (!file) {
-          return;
-        }
-        instance.value.checkFile(file);
-        if (instance.value.isReadonly) {
-          return;
-        }
-        item.file = file;
-        loading.value = true;
-        try {
-          instance.value.uploadFile(item);
-        } finally {
-          loading.value = false;
-        }
-      }
-      function uploading() {
-        useStack(props.stackName).push(true);
-        domEmit("uploading");
-      }
-      function uploaded() {
-        useStack(props.stackName).pop();
-        domEmit("uploaded");
-      }
-      function onChange(item) {
-        domEmit("change", item);
-      }
-      function domEmit(event, detail) {
-        el.dispatchEvent(new CustomEvent(event, { detail }));
-      }
-      const foo = ref();
-      foo.value = "Bar";
-      const icons = ref({
-        default: "fas fa-file",
-        pdf: "fas fa-file-pdf text-danger",
-        xls: "fas fa-file-excel text-success",
-        xlsx: "fas fa-file-excel text-success",
-        doc: "fas fa-file-word text-primary",
-        docx: "fas fa-file-word text-primary",
-        ppt: "fas fa-file-powerpoint text-warning",
-        pptx: "fas fa-file-powerpoint text-warning",
-        zip: "fas fa-file-archive text-dark",
-        "7z": "fas fa-file-archive text-dark",
-        rar: "fas fa-file-archive text-dark",
-        mp4: "fas fa-file-video text-dark",
-        avi: "fas fa-file-video text-dark",
-        flv: "fas fa-file-video text-dark",
-        mov: "fas fa-file-video text-dark",
-        ogg: "fas fa-file-video text-dark",
-        webm: "fas fa-file-video text-dark",
-        mpg: "fas fa-file-video text-dark",
-        mp3: "fas fa-file-audio text-dark",
-        acc: "fas fa-file-audio text-dark",
-        wav: "fas fa-file-audio text-dark"
-      });
-      function setIcons(newIcons, merge = true) {
-        if (merge) {
-          icons.value = { ...icons.value, ...newIcons };
-          return;
-        }
-        icons.value = newIcons;
-      }
-      expose({
-        uploader,
-        instance,
-        value,
-        canModify,
-        openFile,
-        itemClick,
-        isImage,
-        setIcons
-      });
-      function fileIcon(item) {
-        let path = item.file ? item.file.name : item.url;
-        path = String(path).split("?")[0];
-        const ext = path.split(".").pop() || "";
-        const def = "default" in icons ? icons.default : "fas fa-file";
-        return icons[String(ext || "default").toLowerCase()] || def;
-      }
-      return {
-        uploader,
-        uploadUrl,
-        value,
-        uploaderOptions,
-        draggableOptions,
-        modal,
-        dragarea,
-        options,
-        current,
-        currentIndex,
-        loading,
-        instance,
-        canModify,
-        openFile,
-        itemClick,
-        metaSave,
-        isImage,
-        dragover,
-        dragleave,
-        drop,
-        uploading,
-        uploaded,
-        onChange,
-        domEmit,
-        fileIcon
-      };
-    }
-  });
+	return defineComponent({
+		name: "MultiUploaderFieldApp",
+		template: tmpl,
+		components: {
+			VueDraggable,
+			MultiUploader,
+			ItemCard,
+			ItemCardPlaceholder
+		},
+		props: { stackName: String },
+		setup(props, { expose }) {
+			const options = ref(opt);
+			const current = ref();
+			const currentIndex = ref();
+			const loading = ref(false);
+			const dragarea = ref();
+			const modal = ref();
+			const app = getCurrentInstance();
+			const uploader = useTemplateRef("uploader");
+			const canModify = computed(() => !options.value.disabled && !options.value.readonly);
+			const instance = ref();
+			onMounted(() => {
+				instance.value = uploader.value.instance;
+				domEmit("multi-uploader:mounted", {
+					app,
+					uploader
+				});
+			});
+			const items = ref([]);
+			for (let item of forceArray(options.value.value)) {
+				if (typeof item === "string") item = { url: item };
+				const uploadItem = createItem({
+					url: item.url || "",
+					thumbUrl: item.thumbUrl || item.thumb_url || item.url || "",
+					data: item
+				});
+				items.value.push(uploadItem);
+			}
+			const uploadUrl = options.value.uploadUrl;
+			const value = items.value;
+			const uploaderOptions = ref({
+				maxFiles: () => options.value.maxFiles,
+				readonly: () => options.value.readonly,
+				disabled: () => options.value.disabled,
+				accept: () => options.value.accept,
+				maxConcurrent: () => options.value.maxConcurrent,
+				prepareXhr(xhr) {
+					xhr.setRequestHeader("X-CSRF-TOKEN", data("csrf-token"));
+				},
+				onItemUploadSuccess(item, xhr) {
+					const res = JSON.parse(xhr.responseText);
+					item.url = res.data.url;
+					item.thumbUrl = res.data.thumbUrl || res.data.thumb_url || res.data.url;
+					item.data = res.data;
+					item.data.title ??= item.url.split("/").pop()?.split("?").shift() || "";
+				}
+			});
+			const draggableOptions = {
+				draggable: ".c-drag-item",
+				animation: 300,
+				disabled: !canModify.value
+			};
+			function openFile(item) {
+				if (options.value.openFileHandler) options.value.openFileHandler(item);
+				else window.open(item.download_url || item.url);
+			}
+			async function itemClick(item, i, event) {
+				current.value = item;
+				currentIndex.value = i;
+				domEmit("item-click", {
+					item,
+					i
+				});
+				nextTick().then(() => {
+					Modal.getOrCreateInstance(modal.value).show();
+				});
+			}
+			function metaSave() {
+				current.value = void 0;
+				currentIndex.value = void 0;
+			}
+			function isImage(url) {
+				const ext = url.split(".").pop().split("?").shift() || "";
+				return [
+					"png",
+					"jpeg",
+					"jpg",
+					"gif",
+					"bmp",
+					"webp"
+				].indexOf(ext.toLowerCase()) !== -1;
+			}
+			function dragover(e) {
+				if (!options.value.canReplace) return;
+				dragarea.value.style.opacity = "0.75";
+			}
+			function dragleave(e) {
+				if (!options.value.canReplace) return;
+				dragarea.value.style.opacity = "1";
+			}
+			function drop(event) {
+				if (!options.value.canReplace) return;
+				dragarea.value.style.opacity = "1";
+				const item = current.value;
+				const file = event.dataTransfer?.files[0] || null;
+				if (!file) return;
+				instance.value.checkFile(file);
+				if (instance.value.isReadonly) return;
+				item.file = file;
+				loading.value = true;
+				try {
+					instance.value.uploadFile(item);
+				} finally {
+					loading.value = false;
+				}
+			}
+			function uploading() {
+				useStack(props.stackName).push(true);
+				domEmit("uploading");
+			}
+			function uploaded() {
+				useStack(props.stackName).pop();
+				domEmit("uploaded");
+			}
+			function onChange(item) {
+				domEmit("change", item);
+			}
+			function domEmit(event, detail) {
+				el.dispatchEvent(new CustomEvent(event, { detail }));
+			}
+			const foo = ref();
+			foo.value = "Bar";
+			const icons = ref({
+				default: "fas fa-file",
+				pdf: "fas fa-file-pdf text-danger",
+				xls: "fas fa-file-excel text-success",
+				xlsx: "fas fa-file-excel text-success",
+				doc: "fas fa-file-word text-primary",
+				docx: "fas fa-file-word text-primary",
+				ppt: "fas fa-file-powerpoint text-warning",
+				pptx: "fas fa-file-powerpoint text-warning",
+				zip: "fas fa-file-archive text-dark",
+				"7z": "fas fa-file-archive text-dark",
+				rar: "fas fa-file-archive text-dark",
+				mp4: "fas fa-file-video text-dark",
+				avi: "fas fa-file-video text-dark",
+				flv: "fas fa-file-video text-dark",
+				mov: "fas fa-file-video text-dark",
+				ogg: "fas fa-file-video text-dark",
+				webm: "fas fa-file-video text-dark",
+				mpg: "fas fa-file-video text-dark",
+				mp3: "fas fa-file-audio text-dark",
+				acc: "fas fa-file-audio text-dark",
+				wav: "fas fa-file-audio text-dark"
+			});
+			function setIcons(newIcons, merge = true) {
+				if (merge) {
+					icons.value = {
+						...icons.value,
+						...newIcons
+					};
+					return;
+				}
+				icons.value = newIcons;
+			}
+			expose({
+				uploader,
+				instance,
+				value,
+				canModify,
+				openFile,
+				itemClick,
+				isImage,
+				setIcons
+			});
+			function fileIcon(item) {
+				let path = item.file ? item.file.name : item.url;
+				path = String(path).split("?")[0];
+				const ext = path.split(".").pop() || "";
+				const def = "default" in icons ? icons.default : "fas fa-file";
+				return icons[String(ext || "default").toLowerCase()] || def;
+			}
+			return {
+				uploader,
+				uploadUrl,
+				value,
+				uploaderOptions,
+				draggableOptions,
+				modal,
+				dragarea,
+				options,
+				current,
+				currentIndex,
+				loading,
+				instance,
+				canModify,
+				openFile,
+				itemClick,
+				metaSave,
+				isImage,
+				dragover,
+				dragleave,
+				drop,
+				uploading,
+				uploaded,
+				onChange,
+				domEmit,
+				fileIcon
+			};
+		}
+	});
 }
-export {
-  MultiUploaderElement,
-  ready
-};
-//# sourceMappingURL=field-multi-uploader.js.map
+//#endregion
+export { MultiUploaderElement, ready };
+
+//# sourceMappingURL=field-multi-uploader.js.map

package/dist/chunks/field-multi-uploader.js.map

@@ -1 +1 @@
-{"version":3,"file":"field-multi-uploader.js","sources":["../../src/module/field-multi-uploader.ts"],"sourcesContent":["import { Modal } from 'bootstrap';\nimport type { Options } from 'sortablejs';\nimport {\n  type ComponentPublicInstance,\n  computed,\n  createApp,\n  defineComponent,\n  getCurrentInstance,\n  nextTick,\n  onMounted,\n  PropType,\n  ref,\n  useTemplateRef\n} from 'vue';\nimport { VueDraggable } from 'vue-draggable-plus';\nimport {\n  createItem,\n  ItemCard,\n  ItemCardPlaceholder,\n  MultiUploader,\n  MultiUploaderComposableInstance,\n  MultiUploaderOptions,\n  UploaderItem\n} from 'vue-multi-uploader';\nimport css from 'vue-multi-uploader/src/vue-multi-uploader.scss?inline';\nimport { useStack } from '../composable';\nimport { data } from '../data';\nimport { forceArray, injectCssToDocument } from '../service';\nimport { mergeDeep } from '../utilities';\n\nexport type UniMultiUploaderOptions = {\n  value?: any[];\n  uploadUrl: string;\n  maxFiles?: number;\n  maxConcurrent?: number;\n  thumbSize?: number;\n  accept?: string;\n  readonly: boolean;\n  disabled: boolean;\n  fieldName?: string;\n  fieldFullName?: string;\n  tmplSelector: string;\n  canReplace: false;\n  openFileHandler?: (item: UploaderItem) => void;\n}\n\nconst defaultOptions = {\n  readonly: false,\n  disabled: false,\n  sortable: false,\n  thumbSize: 150,\n  maxConcurrent: 5,\n  canReplace: false,\n  tmplSelector: '#multi-uploader-field-tmpl',\n};\n\nexport class MultiUploaderElement extends HTMLElement {\n  static is = 'uni-multi-uploader';\n\n  modalElement!: HTMLDivElement;\n  vm!: ComponentPublicInstance;\n\n  async connectedCallback() {\n    let options: Partial<UniMultiUploaderOptions> = JSON.parse(\n      this.getAttribute('options') || '{}'\n    );\n\n    const resolvedOptions: UniMultiUploaderOptions = mergeDeep({}, defaultOptions, options);\n\n    // Make some default options since PHP will send NULL\n    resolvedOptions.thumbSize ??= 150;\n\n    this.modalElement = this.querySelector<HTMLDivElement>('.modal')!;\n\n    const tmplSelector = resolvedOptions.tmplSelector;\n\n    const app = createApp(\n      createAppInstance(resolvedOptions, document.querySelector(tmplSelector)!.innerHTML, this)\n    );\n\n    this.vm = app.mount(this);\n  }\n}\n\nasync function init() {\n  injectCssToDocument(css);\n  customElements.define(MultiUploaderElement.is, MultiUploaderElement);\n}\nexport const ready = init();\n\nexport interface MultiUploaderModule {\n  MultiUploaderElement: typeof MultiUploaderElement;\n  ready: typeof ready;\n}\n\nfunction createAppInstance(opt: UniMultiUploaderOptions, tmpl: string, el: MultiUploaderElement) {\n  return defineComponent({\n    name: 'MultiUploaderFieldApp',\n    template: tmpl,\n    components: {\n      VueDraggable,\n      MultiUploader,\n      ItemCard,\n      ItemCardPlaceholder,\n    },\n    props: {\n      stackName: String as PropType<string>,\n    },\n    setup(props, { expose }) {\n      const options = ref<UniMultiUploaderOptions>(opt);\n      const current = ref<UploaderItem>();\n      const currentIndex = ref<number>();\n      const loading = ref(false);\n      const dragarea = ref<HTMLDivElement>();\n      const modal = ref<HTMLDivElement>();\n      const app = getCurrentInstance();\n      const uploader = useTemplateRef<typeof MultiUploader>('uploader');\n      const canModify = computed(() => !options.value.disabled && !options.value.readonly);\n      const instance = ref<MultiUploaderComposableInstance>();\n\n      onMounted(() => {\n        instance.value = uploader.value!.instance;\n\n        domEmit('multi-uploader:mounted', { app, uploader });\n      });\n\n      const items = ref<UploaderItem[]>([]);\n\n      for (let item of forceArray(options.value.value)) {\n        if (typeof item === 'string') {\n          item = {\n            url: item\n          };\n        }\n\n        const uploadItem = createItem({\n          url: item.url || '',\n          thumbUrl: item.thumbUrl || item.thumb_url || item.url || '',\n          data: item\n        });\n\n        items.value.push(uploadItem);\n      }\n\n      const uploadUrl = options.value.uploadUrl;\n      const value = items.value;\n      const uploaderOptions = ref<MultiUploaderOptions>({\n        maxFiles: () => options.value.maxFiles,\n        readonly: () => options.value.readonly,\n        disabled: () => options.value.disabled,\n        accept: () => options.value.accept,\n        maxConcurrent: () => options.value.maxConcurrent,\n        prepareXhr(xhr) {\n          xhr.setRequestHeader(\n            'X-CSRF-TOKEN',\n            data('csrf-token')\n          );\n        },\n        onItemUploadSuccess(item, xhr) {\n          const res = JSON.parse(xhr.responseText);\n          item.url = res.data.url;\n          item.thumbUrl = res.data.thumbUrl || res.data.thumb_url || res.data.url;\n          item.data = res.data;\n          item.data.title ??= item.url.split('/').pop()?.split('?').shift() || '';\n        }\n      });\n      const draggableOptions: Options = {\n        draggable: '.c-drag-item',\n        animation: 300,\n        disabled: !canModify.value,\n      };\n\n      function openFile(item: UploaderItem) {\n        if (options.value.openFileHandler) {\n          options.value.openFileHandler(item);\n        } else {\n          window.open(item.download_url || item.url);\n        }\n      }\n\n      async function itemClick(item: UploaderItem, i: number, event: MouseEvent) {\n        current.value = item;\n        currentIndex.value = i;\n\n        domEmit('item-click', { item, i });\n\n        nextTick().then(() => {\n          Modal.getOrCreateInstance(modal.value!).show();\n        });\n        // this.$options.metaModal.modal('show');\n      }\n\n      function metaSave() {\n        current.value = undefined;\n        currentIndex.value = undefined;\n\n        // nextTick().then(() => {\n        // new bootstrap.Modal(modal.value).hide();\n        // });\n        // this.$options.metaModal.modal('hide');\n      }\n\n      function isImage(url: string) {\n        const ext = url.split('.').pop()!.split('?').shift() || '';\n        const allow = ['png', 'jpeg', 'jpg', 'gif', 'bmp', 'webp'];\n\n        return allow.indexOf(ext.toLowerCase()) !== -1;\n      }\n\n      function dragover(e: DragEvent) {\n        if (!options.value.canReplace) {\n          return;\n        }\n\n        dragarea.value!.style.opacity = '0.75';\n      }\n\n      function dragleave(e: DragEvent) {\n        if (!options.value.canReplace) {\n          return;\n        }\n\n        dragarea.value!.style.opacity = '1';\n      }\n\n      function drop(event: DragEvent) {\n        if (!options.value.canReplace) {\n          return;\n        }\n\n        dragarea.value!.style.opacity = '1';\n        const item = current.value;\n        const file = event.dataTransfer?.files[0] || null;\n\n        if (!file) {\n          return;\n        }\n\n        instance.value!.checkFile(file);\n\n        if (instance.value!.isReadonly) {\n          return;\n        }\n\n        item!.file = file;\n\n        loading.value = true;\n\n        try {\n          instance.value!.uploadFile(item!);\n        } finally {\n          loading.value = false;\n        }\n      }\n\n      function uploading() {\n        useStack(props.stackName).push(true);\n\n        domEmit('uploading');\n      }\n\n      function uploaded() {\n        useStack(props.stackName).pop();\n\n        domEmit('uploaded');\n      }\n\n      function onChange(item: UploaderItem) {\n        domEmit('change', item);\n      }\n\n      function domEmit(event: string, detail?: any) {\n        el.dispatchEvent(new CustomEvent(event, { detail }));\n      }\n\n      const foo = ref<string>();\n\n      foo.value = 'Bar';\n\n      const icons = ref<Record<string, string>>({\n        default: 'fas fa-file',\n        pdf: 'fas fa-file-pdf text-danger',\n        xls: 'fas fa-file-excel text-success',\n        xlsx: 'fas fa-file-excel text-success',\n        doc: 'fas fa-file-word text-primary',\n        docx: 'fas fa-file-word text-primary',\n        ppt: 'fas fa-file-powerpoint text-warning',\n        pptx: 'fas fa-file-powerpoint text-warning',\n        zip: 'fas fa-file-archive text-dark',\n        '7z': 'fas fa-file-archive text-dark',\n        rar: 'fas fa-file-archive text-dark',\n        mp4: 'fas fa-file-video text-dark',\n        avi: 'fas fa-file-video text-dark',\n        flv: 'fas fa-file-video text-dark',\n        mov: 'fas fa-file-video text-dark',\n        ogg: 'fas fa-file-video text-dark',\n        webm: 'fas fa-file-video text-dark',\n        mpg: 'fas fa-file-video text-dark',\n        mp3: 'fas fa-file-audio text-dark',\n        acc: 'fas fa-file-audio text-dark',\n        wav: 'fas fa-file-audio text-dark',\n      });\n\n      function setIcons(newIcons: Record<string, string>, merge = true) {\n        if (merge) {\n          icons.value = { ...icons.value, ...newIcons };\n          return;\n        }\n\n        icons.value = newIcons;\n      }\n\n      expose({\n        uploader,\n        instance,\n        value,\n        canModify,\n        openFile,\n        itemClick,\n        isImage,\n        setIcons,\n      });\n\n      function fileIcon(item: UploaderItem) {\n        let path = item.file ? item.file.name : item.url;\n\n        // strip query\n        path = String(path).split('?')[0];\n\n        // Get extension\n        const ext = path.split('.').pop() || '';\n\n        const def = 'default' in icons ? icons.default : 'fas fa-file';\n\n        return icons[String(ext || 'default').toLowerCase() as keyof typeof icons] || def;\n      }\n\n      return {\n        uploader,\n        uploadUrl,\n        value,\n        uploaderOptions,\n        draggableOptions,\n        modal,\n        dragarea,\n        options,\n        current,\n        currentIndex,\n        loading,\n        instance,\n        canModify,\n\n        openFile,\n        itemClick,\n        metaSave,\n        isImage,\n        dragover,\n        dragleave,\n        drop,\n        uploading,\n        uploaded,\n        onChange,\n        domEmit,\n        fileIcon,\n      };\n    }\n  });\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"field-multi-uploader.js","names":[],"sources":["../../../../../../node_modules/vue-multi-uploader/src/vue-multi-uploader.scss?inline","../../src/module/field-multi-uploader.ts"],"sourcesContent":["// Part of ke file.\n\n$img-size: 155px !default;\n\n.vue-drag-uploader {\n  --vmu-img-size: #{$img-size};\n\n  display: flex;\n  flex-wrap: wrap;\n  padding: 1rem;\n  border: 1px dotted #999;\n  border-radius: 4px;\n  cursor: pointer;\n  color: #999;\n  min-height: 250px;\n\n  &--readonly {\n    border: 1px solid #999;\n  }\n\n  &.h-ondrag {\n    border: 1px dotted #666;\n    background-color: rgba(0, 0, 0, .05);\n    color: #666;\n  }\n\n  &__wrapper {\n    width: 100%;\n  }\n\n  &__draggable-wrapper,\n  &__transition-wrapper {\n    display: flex;\n    flex-wrap: wrap;\n  }\n\n  &-item {\n    width: var(--vmu-img-size);\n    height: var(--vmu-img-size);\n    border: 1px solid rgba(0, 0, 0, .25);\n    border-radius: 3px;\n    cursor: pointer;\n    padding: .5rem;\n  }\n\n  .add-button {\n    display: flex;\n    align-items: center;\n    text-align: center;\n    transition: background-color .5s;\n\n    &:hover {\n      background-color: rgba(0, 0, 0, .05);\n    }\n\n    &__body {\n      margin: 0 auto;\n    }\n\n    &__icon {\n      margin-bottom: 10px;\n    }\n\n    &__text {\n      font-size: 14px;\n    }\n  }\n\n  .preview-img {\n    position: relative;\n    cursor: pointer;\n    padding: 1px;\n\n    > * {\n      position: absolute;\n    }\n\n    &:hover {\n      .error-message {\n        &__message {\n          display: block;\n          padding: 10px;\n        }\n      }\n    }\n\n    &__body {\n      left: 0;\n      top: 0;\n      width: 100%;\n      height: 100%;\n      background: transparent no-repeat center center;\n      background-size: cover;\n    }\n\n    &__title {\n      margin: 0 auto;\n    }\n\n    &__overlay {\n      display: flex;\n      align-items: center;\n      left: 0;\n      top: 0;\n      bottom: 0;\n      right: 0;\n      background-color: rgba(0, 0, 0, .35);\n      opacity: 0;\n      transition: opacity .5s;\n\n      &:hover {\n        opacity: 1;\n      }\n    }\n\n    &__remove-icon {\n      position: absolute;\n      top: 5px;\n      right: 5px;\n      color: white;\n      opacity: .75;\n      transition: opacity .5s;\n\n      &:hover {\n        opacity: 1;\n      }\n    }\n\n    &__progress {\n      height: 5px;\n      background-color: rgba(255, 255, 255, .8);\n      width: 100%;\n      bottom: 0;\n      left: 0;\n    }\n\n    &__progress-bar {\n      background-color: var(--bs-primary, #007bff);\n      width: 0;\n      height: 100%;\n    }\n  }\n\n  .error-message {\n    width: 100%;\n    background-color: #dc3545;\n    color: white;\n    font-size: 14px;\n    word-break: break-all;\n    top: calc(100% - 26px);\n    min-height: 26px;\n\n    &__notice {\n      display: inline-block;\n      padding: 3px;\n      text-align: center;\n      width: 100%;\n    }\n\n    &__message {\n      display: none;\n    }\n  }\n}\n","import { Modal } from 'bootstrap';\nimport type { Options } from 'sortablejs';\nimport {\n  type ComponentPublicInstance,\n  computed,\n  createApp,\n  defineComponent,\n  getCurrentInstance,\n  nextTick,\n  onMounted,\n  PropType,\n  ref,\n  useTemplateRef\n} from 'vue';\nimport { VueDraggable } from 'vue-draggable-plus';\nimport {\n  createItem,\n  ItemCard,\n  ItemCardPlaceholder,\n  MultiUploader,\n  MultiUploaderComposableInstance,\n  MultiUploaderOptions,\n  UploaderItem\n} from 'vue-multi-uploader';\nimport css from 'vue-multi-uploader/src/vue-multi-uploader.scss?inline';\nimport { useStack } from '../composable';\nimport { data } from '../data';\nimport { forceArray, injectCssToDocument } from '../service';\nimport { mergeDeep } from '../utilities';\n\nexport type UniMultiUploaderOptions = {\n  value?: any[];\n  uploadUrl: string;\n  maxFiles?: number;\n  maxConcurrent?: number;\n  thumbSize?: number;\n  accept?: string;\n  readonly: boolean;\n  disabled: boolean;\n  fieldName?: string;\n  fieldFullName?: string;\n  tmplSelector: string;\n  canReplace: false;\n  openFileHandler?: (item: UploaderItem) => void;\n}\n\nconst defaultOptions = {\n  readonly: false,\n  disabled: false,\n  sortable: false,\n  thumbSize: 150,\n  maxConcurrent: 5,\n  canReplace: false,\n  tmplSelector: '#multi-uploader-field-tmpl',\n};\n\nexport class MultiUploaderElement extends HTMLElement {\n  static is = 'uni-multi-uploader';\n\n  modalElement!: HTMLDivElement;\n  vm!: ComponentPublicInstance;\n\n  async connectedCallback() {\n    let options: Partial<UniMultiUploaderOptions> = JSON.parse(\n      this.getAttribute('options') || '{}'\n    );\n\n    const resolvedOptions: UniMultiUploaderOptions = mergeDeep({}, defaultOptions, options);\n\n    // Make some default options since PHP will send NULL\n    resolvedOptions.thumbSize ??= 150;\n\n    this.modalElement = this.querySelector<HTMLDivElement>('.modal')!;\n\n    const tmplSelector = resolvedOptions.tmplSelector;\n\n    const app = createApp(\n      createAppInstance(resolvedOptions, document.querySelector(tmplSelector)!.innerHTML, this)\n    );\n\n    this.vm = app.mount(this);\n  }\n}\n\nasync function init() {\n  injectCssToDocument(css);\n  customElements.define(MultiUploaderElement.is, MultiUploaderElement);\n}\nexport const ready = init();\n\nexport interface MultiUploaderModule {\n  MultiUploaderElement: typeof MultiUploaderElement;\n  ready: typeof ready;\n}\n\nfunction createAppInstance(opt: UniMultiUploaderOptions, tmpl: string, el: MultiUploaderElement) {\n  return defineComponent({\n    name: 'MultiUploaderFieldApp',\n    template: tmpl,\n    components: {\n      VueDraggable,\n      MultiUploader,\n      ItemCard,\n      ItemCardPlaceholder,\n    },\n    props: {\n      stackName: String as PropType<string>,\n    },\n    setup(props, { expose }) {\n      const options = ref<UniMultiUploaderOptions>(opt);\n      const current = ref<UploaderItem>();\n      const currentIndex = ref<number>();\n      const loading = ref(false);\n      const dragarea = ref<HTMLDivElement>();\n      const modal = ref<HTMLDivElement>();\n      const app = getCurrentInstance();\n      const uploader = useTemplateRef<typeof MultiUploader>('uploader');\n      const canModify = computed(() => !options.value.disabled && !options.value.readonly);\n      const instance = ref<MultiUploaderComposableInstance>();\n\n      onMounted(() => {\n        instance.value = uploader.value!.instance;\n\n        domEmit('multi-uploader:mounted', { app, uploader });\n      });\n\n      const items = ref<UploaderItem[]>([]);\n\n      for (let item of forceArray(options.value.value)) {\n        if (typeof item === 'string') {\n          item = {\n            url: item\n          };\n        }\n\n        const uploadItem = createItem({\n          url: item.url || '',\n          thumbUrl: item.thumbUrl || item.thumb_url || item.url || '',\n          data: item\n        });\n\n        items.value.push(uploadItem);\n      }\n\n      const uploadUrl = options.value.uploadUrl;\n      const value = items.value;\n      const uploaderOptions = ref<MultiUploaderOptions>({\n        maxFiles: () => options.value.maxFiles,\n        readonly: () => options.value.readonly,\n        disabled: () => options.value.disabled,\n        accept: () => options.value.accept,\n        maxConcurrent: () => options.value.maxConcurrent,\n        prepareXhr(xhr) {\n          xhr.setRequestHeader(\n            'X-CSRF-TOKEN',\n            data('csrf-token')\n          );\n        },\n        onItemUploadSuccess(item, xhr) {\n          const res = JSON.parse(xhr.responseText);\n          item.url = res.data.url;\n          item.thumbUrl = res.data.thumbUrl || res.data.thumb_url || res.data.url;\n          item.data = res.data;\n          item.data.title ??= item.url.split('/').pop()?.split('?').shift() || '';\n        }\n      });\n      const draggableOptions: Options = {\n        draggable: '.c-drag-item',\n        animation: 300,\n        disabled: !canModify.value,\n      };\n\n      function openFile(item: UploaderItem) {\n        if (options.value.openFileHandler) {\n          options.value.openFileHandler(item);\n        } else {\n          window.open(item.download_url || item.url);\n        }\n      }\n\n      async function itemClick(item: UploaderItem, i: number, event: MouseEvent) {\n        current.value = item;\n        currentIndex.value = i;\n\n        domEmit('item-click', { item, i });\n\n        nextTick().then(() => {\n          Modal.getOrCreateInstance(modal.value!).show();\n        });\n        // this.$options.metaModal.modal('show');\n      }\n\n      function metaSave() {\n        current.value = undefined;\n        currentIndex.value = undefined;\n\n        // nextTick().then(() => {\n        // new bootstrap.Modal(modal.value).hide();\n        // });\n        // this.$options.metaModal.modal('hide');\n      }\n\n      function isImage(url: string) {\n        const ext = url.split('.').pop()!.split('?').shift() || '';\n        const allow = ['png', 'jpeg', 'jpg', 'gif', 'bmp', 'webp'];\n\n        return allow.indexOf(ext.toLowerCase()) !== -1;\n      }\n\n      function dragover(e: DragEvent) {\n        if (!options.value.canReplace) {\n          return;\n        }\n\n        dragarea.value!.style.opacity = '0.75';\n      }\n\n      function dragleave(e: DragEvent) {\n        if (!options.value.canReplace) {\n          return;\n        }\n\n        dragarea.value!.style.opacity = '1';\n      }\n\n      function drop(event: DragEvent) {\n        if (!options.value.canReplace) {\n          return;\n        }\n\n        dragarea.value!.style.opacity = '1';\n        const item = current.value;\n        const file = event.dataTransfer?.files[0] || null;\n\n        if (!file) {\n          return;\n        }\n\n        instance.value!.checkFile(file);\n\n        if (instance.value!.isReadonly) {\n          return;\n        }\n\n        item!.file = file;\n\n        loading.value = true;\n\n        try {\n          instance.value!.uploadFile(item!);\n        } finally {\n          loading.value = false;\n        }\n      }\n\n      function uploading() {\n        useStack(props.stackName).push(true);\n\n        domEmit('uploading');\n      }\n\n      function uploaded() {\n        useStack(props.stackName).pop();\n\n        domEmit('uploaded');\n      }\n\n      function onChange(item: UploaderItem) {\n        domEmit('change', item);\n      }\n\n      function domEmit(event: string, detail?: any) {\n        el.dispatchEvent(new CustomEvent(event, { detail }));\n      }\n\n      const foo = ref<string>();\n\n      foo.value = 'Bar';\n\n      const icons = ref<Record<string, string>>({\n        default: 'fas fa-file',\n        pdf: 'fas fa-file-pdf text-danger',\n        xls: 'fas fa-file-excel text-success',\n        xlsx: 'fas fa-file-excel text-success',\n        doc: 'fas fa-file-word text-primary',\n        docx: 'fas fa-file-word text-primary',\n        ppt: 'fas fa-file-powerpoint text-warning',\n        pptx: 'fas fa-file-powerpoint text-warning',\n        zip: 'fas fa-file-archive text-dark',\n        '7z': 'fas fa-file-archive text-dark',\n        rar: 'fas fa-file-archive text-dark',\n        mp4: 'fas fa-file-video text-dark',\n        avi: 'fas fa-file-video text-dark',\n        flv: 'fas fa-file-video text-dark',\n        mov: 'fas fa-file-video text-dark',\n        ogg: 'fas fa-file-video text-dark',\n        webm: 'fas fa-file-video text-dark',\n        mpg: 'fas fa-file-video text-dark',\n        mp3: 'fas fa-file-audio text-dark',\n        acc: 'fas fa-file-audio text-dark',\n        wav: 'fas fa-file-audio text-dark',\n      });\n\n      function setIcons(newIcons: Record<string, string>, merge = true) {\n        if (merge) {\n          icons.value = { ...icons.value, ...newIcons };\n          return;\n        }\n\n        icons.value = newIcons;\n      }\n\n      expose({\n        uploader,\n        instance,\n        value,\n        canModify,\n        openFile,\n        itemClick,\n        isImage,\n        setIcons,\n      });\n\n      function fileIcon(item: UploaderItem) {\n        let path = item.file ? item.file.name : item.url;\n\n        // strip query\n        path = String(path).split('?')[0];\n\n        // Get extension\n        const ext = path.split('.').pop() || '';\n\n        const def = 'default' in icons ? icons.default : 'fas fa-file';\n\n        return icons[String(ext || 'default').toLowerCase() as keyof typeof icons] || def;\n      }\n\n      return {\n        uploader,\n        uploadUrl,\n        value,\n        uploaderOptions,\n        draggableOptions,\n        modal,\n        dragarea,\n        options,\n        current,\n        currentIndex,\n        loading,\n        instance,\n        canModify,\n\n        openFile,\n        itemClick,\n        metaSave,\n        isImage,\n        dragover,\n        dragleave,\n        drop,\n        uploading,\n        uploaded,\n        onChange,\n        domEmit,\n        fileIcon,\n      };\n    }\n  });\n}\n"],"x_google_ignoreList":[0],"mappings":"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"}