@progress/kendo-vue-buttons/Button.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 $, createVNode as o } from "vue";
import { getDefaultSlots as m, kendoThemeMaps as b, validatePackage as k, classNames as S, Icon as v } from "@progress/kendo-vue-common";
import C from "./util.mjs";
import { packageMetadata as w } from "./package-metadata.mjs";
const A = C.styles, K = /* @__PURE__ */ $({
  name: "KendoButton",
  emits: {
    click: null,
    mousedown: null,
    mouseup: null,
    pointerdown: null,
    pointerup: null,
    focus: null,
    blur: null,
    keypress: null,
    keydown: null,
    contextmenu: null
  },
  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,
      default: "medium"
    },
    iconClass: {
      type: String,
      default: function() {
      }
    },
    imageUrl: {
      type: String,
      default: function() {
      }
    },
    imageAlt: String,
    disabled: {
      type: Boolean,
      default: void 0
    },
    size: {
      type: String,
      default: "medium"
    },
    shape: {
      type: String
    },
    rounded: {
      type: String,
      default: "medium"
    },
    fillMode: {
      type: String,
      default: "solid"
    },
    themeColor: {
      type: String,
      default: "base"
    },
    tabIndex: Number,
    accessKey: String,
    id: String,
    type: String,
    role: String
  },
  created() {
    k(w), 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: d,
        iconClass: a,
        imageUrl: i,
        dir: r,
        svgIcon: h,
        size: n,
        shape: s,
        rounded: l,
        fillMode: t,
        themeColor: u
      } = this.$props, p = h !== void 0 || d !== void 0 || a !== void 0 || i !== void 0, c = m(this);
      return {
        [A.button]: !0,
        [`k-button-${b.sizeMap[n] || n}`]: n,
        [`k-button-${s}`]: s && s !== "rectangle",
        [`k-rounded-${b.roundedMap[l] || l}`]: l,
        "k-icon-button": !c && p,
        "k-disabled": e,
        "k-selected": this.computedSelected,
        "k-rtl": r === "rtl",
        [`k-button-${t}`]: t,
        [`k-button-${t}-${u}`]: t && u
      };
    }
  },
  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", e);
    },
    handleBlur(e) {
      this.disabled || this.$emit("blur", 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: d,
      svgIcon: a,
      iconClass: i,
      imageUrl: r,
      imageAlt: h,
      accessKey: n,
      tabIndex: s,
      id: l,
      type: t,
      disabled: u,
      role: p,
      iconSize: f
    } = this.$props, c = m(this), g = function() {
      if (r)
        return o("img", {
          role: "presentation",
          class: "k-image",
          alt: h,
          src: r
        }, null);
      if (d || a) {
        const y = S("k-button-icon", i);
        return o(v, {
          name: d,
          icon: a,
          class: y,
          size: f
        }, null);
      } else if (i)
        return o("span", {
          role: "presentation",
          class: i
        }, null);
      return null;
    };
    return o("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,
      "aria-disabled": u || void 0,
      "aria-pressed": e ? !!this.currentActive : void 0,
      accesskey: n,
      tabindex: s,
      id: l,
      type: t,
      role: p
    }, [g.call(this), c && o("span", {
      class: "k-button-text"
    }, [c])]);
  }
});
export {
  K as Button
};