@progress/kendo-vue-layout 5.3.0-dev.202410141143 → 5.3.0-develop.2

package/dist/es/stacklayout/StackLayoutProps.d.ts

@@ -1,75 +0,0 @@
-/**
- * Represents the props of the [Kendo UI for Vue StackLayout component]({% slug overview_stacklayout %}).
- */
-export interface StackLayoutProps {
-    /**
-     * Sets the `id` property of the root StackLayout element.
-     */
-    id?: string;
-    /**
-     * Specifies the gap between the inner elements ([see example]({% slug layout_stacklayout %}#toc-gaps)).
-     */
-    gap?: number | string;
-    /**
-     * Specifies the orientation of the StackLayout.
-     * ([see example]({% slug layout_stacklayout %}#toc-orientation)).
-     *
-     * The possible values are:
-     * * (Default)`horizontal`
-     * * `vertical`
-     */
-    orientation?: StackLayoutOrientation | string;
-    /**
-     * Specifies the horizontal and vertical alignment of the inner StackLayout elements.
-     * Demo ([here]({% slug layout_stacklayout %}#toc-horizontal-align)) and ([here]({% slug layout_stacklayout %}#toc-vertical-align)).
-     *
-     * The possible keys are:
-     * * `horizontal`—Defines the possible horizontal alignment of the inner StackLayout elements.
-     *   * `start`—Uses the start point of the container.
-     *   * `center`—Uses the central point of the container.
-     *   * `end`—Uses the end point of the container.
-     *   * (Default)`stretch`—Stretches the items to fill the width of the container.
-     * * `vertical`—Defines the possible vertical alignment of the inner StackLayout elements.
-     *   * `top`—Uses the top point of the container.
-     *   * `middle`—Uses the middle point of the container.
-     *   * `bottom`—Uses the bottom point of the container.
-     *   * (Default)`stretch`—Stretches the items to fill the height of the container.
-     */
-    align?: StackLayoutAlign;
-}
-/**
- * Specifies the orientation of the StackLayout ([see example]({% slug layout_stacklayout %}#toc-orientation)).
- *
- * The possible values are:
- * * (Default)`horizontal`
- * * `vertical`
- *
- */
-export declare type StackLayoutOrientation = 'horizontal' | 'vertical';
-/**
- * Specifies the horizontal and vertical alignment of the inner StackLayout elements.
- */
-export interface StackLayoutAlign {
-    /**
-     * Defines the possible horizontal alignment of the inner StackLayout elements
-     * ([see example]({% slug layout_stacklayout %}#toc-horizontal-align)).
-     *
-     * The available values are:
-     * - `start`—Uses the start point of the container.
-     * - `center`—Uses the center point of the container.
-     * - `end`—Uses the end point of the container.
-     * - (Default)`stretch`—Stretches the items to fill the width of the container.
-     */
-    horizontal?: 'start' | 'center' | 'end' | 'stretch';
-    /**
-     * Defines the possible vertical alignment of the inner StackLayout elements
-     * ([see example]({% slug layout_stacklayout %}#toc-vertical-align)).
-     *
-     * The available values are:
-     * - `top`—Uses the top point of the container.
-     * - `middle`—Uses the middle point of the container.
-     * - `bottom`—Uses the bottom point of the container.
-     * - (Default)`stretch`—Stretches the items to fill the height of the container.
-     */
-    vertical?: 'top' | 'middle' | 'bottom' | 'stretch';
-}

package/dist/es/stacklayout/StackLayoutProps.js

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

package/dist/es/stepper/Step.d.ts

@@ -1,54 +0,0 @@
-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 { StepProps } from './interfaces/StepProps';
-/**
- * @hidden
- */
-export interface StepState {
-}
-/**
- * @hidden
- */
-export interface StepComputed {
-    itemClassNames: object;
-    itemStyles: object;
-}
-/**
- * @hidden
- */
-export interface StepMethods {
-    [key: string]: any;
-}
-/**
- * @hidden
- */
-export interface StepData {
-}
-/**
- * @hidden
- */
-export interface StepAll extends Vue2type, StepMethods, StepData, StepComputed, StepState {
-}
-/**
- * @hidden
- */
-declare let StepVue2: ComponentOptions<StepAll, DefaultData<StepData>, DefaultMethods<StepAll>, StepComputed, RecordPropsDefinition<StepProps>>;
-/**
- * Represents the [Kendo UI for Vue Step component]({% slug overview_stepper %}).
- *
- * ```jsx
- * <Step v-bind="props" @change="(e) => props.onChange(e)">
- * <span class="k-step-indicator" aria-hidden="true">
- *    <span class="emoji">{{ props.emoji }}</span>
- * </span>
- * <span class="k-step-label">
- *    <span class="k-step-text">{{ props.label }}</span>
- * </span>
- * </Step>
- * ```
- */
-declare const Step: DefineComponent<StepProps, any, StepData, StepComputed, StepMethods, {}, {}, {}, string, StepProps, StepProps, {}>;
-export { Step, StepVue2 };

package/dist/es/stepper/Step.js

@@ -1,240 +0,0 @@
-// @ts-ignore
-import * as Vue from 'vue';
-var allVue = Vue;
-var gh = allVue.h;
-var isV3 = allVue.version && allVue.version[0] === '3';
-var inject = allVue.inject;
-import { focusFirstFocusableChild, getDefaultSlots, getIconName, Icon } from '@progress/kendo-vue-common';
-import { provideLocalizationService } from '@progress/kendo-vue-intl';
-import { exclamationCircleIcon, checkOutlineIcon } from '@progress/kendo-svg-icons';
-import { DEFAULT_ANIMATION_DURATION, NO_ANIMATION } from './contants';
-import { messages, optionalText } from './messages/main';
-/**
- * @hidden
- */
-var StepVue2 = {
-  name: 'KendoStep',
-  props: {
-    current: Boolean,
-    disabled: Boolean,
-    icon: String,
-    svgIcon: Object,
-    index: Number,
-    isValid: {
-      type: Boolean,
-      default: undefined
-    },
-    focused: Boolean,
-    label: String,
-    optional: Boolean,
-    tabIndex: {
-      type: Number,
-      default: 0
-    },
-    text: String,
-    animationDuration: [Boolean, Number],
-    isVertical: Boolean,
-    item: [String, Object, Boolean, Function],
-    linear: Boolean,
-    mode: String,
-    numOfSteps: Number,
-    value: Number,
-    successIcon: String,
-    successSvgIcon: Object,
-    errorIcon: String,
-    errorSvgIcon: Object
-  },
-  inject: {
-    kendoLocalizationService: {
-      default: null
-    }
-  },
-  computed: {
-    itemClassNames: function itemClassNames() {
-      var _a = this.$props,
-        current = _a.current,
-        disabled = _a.disabled,
-        focused = _a.focused,
-        index = _a.index,
-        isValid = _a.isValid,
-        optional = _a.optional;
-      return {
-        'k-step': true,
-        'k-step-first': index === 0,
-        'k-step-last': this.numOfSteps && index === this.numOfSteps - 1,
-        'k-step-done': index < this.value,
-        'k-step-current': current,
-        'k-step-optional': optional,
-        'k-disabled': disabled,
-        'k-focus': focused,
-        'k-step-error': isValid !== undefined && !isValid,
-        'k-step-success': isValid
-      };
-    },
-    itemStyles: function itemStyles() {
-      var index = this.$props.index;
-      var allowClick = !this.linear || index === this.value - 1 || index === this.value || index === this.value + 1;
-      return {
-        maxWidth: !this.isVertical ? "calc(100% / ".concat(this.numOfSteps, ")") : undefined,
-        pointerEvents: !allowClick ? 'none' : undefined
-      };
-    }
-  },
-  watch: {
-    focused: function focused(newValue) {
-      this.aElement = this.$refs.aElement;
-      if (this.aElement && newValue) {
-        this.aElement.focus();
-      }
-    }
-  },
-  // @ts-ignore
-  setup: !isV3 ? undefined : function () {
-    var v3 = !!isV3;
-    var kendoLocalizationService = inject('kendoLocalizationService', {});
-    return {
-      v3: v3,
-      kendoLocalizationService: kendoLocalizationService
-    };
-  },
-  // @ts-ignore
-  render: function render(createElement) {
-    var h = gh || createElement;
-    var defaultSlots = getDefaultSlots(this);
-    var _a = this.$props,
-      current = _a.current,
-      disabled = _a.disabled,
-      focused = _a.focused,
-      icon = _a.icon,
-      svgIcon = _a.svgIcon,
-      index = _a.index,
-      isValid = _a.isValid,
-      label = _a.label,
-      optional = _a.optional,
-      tabIndex = _a.tabIndex,
-      text = _a.text,
-      animationDuration = _a.animationDuration,
-      item = _a.item,
-      linear = _a.linear,
-      mode = _a.mode,
-      value = _a.value,
-      successIcon = _a.successIcon,
-      successSvgIcon = _a.successSvgIcon,
-      errorIcon = _a.errorIcon,
-      errorSvgIcon = _a.errorSvgIcon;
-    var allowClick = !linear || index === value - 1 || index === value || index === value + 1;
-    var isInLabel = mode === 'labels' || (Boolean(icon) || Boolean(svgIcon)) && Boolean(label);
-    var localizationService = provideLocalizationService(this);
-    var localizeMessage = function localizeMessage(message) {
-      return localizationService.toLanguageString(message, messages[message]);
-    };
-    var optionalMessage = localizeMessage(optionalText);
-    var progressAnimation = typeof animationDuration === 'number' ? animationDuration : animationDuration !== false ? DEFAULT_ANIMATION_DURATION : NO_ANIMATION;
-    var validationIconNames = isValid ? successIcon || 'check-circle' : errorIcon || 'exclamation-circle';
-    var validationSvgIcon = isValid ? successSvgIcon || checkOutlineIcon : errorSvgIcon || exclamationCircleIcon;
-    var validationIcons = h(Icon, {
-      "class": 'k-step-indicator-icon',
-      name: getIconName(validationIconNames),
-      attrs: this.v3 ? undefined : {
-        name: getIconName(validationIconNames),
-        icon: validationSvgIcon,
-        "aria-hidden": "true"
-      },
-      icon: validationSvgIcon,
-      "aria-hidden": "true"
-    });
-    var stepIndicator = function stepIndicator() {
-      return mode !== 'labels' ? h("span", {
-        "class": "k-step-indicator",
-        "aria-hidden": true,
-        attrs: this.v3 ? undefined : {
-          "aria-hidden": true
-        },
-        style: {
-          transitionDuration: progressAnimation + 'ms'
-        }
-      }, [icon || svgIcon ? !isInLabel && isValid !== undefined ? validationIcons : h(Icon, {
-        "class": "k-step-indicator-icon",
-        name: icon,
-        attrs: this.v3 ? undefined : {
-          name: icon,
-          icon: svgIcon
-        },
-        icon: svgIcon
-      }) : isValid !== undefined ? validationIcons : h("span", {
-        "class": "k-step-indicator-text"
-      }, [text ? text : index + 1])]) : null;
-    };
-    var stepLabel = function stepLabel() {
-      return h("span", {
-        "class": "k-step-label"
-      }, [label && h("span", {
-        "class": "k-step-text"
-      }, [label]), isInLabel && isValid !== undefined && validationIcons, optional && h("span", {
-        "class": "k-step-label-optional"
-      }, [optionalMessage])]);
-    };
-    return h("li", {
-      "class": this.itemClassNames,
-      style: this.itemStyles
-    }, [h("a", {
-      ref: "aElement",
-      "class": "k-step-link",
-      title: label ? label : undefined,
-      attrs: this.v3 ? undefined : {
-        title: label ? label : undefined,
-        tabIndex: tabIndex ? tabIndex : current ? 0 : -1,
-        "aria-current": current ? true : undefined,
-        "aria-disabled": disabled || !allowClick || undefined,
-        "aria-invalid": isValid !== undefined && !isValid || undefined
-      },
-      onClick: this.handleClick,
-      on: this.v3 ? undefined : {
-        "click": this.handleClick,
-        "focusin": this.handleFocus
-      },
-      onFocusin: this.handleFocus,
-      tabIndex: tabIndex ? tabIndex : current ? 0 : -1,
-      "aria-current": current ? true : undefined,
-      "aria-disabled": disabled || !allowClick || undefined,
-      "aria-invalid": isValid !== undefined && !isValid || undefined
-    }, [!item ? [stepIndicator.call(this), stepLabel.call(this)] : defaultSlots])]);
-  },
-  methods: {
-    focus: function focus() {
-      if (this.$el) {
-        focusFirstFocusableChild(this.$el);
-      }
-    },
-    handleClick: function handleClick(event) {
-      if (!this.disabled) {
-        this.$emit('change', {
-          event: event,
-          value: this.index,
-          component: this
-        });
-      }
-    },
-    handleFocus: function handleFocus(event) {
-      if (!this.disabled) {
-        this.$emit('focus', event);
-      }
-    }
-  }
-};
-/**
- * Represents the [Kendo UI for Vue Step component]({% slug overview_stepper %}).
- *
- * ```jsx
- * <Step v-bind="props" @change="(e) => props.onChange(e)">
- * <span class="k-step-indicator" aria-hidden="true">
- *    <span class="emoji">{{ props.emoji }}</span>
- * </span>
- * <span class="k-step-label">
- *    <span class="k-step-text">{{ props.label }}</span>
- * </span>
- * </Step>
- * ```
- */
-var Step = StepVue2;
-export { Step, StepVue2 };

package/dist/es/stepper/Stepper.d.ts

@@ -1,97 +0,0 @@
-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 { StepperProps } from './interfaces/StepperProps';
-/**
- * @hidden
- */
-export interface StepperState {
-}
-/**
- * @hidden
- */
-export interface StepperComputed {
-    [key: string]: any;
-    computedValue: number;
-}
-/**
- * @hidden
- */
-export interface StepperMethods {
-    [key: string]: any;
-    setStepper: () => void;
-}
-/**
- * @hidden
- */
-export interface StepperData {
-    focusedIdx: number;
-    currentDir: string;
-}
-/**
- * @hidden
- */
-export interface StepperAll extends Vue2type, StepperMethods, StepperData, StepperComputed, StepperState {
-}
-/**
- * @hidden
- */
-declare let StepperVue2: ComponentOptions<StepperAll, DefaultData<StepperData>, DefaultMethods<StepperAll>, StepperComputed, RecordPropsDefinition<StepperProps>>;
-/**
- * Represents the [Kendo UI for Vue Stepper component]({% slug overview_stepper %}).
- *
- * ```jsx
- * <template>
- *    <Stepper :value="value" @change="handleChange" :items="items" />
- * </template>
- *
- * <script>
- * import {
- *  Stepper
- *     } from '@progress/kendo-vue-layout';
- * export default {
- *     components: {
- *        Stepper
- *     },
- *     data () {
- *       return {
- *         value: 0,
- *         items: [
- *           {
- *             label: "Cart",
- *             icon: "cart",
- *           },
- *           {
- *             label: "Delivery Address",
- *             icon: "marker-pin-target",
- *           },
- *           {
- *             label: "Payment Method",
- *             icon: "dollar",
- *           },
- *           {
- *             label: "Preview",
- *             icon: "preview",
- *             optional: true,
- *           },
- *           {
- *             label: "Finish Order",
- *             icon: "track-changes-accept",
- *           },
- *         ]
- *       }
- *     },
- *     methods: {
- *       handleChange (e) {
- *         this.value = e.value;
- *       }
- *     }
- * };
- * </script>
- * ```
- *
- */
-declare const Stepper: DefineComponent<StepperProps, any, StepperData, StepperComputed, StepperMethods, {}, {}, {}, string, StepperProps, StepperProps, {}>;
-export { Stepper, StepperVue2 };