primevue/progressspinner/index.mjs

PrimeVue is a premium UI library for Vue featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, wh

import BaseComponent from '@primevue/core/basecomponent';
import ProgressSpinnerStyle from 'primevue/progressspinner/style';
import { openBlock, createElementBlock, mergeProps, createElementVNode, renderSlot, createTextVNode, toDisplayString, createCommentVNode } from 'vue';

var script$1 = {
  name: 'BaseProgressSpinner',
  "extends": BaseComponent,
  props: {
    value: {
      type: Number,
      "default": null
    },
    strokeWidth: {
      type: Number,
      "default": 4
    },
    animationDuration: {
      type: String,
      "default": '2s'
    },
    min: {
      type: Number,
      "default": 0
    },
    max: {
      type: Number,
      "default": 100
    }
  },
  style: ProgressSpinnerStyle,
  provide: function provide() {
    return {
      $pcProgressSpinner: this,
      $parentInstance: this
    };
  }
};

var script = {
  name: 'ProgressSpinner',
  "extends": script$1,
  inheritAttrs: false,
  computed: {
    isDeterminate: function isDeterminate() {
      return Number.isFinite(this.value);
    },
    determinateState: function determinateState() {
      return this.isDeterminate ? 'determinate' : 'indeterminate';
    },
    validRange: function validRange() {
      return Number.isFinite(this.min) && Number.isFinite(this.max) && this.max > this.min;
    },
    clampedValue: function clampedValue() {
      if (!this.isDeterminate) {
        return 0;
      }
      if (!this.validRange) {
        return Number.isFinite(this.min) ? this.min : 0;
      }
      var value = Number.isFinite(this.value) ? this.value : this.min;
      return Math.min(Math.max(value, this.min), this.max);
    },
    percent: function percent() {
      return !this.isDeterminate || !this.validRange ? 0 : (this.clampedValue - this.min) / (this.max - this.min) * 100;
    },
    roundedPercent: function roundedPercent() {
      return Math.round(this.percent);
    },
    radius: function radius() {
      return (100 - this.strokeWidth) / 2;
    },
    circumference: function circumference() {
      return 2 * Math.PI * this.radius;
    },
    dashOffset: function dashOffset() {
      return this.circumference - this.percent / 100 * this.circumference;
    },
    svgStyle: function svgStyle() {
      return {
        'animation-duration': this.animationDuration
      };
    }
  }
};

var _hoisted_1 = ["aria-valuemin", "aria-valuemax", "aria-valuenow", "data-state", "data-value"];
var _hoisted_2 = ["r", "stroke-width"];
var _hoisted_3 = ["r", "stroke-width", "stroke-dasharray", "stroke-dashoffset"];
function render(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createElementBlock("div", mergeProps({
    "class": _ctx.cx('root'),
    role: "progressbar",
    "aria-valuemin": _ctx.min,
    "aria-valuemax": _ctx.max,
    "aria-valuenow": $options.isDeterminate ? $options.clampedValue : undefined,
    "data-state": $options.determinateState,
    "data-value": $options.isDeterminate ? $options.clampedValue : undefined
  }, _ctx.ptmi('root')), [(openBlock(), createElementBlock("svg", mergeProps({
    "class": _ctx.cx('circle'),
    viewBox: "0 0 100 100",
    style: $options.svgStyle
  }, _ctx.ptm('circle')), [createElementVNode("circle", mergeProps({
    "class": _ctx.cx('circleTrack'),
    cx: "50",
    cy: "50",
    r: $options.radius,
    fill: "none",
    "stroke-width": _ctx.strokeWidth
  }, _ctx.ptm('circleTrack')), null, 16, _hoisted_2), createElementVNode("circle", mergeProps({
    "class": _ctx.cx('circleRange'),
    cx: "50",
    cy: "50",
    r: $options.radius,
    fill: "none",
    "stroke-width": _ctx.strokeWidth,
    "stroke-dasharray": $options.isDeterminate ? $options.circumference : undefined,
    "stroke-dashoffset": $options.isDeterminate ? $options.dashOffset : undefined
  }, _ctx.ptm('circleRange')), null, 16, _hoisted_3), $options.isDeterminate ? (openBlock(), createElementBlock("text", mergeProps({
    key: 0,
    "class": _ctx.cx('value'),
    x: "50",
    y: "50",
    "text-anchor": "middle",
    "dominant-baseline": "central"
  }, _ctx.ptm('value')), [renderSlot(_ctx.$slots, "default", {
    value: $options.clampedValue,
    percent: $options.roundedPercent
  }, function () {
    return [createTextVNode(toDisplayString($options.roundedPercent) + "%", 1)];
  })], 16)) : createCommentVNode("", true)], 16))], 16, _hoisted_1);
}

script.render = render;

export { script as default };