import { ref as o, watchEffect as m, createElementBlock as p, openBlock as f, createElementVNode as t, createVNode as c, normalizeClass as x, unref as k, withCtx as b, withDirectives as _, vModelText as C } from "vue";
import { UiLayer as w } from "./components.js";
import "./composables-BAZQlC3e.js";
import { _export_sfc as y } from "./_plugin-vue_export-helper-DueaC3du.js";
const L = { class: "flex flex-wrap" }, V = { class: "p-4 max-w-600px" }, $ = { class: "flex items-center gap-4" }, g = { class: "button text-xl" }, E = { class: "button text-xl" }, U = {
  __name: "FormLink",
  emits: ["update"],
  setup(B, { emit: d }) {
    const l = o(), s = o(), n = o(), v = o(!1), i = o(), r = d;
    return m(() => {
      var u;
      s.value ? (v.value = (u = n == null ? void 0 : n.value) == null ? void 0 : u.checkValidity(), v.value && (i.value = s.value, r("update", s.value))) : i.value = null;
    }), (u, e) => (f(), p("div", L, [
      t("button", {
        class: x(["button m-1", { active: i.value }]),
        onClick: e[0] || (e[0] = (a) => l.value = !l.value)
      }, e[5] || (e[5] = [
        t("div", { class: "i-la-link" }, null, -1)
      ]), 2),
      c(k(w), {
        class: "mt-20",
        open: l.value,
        onClose: e[4] || (e[4] = (a) => l.value = !1)
      }, {
        default: b(() => [
          t("div", V, [
            t("div", $, [
              e[6] || (e[6] = t("div", { class: "i-la-link text-2xl" }, null, -1)),
              e[7] || (e[7] = t("div", { class: "text-lg" }, "Add a link", -1)),
              t("button", g, [
                t("div", {
                  class: "i-la-check",
                  onClick: e[1] || (e[1] = (a) => l.value = !1)
                })
              ]),
              t("button", E, [
                t("div", {
                  class: "i-la-trash-alt",
                  onClick: e[2] || (e[2] = (a) => {
                    s.value = null, l.value = !1;
                  })
                })
              ])
            ]),
            _(t("input", {
              class: "text-sm p-4 my-4 dark-bg-dark-200",
              ref_key: "input",
              ref: n,
              "onUpdate:modelValue": e[3] || (e[3] = (a) => s.value = a),
              type: "url",
              placeholder: "Paste a URL"
            }, null, 512), [
              [C, s.value]
            ])
          ])
        ]),
        _: 1
      }, 8, ["open"])
    ]));
  }
}, D = /* @__PURE__ */ y(U, [["__scopeId", "data-v-d9417bae"]]);
export {
  D as default
};
//# sourceMappingURL=FormLink-8rMaqDUi.js.map
