@nextcloud/vue
Version:
Nextcloud vue components
95 lines (94 loc) • 4.28 kB
JavaScript
import '../assets/NcProgressBar-BAPOXMAL.css';
import { defineComponent, useCssVars, computed, createElementBlock, openBlock, normalizeClass, createElementVNode } from "vue";
import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
const _hoisted_1 = ["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 = ["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: {
value: { default: 0 },
size: { default: "small" },
error: { type: Boolean },
type: { default: "linear" },
color: { default: "var(--color-primary-element)" }
},
setup(__props) {
useCssVars((_ctx) => ({
"0a7905e8": _ctx.color,
"d7eb5974": 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 _ctx.type === "circular" ? (openBlock(), createElementBlock("span", {
key: 0,
role: "progressbar",
"aria-valuenow": _ctx.value,
class: normalizeClass([{ "progress-bar--error": _ctx.error }, "progress-bar progress-bar--circular"])
}, [
(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("progress", {
key: 1,
class: normalizeClass(["progress-bar progress-bar--linear vue", { "progress-bar--error": _ctx.error }]),
value: _ctx.value,
max: "100"
}, null, 10, _hoisted_5));
};
}
});
const NcProgressBar = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-38ba4aa1"]]);
export {
NcProgressBar as N
};
//# sourceMappingURL=NcProgressBar-DDMAo4h-.mjs.map