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

package/dist/esm/drawer/DrawerItem.js

@@ -0,0 +1,164 @@
+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 { getTabIndex, getDefaultSlots } from '@progress/kendo-vue-common';
+/**
+ * @hidden
+ */
+
+var DrawerItemVue2 = {
+  name: 'KendoDrawerItem',
+  // @ts-ignore
+  emits: {
+    click: null
+  },
+  props: {
+    index: Number,
+    text: String,
+    icon: String,
+    separator: Boolean,
+    selected: Boolean,
+    disabled: Boolean,
+    targetItem: [Object, Array]
+  },
+  inject: {
+    kendoDrawer: {
+      default: null
+    }
+  },
+  computed: {
+    itemClassNames: function itemClassNames() {
+      var _a = this.$props,
+          disabled = _a.disabled,
+          selected = _a.selected;
+      return {
+        'k-drawer-item': true,
+        'k-selected': selected,
+        'k-disabled': disabled
+      };
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var defaultSlot = getDefaultSlots(this);
+    var _a = this.$props,
+        text = _a.text,
+        icon = _a.icon,
+        separator = _a.separator,
+        disabled = _a.disabled,
+        selected = _a.selected,
+        tabIndex = _a.tabIndex;
+    var _b = this.kendoDrawer,
+        expanded = _b.expanded,
+        mini = _b.mini,
+        item = _b.item;
+    return separator ? h("li", {
+      "class": 'k-drawer-item k-drawer-separator',
+      role: "presentation",
+      attrs: this.v3 ? undefined : {
+        role: "presentation"
+      }
+    }) : h("li", {
+      "class": this.itemClassNames,
+      role: "option",
+      attrs: this.v3 ? undefined : {
+        role: "option",
+        "aria-selected": selected,
+        "aria-disabled": disabled,
+        tabindex: getTabIndex(tabIndex, disabled)
+      },
+      "aria-selected": selected,
+      "aria-disabled": disabled,
+      onClick: this.handleClick,
+      on: this.v3 ? undefined : {
+        "click": this.handleClick
+      },
+      tabindex: getTabIndex(tabIndex, disabled)
+    }, [!item ? [icon && h("span", {
+      "class": 'k-icon ' + icon
+    }), !expanded && mini ? null : h("span", {
+      "class": 'k-item-text'
+    }, [text])] : defaultSlot]);
+  },
+  methods: {
+    focus: function focus(e) {
+      if (this.$el) {
+        this.$el.focus(e);
+      }
+    },
+    handleClick: function handleClick() {
+      if (!this.disabled) {
+        var handle = {
+          element: this.$el,
+          focus: this.focus,
+          props: __assign(__assign({}, this.$props), this.$attrs)
+        };
+        this.$emit('click', handle, this.$props.index);
+      }
+    }
+  }
+};
+/**
+ * Represents the [Kendo UI for Vue Drawer component]({% slug overview_drawer %}).
+ *
+ * ```jsx
+ *     <Drawer
+ *       :expanded="expanded"
+ *       :position="position"
+ *       :mode="mode"
+ *       :mini="true"
+ *       :width="175"
+ *       :items="
+ *         items.map((item, index) => ({
+ *           ...item,
+ *           selected: index === selectedId,
+ *         }))
+ *       "
+ *       :item="'CustomItem'"
+ *       @select="onSelect"
+ *     >
+ *       <template v-slot:CustomItem="{ props }">
+ *         <DrawerItem v-bind="props" @click="props.onClick">
+ *           <span :class="'k-icon flag ' + props.flag" />
+ *           <div class="item-descr-wrap">
+ *             <div>{{ props.text }}</div>
+ *             <span class="item-descr">Capital of {{ props.country }}</span>
+ *           </div>
+ *         </DrawerItem>
+ *       </template>
+ *       <DrawerContent>
+ *         <router-view />
+ *       </DrawerContent>
+ *     </Drawer>
+ * ```
+ *
+ */
+
+var DrawerItem = DrawerItemVue2;
+export { DrawerItem, DrawerItemVue2 };

package/dist/esm/drawer/DrawerNavigation.d.ts

@@ -0,0 +1,50 @@
+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 { DrawerNavigationProps } from './interfaces/DrawerNavigationProps';
+/**
+ * @hidden
+ */
+export interface DrawerNavigationHandle {
+    element: HTMLDivElement | null;
+    focus: () => void;
+}
+/**
+ * @hidden
+ */
+export interface DrawerNavigationState {
+}
+/**
+ * @hidden
+ */
+export interface DrawerNavigationComputed {
+    navigationClassNames: object;
+}
+/**
+ * @hidden
+ */
+export interface DrawerNavigationMethods {
+    [key: string]: any;
+    focus: (e: any) => void;
+}
+/**
+ * @hidden
+ */
+export interface DrawerNavigationData {
+}
+/**
+ * @hidden
+ */
+export interface DrawerNavigationAll extends Vue2type, DrawerNavigationMethods, DrawerNavigationData, DrawerNavigationComputed, DrawerNavigationState {
+}
+/**
+ * @hidden
+ */
+declare let DrawerNavigationVue2: ComponentOptions<DrawerNavigationAll, DefaultData<DrawerNavigationData>, DefaultMethods<DrawerNavigationAll>, DrawerNavigationComputed, RecordPropsDefinition<DrawerNavigationProps>>;
+/**
+ * @hidden
+ */
+declare const DrawerNavigation: DefineComponent<DrawerNavigationProps, any, DrawerNavigationData, DrawerNavigationComputed, DrawerNavigationMethods, {}, {}, {}, string, DrawerNavigationProps, DrawerNavigationProps, {}>;
+export { DrawerNavigation, DrawerNavigationVue2 };

package/dist/esm/drawer/DrawerNavigation.js

@@ -0,0 +1,216 @@
+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 { DrawerItem } from './DrawerItem.js';
+import { getDefaultSlots, templateRendering, getListeners, getTemplate } from '@progress/kendo-vue-common';
+/**
+ * @hidden
+ */
+
+var DEFAULT_EXPANDED_WIDTH = 240;
+/**
+ * @hidden
+ */
+
+var DEFAULT_MINI_WIDTH = 50;
+/**
+ * @hidden
+ */
+
+var DEFAULT_ANIMATION = {
+  type: 'slide',
+  duration: 200
+};
+/**
+ * @hidden
+ */
+
+var NO_ANIMATION = {
+  type: 'slide',
+  duration: 0
+};
+/**
+ * @hidden
+ */
+
+var DrawerNavigationVue2 = {
+  name: 'KendoDrawerNavigation',
+  props: {
+    item: [Object],
+    tabIndex: Number
+  },
+  inject: {
+    kendoDrawer: {
+      default: null
+    }
+  },
+  computed: {
+    navigationClassNames: function navigationClassNames() {
+      var position = this.kendoDrawer.position;
+      return {
+        'k-widget k-drawer': true,
+        'k-drawer-start': position === 'start',
+        'k-drawer-end': position === 'end'
+      };
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var defaultSlot = getDefaultSlots(this);
+    var _a = this.kendoDrawer,
+        animation = _a.animation,
+        expanded = _a.expanded,
+        mode = _a.mode,
+        position = _a.position,
+        mini = _a.mini,
+        dir = _a.dir,
+        width = _a.width,
+        miniWidth = _a.miniWidth,
+        items = _a.items;
+    var customSettings = typeof animation !== 'boolean' ? animation : animation === false ? NO_ANIMATION : DEFAULT_ANIMATION;
+    var navWidth = width ? width : DEFAULT_EXPANDED_WIDTH;
+    var navMiniWidth = miniWidth ? miniWidth : DEFAULT_MINI_WIDTH;
+    var expandPush = {
+      opacity: 1,
+      flexBasis: navWidth + 'px',
+      WebkitTransition: 'all ' + (customSettings && customSettings.duration) + 'ms',
+      transition: 'all ' + (customSettings && customSettings.duration) + 'ms'
+    };
+    var expandOverlay = {
+      opacity: 1,
+      transform: 'translateX(0px)',
+      WebkitTransition: 'all ' + (customSettings && customSettings.duration) + 'ms',
+      transition: 'all ' + (customSettings && customSettings.duration) + 'ms'
+    };
+    var collapsePush = {
+      opacity: !mini ? 0 : 1,
+      flexBasis: !mini ? 0 : navMiniWidth + 'px',
+      WebkitTransition: 'all ' + (customSettings && customSettings.duration) + 'ms',
+      transition: 'all ' + (customSettings && customSettings.duration) + 'ms'
+    };
+    var collapseOverlay = {
+      opacity: 0,
+      transform: 'translateX(-100%)',
+      WebkitTransition: 'all ' + (customSettings && customSettings.duration) + 'ms',
+      transition: 'all ' + (customSettings && customSettings.duration) + 'ms'
+    };
+    var collapseOverlayRtl = {
+      opacity: 0,
+      transform: 'translateX(100%)',
+      WebkitTransition: 'all ' + (customSettings && customSettings.duration) + 'ms',
+      transition: 'all ' + (customSettings && customSettings.duration) + 'ms'
+    };
+    var collapseOverlayMini = {
+      transform: 'translateX(0%)',
+      WebkitTransitionDuration: (customSettings && customSettings.duration) + 'ms',
+      transitionDuration: (customSettings && customSettings.duration) + 'ms'
+    };
+    var drawerAnimation = expanded ? mode === 'push' ? expandPush : expandOverlay : mode === 'push' ? collapsePush : dir === 'ltr' && position === 'start' || dir === 'rtl' && position === 'end' ? mini ? collapseOverlayMini : collapseOverlay : mini ? collapseOverlayMini : collapseOverlayRtl;
+    var drawerItems = items && h("ul", {
+      "class": 'k-drawer-items',
+      role: "listbox",
+      attrs: this.v3 ? undefined : {
+        role: "listbox",
+        title: "drawer-list",
+        "aria-expanded": expanded
+      },
+      title: "drawer-list",
+      "aria-expanded": expanded
+    }, [items.map(function (element, index) {
+      var item = this.$props.item;
+
+      if (item && !item.type && !item.render) {
+        item = templateRendering.call(this, this.$props.item, getListeners.call(this));
+      }
+
+      var itemDefaultRendering = // @ts-ignore
+      h(DrawerItem, {
+        key: index,
+        index: index,
+        attrs: this.v3 ? undefined : {
+          index: index,
+          text: element.text,
+          icon: element.icon,
+          separator: element.separator,
+          selected: element.selected,
+          targetItem: element.targetItem
+        },
+        onClick: this.onSelect,
+        on: this.v3 ? undefined : {
+          "click": this.onSelect
+        },
+        text: element.text,
+        icon: element.icon,
+        separator: element.separator,
+        selected: element.selected,
+        targetItem: element.targetItem
+      });
+      var itemRendering = getTemplate.call(this, {
+        h: h,
+        template: item,
+        defaultRendering: itemDefaultRendering,
+        additionalProps: __assign(__assign({}, element), {
+          index: index
+        }),
+        additionalListeners: {
+          click: this.onSelect
+        }
+      });
+      return itemRendering;
+    }, this)]);
+    var drawerNavigation = h("div", {
+      style: drawerAnimation,
+      "class": this.navigationClassNames
+    }, [h("div", {
+      "class": 'k-drawer-wrapper',
+      style: !expanded && mini && mode === 'overlay' ? {
+        width: navMiniWidth + 'px'
+      } : {
+        width: navWidth + 'px'
+      }
+    }, [drawerItems || defaultSlot])]);
+    return drawerNavigation;
+  },
+  methods: {
+    focus: function focus(e) {
+      if (this.$el) {
+        this.$el.focus(e);
+      }
+    },
+    onSelect: function onSelect(e, index) {
+      this.$emit('select', e, index);
+    }
+  }
+};
+/**
+ * @hidden
+ */
+
+var DrawerNavigation = DrawerNavigationVue2;
+export { DrawerNavigation, DrawerNavigationVue2 };

package/dist/esm/drawer/context/DrawerContext.d.ts

@@ -0,0 +1,17 @@
+import { DrawerAnimation } from '../interfaces/DrawerAnimation';
+import { DrawerItemProps } from '../interfaces/DrawerItemProps';
+/** @hidden */
+export declare type DrawerContextType = {
+    animation?: boolean | DrawerAnimation;
+    expanded?: boolean;
+    mode?: 'overlay' | 'push';
+    position?: 'start' | 'end';
+    mini?: boolean;
+    dir?: string;
+    items?: Array<DrawerItemProps>;
+    item?: any;
+    width?: number;
+    miniWidth?: number;
+    onOverlayClick?: (event: any) => void;
+    onSelect?: (target: any, idx: number) => void;
+};

package/dist/esm/drawer/context/DrawerContext.js

@@ -0,0 +1,14 @@
+/**
+ * @hidden
+ */
+var defaultContext = {
+    animation: true,
+    expanded: false,
+    mode: 'overlay',
+    position: 'start',
+    mini: false,
+    dir: 'ltr',
+    width: 240,
+    miniWidth: 50
+};
+export {};

package/dist/esm/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/esm/drawer/interfaces/DrawerAnimation.js

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

package/dist/esm/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/esm/drawer/interfaces/DrawerContentProps.js

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

package/dist/esm/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/esm/drawer/interfaces/DrawerItemHandle.js

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

package/dist/esm/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/esm/drawer/interfaces/DrawerItemProps.js

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

package/dist/esm/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/esm/drawer/interfaces/DrawerNavigationProps.js

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

package/dist/esm/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/esm/drawer/interfaces/DrawerProps.js

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

package/dist/esm/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/esm/drawer/interfaces/DrawerSelectEvent.js

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