@windwalker-io/unicorn-next 0.1.0

package/dist/chunks/field-single-image-drag.js

@@ -0,0 +1,338 @@
+import { Modal } from "bootstrap";
+import { a5 as mergeDeep, w as selectAll, _ as __, G as simpleAlert, u as useHttpClient, a7 as injectCssToDocument } from "./unicorn.js";
+const css = ".c-sid-default__left-col {\n  width: 30%;\n  margin-right: 15px;\n  justify-content: center;\n}\n.c-sid-default__left-col img {\n  max-height: 250px;\n}\n.c-sid-default__right-col {\n  overflow: hidden;\n}\n.c-sid-default__dragarea {\n  font-weight: bold;\n  text-align: center;\n  padding: 9% 0;\n  color: #ccc;\n  border: 2px dashed #ccc;\n  border-radius: 7px;\n  cursor: default;\n}\n.c-sid-default__dragarea.hover {\n  color: #333;\n  border-color: #333;\n  background-color: #f9f9f9;\n}\n.c-sid-default__img-loader {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 180px;\n}\n.c-sid-default__size-info {\n  margin-top: 5px;\n  font-size: 13px;\n}\n.c-sid-default__remove {\n  margin-left: 5px;\n}\n.c-sid-default__modal .btn {\n  position: relative;\n}\n\n.c-sid-modal .modal-body {\n  position: relative;\n}\n.c-sid-modal__content {\n  position: relative;\n  z-index: 3;\n}\n.c-sid-modal__loading {\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 1;\n}\n.is-invalid[uni-field-validate] > uni-sid ~ [data-field-error] {\n  display: block;\n}";
+/* @__PURE__ */ injectCssToDocument(css);
+const defaultOptions = {
+  accept: [
+    "image/jpeg",
+    "image/png",
+    "image/webp",
+    "image/avif",
+    "image/gif"
+  ],
+  crop: false,
+  width: 800,
+  height: 800
+};
+class SingleImageDragElement extends HTMLElement {
+  static is = "uni-sid";
+  currentImage = "";
+  currentFile = void 0;
+  lastZoom = 0;
+  valueBackup = "";
+  options;
+  valueInput;
+  fileInput;
+  selectButton;
+  pasteButton;
+  dragarea;
+  previewImage;
+  removeCheckbox;
+  modalElement;
+  modal;
+  cropContainer;
+  savebutton;
+  modalToolbarButtons;
+  cropper;
+  constructor() {
+    super();
+  }
+  connectedCallback() {
+    this.options = mergeDeep(
+      {},
+      defaultOptions,
+      JSON.parse(this.getAttribute("options") || "{}")
+    );
+    this.valueInput = this.querySelector("[data-field-input]");
+    this.fileInput = this.querySelector("[data-sid=file]");
+    this.selectButton = this.querySelector("[data-sid=select]");
+    this.pasteButton = this.querySelector("[data-sid=paste]");
+    this.dragarea = this.querySelector("[data-sid=dragarea]");
+    this.previewImage = this.querySelector("[data-sid=preview]");
+    this.removeCheckbox = this.querySelector("[data-sid=remove]");
+    this.modalElement = document.querySelector(this.options.modalTarget);
+    this.modal = Modal.getOrCreateInstance(this.modalElement);
+    this.cropContainer = this.modalElement.querySelector('[data-sid="crop-container"]');
+    this.savebutton = this.modalElement.querySelector("[data-sid=save-button]");
+    this.modalToolbarButtons = this.modalElement.querySelectorAll("[data-sid-toolbar]");
+    const modalShown = async () => {
+      const cropper = await this.getCropper();
+      cropper.replace(this.currentImage);
+      this.cropContainer.style.visibility = "";
+      this.currentImage = "";
+    };
+    this.modalElement.addEventListener("shown.bs.modal", modalShown.bind(this));
+    this.savebutton.addEventListener("click", () => {
+      this.saveCropped();
+      this.modal.hide();
+    });
+    this.bindEvents();
+    this.style.visibility = "";
+  }
+  bindEvents() {
+    this.dragarea.addEventListener("dragover", (event) => {
+      event.stopPropagation();
+      event.preventDefault();
+      this.dragarea.classList.add("hover");
+    });
+    this.dragarea.addEventListener("dragleave", (event) => {
+      event.stopPropagation();
+      event.preventDefault();
+      this.dragarea.classList.remove("hover");
+    });
+    this.dragarea.addEventListener("drop", (event) => {
+      event.stopPropagation();
+      event.preventDefault();
+      this.dragarea.classList.remove("hover");
+      const files = event.target.files || event.dataTransfer?.files || [];
+      this.handleFileSelect(files[0]);
+    });
+    this.selectButton.addEventListener("click", () => {
+      const input = document.createElement("input");
+      input.setAttribute("type", "file");
+      input.setAttribute("accept", this.getInputAccept());
+      input.style.display = "none";
+      input.addEventListener("change", (e) => {
+        this.handleFileSelect(input.files[0]);
+        input.remove();
+      });
+      document.body.appendChild(input);
+      input.click();
+    });
+    this.pasteButton.addEventListener("click", () => {
+      navigator.clipboard.read().then((items) => {
+        let types = items[0].types;
+        if (types.length === 0) {
+          this.alert("This browser unable to get clipboard data.");
+          return;
+        }
+        types = types.slice().sort();
+        const type = types[0];
+        items[0].getType(type).then((blob) => {
+          this.handleFileSelect(new File([blob], "image.png", { type }));
+        });
+      });
+    });
+    this.removeCheckbox?.addEventListener("click", () => {
+      if (this.removeCheckbox.checked) {
+        this.valueBackup = this.valueInput.value;
+        this.valueInput.value = "";
+      } else {
+        this.valueInput.value = this.valueBackup;
+        this.valueBackup = "";
+      }
+    });
+    selectAll(this.modalToolbarButtons, (button) => {
+      button.addEventListener("click", (event) => {
+        this.toolbarClicked(button, event);
+      });
+    });
+  }
+  getInputAccept() {
+    let accept = this.options.accept;
+    if (Array.isArray(accept)) {
+      accept = accept.join(",");
+    }
+    return accept;
+  }
+  handleFileSelect(file) {
+    if (!this.checkFile(file)) {
+      return;
+    }
+    if (this.options.crop) {
+      const reader = new FileReader();
+      reader.addEventListener("load", (event) => {
+        this.cropContainer.style.visibility = "hidden";
+        this.currentImage = event.target.result;
+        this.currentFile = file;
+        this.modal.show();
+      });
+      reader.readAsDataURL(file);
+      return;
+    }
+    this.saveImage(file);
+  }
+  async saveCropped() {
+    const Cropper = await this.getCropper();
+    Cropper.getCroppedCanvas({
+      width: this.options.width,
+      height: this.options.height,
+      imageSmoothingEnabled: true
+    }).toBlob((blob) => {
+      const file = new File([blob], this.currentFile.name, { type: "image/png" });
+      this.saveImage(file);
+    }, "image/png");
+  }
+  async getCropper() {
+    if (this.cropper) {
+      return this.cropper;
+    }
+    const Cropper = await loadCropper();
+    return this.cropper = new Cropper(this.cropContainer.querySelector("img"), {
+      aspectRatio: this.options.width / this.options.height,
+      autoCropArea: 1,
+      viewMode: 1,
+      dragMode: "move",
+      cropBoxMovable: false,
+      cropBoxResizable: false,
+      ready: (e) => {
+      }
+    });
+  }
+  async toolbarClicked(button, event) {
+    const cropper = await this.getCropper();
+    const data = cropper.getData();
+    switch (button.dataset.sidToolbar) {
+      case "zoom-in":
+        cropper.zoom(0.1);
+        break;
+      case "zoom-out":
+        cropper.zoom(-0.1);
+        break;
+      case "rotate-left":
+        cropper.rotate(-90);
+        break;
+      case "rotate-right":
+        cropper.rotate(90);
+        break;
+      case "scale-x":
+        cropper.scaleX(-data.scaleX);
+        break;
+      case "scale-y":
+        cropper.scaleY(-data.scaleY);
+        break;
+    }
+  }
+  checkFile(file) {
+    let accept = this.options.accept;
+    if (typeof accept === "string") {
+      accept = accept.split(",").map((v) => v.trim());
+    }
+    if (!accept.length) {
+      return true;
+    }
+    let allow = false;
+    for (const type of accept) {
+      if (type.indexOf("/") !== -1) {
+        allow = allow || this.compareMimeType(type, file.type);
+      } else {
+        allow = allow || type.toLowerCase() === getFileExtension(file)?.toLowerCase();
+      }
+    }
+    if (allow) {
+      return true;
+    }
+    this.alert(
+      __("unicorn.field.sid.message.invalid.image.title"),
+      __("unicorn.field.sid.message.invalid.image.desc"),
+      "error"
+    );
+    return false;
+  }
+  compareMimeType(accept, mime) {
+    const accept2 = accept.split("/");
+    const mime2 = mime.split("/");
+    if (accept2[1] === "*") {
+      return accept2[0] === mime2[0];
+    }
+    return accept === mime;
+  }
+  checkSize(image) {
+    try {
+      if (this.options.max_width && this.options.max_width < image.width) {
+        throw new Error(__("unicorn.field.sid.message.invalid.size.max.width", this.options.max_width));
+      }
+      if (this.options.min_width && this.options.min_width > image.width) {
+        throw new Error(__("unicorn.field.sid.message.invalid.size.min.width", this.options.min_width));
+      }
+      if (this.options.max_height && this.options.max_height < image.height) {
+        throw new Error(__("unicorn.field.sid.message.invalid.size.max.height", this.options.max_height));
+      }
+      if (this.options.min_height && this.options.min_height > image.height) {
+        throw new Error(__("unicorn.field.sid.message.invalid.size.min.height", this.options.min_height));
+      }
+    } catch (e) {
+      this.alert(
+        __("unicorn.field.sid.message.invalid.size.title"),
+        e.message,
+        "error"
+      );
+      return false;
+    }
+    return true;
+  }
+  alert(title, text = "", type = "info") {
+    return simpleAlert(title, text, type);
+  }
+  async saveImage(file) {
+    if (this.options.ajax_url) {
+      const loading = this.querySelector("[data-sid=file-uploading]");
+      this.previewImage.src = "";
+      this.previewImage.style.display = "none";
+      loading.style.display = "flex";
+      try {
+        const res = await this.uploadImage(file);
+        this.storeValue(res.data.data.url, res.data.data.url);
+      } catch (e) {
+        console.error(e);
+        simpleAlert(e.message);
+        return;
+      } finally {
+        loading.style.display = "none";
+      }
+      return;
+    }
+    const dt = new DataTransfer();
+    dt.items.add(file);
+    this.valueInput.required = false;
+    this.fileInput.files = dt.files;
+    this.fileInput.dispatchEvent(new CustomEvent("change", { bubbles: true }));
+    this.fileInput.dispatchEvent(new CustomEvent("input", { bubbles: true }));
+    this.storeValue("", URL.createObjectURL(file));
+  }
+  async uploadImage(file) {
+    const formData = new FormData();
+    formData.append("file", file);
+    const { post } = await useHttpClient();
+    return post(this.options.ajax_url, formData, {
+      headers: {
+        "Content-Type": "multipart/form-data"
+      }
+    });
+  }
+  storeValue(url, preview) {
+    this.previewImage.src = preview;
+    this.previewImage.style.display = "inline-block";
+    if (this.removeCheckbox) {
+      this.removeCheckbox.checked = false;
+    }
+    if (url) {
+      this.valueInput.value = url;
+    }
+    this.previewImage.dispatchEvent(new CustomEvent("change", { bubbles: true }));
+    this.valueInput.dispatchEvent(new CustomEvent("change", { bubbles: true }));
+    this.valueInput.dispatchEvent(new CustomEvent("input", { bubbles: true }));
+  }
+}
+/* @__PURE__ */ customElements.define(/* @__PURE__ */ (() => SingleImageDragElement.is)(), SingleImageDragElement);
+function getFileExtension(file) {
+  const parts = file.name.split(".");
+  if (parts.length > 1) {
+    return parts.pop();
+  }
+  return void 0;
+}
+async function loadCropper() {
+  const [module] = await Promise.all([
+    import("cropperjs"),
+    import("./cropper.min.js").then(({ default: css2 }) => {
+      injectCssToDocument(css2);
+    })
+  ]);
+  return module.default;
+}
+/* @__PURE__ */ loadCropper();
+export {
+  SingleImageDragElement
+};
+//# sourceMappingURL=field-single-image-drag.js.map

package/dist/chunks/field-single-image-drag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-single-image-drag.js","sources":["../../src/module/field-single-image-drag.ts"],"sourcesContent":["\r\nimport { useHttpClient } from '../composable';\r\nimport { __, injectCssToDocument, selectAll, simpleAlert } from '../service';\r\nimport { mergeDeep } from '../utilities';\r\nimport css from '../../scss/field/single-image-drag.scss?inline';\r\nimport { Modal } from 'bootstrap';\r\nimport type Cropper from 'cropperjs';\r\nimport { ApiReturn } from './http-client';\r\n\r\ninjectCssToDocument(css);\r\n\r\nexport interface SingleImageDragOptions {\r\n  accept: string | string[];\r\n  ajax_url?: string;\r\n  crop: boolean;\r\n  width: number;\r\n  height: number;\r\n  max_width?: number;\r\n  min_width?: number;\r\n  max_height?: number;\r\n  min_height?: number;\r\n  modalTarget: string;\r\n}\r\n\r\nconst defaultOptions: Partial<SingleImageDragOptions> = {\r\n  accept: [\r\n    'image/jpeg',\r\n    'image/png',\r\n    'image/webp',\r\n    'image/avif',\r\n    'image/gif',\r\n  ],\r\n  crop: false,\r\n  width: 800,\r\n  height: 800,\r\n};\r\n\r\nexport class SingleImageDragElement extends HTMLElement {\r\n  static is = 'uni-sid';\r\n\r\n  currentImage = '';\r\n  currentFile: File | undefined = undefined;\r\n  lastZoom = 0;\r\n  valueBackup = '';\r\n\r\n  private options!: SingleImageDragOptions;\r\n  private valueInput!: HTMLInputElement;\r\n  private fileInput!: HTMLInputElement;\r\n  private selectButton!: HTMLButtonElement;\r\n  private pasteButton!: HTMLButtonElement;\r\n  private dragarea!: HTMLDivElement;\r\n  private previewImage!: HTMLImageElement;\r\n  private removeCheckbox!: HTMLInputElement;\r\n  private modalElement!: HTMLDivElement;\r\n  private modal!: Modal;\r\n  private cropContainer!: HTMLDivElement;\r\n  private savebutton!: HTMLButtonElement;\r\n  private modalToolbarButtons!: NodeListOf<HTMLButtonElement>;\r\n  private cropper!: Cropper;\r\n\r\n  constructor() {\r\n    super();\r\n  }\r\n\r\n  connectedCallback() {\r\n    this.options = mergeDeep(\r\n      {},\r\n      defaultOptions,\r\n      JSON.parse(this.getAttribute('options') || '{}')\r\n    );\r\n\r\n    this.valueInput = this.querySelector<HTMLInputElement>('[data-field-input]')!;\r\n    this.fileInput = this.querySelector<HTMLInputElement>('[data-sid=file]')!;\r\n    this.selectButton = this.querySelector<HTMLButtonElement>('[data-sid=select]')!;\r\n    this.pasteButton = this.querySelector<HTMLButtonElement>('[data-sid=paste]')!;\r\n    this.dragarea = this.querySelector<HTMLDivElement>('[data-sid=dragarea]')!;\r\n    this.previewImage = this.querySelector<HTMLImageElement>('[data-sid=preview]')!;\r\n    this.removeCheckbox = this.querySelector<HTMLInputElement>('[data-sid=remove]')!;\r\n\r\n    this.modalElement = document.querySelector<HTMLDivElement>(this.options.modalTarget)!;\r\n    this.modal = Modal.getOrCreateInstance(this.modalElement);\r\n    this.cropContainer = this.modalElement.querySelector<HTMLDivElement>('[data-sid=\"crop-container\"]')!;\r\n    this.savebutton = this.modalElement.querySelector<HTMLButtonElement>('[data-sid=save-button]')!;\r\n    this.modalToolbarButtons = this.modalElement.querySelectorAll<HTMLButtonElement>('[data-sid-toolbar]');\r\n\r\n    const modalShown = async () => {\r\n      const cropper = await this.getCropper();\r\n      cropper.replace(this.currentImage);\r\n      this.cropContainer.style.visibility = '';\r\n      this.currentImage = '';\r\n    };\r\n\r\n    this.modalElement.addEventListener('shown.bs.modal', modalShown.bind(this));\r\n\r\n    this.savebutton.addEventListener('click', () => {\r\n      this.saveCropped();\r\n      this.modal.hide();\r\n    });\r\n\r\n    this.bindEvents();\r\n\r\n    this.style.visibility = '';\r\n  }\r\n\r\n  bindEvents() {\r\n    this.dragarea.addEventListener('dragover', (event) => {\r\n      event.stopPropagation();\r\n      event.preventDefault();\r\n\r\n      this.dragarea.classList.add('hover');\r\n    });\r\n\r\n    this.dragarea.addEventListener('dragleave', (event) => {\r\n      event.stopPropagation();\r\n      event.preventDefault();\r\n\r\n      this.dragarea.classList.remove('hover');\r\n    });\r\n\r\n    this.dragarea.addEventListener('drop', (event) => {\r\n      event.stopPropagation();\r\n      event.preventDefault();\r\n\r\n      this.dragarea.classList.remove('hover');\r\n\r\n      const files = (event.target as HTMLInputElement).files || event.dataTransfer?.files || [];\r\n      this.handleFileSelect(files[0]);\r\n    });\r\n\r\n    // Select button\r\n    this.selectButton.addEventListener('click', () => {\r\n      const input = document.createElement('input');\r\n      input.setAttribute('type', 'file');\r\n      input.setAttribute('accept', this.getInputAccept());\r\n      input.style.display = 'none';\r\n      input.addEventListener('change', (e) => {\r\n        this.handleFileSelect(input.files![0]!);\r\n\r\n        input.remove();\r\n      });\r\n\r\n      document.body.appendChild(input);\r\n      input.click();\r\n    });\r\n\r\n    this.pasteButton.addEventListener('click', () => {\r\n      navigator.clipboard.read().then((items) => {\r\n        let types = items[0].types;\r\n\r\n        if (types.length === 0) {\r\n          this.alert('This browser unable to get clipboard data.');\r\n          return;\r\n        }\r\n\r\n        types = types.slice().sort();\r\n\r\n        const type = types[0];\r\n\r\n        items[0].getType(type).then((blob) => {\r\n          this.handleFileSelect(new File([ blob ], 'image.png', { type }));\r\n        });\r\n      });\r\n    });\r\n\r\n    // Delete\r\n    this.removeCheckbox?.addEventListener('click', () => {\r\n      if (this.removeCheckbox.checked) {\r\n        this.valueBackup = this.valueInput.value;\r\n        this.valueInput.value = '';\r\n      } else {\r\n        this.valueInput.value = this.valueBackup;\r\n        this.valueBackup = '';\r\n      }\r\n    });\r\n\r\n    // Zoom slider\r\n    selectAll(this.modalToolbarButtons, (button) => {\r\n      button.addEventListener('click', (event) => {\r\n        this.toolbarClicked(button, event);\r\n      });\r\n    });\r\n  }\r\n\r\n  getInputAccept() {\r\n    let accept = this.options.accept;\r\n\r\n    if (Array.isArray(accept)) {\r\n      accept = accept.join(',');\r\n    }\r\n\r\n    return accept;\r\n  }\r\n\r\n  handleFileSelect(file: File) {\r\n    if (!this.checkFile(file)) {\r\n      return;\r\n    }\r\n\r\n    if (this.options.crop) {\r\n      const reader = new FileReader();\r\n\r\n      reader.addEventListener('load', (event) => {\r\n        this.cropContainer.style.visibility = 'hidden';\r\n        this.currentImage = event.target!.result as string;\r\n        this.currentFile = file;\r\n\r\n        // After modal shown, cropper will auto load.\r\n        this.modal.show();\r\n      });\r\n\r\n      reader.readAsDataURL(file);\r\n      return;\r\n    }\r\n\r\n    this.saveImage(file);\r\n  }\r\n\r\n  async saveCropped() {\r\n    const Cropper = await this.getCropper();\r\n\r\n    Cropper.getCroppedCanvas({\r\n        width: this.options.width,\r\n        height: this.options.height,\r\n        imageSmoothingEnabled: true\r\n      })\r\n      .toBlob((blob) => {\r\n        const file = new File([ blob! ], this.currentFile!.name, { type: 'image/png' });\r\n        this.saveImage(file);\r\n      }, 'image/png');\r\n  }\r\n\r\n  async getCropper() {\r\n    if (this.cropper) {\r\n      return this.cropper;\r\n    }\r\n\r\n    const Cropper = await loadCropper();\r\n\r\n    return this.cropper = new Cropper(this.cropContainer.querySelector('img')!, {\r\n      aspectRatio: this.options.width / this.options.height,\r\n      autoCropArea: 1,\r\n      viewMode: 1,\r\n      dragMode: 'move',\r\n      cropBoxMovable: false,\r\n      cropBoxResizable: false,\r\n      ready: (e) => {\r\n        //\r\n      },\r\n    });\r\n  }\r\n\r\n  async toolbarClicked(button: HTMLButtonElement, event: MouseEvent) {\r\n    const cropper = await this.getCropper();\r\n\r\n    const data = cropper.getData();\r\n\r\n    switch (button.dataset.sidToolbar) {\r\n      case 'zoom-in':\r\n        cropper.zoom(0.1);\r\n        break;\r\n\r\n      case 'zoom-out':\r\n        cropper.zoom(-0.1);\r\n        break;\r\n\r\n      case 'rotate-left':\r\n        cropper.rotate(-90);\r\n        break;\r\n\r\n      case 'rotate-right':\r\n        cropper.rotate(90);\r\n        break;\r\n\r\n      case 'scale-x':\r\n        cropper.scaleX(-data.scaleX);\r\n        break;\r\n\r\n      case 'scale-y':\r\n        cropper.scaleY(-data.scaleY);\r\n        break;\r\n    }\r\n  }\r\n\r\n  checkFile(file: File): boolean {\r\n    let accept = this.options.accept;\r\n\r\n    if (typeof accept === 'string') {\r\n      accept = accept.split(',').map(v => v.trim());\r\n    }\r\n\r\n    if (!accept.length) {\r\n      return true;\r\n    }\r\n\r\n    let allow = false;\r\n\r\n    for (const type of accept) {\r\n      if (type.indexOf('/') !== -1) {\r\n        allow = allow || this.compareMimeType(type, file.type);\r\n      } else {\r\n        allow = allow || type.toLowerCase() === getFileExtension(file)?.toLowerCase();\r\n      }\r\n    }\r\n\r\n    if (allow) {\r\n      return true;\r\n    }\r\n\r\n    this.alert(\r\n      __('unicorn.field.sid.message.invalid.image.title'),\r\n      __('unicorn.field.sid.message.invalid.image.desc'),\r\n      'error'\r\n    );\r\n\r\n    return false;\r\n  }\r\n\r\n  compareMimeType(accept: string, mime: string) {\r\n    const accept2 = accept.split('/');\r\n    const mime2 = mime.split('/');\r\n\r\n    if (accept2[1] === '*') {\r\n      return accept2[0] === mime2[0];\r\n    }\r\n\r\n    return accept === mime;\r\n  }\r\n\r\n  checkSize(image: HTMLImageElement): boolean {\r\n    try {\r\n      if (this.options.max_width && this.options.max_width < image.width) {\r\n        throw new Error(__('unicorn.field.sid.message.invalid.size.max.width', this.options.max_width));\r\n      }\r\n\r\n      if (this.options.min_width && this.options.min_width > image.width) {\r\n        throw new Error(__('unicorn.field.sid.message.invalid.size.min.width', this.options.min_width));\r\n      }\r\n\r\n      if (this.options.max_height && this.options.max_height < image.height) {\r\n        throw new Error(__('unicorn.field.sid.message.invalid.size.max.height', this.options.max_height));\r\n      }\r\n\r\n      if (this.options.min_height && this.options.min_height > image.height) {\r\n        throw new Error(__('unicorn.field.sid.message.invalid.size.min.height', this.options.min_height));\r\n      }\r\n    } catch (e) {\r\n      this.alert(\r\n        __('unicorn.field.sid.message.invalid.size.title'),\r\n        (e as Error).message,\r\n        'error'\r\n      );\r\n\r\n      return false;\r\n    }\r\n\r\n    return true;\r\n  }\r\n\r\n  alert(title: string, text = '', type = 'info') {\r\n    return simpleAlert(title, text, type);\r\n  }\r\n\r\n  async saveImage(file: File) {\r\n    if (this.options.ajax_url) {\r\n      const loading = this.querySelector<HTMLImageElement>('[data-sid=file-uploading]')!;\r\n\r\n      this.previewImage.src = '';\r\n      this.previewImage.style.display = 'none';\r\n      loading.style.display = 'flex';\r\n\r\n      try {\r\n        const res = await this.uploadImage(file);\r\n\r\n        this.storeValue(res.data.data.url, res.data.data.url);\r\n      } catch (e) {\r\n        console.error(e);\r\n        simpleAlert((e as Error).message);\r\n        return;\r\n      } finally {\r\n        loading.style.display = 'none';\r\n      }\r\n\r\n      return;\r\n    }\r\n\r\n    // @see https://stackoverflow.com/a/47172409\r\n    // @see https://stackoverflow.com/a/47522812\r\n    const dt = new DataTransfer();\r\n    dt.items.add(file);\r\n\r\n    // No required for value input to remove validation message\r\n    this.valueInput.required = false;\r\n\r\n    this.fileInput.files = dt.files;\r\n    this.fileInput.dispatchEvent(new CustomEvent('change', { bubbles: true }));\r\n    this.fileInput.dispatchEvent(new CustomEvent('input', { bubbles: true }));\r\n\r\n    this.storeValue('', URL.createObjectURL(file));\r\n  }\r\n\r\n  async uploadImage(file: File) {\r\n    const formData = new FormData();\r\n    formData.append('file', file);\r\n\r\n    const { post } = await useHttpClient();\r\n\r\n    return post<ApiReturn<{ url: string; }>>(this.options.ajax_url!, formData, {\r\n      headers: {\r\n        'Content-Type': 'multipart/form-data'\r\n      }\r\n    });\r\n  }\r\n\r\n  storeValue(url: string, preview: string) {\r\n    this.previewImage.src = preview;\r\n    this.previewImage.style.display = 'inline-block';\r\n\r\n    // Make delete box unchecked\r\n    if (this.removeCheckbox) {\r\n      this.removeCheckbox.checked = false;\r\n    }\r\n\r\n    if (url) {\r\n      this.valueInput.value = url;\r\n    }\r\n\r\n    // Trigger change\r\n    this.previewImage.dispatchEvent(new CustomEvent('change', { bubbles: true }));\r\n    this.valueInput.dispatchEvent(new CustomEvent('change', { bubbles: true }));\r\n    this.valueInput.dispatchEvent(new CustomEvent('input', { bubbles: true }));\r\n  }\r\n}\r\n\r\n// Promise.all([\r\n//   import('@cropperjs/cropper.min.js'),\r\n//   import('@cropperjs/cropper.css'),\r\n// ])\r\n//   .then((service) => {\r\n//     const styleSheet = service[1].default;\r\n//     document.adoptedStyleSheets = [...document.adoptedStyleSheets, styleSheet];\r\n//   });\r\n\r\ncustomElements.define(SingleImageDragElement.is, SingleImageDragElement);\r\n\r\nfunction getFileExtension(file: File): string | undefined {\r\n  const parts = file.name.split('.');\r\n  if (parts.length > 1) {\r\n    return parts.pop();\r\n  }\r\n  return undefined;\r\n}\r\n\r\nasync function loadCropper(): Promise<typeof Cropper> {\r\n  const [module] = await Promise.all([\r\n    import('cropperjs'),\r\n    import('cropperjs/dist/cropper.min.css?inline').then(({ default: css }) => {\r\n      injectCssToDocument(css);\r\n    })\r\n  ]);\r\n\r\n  return module.default;\r\n}\r\n\r\nloadCropper();\r\n\r\nexport interface SingleImageDragModule {\r\n  SingleImageDragElement: typeof SingleImageDragElement;\r\n}\r\n"],"names":["css"],"mappings":"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"}

package/dist/chunks/form.js

@@ -0,0 +1,154 @@
+import { q as useSystemUri, aa as data, l as loadAlpine } from "./unicorn.js";
+class UnicornFormElement {
+  element;
+  options;
+  constructor(selector, element, options = {}) {
+    if (!element) {
+      element = document.createElement("form");
+      if (typeof selector === "string" && selector.startsWith("#")) {
+        element.setAttribute("id", selector.substring(1));
+        element.setAttribute("name", selector.substring(1));
+      }
+      element.setAttribute("method", "post");
+      element.setAttribute("enctype", "multipart/form-data");
+      element.setAttribute("novalidate", "true");
+      element.setAttribute("action", useSystemUri("full"));
+      element.setAttribute("style", "display: none;");
+      const csrf = document.createElement("input");
+      csrf.setAttribute("type", "hidden");
+      csrf.setAttribute("name", data("csrf-token"));
+      csrf.setAttribute("value", "1");
+      element.appendChild(csrf);
+      document.body.appendChild(element);
+    }
+    this.element = element;
+    this.options = { ...options };
+  }
+  initComponent(store = "form", custom = {}) {
+    return loadAlpine((Alpine) => {
+      Alpine.store(store, this.useState(custom));
+    });
+  }
+  useState(custom = {}) {
+    const state = {};
+    Object.getOwnPropertyNames(Object.getPrototypeOf(this)).map((item) => {
+      return state[item] = this[item].bind(this);
+    });
+    return Object.assign(
+      state,
+      custom
+    );
+  }
+  getElement() {
+    return this.element;
+  }
+  submit(url, data2, method, customMethod) {
+    const form = this.element;
+    if (customMethod) {
+      let methodInput = form.querySelector('input[name="_method"]');
+      if (!methodInput) {
+        methodInput = document.createElement("input");
+        methodInput.setAttribute("name", "_method");
+        methodInput.setAttribute("type", "hidden");
+        methodInput.value = customMethod;
+        form.appendChild(methodInput);
+      } else {
+        methodInput.value = customMethod;
+      }
+    }
+    if (data2) {
+      const flatted = UnicornFormElement.flattenObject(data2);
+      for (const key in flatted) {
+        const value = flatted[key];
+        const fieldName = UnicornFormElement.buildFieldName(key);
+        this.injectInput(fieldName, value);
+      }
+    }
+    if (url) {
+      form.setAttribute("action", url);
+    }
+    if (method) {
+      form.setAttribute("method", method);
+    }
+    form.requestSubmit();
+    return true;
+  }
+  injectInput(name, value) {
+    let input = this.element.querySelector(`input[name="${name}"]`);
+    if (!input) {
+      input = document.createElement("input");
+      input.setAttribute("name", name);
+      input.setAttribute("type", "hidden");
+      input.setAttribute("data-role", "temp-input");
+      this.element.appendChild(input);
+    }
+    input.value = value;
+    return input;
+  }
+  /**
+   * Make a GET request.
+   */
+  get(url, data2, customMethod) {
+    return this.submit(url, data2, "GET", customMethod);
+  }
+  /**
+   * Post form.
+   */
+  post(url, data2, customMethod) {
+    customMethod = customMethod || "POST";
+    return this.submit(url, data2, "POST", customMethod);
+  }
+  /**
+   * Make a PUT request.
+   */
+  put(url, data2) {
+    return this.post(url, data2, "PUT");
+  }
+  /**
+   * Make a PATCH request.
+   */
+  patch(url, data2) {
+    return this.post(url, data2, "PATCH");
+  }
+  /**
+   * Make a DELETE request.
+   */
+  delete(url, data2) {
+    return this.post(url, data2, "DELETE");
+  }
+  /**
+   * @see https://stackoverflow.com/a/53739792
+   *
+   * @param {Object} ob
+   * @returns {Object}
+   */
+  static flattenObject(ob) {
+    const toReturn = {};
+    for (let i in ob) {
+      if (!ob.hasOwnProperty(i)) {
+        continue;
+      }
+      if (typeof ob[i] === "object" && ob[i] != null) {
+        const flatObject = this.flattenObject(ob[i]);
+        for (let x in flatObject) {
+          if (!flatObject.hasOwnProperty(x)) {
+            continue;
+          }
+          toReturn[i + "/" + x] = flatObject[x];
+        }
+      } else {
+        toReturn[i] = ob[i];
+      }
+    }
+    return toReturn;
+  }
+  static buildFieldName(field) {
+    const names = field.split("/");
+    const first = names.shift();
+    return first + names.map((name) => `[${name}]`).join("");
+  }
+}
+export {
+  UnicornFormElement
+};
+//# sourceMappingURL=form.js.map

package/dist/chunks/form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.js","sources":["../../src/module/form.ts"],"sourcesContent":["import { data } from '../data';\r\nimport { loadAlpine, useSystemUri } from '../service';\r\nimport type { Nullable } from '../types';\r\n\r\nexport class UnicornFormElement {\r\n  element: HTMLFormElement | undefined;\r\n  options: Record<string, any>;\r\n\r\n  constructor(\r\n    selector?: string | Element,\r\n    element?: HTMLFormElement,\r\n    options: Record<string, any> = {},\r\n  ) {\r\n    // If form not found, create one\r\n    if (!element) {\r\n      element = document.createElement('form');\r\n\r\n      if (typeof selector === 'string' && selector.startsWith('#')) {\r\n        element.setAttribute('id', selector.substring(1));\r\n        element.setAttribute('name', selector.substring(1));\r\n      }\r\n\r\n      element.setAttribute('method', 'post');\r\n      element.setAttribute('enctype', 'multipart/form-data');\r\n      element.setAttribute('novalidate', 'true');\r\n      element.setAttribute('action', useSystemUri('full'));\r\n      element.setAttribute('style', 'display: none;');\r\n\r\n      const csrf = document.createElement('input');\r\n      csrf.setAttribute('type', 'hidden');\r\n      csrf.setAttribute('name', data('csrf-token'));\r\n      csrf.setAttribute('value', '1');\r\n\r\n      element.appendChild(csrf);\r\n      document.body.appendChild(element);\r\n    }\r\n\r\n    this.element = element;\r\n    this.options = { ...options };\r\n  }\r\n\r\n  initComponent(store = 'form', custom = {}) {\r\n    return loadAlpine((Alpine) => {\r\n      Alpine.store(store, this.useState(custom));\r\n    });\r\n  }\r\n\r\n  useState(custom = {}) {\r\n    const state: Record<string, any> = {};\r\n    Object.getOwnPropertyNames(Object.getPrototypeOf(this))\r\n      .map(item => {\r\n        // @ts-ignore\r\n        return state[item] = this[item].bind(this);\r\n      });\r\n\r\n    return Object.assign(\r\n      state,\r\n      custom\r\n    );\r\n  }\r\n\r\n  getElement() {\r\n    return this.element;\r\n  }\r\n\r\n  submit(\r\n    url?: Nullable<string>,\r\n    data?: Nullable<Record<string, any>>,\r\n    method?: Nullable<string>,\r\n    customMethod?: Nullable<string>,\r\n  ): boolean {\r\n    const form = this.element!;\r\n\r\n    if (customMethod) {\r\n      let methodInput = form.querySelector<HTMLInputElement>('input[name=\"_method\"]');\r\n\r\n      if (!methodInput) {\r\n        methodInput = document.createElement('input');\r\n        methodInput.setAttribute('name', '_method');\r\n        methodInput.setAttribute('type', 'hidden');\r\n        methodInput.value = customMethod;\r\n\r\n        form.appendChild(methodInput);\r\n      } else {\r\n        methodInput.value = customMethod;\r\n      }\r\n    }\r\n\r\n    // Set data into form.\r\n    if (data) {\r\n      const flatted = UnicornFormElement.flattenObject(data);\r\n\r\n      for (const key in flatted) {\r\n        const value = flatted[key];\r\n\r\n        const fieldName = UnicornFormElement.buildFieldName(key);\r\n        this.injectInput(fieldName, value);\r\n      }\r\n    }\r\n\r\n    if (url) {\r\n      form.setAttribute('action', url);\r\n    }\r\n\r\n    if (method) {\r\n      form.setAttribute('method', method);\r\n    }\r\n\r\n    // Use requestSubmit() to fire submit event.\r\n    form.requestSubmit();\r\n\r\n    return true;\r\n  }\r\n\r\n  injectInput(name: string, value: any) {\r\n    let input = this.element!.querySelector<HTMLInputElement>(`input[name=\"${name}\"]`);\r\n\r\n    if (!input) {\r\n      input = document.createElement('input');\r\n      input.setAttribute('name', name);\r\n      input.setAttribute('type', 'hidden');\r\n      input.setAttribute('data-role', 'temp-input');\r\n\r\n      this.element!.appendChild(input);\r\n    }\r\n\r\n    input.value = value;\r\n    return input;\r\n  }\r\n\r\n  /**\r\n   * Make a GET request.\r\n   */\r\n  get(\r\n    url?: Nullable<string>,\r\n    data?: Nullable<Record<string, any>>,\r\n    customMethod?: Nullable<string>,\r\n  ): boolean {\r\n    return this.submit(url, data, 'GET', customMethod);\r\n  }\r\n\r\n  /**\r\n   * Post form.\r\n   */\r\n  post(\r\n    url?: Nullable<string>,\r\n    data?: Nullable<Record<string, any>>,\r\n    customMethod?: Nullable<string>,\r\n  ) {\r\n    customMethod = customMethod || 'POST';\r\n\r\n    return this.submit(url, data, 'POST', customMethod);\r\n  }\r\n\r\n  /**\r\n   * Make a PUT request.\r\n   */\r\n  put(\r\n    url?: Nullable<string>,\r\n    data?: Nullable<Record<string, any>>,\r\n  ) {\r\n    return this.post(url, data, 'PUT');\r\n  }\r\n\r\n  /**\r\n   * Make a PATCH request.\r\n   */\r\n  patch(\r\n    url?: Nullable<string>,\r\n    data?: Nullable<Record<string, any>>,\r\n  ) {\r\n    return this.post(url, data, 'PATCH');\r\n  }\r\n\r\n  /**\r\n   * Make a DELETE request.\r\n   */\r\n  delete(\r\n    url?: Nullable<string>,\r\n    data?: Nullable<Record<string, any>>,\r\n  ) {\r\n    return this.post(url, data, 'DELETE');\r\n  }\r\n\r\n  /**\r\n   * @see https://stackoverflow.com/a/53739792\r\n   *\r\n   * @param {Object} ob\r\n   * @returns {Object}\r\n   */\r\n  static flattenObject(ob: Record<string, any>): Record<string, any> {\r\n    const toReturn: Record<string, any> = {};\r\n\r\n    for (let i in ob) {\r\n      if (!ob.hasOwnProperty(i)) {\r\n        continue;\r\n      }\r\n\r\n      if ((typeof ob[i]) === 'object' && ob[i] != null) {\r\n        const flatObject = this.flattenObject(ob[i]);\r\n\r\n        for (let x in flatObject) {\r\n          if (!flatObject.hasOwnProperty(x)) {\r\n            continue;\r\n          }\r\n\r\n          toReturn[i + '/' + x] = flatObject[x];\r\n        }\r\n      } else {\r\n        toReturn[i] = ob[i];\r\n      }\r\n    }\r\n    return toReturn;\r\n  }\r\n\r\n  static buildFieldName(field: string) {\r\n    const names = field.split('/');\r\n\r\n    const first = names.shift();\r\n\r\n    return first + names.map(name => `[${name}]`).join('');\r\n  }\r\n}\r\n"],"names":["data"],"mappings":";AAIO,MAAM,mBAAmB;AAAA,EAC9B;AAAA,EACA;AAAA,EAEA,YACE,UACA,SACA,UAA+B,CAAA,GAC/B;AAEA,QAAI,CAAC,SAAS;AACZ,gBAAU,SAAS,cAAc,MAAM;AAEvC,UAAI,OAAO,aAAa,YAAY,SAAS,WAAW,GAAG,GAAG;AAC5D,gBAAQ,aAAa,MAAM,SAAS,UAAU,CAAC,CAAC;AAChD,gBAAQ,aAAa,QAAQ,SAAS,UAAU,CAAC,CAAC;AAAA,MACpD;AAEA,cAAQ,aAAa,UAAU,MAAM;AACrC,cAAQ,aAAa,WAAW,qBAAqB;AACrD,cAAQ,aAAa,cAAc,MAAM;AACzC,cAAQ,aAAa,UAAU,aAAa,MAAM,CAAC;AACnD,cAAQ,aAAa,SAAS,gBAAgB;AAE9C,YAAM,OAAO,SAAS,cAAc,OAAO;AAC3C,WAAK,aAAa,QAAQ,QAAQ;AAClC,WAAK,aAAa,QAAQ,KAAK,YAAY,CAAC;AAC5C,WAAK,aAAa,SAAS,GAAG;AAE9B,cAAQ,YAAY,IAAI;AACxB,eAAS,KAAK,YAAY,OAAO;AAAA,IACnC;AAEA,SAAK,UAAU;AACf,SAAK,UAAU,EAAE,GAAG,QAAA;AAAA,EACtB;AAAA,EAEA,cAAc,QAAQ,QAAQ,SAAS,CAAA,GAAI;AACzC,WAAO,WAAW,CAAC,WAAW;AAC5B,aAAO,MAAM,OAAO,KAAK,SAAS,MAAM,CAAC;AAAA,IAC3C,CAAC;AAAA,EACH;AAAA,EAEA,SAAS,SAAS,IAAI;AACpB,UAAM,QAA6B,CAAA;AACnC,WAAO,oBAAoB,OAAO,eAAe,IAAI,CAAC,EACnD,IAAI,CAAA,SAAQ;AAEX,aAAO,MAAM,IAAI,IAAI,KAAK,IAAI,EAAE,KAAK,IAAI;AAAA,IAC3C,CAAC;AAEH,WAAO,OAAO;AAAA,MACZ;AAAA,MACA;AAAA,IAAA;AAAA,EAEJ;AAAA,EAEA,aAAa;AACX,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,OACE,KACAA,OACA,QACA,cACS;AACT,UAAM,OAAO,KAAK;AAElB,QAAI,cAAc;AAChB,UAAI,cAAc,KAAK,cAAgC,uBAAuB;AAE9E,UAAI,CAAC,aAAa;AAChB,sBAAc,SAAS,cAAc,OAAO;AAC5C,oBAAY,aAAa,QAAQ,SAAS;AAC1C,oBAAY,aAAa,QAAQ,QAAQ;AACzC,oBAAY,QAAQ;AAEpB,aAAK,YAAY,WAAW;AAAA,MAC9B,OAAO;AACL,oBAAY,QAAQ;AAAA,MACtB;AAAA,IACF;AAGA,QAAIA,OAAM;AACR,YAAM,UAAU,mBAAmB,cAAcA,KAAI;AAErD,iBAAW,OAAO,SAAS;AACzB,cAAM,QAAQ,QAAQ,GAAG;AAEzB,cAAM,YAAY,mBAAmB,eAAe,GAAG;AACvD,aAAK,YAAY,WAAW,KAAK;AAAA,MACnC;AAAA,IACF;AAEA,QAAI,KAAK;AACP,WAAK,aAAa,UAAU,GAAG;AAAA,IACjC;AAEA,QAAI,QAAQ;AACV,WAAK,aAAa,UAAU,MAAM;AAAA,IACpC;AAGA,SAAK,cAAA;AAEL,WAAO;AAAA,EACT;AAAA,EAEA,YAAY,MAAc,OAAY;AACpC,QAAI,QAAQ,KAAK,QAAS,cAAgC,eAAe,IAAI,IAAI;AAEjF,QAAI,CAAC,OAAO;AACV,cAAQ,SAAS,cAAc,OAAO;AACtC,YAAM,aAAa,QAAQ,IAAI;AAC/B,YAAM,aAAa,QAAQ,QAAQ;AACnC,YAAM,aAAa,aAAa,YAAY;AAE5C,WAAK,QAAS,YAAY,KAAK;AAAA,IACjC;AAEA,UAAM,QAAQ;AACd,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKA,IACE,KACAA,OACA,cACS;AACT,WAAO,KAAK,OAAO,KAAKA,OAAM,OAAO,YAAY;AAAA,EACnD;AAAA;AAAA;AAAA;AAAA,EAKA,KACE,KACAA,OACA,cACA;AACA,mBAAe,gBAAgB;AAE/B,WAAO,KAAK,OAAO,KAAKA,OAAM,QAAQ,YAAY;AAAA,EACpD;AAAA;AAAA;AAAA;AAAA,EAKA,IACE,KACAA,OACA;AACA,WAAO,KAAK,KAAK,KAAKA,OAAM,KAAK;AAAA,EACnC;AAAA;AAAA;AAAA;AAAA,EAKA,MACE,KACAA,OACA;AACA,WAAO,KAAK,KAAK,KAAKA,OAAM,OAAO;AAAA,EACrC;AAAA;AAAA;AAAA;AAAA,EAKA,OACE,KACAA,OACA;AACA,WAAO,KAAK,KAAK,KAAKA,OAAM,QAAQ;AAAA,EACtC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,OAAO,cAAc,IAA8C;AACjE,UAAM,WAAgC,CAAA;AAEtC,aAAS,KAAK,IAAI;AAChB,UAAI,CAAC,GAAG,eAAe,CAAC,GAAG;AACzB;AAAA,MACF;AAEA,UAAK,OAAO,GAAG,CAAC,MAAO,YAAY,GAAG,CAAC,KAAK,MAAM;AAChD,cAAM,aAAa,KAAK,cAAc,GAAG,CAAC,CAAC;AAE3C,iBAAS,KAAK,YAAY;AACxB,cAAI,CAAC,WAAW,eAAe,CAAC,GAAG;AACjC;AAAA,UACF;AAEA,mBAAS,IAAI,MAAM,CAAC,IAAI,WAAW,CAAC;AAAA,QACtC;AAAA,MACF,OAAO;AACL,iBAAS,CAAC,IAAI,GAAG,CAAC;AAAA,MACpB;AAAA,IACF;AACA,WAAO;AAAA,EACT;AAAA,EAEA,OAAO,eAAe,OAAe;AACnC,UAAM,QAAQ,MAAM,MAAM,GAAG;AAE7B,UAAM,QAAQ,MAAM,MAAA;AAEpB,WAAO,QAAQ,MAAM,IAAI,CAAA,SAAQ,IAAI,IAAI,GAAG,EAAE,KAAK,EAAE;AAAA,EACvD;AACF;"}