import { computed as x, ref as p, watch as d, resolveComponent as h, openBlock as v, createElementBlock as m, unref as i, createCommentVNode as y, createElementVNode as o, normalizeClass as C, renderSlot as g, createVNode as k, withCtx as S, pushScopeId as $, popScopeId as w } from "vue";
import { usePictureUpload as I } from "./composables-5f691338.js";
import { _export_sfc as P } from "./_plugin-vue_export-helper-6a641814.js";
const F = (n) => ($("data-v-88b88b52"), n = n(), w(), n), N = { class: "flex flex-wrap" }, V = ["id"], z = ["for"], B = /* @__PURE__ */ F(() => /* @__PURE__ */ o("div", { class: "i-la-image" }, null, -1)), E = { 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" }, O = ["src"], R = {
  __name: "FormPicture",
  props: {
    field: { type: String, default: "cover" },
    options: {
      type: Object,
      default: () => ({
        picSize: 800,
        preserveRatio: !0
      })
    }
  },
  emits: ["update"],
  setup(n, { emit: _ }) {
    const r = n, u = x(() => `${r.field}_upload`), s = p(!1), l = p(), { state: f, handleChange: c } = I(r.options);
    return d(() => f.output, (t) => {
      t != null && t.content && (s.value = !0, l.value = t.content);
    }), d(l, (t) => {
      _("update", t);
    }), (t, e) => {
      const b = h("ui-layer");
      return v(), m("div", N, [
        l.value ? y("", !0) : (v(), m("input", {
          key: 0,
          class: "hidden",
          id: i(u),
          type: "file",
          accept: "image/*",
          onChange: e[0] || (e[0] = (...a) => i(c) && i(c)(...a))
        }, null, 40, V)),
        o("label", {
          class: C(["m-1 button cursor-pointer", { active: l.value }]),
          for: i(u),
          onClick: e[1] || (e[1] = (a) => s.value = !0)
        }, [
          g(t.$slots, "default", {}, () => [
            B
          ], !0)
        ], 10, z),
        k(b, {
          class: "max-h-60vh mt-20",
          open: s.value,
          onClose: e[4] || (e[4] = (a) => s.value = !1)
        }, {
          default: S(() => [
            o("button", E, [
              o("div", {
                class: "i-la-check",
                onClick: e[2] || (e[2] = (a) => s.value = !1)
              })
            ]),
            o("button", j, [
              o("div", {
                class: "i-la-trash-alt",
                onClick: e[3] || (e[3] = (a) => {
                  l.value = "", s.value = !1;
                })
              })
            ]),
            o("img", { src: l.value }, null, 8, O)
          ]),
          _: 1
        }, 8, ["open"])
      ]);
    };
  }
}, D = /* @__PURE__ */ P(R, [["__scopeId", "data-v-88b88b52"]]);
export {
  D as default
};
//# sourceMappingURL=FormPicture-6c9f79b1.js.map
