vue-awesome-radio/dist/radio-card.js

A tailwind based radio card component for Vue3

import { defineComponent as i, mergeModels as u, useModel as m, openBlock as r, createElementBlock as n, createElementVNode as t, toDisplayString as c, createCommentVNode as g, Fragment as p, renderList as h, renderSlot as f, normalizeProps as v, guardReactiveProps as _, pushScopeId as b, popScopeId as x } from "vue";
const y = (e) => (b("data-v-a1e32f41"), e = e(), x(), e), w = { class: "p-4 flex items-center justify-center bg-gray-100 min-h-screen" }, k = { class: "w-full max-w-screen-md mx-auto" }, C = { class: "space-y-6" }, S = {
  key: 0,
  class: "flex items-center justify-between py-4 border-b border-gray-300"
}, V = { class: "text-2xl text-gray-700 mr-4" }, I = { class: "grid sm:grid-cols-4 gap-6" }, M = ["onClick", "for"], j = { class: "font-semibold text-gray-500 leading-tight uppercase mb-3" }, B = ["name", "id", "value", "checked"], R = /* @__PURE__ */ y(() => /* @__PURE__ */ t("span", {
  "aria-hidden": "true",
  class: "hidden absolute inset-0 border-2 border-green-500 bg-green-200 bg-opacity-10 rounded-lg"
}, [
  /* @__PURE__ */ t("span", { class: "absolute top-4 right-4 h-6 w-6 inline-flex items-center justify-center rounded-full bg-green-200" }, [
    /* @__PURE__ */ t("svg", {
      xmlns: "http://www.w3.org/2000/svg",
      viewBox: "0 0 20 20",
      fill: "currentColor",
      class: "h-5 w-5 text-green-600"
    }, [
      /* @__PURE__ */ t("path", {
        "fill-rule": "evenodd",
        d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
        "clip-rule": "evenodd"
      })
    ])
  ])
], -1)), z = /* @__PURE__ */ i({
  __name: "RadioCard",
  props: /* @__PURE__ */ u({ options: Array, title: String }, {
    modelValue: {},
    modelModifiers: {}
  }),
  emits: ["update:modelValue"],
  setup(e) {
    const o = m(e, "modelValue");
    function a(s) {
      o.value = s;
    }
    return (s, d) => (r(), n("div", null, [
      t("body", w, [
        t("form", k, [
          t("fieldset", C, [
            e.title ? (r(), n("div", S, [
              t("legend", V, c(e.title), 1)
            ])) : g("", !0),
            t("div", I, [
              (r(!0), n(p, null, h(e.options, (l) => (r(), n("label", {
                onClick: (L) => a(l.value),
                for: l.value,
                class: "relative flex flex-col bg-white p-5 rounded-lg shadow-md cursor-pointer"
              }, [
                t("span", j, c(l.label), 1),
                f(s.$slots, "item", v(_(l)), void 0, !0),
                t("input", {
                  type: "radio",
                  name: l.value,
                  id: l.value,
                  value: l.value,
                  class: "absolute h-0 w-0 appearance-none",
                  checked: l.value === o.value
                }, null, 8, B),
                R
              ], 8, M))), 256))
            ])
          ])
        ])
      ])
    ]));
  }
}), E = (e, o) => {
  const a = e.__vccOpts || e;
  for (const [s, d] of o)
    a[s] = d;
  return a;
}, O = /* @__PURE__ */ E(z, [["__scopeId", "data-v-a1e32f41"]]);
export {
  O as RadioCard
};