@progress/kendo-vue-layout 3.5.0 → 3.5.1-dev.202208100944

package/dist/esm/card/interfaces/CardHeaderProps.d.ts

@@ -0,0 +1,2 @@
+export interface CardHeaderProps {
+}

package/dist/esm/card/interfaces/CardHeaderProps.js

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

package/dist/esm/card/interfaces/CardImageProps.d.ts

@@ -0,0 +1,6 @@
+export interface CardImageProps {
+    /**
+     * Set the source of the image.
+     */
+    src?: string;
+}

package/dist/esm/card/interfaces/CardImageProps.js

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

package/dist/esm/card/interfaces/CardProps.d.ts

@@ -0,0 +1,28 @@
+import { cardType } from './Enums';
+import { cardOrientation } from './Enums';
+export interface CardProps {
+    /**
+     * Sets the [dir](https://www.w3schools.com/tags/att_global_dir.asp) of the Card.
+     */
+    dir?: string;
+    /**
+     * Set the type of the Card.
+     *
+     * The supported values are:
+     * * `default`
+     * * `primary`
+     * * `info`
+     * * `success`
+     * * `warning`
+     * * `error`
+     */
+    type?: cardType | string;
+    /**
+     * Set the orientation of the Card.
+     *
+     * The supported values are:
+     * * `horizontal` - Default
+     * * `vertical`
+     */
+    orientation?: cardOrientation | string;
+}

package/dist/esm/card/interfaces/CardProps.js

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

package/dist/esm/card/interfaces/CardSubtitleProps.d.ts

@@ -0,0 +1,2 @@
+export interface CardSubtitleProps {
+}

package/dist/esm/card/interfaces/CardSubtitleProps.js

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

package/dist/esm/card/interfaces/CardTitleProps.d.ts

@@ -0,0 +1,2 @@
+export interface CardTitleProps {
+}

package/dist/esm/card/interfaces/CardTitleProps.js

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

package/dist/esm/card/interfaces/Enums.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @hidden
+ */
+export declare enum avatarShape {
+    CIRCLE = "circle",
+    SQUARE = "square",
+    ROUNDED = "rounded",
+    RECTANGLE = "rectangle"
+}
+export declare enum avatarType {
+    TEXT = "text",
+    IMAGE = "image",
+    ICON = "icon"
+}
+export declare enum cardOrientation {
+    HORIZONTAL = "horizontal",
+    VERTICAL = "vertical"
+}
+export declare enum cardType {
+    DEFAULT = "default",
+    primary = "primary",
+    INFO = "info",
+    SUCCESS = "success",
+    WARNING = "warning",
+    ERROR = "error"
+}
+export declare enum cardActionsLayout {
+    START = "start",
+    CENTER = "center",
+    END = "end",
+    STRETCHED = "stretched"
+}

package/dist/esm/card/interfaces/Enums.js

@@ -0,0 +1,46 @@
+/**
+ * @hidden
+ */
+export var avatarShape;
+
+(function (avatarShape) {
+  avatarShape["CIRCLE"] = "circle";
+  avatarShape["SQUARE"] = "square";
+  avatarShape["ROUNDED"] = "rounded";
+  avatarShape["RECTANGLE"] = "rectangle";
+})(avatarShape || (avatarShape = {}));
+
+export var avatarType;
+
+(function (avatarType) {
+  avatarType["TEXT"] = "text";
+  avatarType["IMAGE"] = "image";
+  avatarType["ICON"] = "icon";
+})(avatarType || (avatarType = {}));
+
+export var cardOrientation;
+
+(function (cardOrientation) {
+  cardOrientation["HORIZONTAL"] = "horizontal";
+  cardOrientation["VERTICAL"] = "vertical";
+})(cardOrientation || (cardOrientation = {}));
+
+export var cardType;
+
+(function (cardType) {
+  cardType["DEFAULT"] = "default";
+  cardType["primary"] = "primary";
+  cardType["INFO"] = "info";
+  cardType["SUCCESS"] = "success";
+  cardType["WARNING"] = "warning";
+  cardType["ERROR"] = "error";
+})(cardType || (cardType = {}));
+
+export var cardActionsLayout;
+
+(function (cardActionsLayout) {
+  cardActionsLayout["START"] = "start";
+  cardActionsLayout["CENTER"] = "center";
+  cardActionsLayout["END"] = "end";
+  cardActionsLayout["STRETCHED"] = "stretched";
+})(cardActionsLayout || (cardActionsLayout = {}));

package/dist/esm/drawer/Drawer.d.ts

@@ -0,0 +1,51 @@
+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 { DrawerProps } from './interfaces/DrawerProps';
+/**
+ * The Drawer ref.
+ */
+export interface DrawerHandle {
+    element: HTMLDivElement | null;
+    focus: () => void;
+}
+/**
+ * @hidden
+ */
+export interface DrawerState {
+}
+/**
+ * @hidden
+ */
+export interface DrawerComputed {
+    drawerClassNames: object;
+}
+/**
+ * @hidden
+ */
+export interface DrawerMethods {
+    [key: string]: any;
+    focus: (e: any) => void;
+}
+/**
+ * @hidden
+ */
+export interface DrawerData {
+    currentDir: string;
+}
+/**
+ * @hidden
+ */
+export interface DrawerAll extends Vue2type, DrawerMethods, DrawerData, DrawerComputed, DrawerState {
+}
+/**
+ * @hidden
+ */
+declare let DrawerVue2: ComponentOptions<DrawerAll, DefaultData<DrawerData>, DefaultMethods<DrawerAll>, DrawerComputed, RecordPropsDefinition<DrawerProps>>;
+/**
+ * @hidden
+ */
+declare const Drawer: DefineComponent<DrawerProps, any, DrawerData, DrawerComputed, DrawerMethods, {}, {}, {}, string, DrawerProps, DrawerProps, {}>;
+export { Drawer, DrawerVue2 };

package/dist/esm/drawer/Drawer.js

@@ -0,0 +1,204 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { DrawerNavigation } from './DrawerNavigation.js';
+import { getDir, validatePackage, getDefaultSlots, templateRendering, getListeners } from '@progress/kendo-vue-common';
+import { packageMetadata } from '../package-metadata.js';
+/**
+ * @hidden
+ */
+
+var DrawerVue2 = {
+  name: 'KendoDrawer',
+  props: {
+    animation: {
+      type: [Object, Boolean],
+      default: true
+    },
+    expanded: {
+      type: Boolean,
+      default: false
+    },
+    dir: {
+      type: String,
+      default: 'ltr'
+    },
+    item: [String, Object, Function],
+    mode: {
+      type: String,
+      default: 'overlay',
+      validator: function validator(value) {
+        return ['overlay', 'push'].includes(value);
+      }
+    },
+    position: {
+      type: String,
+      default: 'start',
+      validator: function validator(value) {
+        return ['start', 'end'].includes(value);
+      }
+    },
+    items: Array,
+    mini: {
+      type: Boolean,
+      default: false
+    },
+    tabIndex: Number,
+    width: {
+      type: Number,
+      default: 240
+    },
+    miniWidth: {
+      type: Number,
+      default: 50
+    }
+  },
+  created: function created() {
+    validatePackage(packageMetadata);
+  },
+  data: function data() {
+    var _a = this.$props,
+        expanded = _a.expanded,
+        mode = _a.mode,
+        position = _a.position,
+        animation = _a.animation,
+        mini = _a.mini,
+        width = _a.width,
+        miniWidth = _a.miniWidth,
+        items = _a.items,
+        item = _a.item;
+    var itemRender = item ? templateRendering.call(this, item, getListeners.call(this)) : undefined;
+    return {
+      currentDir: 'ltr',
+      drawer: {
+        expanded: expanded,
+        mode: mode,
+        dir: this.currentDir,
+        position: position,
+        animation: animation,
+        mini: mini,
+        width: width,
+        miniWidth: miniWidth,
+        items: items,
+        item: itemRender
+      }
+    };
+  },
+  mounted: function mounted() {
+    this.currentDir = getDir(this.$el, this.$props.dir);
+  },
+  updated: function updated() {
+    var _a = this.$props,
+        expanded = _a.expanded,
+        mode = _a.mode,
+        position = _a.position,
+        animation = _a.animation,
+        mini = _a.mini,
+        width = _a.width,
+        miniWidth = _a.miniWidth,
+        items = _a.items,
+        item = _a.item;
+    var itemRender = item ? templateRendering.call(this, item, getListeners.call(this)) : undefined;
+    this.drawer.expanded = expanded;
+    this.drawer.mode = mode;
+    this.drawer.dir = this.currentDir;
+    this.drawer.position = position;
+    this.drawer.animation = animation;
+    this.drawer.mini = mini;
+    this.drawer.width = width;
+    this.drawer.miniWidth = miniWidth;
+    this.drawer.items = items;
+    this.drawer.item = itemRender;
+  },
+  provide: function provide() {
+    return {
+      kendoDrawer: this.drawer
+    };
+  },
+  computed: {
+    drawerClassNames: function drawerClassNames() {
+      var _a = this.$props,
+          expanded = _a.expanded,
+          mode = _a.mode,
+          mini = _a.mini;
+      return {
+        'k-drawer-container': true,
+        'k-drawer-expanded': expanded,
+        'k-drawer-overlay': mode === 'overlay',
+        'k-drawer-push': mode === 'push',
+        'k-drawer-mini': mini
+      };
+    }
+  },
+  // @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,
+        items = _a.items,
+        tabIndex = _a.tabIndex,
+        mode = _a.mode,
+        expanded = _a.expanded,
+        item = _a.item;
+    var itemRender = item ? templateRendering.call(this, item, getListeners.call(this)) : undefined;
+    return h("div", {
+      "class": this.drawerClassNames,
+      dir: this.currentDir,
+      attrs: this.v3 ? undefined : {
+        dir: this.currentDir,
+        tabindex: tabIndex
+      },
+      tabindex: tabIndex
+    }, [mode === 'overlay' && expanded && h("div", {
+      "class": "k-overlay",
+      onClick: this.onOverlayClick,
+      on: this.v3 ? undefined : {
+        "click": this.onOverlayClick
+      }
+    }), items && // @ts-ignore
+    h(DrawerNavigation, {
+      onSelect: this.handleSelect,
+      on: this.v3 ? undefined : {
+        "select": this.handleSelect
+      },
+      item: itemRender,
+      attrs: this.v3 ? undefined : {
+        item: itemRender
+      }
+    }), defaultSlot]);
+  },
+  methods: {
+    focus: function focus() {
+      if (this.$el) {
+        this.$el.focus();
+      }
+    },
+    handleSelect: function handleSelect(itemTarget, itemIndex) {
+      if (this.$props.items) {
+        this.$emit('select', {
+          itemTarget: itemTarget,
+          itemIndex: itemIndex,
+          component: this
+        });
+      }
+    },
+    onOverlayClick: function onOverlayClick(e) {
+      this.$emit('overlayclick', e);
+    }
+  }
+};
+/**
+ * @hidden
+ */
+
+var Drawer = DrawerVue2;
+export { Drawer, DrawerVue2 };

package/dist/esm/drawer/DrawerContent.d.ts

@@ -0,0 +1,110 @@
+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 { DrawerContentProps } from './interfaces/DrawerContentProps';
+/**
+ * @hidden
+ */
+export interface DrawerContentState {
+}
+/**
+ * @hidden
+ */
+export interface DrawerContentComputed {
+}
+/**
+ * @hidden
+ */
+export interface DrawerContentMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface DrawerContentData {
+}
+/**
+ * @hidden
+ */
+export interface DrawerContentAll extends Vue2type, DrawerContentMethods, DrawerContentData, DrawerContentComputed, DrawerContentState {
+}
+/**
+ * @hidden
+ */
+declare let DrawerContentVue2: ComponentOptions<DrawerContentAll, DefaultData<DrawerContentData>, DefaultMethods<DrawerContentAll>, DrawerContentComputed, RecordPropsDefinition<DrawerContentProps>>;
+/**
+ * Represents the [Kendo UI for Vue Drawer component]({% slug overview_drawer %}).
+ *
+ * ```jsx
+ * <template>
+ *   <div>
+ *     <Drawer
+ *       :expanded="expanded"
+ *       :position="position"
+ *       :mode="mode"
+ *       :items="
+ *         items.map((item, index) => ({
+ *           ...item,
+ *           selected: index === selectedId,
+ *         }))
+ *       "
+ *       @select="handleSelect"
+ *     >
+ *       <DrawerContent>
+ *         <k-button @click="handleClick"> Toggle the drawer state </k-button>
+ *       </DrawerContent>
+ *     </Drawer>
+ *   </div>
+ * </template>
+ *
+ * <script>
+ * import { Drawer, DrawerContent } from "@progress/kendo-vue-layout";
+ * import { Button } from "@progress/kendo-vue-buttons";
+ * import "./styles.css";
+ *
+ * export default {
+ *   name: "App",
+ *   components: { Drawer, DrawerContent, "k-button": Button },
+ *   data() {
+ *     return {
+ *       items: [
+ *         {
+ *           text: "Inbox",
+ *           icon: "k-i-inbox",
+ *           selected: true,
+ *         },
+ *         {
+ *           text: "Calendar",
+ *           icon: "k-i-calendar",
+ *         },
+ *         {
+ *           text: "Attachments",
+ *           icon: "k-i-hyperlink-email",
+ *         },
+ *         {
+ *           text: "Favourites",
+ *           icon: "k-i-star-outline",
+ *         },
+ *       ],
+ *       expanded: true,
+ *       selectedId: 0,
+ *       position: "start",
+ *       mode: "push",
+ *     };
+ *   },
+ *   methods: {
+ *     handleClick(e) {
+ *       this.expanded = !this.expanded;
+ *     },
+ *     handleSelect(e) {
+ *       this.selectedId = e.itemIndex;
+ *     },
+ *   },
+ * };
+ * </script>
+ * ```
+ */
+declare const DrawerContent: DefineComponent<DrawerContentProps, any, DrawerContentData, DrawerContentComputed, DrawerContentMethods, {}, {}, {}, string, DrawerContentProps, DrawerContentProps, {}>;
+export { DrawerContent, DrawerContentVue2 };

package/dist/esm/drawer/DrawerContent.js

@@ -0,0 +1,103 @@
+// @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 DrawerContentVue2 = {
+  name: 'KendoDrawerContent',
+  // @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);
+    return h("div", {
+      "class": 'k-drawer-content'
+    }, [defaultSlot]);
+  }
+};
+/**
+ * Represents the [Kendo UI for Vue Drawer component]({% slug overview_drawer %}).
+ *
+ * ```jsx
+ * <template>
+ *   <div>
+ *     <Drawer
+ *       :expanded="expanded"
+ *       :position="position"
+ *       :mode="mode"
+ *       :items="
+ *         items.map((item, index) => ({
+ *           ...item,
+ *           selected: index === selectedId,
+ *         }))
+ *       "
+ *       @select="handleSelect"
+ *     >
+ *       <DrawerContent>
+ *         <k-button @click="handleClick"> Toggle the drawer state </k-button>
+ *       </DrawerContent>
+ *     </Drawer>
+ *   </div>
+ * </template>
+ *
+ * <script>
+ * import { Drawer, DrawerContent } from "@progress/kendo-vue-layout";
+ * import { Button } from "@progress/kendo-vue-buttons";
+ * import "./styles.css";
+ *
+ * export default {
+ *   name: "App",
+ *   components: { Drawer, DrawerContent, "k-button": Button },
+ *   data() {
+ *     return {
+ *       items: [
+ *         {
+ *           text: "Inbox",
+ *           icon: "k-i-inbox",
+ *           selected: true,
+ *         },
+ *         {
+ *           text: "Calendar",
+ *           icon: "k-i-calendar",
+ *         },
+ *         {
+ *           text: "Attachments",
+ *           icon: "k-i-hyperlink-email",
+ *         },
+ *         {
+ *           text: "Favourites",
+ *           icon: "k-i-star-outline",
+ *         },
+ *       ],
+ *       expanded: true,
+ *       selectedId: 0,
+ *       position: "start",
+ *       mode: "push",
+ *     };
+ *   },
+ *   methods: {
+ *     handleClick(e) {
+ *       this.expanded = !this.expanded;
+ *     },
+ *     handleSelect(e) {
+ *       this.selectedId = e.itemIndex;
+ *     },
+ *   },
+ * };
+ * </script>
+ * ```
+ */
+
+var DrawerContent = DrawerContentVue2;
+export { DrawerContent, DrawerContentVue2 };

package/dist/esm/drawer/DrawerItem.d.ts

@@ -0,0 +1,75 @@
+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 { DrawerItemProps } from './interfaces/DrawerItemProps';
+/**
+ * @hidden
+ */
+export interface DrawerItemState {
+}
+/**
+ * @hidden
+ */
+export interface DrawerItemComputed {
+    itemClassNames: object;
+}
+/**
+ * @hidden
+ */
+export interface DrawerItemMethods {
+    [key: string]: any;
+    focus: (e: any) => void;
+}
+/**
+ * @hidden
+ */
+export interface DrawerItemData {
+}
+/**
+ * @hidden
+ */
+export interface DrawerItemAll extends Vue2type, DrawerItemMethods, DrawerItemData, DrawerItemComputed, DrawerItemState {
+}
+/**
+ * @hidden
+ */
+declare let DrawerItemVue2: ComponentOptions<DrawerItemAll, DefaultData<DrawerItemData>, DefaultMethods<DrawerItemAll>, DrawerItemComputed, RecordPropsDefinition<DrawerItemProps>>;
+/**
+ * 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>
+ * ```
+ *
+ */
+declare const DrawerItem: DefineComponent<DrawerItemProps, any, DrawerItemData, DrawerItemComputed, DrawerItemMethods, {}, {}, {}, string, DrawerItemProps, DrawerItemProps, {}>;
+export { DrawerItem, DrawerItemVue2 };