https://portal.godesignguru.com/build/assets/ImageUpload-BalZou7J.js

1import { o as t, c as l, C as i, e as d, b as r, u, a as m, B as p, t as v, g as k, G as w } from "./app-yg_pP4S4.js";
2import { L as C } from "./LoaderIcon-BfI_LFZK.js";
3import { r as h } from "./CameraIcon-CztUuFST.js";
4const j = { class: "group relative inline-block shrink-0" }, z = ["src", "alt"], B = ["for"], S = ["id", "name"], x = ["for"], U = { class: "sr-only" }, O = { __name: "ImageUpload", props: { name: { type: String, default: () => "thumbnail" }, thumbnail: { type: [Object, String] }, sizeClasses: { type: [String, Array, Object], default: () => "aspect-square h-12 w-12" }, editable: { type: Boolean, default: false }, loading: { type: Boolean, default: false } }, emits: ["file-upload"], setup(e, { emit: g }) {
5  const s = e, b = g, o = w(), f = (a) => {
6    if (/\.(jpe?g|png|gif)$/i.test(a.name)) {
7      let n = new FileReader();
8      n.addEventListener("load", () => {
9        o.value = n.result, a.url = o.value, b("file-upload", a);
10      }, false), n.readAsDataURL(a);
11    }
12  }, c = k(() => s.thumbnail === null ? null : typeof s.thumbnail == "string" || s.thumbnail instanceof String ? s.thumbnail : s.thumbnail instanceof Object ? s.thumbnail.url : o.value), y = (a) => {
13    var n = a.target.files || a.dataTransfer.files;
14    f(n[0]);
15  };
16  return (a, n) => (t(), l("div", j, [c.value ? (t(), l("img", { key: 0, class: i(["inline-block rounded-md bg-white object-cover", e.sizeClasses]), src: c.value, alt: a.$t("Thumbnail image") }, null, 10, z)) : (t(), l("div", { key: 1, class: i(["rounded-md bg-gray-200 object-contain", e.sizeClasses]) }, null, 2)), e.loading ? (t(), l("div", { key: 2, class: i(["absolute inset-0 flex items-center justify-center rounded-md bg-gray-200 opacity-70", e.sizeClasses]) }, [d(C, { class: "h-5 w-5 animate-spin text-gray-800" })], 2)) : r("", true), e.editable ? (t(), l("div", { key: 3, class: i(["absolute inset-0 hidden rounded-md bg-gray-200 opacity-70 [@media(hover:hover)]:group-hover:block", e.sizeClasses]) }, null, 2)) : r("", true), e.editable ? (t(), l("label", { key: 4, for: e.name, class: "absolute left-[calc(50%_-_0.625rem)] top-[calc(50%_-_0.625rem)] hidden cursor-pointer [@media(hover:hover)]:group-hover:block" }, [d(u(h), { class: "h-5 w-5 rounded bg-gray-600 p-1 text-white", "aria-hidden": "true" }), m("input", { id: e.name, type: "file", name: e.name, accept: ".png, .jpg, .jpeg", class: "sr-only", onChange: p(y, ["stop"]) }, null, 40, S)], 8, B)) : r("", true), e.editable ? (t(), l("label", { key: 5, for: e.name, class: "absolute inset-0 hidden cursor-pointer [@media(hover:none)]:block" }, [m("span", U, v(a.$t("Change image")), 1), d(u(h), { class: "absolute -bottom-1 -right-1 h-5 w-5 rounded-full bg-gray-600 p-1 text-white ring-2 ring-white", "aria-hidden": "true" })], 8, x)) : r("", true)]));
17} };
18export {
19  O as _
20};