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

package/dist/esm/actionsheet/ActionSheet.d.ts

@@ -1,140 +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 { Navigation } from '@progress/kendo-vue-common';
-import { ActionSheetItemProps } from './interfaces/ActionSheetItemProps';
-/**
- * The props of the ActionSheet component.
- */
-export interface ActionSheetProps {
-    /**
-     * The collection of items that will be rendered in the ActionSheet.
-     */
-    items?: ActionSheetItemProps[];
-    /**
-     * Specifies the text that is rendered under the title.
-     */
-    subTitle?: string;
-    /**
-     * Specifies the text that is rendered as title.
-     */
-    title?: string;
-    /**
-     * Fires when the modal overlay is clicked.
-     */
-    onClose?: (event: any) => void;
-    /**
-     * Fires when an ActionSheet item is clicked.
-     */
-    onItemselect?: (event: {
-        syntheticEvent: any;
-        title?: string;
-        item?: any;
-    }) => void;
-    /**
-     * Specifies the `tabIndex` of the ActionSheet.
-     */
-    tabIndex?: number;
-    /**
-     * Specifies if the ActionSheet can be navigatable with keyboard.
-     * Defaults to `true`.
-     */
-    navigatable?: boolean;
-    /**
-     * Specifies the selectors of the navigatable elements inside the templates of the ActionSheet.
-     */
-    navigatableElements?: string[];
-    /**
-     * Controls the popup animation. By default, the animation is enabled.
-     */
-    animation?: boolean;
-    /**
-     * @hidden
-     */
-    animationStyles?: any;
-    /**
-     * Specifies the duration of the transition for the entering and closing Animation. Defaults to `300ms`.
-     */
-    animationDuration?: number;
-    /**
-     * The CSS classes that will be rendered on the inner ActionSheet element.
-     */
-    className?: string;
-    /**
-     * The CSS classes that will be rendered on the DOM element that wraps the header section of the ActionSheet element.
-     */
-    headerClassName?: string;
-    /**
-     * The CSS classes that will be rendered on the DOM element that wraps the footer section of the ActionSheet element.
-     */
-    footerClassName?: string;
-    /**
-     * The CSS classes that will be rendered on the DOM element that wraps the content section of the ActionSheet element.
-     */
-    contentClassName?: string;
-    /**
-     * The custom Styles that will be applied on the DOM element that wraps the header section of the ActionSheet element.
-     */
-    headerStyle?: string;
-    /**
-     * Sets the header content of the ActionSheet either as string that is pointing to a slot template of as render function.
-     */
-    header?: string | Function;
-    /**
-     * Sets the content content of the ActionSheet either as string that is pointing to a slot template of as render function.
-     */
-    content?: string | Function;
-    /**
-     * Sets the footer content of the ActionSheet either as string that is pointing to a slot template of as render function.
-     */
-    footer?: string | Function;
-    /**
-     * Sets the item content of the ActionSheet either as string that is pointing to a slot template of as render function.
-     */
-    item?: string | Function;
-    /**
-     * Specifies the state of the ActionSheet.
-     */
-    expand?: boolean;
-}
-/**
- * @hidden
- */
-export interface ActionSheetState {
-    show?: boolean;
-    slide?: boolean;
-}
-/**
- * @hidden
- */
-export interface ActionSheetComputed {
-    [key: string]: any;
-}
-/**
- * @hidden
- */
-export interface ActionSheetMethods {
-    [key: string]: any;
-}
-/**
- * @hidden
- */
-export interface ActionSheetData {
-    navigation?: Navigation;
-}
-/**
- * @hidden
- */
-export interface ActionSheetAll extends Vue2type, ActionSheetMethods, ActionSheetData, ActionSheetComputed, ActionSheetState {
-}
-/**
- * @hidden
- */
-declare let ActionSheetVue2: ComponentOptions<ActionSheetAll, DefaultData<ActionSheetData>, DefaultMethods<ActionSheetAll>, ActionSheetComputed, RecordPropsDefinition<ActionSheetProps>>;
-/**
- * @hidden
- */
-declare const ActionSheet: DefineComponent<{}, any, ActionSheetData, ActionSheetComputed, ActionSheetMethods, {}, {}, {}, string, {}, {}, {}>;
-export { ActionSheet, ActionSheetVue2 };

package/dist/esm/actionsheet/ActionSheet.js

@@ -1,426 +0,0 @@
-var __spreadArray = this && this.__spreadArray || function (to, from, pack) {
-  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-    if (ar || !(i in from)) {
-      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-      ar[i] = from[i];
-    }
-  }
-  return to.concat(ar || Array.prototype.slice.call(from));
-};
-// @ts-ignore
-import * as Vue from 'vue';
-var allVue = Vue;
-var gh = allVue.h;
-var isV3 = allVue.version && allVue.version[0] === '3';
-import { Slide } from '@progress/kendo-vue-animation';
-import { validatePackage, Navigation, FOCUSABLE_ELEMENTS, classNames, getRef, setRef, templateRendering, getListeners, getTemplate, guid } from '@progress/kendo-vue-common';
-import { packageMetadata } from '../package-metadata.js';
-import { ActionSheetItem } from './ActionSheetItem.js';
-import { ActionSheetHeader } from './ActionSheetHeader.js';
-import { ActionSheetFooter } from './ActionSheetFooter.js';
-import { ActionSheetContent } from './ActionSheetContent.js';
-var DEFAULT_DURATION = 300;
-/**
- * @hidden
- */
-var ActionSheetVue2 = {
-  name: 'KendoActionSheet',
-  props: {
-    expand: Boolean,
-    animation: {
-      type: Boolean,
-      default: true
-    },
-    animationDuration: {
-      type: Number,
-      default: DEFAULT_DURATION
-    },
-    animationStyles: Object,
-    tabIndex: Number,
-    items: Array,
-    subTitle: String,
-    title: String,
-    className: String,
-    headerClassName: {
-      type: String,
-      default: undefined
-    },
-    contentClassName: {
-      type: String,
-      default: undefined
-    },
-    headerStyle: {
-      type: String,
-      default: undefined
-    },
-    footerClassName: {
-      type: String,
-      default: undefined
-    },
-    header: [String, Object, Function],
-    content: [String, Object, Function],
-    footer: [String, Object, Function],
-    item: [String, Object, Function],
-    navigatable: {
-      type: Boolean,
-      default: true
-    },
-    navigatableElements: {
-      type: Array,
-      default: function _default() {
-        return [];
-      }
-    }
-  },
-  created: function created() {
-    this.bottomPosition = {
-      bottom: '0px',
-      width: '100%'
-    };
-    this.guidId = guid();
-    validatePackage(packageMetadata);
-  },
-  mounted: function mounted() {
-    this.element = getRef(this, 'actionSheet');
-    if (this.$props.expand && !this.show) {
-      this.show = true;
-    }
-  },
-  updated: function updated() {
-    this.element = getRef(this, 'actionSheet');
-    if (this.$props.expand && !this.show) {
-      this.show = true;
-    }
-    if (this.element && !this.$props.className) {
-      this.element.style.setProperty('--kendo-actionsheet-height', 'auto');
-      this.element.style.setProperty('--kendo-actionsheet-max-height', 'none');
-    }
-    if (this.element) {
-      if (this.$props.navigatable) {
-        var navigatableElements_1 = this.$props.navigatableElements;
-        var innerElements = ['.k-actionsheet-footer', '.k-actionsheet-content', '.k-actionsheet-titlebar'].map(function (selector) {
-          return FOCUSABLE_ELEMENTS.concat(navigatableElements_1).map(function (focusableSelector) {
-            return "".concat(selector, " ").concat(focusableSelector);
-          });
-        });
-        var selectors = __spreadArray(['.k-actionsheet-item'], innerElements.flat(), true);
-        this.navigation = new Navigation({
-          tabIndex: this.$props.tabIndex || 0,
-          root: this.element,
-          rovingTabIndex: false,
-          selectors: selectors,
-          keyboardEvents: {
-            keydown: {
-              'Tab': this.onTab,
-              'Enter': this.onEnter,
-              'Escape': this.onEscape
-            }
-          }
-        });
-        navigatableElements_1.length !== 0 ? this.navigation.focusElement(this.element.querySelector(navigatableElements_1[0]), null)
-        // The above line focuses the first element of the $props.navigatableElements 
-        // if the props is defined. Otherwise, the released logic will be executed 
-        : this.navigation.focusElement(this.navigation.first, null);
-      }
-    }
-  },
-  data: function data() {
-    return {
-      show: false,
-      slide: false
-    };
-  },
-  computed: {
-    topGroupItems: function topGroupItems() {
-      var _a;
-      return (_a = this.items) === null || _a === void 0 ? void 0 : _a.filter(function (item) {
-        return !item.group || item.group === 'top';
-      });
-    },
-    bottomGroupItems: function bottomGroupItems() {
-      var _a;
-      return (_a = this.items) === null || _a === void 0 ? void 0 : _a.filter(function (item) {
-        return item.group === 'bottom';
-      });
-    },
-    shouldRenderSeparator: function shouldRenderSeparator() {
-      return this.topGroupItems && this.topGroupItems.length > 0 && this.bottomGroupItems && this.bottomGroupItems.length > 0;
-    }
-  },
-  // @ts-ignore
-  setup: !isV3 ? undefined : function () {
-    var v3 = !!isV3;
-    return {
-      v3: v3
-    };
-  },
-  render: function render(createElement) {
-    var h = gh || createElement;
-    var _a = this.$props,
-      title = _a.title,
-      subTitle = _a.subTitle,
-      animationStyles = _a.animationStyles,
-      animation = _a.animation,
-      expand = _a.expand,
-      tabIndex = _a.tabIndex,
-      className = _a.className,
-      animationDuration = _a.animationDuration,
-      headerClassName = _a.headerClassName,
-      contentClassName = _a.contentClassName,
-      footerClassName = _a.footerClassName;
-    var header = templateRendering.call(this, this.$props.header, getListeners.call(this));
-    var headerContent = getTemplate.call(this, {
-      h: h,
-      template: header,
-      defaultRendering: null
-    });
-    var content = templateRendering.call(this, this.$props.content, getListeners.call(this));
-    var contentTemplate = getTemplate.call(this, {
-      h: h,
-      template: content,
-      defaultRendering: null
-    });
-    var footer = templateRendering.call(this, this.$props.footer, getListeners.call(this));
-    var footerContent = getTemplate.call(this, {
-      h: h,
-      template: footer,
-      defaultRendering: null
-    });
-    var actionSheetPanel = h("div", {
-      "class": classNames('k-actionsheet', className, {
-        'k-actionsheet-bottom': !className
-      }),
-      role: "dialog",
-      attrs: this.v3 ? undefined : {
-        role: "dialog",
-        "aria-modal": "true",
-        "aria-hidden": false,
-        "aria-labelledby": this.guidId
-      },
-      "aria-modal": "true",
-      "aria-hidden": false,
-      "aria-labelledby": this.guidId,
-      ref: setRef(this, 'actionSheet'),
-      onKeydown: this.handleKeyDown,
-      on: this.v3 ? undefined : {
-        "keydown": this.handleKeyDown
-      }
-    }, [this.$props.header && !title && !subTitle &&
-    // @ts-ignore function children
-    h(ActionSheetHeader, {
-      headerClassName: headerClassName,
-      attrs: this.v3 ? undefined : {
-        headerClassName: headerClassName
-      }
-    }, this.v3 ? function () {
-      return [headerContent];
-    } : [headerContent]), (title || subTitle) && h("div", {
-      "class": "k-actionsheet-titlebar k-text-center"
-    }, [h("div", {
-      "class": "k-actionsheet-titlebar-group k-hbox"
-    }, [h("div", {
-      "class": 'k-actionsheet-title',
-      id: this.guidId,
-      attrs: this.v3 ? undefined : {
-        id: this.guidId
-      }
-    }, [title && h("div", [title]), subTitle && h("div", {
-      "class": "k-actionsheet-subtitle"
-    }, [subTitle])])])]), !this.$props.content ? h("div", {
-      "class": "k-actionsheet-content"
-    }, [h("div", {
-      "class": "k-list-ul",
-      role: "group",
-      attrs: this.v3 ? undefined : {
-        role: "group"
-      }
-    }, [this.topGroupItems && this.topGroupItems.map(function (item, idx) {
-      var itemContent = templateRendering.call(this, this.$props.item || item.content, getListeners.call(this));
-      return h(ActionSheetItem, {
-        style: item.style,
-        "class": item.class,
-        title: item.title,
-        attrs: this.v3 ? undefined : {
-          title: item.title,
-          description: item.description,
-          disabled: item.disabled,
-          id: idx,
-          item: item,
-          icon: item.icon,
-          svgIcon: item.svgIcon,
-          iconSize: item.iconSize,
-          iconColor: item.iconColor,
-          tabIndex: tabIndex || 0,
-          content: itemContent
-        },
-        description: item.description,
-        disabled: item.disabled,
-        id: idx,
-        key: idx,
-        item: item,
-        icon: item.icon,
-        svgIcon: item.svgIcon,
-        iconSize: item.iconSize,
-        iconColor: item.iconColor,
-        tabIndex: tabIndex || 0,
-        content: itemContent,
-        onClick: this.handleItemClick,
-        on: this.v3 ? undefined : {
-          "click": this.handleItemClick
-        }
-      });
-    }, this)]), this.shouldRenderSeparator && h("hr", {
-      "class": "k-hr"
-    }), h("div", {
-      "class": "k-list-ul",
-      role: "group",
-      attrs: this.v3 ? undefined : {
-        role: "group"
-      }
-    }, [this.bottomGroupItems && this.bottomGroupItems.map(function (item, idx) {
-      var _a;
-      return h(ActionSheetItem, {
-        style: item.style,
-        "class": item.class,
-        id: idx + (((_a = this.topGroupItems) === null || _a === void 0 ? void 0 : _a.length) || 0),
-        attrs: this.v3 ? undefined : {
-          id: idx + (((_a = this.topGroupItems) === null || _a === void 0 ? void 0 : _a.length) || 0),
-          item: item,
-          title: item.title,
-          description: item.description,
-          disabled: item.disabled,
-          icon: item.icon,
-          svgIcon: item.svgIcon,
-          iconSize: item.iconSize,
-          iconColor: item.iconColor,
-          tabIndex: tabIndex || 0
-        },
-        key: idx,
-        item: item,
-        title: item.title,
-        description: item.description,
-        disabled: item.disabled,
-        icon: item.icon,
-        svgIcon: item.svgIcon,
-        iconSize: item.iconSize,
-        iconColor: item.iconColor,
-        tabIndex: tabIndex || 0,
-        onClick: this.handleItemClick,
-        on: this.v3 ? undefined : {
-          "click": this.handleItemClick
-        }
-      });
-    }, this)])]) :
-    // @ts-ignore function children
-    h(ActionSheetContent, {
-      contentClassName: contentClassName,
-      attrs: this.v3 ? undefined : {
-        contentClassName: contentClassName
-      }
-    }, this.v3 ? function () {
-      return [contentTemplate];
-    } : [contentTemplate]), this.$props.footer &&
-    // @ts-ignore function children
-    h(ActionSheetFooter, {
-      footerClassName: footerClassName,
-      attrs: this.v3 ? undefined : {
-        footerClassName: footerClassName
-      }
-    }, this.v3 ? function () {
-      return [footerContent];
-    } : [footerContent])]);
-    return this.show && h("div", {
-      "class": "k-actionsheet-container"
-    }, [h("div", {
-      "class": "k-overlay",
-      onClick: this.handleOverlayClick,
-      on: this.v3 ? undefined : {
-        "click": this.handleOverlayClick
-      }
-    }), animation ?
-    // @ts-ignore function children
-    h(Slide, {
-      onExited: this.hideActionSheet,
-      on: this.v3 ? undefined : {
-        "exited": this.hideActionSheet
-      },
-      direction: 'up',
-      attrs: this.v3 ? undefined : {
-        direction: 'up',
-        componentChildStyle: animationStyles || this.bottomPosition,
-        transitionEnterDuration: animationDuration,
-        transitionExitDuration: animationDuration,
-        appear: expand
-      },
-      componentChildStyle: animationStyles || this.bottomPosition,
-      transitionEnterDuration: animationDuration,
-      transitionExitDuration: animationDuration,
-      appear: expand
-    }, this.v3 ? function () {
-      return [expand ? actionSheetPanel : null];
-    } : [expand ? actionSheetPanel : null]) : actionSheetPanel]);
-  },
-  methods: {
-    handleKeyDown: function handleKeyDown(e) {
-      if (this.$props.navigatable) {
-        this.navigation.triggerKeyboardEvent(e);
-      }
-    },
-    onTab: function onTab(target, nav, ev) {
-      ev.preventDefault();
-      if (ev.shiftKey) {
-        nav.focusPrevious(target);
-      } else {
-        nav.focusNext(target);
-      }
-    },
-    handleOverlayClick: function handleOverlayClick(ev) {
-      this.$emit('close', ev);
-      if (!this.$props.animation) {
-        this.hideActionSheet();
-      }
-    },
-    handleItemClick: function handleItemClick(ev) {
-      this.$emit('itemselect', ev);
-      if (!this.$props.animation) {
-        this.hideActionSheet();
-      }
-    },
-    onEnter: function onEnter(target, nav, ev) {
-      if (target.ariaDisabled) {
-        return;
-      }
-      var isItem = target.className && target.className.indexOf('k-actionsheet-item') !== -1;
-      var allItems = nav.elements.filter(function (e) {
-        return e.className.indexOf('k-actionsheet-item') !== -1;
-      });
-      if (isItem) {
-        ev.preventDefault();
-        var item = this.$props.items[allItems.indexOf(target)];
-        this.$emit('itemselect', {
-          syntheticEvent: ev,
-          item: item,
-          title: item && item.title
-        });
-      }
-      if (!this.$props.animation) {
-        this.hideActionSheet();
-      }
-    },
-    onEscape: function onEscape(_target, _nav, ev) {
-      ev.preventDefault();
-      this.$emit('close', ev);
-      if (!this.$props.animation) {
-        this.hideActionSheet();
-      }
-    },
-    hideActionSheet: function hideActionSheet() {
-      this.show = false;
-    }
-  }
-};
-/**
- * @hidden
- */
-var ActionSheet = ActionSheetVue2;
-export { ActionSheet, ActionSheetVue2 };

package/dist/esm/actionsheet/ActionSheetContent.d.ts

@@ -1,41 +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;
-};
-/**
- * @hidden
- */
-export interface ActionSheetContentState {
-}
-/**
- * @hidden
- */
-export interface ActionSheetContentComputed {
-    [key: string]: any;
-}
-/**
- * @hidden
- */
-export interface ActionSheetContentMethods {
-    [key: string]: any;
-}
-/**
- * @hidden
- */
-export interface ActionSheetContentData {
-}
-/**
- * @hidden
- */
-export interface ActionSheetContentAll extends Vue2type, ActionSheetContentMethods, ActionSheetContentData, ActionSheetContentComputed, ActionSheetContentState {
-}
-/**
- * @hidden
- */
-declare let ActionSheetContentVue2: ComponentOptions<ActionSheetContentAll, DefaultData<ActionSheetContentData>, DefaultMethods<ActionSheetContentAll>, ActionSheetContentComputed, RecordPropsDefinition<{}>>;
-/**
- * @hidden
- */
-declare const ActionSheetContent: DefineComponent<{}, any, ActionSheetContentData, ActionSheetContentComputed, ActionSheetContentMethods, {}, {}, {}, string, {}, {}, {}>;
-export { ActionSheetContent, ActionSheetContentVue2 };

package/dist/esm/actionsheet/ActionSheetContent.js

@@ -1,38 +0,0 @@
-// @ts-ignore
-import * as Vue from 'vue';
-var allVue = Vue;
-var gh = allVue.h;
-var isV3 = allVue.version && allVue.version[0] === '3';
-import { getDefaultSlots, classNames } from '@progress/kendo-vue-common';
-/**
- * @hidden
- */
-var ActionSheetContentVue2 = {
-  name: 'KendoActionSheetContent',
-  props: {
-    contentClassName: {
-      type: String,
-      default: undefined
-    }
-  },
-  // @ts-ignore
-  setup: !isV3 ? undefined : function () {
-    var v3 = !!isV3;
-    return {
-      v3: v3
-    };
-  },
-  render: function render(createElement) {
-    var h = gh || createElement;
-    var defaultSlot = getDefaultSlots(this);
-    var contentClassName = this.$props.contentClassName;
-    return h("div", {
-      "class": classNames('k-actionsheet-content', contentClassName)
-    }, [defaultSlot]);
-  }
-};
-/**
- * @hidden
- */
-var ActionSheetContent = ActionSheetContentVue2;
-export { ActionSheetContent, ActionSheetContentVue2 };

package/dist/esm/actionsheet/ActionSheetFooter.d.ts

@@ -1,41 +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;
-};
-/**
- * @hidden
- */
-export interface ActionSheetFooterState {
-}
-/**
- * @hidden
- */
-export interface ActionSheetFooterComputed {
-    [key: string]: any;
-}
-/**
- * @hidden
- */
-export interface ActionSheetFooterMethods {
-    [key: string]: any;
-}
-/**
- * @hidden
- */
-export interface ActionSheetFooterData {
-}
-/**
- * @hidden
- */
-export interface ActionSheetFooterAll extends Vue2type, ActionSheetFooterMethods, ActionSheetFooterData, ActionSheetFooterComputed, ActionSheetFooterState {
-}
-/**
- * @hidden
- */
-declare let ActionSheetFooterVue2: ComponentOptions<ActionSheetFooterAll, DefaultData<ActionSheetFooterData>, DefaultMethods<ActionSheetFooterAll>, ActionSheetFooterComputed, RecordPropsDefinition<{}>>;
-/**
- * @hidden
- */
-declare const ActionSheetFooter: DefineComponent<{}, any, ActionSheetFooterData, ActionSheetFooterComputed, ActionSheetFooterMethods, {}, {}, {}, string, {}, {}, {}>;
-export { ActionSheetFooter, ActionSheetFooterVue2 };