@indielayer/ui/lib/components/checkbox/Checkbox.vue2.js

Indielayer UI Components with Tailwind CSS build for Vue 3

import { defineComponent as T, ref as w, watch as m, unref as r, openBlock as o, createElementBlock as d, normalizeStyle as H, normalizeClass as t, createElementVNode as p, withKeys as O, withModifiers as U, withDirectives as X, mergeProps as j, toHandlers as J, vModelCheckbox as Q, createBlock as V, renderSlot as C, toDisplayString as W, createCommentVNode as I } from "vue";
import { useColors as Y } from "../../composables/useColors.js";
import { useCommon as z } from "../../composables/useCommon.js";
import { useInputtable as f } from "../../composables/useInputtable.js";
import { useInteractive as A } from "../../composables/useInteractive.js";
import { useTheme as Z } from "../../composables/useTheme.js";
import x from "../inputFooter/InputFooter.vue.js";
import _ from "../spinner/Spinner.vue.js";
const ee = ["onKeypress"], le = ["id", "name", "aria-checked", "aria-disabled", "disabled", "required"], se = ["textContent"], ae = {
  ...z.props(),
  ...Y.props("primary"),
  ...A.props(),
  ...f.props(),
  value: [String, Number],
  indeterminate: Boolean,
  glow: Boolean
}, re = {
  name: "XCheckbox",
  validators: {
    ...z.validators()
  }
}, ce = /* @__PURE__ */ T({
  ...re,
  props: ae,
  emits: f.emits(!1),
  setup(B, { expose: $, emit: F }) {
    const l = B, v = F, b = w(null), a = w(!1);
    function y() {
      l.disabled || l.loading || l.readonly || (a.value = !a.value);
    }
    const { focus: h, blur: G } = A(b), {
      errorInternal: N,
      hideFooterInternal: S,
      isInsideForm: q,
      isInsideFormGroup: c,
      isFirstValidation: E,
      formGroup: i,
      reset: K,
      validate: k,
      setError: L
    } = f(l, { focus: h, emit: v, withListeners: !1 });
    c ? (m(() => i.value, () => {
      const e = r(i.value);
      e && Array.isArray(e) && e.includes(l.value) ? a.value = !0 : a.value = !1;
    }, { immediate: !0, deep: !0 }), m(() => a.value, (e) => {
      if (!l.value)
        return;
      const s = r(i.value);
      if (e)
        if (s && Array.isArray(s)) {
          if (!s.includes(l.value)) {
            const u = [...s, l.value];
            i.setValue(u);
          }
        } else
          i.setValue([l.value]);
      else if (s && Array.isArray(s) && s.includes(l.value)) {
        const u = s.findIndex((R) => R === l.value), g = [...s];
        g.splice(u, 1), i.setValue(g);
      }
    })) : (m(() => l.modelValue, (e) => {
      a.value = !!e;
    }, { immediate: !0 }), m(() => a.value, (e) => {
      v("update:modelValue", e);
    }));
    const M = {
      input: () => {
        c || setTimeout(() => {
          l.validateOnInput && !E.value && k(l.modelValue);
        }, 0);
      }
    }, { styles: D, classes: n, className: P } = Z("Checkbox", {}, l, { checked: a, isInsideForm: q, isInsideFormGroup: c });
    return $({ focus: h, blur: G, toggle: y, reset: K, validate: k, setError: L }), (e, s) => (o(), d("label", {
      style: H(r(D)),
      class: t([
        r(P),
        r(n).wrapper
      ])
    }, [
      p("div", {
        ref_key: "elRef",
        ref: b,
        class: t(r(n).content),
        tabindex: "0",
        onKeypress: O(U(y, ["prevent", "stop"]), ["space"])
      }, [
        X(p("input", j({
          id: e.id,
          "onUpdate:modelValue": s[0] || (s[0] = (u) => a.value = u),
          name: e.name,
          "aria-checked": e.indeterminate ? "mixed" : a.value ? "true" : "false",
          "aria-disabled": e.disabled ? "true" : void 0,
          type: "checkbox",
          class: "invisible absolute",
          disabled: e.disabled || e.loading || e.readonly,
          required: e.required
        }, J(M, !0)), null, 16, le), [
          [Q, a.value]
        ]),
        p("div", {
          class: t([
            r(n).box,
            [e.glow && !e.disabled && !e.loading ? e.$style["checkbox--glow"] : ""]
          ])
        }, [
          e.loading ? (o(), V(_, {
            key: 0,
            size: e.size,
            class: "absolute"
          }, null, 8, ["size"])) : e.indeterminate ? (o(), d("span", {
            key: 1,
            name: "check-icon",
            class: t(["w-2/3 h-[1.5px]", [e.disabled ? "bg-secondary-400 dark:bg-secondary-500" : "bg-white"]])
          }, null, 2)) : C(e.$slots, "icon", { key: 2 }, () => [
            (o(), d("svg", {
              viewBox: "0 0 20 20",
              class: t([r(n).icon, { "opacity-0": !a.value }])
            }, s[1] || (s[1] = [
              p("path", { d: "M0 11l2-2 5 5L18 3l2 2L7 18z" }, null, -1)
            ]), 2))
          ])
        ], 2),
        e.label || e.$slots.default ? (o(), d("div", {
          key: 0,
          class: t(r(n).label)
        }, [
          e.label ? (o(), d("span", {
            key: 0,
            textContent: W(e.label)
          }, null, 8, se)) : C(e.$slots, "default", { key: 1 })
        ], 2)) : I("", !0)
      ], 42, ee),
      r(S) ? I("", !0) : (o(), V(x, {
        key: 0,
        error: r(N),
        helper: e.helper
      }, null, 8, ["error", "helper"]))
    ], 6));
  }
});
export {
  ce as default
};