@indielayer/ui/lib/components/radio/Radio.vue2.js

Indielayer UI Components with Tailwind CSS build for Vue 3

import { defineComponent as D, ref as M, computed as P, unref as s, openBlock as r, createElementBlock as d, normalizeStyle as T, normalizeClass as o, withKeys as H, withModifiers as L, createElementVNode as t, withDirectives as O, mergeProps as U, toHandlers as X, vModelRadio as j, createBlock as g, toDisplayString as A, createCommentVNode as f, renderSlot as J } from "vue";
import { useCommon as w } from "../../composables/useCommon.js";
import { useTheme as Q } from "../../composables/useTheme.js";
import { useColors as W } from "../../composables/useColors.js";
import { useInteractive as V } from "../../composables/useInteractive.js";
import { useInputtable as c } from "../../composables/useInputtable.js";
import Y from "../spinner/Spinner.vue.js";
import Z from "../inputFooter/InputFooter.vue.js";
const _ = ["aria-selected", "aria-disabled", "onKeypress"], x = ["id", "name", "required", "disabled"], ee = ["textContent"], le = {
  ...w.props(),
  ...W.props("primary"),
  ...V.props(),
  ...c.props(),
  value: [String, Number],
  glow: Boolean
}, se = {
  name: "XRadio",
  validators: {
    ...w.validators()
  }
}, me = /* @__PURE__ */ D({
  ...se,
  props: le,
  emits: c.emits(!1),
  setup(h, { expose: k, emit: I }) {
    const l = h, u = I, v = M(null), { focus: b, blur: C } = V(v), {
      errorInternal: $,
      hideFooterInternal: z,
      isInsideForm: B,
      isInsideFormGroup: m,
      isFirstValidation: R,
      formGroup: p,
      reset: F,
      validate: y,
      setError: N
    } = c(l, { focus: b, emit: u, withListeners: !1 }), i = P({
      get() {
        const e = s(p.value);
        return m ? e === l.value : l.value === l.modelValue;
      },
      set() {
        u("update:modelValue", l.value), p.setValue(l.value);
      }
    });
    function S() {
      u("update:modelValue", l.value), p.setValue(l.value);
    }
    const q = {
      input: () => {
        m || setTimeout(() => {
          l.validateOnInput && !R.value && y(l.modelValue);
        }, 0);
      }
    }, { styles: E, classes: a, className: G } = Q("Radio", {}, l, { selected: i, isInsideForm: B, isInsideFormGroup: m });
    return k({ focus: b, blur: C, reset: F, validate: y, setError: N }), (e, n) => (r(), d("label", {
      ref_key: "elRef",
      ref: v,
      tabindex: "0",
      "aria-selected": i.value ? "true" : "false",
      "aria-disabled": e.disabled || e.loading ? "true" : void 0,
      style: T(s(E)),
      class: o([
        s(G),
        s(a).wrapper
      ]),
      onKeypress: H(L(S, ["prevent", "stop"]), ["space"])
    }, [
      t("div", {
        class: o(["flex items-center", { "cursor-not-allowed": e.disabled }])
      }, [
        O(t("input", U({
          id: e.id,
          "onUpdate:modelValue": n[0] || (n[0] = (K) => i.value = K),
          name: e.name,
          required: e.required,
          disabled: e.disabled || e.loading,
          type: "radio",
          class: "invisible absolute"
        }, X(q, !0)), null, 16, x), [
          [j, i.value]
        ]),
        t("div", {
          class: o([
            e.$style.radio,
            s(a).circle,
            [e.glow && !e.disabled && !e.loading ? e.$style["radio--glow"] : ""]
          ])
        }, [
          e.loading ? (r(), g(Y, {
            key: 0,
            size: e.size,
            class: "absolute"
          }, null, 8, ["size"])) : (r(), d("svg", {
            key: 1,
            viewBox: "0 0 20 20",
            class: o(["fill-current w-full", [
              s(a).circleIcon,
              e.$style.radio_circle
            ]])
          }, n[1] || (n[1] = [
            t("circle", {
              cx: "10",
              cy: "10",
              r: "10"
            }, null, -1)
          ]), 2))
        ], 2),
        t("div", null, [
          e.label ? (r(), d("div", {
            key: 0,
            class: o(s(a).label),
            textContent: A(e.label)
          }, null, 10, ee)) : f("", !0),
          e.$slots.default ? (r(), d("div", {
            key: 1,
            class: o(s(a).content)
          }, [
            J(e.$slots, "default")
          ], 2)) : f("", !0)
        ])
      ], 2),
      s(z) ? f("", !0) : (r(), g(Z, {
        key: 0,
        error: s($),
        helper: e.helper
      }, null, 8, ["error", "helper"]))
    ], 46, _));
  }
});
export {
  me as default
};