@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, createElementBlock as u, openBlock as n, 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, createIconProp as J, createStateProp as K, createSizeProp 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: Q(P),
state: K(E),
value: {
default: () => C(),
static: !0
},
vertical: !1,
disabled: () => I.value,
options: {
default: () => [],
static: !0
},
loading: () => F.value,
loadingIcon: J(),
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