aurea-ui/dist/index.js

Vue 3 component library focused on accessibility and design

import { defineComponent as w, computed as b, createElementBlock as i, openBlock as n, normalizeStyle as $, normalizeClass as v, createCommentVNode as g, renderSlot as M, toDisplayString as f, createElementVNode as t, createBlock as R, withDirectives as N, mergeProps as D, vModelDynamic as U, ref as k, reactive as q, watch as A, Fragment as S, renderList as j, createTextVNode as I, withModifiers as E, createVNode as y, onMounted as x, onBeforeUnmount as F } from "vue";
const H = { key: 1 }, C = /* @__PURE__ */ w({
  __name: "AButton",
  props: {
    label: {},
    size: {},
    variant: {},
    icon: {},
    iconRight: {},
    rounded: {},
    backgroundColor: {},
    textColor: {}
  },
  setup(o) {
    const r = o, s = b(() => [
      "a-button",
      `a-button--${r.size || "md"}`,
      `a-button--${r.variant || "primary"}`
    ]), d = b(() => r.backgroundColor || r.textColor ? {
      backgroundColor: r.backgroundColor,
      color: r.textColor
    } : r.variant ? {
      primary: { backgroundColor: "#0a84ff", color: "#ffffff" },
      success: { backgroundColor: "#30d158", color: "#ffffff" },
      warning: { backgroundColor: "#ffd60a", color: "#000000" },
      danger: { backgroundColor: "#ff453a", color: "#ffffff" }
    }[r.variant] : {
      backgroundColor: "#1c1c1e",
      color: "#ffffff"
    });
    return (l, c) => (n(), i("button", {
      class: v(s.value),
      style: $({
        ...d.value,
        borderRadius: r.rounded ? typeof r.rounded == "number" ? `${r.rounded}px` : r.rounded : void 0
      })
    }, [
      r.icon ? (n(), i("i", {
        key: 0,
        class: v([`fa fa-${r.icon}`, "a-button__icon"])
      }, null, 2)) : g("", !0),
      r.label ? (n(), i("span", H, f(r.label), 1)) : M(l.$slots, "default", { key: 2 }),
      r.iconRight ? (n(), i("i", {
        key: 3,
        class: v([`fa fa-${r.iconRight}`, "a-button__icon a-button__icon--right"])
      }, null, 2)) : g("", !0)
    ], 6));
  }
}), Z = ["src", "alt"], K = { class: "a-card__content" }, W = {
  key: 0,
  class: "a-card__subtitle"
}, G = { class: "a-card__description" }, J = /* @__PURE__ */ w({
  __name: "ACard",
  props: {
    title: { type: String, required: !0 },
    subtitle: { type: String, default: "" },
    description: { type: String, required: !0 },
    image: { type: String, default: "" },
    imageAlt: { type: String, default: "" },
    buttonText: { type: String, default: "" },
    buttonBgColor: { type: String, default: "#2563EB" },
    buttonTextColor: { type: String, default: "#ffffff" }
  },
  emits: ["click:action"],
  setup(o, { emit: r }) {
    const s = o, d = r, l = b(() => s.image || ""), c = `a-card-title-${Math.random().toString(36).substring(2, 8)}`;
    return (p, a) => (n(), i("section", {
      class: "a-card",
      role: "region",
      "aria-labelledby": c
    }, [
      o.image ? (n(), i("img", {
        key: 0,
        class: "a-card__image",
        src: l.value,
        alt: o.imageAlt || "Imagem ilustrativa do cartão",
        loading: "lazy"
      }, null, 8, Z)) : g("", !0),
      t("div", K, [
        t("h3", {
          id: c,
          class: "a-card__title"
        }, f(o.title), 1),
        o.subtitle ? (n(), i("p", W, f(o.subtitle), 1)) : g("", !0),
        t("p", G, f(o.description), 1),
        o.buttonText ? (n(), R(C, {
          key: 1,
          class: "a-card__button",
          label: o.buttonText,
          "background-color": o.buttonBgColor,
          "text-color": o.buttonTextColor,
          onClick: a[0] || (a[0] = (e) => d("click:action"))
        }, null, 8, ["label", "background-color", "text-color"])) : g("", !0)
      ])
    ]));
  }
}), V = (o, r) => {
  const s = o.__vccOpts || o;
  for (const [d, l] of r)
    s[d] = l;
  return s;
}, Q = /* @__PURE__ */ V(J, [["__scopeId", "data-v-1ef61e6b"]]), X = { class: "a-input-wrapper" }, Y = { class: "a-input__container" }, ee = ["for"], ae = ["id", "type", "placeholder", "disabled", "readonly", "aria-invalid", "aria-describedby"], oe = ["id"], T = /* @__PURE__ */ w({
  __name: "AInput",
  props: {
    modelValue: {},
    type: {},
    label: {},
    labelColor: {},
    placeholder: {},
    helperText: {},
    error: {},
    size: {},
    iconLeft: {},
    iconRight: {},
    disabled: { type: Boolean },
    readonly: { type: Boolean },
    rounded: {},
    focusColor: {}
  },
  emits: ["update:modelValue"],
  setup(o, { emit: r }) {
    const s = o, d = r, l = b(() => `a-input-${Math.random().toString(36).substr(2, 9)}`), c = b(() => {
      if (s.helperText || s.error)
        return `${l.value}-description`;
    }), p = b(() => [
      "a-input",
      `a-input--${s.size || "md"}`,
      { "a-input--error": s.error, "a-input--disabled": s.disabled }
    ]), a = b({
      get: () => s.modelValue,
      set: (e) => d("update:modelValue", e)
    });
    return (e, u) => (n(), i("div", X, [
      t("div", Y, [
        e.label ? (n(), i("label", {
          key: 0,
          for: l.value,
          class: "a-input__label",
          style: $({ color: e.labelColor || "inherit" })
        }, f(e.label), 13, ee)) : g("", !0),
        t("div", {
          class: v(["a-input__field-wrapper", p.value]),
          style: $({
            "--focus-color": e.focusColor || "#0a84ff",
            borderRadius: e.rounded ? typeof e.rounded == "number" ? `${e.rounded}px` : e.rounded : void 0
          })
        }, [
          e.iconLeft ? (n(), i("i", {
            key: 0,
            class: v(["a-input__icon", "a-input__icon--left", e.iconLeft])
          }, null, 2)) : g("", !0),
          N(t("input", D({ id: l.value }, e.$attrs, {
            type: e.type,
            "onUpdate:modelValue": u[0] || (u[0] = (_) => a.value = _),
            placeholder: e.placeholder,
            disabled: e.disabled,
            readonly: e.readonly,
            "aria-invalid": !!e.error,
            "aria-describedby": c.value,
            class: "a-input__input"
          }), null, 16, ae), [
            [U, a.value]
          ]),
          e.iconRight ? (n(), i("i", {
            key: 1,
            class: v(["a-input__icon", "a-input__icon--right", e.iconRight])
          }, null, 2)) : g("", !0)
        ], 6),
        e.helperText || e.error ? (n(), i("div", {
          key: 1,
          id: `${l.value}-description`,
          class: v(["a-input__helper", { "a-input__helper--error": e.error }])
        }, f(e.error || e.helperText), 11, oe)) : g("", !0)
      ])
    ]));
  }
}), le = { class: "sr-only" }, te = /* @__PURE__ */ w({
  __name: "AInstructPassword",
  props: {
    modelValue: { type: Boolean },
    password: {},
    orientation: {}
  },
  emits: ["update:modelValue"],
  setup(o, { emit: r }) {
    const s = o, d = r, l = k(!0), c = q([
      {
        description: "Maiúscula",
        computed: b(() => /[A-Z]/.test(s.password))
      },
      {
        description: "Minúscula",
        computed: b(() => /[a-z]/.test(s.password))
      },
      {
        description: "Número",
        computed: b(() => /\d/.test(s.password))
      },
      {
        description: "Caractere especial",
        computed: b(() => /[^A-Za-z0-9]/.test(s.password))
      },
      {
        description: "8 caracteres",
        computed: b(() => s.password.length >= 8)
      }
    ]), p = b(() => c.every((a) => a.computed));
    return A(
      () => s.password,
      () => {
        p.value ? setTimeout(() => {
          l.value = !1;
        }, 300) : l.value = !0, d("update:modelValue", p.value);
      }
    ), (a, e) => a.password && l.value ? (n(), i("ul", {
      key: 0,
      class: v(["a-input__rules", [
        "a-input__rules--visible",
        a.orientation === "horizontal" ? "a-input__rules--horizontal" : "a-input__rules--vertical"
      ]]),
      role: "status",
      "aria-live": "polite"
    }, [
      (n(!0), i(S, null, j(c, (u, _) => (n(), i("li", {
        key: _,
        class: v({ "a-input__rule--passed": u.computed }),
        "aria-atomic": !0
      }, [
        t("i", {
          class: v(u.computed ? "fa fa-check" : "fa fa-times"),
          "aria-hidden": "true"
        }, null, 2),
        I(" " + f(u.description) + " ", 1),
        t("span", le, f(u.computed ? "atendida" : "não atendida"), 1)
      ], 2))), 128))
    ], 2)) : g("", !0);
  }
}), se = /* @__PURE__ */ V(te, [["__scopeId", "data-v-e653959d"]]), re = { class: "a-input-wrapper" }, ne = ["type", "value", "placeholder", "aria-invalid"], ie = ["aria-label", "title"], de = { class: "sr-only" }, ue = ["for"], ce = ["id", "type", "placeholder", "aria-invalid"], pe = ["aria-label"], fe = { class: "sr-only" }, me = {
  key: 4,
  class: "a-input__helper a-input__helper--error"
}, be = {
  key: 5,
  class: "a-input__helper"
}, ve = /* @__PURE__ */ w({
  __name: "AInputPassword",
  props: {
    modelValue: {},
    validatePassword: { type: Boolean },
    confirmPassword: { type: Boolean },
    label: {},
    confirmLabel: {},
    placeholder: {},
    confirmPlaceholder: {},
    helperText: {},
    orientation: {},
    error: {},
    focusColor: {},
    labelColor: {}
  },
  emits: ["update:modelValue", "passwordValidated"],
  setup(o, { emit: r }) {
    const s = o, d = r, l = k(s.modelValue), c = k(""), p = k(!1), a = k(!1), e = k(!1), u = b(
      () => s.confirmPassword ? c.value !== l.value : !1
    ), _ = `a-input-password-${Math.random().toString(36).substring(2, 8)}`, L = (m) => {
      l.value = m, d("update:modelValue", m);
    };
    A(
      [l, c],
      () => {
        const m = s.validatePassword ? p.value : !0, h = s.confirmPassword ? c.value === l.value : !0;
        d("passwordValidated", m && h);
      },
      { flush: "post" }
    );
    const O = b(() => ({
      "a-input--error": u.value
    }));
    return (m, h) => (n(), i("div", re, [
      m.label ? (n(), i("label", {
        key: 0,
        for: _,
        class: "a-input__label",
        style: $({ color: m.labelColor || "inherit" })
      }, f(m.label), 5)) : g("", !0),
      t("div", {
        class: v(["a-input__field-wrapper", O.value]),
        style: $({ "--focus-color": m.focusColor || "#0a84ff" })
      }, [
        t("input", {
          id: _,
          type: a.value ? "text" : "password",
          class: "a-input__input",
          value: l.value,
          onInput: h[0] || (h[0] = (P) => {
            var z;
            return L(((z = P.target) == null ? void 0 : z.value) || "");
          }),
          placeholder: m.placeholder,
          "aria-invalid": m.error ? "true" : "false"
        }, null, 40, ne),
        t("button", {
          type: "button",
          class: "a-input__toggle-visibility",
          onClick: h[1] || (h[1] = (P) => a.value = !a.value),
          "aria-label": a.value ? "Ocultar senha" : "Mostrar senha",
          title: a.value ? "Ocultar senha" : "Mostrar senha",
          role: "button"
        }, [
          t("i", {
            class: v(a.value ? "fa fa-eye-slash" : "fa fa-eye"),
            "aria-hidden": "true"
          }, null, 2),
          t("span", de, f(a.value ? "Ocultar senha" : "Mostrar senha"), 1)
        ], 8, ie)
      ], 6),
      m.validatePassword ? (n(), R(se, {
        key: 1,
        modelValue: p.value,
        "onUpdate:modelValue": h[2] || (h[2] = (P) => p.value = P),
        password: l.value,
        orientation: m.orientation
      }, null, 8, ["modelValue", "password", "orientation"])) : g("", !0),
      m.confirmPassword && m.confirmLabel ? (n(), i("label", {
        key: 2,
        class: "a-input__label a-input__label--confirm",
        style: $({ color: m.labelColor || "inherit" }),
        for: `${_}-confirm`
      }, f(m.confirmLabel), 13, ue)) : g("", !0),
      m.confirmPassword ? (n(), i("div", {
        key: 3,
        class: v(["a-input__field-wrapper", { "a-input--error": u.value }])
      }, [
        N(t("input", {
          id: `${_}-confirm`,
          type: e.value ? "text" : "password",
          class: "a-input__input",
          "onUpdate:modelValue": h[3] || (h[3] = (P) => c.value = P),
          placeholder: m.confirmPlaceholder || "Confirme a senha",
          "aria-invalid": u.value ? "true" : "false"
        }, null, 8, ce), [
          [U, c.value]
        ]),
        t("button", {
          type: "button",
          class: "a-input__toggle-visibility",
          onClick: h[4] || (h[4] = (P) => e.value = !e.value),
          "aria-label": e.value ? "Ocultar senha" : "Mostrar senha",
          title: "Alternar visibilidade da senha",
          role: "button"
        }, [
          t("i", {
            class: v(e.value ? "fa fa-eye-slash" : "fa fa-eye"),
            "aria-hidden": "true"
          }, null, 2),
          t("span", fe, f(e.value ? "Ocultar senha" : "Mostrar senha"), 1)
        ], 8, pe)
      ], 2)) : g("", !0),
      u.value ? (n(), i("div", me, " As senhas devem ser iguais. ")) : m.helperText ? (n(), i("div", be, f(m.helperText), 1)) : g("", !0)
    ]));
  }
}), B = /* @__PURE__ */ V(ve, [["__scopeId", "data-v-4f32d24c"]]), ge = {
  key: 0,
  class: "a-loading__overlay"
}, _e = /* @__PURE__ */ w({
  __name: "ALoading",
  props: {
    size: {},
    color: {},
    thickness: {},
    blurBackground: { type: Boolean }
  },
  setup(o) {
    const r = o, s = b(() => ({
      width: `${r.size ?? 36}px`,
      height: `${r.size ?? 36}px`,
      borderTopColor: r.color || "#1c1c1e",
      borderWidth: `${r.thickness ?? 4}px`
    }));
    return (d, l) => r.blurBackground ? (n(), i("div", ge, [
      t("div", {
        class: "a-loading",
        style: $(s.value),
        "aria-label": "Carregando",
        role: "status"
      }, null, 4)
    ])) : (n(), i("div", {
      key: 1,
      class: "a-loading",
      style: $(s.value),
      "aria-label": "Carregando",
      role: "status"
    }, null, 4));
  }
}), he = /* @__PURE__ */ V(_e, [["__scopeId", "data-v-2e5fec13"]]), ye = { class: "a-login__title" }, ke = { class: "a-login__field" }, we = { class: "a-login__field" }, $e = { class: "a-login__footer" }, Ce = { class: "a-login__buttons" }, Ve = { class: "a-login__links" }, Ae = /* @__PURE__ */ w({
  __name: "ALogin",
  props: {
    title: {},
    username: {},
    password: {},
    usernameLabel: {},
    passwordLabel: {},
    usernamePlaceholder: {},
    passwordPlaceholder: {},
    loginText: {},
    signupText: {},
    forgotText: {}
  },
  emits: ["login", "signup", "forgot", "update:username", "update:password"],
  setup(o, { emit: r }) {
    const s = o, d = r, l = k(s.username ?? ""), c = k(s.password ?? "");
    A(
      () => s.username,
      (a) => {
        a !== l.value && (l.value = a || "");
      }
    ), A(
      () => s.password,
      (a) => {
        a !== c.value && (c.value = a || "");
      }
    ), A(l, (a) => d("update:username", a)), A(c, (a) => d("update:password", a));
    function p() {
      d("login", {
        username: l.value,
        password: c.value
      });
    }
    return (a, e) => (n(), i("form", {
      class: "a-login",
      onSubmit: E(p, ["prevent"])
    }, [
      t("h2", ye, f(a.title), 1),
      t("div", ke, [
        y(T, {
          modelValue: l.value,
          "onUpdate:modelValue": e[0] || (e[0] = (u) => l.value = u),
          label: a.usernameLabel,
          placeholder: a.usernamePlaceholder,
          "icon-left": "fa fa-user"
        }, null, 8, ["modelValue", "label", "placeholder"])
      ]),
      t("div", we, [
        y(B, {
          modelValue: c.value,
          "onUpdate:modelValue": e[1] || (e[1] = (u) => c.value = u),
          label: a.passwordLabel,
          placeholder: a.passwordPlaceholder,
          "icon-left": "fa fa-lock"
        }, null, 8, ["modelValue", "label", "placeholder"])
      ]),
      t("div", $e, [
        t("div", Ce, [
          y(C, {
            type: "submit",
            label: a.loginText,
            "background-color": "#616161",
            "text-color": "#ffffff"
          }, null, 8, ["label"]),
          y(C, {
            label: a.signupText,
            onClick: e[2] || (e[2] = (u) => d("signup")),
            "background-color": "#616161",
            "text-color": "#ffffff"
          }, null, 8, ["label"])
        ]),
        t("div", Ve, [
          y(C, {
            label: a.forgotText,
            onClick: e[3] || (e[3] = (u) => d("forgot")),
            "background-color": "transparent",
            "text-color": "#ffffff"
          }, null, 8, ["label"])
        ])
      ])
    ], 32));
  }
}), Pe = /* @__PURE__ */ V(Ae, [["__scopeId", "data-v-299ece74"]]), Te = { class: "a-modal__text" }, Le = { class: "a-modal__actions" }, Se = /* @__PURE__ */ w({
  __name: "AModal",
  props: {
    show: { type: Boolean, required: !0 },
    title: { type: String, default: "Cookie Policy" },
    message: { type: String, default: "" },
    acceptText: { type: String, default: "Accept" },
    rejectText: { type: String, default: "Reject" },
    acceptBgColor: { type: String, default: "#222" },
    rejectBgColor: { type: String, default: "#ececec" },
    acceptTextColor: { type: String, default: "#fff" },
    rejectTextColor: { type: String, default: "#222" },
    size: {
      type: String,
      default: "md",
      validator: (o) => ["sm", "md", "lg"].includes(o)
    }
  },
  emits: ["accept", "reject", "close"],
  setup(o, { emit: r }) {
    const s = o, d = r, l = b(() => ({
      "a-modal--sm": s.size === "sm",
      "a-modal--md": s.size === "md",
      "a-modal--lg": s.size === "lg"
    })), c = `a-modal-title-${Math.random().toString(36).substring(2, 8)}`;
    function p(a) {
      a.key === "Escape" && d("close");
    }
    return x(() => {
      window.addEventListener("keydown", p);
    }), F(() => {
      window.removeEventListener("keydown", p);
    }), (a, e) => o.show ? (n(), i("div", {
      key: 0,
      class: "a-modal",
      role: "dialog",
      "aria-modal": "true",
      "aria-labelledby": c
    }, [
      t("div", {
        class: v(["a-modal__content", l.value])
      }, [
        t("button", {
          class: "a-modal__close",
          "aria-label": "Fechar",
          onClick: e[0] || (e[0] = (u) => d("close"))
        }, e[3] || (e[3] = [
          t("i", {
            class: "fa fa-times a-modal__icon",
            "aria-hidden": "true"
          }, null, -1)
        ])),
        t("h2", {
          class: "a-modal__title",
          id: c
        }, f(o.title), 1),
        t("p", Te, [
          M(a.$slots, "default", {}, () => [
            I(f(o.message), 1)
          ], !0)
        ]),
        t("div", Le, [
          y(C, {
            class: "a-modal__button",
            label: o.acceptText,
            "background-color": o.acceptBgColor,
            "text-color": o.acceptTextColor,
            onClick: e[1] || (e[1] = (u) => d("accept"))
          }, null, 8, ["label", "background-color", "text-color"]),
          y(C, {
            class: "a-modal__button",
            label: o.rejectText,
            "background-color": o.rejectBgColor,
            "text-color": o.rejectTextColor,
            onClick: e[2] || (e[2] = (u) => d("reject"))
          }, null, 8, ["label", "background-color", "text-color"])
        ])
      ], 2)
    ])) : g("", !0);
  }
}), Ie = /* @__PURE__ */ V(Se, [["__scopeId", "data-v-fbf6e88f"]]), Be = { class: "a-navbar__container" }, ze = { class: "a-navbar__logo" }, Me = ["src", "alt"], Re = ["aria-expanded", "aria-label"], Ne = ["href"], Ue = { class: "a-navbar__item a-navbar__auth" }, je = ["aria-label", "title"], Ee = ["aria-label", "title"], Oe = /* @__PURE__ */ w({
  __name: "ANavbar",
  props: {
    logo: {},
    logoImage: {},
    logoAlt: {},
    items: {},
    isAuthenticated: { type: Boolean },
    loginText: {},
    logoutText: {},
    linkColor: {},
    linkHoverColor: {}
  },
  emits: ["logout", "login"],
  setup(o, { emit: r }) {
    const s = o, d = r, l = k(!1), c = () => d("logout"), p = () => d("login"), a = b(() => ({
      "--link-color": s.linkColor || "#1c1c1e",
      "--link-hover-color": s.linkHoverColor || "#0a84ff"
    }));
    return (e, u) => (n(), i("nav", {
      class: "a-navbar",
      role: "navigation",
      "aria-label": "Main Navigation",
      style: $(a.value)
    }, [
      t("div", Be, [
        t("div", ze, [
          e.logoImage ? (n(), i("img", {
            key: 0,
            src: e.logoImage,
            alt: e.logoAlt || "Logo",
            class: "a-navbar__logo-img"
          }, null, 8, Me)) : (n(), i(S, { key: 1 }, [
            I(f(e.logo), 1)
          ], 64))
        ]),
        t("button", {
          class: "a-navbar__toggle",
          onClick: u[0] || (u[0] = (_) => l.value = !l.value),
          "aria-expanded": l.value,
          "aria-controls": "a-navbar-items",
          "aria-label": l.value ? "Fechar menu" : "Abrir menu"
        }, [
          t("i", {
            class: v(l.value ? "fa fa-times" : "fa fa-bars"),
            "aria-hidden": "true"
          }, null, 2)
        ], 8, Re),
        t("ul", {
          id: "a-navbar-items",
          class: v(["a-navbar__items", { "a-navbar__items--open": l.value }])
        }, [
          (n(!0), i(S, null, j(e.items, (_, L) => (n(), i("li", {
            key: L,
            class: "a-navbar__item"
          }, [
            t("a", {
              href: _.href,
              class: "a-navbar__link"
            }, f(_.label), 9, Ne)
          ]))), 128)),
          t("li", Ue, [
            e.isAuthenticated ? (n(), i("button", {
              key: 1,
              class: "a-navbar__link a-navbar__link--auth",
              onClick: c,
              "aria-label": e.logoutText,
              title: e.logoutText
            }, f(e.logoutText), 9, Ee)) : (n(), i("button", {
              key: 0,
              class: "a-navbar__link a-navbar__link--auth",
              onClick: p,
              "aria-label": e.loginText,
              title: e.loginText
            }, f(e.loginText), 9, je))
          ])
        ], 2)
      ])
    ], 4));
  }
}), De = /* @__PURE__ */ V(Oe, [["__scopeId", "data-v-bd91fbd1"]]), qe = {
  class: "a-notification__icon",
  "aria-hidden": "true"
}, xe = { class: "a-notification__message" }, Fe = /* @__PURE__ */ w({
  __name: "ANotification",
  props: {
    message: { type: String, required: !0 },
    type: {
      type: String,
      default: "error",
      validator: (o) => ["error", "success", "warning"].includes(o)
    }
  },
  emits: ["close"],
  setup(o, { emit: r }) {
    const s = o, d = r, l = b(() => {
      switch (s.type) {
        case "success":
          return "fa fa-circle-check";
        case "warning":
          return "fa fa-triangle-exclamation";
        default:
          return "fa fa-circle-xmark";
      }
    });
    return (c, p) => (n(), i("div", {
      class: v(["a-notification", o.type]),
      role: "alert"
    }, [
      t("div", qe, [
        t("i", {
          class: v(["a-notification__fa-icon", l.value])
        }, null, 2)
      ]),
      t("div", xe, f(o.message), 1),
      t("button", {
        class: "a-notification__close",
        onClick: p[0] || (p[0] = (a) => d("close")),
        "aria-label": "Fechar notificação"
      }, p[1] || (p[1] = [
        t("i", { class: "fa fa-xmark" }, null, -1)
      ]))
    ], 2));
  }
}), He = /* @__PURE__ */ V(Fe, [["__scopeId", "data-v-a67aca53"]]), Ze = { class: "a-register__title" }, Ke = { class: "a-register__field" }, We = { class: "a-register__field" }, Ge = { class: "a-register__field" }, Je = { class: "a-register__footer" }, Qe = { class: "a-register__buttons" }, Xe = /* @__PURE__ */ w({
  __name: "ARegister",
  props: {
    modelValue: {},
    title: {},
    nameLabel: {},
    emailLabel: {},
    passwordLabel: {},
    namePlaceholder: {},
    emailPlaceholder: {},
    passwordPlaceholder: {},
    confirmPasswordLabel: {},
    confirmPasswordPlaceholder: {},
    registerText: {},
    backToLoginText: {},
    showConfirmPassword: { type: Boolean }
  },
  emits: ["update:modelValue", "register", "back"],
  setup(o, { emit: r }) {
    const s = o, d = r, l = k({ ...s.modelValue }), c = k(!1);
    A(
      () => s.modelValue,
      (a) => {
        a && (l.value = { ...a });
      },
      { deep: !0 }
    ), A(l, (a) => d("update:modelValue", a), { deep: !0 });
    function p() {
      c.value && d("register", { ...l.value });
    }
    return (a, e) => (n(), i("form", {
      class: "a-register",
      onSubmit: E(p, ["prevent"])
    }, [
      t("h2", Ze, f(a.title), 1),
      t("div", Ke, [
        y(T, {
          modelValue: l.value.name,
          "onUpdate:modelValue": e[0] || (e[0] = (u) => l.value.name = u),
          label: a.nameLabel,
          placeholder: a.namePlaceholder,
          "icon-left": "fa fa-user"
        }, null, 8, ["modelValue", "label", "placeholder"])
      ]),
      t("div", We, [
        y(T, {
          modelValue: l.value.email,
          "onUpdate:modelValue": e[1] || (e[1] = (u) => l.value.email = u),
          label: a.emailLabel,
          placeholder: a.emailPlaceholder,
          "icon-left": "fa fa-envelope"
        }, null, 8, ["modelValue", "label", "placeholder"])
      ]),
      t("div", Ge, [
        y(B, {
          modelValue: l.value.password,
          "onUpdate:modelValue": e[2] || (e[2] = (u) => l.value.password = u),
          label: a.passwordLabel,
          placeholder: a.passwordPlaceholder,
          "icon-left": "fa fa-lock",
          "validate-password": !0,
          "confirm-password": a.showConfirmPassword,
          confirmLabel: a.confirmPasswordLabel,
          confirmPlaceholder: a.confirmPasswordPlaceholder,
          onPasswordValidated: e[3] || (e[3] = (u) => c.value = u)
        }, null, 8, ["modelValue", "label", "placeholder", "confirm-password", "confirmLabel", "confirmPlaceholder"])
      ]),
      t("div", Je, [
        t("div", Qe, [
          y(C, {
            type: "submit",
            label: a.registerText,
            "background-color": "#616161",
            "text-color": "#ffffff"
          }, null, 8, ["label"]),
          y(C, {
            label: a.backToLoginText,
            onClick: e[4] || (e[4] = (u) => d("back")),
            "background-color": "#616161",
            "text-color": "#ffffff"
          }, null, 8, ["label"])
        ])
      ])
    ], 32));
  }
}), Ye = /* @__PURE__ */ V(Xe, [["__scopeId", "data-v-23f83103"]]), aa = {
  install(o) {
    o.component("AButton", C), o.component("ACard", Q), o.component("AInput", T), o.component("AInputPassword", B), o.component("ALoading", he), o.component("ALogin", Pe), o.component("AModal", Ie), o.component("ANavbar", De), o.component("ANotification", He), o.component("ARegister", Ye);
  }
};
export {
  C as AButton,
  Q as ACard,
  T as AInput,
  B as AInputPassword,
  he as ALoading,
  Pe as ALogin,
  Ie as AModal,
  De as ANavbar,
  He as ANotification,
  Ye as ARegister,
  aa as default
};