@aotearoan/neon/dist/components/user-input/toggle/NeonToggle.vue.es.js

Neon is a lightweight design library of Vue 3 components with minimal dependencies.

import m from "./NeonToggle.es.js";
import { resolveComponent as k, openBlock as n, createElementBlock as o, normalizeClass as t, Fragment as i, renderList as y, createElementVNode as r, withKeys as g, withModifiers as h, mergeProps as b, createCommentVNode as d, renderSlot as u, createBlock as _, toDisplayString as f } from "vue";
import $ from "../../../_virtual/_plugin-vue_export-helper.es.js";
const v = ["aria-checked", "aria-disabled", "tabindex", "onKeydown"], p = ["checked", "disabled", "name", "value", "onClick"], w = {
  key: 0,
  class: "neon-toggle__radio-button"
}, C = {
  key: 0,
  class: "neon-toggle__radio-button-indicator"
}, V = { key: 1 }, S = {
  key: 0,
  class: "neon-toggle__additional-content"
};
function N(e, z, B, K, T, E) {
  const c = k("neon-icon");
  return n(), o("div", {
    class: t([[
      `neon-toggle--${e.toggleStyle}`,
      `neon-toggle--${e.disabled ? "low-contrast" : e.color}`,
      `neon-toggle--${e.orientation}`,
      `neon-toggle--${e.size}`,
      { "neon-toggle--disabled": e.disabled }
    ], "neon-toggle"]),
    role: "radiogroup"
  }, [
    (n(!0), o(i, null, y(e.model, (l, a) => (n(), o(i, {
      key: l.key
    }, [
      r("label", {
        "aria-checked": l.key === e.modelValue,
        "aria-disabled": e.disabled || l.disabled,
        class: t([{
          "neon-toggle__label--disabled": e.disabled || l.disabled,
          "neon-toggle__label--checked": l.key === e.modelValue,
          "neon-toggle__label--with-icon": l.icon,
          "neon-toggle__label--with-slot-override": e.slots.option
        }, "neon-toggle__label no-style"]),
        tabindex: !e.disabled && !l.disabled ? 0 : void 0,
        role: "radio",
        onKeydown: [
          g((s) => e.selectOption(l), ["enter"]),
          g(h((s) => e.selectOption(l), ["prevent"]), ["space"])
        ]
      }, [
        r("input", b({
          checked: l.key === e.modelValue,
          disabled: e.disabled || l.disabled,
          name: e.name,
          tabindex: -1,
          value: l.key,
          class: "neon-toggle__input",
          type: "radio"
        }, { ref_for: !0 }, e.sanitizedAttributes, {
          onClick: (s) => e.onInput(l)
        }), null, 16, p),
        e.toggleStyle !== e.NeonToggleStyle.Toggle ? (n(), o("div", w, [
          l.key === e.modelValue ? (n(), o("div", C)) : d("", !0)
        ])) : d("", !0),
        u(e.$slots, "option", {
          index: a,
          option: l
        }, () => [
          l.icon ? (n(), _(c, {
            key: 0,
            disabled: e.disabled || l.disabled,
            name: l.icon
          }, null, 8, ["disabled", "name"])) : d("", !0),
          l.label ? (n(), o("span", V, f(l.label), 1)) : d("", !0)
        ])
      ], 42, v),
      e.slots.additionalContent ? (n(), o("div", S, [
        u(e.$slots, "additionalContent", b({ ref_for: !0 }, { option: l, index: a }))
      ])) : d("", !0)
    ], 64))), 128))
  ], 2);
}
const F = /* @__PURE__ */ $(m, [["render", N]]);
export {
  F as default
};
//# sourceMappingURL=NeonToggle.vue.es.js.map