@indielayer/ui/lib/components/toggle/Toggle.vue.js

Indielayer UI Components with Tailwind CSS build for Vue 3

import { defineComponent as T, ref as $, computed as D, openBlock as d, createElementBlock as b, normalizeClass as l, unref as r, createElementVNode as a, normalizeStyle as R, withDirectives as S, vModelCheckbox as F, toDisplayString as L, createCommentVNode as t, createBlock as g } from "vue";
import { useTheme as M } from "../../composables/useTheme.js";
import { useCommon as f } from "../../composables/useCommon.js";
import { useColors as P } from "../../composables/useColors.js";
import { useInputtable as i } from "../../composables/useInputtable.js";
import { useInteractive as v } from "../../composables/useInteractive.js";
import U from "../spinner/Spinner.vue.js";
import W from "../inputFooter/InputFooter.vue.js";
const X = { class: "flex items-center" }, j = ["id", "aria-checked", "aria-disabled", "disabled", "name", "required", "value"], A = ["textContent"], G = {
  ...f.props(),
  ...P.props("primary"),
  ...v.props(),
  ...i.props(),
  glow: Boolean
}, H = {
  name: "XToggle",
  validators: {
    ...f.validators()
  }
}, ee = /* @__PURE__ */ T({
  ...H,
  props: G,
  emits: i.emits(!1),
  setup(h, { expose: k, emit: y }) {
    const n = h, u = y, m = $(null), o = D({
      get() {
        return !!n.modelValue;
      },
      set(e) {
        u("update:modelValue", e);
      }
    }), { focus: p, blur: w } = v(m), {
      errorInternal: C,
      hideFooterInternal: V,
      reset: z,
      validate: B,
      setError: I
    } = i(n, { focus: p, emit: u, withListeners: !1 }), { styles: q, classes: s, className: E } = M("Toggle", {}, n);
    return k({ focus: p, blur: w, reset: z, validate: B, setError: I }), (e, c) => (d(), b("label", {
      class: l(["inline-block", [
        r(E),
        r(s).wrapper,
        e.disabled ? "cursor-not-allowed" : "cursor-pointer"
      ]])
    }, [
      a("div", X, [
        a("div", {
          class: l(["flex items-center rounded-full transition-colors duration-300 border-[3px] shrink-0 !border-transparent", {
            [`shadow-lg shadow-${e.color}-500/50`]: e.glow && e.modelValue,
            "bg-secondary-300 dark:bg-secondary-500": !e.disabled && !o.value && !e.loading,
            "bg-secondary-100 dark:bg-secondary-700": e.disabled || e.loading,
            "bg-[color:var(--x-toggle-bg)] dark:bg-[color:var(--x-toggle-dark-bg)]": !e.disabled && o.value
          }]),
          style: R(r(q))
        }, [
          a("div", {
            class: l(r(s).buttonWrapper)
          }, [
            S(a("input", {
              id: e.id,
              ref_key: "elRef",
              ref: m,
              "onUpdate:modelValue": c[0] || (c[0] = (N) => o.value = N),
              "aria-checked": o.value ? "true" : "false",
              "aria-disabled": e.disabled ? "true" : void 0,
              type: "checkbox",
              class: "hidden",
              disabled: e.disabled || e.loading,
              name: e.name,
              required: e.required,
              value: e.modelValue
            }, null, 8, j), [
              [F, o.value]
            ]),
            a("div", {
              class: l([
                r(s).button,
                {
                  "translate-x-full": o.value,
                  shadow: !e.disabled
                },
                e.disabled ? "bg-secondary-50 dark:bg-secondary-800" : "bg-white dark:bg-secondary-800"
              ])
            }, null, 2)
          ], 2)
        ], 6),
        e.label ? (d(), b("span", {
          key: 0,
          class: l(["ml-2", r(s).label]),
          textContent: L(e.label)
        }, null, 10, A)) : t("", !0),
        e.loading ? (d(), g(U, {
          key: 1,
          size: e.size,
          class: "ml-1"
        }, null, 8, ["size"])) : t("", !0)
      ]),
      r(V) ? t("", !0) : (d(), g(W, {
        key: 0,
        error: r(C),
        helper: e.helper
      }, null, 8, ["error", "helper"]))
    ], 2));
  }
});
export {
  ee as default
};