@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
132 lines (131 loc) • 4.75 kB
JavaScript
import { defineComponent as R, inject as U, ref as x, computed as o, watch as I, onMounted as $, onBeforeUnmount as j, openBlock as v, createElementBlock as V, normalizeClass as u, createElementVNode as f, unref as n, withModifiers as h, createBlock as q, withCtx as A, createVNode as G, mergeProps as H, createCommentVNode as y, renderSlot as z, createTextVNode as O, toDisplayString as F } from "vue";
import "../collapse-transition/index.mjs";
import "../icon/index.mjs";
import { useProps as J, createSizeProp as K, createStateProp as Q, useNameHelper as W, useIcons as X, emitEvent as Y } from "@vexip-ui/config";
import { radioProps as Z } from "./props.mjs";
import { radioShapes as S, GROUP_STATE as ee } from "./symbol.mjs";
import ae from "../collapse/collapse-transition.mjs";
import le from "../icon/icon.mjs";
const ne = ["checked", "disabled", "tabindex", "name"], me = /* @__PURE__ */ R({
name: "Radio",
__name: "radio",
props: Z,
emits: ["update:value"],
setup(E, { expose: N, emit: P }) {
const a = J("radio", E, {
size: K(),
state: Q(),
value: {
default: null,
static: !0
},
label: {
default: null,
static: !0,
required: !0
},
labelClass: null,
disabled: !1,
tabIndex: 0,
loading: !1,
loadingLock: !1,
name: {
default: "",
static: !0
},
shape: {
default: "default",
validator: (t) => S.includes(t)
}
}), B = P, e = U(ee, null), l = W("radio"), m = X(), s = x(a.value), d = x(), g = o(() => (e == null ? void 0 : e.size) || a.size), k = o(() => (e == null ? void 0 : e.state) || a.state), b = o(() => (e == null ? void 0 : e.disabled) || a.disabled), c = o(() => (e == null ? void 0 : e.loading) || a.loading), L = o(() => e == null ? void 0 : e.loadingIcon), _ = o(() => (e == null ? void 0 : e.loadingLock) || !1), T = o(() => (e == null ? void 0 : e.loadingEffect) || ""), r = o(() => (e == null ? void 0 : e.shape) || a.shape), p = o(() => c.value && _.value), w = o(() => [
l.b(),
l.bs("vars"),
{
[l.bm("inherit")]: a.inherit,
[l.bm("checked")]: s.value === a.label,
[l.bm("disabled")]: b.value,
[l.bm("readonly")]: p.value,
[l.bm("loading")]: c.value,
[l.bm(g.value)]: g.value !== "default",
[l.bm(k.value)]: k.value !== "default",
[l.bm(r.value)]: r.value !== "default" && r.value !== "button-group"
}
]), D = o(() => r.value === "button" || r.value === "button-group");
I(
() => a.value,
(t) => {
s.value = t;
}
), e && (s.value = e.currentValue, I(() => e.currentValue, C), $(() => {
e.registerInput(d);
}), j(() => {
e.unregisterInput(d);
})), N({ currentValue: s, input: d });
function C(t) {
s.value !== t && (s.value = t, B("update:value", t), Y(a.onChange, t));
}
function M() {
b.value || p.value || (C(a.label), e && s.value === a.label && e.updateValue(s.value));
}
return (t, i) => (v(), V("label", {
class: u(w.value)
}, [
f("input", {
ref_key: "input",
ref: d,
type: "radio",
class: u(n(l).be("input")),
checked: s.value === n(a).label,
disabled: b.value || p.value,
tabindex: n(a).tabIndex,
name: n(a).name,
onSubmit: i[0] || (i[0] = h(() => {
}, ["prevent"])),
onChange: M,
onClick: i[1] || (i[1] = h(() => {
}, ["stop"]))
}, null, 42, ne),
f("span", {
class: u([n(l).be("signal"), c.value && n(l).bem("signal", "active")])
}, null, 2),
f("span", {
class: u([n(l).be("label"), n(a).labelClass])
}, [
D.value ? (v(), q(n(ae), {
key: 0,
appear: "",
horizontal: "",
"fade-effect": ""
}, {
default: A(() => [
c.value ? (v(), V("div", {
key: 0,
class: u(n(l).be("loading"))
}, [
G(n(le), H(n(m).loading, {
effect: T.value || n(m).loading.effect,
icon: L.value || n(m).loading.icon,
label: "loading"
}), null, 16, ["effect", "icon"])
], 2)) : y("", !0)
]),
_: 1
})) : y("", !0),
z(t.$slots, "default", {}, () => [
O(F(n(a).label), 1)
]),
f("span", {
class: u(n(l).be("extra")),
onClickCapture: i[2] || (i[2] = h(() => {
}, ["prevent"]))
}, [
z(t.$slots, "extra")
], 34)
], 2)
], 2));
}
});
export {
me as default
};
//# sourceMappingURL=radio.vue2.mjs.map