@progress/kendo-vue-buttons 3.5.0 → 3.5.1-dev.202208150613

package/dist/esm/ListButton/SplitButton.js

@@ -0,0 +1,515 @@
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+}; // @ts-ignore
+
+
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+var ref = allVue.ref;
+import { Button as KendoButton } from '../Button.js';
+import { classNames, guid, Keys, kendoThemeMaps, getDefaultSlots } from '@progress/kendo-vue-common';
+import { ButtonItem } from './ButtonItem.js';
+import navigation from './utils/navigation.js';
+import { Popup } from '@progress/kendo-vue-popup';
+import { getAnchorAlign, getPopupAlign } from './utils/popup.js';
+import { validatePackage, templateRendering, getListeners, canUseDOM } from '@progress/kendo-vue-common';
+import { packageMetadata } from '../package-metadata.js';
+/**
+ * @hidden
+ */
+
+var SplitButtonVue2 = {
+  name: 'KendoSplitButton',
+  // @ts-ignore
+  emits: {
+    focus: null,
+    blur: null,
+    buttonclick: null,
+    itemclick: null,
+    open: null,
+    close: null
+  },
+  props: {
+    accessKey: String,
+    text: String,
+    items: {
+      type: Array,
+      default: function _default() {
+        return [];
+      }
+    },
+    textField: String,
+    tabIndex: Number,
+    disabled: Boolean,
+    icon: String,
+    size: {
+      type: String,
+      default: 'medium'
+    },
+    rounded: {
+      type: String,
+      default: 'medium'
+    },
+    fillMode: {
+      type: String,
+      default: 'solid',
+      validator: function validator(value) {
+        return [null, 'flat', 'link', 'outline', 'solid'].includes(value);
+      }
+    },
+    // eslint-disable-next-line max-len
+    themeColor: {
+      type: String,
+      default: 'base',
+      validator: function validator(value) {
+        return [null, 'base', 'dark', 'error', 'info', 'inverse', 'inverse', 'light', 'primary', 'secondary', 'success', 'tertiary', 'warning'].includes(value);
+      }
+    },
+    opened: {
+      type: Boolean,
+      default: undefined
+    },
+    iconClass: String,
+    imageUrl: String,
+    popupSettings: Object,
+    itemRender: [String, Function, Object],
+    item: [String, Function, Object],
+    look: String,
+    className: String,
+    buttonClass: String,
+    dir: String
+  },
+  data: function data() {
+    return {
+      focused: false,
+      focusedIndex: -1,
+      currentOpened: false
+    };
+  },
+  created: function created() {
+    this._blurTimeout = null;
+    this._anchor = guid();
+    this.mainButton = null;
+    this.guid = guid();
+    this.buttonsData = [];
+    validatePackage(packageMetadata);
+  },
+  mounted: function mounted() {
+    this.mainButton = this.$refs[this._anchor]; // If this.$props.opened is true during the initial render, the popup is not aligned.
+
+    if (this.$props.dir === undefined && this.isRtl() || this.computedOpened) {
+      this.$forceUpdate();
+    }
+  },
+  updated: function updated() {
+    if (this.focused && this.element()) {
+      this.mainButton = this.$refs[this._anchor];
+      this.mainButton.focus();
+    }
+  },
+  computed: {
+    computedOpened: function computedOpened() {
+      return this.$props.opened === undefined ? this.currentOpened : this.$props.opened;
+    },
+    wrapperClass: function wrapperClass() {
+      return {
+        'k-split-button': true,
+        'k-button-group': true,
+        'k-focus': this.focused
+      };
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    var kendoAnchorRef = ref(null);
+    return {
+      v3: v3,
+      kendoAnchorRef: kendoAnchorRef
+    };
+  },
+  render: function render(createElement) {
+    var _this3 = this;
+
+    var _this = this;
+
+    var h = gh || createElement;
+    this.buttonsData = this.$props.items;
+    var rtl = this.isRtl();
+    var dir = rtl ? 'rtl' : undefined;
+    var _a = this.$props,
+        tabIndex = _a.tabIndex,
+        disabled = _a.disabled;
+    var defaultSlot = getDefaultSlots(this);
+
+    var renderChildItems = function renderChildItems() {
+      var _a = this.$props,
+          item = _a.item,
+          itemRender = _a.itemRender,
+          textField = _a.textField;
+      return this.buttonsData.length > 0 ? this.buttonsData.map(function (dataItem, index) {
+        var currentDataItem = typeof dataItem !== 'string' ? __assign(__assign({}, dataItem), {
+          render: templateRendering.call(this, dataItem.render, getListeners.call(this))
+        }) : dataItem;
+        return (// @ts-ignore
+          h(ButtonItem, {
+            "class": "k-menu-item",
+            dataItem: currentDataItem,
+            attrs: this.v3 ? undefined : {
+              dataItem: currentDataItem,
+              textField: textField,
+              focused: this.focusedIndex === index,
+              render: templateRendering.call(this, itemRender, getListeners.call(this)),
+              item: item,
+              index: index,
+              id: "".concat(this.guid, "-").concat(index)
+            },
+            textField: textField,
+            focused: this.focusedIndex === index,
+            onClick: this.onItemClick,
+            on: this.v3 ? undefined : {
+              "click": this.onItemClick,
+              "down": this.onItemDown
+            },
+            onDown: this.onItemDown,
+            render: templateRendering.call(this, itemRender, getListeners.call(this)),
+            item: item,
+            key: index,
+            index: index,
+            id: "".concat(this.guid, "-").concat(index)
+          })
+        );
+      }, this) : null;
+    };
+
+    var renderPopup = function renderPopup() {
+      var _this2 = this;
+
+      var _a = this.$props,
+          _b = _a.popupSettings,
+          popupSettings = _b === void 0 ? {} : _b,
+          size = _a.size;
+      return (// @ts-ignore function children
+        h(Popup, {
+          anchor: this._anchor,
+          attrs: this.v3 ? undefined : {
+            anchor: this._anchor,
+            show: this.computedOpened,
+            animate: popupSettings.animate,
+            popupClass: classNames('k-menu-popup', popupSettings.popupClass),
+            anchorAlign: popupSettings.anchorAlign || getAnchorAlign(rtl),
+            popupAlign: popupSettings.popupAlign || getPopupAlign(rtl)
+          },
+          show: this.computedOpened,
+          animate: popupSettings.animate,
+          popupClass: classNames('k-menu-popup', popupSettings.popupClass),
+          anchorAlign: popupSettings.anchorAlign || getAnchorAlign(rtl),
+          popupAlign: popupSettings.popupAlign || getPopupAlign(rtl),
+          style: rtl ? {
+            direction: 'rtl'
+          } : undefined
+        }, this.v3 ? function () {
+          return [h("ul", {
+            "class": "k-group k-menu-group k-reset k-menu-group-".concat(kendoThemeMaps.sizeMap[size] || size),
+            role: "menu",
+            attrs: _this2.v3 ? undefined : {
+              role: "menu",
+              id: _this2.guid
+            },
+            id: _this2.guid
+          }, [renderChildItems.call(_this2)])];
+        } : [h("ul", {
+          "class": "k-group k-menu-group k-reset k-menu-group-".concat(kendoThemeMaps.sizeMap[size] || size),
+          role: "menu",
+          attrs: _this2.v3 ? undefined : {
+            role: "menu",
+            id: _this2.guid
+          },
+          id: _this2.guid
+        }, [renderChildItems.call(_this2)])])
+      );
+    };
+
+    return h("div", {
+      "class": this.wrapperClass,
+      onKeydown: this.onKeyDown,
+      on: this.v3 ? undefined : {
+        "keydown": this.onKeyDown,
+        "focusin": this.onFocus,
+        "focusout": this.onBlur
+      },
+      onFocusin: this.onFocus,
+      onFocusout: this.onBlur,
+      dir: dir,
+      attrs: this.v3 ? undefined : {
+        dir: dir
+      }
+    }, [// @ts-ignore function children
+    h(KendoButton, {
+      size: this.$props.size,
+      attrs: this.v3 ? undefined : {
+        size: this.$props.size,
+        rounded: this.$props.rounded,
+        fillMode: this.$props.fillMode,
+        themeColor: this.$props.themeColor,
+        disabled: disabled || undefined,
+        tabIndex: tabIndex,
+        accessKey: this.$props.accessKey,
+        icon: this.$props.icon,
+        iconClass: this.$props.iconClass,
+        imageUrl: this.$props.imageUrl,
+        look: this.$props.look,
+        dir: dir,
+        type: "button",
+        "aria-disabled": disabled,
+        "aria-haspopup": true,
+        "aria-expanded": this.computedOpened,
+        "aria-label": "".concat(this.$props.text, " splitbutton"),
+        "aria-owns": this.guid,
+        "aria-activedescendant": this.focusedIndex !== undefined && this.focusedIndex >= 0 ? "".concat(this.guid, "-").concat(this.focusedIndex) : undefined
+      },
+      rounded: this.$props.rounded,
+      fillMode: this.$props.fillMode,
+      themeColor: this.$props.themeColor,
+      onClick: function onClick(event) {
+        return _this.onItemClick(event, -1);
+      },
+      on: this.v3 ? undefined : {
+        "click": function onClick(event) {
+          return _this.onItemClick(event, -1);
+        }
+      },
+      disabled: disabled || undefined,
+      tabIndex: tabIndex,
+      accessKey: this.$props.accessKey,
+      "class": this.$props.buttonClass,
+      icon: this.$props.icon,
+      iconClass: this.$props.iconClass,
+      imageUrl: this.$props.imageUrl,
+      look: this.$props.look,
+      dir: dir,
+      ref: this._anchor,
+      type: "button",
+      "aria-disabled": disabled,
+      "aria-haspopup": true,
+      "aria-expanded": this.computedOpened,
+      "aria-label": "".concat(this.$props.text, " splitbutton"),
+      "aria-owns": this.guid,
+      "aria-activedescendant": this.focusedIndex !== undefined && this.focusedIndex >= 0 ? "".concat(this.guid, "-").concat(this.focusedIndex) : undefined
+    }, this.v3 ? function () {
+      return [_this3.$props.text, defaultSlot];
+    } : [_this3.$props.text, defaultSlot]), // @ts-ignore
+    h(KendoButton, {
+      "class": 'k-split-button-arrow',
+      size: this.$props.size,
+      attrs: this.v3 ? undefined : {
+        size: this.$props.size,
+        rounded: this.$props.rounded,
+        fillMode: this.$props.fillMode,
+        themeColor: this.$props.themeColor,
+        icon: "arrow-s",
+        disabled: disabled || undefined,
+        tabIndex: -1,
+        look: this.$props.look,
+        dir: dir,
+        "aria-label": "menu toggling button"
+      },
+      rounded: this.$props.rounded,
+      fillMode: this.$props.fillMode,
+      themeColor: this.$props.themeColor,
+      icon: "arrow-s",
+      disabled: disabled || undefined,
+      tabIndex: -1,
+      look: this.$props.look,
+      onClick: this.onSplitPartClick,
+      on: this.v3 ? undefined : {
+        "click": this.onSplitPartClick,
+        "mousedown": this.onDownSplitPart,
+        "pointerdown": this.onDownSplitPart
+      },
+      onMousedown: this.onDownSplitPart,
+      onPointerdown: this.onDownSplitPart,
+      dir: dir,
+      "aria-label": "menu toggling button"
+    }), renderPopup.call(this)]);
+  },
+  methods: {
+    element: function element() {
+      return this.mainButton;
+    },
+    onKeyDown: function onKeyDown(event) {
+      if (event.altKey) {
+        if (!this.computedOpened && event.keyCode === Keys.down) {
+          this.dispatchPopupEvent(event, true);
+          this.focusedIndex = 0;
+          this.currentOpened = true;
+        } else if (this.computedOpened && event.keyCode === Keys.up) {
+          this.dispatchPopupEvent(event, false);
+          this.focusedIndex = -1;
+          this.currentOpened = false;
+        }
+
+        return;
+      }
+
+      var newState = undefined;
+
+      if (event.keyCode === Keys.enter || event.keyCode === Keys.space) {
+        // Prevent default because otherwise when an item is selected
+        // click on the default button gets emitted which opens the popup again.
+        event.preventDefault();
+        this.dispatchClickEvent(event, this.focusedIndex);
+
+        if (this.focusedIndex !== undefined && this.focusedIndex >= 0) {
+          newState = {
+            focusedIndex: this.computedOpened ? -1 : 0,
+            currentOpened: !this.computedOpened
+          };
+          this.dispatchPopupEvent(event, newState.currentOpened);
+        }
+      } else if (this.computedOpened && event.keyCode === Keys.esc) {
+        newState = {
+          focusedIndex: -1,
+          currentOpened: false
+        };
+        this.dispatchPopupEvent(event, newState.currentOpened);
+      }
+
+      if (this.computedOpened) {
+        var newFocused = navigation(this.focusedIndex, event.keyCode, event.altKey, this.buttonsData.length);
+
+        if (newFocused !== this.focusedIndex) {
+          newState = newState || {}; // @ts-ignore
+
+          newState.focusedIndex = newFocused;
+        }
+
+        var arrowKey = event.keyCode === Keys.up || event.keyCode === Keys.down || event.keyCode === Keys.left || event.keyCode === Keys.right;
+
+        if (!event.altKey && arrowKey) {
+          // Needed to notify the parent listeners that event is handled.
+          event.preventDefault();
+        }
+      }
+
+      if (newState) {
+        this.focusedIndex = newState.focusedIndex;
+        this.focused = newState.focused;
+
+        if (newState.currentOpened !== undefined) {
+          this.currentOpened = newState.currentOpened;
+        }
+      }
+    },
+    onFocus: function onFocus(event) {
+      if (!this.focused) {
+        this.$emit('focus', event, this, undefined);
+        this.focused = true;
+      }
+
+      this.focusedIndex = -1;
+      clearTimeout(this._blurTimeout);
+    },
+    onItemClick: function onItemClick(event, clickedItemIndex) {
+      var opened = this.computedOpened;
+
+      if (opened) {
+        this.focusedIndex = 0;
+        this.currentOpened = false;
+      }
+
+      this.dispatchClickEvent(event, clickedItemIndex);
+
+      if (opened) {
+        this.dispatchPopupEvent(event, false);
+      }
+    },
+    onBlur: function onBlur(event) {
+      clearTimeout(this._blurTimeout);
+      this.createBlurTimeout(event);
+    },
+    createBlurTimeout: function createBlurTimeout(event) {
+      var _this = this;
+
+      var that = this;
+      this._blurTimeout = setTimeout(function () {
+        if (canUseDOM && document.activeElement !== that.mainButton) {
+          that.focused = false;
+          that.focusedIndex = -1;
+          that.$emit('blur', event, _this, undefined);
+          var fireCloseEvent = that.computedOpened;
+
+          if (fireCloseEvent) {
+            that.currentOpened = false;
+            that.dispatchPopupEvent(event, false);
+          }
+        }
+      }, 200);
+    },
+    dispatchClickEvent: function dispatchClickEvent(dispatchedEvent, clickedItemIndex) {
+      if (!this.isItemDisabled(clickedItemIndex)) {
+        if (clickedItemIndex === -1) {
+          this.$emit('buttonclick', dispatchedEvent, this, undefined);
+        } else {
+          this.$emit('itemclick', {
+            event: dispatchedEvent,
+            component: this,
+            item: this.buttonsData[clickedItemIndex],
+            itemIndex: clickedItemIndex
+          });
+        }
+      }
+    },
+    onSplitPartClick: function onSplitPartClick(event) {
+      if (this.buttonsData.length) {
+        var toOpen = !this.computedOpened;
+        this.dispatchPopupEvent(event, toOpen);
+        this.focusedIndex = toOpen ? 0 : -1;
+        this.currentOpened = toOpen;
+        this.focused = true;
+      }
+    },
+    onDownSplitPart: function onDownSplitPart(event) {
+      event.preventDefault();
+
+      if (this.element() && document.activeElement !== this.element()) {
+        // @ts-ignore
+        this.element().focus();
+      }
+    },
+    onItemDown: function onItemDown(event) {
+      if (document.activeElement === this.element()) {
+        event.preventDefault();
+      }
+    },
+    dispatchPopupEvent: function dispatchPopupEvent(dispatchedEvent, open) {
+      this.$emit(open ? 'open' : 'close', dispatchedEvent, this, undefined);
+    },
+    isItemDisabled: function isItemDisabled(index) {
+      return this.buttonsData[index] ? this.buttonsData[index].disabled : this.$props.disabled;
+    },
+    isRtl: function isRtl() {
+      return this.$props.dir !== undefined ? this.$props.dir === 'rtl' : !!this.$el && getComputedStyle(this.$el).direction === 'rtl';
+    }
+  }
+};
+/**
+ * @hidden
+ */
+
+var SplitButton = SplitButtonVue2;
+export { SplitButton, SplitButtonVue2 };

package/dist/esm/ListButton/models/ButtonItemInterface.d.ts

@@ -0,0 +1,29 @@
+/**
+ * The interface for describing items that can be passed to the `items` property of the SplitButton or the DropDownButton as an alternative to passing them as children.
+ */
+export interface ButtonItemInterface {
+    /**
+     * Specifies the text of the item.
+     */
+    text: string;
+    /**
+     * Defines an icon that will be rendered next to the item text.
+     */
+    icon?: string;
+    /**
+     * Defines an icon with a custom CSS class that will be rendered next to the item text.
+     */
+    iconClass?: string;
+    /**
+     * Defines the location of an image that will be displayed next to the item text.
+     */
+    imageUrl?: string;
+    /**
+     * Determines whether the item is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Defines a named slot `string`, functional or class component for rendering the item. The default rendering includes an icon, an image, and text.
+     */
+    render?: any;
+}

package/dist/esm/ListButton/models/ButtonItemInterface.js

@@ -0,0 +1,2 @@
+export {};
+// tslint:enable:max-line-length