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

An Amazing Vue3 UI Components Library, Using TypeScript.

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