vue-amazing-ui/es/radio/Radio.vue2.js

An Amazing Vue3 UI Components Library, Using TypeScript.

import { defineComponent as j, ref as h, computed as A, watchEffect as B, createElementBlock as l, openBlock as t, mergeProps as g, unref as k, Fragment as $, renderList as z, normalizeClass as d, createElementVNode as v, createCommentVNode as c, renderSlot as m, createTextVNode as E, toDisplayString as V, nextTick as F } from "vue";
import { useInject as I, useSlotsExist as L } from "../utils/index.js";
const q = ["onClick"], G = { class: "radio-label" }, H = ["onClick"], J = { class: "radio-label" }, K = {
  key: 0,
  class: "radio-label"
}, M = { class: "radio-label" }, U = /* @__PURE__ */ j({
  __name: "Radio",
  props: {
    options: { default: () => [] },
    disabled: { type: Boolean, default: !1 },
    vertical: { type: Boolean, default: !1 },
    checked: { type: Boolean, default: !1 },
    gap: { default: 8 },
    button: { type: Boolean, default: !1 },
    buttonStyle: { default: "outline" },
    buttonSize: { default: "middle" },
    value: { type: [String, Number, Boolean], default: void 0 }
  },
  emits: ["update:checked", "update:value", "change"],
  setup(N, { emit: D }) {
    const s = N, n = h(!1), i = h(), o = h(!1), { colorPalettes: y } = I("Radio"), b = D, P = L(["default"]), R = A(() => s.options.length), T = A(() => s.button ? 0 : !s.vertical && Array.isArray(s.gap) ? `${s.gap[1]}px ${s.gap[0]}px` : `${s.gap}px`);
    B(() => {
      n.value = s.checked;
    }), B(() => {
      i.value = s.value;
    });
    function r(e) {
      return e === void 0 ? s.disabled : e;
    }
    function w(e) {
      e !== i.value && (S(), i.value = e, b("update:value", e), b("change", e));
    }
    function C() {
      n.value || (S(), n.value = !0, b("update:checked", !0), b("change", !0));
    }
    function S() {
      o.value ? (o.value = !1, F(() => {
        o.value = !0;
      })) : o.value = !0;
    }
    function f() {
      o.value = !1;
    }
    return (e, p) => R.value ? (t(), l("div", g({
      key: 0,
      class: ["radio-wrap", { "radio-vertical": !e.button && e.vertical }],
      style: `
      --radio-gap: ${T.value};
      --radio-primary-color: ${k(y)[5]};
    `
    }, e.$attrs), [
      e.button ? (t(!0), l($, { key: 1 }, z(e.options, (a, u) => (t(), l("div", {
        tabindex: "0",
        class: d(["radio-button-wrap", {
          "radio-button-checked": i.value === a.value,
          "radio-button-disabled": r(a.disabled),
          "radio-button-solid": e.buttonStyle === "solid",
          "radio-button-small": e.buttonSize === "small",
          "radio-button-large": e.buttonSize === "large"
        }]),
        key: u,
        onClick: (W) => r(a.disabled) ? () => !1 : w(a.value)
      }, [
        v("span", J, [
          m(e.$slots, "default", {
            option: a,
            label: a.label,
            index: u
          }, () => [
            E(V(a.label), 1)
          ], !0)
        ]),
        r(a.disabled) ? c("", !0) : (t(), l("span", {
          key: 0,
          class: d(["radio-wave", { "wave-active": o.value && i.value === a.value }]),
          onAnimationend: f
        }, null, 34))
      ], 10, H))), 128)) : (t(!0), l($, { key: 0 }, z(e.options, (a, u) => (t(), l("div", {
        class: d(["radio-container", { "radio-disabled": r(a.disabled) }]),
        key: u,
        onClick: (W) => r(a.disabled) ? () => !1 : w(a.value)
      }, [
        v("span", {
          class: d(["radio-handle", { "radio-checked": i.value === a.value }])
        }, [
          r(a.disabled) ? c("", !0) : (t(), l("span", {
            key: 0,
            class: d(["radio-wave", { "wave-active": o.value && i.value === a.value }]),
            onAnimationend: f
          }, null, 34))
        ], 2),
        v("span", G, [
          m(e.$slots, "default", {
            option: a,
            label: a.label,
            index: u
          }, () => [
            E(V(a.label), 1)
          ], !0)
        ])
      ], 10, q))), 128))
    ], 16)) : (t(), l($, { key: 1 }, [
      e.button ? (t(), l("div", g({
        key: 1,
        tabindex: "0",
        class: ["radio-button-wrap radio-button-single", {
          "radio-button-checked": n.value,
          "radio-button-disabled": e.disabled,
          "radio-button-solid": e.buttonStyle === "solid",
          "radio-button-small": e.buttonSize === "small",
          "radio-button-large": e.buttonSize === "large"
        }],
        style: `--radio-primary-color: ${k(y)[5]};`,
        onClick: p[1] || (p[1] = (a) => e.disabled ? () => !1 : C())
      }, e.$attrs), [
        v("span", M, [
          m(e.$slots, "default", {}, void 0, !0)
        ]),
        e.disabled ? c("", !0) : (t(), l("span", {
          key: 0,
          class: d(["radio-wave", { "wave-active": o.value && n.value }]),
          onAnimationend: f
        }, null, 34))
      ], 16)) : (t(), l("div", g({
        key: 0,
        class: ["radio-container", { "radio-disabled": e.disabled }],
        style: `--radio-primary-color: ${k(y)[5]};`,
        onClick: p[0] || (p[0] = (a) => e.disabled ? () => !1 : C())
      }, e.$attrs), [
        v("span", {
          class: d(["radio-handle", { "radio-checked": n.value }])
        }, [
          e.disabled ? c("", !0) : (t(), l("span", {
            key: 0,
            class: d(["radio-wave", { "wave-active": o.value && n.value }]),
            onAnimationend: f
          }, null, 34))
        ], 2),
        k(P).default ? (t(), l("span", K, [
          m(e.$slots, "default", {}, void 0, !0)
        ])) : c("", !0)
      ], 16))
    ], 64));
  }
});
export {
  U as default
};