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

package/dist/esm/stepper/Step.js

@@ -0,0 +1,227 @@
+// @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 } from '@progress/kendo-vue-common';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { DEFAULT_ANIMATION_DURATION, NO_ANIMATION } from './contants.js';
+import { messages, optionalText } from './messages.js';
+/**
+ * @hidden
+ */
+
+var StepVue2 = {
+  name: 'KendoStep',
+  props: {
+    current: Boolean,
+    disabled: Boolean,
+    icon: String,
+    index: Number,
+    isValid: Boolean,
+    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,
+    errorIcon: String
+  },
+  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-step-disabled': disabled,
+        'k-step-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,
+        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,
+        errorIcon = _a.errorIcon;
+    var allowClick = !linear || index === value - 1 || index === value || index === value + 1;
+    var isInLabel = mode === 'labels' || Boolean(icon) && 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 validationIconClasses = isValid ? successIcon ? "".concat(successIcon) : 'k-icon k-i-check' : errorIcon ? "".concat(errorIcon) : 'k-icon k-i-warning';
+    var validationIcons = h("span", {
+      "class": 'k-step-indicator-icon ' + validationIconClasses,
+      "aria-hidden": "true",
+      attrs: this.v3 ? undefined : {
+        "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 ? !isInLabel && isValid !== undefined ? validationIcons : h("span", {
+        "class": "k-step-indicator-icon k-icon ".concat(icon)
+      }) : 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: focused ? tabIndex : -1,
+        "aria-current": current ? 'step' : 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: focused ? tabIndex : -1,
+      "aria-current": current ? 'step' : 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/esm/stepper/Stepper.d.ts

@@ -0,0 +1,97 @@
+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: "k-i-cart",
+ *           },
+ *           {
+ *             label: "Delivery Address",
+ *             icon: "k-i-marker-pin-target",
+ *           },
+ *           {
+ *             label: "Payment Method",
+ *             icon: "k-i-dollar",
+ *           },
+ *           {
+ *             label: "Preview",
+ *             icon: "k-i-preview",
+ *             optional: true,
+ *           },
+ *           {
+ *             label: "Finish Order",
+ *             icon: "k-i-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 };