@progress/kendo-vue-progressbars 2.6.4-dev.202111300936

package/dist/es/progressbar/ProgressBar.js

@@ -0,0 +1,240 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+import { animate, cancelAnimation } from '@progress/kendo-vue-animation';
+import { classNames, isRtl, getTabIndex, templateRendering, getListeners, getTemplate } from '@progress/kendo-vue-common';
+import { calculatePercentage, updateProgress, truncateNumber } from '../common/utils';
+import { DEFAULT_ANIMATION_DURATION, NO_ANIMATION } from '../common/constants';
+import { validatePackage } from '@progress/kendo-vue-common';
+import { packageMetadata } from '../package-metadata'; // tslint:enable:max-line-length
+
+var ProgressBar = {
+  name: 'KendoProgressBar',
+  props: {
+    animation: {
+      type: [Boolean, Object],
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    reverse: {
+      type: Boolean,
+      default: false
+    },
+    label: String,
+    labelRender: [String, Object, Function],
+    labelVisible: {
+      type: Boolean,
+      default: true
+    },
+    labelPlacement: {
+      type: String,
+      default: undefined,
+      validator: function validator(value) {
+        return ['start', 'center', 'end'].includes(value);
+      }
+    },
+    dir: {
+      type: String,
+      default: undefined
+    },
+    max: {
+      type: Number,
+      default: 100
+    },
+    min: {
+      type: Number,
+      default: 0
+    },
+    value: {
+      type: Number,
+      default: 0
+    },
+    orientation: {
+      type: String,
+      default: 'horizontal',
+      validator: function validator(value) {
+        return ['horizontal', 'vertical'].includes(value);
+      }
+    },
+    tabIndex: Number,
+    emptyStyle: Object,
+    emptyClassName: String,
+    progressStyle: Object,
+    progressClassName: String
+  },
+  created: function created() {
+    validatePackage(packageMetadata);
+  },
+  mounted: function mounted() {
+    this._progressStatus = this.v3 ? this.progressStatusRef : this.$refs.progressStatus;
+    this._progressStatusWrap = this.v3 ? this.progressStatusWrapRef : this.$refs.progressStatusWrap;
+    this.currentDir = this.$props.dir !== undefined ? this.$props.dir : isRtl(this.$el) ? 'rtl' : 'ltr';
+    this.animationFrame = animate({
+      duration: this.animationDuration,
+      onStart: this.handleStart,
+      onUpdate: this.handleUpdate,
+      onEnd: this.handleEnd
+    });
+  },
+  destroyed: !!gh ? undefined : function () {
+    cancelAnimation(this.animationFrame);
+  },
+  // @ts-ignore
+  unmounted: function unmounted() {
+    cancelAnimation(this.animationFrame);
+  },
+  data: function data() {
+    return {
+      currentDir: 'ltr'
+    };
+  },
+  watch: {
+    value: function value(_newValue, oldValue) {
+      this.prevValue = oldValue;
+      this.animationFrame = animate({
+        duration: this.animationDuration,
+        onStart: this.handleStart,
+        onUpdate: this.handleUpdate,
+        onEnd: this.handleEnd
+      });
+    }
+  },
+  computed: {
+    wrapperClass: function wrapperClass() {
+      var _a = this.$props,
+          disabled = _a.disabled,
+          reverse = _a.reverse,
+          orientation = _a.orientation,
+          value = _a.value;
+      var isVertical = orientation === 'vertical';
+      var indeterminateProp = value === null;
+      return {
+        'k-widget k-progressbar': true,
+        'k-progressbar-horizontal': !isVertical,
+        'k-progressbar-vertical': isVertical,
+        'k-progressbar-reverse': reverse,
+        'k-progressbar-indeterminate': indeterminateProp,
+        'k-state-disabled': disabled
+      };
+    },
+    isVertical: function isVertical() {
+      return this.orientation === 'vertical';
+    },
+    animationDuration: function animationDuration() {
+      var animation = this.$props.animation;
+      return typeof animation !== 'boolean' && animation !== undefined ? animation.duration : animation ? DEFAULT_ANIMATION_DURATION : NO_ANIMATION;
+    }
+  },
+  // @ts-ignore
+  setup: !gh ? undefined : function () {
+    var v3 = !!gh;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var _this = this;
+
+    var h = gh || createElement;
+    var _a = this.$props,
+        disabled = _a.disabled,
+        labelVisible = _a.labelVisible,
+        labelPlacement = _a.labelPlacement,
+        max = _a.max,
+        min = _a.min,
+        tabIndex = _a.tabIndex,
+        emptyStyle = _a.emptyStyle,
+        emptyClassName = _a.emptyClassName,
+        progressStyle = _a.progressStyle,
+        progressClassName = _a.progressClassName;
+    var value = this.$props.value || 0;
+    var indeterminateProp = this.$props.value === null;
+    var formattedLabel = truncateNumber(value);
+    var labelProps = {
+      value: value
+    };
+    var label = this.$props.labelRender ? templateRendering.call(this, this.$props.labelRender, getListeners.call(this)) : undefined;
+    var labelDefaultRendering = h('span', {
+      'class': 'k-progress-status'
+    }, formattedLabel);
+    var toggleButtonRendering = getTemplate.call(this, {
+      h: h,
+      template: label,
+      defaultRendering: labelDefaultRendering,
+      additionalProps: labelProps
+    });
+    var renderLabel = labelVisible ? this.$props.label ? h("span", {
+      "class": 'k-progress-status'
+    }, [this.$props.label]) : toggleButtonRendering : undefined;
+    var positionClasses = classNames('k-progress-status-wrap', {
+      'k-progress-start': labelPlacement === 'start',
+      'k-progress-center': labelPlacement === 'center',
+      'k-progress-end': labelPlacement === 'end' || labelPlacement === undefined
+    });
+    return h("div", {
+      "class": this.wrapperClass,
+      dir: this.currentDir,
+      attrs: this.v3 ? undefined : {
+        dir: this.currentDir,
+        tabindex: getTabIndex(tabIndex, disabled),
+        role: 'progressbar',
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        "aria-valuenow": indeterminateProp ? undefined : value,
+        "aria-disabled": disabled
+      },
+      tabindex: getTabIndex(tabIndex, disabled),
+      role: 'progressbar',
+      "aria-valuemin": min,
+      "aria-valuemax": max,
+      "aria-valuenow": indeterminateProp ? undefined : value,
+      "aria-disabled": disabled
+    }, [h("span", {
+      "class": positionClasses + (emptyClassName ? ' ' + emptyClassName : ''),
+      style: emptyStyle
+    }, [renderLabel]), h("div", {
+      "class": 'k-state-selected',
+      style: progressStyle,
+      ref: this.v3 ? function (el) {
+        _this.progressStatusRef = el;
+      } : 'progressStatus'
+    }, [h("span", {
+      "class": positionClasses + (progressClassName ? ' ' + progressClassName : ''),
+      ref: this.v3 ? function (el) {
+        _this.progressStatusWrapRef = el;
+      } : 'progressStatusWrap'
+    }, [renderLabel])])]);
+  },
+  methods: {
+    focus: function focus() {
+      if (this.$el) {
+        this.$el.focus();
+      }
+    },
+    progressStatusElement: function progressStatusElement() {
+      return this._progressStatus;
+    },
+    progressStatusWrapElement: function progressStatusWrapElement() {
+      return this._progressStatusWrap;
+    },
+    handleStart: function handleStart() {
+      var percentage = calculatePercentage(this.min, this.max, this.prevValue);
+      updateProgress(this._progressStatus, this._progressStatusWrap, percentage, this.isVertical);
+    },
+    handleUpdate: function handleUpdate(progress) {
+      var percentage = calculatePercentage(this.min, this.max, this.prevValue + (this.value - this.prevValue) * progress);
+      updateProgress(this._progressStatus, this._progressStatusWrap, percentage, this.isVertical);
+    },
+    handleEnd: function handleEnd() {
+      var percentage = calculatePercentage(this.min, this.max, this.value);
+      updateProgress(this._progressStatus, this._progressStatusWrap, percentage, this.isVertical);
+    }
+  }
+};
+var ProgressBarVue3 = ProgressBar;
+export { ProgressBar, ProgressBarVue3 };

package/dist/es/progressbar/hooks/usePrevious.d.ts

@@ -0,0 +1,2 @@
+/** @hidden */
+export declare const usePrevious: (value: any) => any;

package/dist/es/progressbar/hooks/usePrevious.js

@@ -0,0 +1,4 @@
+/** @hidden */
+export var usePrevious = function usePrevious(value) {
+  return value;
+};

package/dist/es/progressbar/interfaces/LabelProps.d.ts

@@ -0,0 +1,9 @@
+/**
+ * An interface for the ProgressBar label.
+ */
+export interface LabelProps {
+    /**
+     * Represents the current value of the ProgressBar.
+     */
+    value?: number | null;
+}

package/dist/es/progressbar/interfaces/ProgressBarAnimation.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Specifies the animation settings of the ProgressBar.
+ */
+export interface ProgressBarAnimation {
+    /**
+     * Specifies the duration of the ProgressBar animation. Defaults to `400`.
+     */
+    duration: number;
+}

package/dist/es/progressbar/interfaces/ProgressBarHandle.d.ts

@@ -0,0 +1,21 @@
+/**
+ * The ProgressBar ref.
+ */
+export interface ProgressBarHandle {
+    /**
+     * The ProgressBar element.
+     */
+    element: HTMLDivElement | null;
+    /**
+     * The progress status element.
+     */
+    progressStatusElement: HTMLDivElement | null;
+    /**
+     * The progress status wrap element.
+     */
+    progressStatusWrapElement: HTMLSpanElement | null;
+    /**
+     * Focus the ProgressBar.
+     */
+    focus: () => void;
+}

package/dist/es/progressbar/interfaces/ProgressBarHandle.js

@@ -0,0 +1,3 @@
+/**
+ * The ProgressBar ref.
+ */

package/dist/es/progressbar/interfaces/ProgressBarProps.d.ts

@@ -0,0 +1,29 @@
+import { BaseProps } from '../../common/BaseProps';
+import { ProgressBarAnimation } from './ProgressBarAnimation';
+/**
+ * Represents the props of the [Kendo UI for Vue ProgressBar component]({% slug overview_progressbar %}).
+ */
+export interface ProgressBarProps extends BaseProps {
+    /**
+     * Specifies the animation settings of the ProgressBar. Defaults to `false`.
+     * If boolean, enables or disables the default animation.
+     * Use ProgressBarAnimation to set slide animation with customizable duration option. Accepts a number in milliseconds.
+     */
+    animation?: boolean | ProgressBarAnimation;
+    /**
+     * Overrides the default label ([see example]({% slug progressbar_label %})).
+     */
+    label?: any;
+    /**
+     * Overrides the default label template ([see example]({% slug progressbar_label %})).
+     */
+    labelRender?: any;
+    /**
+     * Sets the visibility of the progress status label. Defaults to `true`.
+     */
+    labelVisible?: boolean;
+    /**
+     * Sets the position of the progress status label. Defaults to `end` ([see example]({% slug progressbar_label %})).
+     */
+    labelPlacement?: 'start' | 'center' | 'end' | any;
+}

package/dist/npm/additionalTypes.ts

@@ -0,0 +1,3 @@
+// @ts-ignore
+import { DefineComponent } from 'vue';
+export { DefineComponent };

package/dist/npm/common/BaseProps.d.ts

@@ -0,0 +1,74 @@
+/**
+ * @hidden
+ */
+export interface BaseProps {
+    /**
+     * Sets one of the two visually distinct types of progress bar.
+     *
+     * @hidden
+     */
+    type?: 'linear' | 'circular';
+    /**
+     * Sets the value of the progress bar. Has to be between `min` and `max` values. Defaults to `0`.
+     * Set `null` to enable the indeterminate state of the progress bar.
+     * See examples ([here]({% slug overview_progressbar %})) and ([here]({% slug overview_chunkprogressbar %})).
+     */
+    value?: number | null;
+    /**
+     * The minimum value of the progress bar. Defaults to `0`.
+     */
+    min?: number;
+    /**
+     * The maximum value of the progress bar. Defaults to `100`.
+     */
+    max?: number;
+    /**
+     * Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
+     */
+    dir?: string;
+    /**
+     * Sets the disabled state of the progress bar.
+     * See examples ([here]({% slug progressbar_disabled %})) and ([here]({% slug chunkprogressbar_disabled %})).
+     */
+    disabled?: boolean;
+    /**
+     * Defines the orientation of the progress bar.
+     * See examples ([here]({% slug progressbar_orientation %})) and ([here]({% slug chunkprogressbar_orientation %})).
+     * Defaults to `horizontal`.
+     */
+    orientation?: 'horizontal' | 'vertical' | string;
+    /**
+     * If set to `true`, the progress bar will be reversed.
+     * See examples ([here]({% slug progressbar_direction %})) and ([here]({% slug chunkprogressbar_direction %})).
+     * Defaults to `false`.
+     */
+    reverse?: boolean;
+    /**
+     * Specifies a list of CSS classes that will be added to the progress bar element.
+     */
+    className?: string;
+    /**
+     * The styles that are applied to the inner element which represents the empty portion of the progress bar.
+     * See examples ([here]({% slug progressbar_appearance %})) and ([here]({% slug chunkprogressbar_appearance %})).
+     */
+    emptyStyle?: object;
+    /**
+     * Sets additional classes to the inner element which represents the empty portion of the progress bar.
+     * See examples ([here]({% slug progressbar_appearance %})) and ([here]({% slug chunkprogressbar_appearance %})).
+     */
+    emptyClassName?: string;
+    /**
+     * The styles that are applied to the inner element which represents the full portion of the progress bar.
+     * See examples ([here]({% slug progressbar_appearance %})) and ([here]({% slug chunkprogressbar_appearance %})).
+     */
+    progressStyle?: object;
+    /**
+     * Sets additional classes to the inner element which represents the full portion of the progress bar.
+     * See examples ([here]({% slug progressbar_appearance %})) and ([here]({% slug chunkprogressbar_appearance %})).
+     */
+    progressClassName?: string;
+    /**
+     * Sets the `tabIndex` property of the progress bar.
+     */
+    tabIndex?: number;
+}

package/dist/npm/common/BaseProps.js

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

package/dist/npm/common/constants.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @hidden
+ */
+export declare const MIN_RATIO = 0.00001;
+/**
+ * @hidden
+ */
+export declare const LABEL_DECIMALS = 3;
+/**
+ * @hidden
+ */
+export declare const DEFAULT_ANIMATION_DURATION = 400;
+/**
+ * @hidden
+ */
+export declare const NO_ANIMATION = 0;

package/dist/npm/common/constants.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NO_ANIMATION = exports.DEFAULT_ANIMATION_DURATION = exports.LABEL_DECIMALS = exports.MIN_RATIO = void 0;
+/**
+ * @hidden
+ */
+exports.MIN_RATIO = 0.00001;
+/**
+ * @hidden
+ */
+exports.LABEL_DECIMALS = 3;
+/**
+ * @hidden
+ */
+exports.DEFAULT_ANIMATION_DURATION = 400;
+/**
+ * @hidden
+ */
+exports.NO_ANIMATION = 0;

package/dist/npm/common/utils.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @hidden
+ */
+export declare const truncateNumber: (value: number) => string;
+/**
+ * @hidden
+ */
+export declare const calculatePercentage: (min: number, max: number, value: number) => number;
+/**
+ * @hidden
+ */
+export declare const updateProgress: (progressRef: any, progressWrapRef: any, percentage: number, isVertical: boolean) => void;
+/**
+ * @hidden
+ */
+export declare const calculateRatio: (min: number, max: number, value: number) => number;

package/dist/npm/common/utils.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calculateRatio = exports.updateProgress = exports.calculatePercentage = exports.truncateNumber = void 0;
+var constants_1 = require("./constants");
+/**
+ * @hidden
+ */
+exports.truncateNumber = function (value) {
+    var numberParts = value.toString().split('.');
+    return numberParts.length === 1 ? "" + numberParts[0] : numberParts[0] + "." + numberParts[1].substr(0, constants_1.LABEL_DECIMALS);
+};
+/**
+ * @hidden
+ */
+exports.calculatePercentage = function (min, max, value) {
+    var onePercent = Math.abs((max - min) / 100);
+    return Math.abs((value - min) / onePercent);
+};
+/**
+ * @hidden
+ */
+exports.updateProgress = function (progressRef, progressWrapRef, percentage, isVertical) {
+    var progressPercentage = Math.max(percentage, 0.01);
+    var progressWrapPercentage = (100 / progressPercentage) * 100;
+    if (progressRef && progressWrapRef) {
+        progressRef.style.width = !isVertical ? progressPercentage + "%" : '100%';
+        progressWrapRef.style.width = !isVertical ? progressWrapPercentage + "%" : '100%';
+        progressRef.style.height = isVertical ? progressPercentage + "%" : '100%';
+        progressWrapRef.style.height = isVertical ? progressWrapPercentage + "%" : '100%';
+    }
+};
+/**
+ * @hidden
+ */
+exports.calculateRatio = function (min, max, value) {
+    return Math.max((value - min) / (max - min), constants_1.MIN_RATIO);
+};

package/dist/npm/main.d.ts

@@ -0,0 +1,5 @@
+export * from './progressbar/ProgressBar';
+export * from './progressbar/interfaces/ProgressBarHandle';
+export * from './progressbar/interfaces/ProgressBarProps';
+export * from './progressbar/interfaces/ProgressBarAnimation';
+export * from './progressbar/interfaces/LabelProps';

package/dist/npm/main.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./progressbar/ProgressBar"), exports);
+__exportStar(require("./progressbar/interfaces/ProgressBarHandle"), exports);
+__exportStar(require("./progressbar/interfaces/ProgressBarProps"), exports);
+__exportStar(require("./progressbar/interfaces/ProgressBarAnimation"), exports);
+__exportStar(require("./progressbar/interfaces/LabelProps"), exports);

package/dist/npm/package-metadata.d.ts

@@ -0,0 +1,5 @@
+import { PackageMetadata } from '@progress/kendo-licensing';
+/**
+ * @hidden
+ */
+export declare const packageMetadata: PackageMetadata;

package/dist/npm/package-metadata.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.packageMetadata = void 0;
+/**
+ * @hidden
+ */
+exports.packageMetadata = {
+    name: '@progress/kendo-vue-progressbars',
+    productName: 'Kendo UI for Vue',
+    productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
+    publishDate: 1638264751,
+    version: '',
+    licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
+};

package/dist/npm/progressbar/ProgressBar.d.ts

@@ -0,0 +1,49 @@
+import { DefineComponent } from '../additionalTypes';
+import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+import { ProgressBarProps } from './interfaces/ProgressBarProps';
+/**
+ * @hidden
+ */
+export interface ProgressBarState {
+    _progressStatus?: any;
+    _progressStatusWrap?: any;
+    animationFrame: any;
+    prevValue: number;
+    v3: boolean;
+}
+/**
+ * @hidden
+ */
+export interface ProgressBarComputed {
+    [key: string]: any;
+    wrapperClass: object;
+    isVertical: boolean;
+    animationDuration: number;
+}
+/**
+ * @hidden
+ */
+export interface ProgressBarMethods {
+    [key: string]: any;
+    focus: (e: any) => void;
+    toggleIfApplicable: () => void;
+    handleClick: (event: any) => void;
+}
+/**
+ * @hidden
+ */
+export interface ProgressBarData {
+    currentActive: boolean;
+}
+/**
+ * @hidden
+ */
+export interface ProgressBarAll extends Vue, ProgressBarMethods, ProgressBarData, ProgressBarComputed, ProgressBarState {
+}
+declare let ProgressBar: ComponentOptions<ProgressBarAll, DefaultData<ProgressBarData>, DefaultMethods<ProgressBarAll>, ProgressBarComputed, RecordPropsDefinition<ProgressBarProps>>;
+declare const ProgressBarVue3: DefineComponent<ProgressBarProps, any, ProgressBarData, ProgressBarComputed, ProgressBarMethods, {}, {}, {}, string, ProgressBarProps, ProgressBarProps, {}>;
+export { ProgressBar, ProgressBarVue3 };