@progress/kendo-vue-buttons/Button.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 v, createVNode as l } from "vue";
import { getDefaultSlots as m, kendoThemeMaps as b, validatePackage as k, classNames as S, Icon as C } from "@progress/kendo-vue-common";
import w from "./util.mjs";
import { packageMetadata as A } from "./package-metadata.mjs";
const M = w.styles, z = /* @__PURE__ */ v({
  name: "KendoButton",
  emits: {
    click: (e) => !0,
    mousedown: (e) => !0,
    mouseup: (e) => !0,
    pointerdown: (e) => !0,
    pointerup: (e) => !0,
    focus: (e) => !0,
    blur: (e) => !0,
    keypress: (e) => !0,
    keydown: (e) => !0,
    contextmenu: (e) => !0
  },
  props: {
    ariaLabel: String,
    ariaPressed: Boolean,
    title: String,
    dir: String,
    selected: {
      type: Boolean,
      default: void 0
    },
    togglable: {
      type: Boolean,
      default: !1
    },
    icon: {
      type: String,
      default: function() {
      }
    },
    svgIcon: Object,
    iconSize: {
      type: String
    },
    iconClass: {
      type: String,
      default: function() {
      }
    },
    imageUrl: {
      type: String,
      default: function() {
      }
    },
    imageAlt: String,
    disabled: {
      type: Boolean,
      default: void 0
    },
    size: String,
    rounded: String,
    fillMode: String,
    themeColor: String,
    tabIndex: Number,
    accessKey: String,
    id: String,
    type: String,
    role: String
  },
  created() {
    k(A), this.currentActive = this.$props.togglable === !0 && this.$props.selected === !0, this._activeTemp = void 0;
  },
  data() {
    return {
      currentActive: null
    };
  },
  computed: {
    computedSelected() {
      return this._activeTemp !== void 0 ? this._activeTemp : this.$props.selected !== void 0 ? this.$props.selected : this.currentActive;
    },
    buttonClasses() {
      const {
        disabled: e,
        icon: i,
        iconClass: t,
        imageUrl: n,
        dir: s,
        svgIcon: u,
        size: o,
        rounded: d,
        fillMode: r,
        themeColor: a
      } = this.$props, c = u !== void 0 || i !== void 0 || t !== void 0 || n !== void 0, h = m(this);
      return {
        [M.button]: !0,
        [`k-button-${b.sizeMap[o] || o}`]: o,
        [`k-rounded-${b.roundedMap[d] || d}`]: d,
        "k-icon-button": !h && c,
        "k-disabled": e,
        "k-selected": this.computedSelected,
        "k-rtl": s === "rtl",
        [`k-button-${r}`]: r,
        [`k-button-${a}`]: a
      };
    }
  },
  updated() {
    this.$props.togglable && this.$props.selected !== void 0 && this.$props.selected !== this.currentActive && (this.currentActive = this.$props.selected);
  },
  methods: {
    focus(e) {
      this.$el.focus(e);
    },
    toggleIfApplicable() {
      if (!this.disabled && this.$props.togglable && this.$props.selected === void 0) {
        const e = !this.currentActive;
        this._activeTemp = e, this.currentActive = e, this._activeTemp = void 0;
      }
    },
    handleClick(e) {
      this.toggleIfApplicable(), this.disabled || this.$emit("click", e);
    },
    handleMouseDown(e) {
      this.disabled || this.$emit("mousedown", e);
    },
    handlePointerDown(e) {
      this.disabled || this.$emit("pointerdown", e);
    },
    handleMouseUp(e) {
      this.disabled || this.$emit("mouseup", e);
    },
    handlePointerUp(e) {
      this.disabled || this.$emit("pointerup", e);
    },
    handleFocus(e) {
      this.disabled || this.$emit("focus", {
        event: e
      });
    },
    handleBlur(e) {
      this.disabled || this.$emit("blur", {
        event: e
      });
    },
    handleKeypress(e) {
      this.disabled || this.$emit("keypress", e);
    },
    handleKeydown(e) {
      this.disabled || this.$emit("keydown", e);
    },
    handleContextmenu(e) {
      this.disabled || this.$emit("contextmenu", e);
    }
  },
  render() {
    const {
      togglable: e,
      icon: i,
      svgIcon: t,
      iconClass: n,
      imageUrl: s,
      imageAlt: u,
      accessKey: o,
      tabIndex: d,
      id: r,
      type: a,
      disabled: c,
      role: f,
      iconSize: h
    } = this.$props, p = m(this), g = !p && (t !== void 0 || i !== void 0 || n !== void 0 || s !== void 0) && (t != null && t.name) ? t.name.charAt(0).toUpperCase() + t.name.slice(1) : void 0, y = function() {
      if (s)
        return l("img", {
          role: "presentation",
          class: "k-image",
          alt: u,
          src: s
        }, null);
      if (i || t) {
        const $ = S("k-button-icon", n);
        return l(C, {
          name: i,
          icon: t,
          class: $,
          size: h
        }, null);
      } else if (n)
        return l("span", {
          role: "presentation",
          class: n
        }, null);
      return null;
    };
    return l("button", {
      class: this.buttonClasses,
      onClick: this.handleClick,
      onMousedown: this.handleMouseDown,
      onMouseup: this.handleMouseUp,
      onPointerdown: this.handlePointerDown,
      onPointerup: this.handlePointerUp,
      onFocus: this.handleFocus,
      onBlur: this.handleBlur,
      onKeypress: this.handleKeypress,
      onKeydown: this.handleKeydown,
      onContextmenu: this.handleContextmenu,
      title: this.title,
      "aria-label": this.ariaLabel || g,
      "aria-disabled": c || void 0,
      "aria-pressed": e ? !!this.currentActive : void 0,
      accesskey: o,
      tabindex: d,
      id: r,
      type: a,
      role: f
    }, [y.call(this), p && l("span", {
      class: "k-button-text"
    }, [p])]);
  }
});
export {
  z as Button
};