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

package/dist/esm/toolbar/Toolbar.d.ts

@@ -0,0 +1,112 @@
+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;
+};
+/**
+ * Represents the `resize` event of the Toolbar.
+ */
+export interface ToolbarResizeEvent {
+    /**
+     * An event target.
+     */
+    target: any;
+    /**
+     * The `offsetWidth` event of the Toolbar.
+     */
+    offsetWidth: number;
+    /**
+     * The `offsetHeight` event of the Toolbar.
+     */
+    offsetHeight: number;
+    /**
+     * A native DOM event.
+     */
+    nativeEvent: any;
+}
+/**
+ * Represents the props of the [Kendo UI for Vue Toolbar component]({% slug overview_toolbar %}).
+ */
+export interface ToolbarProps {
+    /**
+     * Sets additional classes to the Toolbar.
+     */
+    className?: string;
+    /**
+     * Represents the `dir` HTML attribute.
+     */
+    dir?: string;
+    /**
+     * Specifies the `tabIndex` of the Toolbar.
+     */
+    tabIndex?: number;
+    /**
+     * The `resize` event of the Toolbar.
+     */
+    onResize?: (event: ToolbarResizeEvent) => void;
+    /**
+     * If set to `false`, it will turn off the built-in keyboard navigation.
+     */
+    keyboardNavigation?: boolean;
+    /**
+     * @hidden
+     *
+     * The CSS selectors of the toolbar HTML elements used by built-in keyboard navigation.
+     * Each selector needs to point to a focusable element.
+     * Defaults to [
+     *  'button',
+     *  '.k-button-group > button',
+     *  '.k-dropdown > .k-dropdown-wrap',
+     *  '.k-colorpicker > .k-picker-wrap'
+     * ].
+     */
+    buttons?: string[];
+}
+/**
+ * @hidden
+ */
+export interface ToolbarState {
+    element: HTMLDivElement | null;
+    offsetHeight: number;
+    offsetWidth: number;
+    currentButtons: Array<HTMLElement>;
+    focusedSelector: string;
+}
+/**
+ * @hidden
+ */
+export interface ToolbarComputed {
+    [key: string]: any;
+    selectors: string[];
+}
+/**
+ * @hidden
+ */
+export interface ToolbarMethods {
+    [key: string]: any;
+    focusedIndex: () => number;
+    getCurrentButtons: () => HTMLElement[];
+    onKeyDown: (e: any) => void;
+    onWindowResize: (e: any) => void;
+    focusButton: (current: number, next: number) => void;
+    setTabIndex: (index: number) => void;
+}
+/**
+ * @hidden
+ */
+export interface ToolbarData {
+}
+/**
+ * @hidden
+ */
+export interface ToolbarAll extends Vue2type, ToolbarMethods, ToolbarData, ToolbarComputed, ToolbarState {
+}
+/**
+ * @hidden
+ */
+declare let ToolbarVue2: ComponentOptions<ToolbarAll, DefaultData<ToolbarData>, DefaultMethods<ToolbarAll>, ToolbarComputed, RecordPropsDefinition<ToolbarProps>>;
+/**
+ * @hidden
+ */
+declare const Toolbar: DefineComponent<ToolbarProps, any, ToolbarData, ToolbarComputed, ToolbarMethods, {}, {}, {}, string, ToolbarProps, ToolbarProps, {}>;
+export { Toolbar, ToolbarVue2 };

package/dist/esm/toolbar/Toolbar.js

@@ -0,0 +1,208 @@
+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';
+import { Keys, validatePackage, getDefaultSlots } from '@progress/kendo-vue-common';
+import { toolbarButtons, internalButtons } from './../util.js';
+import { packageMetadata } from '../package-metadata.js';
+/**
+ * @hidden
+ */
+
+var ToolbarVue2 = {
+  name: 'KendoToolbar',
+  props: {
+    tabIndex: {
+      type: Number,
+      default: 0
+    },
+    dir: String,
+    keyboardNavigation: {
+      type: Boolean,
+      default: true
+    },
+    buttons: {
+      type: Array,
+      default: function _default() {
+        return undefined;
+      }
+    }
+  },
+  created: function created() {
+    this.offsetHeight = 0;
+    this.offsetWidth = 0;
+    this.currentButtons = [];
+    this.focusedSelector = this.selectors.map(function (s) {
+      return s + ':focus';
+    }).join(',');
+    validatePackage(packageMetadata);
+  },
+  computed: {
+    selectors: function selectors() {
+      return this.$props.buttons || toolbarButtons;
+    }
+  },
+  mounted: function mounted() {
+    window.addEventListener('resize', this.onWindowResize);
+    var element = this.$el;
+
+    if (element) {
+      this.offsetWidth = element.offsetWidth;
+      this.offsetHeight = element.offsetHeight;
+
+      if (this.$props.keyboardNavigation !== false) {
+        this.currentButtons = this.getCurrentButtons();
+        this.setTabIndex(0);
+      }
+    }
+  },
+  updated: function updated() {
+    var element = this.$el;
+
+    if (!element || this.$props.keyboardNavigation === false) {
+      return;
+    }
+
+    this.currentButtons = this.getCurrentButtons();
+    this.setTabIndex(this.focusedIndex());
+  },
+  destroyed: !!isV3 ? undefined : function () {
+    window.removeEventListener('resize', this.onWindowResize);
+    this.currentButtons.length = 0;
+  },
+  // @ts-ignore
+  unmounted: function unmounted() {
+    window.removeEventListener('resize', this.onWindowResize);
+    this.currentButtons.length = 0;
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var defaultSlot = getDefaultSlots(this);
+    return h("div", {
+      "class": 'k-widget k-toolbar',
+      role: "toolbar",
+      attrs: this.v3 ? undefined : {
+        role: "toolbar",
+        dir: this.$props.dir
+      },
+      dir: this.$props.dir,
+      onKeydown: this.onKeyDown,
+      on: this.v3 ? undefined : {
+        "keydown": this.onKeyDown
+      }
+    }, [defaultSlot]);
+  },
+  methods: {
+    getCurrentButtons: function getCurrentButtons() {
+      return this.$el ? Array.from(this.$el.querySelectorAll(this.selectors.join(','))) : [];
+    },
+    getInternalButtons: function getInternalButtons() {
+      return this.$el ? Array.from(this.$el.querySelectorAll(internalButtons)) : [];
+    },
+    focusedIndex: function focusedIndex() {
+      var focused = this.$el && this.$el.querySelector(this.focusedSelector);
+      return Math.max(0, this.currentButtons.findIndex(function (e) {
+        return e === focused;
+      }));
+    },
+    setTabIndex: function setTabIndex(focusedIndex) {
+      var tabIndex = this.$props.tabIndex;
+      this.currentButtons.forEach(function (button, index) {
+        button.tabIndex = index === focusedIndex ? tabIndex : -1;
+      });
+      this.getInternalButtons().forEach(function (button) {
+        button.tabIndex = -1;
+      });
+    },
+    onKeyDown: function onKeyDown(event) {
+      if (this.$props.keyboardNavigation === false) {
+        return;
+      }
+
+      var target = event.target;
+      var arrowKey = event.keyCode === Keys.left || event.keyCode === Keys.right;
+
+      if (!arrowKey || event.defaultPrevented || this.currentButtons.findIndex(function (b) {
+        return b === target;
+      }) === -1) {
+        return;
+      }
+
+      var focusedIndex = this.focusedIndex();
+
+      if (event.keyCode === Keys.left) {
+        this.focusButton(focusedIndex, focusedIndex - 1);
+      } else {
+        this.focusButton(focusedIndex, focusedIndex + 1);
+      }
+    },
+    focusButton: function focusButton(prevIndex, index) {
+      var tabIndex = this.$props.tabIndex;
+      var button = this.currentButtons[index];
+
+      if (button) {
+        button.tabIndex = tabIndex;
+        button.focus();
+        var prevButton = this.currentButtons[prevIndex];
+
+        if (prevButton) {
+          prevButton.tabIndex = -1;
+        }
+      }
+    },
+    onWindowResize: function onWindowResize(event) {
+      var element = this.$el;
+
+      if (!element) {
+        return;
+      }
+
+      var offsetWidth = element.offsetWidth;
+      var offsetHeight = element.offsetHeight;
+
+      if (this.offsetWidth !== offsetWidth || this.offsetHeight !== offsetHeight) {
+        this.offsetWidth = offsetWidth;
+        this.offsetHeight = offsetHeight;
+        var newSizes = {
+          offsetWidth: this.offsetWidth,
+          offsetHeight: this.offsetHeight
+        };
+        this.$emit('resize', __assign(__assign({
+          target: this
+        }, newSizes), {
+          nativeEvent: event
+        }));
+      }
+    }
+  }
+};
+/**
+ * @hidden
+ */
+
+var Toolbar = ToolbarVue2;
+export { Toolbar, ToolbarVue2 };

package/dist/esm/toolbar/tools/ToolbarItem.d.ts

@@ -0,0 +1,64 @@
+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;
+};
+/**
+ * @hidden
+ */
+export interface ToolbarItemState {
+}
+/**
+ * @hidden
+ */
+export interface ToolbarItemComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface ToolbarItemMethods {
+    [key: string]: any;
+    element: () => HTMLSpanElement | null;
+}
+/**
+ * @hidden
+ */
+export interface ToolbarItemData {
+}
+/**
+ * @hidden
+ */
+export interface ToolbarItemAll extends Vue2type, ToolbarItemMethods, ToolbarItemData, ToolbarItemComputed, ToolbarItemState {
+}
+/**
+ * @hidden
+ */
+declare let ToolbarItemVue2: ComponentOptions<ToolbarItemAll, DefaultData<ToolbarItemData>, DefaultMethods<ToolbarItemAll>, ToolbarItemComputed, RecordPropsDefinition<{}>>;
+/**
+ * Represents the [Kendo UI for Vue ToolbarItem component]({% slug overview_toolbar %}).  A container component for the sub-elements of the Toolbar.
+ *
+ *  ```jsx
+ *  <template>
+ *    <Toolbar>
+ *    <ToolbarItem>
+ *      <ButtonGroup>
+ *        <Button :icon="'bold'" :title="'Bold'" :togglable="true" />
+ *        <Button :icon="'italic'" :title="'Italic'" :togglable="true" />
+ *        <Button :icon="'underline'" :title="'Underline'" :togglable="true" />
+ *      </ButtonGroup>
+ *    </ToolbarItem>
+ *    <ToolbarSpacer />
+ *    <ToolbarItem>
+ *      <SplitButton :text="'Insert'" :items="splitItems"> </SplitButton>
+ *    </ToolbarItem>
+ *    <ToolbarSeparator />
+ *    <ToolbarItem>
+ *      <Button :icon="'cut'" :title="'Cut'"> Cut </Button>
+ *    </ToolbarItem>
+ *  </Toolbar>
+ *  </template>
+ *  ```
+ */
+declare const ToolbarItem: DefineComponent<{}, any, ToolbarItemData, ToolbarItemComputed, ToolbarItemMethods, {}, {}, {}, string, {}, {}, {}>;
+export { ToolbarItem, ToolbarItemVue2 };

package/dist/esm/toolbar/tools/ToolbarItem.js

@@ -0,0 +1,58 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { getDefaultSlots } from '@progress/kendo-vue-common';
+/**
+ * @hidden
+ */
+
+var ToolbarItemVue2 = {
+  name: 'KendoToolbarItem',
+  methods: {
+    element: function element() {
+      return this.$el;
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var defaultSlot = getDefaultSlots(this);
+    return h("span", [defaultSlot]);
+  }
+};
+/**
+ * Represents the [Kendo UI for Vue ToolbarItem component]({% slug overview_toolbar %}).  A container component for the sub-elements of the Toolbar.
+ *
+ *  ```jsx
+ *  <template>
+ *    <Toolbar>
+ *    <ToolbarItem>
+ *      <ButtonGroup>
+ *        <Button :icon="'bold'" :title="'Bold'" :togglable="true" />
+ *        <Button :icon="'italic'" :title="'Italic'" :togglable="true" />
+ *        <Button :icon="'underline'" :title="'Underline'" :togglable="true" />
+ *      </ButtonGroup>
+ *    </ToolbarItem>
+ *    <ToolbarSpacer />
+ *    <ToolbarItem>
+ *      <SplitButton :text="'Insert'" :items="splitItems"> </SplitButton>
+ *    </ToolbarItem>
+ *    <ToolbarSeparator />
+ *    <ToolbarItem>
+ *      <Button :icon="'cut'" :title="'Cut'"> Cut </Button>
+ *    </ToolbarItem>
+ *  </Toolbar>
+ *  </template>
+ *  ```
+ */
+
+var ToolbarItem = ToolbarItemVue2;
+export { ToolbarItem, ToolbarItemVue2 };

package/dist/esm/toolbar/tools/ToolbarSeparator.d.ts

@@ -0,0 +1,36 @@
+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;
+};
+/**
+ * @hidden
+ */
+declare let ToolbarSeparatorVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<{}>, {}, RecordPropsDefinition<{}>>;
+/**
+ * Represents the [Kendo UI for Vue ToolbarSeparator component]({% slug overview_toolbar %}).  A separator element for the sub-elements of the Toolbar.
+ *
+ *  ```jsx
+ *  <template>
+ *    <Toolbar>
+ *    <ToolbarItem>
+ *      <ButtonGroup>
+ *        <Button :icon="'bold'" :title="'Bold'" :togglable="true" />
+ *        <Button :icon="'italic'" :title="'Italic'" :togglable="true" />
+ *        <Button :icon="'underline'" :title="'Underline'" :togglable="true" />
+ *      </ButtonGroup>
+ *    </ToolbarItem>
+ *    <ToolbarSpacer />
+ *    <ToolbarItem>
+ *      <SplitButton :text="'Insert'" :items="splitItems"> </SplitButton>
+ *    </ToolbarItem>
+ *    <ToolbarSeparator />
+ *    <ToolbarItem>
+ *      <Button :icon="'cut'" :title="'Cut'"> Cut </Button>
+ *    </ToolbarItem>
+ *  </Toolbar>
+ *  </template>
+ *  ```
+ */
+declare const ToolbarSeparator: DefineComponent<{}, any, {}, {}, {}, {}, {}, {}, string, {}, {}, {}>;
+export { ToolbarSeparator, ToolbarSeparatorVue2 };

package/dist/esm/toolbar/tools/ToolbarSeparator.js

@@ -0,0 +1,56 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { ToolbarItem } from './ToolbarItem.js';
+/**
+ * @hidden
+ */
+
+var ToolbarSeparatorVue2 = {
+  name: 'KendoToolbarItem',
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  render: function render(createElement) {
+    var h = gh || createElement;
+    return (// @ts-ignore
+      h(ToolbarItem, {
+        "class": "k-separator"
+      })
+    );
+  }
+};
+/**
+ * Represents the [Kendo UI for Vue ToolbarSeparator component]({% slug overview_toolbar %}).  A separator element for the sub-elements of the Toolbar.
+ *
+ *  ```jsx
+ *  <template>
+ *    <Toolbar>
+ *    <ToolbarItem>
+ *      <ButtonGroup>
+ *        <Button :icon="'bold'" :title="'Bold'" :togglable="true" />
+ *        <Button :icon="'italic'" :title="'Italic'" :togglable="true" />
+ *        <Button :icon="'underline'" :title="'Underline'" :togglable="true" />
+ *      </ButtonGroup>
+ *    </ToolbarItem>
+ *    <ToolbarSpacer />
+ *    <ToolbarItem>
+ *      <SplitButton :text="'Insert'" :items="splitItems"> </SplitButton>
+ *    </ToolbarItem>
+ *    <ToolbarSeparator />
+ *    <ToolbarItem>
+ *      <Button :icon="'cut'" :title="'Cut'"> Cut </Button>
+ *    </ToolbarItem>
+ *  </Toolbar>
+ *  </template>
+ *  ```
+ */
+
+var ToolbarSeparator = ToolbarSeparatorVue2;
+export { ToolbarSeparator, ToolbarSeparatorVue2 };

package/dist/esm/toolbar/tools/ToolbarSpacer.d.ts

@@ -0,0 +1,36 @@
+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;
+};
+/**
+ * @hidden
+ */
+declare let ToolbarSpacerVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<{}>, {}, RecordPropsDefinition<{}>>;
+/**
+ * Represents the [Kendo UI for Vue ToolbarSpacer component]({% slug overview_toolbar %}).  A spacer element for the sub-elements of the Toolbar.
+ *
+ *  ```jsx
+ *  <template>
+ *    <Toolbar>
+ *    <ToolbarItem>
+ *      <ButtonGroup>
+ *        <Button :icon="'bold'" :title="'Bold'" :togglable="true" />
+ *        <Button :icon="'italic'" :title="'Italic'" :togglable="true" />
+ *        <Button :icon="'underline'" :title="'Underline'" :togglable="true" />
+ *      </ButtonGroup>
+ *    </ToolbarItem>
+ *    <ToolbarSpacer />
+ *    <ToolbarItem>
+ *      <SplitButton :text="'Insert'" :items="splitItems"> </SplitButton>
+ *    </ToolbarItem>
+ *    <ToolbarSeparator />
+ *    <ToolbarItem>
+ *      <Button :icon="'cut'" :title="'Cut'"> Cut </Button>
+ *    </ToolbarItem>
+ *  </Toolbar>
+ *  </template>
+ *  ```
+ */
+declare const ToolbarSpacer: DefineComponent<{}, any, {}, {}, {}, {}, {}, {}, string, {}, {}, {}>;
+export { ToolbarSpacer, ToolbarSpacerVue2 };

package/dist/esm/toolbar/tools/ToolbarSpacer.js

@@ -0,0 +1,53 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+/**
+ * @hidden
+ */
+
+var ToolbarSpacerVue2 = {
+  name: 'KendoToolbarItem',
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  render: function render(createElement) {
+    var h = gh || createElement;
+    return h("span", {
+      "class": "k-spacer"
+    });
+  }
+};
+/**
+ * Represents the [Kendo UI for Vue ToolbarSpacer component]({% slug overview_toolbar %}).  A spacer element for the sub-elements of the Toolbar.
+ *
+ *  ```jsx
+ *  <template>
+ *    <Toolbar>
+ *    <ToolbarItem>
+ *      <ButtonGroup>
+ *        <Button :icon="'bold'" :title="'Bold'" :togglable="true" />
+ *        <Button :icon="'italic'" :title="'Italic'" :togglable="true" />
+ *        <Button :icon="'underline'" :title="'Underline'" :togglable="true" />
+ *      </ButtonGroup>
+ *    </ToolbarItem>
+ *    <ToolbarSpacer />
+ *    <ToolbarItem>
+ *      <SplitButton :text="'Insert'" :items="splitItems"> </SplitButton>
+ *    </ToolbarItem>
+ *    <ToolbarSeparator />
+ *    <ToolbarItem>
+ *      <Button :icon="'cut'" :title="'Cut'"> Cut </Button>
+ *    </ToolbarItem>
+ *  </Toolbar>
+ *  </template>
+ *  ```
+ */
+
+var ToolbarSpacer = ToolbarSpacerVue2;
+export { ToolbarSpacer, ToolbarSpacerVue2 };

package/dist/esm/util.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @hidden
+ */
+export declare const internalButtons = ".k-dropdownlist > .k-button,.k-colorpicker > .k-button";
+/**
+ * @hidden
+ */
+export declare const toolbarButtons: string[];
+/**
+ * @hidden
+ */
+declare const _default: {
+    styles: {
+        button: string;
+        flat: string;
+        outline: string;
+        clear: string;
+        primary: string;
+        'state-selected': string;
+        'button-icon': string;
+        'button-icontext': string;
+        'state-disabled': string;
+        'group-start': string;
+        'group-end': string;
+        'button-group': string;
+        'button-group-stretched': string;
+        ltr: string;
+        rtl: string;
+    };
+};
+export default _default;

package/dist/esm/util.js

@@ -0,0 +1,40 @@
+/**
+ * @hidden
+ */
+var styles = {
+    button: 'k-button',
+    'flat': 'k-flat',
+    'outline': 'k-outline',
+    'clear': 'k-button-clear',
+    'primary': 'k-primary',
+    'state-selected': 'k-selected',
+    'button-icon': 'k-button-icon',
+    'button-icontext': 'k-button-icontext',
+    'state-disabled': 'k-disabled',
+    'group-start': 'k-group-start',
+    'group-end': 'k-group-end',
+    'button-group': 'k-button-group',
+    'button-group-stretched': 'k-button-group-stretched',
+    'ltr': 'k-ltr',
+    'rtl': 'k-rtl'
+};
+var notInternalButton = ':not(.k-dropdownlist > .k-button):not(.k-colorpicker > .k-button)';
+/**
+ * @hidden
+ */
+export var internalButtons = '.k-dropdownlist > .k-button,.k-colorpicker > .k-button';
+/**
+ * @hidden
+ */
+export var toolbarButtons = [
+    'button' + notInternalButton,
+    '.k-button-group > button',
+    '.k-dropdownlist',
+    '.k-colorpicker'
+];
+/**
+ * @hidden
+ */
+export default {
+    styles: styles
+};