@progress/kendo-vue-buttons/SegmentedControl/SegmentedControl.mjs

TODO

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { defineComponent as $, createVNode as o, h as T, Fragment as I, nextTick as p } from "vue";
import { templateRendering as O, classNames as h, getTemplate as x, Icon as P, validatePackage as _, kendoThemeMaps as M } from "@progress/kendo-vue-common";
import { packageMetadata as w } from "../package-metadata.mjs";
const B = /* @__PURE__ */ $({
  name: "KendoSegmentedControl",
  emits: {
    change: (e) => !0
  },
  props: {
    items: {
      type: Array,
      default: () => []
    },
    size: String,
    layoutMode: {
      type: String,
      default: "compact"
    },
    value: String,
    defaultValue: String,
    itemTemplate: [String, Function]
  },
  data() {
    return {
      interactionState: {
        selectedValue: this.$props.defaultValue,
        hoveredValue: void 0,
        focusedValue: void 0
      }
    };
  },
  computed: {
    selectedItemValue() {
      var e;
      return (e = this.$props.value) != null ? e : this.interactionState.selectedValue;
    },
    sizeClass() {
      const e = this.$props.size;
      return e ? M.sizeMap[e] : void 0;
    },
    buttonClass() {
      return (e, t, s) => h("k-segmented-control-button", {
        "k-selected": s,
        "k-hover": this.interactionState.hoveredValue === e && !t,
        "k-focus": this.interactionState.focusedValue === e && !t,
        "k-disabled": t
      });
    },
    iconClass() {
      return (e, t) => h("k-segmented-control-button-icon", {
        ...e && {
          [e]: t
        }
      });
    }
  },
  watch: {
    selectedItemValue() {
      p(() => {
        this.updateThumbPosition();
      });
    }
  },
  created() {
    _(w), this._resizeObserver = null;
  },
  mounted() {
    p(() => {
      this.updateThumbPosition();
    }), this._resizeObserver = new ResizeObserver(() => {
      this.updateThumbPosition();
    });
    const e = this.$refs.element;
    e && this._resizeObserver.observe(e);
  },
  beforeUnmount() {
    this._resizeObserver && (this._resizeObserver.disconnect(), this._resizeObserver = null);
  },
  methods: {
    updateThumbPosition() {
      const e = this.$refs.element, t = this.$refs.thumb;
      if (!e || !t)
        return;
      const s = e.querySelector(".k-segmented-control-button.k-selected");
      if (!s)
        return;
      const n = e.offsetWidth, {
        offsetWidth: u,
        offsetLeft: d
      } = s, r = `${d}px`, l = `${n - d - u}px`;
      t.style.left !== r && (t.style.left = r), t.style.right !== l && (t.style.right = l);
    },
    updateState(e) {
      this.interactionState = {
        ...this.interactionState,
        ...e
      };
    },
    handleButtonClick(e, t) {
      var s, n;
      if (!e.disabled) {
        if (this.selectedItemValue === e.value) {
          (s = e.onClick) == null || s.call(e, t);
          return;
        }
        this.$props.value === void 0 && e && this.updateState({
          selectedValue: e.value
        }), this.$emit("change", e.value), (n = e.onClick) == null || n.call(e, t);
      }
    },
    handleMouseEnter(e, t, s, n) {
      t || this.updateState({
        hoveredValue: e
      }), s == null || s(n);
    },
    handleMouseLeave(e, t) {
      this.updateState({
        hoveredValue: void 0
      }), e == null || e(t);
    },
    handleFocus(e, t, s) {
      this.updateState({
        focusedValue: e
      }), t == null || t(s);
    },
    handleBlur(e, t) {
      this.updateState({
        focusedValue: void 0
      }), e == null || e(t);
    }
  },
  render() {
    const {
      items: e,
      layoutMode: t,
      itemTemplate: s
    } = this.$props, n = this.sizeClass, u = this.selectedItemValue, d = s ? O.call(this, s, {}) : void 0;
    return o("div", {
      ref: "element",
      role: "group",
      class: h("k-segmented-control", n && `k-segmented-control-${n}`, {
        "k-segmented-control-stretched": t === "stretch"
      })
    }, [o("div", {
      class: "k-segmented-control-thumb",
      ref: "thumb",
      "aria-hidden": "true"
    }, null), (e || []).map((r) => {
      const {
        value: l,
        disabled: a,
        text: m,
        svgIcon: f,
        iconClassName: b,
        type: g = "button",
        onMouseEnter: v,
        onMouseLeave: k,
        onFocus: S,
        onBlur: V,
        title: C,
        dir: z,
        "aria-label": y
      } = r, c = u === l;
      return o("button", {
        key: l,
        type: g,
        class: this.buttonClass(l, a, c),
        disabled: a,
        "aria-disabled": a || void 0,
        "aria-pressed": c,
        title: C,
        dir: z,
        "aria-label": y,
        onClick: (i) => this.handleButtonClick(r, i),
        onMouseenter: (i) => this.handleMouseEnter(l, a, v, i),
        onMouseleave: (i) => this.handleMouseLeave(k, i),
        onFocus: (i) => this.handleFocus(l, S, i),
        onBlur: (i) => this.handleBlur(V, i)
      }, [x.call(this, {
        h: T,
        template: d,
        defaultRendering: o(I, null, [f && o(P, {
          class: this.iconClass(b, c),
          icon: f
        }, null), o("span", {
          class: "k-segmented-control-button-text"
        }, [m])]),
        additionalProps: {
          item: r
        }
      })]);
    })]);
  }
});
export {
  B as SegmentedControl
};