@progress/kendo-vue-progressbars 5.3.0-dev.202410141143 → 5.3.0-develop.1

package/progressbar/ProgressBar.mjs

@@ -0,0 +1,204 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { defineComponent as P, h as m, createVNode as r } from "vue";
+import { animate as g, cancelAnimation as x } from "@progress/kendo-vue-animation";
+import { validatePackage as R, getRef as b, isRtl as D, templateRendering as C, getListeners as E, getTemplate as I, classNames as O, getTabIndex as W, setRef as f } from "@progress/kendo-vue-common";
+import { truncateNumber as A, calculatePercentage as o, updateProgress as l } from "../common/utils.mjs";
+import { DEFAULT_ANIMATION_DURATION as B, NO_ANIMATION as U } from "../common/constants.mjs";
+import { packageMetadata as w } from "../package-metadata.mjs";
+const K = /* @__PURE__ */ P({
+  name: "KendoProgressBar",
+  props: {
+    animation: {
+      type: [Boolean, Object],
+      default: !1
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    reverse: {
+      type: Boolean,
+      default: !1
+    },
+    label: String,
+    labelRender: [String, Object, Function],
+    labelVisible: {
+      type: Boolean,
+      default: !0
+    },
+    labelPlacement: {
+      type: String,
+      default: void 0,
+      validator: function(e) {
+        return ["start", "center", "end"].includes(e);
+      }
+    },
+    dir: {
+      type: String,
+      default: void 0
+    },
+    max: {
+      type: Number,
+      default: 100
+    },
+    min: {
+      type: Number,
+      default: 0
+    },
+    value: {
+      type: Number,
+      default: 0
+    },
+    orientation: {
+      type: String,
+      default: "horizontal",
+      validator: function(e) {
+        return ["horizontal", "vertical"].includes(e);
+      }
+    },
+    tabIndex: Number,
+    emptyStyle: Object,
+    emptyClassName: String,
+    progressStyle: Object,
+    progressClassName: String,
+    ariaLabel: String
+  },
+  created() {
+    R(w), this.currentDir = this.$props.dir;
+  },
+  mounted() {
+    this._progressStatus = b(this, "progressStatus"), this._progressStatusWrap = b(this, "progressStatusWrap"), this.currentDir = this.$props.dir !== void 0 ? this.$props.dir : D(this.$el) ? "rtl" : "ltr", this.animationFrame = g({
+      duration: this.animationDuration,
+      onStart: this.handleStart,
+      onUpdate: this.handleUpdate,
+      onEnd: this.handleEnd
+    });
+  },
+  unmounted() {
+    x(this.animationFrame);
+  },
+  data() {
+    return {
+      currentDir: void 0
+    };
+  },
+  watch: {
+    value: function(e, t) {
+      this.prevValue = t, this.animationFrame = g({
+        duration: this.animationDuration,
+        onStart: this.handleStart,
+        onUpdate: this.handleUpdate,
+        onEnd: this.handleEnd
+      });
+    }
+  },
+  computed: {
+    wrapperClass() {
+      const {
+        disabled: e,
+        reverse: t,
+        orientation: s,
+        value: i
+      } = this.$props, a = s === "vertical";
+      return {
+        "k-progressbar": !0,
+        "k-progressbar-horizontal": !a,
+        "k-progressbar-vertical": a,
+        "k-progressbar-reverse": t,
+        "k-progressbar-indeterminate": i === null,
+        "k-disabled": e
+      };
+    },
+    isVertical() {
+      return this.orientation === "vertical";
+    },
+    animationDuration() {
+      const {
+        animation: e
+      } = this.$props;
+      return typeof e != "boolean" && e !== void 0 ? e.duration : e ? B : U;
+    }
+  },
+  render() {
+    const {
+      disabled: e,
+      labelVisible: t,
+      labelPlacement: s,
+      max: i,
+      min: a,
+      tabIndex: p,
+      emptyStyle: S,
+      emptyClassName: d,
+      progressStyle: v,
+      progressClassName: u
+    } = this.$props, n = this.$props.value || 0, y = this.$props.value === null, N = A(n), k = {
+      value: n
+    }, $ = this.$props.labelRender ? C.call(this, this.$props.labelRender, E.call(this)) : void 0, _ = m("span", {
+      class: "k-progress-status"
+    }, N), V = I.call(this, {
+      h: m,
+      template: $,
+      defaultRendering: _,
+      additionalProps: k
+    }), h = t ? this.$props.label ? r("span", {
+      class: "k-progress-status"
+    }, [this.$props.label]) : V : void 0, c = O("k-progress-status-wrap", {
+      "k-progress-start": s === "start",
+      "k-progress-center": s === "center",
+      "k-progress-end": s === "end" || s === void 0
+    });
+    return r("div", {
+      class: this.wrapperClass,
+      dir: this.currentDir,
+      tabindex: W(p, e),
+      role: "progressbar",
+      "aria-valuemin": a,
+      "aria-valuemax": i,
+      "aria-valuenow": y ? void 0 : n,
+      "aria-disabled": e,
+      "aria-label": this.$props.ariaLabel
+    }, [r("span", {
+      class: c + (d ? " " + d : ""),
+      style: S
+    }, [h]), r("div", {
+      class: "k-progressbar-value k-selected",
+      style: v,
+      ref: f(this, "progressStatus")
+    }, [r("span", {
+      class: c + (u ? " " + u : ""),
+      ref: f(this, "progressStatusWrap")
+    }, [h])])]);
+  },
+  methods: {
+    focus() {
+      this.$el && this.$el.focus();
+    },
+    progressStatusElement() {
+      return this._progressStatus;
+    },
+    progressStatusWrapElement() {
+      return this._progressStatusWrap;
+    },
+    handleStart() {
+      const e = o(this.min, this.max, this.prevValue);
+      l(this._progressStatus, this._progressStatusWrap, e, this.isVertical);
+    },
+    handleUpdate(e) {
+      const t = o(this.min, this.max, this.prevValue + (this.value - this.prevValue) * e);
+      l(this._progressStatus, this._progressStatusWrap, t, this.isVertical);
+    },
+    handleEnd() {
+      const e = o(this.min, this.max, this.value);
+      l(this._progressStatus, this._progressStatusWrap, e, this.isVertical);
+    }
+  }
+});
+export {
+  K as ProgressBar
+};

package/dist/es/additionalTypes.ts

@@ -1,21 +0,0 @@
-// @ts-ignore
-import { DefineComponent } from 'vue';
-// @ts-ignore
-import * as Vue from 'vue';
-
-/**
- * @hidden
- */
-// @ts-ignore
-type Vue2type = Vue.default;
-
-/**
- * @hidden
- */
-// @ts-ignore
-import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
-/**
- * @hidden
- */
-// @ts-ignore
-export { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type };

package/dist/es/chunkprogressbar/ChunkProgressBar.d.ts

@@ -1,44 +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 { ChunkProgressBarProps } from './interfaces/ChunkProgressBarProps';
-/**
- * @hidden
- */
-export interface ChunkProgressBarState {
-    v3: boolean;
-}
-/**
- * @hidden
- */
-export interface ChunkProgressBarComputed {
-    [key: string]: any;
-}
-/**
- * @hidden
- */
-export interface ChunkProgressBarMethods {
-    [key: string]: any;
-}
-/**
- * @hidden
- */
-export interface ChunkProgressBarData {
-    currentActive: boolean;
-}
-/**
- * @hidden
- */
-export interface ChunkProgressBarAll extends Vue2type, ChunkProgressBarMethods, ChunkProgressBarData, ChunkProgressBarComputed, ChunkProgressBarState {
-}
-/**
- * @hidden
- */
-declare let ChunkProgressBarVue2: ComponentOptions<ChunkProgressBarAll, DefaultData<ChunkProgressBarData>, DefaultMethods<ChunkProgressBarAll>, ChunkProgressBarComputed, RecordPropsDefinition<ChunkProgressBarProps>>;
-/**
- * @hidden
- */
-declare const ChunkProgressBar: DefineComponent<ChunkProgressBarProps, any, ChunkProgressBarData, ChunkProgressBarComputed, ChunkProgressBarMethods, {}, {}, {}, string, ChunkProgressBarProps, ChunkProgressBarProps, {}>;
-export { ChunkProgressBar, ChunkProgressBarVue2 };

package/dist/es/chunkprogressbar/ChunkProgressBar.js

@@ -1,172 +0,0 @@
-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';
-import { classNames, getDir, getTabIndex } from '@progress/kendo-vue-common';
-import { calculateRatio } from '../common/utils';
-import { validatePackage } from '@progress/kendo-vue-common';
-import { packageMetadata } from '../package-metadata';
-/**
- * @hidden
- */
-var ChunkProgressBarVue2 = {
-  name: 'KendoChunkProgressBar',
-  props: {
-    chunkCount: {
-      type: Number,
-      default: 5
-    },
-    ariaLabel: String,
-    disabled: Boolean,
-    reverse: {
-      type: Boolean,
-      default: false
-    },
-    max: {
-      type: Number,
-      default: 100
-    },
-    min: {
-      type: Number,
-      default: 0
-    },
-    value: {
-      type: Number,
-      default: 0
-    },
-    tabIndex: Number,
-    emptyStyle: Object,
-    emptyClassName: String,
-    progressStyle: Object,
-    progressClassName: String,
-    orientation: {
-      type: String,
-      default: 'horizontal',
-      validator: function validator(value) {
-        return ['horizontal', 'vertical'].includes(value);
-      }
-    }
-  },
-  created: function created() {
-    validatePackage(packageMetadata);
-  },
-  data: function data() {
-    return {
-      currentDir: undefined
-    };
-  },
-  mounted: function mounted() {
-    this.currentDir = getDir(this.$el, this.$props.dir);
-  },
-  // @ts-ignore
-  setup: !isV3 ? undefined : function () {
-    var v3 = !!isV3;
-    return {
-      v3: v3
-    };
-  },
-  // @ts-ignore
-  render: function render(createElement) {
-    var h = gh || createElement;
-    var _a = this.$props,
-      chunkCount = _a.chunkCount,
-      disabled = _a.disabled,
-      orientation = _a.orientation,
-      min = _a.min,
-      max = _a.max,
-      reverse = _a.reverse,
-      tabIndex = _a.tabIndex,
-      emptyStyle = _a.emptyStyle,
-      emptyClassName = _a.emptyClassName,
-      progressStyle = _a.progressStyle,
-      progressClassName = _a.progressClassName;
-    var value = this.$props.value;
-    var indeterminateProp = this.$props.value === null;
-    var isVertical = orientation === 'vertical';
-    var renderChunks = function renderChunks(count) {
-      var chunks = [];
-      var chunkSizePercentage = 100 / count + '%';
-      var progressRatio = calculateRatio(min, max, value);
-      var completedChunksCount = Math.floor(progressRatio * count);
-      var completedChunks = Array(count).fill(false);
-      var reverseCompletedChunks = isVertical && !reverse || !isVertical && reverse;
-      for (var i = 0; i < completedChunksCount; i++) {
-        completedChunks[i] = true;
-      }
-      for (var i = 0; i < count; ++i) {
-        var isComplete = completedChunks[i];
-        var classes = isComplete ? progressClassName : emptyClassName;
-        var layoutStyles = {
-          width: !isVertical ? chunkSizePercentage : undefined,
-          height: isVertical ? chunkSizePercentage : undefined
-        };
-        var styles = isComplete ? progressStyle : emptyStyle;
-        var mergedStyles = __assign(__assign({}, layoutStyles), styles);
-        chunks.push(h("li", {
-          key: i,
-          "class": classNames('k-progressbar-chunk', {
-            'k-first': i === 0,
-            'k-last': i === count - 1,
-            'k-selected': isComplete
-          }, classes),
-          style: mergedStyles
-        }));
-      }
-      return chunks;
-    };
-    return h("div", {
-      "class": classNames('k-progressbar', 'k-chunk-progressbar', {
-        'k-progressbar-horizontal': !isVertical,
-        'k-progressbar-vertical': isVertical,
-        'k-progressbar-reverse': reverse,
-        'k-progressbar-indeterminate': indeterminateProp,
-        'k-disabled': disabled
-      }),
-      dir: this.currentDir,
-      attrs: this.v3 ? undefined : {
-        dir: this.currentDir,
-        tabIndex: getTabIndex(tabIndex, disabled),
-        role: 'progressbar',
-        "aria-label": this.$props.ariaLabel,
-        "aria-valuemin": min,
-        "aria-valuemax": max,
-        "aria-valuenow": indeterminateProp ? undefined : value,
-        "aria-disabled": disabled
-      },
-      tabIndex: getTabIndex(tabIndex, disabled),
-      role: 'progressbar',
-      "aria-label": this.$props.ariaLabel,
-      "aria-valuemin": min,
-      "aria-valuemax": max,
-      "aria-valuenow": indeterminateProp ? undefined : value,
-      "aria-disabled": disabled
-    }, [h("ul", {
-      "class": 'k-progressbar-chunks k-reset'
-    }, [renderChunks.call(this, chunkCount)])]);
-  },
-  methods: {
-    focusElement: function focusElement() {
-      if (this.$el) {
-        this.$el.focus();
-      }
-    }
-  }
-};
-/**
- * @hidden
- */
-var ChunkProgressBar = ChunkProgressBarVue2;
-export { ChunkProgressBar, ChunkProgressBarVue2 };

package/dist/es/chunkprogressbar/interfaces/ChunkProgressBarProps.d.ts

@@ -1,10 +0,0 @@
-import { BaseProps } from '../../common/BaseProps';
-/**
- * Represents the props of the [Kendo UI for Vue ChunkProgressBar component]({% slug overview_chunkprogressbar %}).
- */
-export interface ChunkProgressBarProps extends BaseProps {
-    /**
-     * Sets the number of chunks into which the ChunkProgressBar will be split. Defaults to `5`.
-     */
-    chunkCount?: number;
-}

package/dist/es/chunkprogressbar/interfaces/ChunkProgressBarProps.js

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

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

@@ -1,78 +0,0 @@
-/**
- * @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 %})).
-     */
-    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;
-    /**
-     * The accessible label of the component.
-     */
-    ariaLabel?: string;
-    /**
-     * Sets the disabled state of the progress bar.
-     * See examples ([here]({% slug progressbar_disabled %})).
-     */
-    disabled?: boolean;
-    /**
-     * Defines the orientation of the progress bar.
-     * See examples ([here]({% slug progressbar_orientation %})) .
-     * Defaults to `horizontal`.
-     */
-    orientation?: 'horizontal' | 'vertical' | string;
-    /**
-     * If set to `true`, the progress bar will be reversed.
-     * See examples ([here]({% slug progressbar_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 %})).
-     */
-    emptyStyle?: object;
-    /**
-     * Sets additional classes to the inner element which represents the empty portion of the progress bar.
-     * See examples ([here]({% slug progressbar_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 %})).
-     */
-    progressStyle?: object;
-    /**
-     * Sets additional classes to the inner element which represents the full portion of the progress bar.
-     * See examples ([here]({% slug progressbar_appearance %})).
-     */
-    progressClassName?: string;
-    /**
-     * Sets the `tabIndex` property of the progress bar.
-     */
-    tabIndex?: number;
-}

package/dist/es/common/BaseProps.js

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

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

@@ -1,16 +0,0 @@
-/**
- * @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/es/common/constants.js

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

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

@@ -1,16 +0,0 @@
-/**
- * @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/es/common/utils.js

@@ -1,34 +0,0 @@
-import { LABEL_DECIMALS, MIN_RATIO } from './constants';
-/**
- * @hidden
- */
-export var truncateNumber = function (value) {
-    var numberParts = value.toString().split('.');
-    return numberParts.length === 1 ? "".concat(numberParts[0]) : "".concat(numberParts[0], ".").concat(numberParts[1].substr(0, LABEL_DECIMALS));
-};
-/**
- * @hidden
- */
-export var calculatePercentage = function (min, max, value) {
-    var onePercent = Math.abs((max - min) / 100);
-    return Math.abs((value - min) / onePercent);
-};
-/**
- * @hidden
- */
-export var 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 ? "".concat(progressPercentage, "%") : '100%';
-        progressWrapRef.style.width = !isVertical ? "".concat(progressWrapPercentage, "%") : '100%';
-        progressRef.style.height = isVertical ? "".concat(progressPercentage, "%") : '100%';
-        progressWrapRef.style.height = isVertical ? "".concat(progressWrapPercentage, "%") : '100%';
-    }
-};
-/**
- * @hidden
- */
-export var calculateRatio = function (min, max, value) {
-    return Math.max((value - min) / (max - min), MIN_RATIO);
-};

package/dist/es/main.d.ts

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

package/dist/es/main.js

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

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

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

package/dist/es/package-metadata.js

@@ -1,11 +0,0 @@
-/**
- * @hidden
- */
-export var packageMetadata = {
-    name: '@progress/kendo-vue-progressbars',
-    productName: 'Kendo UI for Vue',
-    productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1728905610,
-    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'
-};