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

package/dist/esm/FloatingActionButton/FloatingActionButtonItem.js

@@ -0,0 +1,121 @@
+// @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 { classNames, getRef, getTabIndex, getTemplate, setRef } from '@progress/kendo-vue-common';
+/**
+ * @hidden
+ */
+
+var FloatingActionButtonItemVue2 = {
+  name: 'KendoVueFloatingActionButtonItem',
+  props: {
+    disabled: Boolean,
+    focused: Boolean,
+    index: Number,
+    icon: String,
+    item: [String, Function, Object],
+    dataItem: Object,
+    text: String,
+    tabIndex: Number,
+    customProp: [String, Function, Object]
+  },
+  // @ts-ignore
+  emits: {
+    'click': null,
+    'down': null
+  },
+  mounted: function mounted() {
+    this.element = getRef(this, 'element');
+  },
+  computed: {
+    itemClassNames: function itemClassNames() {
+      return classNames('k-fab-item', {
+        'k-focus': this.focused,
+        'k-disabled': this.disabled
+      });
+    }
+  },
+  methods: {
+    handleClick: function handleClick(event) {
+      if (this.$props.index !== undefined && !this.$props.disabled) {
+        this.$emit('click', event, this.$props.index);
+      }
+    },
+    focusElement: function focusElement() {
+      if (this.$el) {
+        this.$el.focus();
+      }
+    },
+    onDown: function onDown(event) {
+      this.$emit('down', event);
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    var elementRef = ref(null);
+    return {
+      v3: v3,
+      elementRef: elementRef
+    };
+  },
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var _a = this.$props,
+        disabled = _a.disabled,
+        id = _a.id,
+        tabIndex = _a.tabIndex,
+        dataItem = _a.dataItem,
+        customProp = _a.customProp;
+    var text = dataItem.text,
+        icon = dataItem.icon;
+    var item;
+    var itemDefaultRendering = h("li", {
+      ref: setRef(this, 'element'),
+      id: id,
+      attrs: this.v3 ? undefined : {
+        id: id,
+        role: 'menuitem',
+        tabindex: getTabIndex(tabIndex, disabled),
+        "aria-disabled": disabled,
+        "aria-label": "".concat(text || '', " floatingactionbutton item")
+      },
+      "class": this.itemClassNames,
+      role: 'menuitem',
+      tabindex: getTabIndex(tabIndex, disabled),
+      "aria-disabled": disabled,
+      "aria-label": "".concat(text || '', " floatingactionbutton item"),
+      onClick: this.handleClick,
+      on: this.v3 ? undefined : {
+        "click": this.handleClick,
+        "mousedown": this.onDown,
+        "pointerdown": this.onDown
+      },
+      onMousedown: this.onDown,
+      onPointerdown: this.onDown
+    }, [text && h("span", {
+      "class": "k-fab-item-text"
+    }, [text]), icon && h("span", {
+      "class": classNames("k-fab-item-icon k-icon k-i-".concat(icon))
+    })]);
+    item = getTemplate.call(this, {
+      h: h,
+      template: this.$props.item,
+      defaultRendering: itemDefaultRendering,
+      additionalProps: this.$props,
+      additionalListeners: {
+        click: this.handleClick
+      }
+    });
+    return item;
+  }
+};
+/**
+ * @hidden
+ */
+
+var FloatingActionButtonItem = FloatingActionButtonItemVue2;
+export { FloatingActionButtonItem, FloatingActionButtonItemVue2 };

package/dist/esm/FloatingActionButton/interfaces/FloatingActionButtonHandle.d.ts

@@ -0,0 +1,13 @@
+/**
+ * The FloatingActionButton ref.
+ */
+export interface FloatingActionButtonHandle {
+    /**
+     * The FloatingActionButton element.
+     */
+    element: HTMLButtonElement | null;
+    /**
+     * Focus the FloatingActionButton.
+     */
+    focus: () => void;
+}

package/dist/esm/FloatingActionButton/interfaces/FloatingActionButtonHandle.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/FloatingActionButton/interfaces/FloatingActionButtonPopupSettings.d.ts

@@ -0,0 +1,24 @@
+import { Align, PopupAnimation } from '@progress/kendo-vue-popup';
+/**
+ * Represents the settings that can be passed to the Popup inside the FloatingActionButtonPopupSettings.
+ */
+export interface FloatingActionButtonPopupSettings {
+    /**
+     * Controls the popup animation. By default, the open and close animations are enabled
+     * [see example]({% slug customization_floatingactionbutton %}#toc-popup-behavior).
+     */
+    animate?: boolean | PopupAnimation;
+    /**
+     * Specifies a list of CSS classes that are used for styling the popup
+     * [see example]({% slug customization_floatingactionbutton %}#toc-popup-behavior).
+     */
+    popupClass?: string;
+    /**
+     * @hidden
+     */
+    anchorAlign?: Align;
+    /**
+     * @hidden
+     */
+    popupAlign?: Align;
+}

package/dist/esm/FloatingActionButton/interfaces/FloatingActionButtonPopupSettings.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/FloatingActionButton/interfaces/FloatingActionButtonProps.d.ts

@@ -0,0 +1,243 @@
+import { FloatingActionButtonPopupSettings } from './FloatingActionButtonPopupSettings';
+import { FloatingActionButtonAlign } from '../models/align';
+import { FloatingActionButtonAlignOffset } from '../models/align-offset';
+import { FloatingActionButtonEvent, FloatingActionButtonItemEvent } from '../models/events';
+import { FloatingActionButtonPositionMode } from '../models/position-mode';
+import { FloatingActionButtonSize } from '../models/size';
+import { FloatingActionButtonThemeColor } from '../models/theme-color';
+/**
+ * @hidden
+ */
+declare type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
+/**
+ * Represents the props of the [Kendo UI for Vue
+ *  FloatingActionButton component]({% slug overview_floatingactionbutton %}).
+ */
+export interface FloatingActionButtonProps extends Omit<any, 'onBlur' | 'onFocus' | 'onKeyDown' | 'onClick'> {
+    /**
+     * Specifies a list of CSS classes that will be added to the Floating Action Button.
+     */
+    className?: string;
+    /**
+     * Represents the `dir` HTML attribute. This is used to
+     *  switch from LTR to RTL [see example]({% slug rtl_buttons %}).
+     */
+    dir?: string;
+    /**
+     * Sets the `id` property of the root HTML element.
+     */
+    id?: string;
+    /**
+     * Specifies if the Floating Action Button is
+     *  disabled [see example]({% slug disabled_floatingactionbutton %}). Defaults to `false`.
+     */
+    disabled?: boolean;
+    /**
+     * If defined it specifies if the Floating Action Button is opened.
+     */
+    opened?: boolean;
+    /**
+     * Defines the icon rendered in the Floating Action
+     *  Button [see example]({% slug contenttypes_floatingactionbutton %}).
+     */
+    icon?: string;
+    /**
+     * Defines a CSS class or multiple classes separated by spaces which are applied
+     * to a `span` element inside the Floating Action Button. Allows the usage of custom icons.
+     */
+    iconClass?: string;
+    /**
+     * Specifies the text of the Floating Action
+     *  Button [see example]({% slug contenttypes_floatingactionbutton %}).
+     */
+    text?: string;
+    /**
+     * Specifies the horizontal and vertical offset applied to the Floating Action Button
+     * [see example]({% slug positioning_floatingactionbutton %}).
+     *
+     * Normally, the floating button is positioned next to the boundaries of its container
+     *  with a default offset of `16px`.
+     *
+     * Positive offsets move floating buttons, which are in a corner, further from that corner. Buttons, which are
+     * not in a corner, can be moved along the container's boundary or towards the center of the container.
+     *
+     * A negative offset can be used to force a button to overflow the boundaries of its container.
+     *
+     * The possible keys are:
+     * * `x`&mdash;Sets the horizontal offset of the Floating Action Button.
+     * * `y`&mdash;Sets the vertical offset of the Floating Action Button.
+     *
+     */
+    alignOffset?: FloatingActionButtonAlignOffset;
+    /**
+     * Specifies the horizontal and vertical alignment of the Floating Action Button in relation to the container
+     * [see example]({% slug positioning_floatingactionbutton %}).
+     *
+     * > Centering the Floating Action Button in both horizontal and vertical dimension is not a typical use case.
+     * Still, it is possible to achieve such a layout with appropriate offsets.
+     * Setting horizontal: "center" and vertical: "middle"
+     * at the same time is not supported.
+     *
+     * The possible keys are:
+     * * `horizontal`&mdash; Defines the possible horizontal alignment of the Floating Action Button..
+     *   * `start`&mdash;Uses the start point of the container.
+     *   * `center`&mdash;Uses the center point of the container.
+     *   * `end`(Default)&mdash;Uses the end point of the container
+     * * `vertical`&mdash; Defines the possible vertical alignment of the Floating Action Button..
+     *   * `top`&mdash;Uses the top point of the container.
+     *   * `middle`&mdash;Uses the middle point of the container.
+     *   * `bottom`(Default)&mdash;Uses the bottom point of the container.
+     *
+     */
+    align?: FloatingActionButtonAlign;
+    /**
+     * Specifies the position mode of the Floating Action Button
+     * [see example]({% slug positioning_floatingactionbutton %}). It is based on the
+     * [CSS position](https://developer.mozilla.org/en-US/docs/Web/CSS/position) rule.
+     *
+     * * The possible values are:
+     * * 'fixed' (Default)
+     * * 'absolute'
+     */
+    positionMode?: FloatingActionButtonPositionMode;
+    /**
+     * Specifies the shape of the Floating Action Button
+     * [see example]({% slug appearance_floatingactionbutton %}).
+     *
+     * The possible values are:
+     * * `pill`(Default)&mdash;Applies border radius equal to half of the height of the FloatingActionButton.
+     * If the Floating Action Button contains only icon, the shape will be circle.
+     * * `circle`&mdash;Applies circle shape on the FloatingActionButton.
+     * * `rectangle`&mdash;Applies no border radius on the FloatingActionButton.
+     * * `rounded`&mdash;Applies default border radius on the FloatingActionButton.
+     * * `square`&mdash;Applies square shape on the FloatingActionButton.
+     *
+     */
+    shape?: null | 'rectangle' | 'square' | string;
+    /**
+     * Configures the `roundness` of the Floating Action Button.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - circle
+     * - full
+     * - null&mdash;Does not set a rounded `class`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
+    /**
+     * Configures the `fillMode` of the Floating Action Button.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - flat
+     * - link
+     * - null&mdash;Does not set a fillMode `class`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'outline' | 'flat' | 'link' | string;
+    /**
+     * Specifies the size of the Floating Action Button
+     * [see example]({% slug appearance_floatingactionbutton %}).
+     *
+     * The possible values are:
+     * * `small`&mdash;Applies half of the default padding, e.g. `8px`.
+     * * `medium` (Default)&mdash;Applies the default padding, e.g. `16px`.
+     * * `large`&mdash;Applies one and one half of the default padding, e.g. `24px`.
+     *
+     */
+    size?: FloatingActionButtonSize;
+    /**
+     * Specifies the theme color of the Floating Action Button
+     * [see example]({% slug appearance_floatingactionbutton %}).
+     *
+     * The possible values are:
+     * * `primary` (Default)&mdash;Applies coloring based on the primary theme color.
+     * * `secondary`&mdash;Applies coloring based on the secondary theme color.
+     * * `tertiary`&mdash; Applies coloring based on the tertiary theme color.
+     * * `info`&mdash;Applies coloring based on the info theme color.
+     * * `success`&mdash; Applies coloring based on the success theme color.
+     * * `warning`&mdash; Applies coloring based on the warning theme color.
+     * * `error`&mdash; Applies coloring based on the error theme color.
+     * * `dark`&mdash; Applies coloring based on the dark theme color.
+     * * `light`&mdash; Applies coloring based on the light theme color.
+     * * `inverse`&mdash; Applies coloring based on the inverse theme color.
+     *
+     */
+    themeColor?: FloatingActionButtonThemeColor;
+    /**
+     * The collection of items that will be rendered in the Floating Action Button
+     * [see example]({% slug databinding_floatingactionbutton %}).
+     */
+    items?: any;
+    /**
+     * Overrides the default component responsible for visualizing a single item
+     * [see example]({% slug customization_floatingactionbutton %}#toc-items-rendering).
+     *
+     * The default Component is: [FloatingActionButtonItem]({% slug api_buttons_floatingactionbuttonitem %}).
+     */
+    item?: any;
+    /**
+     * Represents the additional props that will be passed to the Popup inside the Floating Action Button
+     * [see example]({% slug customization_floatingactionbutton %}#toc-popup-behavior).
+     */
+    popupSettings?: FloatingActionButtonPopupSettings;
+    /**
+     * Specifies the `tabIndex` of the main button.
+     */
+    tabIndex?: number;
+    /**
+     * Specifies the `accessKey` of the main button.
+     */
+    accessKey?: string;
+    /**
+     * Fires when the Floating Action Button is focused
+     * [see example]({% slug overview_floatingactionbutton %}#toc-events).
+     */
+    onFocus?: (event: FloatingActionButtonEvent) => void;
+    /**
+     * Fires when the Floating Action Button is blurred
+     * [see example]({% slug overview_floatingactionbutton %}#toc-events).
+     */
+    onBlur?: (event: FloatingActionButtonEvent) => void;
+    /**
+     * Fires when the Floating Action Button is clicked.
+     */
+    onClick?: (event: FloatingActionButtonEvent) => void;
+    /**
+     * Fires when the Floating Action Button Item is clicked
+     * [see example]({% slug overview_floatingactionbutton %}#toc-events).
+     */
+    onItemclick?: (event: FloatingActionButtonItemEvent) => void;
+    /**
+     * Triggers onKeyDown event
+     * [see example]({% slug overview_floatingactionbutton %}#toc-events).
+     */
+    onKeydown?: (event: FloatingActionButtonEvent) => void;
+    /**
+     * Triggers onMousedown event
+     * [see example]({% slug overview_floatingactionbutton %}#toc-events).
+     */
+    onMousedown?: (event: FloatingActionButtonEvent) => void;
+    /**
+     * Triggers onMouseup event
+     * [see example]({% slug overview_floatingactionbutton %}#toc-events).
+     */
+    onMouseup?: (event: FloatingActionButtonEvent) => void;
+    /**
+     * Fires when the popup which contains the items is opened
+     * [see example]({% slug overview_floatingactionbutton %}#toc-events).
+     */
+    onOpen?: (event: FloatingActionButtonEvent) => void;
+    /**
+     * Fires when the popup which contains the items is closed
+     * [see example]({% slug overview_floatingactionbutton %}#toc-events).
+     */
+    onClose?: (event: FloatingActionButtonEvent) => void;
+}
+export {};

package/dist/esm/FloatingActionButton/interfaces/FloatingActionButtonProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/FloatingActionButton/models/align-offset.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Specifies the horizontal and vertical offset applied to the Floating Action Button.
+ *
+ * Normally, the floating button is positioned next to the boundaries of its container with a default offset of `16px`.
+ *
+ * Positive offsets move floating buttons, which are in a corner, further from that corner. Buttons, which are
+ * not in a corner, can be moved along the container's boundary or towards the center of the container.
+ *
+ * A negative offset can be used to force a button to overflow the boundaries of its container.
+ */
+export interface FloatingActionButtonAlignOffset {
+    /**
+     * Sets the horizontal offset of the Floating Action Button.
+     */
+    x?: number | string;
+    /**
+     * Sets the vertical offset of the Floating Action Button.
+     */
+    y?: number | string;
+}

package/dist/esm/FloatingActionButton/models/align-offset.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/FloatingActionButton/models/align.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Specifies the horizontal and vertical alignment of the Floating Action Button in relation to the container.
+ *
+ * > Centering the Floating Action Button in both horizontal and vertical dimension is not a typical use case.
+ * Still, it is possible to achieve such a layout with appropriate offsets. Setting horizontal: "center" and
+ * vertical: "middle" at the same time is not supported.
+ */
+export interface FloatingActionButtonAlign {
+    /**
+     * Defines the possible horizontal alignment of the Floating Action Button.
+     *
+     * The available values are:
+     * - `start`—Uses the start point of the container.
+     * - `center`—Uses the center point of the container.
+     * - `end`(Default)—Uses the end point of the container.
+     */
+    horizontal?: 'start' | 'center' | 'end';
+    /**
+     * Defines the possible vertical alignment of the Floating Action Button.
+     *
+     * The available values are:
+     * - `top`—Uses the top point of the container.
+     * - `middle`—Uses the middle point of the container.
+     * - `bottom`(Default)—Uses the bottom point of the container.
+     */
+    vertical?: 'top' | 'middle' | 'bottom';
+}

package/dist/esm/FloatingActionButton/models/align.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/FloatingActionButton/models/events.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Represents the return type of the FloatingActionButton events.
+ */
+export interface FloatingActionButtonEvent {
+}
+/**
+ * Represents the return type of the FloatingActionButtonItemEvent.
+ */
+export interface FloatingActionButtonItemEvent {
+    /**
+     * The clicked item props.
+     */
+    itemProps?: any;
+    /**
+     * The zero-based index of the clicked item.
+     */
+    itemIndex: number;
+}

package/dist/esm/FloatingActionButton/models/events.js

@@ -0,0 +1,2 @@
+// import { FloatingActionButtonItemProps } from '../../main.js';
+export {};

package/dist/esm/FloatingActionButton/models/position-mode.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Specifies the position mode of the Floating Action Button. It is based on the
+ * [CSS position](https://developer.mozilla.org/en-US/docs/Web/CSS/position) rule.
+ *
+ * * The possible values are:
+ * * 'absolute' (Default)
+ * * 'fixed'
+ */
+export declare type FloatingActionButtonPositionMode = 'absolute' | 'fixed';

package/dist/esm/FloatingActionButton/models/position-mode.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/FloatingActionButton/models/shape.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Specifies the shape of the Floating Action Button.
+ *
+ * The possible values are:
+ * * `full`(Default)—Applies border radius equal to half of the height of the FloatingActionButton.
+ * If the Floating Action Button contains only icon, the shape will be circle.
+ * * `circle`—Applies circle shape on the FloatingActionButton.
+ * * `rectangle`—Applies no border radius on the FloatingActionButton.
+ * * `rounded`—Applies default border radius on the FloatingActionButton.
+ * * `square`—Applies square shape on the FloatingActionButton.
+ *
+ */
+export declare type FloatingActionButtonShape = 'rectangle' | 'rounded' | 'pill' | 'circle' | 'square';

package/dist/esm/FloatingActionButton/models/shape.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/FloatingActionButton/models/size.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Specifies the size of the Floating Action Button.
+ *
+ * The possible values are:
+ * * `small`—Applies half of the default padding, e.g. `8px`.
+ * * `medium` (Default)—Applies the default padding, e.g. `16px`.
+ * * `large`—Applies one and one half of the default padding, e.g. `24px`.
+ *
+ */
+export declare type FloatingActionButtonSize = 'small' | 'medium' | 'large';

package/dist/esm/FloatingActionButton/models/size.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/FloatingActionButton/models/theme-color.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Specifies the theme color of the Floating Action Button..
+ *
+ * The possible values are:
+ * * `primary` (Default)—Applies coloring based on the primary theme color.
+ * * `secondary`—Applies coloring based on the secondary theme color.
+ * * `tertiary`— Applies coloring based on the tertiary theme color.
+ * * `info`—Applies coloring based on the info theme color.
+ * * `success`— Applies coloring based on the success theme color.
+ * * `warning`— Applies coloring based on the warning theme color.
+ * * `error`— Applies coloring based on the error theme color.
+ * * `dark`— Applies coloring based on the dark theme color.
+ * * `light`— Applies coloring based on the light theme color.
+ * * `inverse`— Applies coloring based on the inverse theme color.
+ *
+ */
+export declare type FloatingActionButtonThemeColor = 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';

package/dist/esm/FloatingActionButton/models/theme-color.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/FloatingActionButton/utils.d.ts

@@ -0,0 +1,27 @@
+import { Align } from '@progress/kendo-vue-popup';
+import { FloatingActionButtonAlignOffset } from './models/align-offset';
+import { FloatingActionButtonAlign } from './models/align';
+/**
+ * @hidden
+ */
+export declare const DEFAULT_OFFSET = "16px";
+/**
+ * @hidden
+ */
+export declare const toStringValues: (val: number | string) => string;
+/**
+ * @hidden
+ */
+export declare const getAnchorAlign: (fabAlign: FloatingActionButtonAlign, rtl?: boolean) => Align;
+/**
+ * @hidden
+ */
+export declare const getPopupAlign: (fabAlign: FloatingActionButtonAlign, rtl: boolean) => Align;
+/**
+ * @hidden
+ */
+export declare const getTextDirectionClass: (rtl: string, hAlign: any) => any;
+/**
+ * @hidden
+ */
+export declare const position: (ref: any, align: FloatingActionButtonAlign, alignOffset: FloatingActionButtonAlignOffset | undefined, isRtl: boolean) => void;