import { computed as x, ref as d, usePictureUpload as b, watch as p, openBlock as v, createElementBlock as m, unref as i, createCommentVNode as y, createBaseVNode as o, renderSlot as C, normalizeClass as k, createVNode as g, withCtx as S, pushScopeId as $, popScopeId as w } from "./composables-Ci32s3jE.js";
import { UiLayer as I } from "./components.js";
import { _export_sfc as B } from "./_plugin-vue_export-helper-DueaC3du.js";
const N = (l) => ($("data-v-8b3f873f"), l = l(), w(), l), P = { class: "flex flex-wrap" }, V = ["id"], z = ["for"], F = /* @__PURE__ */ N(() => /* @__PURE__ */ o("div", { class: "i-la-image" }, null, -1)), U = { class: "button fixed text-2xl opacity-40 hover-opacity-100 m-4" }, j = { class: "button fixed text-2xl opacity-40 hover-opacity-100 mt-4 ml-18" }, E = ["src"], L = {
  __name: "FormPicture",
  props: {
    field: { type: String, default: "cover" },
    options: {
      type: Object,
      default: () => ({
        picSize: 800,
        preserveRatio: !0
      })
    }
  },
  emits: ["update"],
  setup(l, { emit: f }) {
    const r = l, _ = f, u = x(() => `${r.field}_upload`), s = d(!1), a = d(), { state: h, handleChange: c } = b(r.options);
    return p(() => h.output, (e) => {
      e != null && e.content && (s.value = !0, a.value = e.content);
    }), p(a, (e) => {
      _("update", e);
    }), (e, t) => (v(), m("div", P, [
      a.value ? y("", !0) : (v(), m("input", {
        key: 0,
        class: "hidden",
        id: u.value,
        type: "file",
        accept: "image/*",
        onChange: t[0] || (t[0] = (...n) => i(c) && i(c)(...n))
      }, null, 40, V)),
      o("label", {
        class: k(["m-1 button cursor-pointer", { active: a.value }]),
        for: u.value,
        onClick: t[1] || (t[1] = (n) => s.value = !0)
      }, [
        C(e.$slots, "default", {}, () => [
          F
        ], !0)
      ], 10, z),
      g(i(I), {
        class: "max-h-60vh mt-20",
        open: s.value,
        onClose: t[4] || (t[4] = (n) => s.value = !1)
      }, {
        default: S(() => [
          o("button", U, [
            o("div", {
              class: "i-la-check",
              onClick: t[2] || (t[2] = (n) => s.value = !1)
            })
          ]),
          o("button", j, [
            o("div", {
              class: "i-la-trash-alt",
              onClick: t[3] || (t[3] = (n) => {
                a.value = "", s.value = !1;
              })
            })
          ]),
          o("img", { src: a.value }, null, 8, E)
        ]),
        _: 1
      }, 8, ["open"])
    ]));
  }
}, A = /* @__PURE__ */ B(L, [["__scopeId", "data-v-8b3f873f"]]);
export {
  A as default
};
//# sourceMappingURL=FormPicture-CE-L_8Je.js.map
