@progress/kendo-vue-inputs
Version:
159 lines (158 loc) • 4.41 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, ref as f, createVNode as r } from "vue";
import { RadioButton as b } from "./RadioButton.mjs";
import { guid as g, validatePackage as $, isRtl as k, focusFirstFocusableChild as v, templateRendering as y, getListeners as C, classNames 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: null,
"update:modelValue": null,
change: null,
focus: null,
blur: null
},
model: {
event: "changemodel"
},
created() {
this.radioGroupName = g(), $(R), this.stateChecked = this.$props.defaultValue;
},
watch: {
value(e) {
e === void 0 && (this.stateChecked = this.$props.defaultValue);
}
},
mounted() {
this.rtl = k(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 && v(this.$el);
},
handleChange(e) {
let t = e.value;
this.$props.value === void 0 && !this.$props.disabled && (this.stateChecked = t), this.$props.disabled || (this.$emit("changemodel", t), this.$emit("update:modelValue", t), this.$emit("change", {
event: e,
value: t
}));
},
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: t,
dataItems: i,
disabled: s,
name: n,
labelPlacement: u,
valid: o
} = this.$props, c = i && i.map(function(a, l) {
const d = this.checkedRadioValue === a.value, h = this.checkedRadioValue === null || this.checkedRadioValue === void 0, m = y.call(this, this.$props.item || a.item, C.call(this));
return r(b, {
class: V("k-radio-item", {
"k-disabled": a.disabled || s
}),
style: a.style,
key: l,
item: m,
role: "none",
tag: "li",
valid: o,
className: a.className,
label: a.label,
value: a.value,
dataItem: a,
checked: d,
disabled: !!(a.disabled || s),
labelPlacement: a.labelPlacement ? a.labelPlacement : u,
tabIndex: a.tabIndex ? a.tabIndex : h && l === 0 || d ? 0 : -1,
index: l,
name: n || a.name || this.radioGroupName,
onChange: this.handleChange,
onFocus: this.handleFocus,
onBlur: this.handleBlur
}, {
default: () => [a.content]
});
}, this);
return r("ul", {
role: "radiogroup",
class: this.radioGroupClasses,
dir: this.currentDir,
"aria-labelledby": e,
"aria-describedby": t
}, [c]);
}
});
export {
I as RadioGroup
};