maz-ui/components/MazSwitch.mjs

A standalone components library for Vue.Js 3 & Nuxt.Js 3

import { computed as b, useId as k, defineComponent as V, ref as B, openBlock as r, createElementBlock as i, unref as c, normalizeClass as m, normalizeStyle as z, createElementVNode as f, mergeProps as C, renderSlot as E, createTextVNode as S, toDisplayString as p, createCommentVNode as h } from "vue";
import './assets/MazSwitch.DMLND-p2.css';function $({
  componentName: n,
  providedId: s
}) {
  return b(() => s ?? `${n}-${k().replace(/:/g, "")}`);
}
const I = ["for", "aria-checked"], N = ["id", "name", "checked", "aria-label", "disabled"], D = {
  key: 0,
  class: "m-switch__text"
}, R = /* @__PURE__ */ V({
  inheritAttrs: !1,
  __name: "MazSwitch",
  props: {
    style: { default: void 0 },
    class: { default: void 0 },
    modelValue: { type: Boolean, default: !1 },
    id: { default: void 0 },
    disabled: { type: Boolean, default: !1 },
    name: { default: void 0 },
    label: {},
    color: { default: "primary" },
    error: { type: Boolean },
    success: { type: Boolean },
    warning: { type: Boolean },
    hint: {}
  },
  emits: ["update:model-value", "change", "blur", "focus"],
  setup(n, { emit: s }) {
    const l = n, o = s, d = $({
      componentName: "MazSwitch",
      providedId: l.id
    }), v = b(() => l.color === "theme" ? "var(--maz-color-bg-theme)" : `var(--maz-color-${l.color}-alpha)`);
    function u() {
      o("update:model-value", !l.modelValue), o("change", !l.modelValue);
    }
    const t = B();
    function y(e) {
      ["Space"].includes(e.code) && (e.preventDefault(), u());
    }
    function w(e) {
      var a;
      (a = t.value) == null || a.dispatchEvent(new Event("blur")), o("blur", e);
    }
    function g(e) {
      var a;
      (a = t.value) == null || a.dispatchEvent(new Event("focus")), o("focus", e);
    }
    return (e, a) => (r(), i("label", {
      for: c(d),
      class: m(["m-switch m-reset-css", [{ "--is-disabled": e.disabled }, l.class]]),
      role: "switch",
      style: z([e.style, { "--switch-color": v.value }]),
      "aria-checked": e.modelValue,
      tabindex: "0",
      onBlur: w,
      onFocus: g,
      onKeydown: y
    }, [
      f("input", C({ id: c(d) }, e.$attrs, {
        ref_key: "inputRef",
        ref: t,
        type: "checkbox",
        name: e.name,
        tabindex: "-1",
        checked: e.modelValue,
        "aria-label": e.label,
        disabled: e.disabled,
        class: "m-switch__input",
        onChange: u
      }), null, 16, N),
      a[0] || (a[0] = f(
        "span",
        { class: "m-switch__toggle" },
        null,
        -1
        /* HOISTED */
      )),
      e.$slots.default || e.label || e.hint ? (r(), i("span", D, [
        E(e.$slots, "default", { value: e.modelValue }, () => [
          S(
            p(e.label),
            1
            /* TEXT */
          )
        ]),
        e.hint ? (r(), i(
          "span",
          {
            key: 0,
            class: m(["m-switch__hint", {
              "--error": e.error,
              "--success": e.success,
              "--warning": e.warning
            }])
          },
          p(e.hint),
          3
          /* TEXT, CLASS */
        )) : h("v-if", !0)
      ])) : h("v-if", !0)
    ], 46, I));
  }
});
export {
  R as default
};