@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, createElementBlock as V, openBlock as v, normalizeClass as u, createElementVNode as f, withModifiers as h, unref as n, createBlock as q, createCommentVNode as y, renderSlot as z, withCtx as A, createVNode as G, mergeProps as H, createTextVNode as O, toDisplayString as F } from "vue";
import "../collapse-transition/index.mjs";
import "../icon/index.mjs";
import { useProps as J, createStateProp as K, createSizeProp 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: Q(),
state: K(),
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