@progress/kendo-vue-layout 3.11.0 → 3.11.1-dev.202307111135

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

@@ -0,0 +1,124 @@
+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 open and close animations are disabled.
+     */
+    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;
+    /**
+     * 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/es/actionsheet/ActionSheet.js

@@ -0,0 +1,387 @@
+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';
+import { ActionSheetItem } from './ActionSheetItem';
+import { ActionSheetHeader } from './ActionSheetHeader';
+import { ActionSheetFooter } from './ActionSheetFooter';
+import { ActionSheetContent } from './ActionSheetContent';
+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,
+    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() {
+    var _this = this;
+    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 innerElements = ['.k-actionsheet-footer', '.k-actionsheet-content', '.k-actionsheet-titlebar'].map(function (selector) {
+          return FOCUSABLE_ELEMENTS.concat(_this.$props.navigatableElements).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
+            }
+          }
+        });
+        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;
+    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, 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, {
+        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, {
+        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, this.v3 ? function () {
+      return [contentTemplate];
+    } : [contentTemplate]), this.$props.footer &&
+    // @ts-ignore function children
+    h(ActionSheetFooter, 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, {
+      id: 'test',
+      attrs: this.v3 ? undefined : {
+        id: 'test',
+        direction: 'up',
+        componentChildStyle: animationStyles || this.bottomPosition,
+        transitionEnterDuration: animationDuration,
+        transitionExitDuration: animationDuration,
+        appear: expand
+      },
+      onExited: this.hideActionSheet,
+      on: this.v3 ? undefined : {
+        "exited": this.hideActionSheet
+      },
+      direction: 'up',
+      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/es/actionsheet/ActionSheetContent.d.ts

@@ -0,0 +1,41 @@
+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/es/actionsheet/ActionSheetContent.js

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

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

@@ -0,0 +1,41 @@
+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 };

package/dist/es/actionsheet/ActionSheetFooter.js

@@ -0,0 +1,31 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { getDefaultSlots } from '@progress/kendo-vue-common';
+/**
+ * @hidden
+ */
+var ActionSheetFooterVue2 = {
+  name: 'KendoActionSheetFooter',
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var defaultSlot = getDefaultSlots(this);
+    return h("div", {
+      "class": 'k-actionsheet-footer'
+    }, [defaultSlot]);
+  }
+};
+/**
+ * @hidden
+ */
+var ActionSheetFooter = ActionSheetFooterVue2;
+export { ActionSheetFooter, ActionSheetFooterVue2 };

package/dist/es/actionsheet/ActionSheetHeader.d.ts

@@ -0,0 +1,41 @@
+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 ActionSheetHeaderState {
+}
+/**
+ * @hidden
+ */
+export interface ActionSheetHeaderComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface ActionSheetHeaderMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface ActionSheetHeaderData {
+}
+/**
+ * @hidden
+ */
+export interface ActionSheetHeaderAll extends Vue2type, ActionSheetHeaderMethods, ActionSheetHeaderData, ActionSheetHeaderComputed, ActionSheetHeaderState {
+}
+/**
+ * @hidden
+ */
+declare let ActionSheetHeaderVue2: ComponentOptions<ActionSheetHeaderAll, DefaultData<ActionSheetHeaderData>, DefaultMethods<ActionSheetHeaderAll>, ActionSheetHeaderComputed, RecordPropsDefinition<{}>>;
+/**
+ * @hidden
+ */
+declare const ActionSheetHeader: DefineComponent<{}, any, ActionSheetHeaderData, ActionSheetHeaderComputed, ActionSheetHeaderMethods, {}, {}, {}, string, {}, {}, {}>;
+export { ActionSheetHeader, ActionSheetHeaderVue2 };