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

package/dist/npm/actionsheet/ActionSheet.js

@@ -0,0 +1,394 @@
+"use strict";
+
+var __spreadArray = undefined && undefined.__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));
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ActionSheetVue2 = exports.ActionSheet = void 0;
+// @ts-ignore
+var Vue = require("vue");
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+var kendo_vue_animation_1 = require("@progress/kendo-vue-animation");
+var kendo_vue_common_1 = require("@progress/kendo-vue-common");
+var package_metadata_1 = require("../package-metadata");
+var ActionSheetItem_1 = require("./ActionSheetItem");
+var ActionSheetHeader_1 = require("./ActionSheetHeader");
+var ActionSheetFooter_1 = require("./ActionSheetFooter");
+var ActionSheetContent_1 = require("./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 = (0, kendo_vue_common_1.guid)();
+    (0, kendo_vue_common_1.validatePackage)(package_metadata_1.packageMetadata);
+  },
+  mounted: function mounted() {
+    this.element = (0, kendo_vue_common_1.getRef)(this, 'actionSheet');
+    if (this.$props.expand && !this.show) {
+      this.show = true;
+    }
+  },
+  updated: function updated() {
+    var _this = this;
+    this.element = (0, kendo_vue_common_1.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 kendo_vue_common_1.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 kendo_vue_common_1.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 = kendo_vue_common_1.templateRendering.call(this, this.$props.header, kendo_vue_common_1.getListeners.call(this));
+    var headerContent = kendo_vue_common_1.getTemplate.call(this, {
+      h: h,
+      template: header,
+      defaultRendering: null
+    });
+    var content = kendo_vue_common_1.templateRendering.call(this, this.$props.content, kendo_vue_common_1.getListeners.call(this));
+    var contentTemplate = kendo_vue_common_1.getTemplate.call(this, {
+      h: h,
+      template: content,
+      defaultRendering: null
+    });
+    var footer = kendo_vue_common_1.templateRendering.call(this, this.$props.footer, kendo_vue_common_1.getListeners.call(this));
+    var footerContent = kendo_vue_common_1.getTemplate.call(this, {
+      h: h,
+      template: footer,
+      defaultRendering: null
+    });
+    var actionSheetPanel = h("div", {
+      "class": (0, kendo_vue_common_1.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: (0, kendo_vue_common_1.setRef)(this, 'actionSheet'),
+      onKeydown: this.handleKeyDown,
+      on: this.v3 ? undefined : {
+        "keydown": this.handleKeyDown
+      }
+    }, [this.$props.header && !title && !subTitle &&
+    // @ts-ignore function children
+    h(ActionSheetHeader_1.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 = kendo_vue_common_1.templateRendering.call(this, this.$props.item || item.content, kendo_vue_common_1.getListeners.call(this));
+      return h(ActionSheetItem_1.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_1.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_1.ActionSheetContent, this.v3 ? function () {
+      return [contentTemplate];
+    } : [contentTemplate]), this.$props.footer &&
+    // @ts-ignore function children
+    h(ActionSheetFooter_1.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(kendo_vue_animation_1.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;
+    }
+  }
+};
+exports.ActionSheetVue2 = ActionSheetVue2;
+/**
+ * @hidden
+ */
+var ActionSheet = ActionSheetVue2;
+exports.ActionSheet = ActionSheet;

package/dist/npm/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/npm/actionsheet/ActionSheetContent.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ActionSheetContentVue2 = exports.ActionSheetContent = void 0;
+// @ts-ignore
+var Vue = require("vue");
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+var kendo_vue_common_1 = require("@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 = (0, kendo_vue_common_1.getDefaultSlots)(this);
+    return h("div", {
+      "class": 'k-actionsheet-content'
+    }, [defaultSlot]);
+  }
+};
+exports.ActionSheetContentVue2 = ActionSheetContentVue2;
+/**
+ * @hidden
+ */
+var ActionSheetContent = ActionSheetContentVue2;
+exports.ActionSheetContent = ActionSheetContent;

package/dist/npm/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/npm/actionsheet/ActionSheetFooter.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ActionSheetFooterVue2 = exports.ActionSheetFooter = void 0;
+// @ts-ignore
+var Vue = require("vue");
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+var kendo_vue_common_1 = require("@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 = (0, kendo_vue_common_1.getDefaultSlots)(this);
+    return h("div", {
+      "class": 'k-actionsheet-footer'
+    }, [defaultSlot]);
+  }
+};
+exports.ActionSheetFooterVue2 = ActionSheetFooterVue2;
+/**
+ * @hidden
+ */
+var ActionSheetFooter = ActionSheetFooterVue2;
+exports.ActionSheetFooter = ActionSheetFooter;

package/dist/npm/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 };

package/dist/npm/actionsheet/ActionSheetHeader.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ActionSheetHeaderVue2 = exports.ActionSheetHeader = void 0;
+// @ts-ignore
+var Vue = require("vue");
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+var kendo_vue_common_1 = require("@progress/kendo-vue-common");
+/**
+ * @hidden
+ */
+var ActionSheetHeaderVue2 = {
+  name: 'KendoActionSheetHeader',
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var defaultSlot = (0, kendo_vue_common_1.getDefaultSlots)(this);
+    return h("div", {
+      "class": 'k-actionsheet-titlebar'
+    }, [defaultSlot]);
+  }
+};
+exports.ActionSheetHeaderVue2 = ActionSheetHeaderVue2;
+/**
+ * @hidden
+ */
+var ActionSheetHeader = ActionSheetHeaderVue2;
+exports.ActionSheetHeader = ActionSheetHeader;

package/dist/npm/actionsheet/ActionSheetItem.d.ts

@@ -0,0 +1,42 @@
+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 { ActionSheetItemProps } from './interfaces/ActionSheetItemProps';
+/**
+ * @hidden
+ */
+export interface ActionSheetItemState {
+}
+/**
+ * @hidden
+ */
+export interface ActionSheetItemComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface ActionSheetItemMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface ActionSheetItemData {
+}
+/**
+ * @hidden
+ */
+export interface ActionSheetItemAll extends Vue2type, ActionSheetItemMethods, ActionSheetItemData, ActionSheetItemComputed, ActionSheetItemState {
+}
+/**
+ * @hidden
+ */
+declare let ActionSheetItemVue2: ComponentOptions<ActionSheetItemAll, DefaultData<ActionSheetItemData>, DefaultMethods<ActionSheetItemAll>, ActionSheetItemComputed, RecordPropsDefinition<ActionSheetItemProps>>;
+/**
+ * @hidden
+ */
+declare const ActionSheetItem: DefineComponent<ActionSheetItemProps, any, ActionSheetItemData, ActionSheetItemComputed, ActionSheetItemMethods, {}, {}, {}, string, ActionSheetItemProps, ActionSheetItemProps, {}>;
+export { ActionSheetItem, ActionSheetItemVue2 };