@progress/kendo-vue-layout 3.6.3 → 3.6.4-dev.202210071340

package/dist/npm/appbar/AppBarSpacer.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AppBarSpacerVue2 = exports.AppBarSpacer = 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 AppBarSpacerVue2 = {
+  name: 'KendoAppBarSpacer',
+  props: {
+    width: [String, Number]
+  },
+  computed: {
+    spacerClasses: function spacerClasses() {
+      return {
+        'k-appbar-spacer': true,
+        'k-appbar-spacer-sized': this.width !== undefined
+      };
+    },
+    spacerStyles: function spacerStyles() {
+      return {
+        flexBasis: this.width !== undefined ? this.width : undefined
+      };
+    }
+  },
+  // @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("span", {
+      "class": this.spacerClasses,
+      style: this.spacerStyles
+    }, [defaultSlot]);
+  },
+  methods: {
+    focus: function focus() {
+      if (this.$el) {
+        (0, kendo_vue_common_1.focusFirstFocusableChild)(this.$el);
+      }
+    }
+  }
+};
+exports.AppBarSpacerVue2 = AppBarSpacerVue2;
+/**
+ * @hidden
+ */
+
+var AppBarSpacer = AppBarSpacerVue2;
+exports.AppBarSpacer = AppBarSpacer;

package/dist/npm/appbar/interfaces/AppBarProps.d.ts

@@ -0,0 +1,66 @@
+/**
+ * Represents the props of the [Kendo UI for Vue AppBar component]({% slug overview_appbar %}).
+ * Used to display information, actions, branding titles and additional navigation on the current screen.
+ */
+export interface AppBarProps {
+    /**
+     * Sets the `id` property of the root AppBar element.
+     */
+    id?: string;
+    /**
+     * Specifies the position of the AppBar ([see example]({% slug positioning_appbar %}#toc-position)).
+     *
+     * * The possible values are:
+     * * 'top' (Default)
+     * * 'bottom'
+     *
+     */
+    position?: AppBarPosition | string;
+    /**
+     * Specifies the positionMode of the AppBar ([see example]({% slug positioning_appbar %}#toc-positionmode)).
+     *
+     * * The possible values are:
+     * * 'static' (Default)
+     * * 'sticky'
+     * * 'fixed'
+     */
+    positionMode?: AppBarPositionMode | string;
+    /**
+     * Specifies the theme color of the AppBar ([see example]({% slug appearance_appbar %})).
+     *
+     * * The possible values are:
+     * * `inherit`
+     * * `light` (Default)
+     * * `dark`
+     *
+     */
+    themeColor?: AppBarThemeColor | string;
+}
+/**
+ * Specifies the position of the AppBar ([see example]({% slug positioning_appbar %}#toc-position)).
+ *
+ * * The possible values are:
+ * * 'top' (Default)
+ * * 'bottom'
+ *
+ */
+export declare type AppBarPosition = 'top' | 'bottom';
+/**
+ * Specifies the positionMode of the AppBar ([see example]({% slug positioning_appbar %}#toc-positionmode)).
+ *
+ * * The possible values are:
+ * * 'static' (Default)
+ * * 'sticky'
+ * * 'fixed'
+ */
+export declare type AppBarPositionMode = 'static' | 'sticky' | 'fixed';
+/**
+ * Specifies the theme color of the AppBar ([see example]({% slug appearance_appbar %})).
+ *
+ * * The possible values are:
+ * * `inherit`
+ * * `light` (Default)
+ * * `dark`
+ *
+ */
+export declare type AppBarThemeColor = 'light' | 'dark' | 'inherit';

package/dist/npm/appbar/interfaces/AppBarProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/appbar/interfaces/AppBarSectionProps.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Represents the props of the [Kendo UI for Vue AppBarSection component]({% slug contentarrangement_appbar %}#toc-defining-sections).
+ */
+export interface AppBarSectionProps {
+}

package/dist/npm/appbar/interfaces/AppBarSectionProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/appbar/interfaces/AppBarSpacerProps.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Represents the props of the [Kendo UI for Vue AppBarSpacer component]({% slug contentarrangement_appbar %}#toc-defining-spacings).
+ * Used to give additional white space between the AppBar sections and provides a way for customizing its width.
+ */
+export interface AppBarSpacerProps {
+    width?: string | number;
+}

package/dist/npm/appbar/interfaces/AppBarSpacerProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/bottomnavigation/BottomNavigation.d.ts

@@ -0,0 +1,45 @@
+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 { BottomNavigationProps } from './BottomNavigationProps';
+/**
+ * @hidden
+ */
+export interface BottomNavigationState {
+    navId: string;
+}
+/**
+ * @hidden
+ */
+export interface BottomNavigationComputed {
+    [key: string]: any;
+    navClasses: object;
+}
+/**
+ * @hidden
+ */
+export interface BottomNavigationMethods {
+    [key: string]: any;
+    focus: (e: any) => void;
+}
+/**
+ * @hidden
+ */
+export interface BottomNavigationData {
+}
+/**
+ * @hidden
+ */
+export interface BottomNavigationAll extends Vue2type, BottomNavigationMethods, BottomNavigationData, BottomNavigationComputed, BottomNavigationState {
+}
+/**
+ * @hidden
+ */
+declare let BottomNavigationVue2: ComponentOptions<BottomNavigationAll, DefaultData<BottomNavigationData>, DefaultMethods<BottomNavigationAll>, BottomNavigationComputed, RecordPropsDefinition<BottomNavigationProps>>;
+/**
+ * @hidden
+ */
+declare const BottomNavigation: DefineComponent<BottomNavigationProps, any, BottomNavigationData, BottomNavigationComputed, BottomNavigationMethods, {}, {}, {}, string, BottomNavigationProps, BottomNavigationProps, {}>;
+export { BottomNavigation, BottomNavigationVue2 };

package/dist/npm/bottomnavigation/BottomNavigation.js

@@ -0,0 +1,192 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BottomNavigationVue2 = exports.BottomNavigation = void 0; // @ts-ignore
+
+var Vue = require("vue");
+
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+
+var package_metadata_1 = require("../package-metadata");
+
+var kendo_vue_common_1 = require("@progress/kendo-vue-common");
+
+var utils_1 = require("./models/utils");
+
+var BottomNavigationItem_1 = require("./BottomNavigationItem");
+/**
+ * @hidden
+ */
+
+
+var BottomNavigationVue2 = {
+  name: 'KendoBottomNavigation',
+  // @ts-ignore
+  emits: {
+    'keydown': null,
+    'select': null
+  },
+  props: {
+    dir: String,
+    themeColor: {
+      type: String,
+      default: 'primary',
+      validator: function validator(value) {
+        return ['primary', 'secondary', 'tertiary', 'info', 'success', 'warning', 'error', 'dark', 'light', 'inverse'].includes(value);
+      }
+    },
+    fill: {
+      type: String,
+      default: 'flat',
+      validator: function validator(value) {
+        return ['solid', 'flat'].includes(value);
+      }
+    },
+    items: Array,
+    itemFlow: {
+      type: String,
+      default: 'vertical',
+      validator: function validator(value) {
+        return ['vertical', 'horizontal'].includes(value);
+      }
+    },
+    positionMode: {
+      type: String,
+      default: 'fixed',
+      validator: function validator(value) {
+        return ['sticky', 'fixed'].includes(value);
+      }
+    },
+    border: {
+      type: Boolean,
+      default: true
+    },
+    disabled: Boolean,
+    selected: Number
+  },
+  created: function created() {
+    (0, kendo_vue_common_1.validatePackage)(package_metadata_1.packageMetadata);
+    this.navId = (0, kendo_vue_common_1.guid)();
+  },
+  computed: {
+    navClasses: function navClasses() {
+      var _a;
+
+      var _b = this.$props,
+          themeColor = _b.themeColor,
+          fill = _b.fill,
+          positionMode = _b.positionMode,
+          itemFlow = _b.itemFlow,
+          border = _b.border,
+          disabled = _b.disabled;
+      return _a = {
+        'k-bottom-nav': true
+      }, _a[utils_1.POSITION_MODE_CLASSES[positionMode]] = true, _a[utils_1.THEME_COLOR_CLASSES[themeColor]] = true, _a[utils_1.FILL_CLASSES[fill]] = true, _a[utils_1.ITEM_FLOW_CLASSES[itemFlow]] = true, _a['k-bottom-nav-border'] = border, _a['k-disabled'] = disabled, _a;
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var _a = this.$props,
+        id = _a.id,
+        items = _a.items,
+        item = _a.item,
+        disabled = _a.disabled; //    const dir = useDir(elementRef, props.dir);
+
+    return h("nav", {
+      "class": this.navClasses,
+      id: id || this.navId,
+      attrs: this.v3 ? undefined : {
+        id: id || this.navId
+      }
+    }, [items && items.map(function (element, index) {
+      var content = kendo_vue_common_1.templateRendering.call(this, element.item || item, kendo_vue_common_1.getListeners.call(this));
+      return (// @ts-ignore 
+        h(BottomNavigationItem_1.BottomNavigationItem, {
+          key: index,
+          index: index,
+          attrs: this.v3 ? undefined : {
+            index: index,
+            id: "".concat(id || this.navId, "-").concat(index),
+            disabled: disabled || element.disabled,
+            selected: this.selected === index || element.selected,
+            dataItem: element,
+            item: content
+          },
+          style: element.style,
+          "class": element.class,
+          id: "".concat(id || this.navId, "-").concat(index),
+          disabled: disabled || element.disabled,
+          selected: this.selected === index || element.selected,
+          dataItem: element,
+          item: content,
+          onSelect: this.handleSelect,
+          on: this.v3 ? undefined : {
+            "select": this.handleSelect,
+            "keydown": this.handleKeyDown
+          },
+          onKeydown: this.handleKeyDown
+        })
+      );
+    }, this)]);
+  },
+  methods: {
+    focus: function focus() {
+      if (this.$el) {
+        (0, kendo_vue_common_1.focusFirstFocusableChild)(this.$el);
+      }
+    },
+    dispatchSelectEvent: function dispatchSelectEvent(dispatchedEvent, index) {
+      if (!this.items) {
+        return;
+      }
+
+      if (!this.items[index].disabled) {
+        this.$emit('select', {
+          event: dispatchedEvent,
+          itemTarget: this.items[index],
+          itemIndex: index
+        });
+      }
+    },
+    handleSelect: function handleSelect(event, clickedItemIndex) {
+      this.dispatchSelectEvent(event, clickedItemIndex);
+    },
+    handleKeyDown: function handleKeyDown(event, clickedItemIndex) {
+      switch (event.keyCode) {
+        case kendo_vue_common_1.Keys.enter:
+        case kendo_vue_common_1.Keys.space:
+          this.dispatchSelectEvent(event, clickedItemIndex);
+          event.preventDefault();
+          break;
+
+        default:
+          break;
+      }
+
+      this.$emit('keydown', {
+        event: event,
+        itemTarget: this.items[clickedItemIndex],
+        itemIndex: clickedItemIndex
+      });
+    }
+  }
+};
+exports.BottomNavigationVue2 = BottomNavigationVue2;
+/**
+ * @hidden
+ */
+
+var BottomNavigation = BottomNavigationVue2;
+exports.BottomNavigation = BottomNavigation;

package/dist/npm/bottomnavigation/BottomNavigationItem.d.ts

@@ -0,0 +1,44 @@
+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 { BottomNavigationItemProps } from './BottomNavigationItemProps';
+/**
+ * @hidden
+ */
+export interface BottomNavigationItemState {
+    calculatedId: string;
+}
+/**
+ * @hidden
+ */
+export interface BottomNavigationItemComputed {
+    [key: string]: any;
+    itemClasses: object;
+}
+/**
+ * @hidden
+ */
+export interface BottomNavigationItemMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface BottomNavigationItemData {
+}
+/**
+ * @hidden
+ */
+export interface BottomNavigationItemAll extends Vue2type, BottomNavigationItemMethods, BottomNavigationItemData, BottomNavigationItemComputed, BottomNavigationItemState {
+}
+/**
+ * @hidden
+ */
+declare let BottomNavigationItemVue2: ComponentOptions<BottomNavigationItemAll, DefaultData<BottomNavigationItemData>, DefaultMethods<BottomNavigationItemAll>, BottomNavigationItemComputed, RecordPropsDefinition<BottomNavigationItemProps>>;
+/**
+ * @hidden
+ */
+declare const BottomNavigationItem: DefineComponent<BottomNavigationItemProps, any, BottomNavigationItemData, BottomNavigationItemComputed, BottomNavigationItemMethods, {}, {}, {}, string, BottomNavigationItemProps, BottomNavigationItemProps, {}>;
+export { BottomNavigationItem, BottomNavigationItemVue2 };

package/dist/npm/bottomnavigation/BottomNavigationItem.js

@@ -0,0 +1,135 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BottomNavigationItemVue2 = exports.BottomNavigationItem = void 0; // @ts-ignore
+
+var Vue = require("vue");
+
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+
+var package_metadata_1 = require("../package-metadata");
+
+var kendo_vue_common_1 = require("@progress/kendo-vue-common");
+/**
+ * @hidden
+ */
+
+
+var BottomNavigationItemVue2 = {
+  name: 'KendoBottomNavigationItem',
+  // @ts-ignore
+  emits: {
+    'keydown': null,
+    'select': null
+  },
+  props: {
+    id: String,
+    disabled: Boolean,
+    selected: Boolean,
+    icon: String,
+    text: String,
+    dataItem: Object,
+    index: Number,
+    tabIndex: {
+      type: Number,
+      default: 0
+    }
+  },
+  created: function created() {
+    (0, kendo_vue_common_1.validatePackage)(package_metadata_1.packageMetadata);
+  },
+  computed: {
+    itemClasses: function itemClasses() {
+      var _a = this.$props,
+          selected = _a.selected,
+          disabled = _a.disabled;
+      return {
+        'k-bottom-nav-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 _a = this.$props,
+        selected = _a.selected,
+        disabled = _a.disabled,
+        item = _a.item,
+        dataItem = _a.dataItem,
+        id = _a.id,
+        index = _a.index,
+        tabIndex = _a.tabIndex;
+    var icon = dataItem.icon,
+        text = dataItem.text;
+    var content = kendo_vue_common_1.getTemplate.call(this, {
+      h: h,
+      template: item,
+      defaultRendering: null,
+      additionalProps: {
+        itemIndex: index,
+        item: dataItem
+      }
+    });
+    var bottomNavItem = h("span", {
+      "class": this.itemClasses,
+      role: 'link',
+      attrs: this.v3 ? undefined : {
+        role: 'link',
+        id: id,
+        tabIndex: tabIndex,
+        "aria-selected": selected,
+        "aria-disabled": disabled
+      },
+      id: id,
+      tabIndex: tabIndex,
+      onClick: this.handleClick,
+      on: this.v3 ? undefined : {
+        "click": this.handleClick,
+        "keydown": this.handleKeyDown
+      },
+      onKeydown: this.handleKeyDown,
+      "aria-selected": selected,
+      "aria-disabled": disabled
+    }, [this.$props.item ? content : [icon && h("span", {
+      "class": "k-bottom-nav-item-icon k-icon k-i-".concat(icon)
+    }), text && h("span", {
+      "class": 'k-bottom-nav-item-text',
+      style: {
+        userSelect: 'none'
+      }
+    }, [text])]]);
+    return bottomNavItem;
+  },
+  methods: {
+    handleClick: function handleClick(event) {
+      if (this.index !== undefined && !this.disabled) {
+        this.$emit('select', event, this.index);
+      }
+    },
+    handleKeyDown: function handleKeyDown(event) {
+      if (this.index !== undefined && !this.disabled) {
+        this.$emit('keydown', event, this.index);
+      }
+    }
+  }
+};
+exports.BottomNavigationItemVue2 = BottomNavigationItemVue2;
+/**
+ * @hidden
+ */
+
+var BottomNavigationItem = BottomNavigationItemVue2;
+exports.BottomNavigationItem = BottomNavigationItem;

package/dist/npm/bottomnavigation/BottomNavigationItemProps.d.ts

@@ -0,0 +1,54 @@
+/**
+ * The interface for describing items that can be passed to the `items` property of the BottomNavigation component.
+ */
+export interface BottomNavigationItemProps {
+    /**
+     * Style the BottomNavigation item.
+     */
+    style?: object;
+    /**
+     * Class the BottomNavigation item.
+     */
+    class?: string;
+    /**
+     * Disables the BottomNavigation item.
+     */
+    disabled?: boolean;
+    /**
+     * Specifies if the BottomNavigation item is selected.
+     */
+    selected?: boolean;
+    /**
+     * Defines the name for an existing icon in a KendoReact theme.
+     * The icon is rendered inside the BottomNavigation item by a `span.k-icon` element.
+     */
+    icon?: any;
+    /**
+     * Specifies the text content of the BottomNavigation item.
+     */
+    text?: any;
+    /**
+     * Sets the `tabIndex` property of the BottomNavigation item. Defaults to `0`.
+     */
+    tabIndex?: number;
+    /**
+     * Sets a custom property. Contained in the BottomNavItem props that are returned from the `onSelect` BottomNavigation event.
+     */
+    [customProp: string]: any;
+    /**
+     * @hidden
+     */
+    index?: number;
+    /**
+     * @hidden
+     */
+    item?: any;
+    /**
+     * @hidden
+     */
+    dataItem?: any;
+    /**
+     * @hidden
+     */
+    id?: string;
+}

package/dist/npm/bottomnavigation/BottomNavigationItemProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });