@progress/kendo-vue-inputs/radiobutton/RadioButton.mjs

TODO

/**
 * @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 v, ref as R, h as t, createVNode as h } from "vue";
import { guid as k, validatePackage as y, getRef as I, kendoThemeMaps as C, getDefaultSlots as x, templateRendering as j, getListeners as O, getTemplate as i, setRef as z, getTabIndex as F } from "@progress/kendo-vue-common";
import { packageMetadata as L } from "../package-metadata.mjs";
const M = /* @__PURE__ */ v({
  name: "KendoRadioButton",
  props: {
    ariaDescribedBy: String,
    checked: Boolean,
    disabled: Boolean,
    className: String,
    content: [String, Number, Boolean, Object],
    dataItem: Object,
    id: String,
    label: String,
    labelRender: [String, Number, Boolean, Object],
    item: [String, Number, Boolean, Object],
    labelPlacement: String,
    name: String,
    index: Number,
    tag: {
      type: String,
      default: "div"
    },
    size: {
      type: String,
      default: "medium",
      validator: function(e) {
        return [null, "small", "medium", "large"].includes(e);
      }
    },
    tabIndex: Number,
    value: [String, Number, Object],
    valid: {
      type: Boolean,
      default: void 0
    },
    role: String
  },
  emits: {
    change: null,
    focus: null,
    blur: null
  },
  created() {
    this.calculatedId = k(), y(L);
  },
  mounted() {
    this.input = I(this, "input");
  },
  computed: {
    inputClassName() {
      return {
        "k-radio": !0,
        [`k-radio-${C.sizeMap[this.$props.size]}`]: this.$props.size,
        "k-invalid": this.$props.valid === !1,
        [this.$props.className]: this.$props.className
      };
    }
  },
  methods: {
    focusElement() {
      this.input && this.input.focus();
    },
    handleChange(e) {
      this.$emit("change", {
        event: e,
        value: this.$props.value
      });
    },
    handleFocus(e) {
      this.$props.disabled || this.$emit("focus", e, void 0);
    },
    handleBlur(e) {
      this.$props.disabled || this.$emit("blur", e, void 0);
    }
  },
  setup() {
    return {
      inputRef: R(null)
    };
  },
  render() {
    const e = x(this), {
      ariaDescribedBy: p,
      checked: m,
      disabled: n,
      id: s,
      label: d,
      labelRender: a,
      labelPlacement: b,
      name: f,
      tabIndex: g,
      value: S,
      tag: r,
      role: $
    } = this.$props;
    let l = d;
    if (a) {
      const N = a ? j.call(this, a, O.call(this)) : null;
      l = i.call(this, {
        h: t,
        template: N
      });
    }
    const o = i.call(this, {
      h: t,
      template: this.$props.content
    }), u = l !== void 0 ? h("label", {
      class: "k-radio-label",
      for: s || this.calculatedId,
      style: {
        userSelect: "none"
      },
      "aria-label": d
    }, [l]) : null, c = h("input", {
      role: $,
      type: "radio",
      id: s || this.calculatedId,
      name: f,
      class: this.inputClassName,
      ref: z(this, "input"),
      disabled: n,
      tabindex: F(g, n),
      checked: m,
      style: this.$attrs.style,
      "aria-describedby": p,
      value: S,
      onChange: this.handleChange,
      onFocus: this.handleFocus,
      onBlur: this.handleBlur
    }, null), B = b === "before" ? t(r, [u, c, o, e]) : t(r, [c, u, o, e]);
    return i.call(this, {
      h: t,
      template: this.$props.item,
      defaultRendering: B,
      defaultSlots: e,
      additionalListeners: {
        change: this.handleChange,
        focus: this.handleFocus,
        blur: this.handleBlur
      },
      additionalProps: {
        dataItem: this.$props.dataItem
      }
    });
  }
});
export {
  M as RadioButton
};