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

package/dist/esm/ListButton/DropDownButton.js

@@ -0,0 +1,453 @@
+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 navigation from './utils/navigation.js';
+import { ButtonItem } from './ButtonItem.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 DropDownButtonVue2 = {
+  name: 'KendoDropDownButton',
+  // @ts-ignore
+  emits: {
+    focus: null,
+    blur: null,
+    itemclick: null,
+    open: null,
+    close: null
+  },
+  props: {
+    accessKey: String,
+    primary: Boolean,
+    items: {
+      type: Array,
+      default: function _default() {
+        return [];
+      }
+    },
+    text: String,
+    textField: String,
+    tabIndex: Number,
+    disabled: Boolean,
+    icon: String,
+    iconClass: String,
+    imageUrl: String,
+    popupSettings: Object,
+    itemRender: [String, Object, Function],
+    item: Function,
+    size: {
+      type: String,
+      default: 'medium'
+    },
+    shape: {
+      type: String,
+      default: 'rectangle',
+      validator: function validator(value) {
+        return [null, 'rectangle', 'square'].includes(value);
+      }
+    },
+    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
+    },
+    look: {
+      type: String,
+      validator: function validator(value) {
+        return ['default', 'flat', 'outline'].includes(value);
+      }
+    },
+    buttonClass: String,
+    dir: String
+  },
+  created: function created() {
+    this._blurTimeout = null;
+    this._anchor = guid();
+    this.wrapper = null;
+    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();
+    }
+  },
+  data: function data() {
+    return {
+      currentOpened: false,
+      focused: false,
+      focusedIndex: -1
+    };
+  },
+  computed: {
+    computedOpened: function computedOpened() {
+      return this.$props.opened === undefined ? this.currentOpened : this.$props.opened;
+    },
+    wrapperClass: function wrapperClass() {
+      return {
+        'k-dropdown-button': 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 _this2 = this;
+
+    var h = gh || createElement;
+    var rtl = this.isRtl();
+    var dir = rtl ? 'rtl' : undefined;
+    var _a = this.$props,
+        tabIndex = _a.tabIndex,
+        disabled = _a.disabled;
+    var defaultSlot = getDefaultSlots(this);
+    this.buttonsData = this.$props.items;
+
+    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,
+            index: index,
+            key: index,
+            id: "".concat(this.guid, "-").concat(index)
+          })
+        );
+      }, this) : null;
+    };
+
+    var renderPopup = function renderPopup() {
+      var _this = 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: _this.v3 ? undefined : {
+              role: "menu",
+              id: _this.guid
+            },
+            id: _this.guid
+          }, [renderChildItems.call(_this)])];
+        } : [h("ul", {
+          "class": "k-group k-menu-group k-reset k-menu-group-".concat(kendoThemeMaps.sizeMap[size] || size),
+          role: "menu",
+          attrs: _this.v3 ? undefined : {
+            role: "menu",
+            id: _this.guid
+          },
+          id: _this.guid
+        }, [renderChildItems.call(_this)])])
+      );
+    };
+
+    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,
+        shape: this.$props.shape,
+        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,
+        primary: this.$props.primary,
+        dir: dir,
+        type: "button",
+        "aria-disabled": disabled,
+        "aria-haspopup": true,
+        "aria-expanded": this.computedOpened,
+        "aria-label": "".concat(this.$props.text, " dropdownbutton"),
+        "aria-owns": this.guid,
+        "aria-activedescendant": this.focusedIndex !== undefined && this.focusedIndex >= 0 ? "".concat(this.guid, "-").concat(this.focusedIndex) : undefined
+      },
+      shape: this.$props.shape,
+      rounded: this.$props.rounded,
+      fillMode: this.$props.fillMode,
+      themeColor: this.$props.themeColor,
+      onClick: this.onClickMainButton,
+      on: this.v3 ? undefined : {
+        "click": this.onClickMainButton,
+        "mousedown": this.mouseDown
+      },
+      onMousedown: this.mouseDown,
+      disabled: disabled || undefined,
+      tabIndex: tabIndex,
+      accessKey: this.$props.accessKey,
+      icon: this.$props.icon,
+      iconClass: this.$props.iconClass,
+      "class": this.$props.buttonClass,
+      imageUrl: this.$props.imageUrl,
+      look: this.$props.look,
+      primary: this.$props.primary,
+      dir: dir,
+      ref: this._anchor,
+      type: "button",
+      "aria-disabled": disabled,
+      "aria-haspopup": true,
+      "aria-expanded": this.computedOpened,
+      "aria-label": "".concat(this.$props.text, " dropdownbutton"),
+      "aria-owns": this.guid,
+      "aria-activedescendant": this.focusedIndex !== undefined && this.focusedIndex >= 0 ? "".concat(this.guid, "-").concat(this.focusedIndex) : undefined
+    }, this.v3 ? function () {
+      return [_this2.$props.text, defaultSlot];
+    } : [_this2.$props.text, defaultSlot]), 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;
+      }
+
+      if (event.keyCode === Keys.enter || event.keyCode === Keys.space) {
+        if (this.focusedIndex !== undefined && this.focusedIndex >= 0) {
+          this.dispatchClickEvent(event, this.focusedIndex);
+        } // Prevent default because otherwise when an item is selected
+        // click on the default button gets emitted which opens the popup again.
+
+
+        event.preventDefault();
+        this.focusedIndex = this.computedOpened ? -1 : 0, this.currentOpened = !this.computedOpened;
+        this.dispatchPopupEvent(event, this.currentOpened);
+      } else if (this.computedOpened && event.keyCode === Keys.esc) {
+        this.focusedIndex = -1;
+        this.currentOpened = false;
+        this.dispatchPopupEvent(event, this.currentOpened);
+      }
+
+      if (this.computedOpened) {
+        var newFocused = navigation(this.focusedIndex, event.keyCode, event.altKey, this.buttonsData.length);
+        this.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();
+        }
+      }
+    },
+    onFocus: function onFocus(event) {
+      if (!this.focused) {
+        this.focused = true;
+        this.$emit('focus', event, this, undefined);
+      }
+
+      this.focusedIndex = this.computedOpened ? 0 : -1;
+      clearTimeout(this._blurTimeout);
+    },
+    onBlur: function onBlur(event) {
+      clearTimeout(this._blurTimeout);
+      this.createBlurTimeout(event);
+    },
+    createBlurTimeout: function createBlurTimeout(event) {
+      var that = this;
+      this._blurTimeout = setTimeout(function () {
+        if (canUseDOM && document.activeElement !== that.$el) {
+          that.focused = false;
+          that.focusedIndex = -1;
+          that.$emit('blur', event, that, undefined);
+          var fireCloseEvent = that.computedOpened;
+
+          if (fireCloseEvent) {
+            that.currentOpened = false;
+            that.dispatchPopupEvent(event, false);
+          }
+        }
+      }, 200);
+    },
+    onItemClick: function onItemClick(event, clickedItemIndex) {
+      this.focusedIndex = -1;
+      this.currentOpened = false;
+      this.dispatchClickEvent(event, clickedItemIndex);
+      this.dispatchPopupEvent(event, false);
+    },
+    onItemDown: function onItemDown(event) {
+      if (document.activeElement === this.element()) {
+        event.preventDefault();
+      }
+    },
+    mouseDown: function mouseDown(event) {
+      event.preventDefault();
+    },
+    dispatchClickEvent: function dispatchClickEvent(dispatchedEvent, index) {
+      if (!this.isItemDisabled(index)) {
+        this.$emit('itemclick', {
+          event: dispatchedEvent,
+          item: this.buttonsData[index],
+          itemIndex: index
+        });
+      }
+    },
+    onClickMainButton: function onClickMainButton(event) {
+      if (!this.buttonsData.length) {
+        return;
+      }
+
+      var toOpen = !this.computedOpened;
+      this.currentOpened = toOpen;
+      this.focused = true;
+      this.focusedIndex = toOpen ? 0 : -1;
+      this.dispatchPopupEvent(event, toOpen);
+    },
+    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 DropDownButton = DropDownButtonVue2;
+export { DropDownButton, DropDownButtonVue2 };

package/dist/esm/ListButton/SplitButton.d.ts

@@ -0,0 +1,67 @@
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+import { SplitButtonProps } from './models/ListButtonProps';
+/**
+ * @hidden
+ */
+export interface SplitButtonData {
+    focusedIndex?: number;
+    focused?: boolean;
+    currentOpened: boolean;
+}
+/**
+ * @hidden
+ */
+export interface SplitButtonComputed {
+    [key: string]: any;
+    computedOpened: boolean;
+    wrapperClass: object;
+}
+/**
+ * @hidden
+ */
+export interface SplitButtonMethods {
+    [key: string]: any;
+    element: () => HTMLButtonElement | null;
+    onKeyDown: (event: any) => void;
+    onFocus: (event: any) => void;
+    onBlur: (event: any) => void;
+    onItemClick: (event: any, clickedItemIndex: number) => void;
+    onItemDown: (event: any) => void;
+    mouseDown: (event: any) => void;
+    dispatchClickEvent: (dispatchedEvent: any, index: number) => void;
+    onClickMainButton: () => void;
+    onDownSplitPart: () => void;
+    onSplitPartClick: (event: any) => void;
+    dispatchPopupEvent: (dispatchedEvent: any, open: boolean) => void;
+    isItemDisabled: (index: number) => boolean;
+    isRtl: () => boolean;
+}
+/**
+ * @hidden
+ */
+export interface SplitButtonState {
+    mainButton: any;
+    guid: string;
+    buttonsData: Array<any>;
+    _anchor: string;
+    kendoAnchorRef: any;
+    v3: boolean;
+}
+/**
+ * @hidden
+ */
+export interface SplitButtonAll extends Vue2type, SplitButtonMethods, SplitButtonData, SplitButtonComputed, SplitButtonState {
+}
+/**
+ * @hidden
+ */
+declare let SplitButtonVue2: ComponentOptions<SplitButtonAll, DefaultData<SplitButtonData>, DefaultMethods<SplitButtonAll>, SplitButtonComputed, RecordPropsDefinition<SplitButtonProps>>;
+/**
+ * @hidden
+ */
+declare const SplitButton: DefineComponent<SplitButtonProps, any, SplitButtonData, SplitButtonComputed, SplitButtonMethods, {}, {}, {}, string, SplitButtonProps, SplitButtonProps, {}>;
+export { SplitButton, SplitButtonVue2 };