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

package/dist/esm/stepper/interfaces/StepperOnNavigateEvent.js

@@ -0,0 +1,15 @@
+/**
+ * The `StepperOnNavigateEvent` event.
+ */
+var StepperOnNavigateEvent = /** @class */ (function () {
+    /**
+     * @hidden
+     */
+    function StepperOnNavigateEvent(target, prevIndex, nextIndex) {
+        this.target = target;
+        this.prevIndex = prevIndex;
+        this.nextIndex = nextIndex;
+    }
+    return StepperOnNavigateEvent;
+}());
+export { StepperOnNavigateEvent };

package/dist/esm/stepper/interfaces/StepperProps.d.ts

@@ -0,0 +1,84 @@
+import { StepProps } from './StepProps';
+import { StepperChangeEvent } from './StepperChangeEvent';
+import { StepperFocusEvent } from './StepperFocusEvent';
+/**
+ * Represents the props of the [Kendo UI for Vue Stepper component]({% slug overview_stepper %}).
+ */
+export interface StepperProps {
+    /**
+     * Sets the duration of the Stepper animation. Defaults to `400ms`.
+     */
+    animationDuration?: boolean | number;
+    /**
+     * Represents the children that are passed to the Stepper.
+     */
+    children?: any;
+    /**
+     * Specifies a list of CSS classes that will be added to the Stepper.
+     */
+    className?: string;
+    /**
+     * Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
+     */
+    dir?: string;
+    /**
+     * Disables the whole Stepper.
+     */
+    disabled?: boolean;
+    /**
+     * Specifies a custom icon that will be rendered inside the step for invalid steps.
+     */
+    errorIcon?: string;
+    /**
+     * Overrides the default component responsible for visualizing a single item ([see example]({% slug custom_rendering_stepper %})).
+     *
+     * The default Component is: [Step]({% slug api_layout_step %}).
+     */
+    item?: any;
+    /**
+     * The collection of steps that will be rendered in the Stepper ([see example]({% slug overview_stepper %})).
+     */
+    items: Array<StepProps>;
+    /**
+     * Specifies the linear flow of the Stepper.
+     * ([see example]({% slug linear_mode_stepper %})).
+     */
+    linear?: boolean;
+    /**
+     * Specifies the display mode of the Stepper
+     * ([see example]({% slug display_modes_stepper %})).
+     * * The possible values are:
+     * * (Default) `steps`. Render step indicator and optional label.
+     * * `labels`. Render labels only.
+     */
+    mode?: 'steps' | 'labels' | string;
+    /**
+     * Specifies the orientation of the Stepper
+     * ([see example]({% slug orientation_stepper %})).
+     *
+     * The possible values are:
+     * * (Default) `horizontal`
+     * * `vertical`
+     */
+    orientation?: 'horizontal' | 'vertical' | string;
+    /**
+     * Specifies a custom icon that will be rendered inside the step for valid steps.
+     */
+    successIcon?: string;
+    /**
+     * Specifies the index of the selected Step.
+     */
+    value: number;
+    /**
+     * @hidden
+     */
+    modelValue?: number;
+    /**
+     * The event handler that will be fired when the value is changed.
+     */
+    onChange?: (event: StepperChangeEvent) => void;
+    /**
+     * The event handler that will be fired when a Step is focused.
+     */
+    onFocus?: (event: StepperFocusEvent) => void;
+}

package/dist/esm/stepper/interfaces/StepperProps.js

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

package/dist/esm/stepper/messages/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @hidden
+ */
+export declare const optionalText = "stepper.optionalText";
+/**
+ * @hidden
+ */
+export declare const messages: {
+    "stepper.optionalText": string;
+};

package/dist/esm/stepper/messages/index.js

@@ -0,0 +1,11 @@
+var _a;
+/**
+ * @hidden
+ */
+export var optionalText = 'stepper.optionalText';
+/**
+ * @hidden
+ */
+export var messages = (_a = {},
+    _a[optionalText] = '(Optional)',
+    _a);

package/dist/esm/tabstrip/TabStrip.d.ts

@@ -0,0 +1,114 @@
+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 { TabStripTabProperties } from './TabStripTab';
+/**
+ * The arguments that are passed to the `onSelect` callback function of the TabStrip.
+ */
+export interface TabStripSelectEventArguments {
+    /**
+     * The index of the selected TabStrip tab.
+     */
+    selected: number;
+}
+/**
+ * Represents the emits of the [Kendo UI for Vue TabStrip component]({% slug overview_tabstrip %}).
+ */
+export interface TabStripEmits {
+    /**
+     * Fires each time the user makes a selection.
+     */
+    onSelect?: (e: TabStripSelectEventArguments) => void;
+}
+/**
+ * Represents the props of the [Kendo UI for Vue TabStrip component]({% slug overview_tabstrip %}).
+ */
+export interface TabStripProps extends TabStripEmits {
+    /**
+     * Enables the tab animation.
+     */
+    animation?: boolean;
+    /**
+     * Sets the index of the selected TabStripTab component
+     * ([see example]({% slug tabs_tabstrip %}#toc-tabs-on-initial-loading)).
+     */
+    selected?: number;
+    /**
+     * Sets the style of the TabStripContent component.
+     */
+    tabContentStyle?: any;
+    /**
+     * The position in which the TabStripNavigation components will be rendered.
+     *
+     * The available options are:
+     * - `"top"`&mdash;Renders the `TabStripNavigation` components to the top of the TabStrip.
+     * - `"bottom"`&mdash;Renders the `TabStripNavigation` components to the bottom of the TabStrip.
+     * - `"left"`&mdash;Renders the `TabStripNavigation` components to the left of the TabStrip.
+     * - `"right"`&mdash;Renders the `TabStripNavigation` components to the right of the TabStrip.
+     */
+    tabPosition?: string;
+    /**
+     * Sets the array of tabs.
+     */
+    tabs?: TabStripTabProperties[];
+    /**
+     * Sets the `tabIndex` of the TabStripNavigation.
+     */
+    tabIndex?: number;
+    /**
+     * Sets the direction of the TabStrip component.
+     */
+    dir?: string;
+}
+/**
+ * @hidden
+ */
+interface TabStripState {
+    keyBinding: Object;
+    v3: boolean;
+}
+/**
+ * @hidden
+ */
+interface TabStripData {
+    currentTabs: Array<TabStripTabProperties>;
+    currentShowAll: boolean;
+}
+/**
+ * @hidden
+ */
+export interface TabStripMethods {
+    [key: string]: any;
+    addRenderTitle: (id: string, renderTitle: any) => void;
+    addTab: (newTab: TabStripTabProperties) => void;
+    removeTab: (id: string) => void;
+    onSelect: (e: number) => void;
+    invertKeys: (original: any, inverted: any) => any;
+    onKeyDown: (e: any) => void;
+    firstNavigatableTab: () => void;
+    lastNavigatableTab: () => void;
+    prevNavigatableTab: () => void;
+    nextNavigatableTab: () => void;
+}
+/**
+ * @hidden
+ */
+export interface TabStripComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface TabStripAll extends TabStripMethods, TabStripState, TabStripData, TabStripComputed, Vue2type {
+}
+/**
+ * @hidden
+ */
+declare let TabStripVue2: ComponentOptions<Vue2type, DefaultData<TabStripData>, DefaultMethods<TabStripAll>, TabStripComputed, RecordPropsDefinition<TabStripProps>>;
+/**
+ * @hidden
+ */
+declare const TabStrip: DefineComponent<TabStripProps, any, TabStripData, TabStripComputed, TabStripMethods, {}, {}, {}, string, TabStripProps, TabStripProps, {}>;
+export { TabStrip, TabStripVue2 };

package/dist/esm/tabstrip/TabStrip.js

@@ -0,0 +1,333 @@
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+}; // @ts-ignore
+
+
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+var ref = allVue.ref;
+var inject = allVue.inject;
+import { TabStripNavigation } from './TabStripNavigation.js';
+import { TabStripContent } from './TabStripContent.js';
+import { Keys, classNames, getDefaultSlots, validatePackage, templateRendering, getListeners } from '@progress/kendo-vue-common';
+import { packageMetadata } from '../package-metadata.js';
+/**
+ * @hidden
+ */
+
+var TabStripVue2 = {
+  name: 'KendoTabStrip',
+  // @ts-ignore
+  emits: {
+    select: null
+  },
+  props: {
+    animation: {
+      type: Boolean,
+      default: true
+    },
+    selected: Number,
+    tabContentStyle: Object,
+    tabPosition: {
+      type: String,
+      default: 'top'
+    },
+    tabs: {
+      type: Array,
+      default: undefined
+    },
+    tabIndex: Number,
+    dir: String
+  },
+  data: function data() {
+    return {
+      currentShowAll: true,
+      currentTabs: []
+    };
+  },
+  computed: {
+    compTabs: function compTabs() {
+      return this.tabs !== undefined ? this.tabs.map(function (tab) {
+        var content = templateRendering.call(this, tab.content, getListeners.call(this));
+        return __assign(__assign({}, tab), {
+          content: content
+        });
+      }, this) : this.currentTabs;
+    }
+  },
+  provide: function provide() {
+    return {
+      addRenderTitle: this.addRenderTitle,
+      addTab: this.addTab,
+      removeTab: this.removeTab
+    };
+  },
+  created: function created() {
+    var _a;
+
+    var _this = this;
+
+    this.keyBinding = (_a = {}, _a[Keys.left] = function () {
+      return _this.prevNavigatableTab();
+    }, _a[Keys.right] = function () {
+      return _this.nextNavigatableTab();
+    }, _a[Keys.down] = function () {
+      return _this.nextNavigatableTab();
+    }, _a[Keys.up] = function () {
+      return _this.prevNavigatableTab();
+    }, _a[Keys.home] = function () {
+      return 0;
+    }, _a[Keys.end] = function () {
+      return _this.compTabs.length - 1;
+    }, _a);
+    validatePackage(packageMetadata);
+  },
+  watch: {
+    selected: function selected(_prevIndex, _nextIndex) {
+      if (this.$props.animation) {
+        this.currentShowAll = false;
+        this.$nextTick(function () {
+          this.currentShowAll = true;
+        });
+      }
+    }
+  },
+  methods: {
+    addRenderTitle: function addRenderTitle(currentId, titleTemplate) {
+      var indexToUpdate = this.compTabs.findIndex(function (e) {
+        return e.id === currentId;
+      });
+
+      if (this.v3) {
+        this.compTabs[indexToUpdate].titleRender = titleTemplate;
+      } else {
+        this.compTabs[indexToUpdate] = __assign(__assign({}, this.compTabs[indexToUpdate]), {
+          titleRender: titleTemplate
+        });
+      }
+    },
+    addTab: function addTab(newTab) {
+      this.currentTabs.push(newTab);
+    },
+    removeTab: function removeTab(currentId) {
+      var indexToRemove = this.currentTabs.findIndex(function (e) {
+        return e.id === currentId;
+      });
+      this.currentTabs.splice(indexToRemove, 1);
+    },
+    onSelect: function onSelect(index) {
+      if (this.$props.selected !== index) {
+        this.$emit('select', {
+          selected: index
+        });
+      }
+    },
+    onKeyDown: function onKeyDown(event) {
+      var handler;
+
+      switch (event.keyCode) {
+        case Keys.left:
+          handler = this.keyBinding[this.invertKeys(Keys.left, Keys.right)];
+          break;
+
+        case Keys.right:
+          handler = this.keyBinding[this.invertKeys(Keys.right, Keys.left)];
+          break;
+
+        case Keys.up:
+          handler = this.keyBinding[Keys.up];
+          break;
+
+        case Keys.down:
+          handler = this.keyBinding[Keys.down];
+          break;
+
+        case Keys.home:
+          handler = this.keyBinding[Keys.home];
+          break;
+
+        case Keys.end:
+          handler = this.keyBinding[Keys.end];
+          break;
+
+        default:
+          break;
+      }
+
+      if (handler) {
+        event.preventDefault();
+        this.onSelect(handler());
+      }
+    },
+    invertKeys: function invertKeys(original, inverted) {
+      var rtl = this.$el && getComputedStyle(this.$el).direction === 'rtl' || false;
+      return rtl ? inverted : original;
+    },
+    firstNavigatableTab: function firstNavigatableTab() {
+      var length = this.compTabs.length;
+
+      if (length) {
+        for (var i = 0; i < length; i++) {
+          if (!this.compTabs[i].disabled) {
+            return i;
+          }
+        }
+      }
+    },
+    lastNavigatableTab: function lastNavigatableTab() {
+      var length = this.compTabs.length;
+
+      if (length) {
+        for (var i = length - 1; i > 0; i--) {
+          if (!this.compTabs[i].disabled) {
+            return i;
+          }
+        }
+      }
+    },
+    prevNavigatableTab: function prevNavigatableTab() {
+      var length = this.compTabs.length;
+      var selected = this.$props.selected;
+      var index = selected ? selected - 1 : -1;
+
+      if (index < 0) {
+        return this.lastNavigatableTab();
+      }
+
+      if (length) {
+        for (var i = index; i > -1; i--) {
+          if (!this.compTabs[i].disabled) {
+            return i;
+          }
+
+          if (i === 0) {
+            return this.lastNavigatableTab();
+          }
+        }
+      }
+    },
+    nextNavigatableTab: function nextNavigatableTab() {
+      var length = this.compTabs.length;
+      var selected = this.$props.selected;
+      var index = selected ? selected + 1 : 1;
+
+      if (index >= length) {
+        return this.firstNavigatableTab();
+      }
+
+      if (length) {
+        for (var i = index; i < length; i++) {
+          if (!this.compTabs[i].disabled) {
+            return i;
+          }
+
+          if (i + 1 === length) {
+            return this.firstNavigatableTab();
+          }
+        }
+      }
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  render: function render(createElement) {
+    var _a;
+
+    var h = gh || createElement;
+    var _b = this.$props,
+        tabPosition = _b.tabPosition,
+        _c = _b.tabIndex,
+        tabIndex = _c === void 0 ? 0 : _c;
+    var bottom = tabPosition === 'bottom';
+    var componentClasses = classNames('k-widget', 'k-header', 'k-floatwrap', 'k-tabstrip', (_a = {}, _a['k-tabstrip-left'] = tabPosition === 'left', _a['k-tabstrip-right'] = tabPosition === 'right', _a['k-tabstrip-bottom'] = tabPosition === 'bottom', _a['k-tabstrip-top'] = tabPosition === 'top', _a));
+
+    var renderContent = function renderContent(currentTabProps) {
+      var selected = currentTabProps.selected,
+          tabContentStyle = currentTabProps.tabContentStyle;
+      var defaultSlots = getDefaultSlots(this);
+      var tabContentProps = {
+        index: selected,
+        animation: this.$props.animation,
+        tabs: this.compTabs,
+        hasTabs: this.tabs !== undefined,
+        selected: selected,
+        tabContentStyle: tabContentStyle,
+        showAll: this.currentShowAll
+      };
+      return h(TabStripContent, __assign(__assign({}, tabContentProps), {
+        attrs: this.v3 ? undefined : __assign({}, tabContentProps)
+      }), this.v3 ? function () {
+        return defaultSlots;
+      } : [defaultSlots]);
+    };
+
+    return h("div", {
+      dir: this.$props.dir,
+      attrs: this.v3 ? undefined : {
+        dir: this.$props.dir
+      },
+      "class": componentClasses
+    }, [!bottom && // @ts-ignore function children
+    h(TabStripNavigation, {
+      tabs: this.compTabs,
+      attrs: this.v3 ? undefined : {
+        tabs: this.compTabs,
+        selected: this.$props.selected,
+        tabContentStyle: this.$props.tabContentStyle,
+        tabIndex: tabIndex
+      },
+      selected: this.$props.selected,
+      tabContentStyle: this.$props.tabContentStyle,
+      onSelect: this.onSelect,
+      on: this.v3 ? undefined : {
+        "select": this.onSelect,
+        "keydown": this.onKeyDown
+      },
+      onKeydown: this.onKeyDown,
+      tabIndex: tabIndex
+    }), renderContent.call(this, this.$props), bottom && // @ts-ignore function children
+    h(TabStripNavigation, {
+      tabs: this.compTabs,
+      attrs: this.v3 ? undefined : {
+        tabs: this.compTabs,
+        selected: this.$props.selected,
+        tabContentStyle: this.$props.tabContentStyle,
+        tabIndex: tabIndex
+      },
+      selected: this.$props.selected,
+      tabContentStyle: this.$props.tabContentStyle,
+      onSelect: this.onSelect,
+      on: this.v3 ? undefined : {
+        "select": this.onSelect,
+        "keydown": this.onKeyDown
+      },
+      onKeydown: this.onKeyDown,
+      tabIndex: tabIndex
+    })]);
+  }
+};
+/**
+ * @hidden
+ */
+
+var TabStrip = TabStripVue2;
+export { TabStrip, TabStripVue2 };

package/dist/esm/tabstrip/TabStripContent.d.ts

@@ -0,0 +1,79 @@
+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;
+};
+/**
+ * The props that are passed to the TabStripContent by the TabStrip.
+ */
+export interface TabStripContentProps {
+    /**
+     * Defines whether the content appearance will be animated.
+     */
+    animation?: boolean;
+    /**
+     * Defines whether to render all the tabs.
+     */
+    showAll?: boolean;
+    /**
+     * The index of the selected tab. Used to indicate which child to render.
+     */
+    selected?: number;
+    /**
+     * The tabs collection.
+     */
+    tabs?: Array<any>;
+    /**
+     * @hidden
+     */
+    index?: number;
+    /**
+     * @hidden
+     */
+    keepTabsMounted?: boolean;
+    /**
+     * @hidden
+     */
+    hasTabs?: boolean;
+}
+/**
+ * @hidden
+ */
+interface TabStripContentState {
+    contentId: string;
+    v3: boolean;
+}
+/**
+ * @hidden
+ */
+interface TabStripContentData {
+}
+/**
+ * @hidden
+ */
+export interface TabStripContentMethods {
+    [key: string]: any;
+    addTab: () => void;
+    removeTab: (id: string) => void;
+    getTabs: (tabs: any[], children: any) => any;
+}
+/**
+ * @hidden
+ */
+export interface TabStripContentComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface TabStripContentAll extends TabStripContentMethods, TabStripContentState, TabStripContentData, TabStripContentComputed, Vue2type {
+}
+/**
+ * @hidden
+ */
+declare let TabStripContentVue2: ComponentOptions<Vue2type, DefaultData<TabStripContentData>, DefaultMethods<TabStripContentAll>, TabStripContentComputed, RecordPropsDefinition<TabStripContentProps>>;
+/**
+ * @hidden
+ */
+declare const TabStripContent: DefineComponent<TabStripContentProps, any, TabStripContentData, TabStripContentComputed, TabStripContentMethods, {}, {}, {}, string, TabStripContentProps, TabStripContentProps, {}>;
+export { TabStripContent, TabStripContentVue2 };