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

package/dist/npm/progressbar/ProgressBar.js

@@ -0,0 +1,255 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProgressBarVue3 = exports.ProgressBar = void 0; // @ts-ignore
+
+var Vue = require("vue");
+
+var allVue = Vue;
+var gh = allVue.h;
+
+var kendo_vue_animation_1 = require("@progress/kendo-vue-animation");
+
+var kendo_vue_common_1 = require("@progress/kendo-vue-common");
+
+var utils_1 = require("../common/utils");
+
+var constants_1 = require("../common/constants");
+
+var kendo_vue_common_2 = require("@progress/kendo-vue-common");
+
+var package_metadata_1 = require("../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() {
+    kendo_vue_common_2.validatePackage(package_metadata_1.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 : kendo_vue_common_1.isRtl(this.$el) ? 'rtl' : 'ltr';
+    this.animationFrame = kendo_vue_animation_1.animate({
+      duration: this.animationDuration,
+      onStart: this.handleStart,
+      onUpdate: this.handleUpdate,
+      onEnd: this.handleEnd
+    });
+  },
+  destroyed: !!gh ? undefined : function () {
+    kendo_vue_animation_1.cancelAnimation(this.animationFrame);
+  },
+  // @ts-ignore
+  unmounted: function unmounted() {
+    kendo_vue_animation_1.cancelAnimation(this.animationFrame);
+  },
+  data: function data() {
+    return {
+      currentDir: 'ltr'
+    };
+  },
+  watch: {
+    value: function value(_newValue, oldValue) {
+      this.prevValue = oldValue;
+      this.animationFrame = kendo_vue_animation_1.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 ? constants_1.DEFAULT_ANIMATION_DURATION : constants_1.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 = utils_1.truncateNumber(value);
+    var labelProps = {
+      value: value
+    };
+    var label = this.$props.labelRender ? kendo_vue_common_1.templateRendering.call(this, this.$props.labelRender, kendo_vue_common_1.getListeners.call(this)) : undefined;
+    var labelDefaultRendering = h('span', {
+      'class': 'k-progress-status'
+    }, formattedLabel);
+    var toggleButtonRendering = kendo_vue_common_1.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 = kendo_vue_common_1.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: kendo_vue_common_1.getTabIndex(tabIndex, disabled),
+        role: 'progressbar',
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        "aria-valuenow": indeterminateProp ? undefined : value,
+        "aria-disabled": disabled
+      },
+      tabindex: kendo_vue_common_1.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 = utils_1.calculatePercentage(this.min, this.max, this.prevValue);
+      utils_1.updateProgress(this._progressStatus, this._progressStatusWrap, percentage, this.isVertical);
+    },
+    handleUpdate: function handleUpdate(progress) {
+      var percentage = utils_1.calculatePercentage(this.min, this.max, this.prevValue + (this.value - this.prevValue) * progress);
+      utils_1.updateProgress(this._progressStatus, this._progressStatusWrap, percentage, this.isVertical);
+    },
+    handleEnd: function handleEnd() {
+      var percentage = utils_1.calculatePercentage(this.min, this.max, this.value);
+      utils_1.updateProgress(this._progressStatus, this._progressStatusWrap, percentage, this.isVertical);
+    }
+  }
+};
+exports.ProgressBar = ProgressBar;
+var ProgressBarVue3 = ProgressBar;
+exports.ProgressBarVue3 = ProgressBarVue3;

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

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

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

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePrevious = void 0;
+/** @hidden */
+
+exports.usePrevious = function (value) {
+  return value;
+};

package/dist/npm/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/npm/progressbar/interfaces/LabelProps.js

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

package/dist/npm/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/npm/progressbar/interfaces/ProgressBarAnimation.js

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

package/dist/npm/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/npm/progressbar/interfaces/ProgressBarHandle.js

@@ -0,0 +1,5 @@
+"use strict";
+/**
+ * The ProgressBar ref.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/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/progressbar/interfaces/ProgressBarProps.js

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

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@progress/kendo-vue-progressbars",
+  "description": "Kendo UI for Vue ProgressBars package",
+  "version": "2.6.4-dev.202111300936",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/telerik/kendo-vue.git"
+  },
+  "main": "dist/npm/main.js",
+  "types": "dist/npm/main.d.ts",
+  "module": "dist/es/main.js",
+  "jsnext:main": "dist/es/main.js",
+  "scripts": {
+    "test": "cd ../../ && npm run test -- --testPathPattern=/packages/progressbars/.*",
+    "start": "gulp start",
+    "build-package": "gulp build-package"
+  },
+  "homepage": "https://www.telerik.com/kendo-vue-ui/",
+  "keywords": [
+    "Kendo UI",
+    "Vue",
+    "Progress",
+    "ProgressBars",
+    "ProgressBar",
+    "ChunkProgressBar",
+    "Kendo UI for Vue",
+    "vuejs",
+    "UI",
+    "components",
+    "Vue component",
+    "Telerik"
+  ],
+  "peerDependencies": {
+    "@progress/kendo-licensing": "^1.0.1",
+    "@progress/kendo-vue-animation": "^2.6.3",
+    "vue": "^2.6.12 || ^3.0.2"
+  },
+  "devDependencies": {
+    "@progress/kendo-drawing": "^1.8.0",
+    "@progress/kendo-licensing": "^1.0.1",
+    "@progress/kendo-vue-animation": "2.6.4-dev.202111300936",
+    "@progress/kendo-vue-buttons": "2.6.4-dev.202111300936",
+    "@progress/kendo-vue-dropdowns": "2.6.4-dev.202111300936",
+    "@progress/kendo-vue-form": "2.6.4-dev.202111300936",
+    "@progress/kendo-vue-inputs": "2.6.4-dev.202111300936",
+    "@progress/kendo-vue-intl": "2.6.4-dev.202111300936"
+  },
+  "dependencies": {
+    "@progress/kendo-vue-common": "2.6.4-dev.202111300936"
+  },
+  "@progress": {
+    "friendlyName": "ProgressBars",
+    "framework": "Kendo UI for Vue"
+  },
+  "author": "Progress",
+  "license": "SEE LICENSE IN LICENSE.md",
+  "publishConfig": {
+    "access": "public"
+  }
+}