@progress/kendo-vue-inputs
Version:
159 lines (158 loc) • 4.43 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import { defineComponent as p, createVNode as d, ref as f } from "vue";
import { RadioButton as b } from "./RadioButton.mjs";
import { templateRendering as g, getListeners as v, classNames as $, focusFirstFocusableChild as k, isRtl as y, guid as C, validatePackage as V } from "@progress/kendo-vue-common";
import { packageMetadata as R } from "../package-metadata.mjs";
const I = /* @__PURE__ */ p({
name: "KendoRadioGroup",
props: {
ariaLabelledBy: String,
ariaDescribedBy: String,
dataItems: Array,
defaultValue: [String, Number, Object],
dir: String,
disabled: Boolean,
labelPlacement: String,
item: {
type: String,
default: void 0
},
layout: {
type: String,
default: "vertical",
validator: function(e) {
return ["horizontal", "vertical"].includes(e);
}
},
name: String,
modelValue: [String, Number, Object],
value: [String, Number, Object],
valid: {
type: Boolean,
default: void 0
}
},
emits: {
changemodel: (e) => !0,
"update:modelValue": (e) => !0,
change: (e) => !0,
focus: (e) => !0,
blur: (e) => !0
},
model: {
event: "changemodel"
},
created() {
this.radioGroupName = C(), V(R), this.stateChecked = this.$props.defaultValue;
},
watch: {
value(e) {
e === void 0 && (this.stateChecked = this.$props.defaultValue);
}
},
mounted() {
this.rtl = y(this.$el);
},
computed: {
radioGroupClasses() {
const e = this.$props.layout;
return {
"k-radio-list": !0,
"k-list-horizontal": e === "horizontal",
"k-list-vertical": e === "vertical" || e === void 0
};
},
checkedRadioValue() {
const e = this.$props.value;
return e !== void 0 ? e : this.$props.modelValue !== void 0 ? this.$props.modelValue : this.stateChecked;
},
currentDir() {
const e = this.$props.dir;
return e || (this.rtl ? "rtl" : void 0);
}
},
data() {
return {
rtl: !1,
stateChecked: void 0
};
},
methods: {
focusElement() {
this.$el && k(this.$el);
},
handleChange(e) {
let a = e.value;
this.$props.value === void 0 && !this.$props.disabled && (this.stateChecked = a), this.$props.disabled || (this.$emit("changemodel", a), this.$emit("update:modelValue", a), this.$emit("change", {
event: e,
value: a
}));
},
handleFocus(e) {
this.$props.disabled || this.$emit("focus", e);
},
handleBlur(e) {
this.$props.disabled || this.$emit("blur", e);
}
},
setup() {
return {
inputRef: f(null)
};
},
render() {
const {
ariaLabelledBy: e,
ariaDescribedBy: a,
dataItems: i,
disabled: s,
name: n,
labelPlacement: u,
valid: o
} = this.$props, c = i && i.map(function(t, l) {
const r = this.checkedRadioValue === t.value, h = this.checkedRadioValue === null || this.checkedRadioValue === void 0, m = g.call(this, this.$props.item || t.item, v.call(this));
return d(b, {
class: $("k-radio-item", {
"k-disabled": t.disabled || s
}),
style: t.style,
key: l,
item: m,
role: "none",
tag: "li",
valid: o,
className: t.className,
label: t.label,
value: t.value,
dataItem: t,
checked: r,
disabled: !!(t.disabled || s),
labelPlacement: t.labelPlacement ? t.labelPlacement : u,
tabIndex: t.tabIndex ? t.tabIndex : h && l === 0 || r ? 0 : -1,
index: l,
name: n || t.name || this.radioGroupName,
onChange: this.handleChange,
onFocus: this.handleFocus,
onBlur: this.handleBlur
}, {
default: () => [t.content]
});
}, this);
return d("ul", {
role: "radiogroup",
class: this.radioGroupClasses,
dir: this.currentDir,
"aria-labelledby": e,
"aria-describedby": a
}, [c]);
}
});
export {
I as RadioGroup
};