@progress/kendo-vue-layout 2.6.3 → 2.6.4

package/dist/es/drawer/interfaces/DrawerAnimation.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Specifies the animation settings of the Drawer.
+ *
+ */
+export interface DrawerAnimation {
+    /**
+     * Specifies the type of the Drawer animation.
+     */
+    type?: 'slide';
+    /**
+     * Specifies the duration of the Drawer animation ([see example]({% slug display_modes_drawer %}#toc-expand-modes)) .
+     */
+    duration: number;
+}

package/dist/es/drawer/interfaces/DrawerContentProps.d.ts

@@ -0,0 +1,5 @@
+/**
+ * The properties of the [Kendo UI for Vue DrawerContent component]({% slug overview_drawer %}).
+ */
+export interface DrawerContentProps {
+}

package/dist/es/drawer/interfaces/DrawerItemHandle.d.ts

@@ -0,0 +1,17 @@
+/**
+ * The DrawerItem ref.
+ */
+export interface DrawerItemHandle {
+    /**
+     * The DrawerItem element.
+     */
+    element: any;
+    /**
+     * Focus the DrawerItem.
+     */
+    focus: (e: any) => void;
+    /**
+     * The props of the DrawerItem.
+     */
+    props?: any;
+}

package/dist/es/drawer/interfaces/DrawerItemProps.d.ts

@@ -0,0 +1,43 @@
+/**
+ * An interface for the Drawer items.
+ */
+export interface DrawerItemProps {
+    /**
+     * Specifies if the Drawer item is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Defines the name for an existing icon in a Kendo UI for Vue theme.
+     * The icon is rendered inside the Drawer item by a `span.k-icon` element.
+     */
+    icon?: string;
+    /**
+     * Specifies if the Drawer item is initially selected.
+     */
+    selected?: boolean;
+    /**
+     * Specifies if this is a separator item.
+     */
+    separator?: boolean;
+    /**
+     * Specifies the text content of the Drawer item.
+     */
+    text?: string;
+    /**
+     * Sets the index of the DrawerItem that is used to identify it.
+     */
+    index?: number;
+    /**
+     * Sets the `tabIndex` property of the DrawerItem.
+     * Defaults to `0`.
+     */
+    tabIndex?: number;
+    /**
+     * Sets a custom property. Contained in the DrawerItem props that are returned from the `onSelect` Drawer event.
+     */
+    [customProp: string]: any;
+    /**
+     * @hidden
+     */
+    onSelect?(target?: any, idx?: number): void;
+}

package/dist/es/drawer/interfaces/DrawerNavigationProps.d.ts

@@ -0,0 +1,5 @@
+/**
+ * The properties of the [Kendo UI for Vue DrawerNavigation component]({% slug overview_drawer %}).
+ */
+export interface DrawerNavigationProps {
+}

package/dist/es/drawer/interfaces/DrawerProps.d.ts

@@ -0,0 +1,69 @@
+import { DrawerSelectEvent } from './DrawerSelectEvent';
+import { DrawerAnimation } from '../interfaces/DrawerAnimation';
+import { DrawerItemProps } from './DrawerItemProps';
+/**
+ * The properties of the [Kendo UI for Vue Drawer component]({% slug overview_drawer %}).
+ */
+export interface DrawerProps {
+    /**
+     * Specifies the animation settings of the Drawer.
+     * If boolean enables or disables the default animation.
+     * Use DrawerAnimation to set slide animation with customizable duration option. Accepts a number in milliseconds.
+     */
+    animation?: boolean | DrawerAnimation;
+    /**
+     * Specifies the state of the Drawer. Defaults to `false` ([see example]({% slug expanded_state_drawer %})).
+     */
+    expanded?: boolean;
+    /**
+     * Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
+     */
+    dir?: string;
+    /**
+     * Specifies the mode in which the Drawer will be displayed.
+     * The possible values are `overlay` and `push`.
+     * Defaults to `overlay` ([see example]({% slug display_modes_drawer %}#toc-expand-modes)).
+     */
+    mode?: 'overlay' | 'push' | string;
+    /**
+     * Specifies the position of the Drawer.
+     * The possible values are `start` and `end` ([see example]({% slug positioning_drawer %})).
+     */
+    position?: 'start' | 'end' | string;
+    /**
+     * Sets the `tabIndex` property of the Drawer.
+     */
+    tabIndex?: number;
+    /**
+     * Enables the mini (compact) view of the Drawer which is displayed when the component is collapsed
+     * ([see example]({% slug display_modes_drawer %}#toc-mini-view))).
+     */
+    mini?: boolean;
+    /**
+     * Defines the width of the Drawer when the mini view is enabled and the component is collapsed. Defaults to `50`.
+     */
+    miniWidth?: number;
+    /**
+     * Defines the width of the Drawer when it is expanded. Defaults to `240`.
+     */
+    width?: number;
+    /**
+     * The collection of items that will be rendered in the Drawer ([see example]({% slug overview_drawer %})).
+     */
+    items?: Array<DrawerItemProps>;
+    /**
+     * Overrides the default component responsible for visualizing a single item ([see example]({% slug custom_rendering %})).
+     *
+     * The default Component is: [DrawerItem]({% slug api_layout_draweritem %}).
+     */
+    item?: any;
+    /**
+     * The event handler that will be fired when the overlay is clicked.
+     * Used in overlay mode only.
+     */
+    onOverlayClick?: (event: any) => void;
+    /**
+     * Fires when a Drawer item is selected.
+     */
+    onSelect?: (event: DrawerSelectEvent) => void;
+}

package/dist/es/drawer/interfaces/DrawerSelectEvent.d.ts

@@ -0,0 +1,13 @@
+/**
+ * The arguments for the `onSelect` Drawer event.
+ */
+export interface DrawerSelectEvent {
+    /**
+     * A Drawer item event target.
+     */
+    itemTarget: any;
+    /**
+     * The index of the selected Drawer item.
+     */
+    itemIndex: number;
+}

package/dist/es/main.d.ts

@@ -12,6 +12,27 @@ export * from './card/CardImage';
 export * from './card/CardSubtitle';
 export * from './card/CardFooter';
 export * from './card/Avatar';
+export * from './drawer/Drawer';
+export * from './drawer/interfaces/DrawerProps';
+export * from './drawer/DrawerNavigation';
+export * from './drawer/interfaces/DrawerNavigationProps';
+export * from './drawer/DrawerContent';
+export * from './drawer/interfaces/DrawerContentProps';
+export * from './drawer/DrawerItem';
+export * from './drawer/interfaces/DrawerItemHandle';
+export * from './drawer/interfaces/DrawerItemProps';
+export * from './drawer/interfaces/DrawerSelectEvent';
+export * from './drawer/interfaces/DrawerAnimation';
+export * from './stepper/Stepper';
+export * from './stepper/interfaces/StepperProps';
+export * from './stepper/interfaces/StepperHandle';
+export * from './stepper/interfaces/StepperChangeEvent';
+export * from './stepper/interfaces/StepperFocusEvent';
+export * from './stepper/Step';
+export * from './stepper/interfaces/StepProps';
+export * from './stepper/interfaces/StepHandle';
+export * from './stepper/interfaces/StepChangeEvent';
+export * from './stepper/interfaces/StepFocusEvent';
 export * from './menu/components/Menu';
 export * from './menu/components/MenuItemLink';
 export * from './menu/components/MenuItemArrow';

package/dist/es/main.js

@@ -12,6 +12,27 @@ export * from './card/CardImage';
 export * from './card/CardSubtitle';
 export * from './card/CardFooter';
 export * from './card/Avatar';
+export * from './drawer/Drawer';
+export * from './drawer/interfaces/DrawerProps';
+export * from './drawer/DrawerNavigation';
+export * from './drawer/interfaces/DrawerNavigationProps';
+export * from './drawer/DrawerContent';
+export * from './drawer/interfaces/DrawerContentProps';
+export * from './drawer/DrawerItem';
+export * from './drawer/interfaces/DrawerItemHandle';
+export * from './drawer/interfaces/DrawerItemProps';
+export * from './drawer/interfaces/DrawerSelectEvent';
+export * from './drawer/interfaces/DrawerAnimation';
+export * from './stepper/Stepper';
+export * from './stepper/interfaces/StepperProps';
+export * from './stepper/interfaces/StepperHandle';
+export * from './stepper/interfaces/StepperChangeEvent';
+export * from './stepper/interfaces/StepperFocusEvent';
+export * from './stepper/Step';
+export * from './stepper/interfaces/StepProps';
+export * from './stepper/interfaces/StepHandle';
+export * from './stepper/interfaces/StepChangeEvent';
+export * from './stepper/interfaces/StepFocusEvent';
 export * from './menu/components/Menu';
 export * from './menu/components/MenuItemLink';
 export * from './menu/components/MenuItemArrow';

package/dist/es/menu/MenuProps.d.ts

@@ -29,11 +29,11 @@ export interface MenuProps {
      */
     openOnClick?: boolean;
     /**
-     * A React functional or class component which is used for rendering the innermost part of the Menu item ([see example]({% slug rendering_menu %}#toc-items)). By default, the innermost item part includes only the text for the item.
+     * A Vue functional or class component which is used for rendering the innermost part of the Menu item ([see example]({% slug rendering_menu %}#toc-items)). By default, the innermost item part includes only the text for the item.
      */
     itemRender?: any;
     /**
-     * A React functional or class component which is used for rendering the link of the item ([see example]({% slug rendering_menu %}#toc-links)). The item link is a part of the visual representation of the item which, by default, includes an arrow, icon, and text.
+     * A Vue functional or class component which is used for rendering the link of the item ([see example]({% slug rendering_menu %}#toc-links)). The item link is a part of the visual representation of the item which, by default, includes an arrow, icon, and text.
      */
     linkRender?: any;
     /**

package/dist/es/menu/components/Menu.js

@@ -75,7 +75,11 @@ var Menu = {
     // }
     this.mouseOverHandler.OpenOnClick = this.$props.openOnClick;
   },
-  destroyed: function destroyed() {
+  destroyed: !!gh ? undefined : function () {
+    this.clearItemHoverAndLeaveRequestsIfApplicable();
+  },
+  // @ts-ignore
+  unmounted: function unmounted() {
     this.clearItemHoverAndLeaveRequestsIfApplicable();
   },
   data: function data() {

package/dist/es/menu/models/BaseMenuItem.d.ts

@@ -27,15 +27,15 @@ export interface BaseMenuItem {
      */
     cssStyle?: any;
     /**
-     * A React functional or class component which is used for rendering the innermost part of the Menu item ([see example]({% slug rendering_menu %}#toc-items)). By default, the innermost item part includes only the text for the item.
+     * A Vue functional or class component which is used for rendering the innermost part of the Menu item ([see example]({% slug rendering_menu %}#toc-items)). By default, the innermost item part includes only the text for the item.
      */
     render?: any;
     /**
-     * A React functional or class component which is used for rendering the link of the item ([see example]({% slug rendering_menu %}#toc-links)). The item link is a part of the visual representation of the item which, by default, includes an arrow, icon, and text.
+     * A Vue functional or class component which is used for rendering the link of the item ([see example]({% slug rendering_menu %}#toc-links)). The item link is a part of the visual representation of the item which, by default, includes an arrow, icon, and text.
      */
     linkRender?: any;
     /**
-     * A React functional or class component which is used for rendering content instead of the item children ([see example]({% slug rendering_menu %}#toc-content)).
+     * A Vue functional or class component which is used for rendering content instead of the item children ([see example]({% slug rendering_menu %}#toc-content)).
      */
     contentRender?: any;
     /**

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-layout',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1636532314,
+    publishDate: 1638285607,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
 };

package/dist/es/stepper/Step.d.ts

@@ -0,0 +1,38 @@
+import { DefineComponent } from '../additionalTypes';
+import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+import { StepProps } from './interfaces/StepProps';
+/**
+ * @hidden
+ */
+export interface StepState {
+}
+/**
+ * @hidden
+ */
+export interface StepComputed {
+    itemClassNames: object;
+    itemStyles: object;
+}
+/**
+ * @hidden
+ */
+export interface StepMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface StepData {
+}
+/**
+ * @hidden
+ */
+export interface StepAll extends Vue, StepMethods, StepData, StepComputed, StepState {
+}
+declare let Step: ComponentOptions<StepAll, DefaultData<StepData>, DefaultMethods<StepAll>, StepComputed, RecordPropsDefinition<StepProps>>;
+declare const StepVue3: DefineComponent<StepProps, any, StepData, StepComputed, StepMethods, {}, {}, {}, string, StepProps, StepProps, {}>;
+export { Step, StepVue3 };

package/dist/es/stepper/Step.js

@@ -0,0 +1,197 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var inject = allVue.inject;
+import { focusFirstFocusableChild, getDefaultSlots } from '@progress/kendo-vue-common';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { DEFAULT_ANIMATION_DURATION, NO_ANIMATION } from './contants';
+import { messages, optionalText } from './messages'; // tslint:enable:max-line-length
+
+var Step = {
+  name: 'KendoStep',
+  props: {
+    current: Boolean,
+    disabled: Boolean,
+    icon: String,
+    index: Number,
+    isValid: Boolean,
+    focused: Boolean,
+    label: String,
+    optional: Boolean,
+    tabIndex: {
+      type: Number,
+      default: 0
+    },
+    text: String,
+    animationDuration: [Boolean, Number],
+    isVertical: Boolean,
+    item: [String, Object, Boolean, Function],
+    linear: Boolean,
+    mode: String,
+    numOfSteps: Number,
+    value: Number,
+    successIcon: String,
+    errorIcon: String
+  },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  computed: {
+    itemClassNames: function itemClassNames() {
+      var _a = this.$props,
+          current = _a.current,
+          disabled = _a.disabled,
+          focused = _a.focused,
+          index = _a.index,
+          isValid = _a.isValid,
+          optional = _a.optional;
+      return {
+        'k-step': true,
+        'k-step-first': index === 0,
+        'k-step-last': this.numOfSteps && index === this.numOfSteps - 1,
+        'k-step-done': index < this.value,
+        'k-step-current': current,
+        'k-step-optional': optional,
+        'k-step-disabled': disabled,
+        'k-step-focus': focused,
+        'k-step-error': isValid !== undefined && !isValid,
+        'k-step-success': isValid
+      };
+    },
+    itemStyles: function itemStyles() {
+      var index = this.$props.index;
+      var allowClick = !this.linear || index === this.value - 1 || index === this.value || index === this.value + 1;
+      return {
+        maxWidth: !this.isVertical ? "calc(100% / " + this.numOfSteps + ")" : undefined,
+        pointerEvents: !allowClick ? 'none' : undefined
+      };
+    }
+  },
+  // @ts-ignore
+  setup: !gh ? undefined : function () {
+    var v3 = !!gh;
+    var kendoLocalizationService = inject('kendoLocalizationService', {});
+    return {
+      v3: v3,
+      kendoLocalizationService: kendoLocalizationService
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var defaultSlots = getDefaultSlots(this);
+    var _a = this.$props,
+        current = _a.current,
+        disabled = _a.disabled,
+        focused = _a.focused,
+        icon = _a.icon,
+        index = _a.index,
+        isValid = _a.isValid,
+        label = _a.label,
+        optional = _a.optional,
+        tabIndex = _a.tabIndex,
+        text = _a.text,
+        animationDuration = _a.animationDuration,
+        item = _a.item,
+        linear = _a.linear,
+        mode = _a.mode,
+        value = _a.value,
+        successIcon = _a.successIcon,
+        errorIcon = _a.errorIcon;
+    var allowClick = !linear || index === value - 1 || index === value || index === value + 1;
+    var isInLabel = mode === 'labels' || Boolean(icon) && Boolean(label);
+    var localizationService = provideLocalizationService(this);
+
+    var localizeMessage = function localizeMessage(message) {
+      return localizationService.toLanguageString(message, messages[message]);
+    };
+
+    var optionalMessage = localizeMessage(optionalText);
+    var progressAnimation = typeof animationDuration === 'number' ? animationDuration : animationDuration !== false ? DEFAULT_ANIMATION_DURATION : NO_ANIMATION;
+    var validationIconClasses = isValid ? successIcon ? "" + successIcon : 'k-icon k-i-check' : errorIcon ? "" + errorIcon : 'k-icon k-i-warning';
+    var validationIcons = h("span", {
+      "class": 'k-step-indicator-icon ' + validationIconClasses,
+      "aria-hidden": "true",
+      attrs: this.v3 ? undefined : {
+        "aria-hidden": "true"
+      }
+    });
+
+    var stepIndicator = function stepIndicator() {
+      return mode !== 'labels' ? h("span", {
+        "class": "k-step-indicator",
+        "aria-hidden": true,
+        attrs: this.v3 ? undefined : {
+          "aria-hidden": true
+        },
+        style: {
+          transitionDuration: progressAnimation + 'ms'
+        }
+      }, [icon ? !isInLabel && isValid !== undefined ? validationIcons : h("span", {
+        "class": "k-step-indicator-icon k-icon " + icon
+      }) : isValid !== undefined ? validationIcons : h("span", {
+        "class": "k-step-indicator-text"
+      }, [text ? text : index + 1])]) : null;
+    };
+
+    var stepLabel = function stepLabel() {
+      return h("span", {
+        "class": "k-step-label"
+      }, [label && h("span", {
+        "class": "k-step-text"
+      }, [label]), isInLabel && isValid !== undefined && validationIcons, optional && h("span", {
+        "class": "k-step-label-optional"
+      }, [optionalMessage])]);
+    };
+
+    return h("li", {
+      "class": this.itemClassNames,
+      style: this.itemStyles
+    }, [h("a", {
+      "class": "k-step-link",
+      title: label ? label : undefined,
+      attrs: this.v3 ? undefined : {
+        title: label ? label : undefined,
+        tabIndex: tabIndex ? tabIndex : focused ? 0 : -1,
+        "aria-current": current ? 'step' : undefined,
+        "aria-disabled": disabled || !allowClick || undefined,
+        "aria-invalid": isValid !== undefined && !isValid || undefined
+      },
+      onClick: this.handleClick,
+      on: this.v3 ? undefined : {
+        "click": this.handleClick,
+        "focusin": this.handleFocus
+      },
+      onFocusin: this.handleFocus,
+      tabIndex: tabIndex ? tabIndex : focused ? 0 : -1,
+      "aria-current": current ? 'step' : undefined,
+      "aria-disabled": disabled || !allowClick || undefined,
+      "aria-invalid": isValid !== undefined && !isValid || undefined
+    }, [!item ? [stepIndicator.call(this), stepLabel.call(this)] : defaultSlots])]);
+  },
+  methods: {
+    focus: function focus() {
+      if (this.$el) {
+        focusFirstFocusableChild(this.$el);
+      }
+    },
+    handleClick: function handleClick(event) {
+      if (!this.disabled) {
+        this.$emit('change', {
+          event: event,
+          value: this.index
+        });
+      }
+    },
+    handleFocus: function handleFocus(event) {
+      if (!this.disabled) {
+        this.$emit('focus', event);
+      }
+    }
+  }
+};
+var StepVue3 = Step;
+export { Step, StepVue3 };

package/dist/es/stepper/Stepper.d.ts

@@ -0,0 +1,39 @@
+import { DefineComponent } from '../additionalTypes';
+import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+import { StepperProps } from './interfaces/StepperProps';
+/**
+ * @hidden
+ */
+export interface StepperState {
+}
+/**
+ * @hidden
+ */
+export interface StepperComputed {
+}
+/**
+ * @hidden
+ */
+export interface StepperMethods {
+    [key: string]: any;
+    setStepper: () => void;
+}
+/**
+ * @hidden
+ */
+export interface StepperData {
+    focusedIdx: number;
+    currentDir: string;
+}
+/**
+ * @hidden
+ */
+export interface StepperAll extends Vue, StepperMethods, StepperData, StepperComputed, StepperState {
+}
+declare let Stepper: ComponentOptions<StepperAll, DefaultData<StepperData>, DefaultMethods<StepperAll>, StepperComputed, RecordPropsDefinition<StepperProps>>;
+declare const StepperVue3: DefineComponent<StepperProps, any, StepperData, StepperComputed, StepperMethods, {}, {}, {}, string, StepperProps, StepperProps, {}>;
+export { Stepper, StepperVue3 };