UNPKG

@farris/ui-vue

Version:

Farris Vue, a Farris Design based Vue3 component library.

121 lines (120 loc) 2.94 kB
import { radioCheckboxCommonProps as b, useGuid as V, RADIOGROUP_CONTEXT as C, withInstall as R } from "../common/index.esm.js"; import { computed as g, defineComponent as p, ref as f, provide as x, watch as F, createVNode as i } from "vue"; const k = { ...b, /** * 组件标识 */ id: String, /** * 禁用组件,不允许切换单选值 */ disabled: { type: Boolean, default: !1 }, /** * 功能同disabled */ readonly: { type: Boolean, default: !1 }, /** * 单选组枚举数组----废弃 */ enumData: { type: Array }, /** * 单选组枚举数组 */ data: { type: Array }, /** * 组件值 */ modelValue: { type: String, default: "" }, /** * 组件名称 */ name: { type: String, default: "" }, /** * 输入框Tab键索引 */ tabIndex: { type: Number, default: -1 }, /** * 枚举数组中展示文本的key值。 */ textField: { type: String, default: "name" }, /** * 枚举数组中枚举值的key值。 */ valueField: { type: String, default: "value" } }; function D(e, a, u) { const r = g(() => !e.disabled), d = g(() => e.data || e.enumData || e.options || []); function o(t) { return t[e.valueField]; } function c(t) { return t[e.textField]; } function s(t, m) { if (r.value) { const n = o(t); u.value !== n && (u.value = n, a.emit("change", n), a.emit("changeValue", n), a.emit("update:modelValue", n)); } m.stopPropagation(); } return { enumData: d, getValue: o, getText: c, onClickRadio: s }; } const G = /* @__PURE__ */ p({ name: "FRadioGroup", props: k, emits: ["changeValue", "update:modelValue", "change"], setup(e, a) { const { guid: u } = V(), r = `radio_${u().slice(0, 8)}`, d = f(e.name || r), o = f(e.modelValue), { enumData: c, onClickRadio: s, getValue: t, getText: m } = D(e, a, o), n = g(() => ({ "farris-checkradio-hor": e.direction === "horizontal" })), h = f([]); return x(C, { radios: h, parentProps: e, parentContext: a }), F(() => e.modelValue, (l) => { o.value = l; }), () => i("div", { class: ["farris-input-wrap", "btn-group", n.value] }, [a.slots.default ? a.slots.default() : c.value.map((l, P) => { const v = "radio_" + e.id + d.value + l[e.valueField]; return i("div", { class: "custom-control custom-radio" }, [i("input", { type: "radio", class: "custom-control-input", name: d.value, id: v, value: t(l), checked: t(l) === o.value, disabled: e.readonly || e.disabled, tabindex: e.tabIndex, onClick: (y) => s(l, y) }, null), i("label", { class: "custom-control-label", for: v }, [m(l)])]); })]); } }), I = R(G); export { G as FRadioGroup, I as default, k as radioGroupProps };