@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
140 lines (139 loc) • 4.21 kB
JavaScript
import { defineComponent as A, ref as O, computed as f, reactive as $, toRef as i, provide as j, watch as D, openBlock as n, createElementBlock as u, unref as r, normalizeClass as H, renderSlot as M, Fragment as m, renderList as U, createBlock as b, withCtx as g, createTextVNode as v, toDisplayString as h } from "vue";
import "./index.mjs";
import "../form/index.mjs";
import { useProps as q, createSizeProp as J, createStateProp as K, createIconProp as Q, useNameHelper as W, emitEvent as X } from "@vexip-ui/config";
import { debounceMinor as Y, isClient as Z, isObject as ee } from "@vexip-ui/utils";
import { radioGroupProps as ae } from "./props.mjs";
import { radioGroupShapes as te, GROUP_STATE as oe } from "./symbol.mjs";
import { useFieldStore as ie } from "../form/helper.mjs";
import _ from "./radio.vue2.mjs";
const le = ["id", "aria-orientation", "aria-labelledby"], ge = /* @__PURE__ */ A({
name: "RadioGroup",
__name: "radio-group",
props: ae,
emits: ["update:value"],
setup(k, { expose: S, emit: y }) {
const {
idFor: c,
labelId: z,
state: E,
disabled: I,
loading: F,
size: P,
validateField: V,
getFieldValue: C,
setFieldValue: G
} = ie(p), e = q("radioGroup", k, {
size: J(P),
state: K(E),
value: {
default: () => C(),
static: !0
},
vertical: !1,
disabled: () => I.value,
options: {
default: () => [],
static: !0
},
loading: () => F.value,
loadingIcon: Q(),
loadingLock: !1,
loadingEffect: null,
shape: {
default: "default",
validator: (a) => te.includes(a)
}
}), L = y, o = W("radio-group"), d = O(e.value), s = /* @__PURE__ */ new Set(), w = f(() => e.loading && e.loadingLock), x = f(() => [
o.b(),
o.ns("radio-vars"),
{
[o.bm("inherit")]: e.inherit,
[o.bm("vertical")]: e.vertical,
[o.bm("disabled")]: e.disabled,
[o.bm("readonly")]: w.value,
[o.bm("loading")]: e.loading,
[o.bm(e.size)]: e.size !== "default",
[o.bm(e.state)]: e.state !== "default",
[o.bm(e.shape)]: e.shape !== "default"
}
]), B = $({
currentValue: d,
size: i(e, "size"),
state: i(e, "state"),
disabled: i(e, "disabled"),
loading: i(e, "loading"),
loadingIcon: i(e, "loadingIcon"),
loadingLock: i(e, "loadingLock"),
loadingEffect: i(e, "loadingEffect"),
shape: i(e, "shape"),
updateValue: Y(N),
registerInput: R,
unregisterInput: T
});
j(oe, B), D(
() => e.value,
(a) => {
d.value = a;
}
), S({
idFor: c,
focus: p,
blur: () => {
var a;
for (const l of s)
(a = l.value) == null || a.blur();
}
});
function N(a) {
d.value !== a && (d.value = a, L("update:value", a), G(a), X(e.onChange, a), V());
}
function R(a) {
s.add(a);
}
function T(a) {
s.delete(a);
}
function p(a) {
var t;
const l = (t = Array.from(s)[0]) == null ? void 0 : t.value;
Z && l && document.activeElement !== l && l.focus(a);
}
return (a, l) => (n(), u("div", {
id: r(c),
class: H(x.value),
role: "radiogroup",
"aria-orientation": a.vertical ? "vertical" : "horizontal",
"aria-labelledby": r(z)
}, [
M(a.$slots, "default", {}, () => [
(n(!0), u(m, null, U(r(e).options, (t) => (n(), u(m, { key: t }, [
r(ee)(t) ? (n(), b(r(_), {
key: 0,
inherit: "",
label: t.label,
disabled: t.disabled
}, {
default: g(() => [
v(h(t.content || t.label), 1)
]),
_: 2
}, 1032, ["label", "disabled"])) : (n(), b(r(_), {
key: 1,
inherit: "",
label: t
}, {
default: g(() => [
v(h(t), 1)
]),
_: 2
}, 1032, ["label"]))
], 64))), 128))
])
], 10, le));
}
});
export {
ge as default
};
//# sourceMappingURL=radio-group.vue2.mjs.map