@aplus-frontend/ui
Version:
68 lines (67 loc) • 2.2 kB
JavaScript
import { defineComponent as y, ref as C, isVNode as k, h as r, watch as S, createElementBlock as n, openBlock as a, normalizeClass as c, unref as l, createVNode as b, withCtx as V, Fragment as _, renderList as w, normalizeStyle as B, createBlock as N, resolveDynamicComponent as z } from "vue";
import { Flex as F } from "@aplus-frontend/antdv";
import "../../config-provider/index.mjs";
import "../../hooks/index.mjs";
import { useNamespace as L } from "../../config-provider/hooks/use-namespace.mjs";
import { useControllableValue as x } from "../../hooks/useControllableValue.mjs";
const A = ["onClick"], q = /* @__PURE__ */ y({
name: "ApRadioGroup",
__name: "ap-radio-group",
props: {
value: { default: "" },
delay: { default: 0 },
options: { default: () => [] },
optionStyle: { default: () => ({
height: 28,
gap: 8
}) }
},
emits: ["update:value", "change"],
setup(m, { emit: d }) {
const { b: f, e: i } = L("ap-radio-group"), p = m, s = d, { value: u, updateValue: h } = x(
p,
s
), o = C(u.value), g = (e) => k(e) ? r(e) : typeof e == "function" ? r("span", e()) : r("span", e);
S(
() => u.value,
(e) => {
e !== o.value && (o.value = e);
}
);
const v = (e) => {
o.value = e, setTimeout(() => {
h(e), s("change", e);
}, p.delay);
};
return (e, D) => (a(), n("div", {
class: c([l(f)()])
}, [
b(l(F), {
gap: e.optionStyle?.gap,
wrap: "wrap"
}, {
default: V(() => [
(a(!0), n(_, null, w(e.options.filter((t) => t.visible !== !1), (t) => (a(), n("div", {
key: t.value,
class: c([
l(i)("item"),
o.value === t.value ? l(i)("item--active") : ""
]),
style: B({
height: e.optionStyle?.height + "px",
lineHeight: e.optionStyle?.height + "px",
color: e.optionStyle?.color
}),
onClick: (E) => v(t.value)
}, [
(a(), N(z(g(t.label))))
], 14, A))), 128))
]),
_: 1
}, 8, ["gap"])
], 2));
}
});
export {
q as default
};