@nextcloud/vue/dist/chunks/NcProgressBar.mjs

Nextcloud vue components

import '../assets/NcProgressBar.css';
import { defineComponent, useCssVars, computed, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, createCommentVNode } from "vue";
import { _ as _export_sfc } from "./_plugin-vue_export-helper.mjs";
const _hoisted_1 = ["aria-label", "aria-labelledby", "aria-describedby", "aria-valuenow"];
const _hoisted_2 = ["height", "width"];
const _hoisted_3 = ["stroke-dasharray", "stroke-dashoffset", "stroke-width", "r", "cx", "cy"];
const _hoisted_4 = ["stroke-dasharray", "stroke-dashoffset", "stroke-width", "r", "cx", "cy"];
const _hoisted_5 = {
  key: 1,
  class: "progress-bar-container"
};
const _hoisted_6 = ["aria-label", "aria-labelledby", "aria-describedby", "value"];
const _hoisted_7 = {
  key: 0,
  "aria-hidden": "true",
  class: "progress-bar__value"
};
const gridBaseline = Number.parseInt(window.getComputedStyle(document.body).getPropertyValue("--default-grid-baseline"));
const clickableArea = Number.parseInt(window.getComputedStyle(document.body).getPropertyValue("--default-clickable-area"));
const clickableAreaSmall = Number.parseInt(window.getComputedStyle(document.body).getPropertyValue("--clickable-area-small"));
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "NcProgressBar",
  props: {
    ariaLabel: { default: void 0 },
    ariaLabelledby: { default: void 0 },
    ariaDescribedby: { default: void 0 },
    value: { default: 0 },
    size: { default: "small" },
    error: { type: Boolean },
    type: { default: "linear" },
    color: { default: "var(--color-primary-element)" },
    showValue: { type: Boolean, default: false }
  },
  setup(__props) {
    useCssVars((_ctx) => ({
      "v737c16c0": _ctx.color,
      "v0630ed12": heightPx.value
    }));
    const props = __props;
    const normalizedProgress = computed(() => Math.max(0, Math.min(100, props.value)) / 100);
    const height = computed(() => {
      if (typeof props.size === "number") {
        return Math.round(props.size);
      }
      if (props.type === "circular") {
        if (props.size === "medium") {
          return clickableArea;
        } else {
          return clickableAreaSmall;
        }
      }
      if (props.size === "medium") {
        return 1.5 * gridBaseline;
      }
      return gridBaseline;
    });
    const heightPx = computed(() => `${height.value}px`);
    const strokeWidth = computed(() => Math.max(gridBaseline, height.value / clickableArea * gridBaseline));
    const circleCenterPosition = computed(() => height.value / 2);
    const circleRadius = computed(() => height.value / 2 - strokeWidth.value);
    const circumference = computed(() => circleRadius.value * 2 * Math.PI);
    return (_ctx, _cache) => {
      return __props.type === "circular" ? (openBlock(), createElementBlock("span", {
        key: 0,
        class: normalizeClass(["progress-bar progress-bar--circular", { "progress-bar--error": __props.error }]),
        "aria-label": __props.ariaLabel,
        "aria-labelledby": __props.ariaLabelledby,
        "aria-describedby": __props.ariaDescribedby,
        "aria-valuenow": __props.value,
        role: "progressbar"
      }, [
        (openBlock(), createElementBlock("svg", {
          height: height.value,
          width: height.value
        }, [
          createElementVNode("circle", {
            stroke: "currentColor",
            fill: "transparent",
            "stroke-dasharray": `${normalizedProgress.value * circumference.value} ${(1 - normalizedProgress.value) * circumference.value}`,
            "stroke-dashoffset": 0.25 * circumference.value,
            "stroke-width": strokeWidth.value,
            r: circleRadius.value,
            cx: circleCenterPosition.value,
            cy: circleCenterPosition.value
          }, null, 8, _hoisted_3),
          createElementVNode("circle", {
            stroke: "var(--color-background-darker)",
            fill: "transparent",
            "stroke-dasharray": `${(1 - normalizedProgress.value) * circumference.value} ${normalizedProgress.value * circumference.value}`,
            "stroke-dashoffset": (0.25 - normalizedProgress.value) * circumference.value,
            "stroke-width": strokeWidth.value,
            r: circleRadius.value,
            cx: circleCenterPosition.value,
            cy: circleCenterPosition.value
          }, null, 8, _hoisted_4)
        ], 8, _hoisted_2))
      ], 10, _hoisted_1)) : (openBlock(), createElementBlock("div", _hoisted_5, [
        createElementVNode("progress", {
          class: normalizeClass(["progress-bar progress-bar--linear vue", { "progress-bar--error": __props.error }]),
          "aria-label": __props.ariaLabel,
          "aria-labelledby": __props.ariaLabelledby,
          "aria-describedby": __props.ariaDescribedby,
          value: __props.value,
          max: "100"
        }, null, 10, _hoisted_6),
        __props.showValue ? (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(__props.value) + "%", 1)) : createCommentVNode("", true)
      ]));
    };
  }
});
const NcProgressBar = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-461c5031"]]);
export {
  NcProgressBar as N
};
//# sourceMappingURL=NcProgressBar.mjs.map