@progress/kendo-vue-layout 5.3.0-dev.202410141143 → 5.3.0-develop.2

package/dist/esm/drawer/DrawerItem.js

@@ -1,175 +0,0 @@
-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, Icon, getIconName } from '@progress/kendo-vue-common';
-import { provideLocalizationService } from '@progress/kendo-vue-intl';
-import { separatorAriaMessage, messages } from '../messages/main.js';
-/**
- * @hidden
- */
-var DrawerItemVue2 = {
-  name: 'KendoDrawerItem',
-  // @ts-ignore
-  emits: {
-    click: null
-  },
-  props: {
-    index: Number,
-    text: String,
-    icon: String,
-    svgIcon: Object,
-    separator: Boolean,
-    selected: Boolean,
-    disabled: Boolean,
-    targetItem: [Object, Array]
-  },
-  inject: {
-    kendoDrawer: {
-      default: null
-    },
-    kendoLocalizationService: {
-      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,
-      svgIcon = _a.svgIcon,
-      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;
-    var ariaLabelSeparator = provideLocalizationService(this).toLanguageString(separatorAriaMessage, messages[separatorAriaMessage]);
-    return separator ? h("li", {
-      "class": 'k-drawer-item k-drawer-separator',
-      role: "separator",
-      attrs: this.v3 ? undefined : {
-        role: "separator",
-        "aria-label": ariaLabelSeparator
-      },
-      "aria-label": ariaLabelSeparator
-    }) : h("li", {
-      "class": this.itemClassNames,
-      role: "menuitem",
-      attrs: this.v3 ? undefined : {
-        role: "menuitem",
-        "aria-label": text,
-        "aria-current": selected,
-        "aria-disabled": disabled,
-        tabindex: getTabIndex(tabIndex, disabled)
-      },
-      "aria-label": text,
-      "aria-current": selected,
-      "aria-disabled": disabled,
-      onClick: this.handleClick,
-      on: this.v3 ? undefined : {
-        "click": this.handleClick
-      },
-      tabindex: getTabIndex(tabIndex, disabled)
-    }, [!item ? [(icon || svgIcon) && h(Icon, {
-      name: getIconName(icon),
-      attrs: this.v3 ? undefined : {
-        name: getIconName(icon),
-        icon: svgIcon
-      },
-      icon: svgIcon
-    }), !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

@@ -1,50 +0,0 @@
-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

@@ -1,227 +0,0 @@
-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, WatermarkOverlay } 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],
-    header: [Object],
-    footer: [Object],
-    content: [Object],
-    tabIndex: Number,
-    showLicenseWatermark: Boolean
-  },
-  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 header = this.$props.header;
-    var footer = this.$props.footer;
-    var content = this.$props.content;
-    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 watermark = this.showLicenseWatermark ? h(WatermarkOverlay) : null;
-    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: "menubar",
-      attrs: this.v3 ? undefined : {
-        role: "menubar",
-        "aria-orientation": "vertical",
-        "aria-expanded": expanded
-      },
-      "aria-orientation": "vertical",
-      "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,
-          svgIcon: element.svgIcon,
-          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,
-        svgIcon: element.svgIcon,
-        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), watermark]);
-    var drawerHeader = getTemplate.call(this, {
-      h: h,
-      template: header
-    });
-    var drawerFooter = getTemplate.call(this, {
-      h: h,
-      template: footer
-    });
-    var drawerCustomContent = getTemplate.call(this, {
-      h: h,
-      template: content
-    });
-    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'
-      }
-    }, [drawerHeader, !content ? drawerItems || defaultSlot : drawerCustomContent, drawerFooter])]);
-    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

@@ -1,17 +0,0 @@
-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

@@ -1,14 +0,0 @@
-/**
- * @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

@@ -1,14 +0,0 @@
-/**
- * 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

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

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

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

package/dist/esm/drawer/interfaces/DrawerContentProps.js

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

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

@@ -1,17 +0,0 @@
-/**
- * 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

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

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

@@ -1,48 +0,0 @@
-import { SVGIcon } from '@progress/kendo-vue-common';
-/**
- * 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;
-    /**
-     * Defines an SVGIcon to be rendered within the Drawer item.
-     */
-    svgIcon?: SVGIcon;
-    /**
-     * 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

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

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

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

package/dist/esm/drawer/interfaces/DrawerNavigationProps.js

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

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

@@ -1,85 +0,0 @@
-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;
-    /**
-     * Provides the option to define a `header` in the Drawer component ([see example]({% slug custom_rendering %})).
-     * The header is rendered above the Drawer Items. By default, the property is not defined.
-     */
-    navigationHeader?: String | Object | Function;
-    /**
-     * Provides the option to define a `footer` in the Drawer component ([see example]({% slug custom_rendering %})).
-     * The footer is rendered below the Drawer Items. By default, the property is not defined.
-     */
-    navigationFooter?: String | Object | Function;
-    /**
-     * Provides the option to define a custom template inside the navigational section of the Drawer component ([see example]({% slug custom_rendering %})).
-     * When defined, the custom template will override the default [DrawerItem]({% slug api_layout_draweritem %}) rendering.
-     * By default, the property is not defined.
-     */
-    navigationContent?: String | Object | Function;
-}

package/dist/esm/drawer/interfaces/DrawerProps.js

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