hongluan-ui
Version:
Hongluan Component Library for Vue 3
236 lines (231 loc) • 9.55 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
require('../../../hooks/index.js');
require('../../../utils/index.js');
var progress = require('./progress2.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
var index = require('../../../hooks/use-namespace/index.js');
var style = require('../../../utils/dom/style.js');
const _sfc_main = vue.defineComponent({
name: "Progress",
props: progress.progressProps,
setup(props) {
const { namespace } = index.useNamespace("progress");
const progressRef = vue.ref(null);
const pathWidth = vue.ref("");
const relativeStrokeWidth = vue.computed(() => {
let width;
if (props.strokeWidth) {
width = Number.parseFloat(String(props.strokeWidth));
} else {
width = Number.parseFloat(pathWidth.value);
}
return Number.isNaN(width) ? 0 : width;
});
const radius = vue.computed(() => {
if (props.showAs === "circle" || props.showAs === "dashboard") {
return Number.parseInt(`${50 - relativeStrokeWidth.value / 2}`, 10);
} else {
return 0;
}
});
const trackPath = vue.computed(() => {
const r = radius.value;
const isDashboard = props.showAs === "dashboard";
return `
M 50 50
m 0 ${isDashboard ? "" : "-"}${r}
a ${r} ${r} 0 1 1 0 ${isDashboard ? "-" : ""}${r * 2}
a ${r} ${r} 0 1 1 0 ${isDashboard ? "" : "-"}${r * 2}
`;
});
const perimeter = vue.computed(() => 2 * Math.PI * radius.value);
const rate = vue.computed(() => props.showAs === "dashboard" ? 0.75 : 1);
const strokeDashoffset = vue.computed(() => {
const offset = -1 * perimeter.value * (1 - rate.value) / 2;
return `${offset}px`;
});
const trailPathStyle = vue.computed(() => {
let style = {
strokeDasharray: `${perimeter.value * rate.value}px, ${perimeter.value}px`,
strokeDashoffset: strokeDashoffset.value
};
if (props.strokeWidth) {
const width = Number.parseFloat(String(props.strokeWidth));
!Number.isNaN(width) && Object.assign(style, { strokeWidth: width });
}
return style;
});
const circlePathStyle = vue.computed(() => {
let style = {
strokeDasharray: `${perimeter.value * rate.value * (props.percentage / 100)}px, ${perimeter.value}px`,
strokeDashoffset: strokeDashoffset.value,
transition: "stroke-dasharray 0.6s ease 0s, stroke 0.6s ease"
};
if (props.strokeWidth) {
const width = Number.parseFloat(String(props.strokeWidth));
!Number.isNaN(width) && Object.assign(style, { strokeWidth: props.percentage ? width : 0 });
}
if (!props.percentage) {
Object.assign(style, { strokeWidth: 0 });
}
if (props.color) {
Object.assign(style, { stroke: getCurrentColor(props.percentage) });
}
return style;
});
const barStyle = vue.computed(() => {
return {
width: `${props.percentage}%`,
"--progress-bar-bg-color": getCurrentColor(props.percentage)
};
});
const getCurrentColor = (percentage) => {
var _a;
const { color } = props;
if (typeof color === "function") {
return color(percentage);
} else if (typeof color === "string") {
return color;
} else {
const span = 100 / color.length;
const seriesColors = color.map((seriesColor, index) => {
if (typeof seriesColor === "string") {
return {
color: seriesColor,
percentage: (index + 1) * span
};
}
return seriesColor;
});
const colors = seriesColors.sort((a, b) => a.percentage - b.percentage);
for (const color2 of colors) {
if (color2.percentage > percentage)
return color2.color;
}
return (_a = colors[colors.length - 1]) == null ? void 0 : _a.color;
}
};
const stackBarStyle = vue.computed((percentage) => {
return {
width: `${percentage}%`
};
});
const content = vue.computed(() => props.format(props.percentage));
const slotData = vue.computed(() => {
return {
text: props.text,
percentage: props.percentage
};
});
vue.onMounted(() => {
const path = progressRef.value.querySelector("path");
pathWidth.value = style.getStyle(path, "strokeWidth");
});
return {
namespace,
progressRef,
barStyle,
slotData,
content,
stackBarStyle,
radius,
trackPath,
perimeter,
rate,
strokeDashoffset,
trailPathStyle,
circlePathStyle
};
}
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock("div", {
ref: "progressRef",
class: vue.normalizeClass([
_ctx.namespace,
!_ctx.showText ? "no-label" : "",
_ctx.round ? "round" : "",
_ctx.align ? _ctx.align : "",
_ctx.showAs
])
}, [
_ctx.showAs === "line" ? vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.mergeProps({ key: 0 }, _ctx.slotData)), () => [
vue.createElementVNode("div", { class: "progress-content" }, [
vue.createElementVNode("span", { class: "progress-label" }, vue.toDisplayString(_ctx.text), 1),
vue.createElementVNode("span", { class: "progress-percentage" }, vue.toDisplayString(_ctx.content), 1)
])
]) : vue.createCommentVNode("v-if", true),
_ctx.showAs === "stack" ? (vue.openBlock(), vue.createElementBlock("div", {
key: 1,
class: "progress-wrap"
}, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.stack, (item, index) => {
return vue.openBlock(), vue.createElementBlock("div", {
key: index,
class: vue.normalizeClass(["progress-bar", item.type ? item.type : "", item.striped ? "striped" : "", item.active ? "is-active" : "", item.indicating ? "indicating" : ""]),
style: vue.normalizeStyle({ width: item.percentage + "%" }),
role: "progressbar",
"aria-valuemin": "0",
"aria-valuemax": "100",
"aria-valuenow": item.percentage
}, [
vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.guardReactiveProps(item)), () => [
vue.createElementVNode("span", { class: "progress-label" }, vue.toDisplayString(item.format ? item.format(item.percentage) : `${item.percentage}%`), 1)
])
], 14, ["aria-valuenow"]);
}), 128))
])) : _ctx.showAs === "circle" || _ctx.showAs === "dashboard" ? (vue.openBlock(), vue.createElementBlock("div", {
key: 2,
class: "progress-circle",
style: vue.normalizeStyle([
_ctx.trackColor ? `--progress-track-bg-color: ${_ctx.trackColor}` : ""
])
}, [
(vue.openBlock(), vue.createElementBlock("svg", { viewBox: "0 0 100 100" }, [
vue.createElementVNode("path", {
class: vue.normalizeClass(["progress-circle-track", _ctx.type ? _ctx.type : ""]),
d: _ctx.trackPath,
fill: "none",
"stroke-linecap": _ctx.strokeLinecap,
style: vue.normalizeStyle(_ctx.trailPathStyle)
}, null, 14, ["d", "stroke-linecap"]),
vue.createElementVNode("path", {
class: vue.normalizeClass(["progress-circle-path", _ctx.type ? _ctx.type : ""]),
d: _ctx.trackPath,
fill: "none",
"stroke-linecap": _ctx.strokeLinecap,
style: vue.normalizeStyle(_ctx.circlePathStyle)
}, null, 14, ["d", "stroke-linecap"])
])),
vue.createElementVNode("div", { class: "progress-content" }, [
vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.guardReactiveProps(_ctx.slotData)), () => [
vue.createElementVNode("span", { class: "progress-percentage" }, vue.toDisplayString(_ctx.content), 1),
vue.createElementVNode("span", { class: "progress-label" }, vue.toDisplayString(_ctx.text), 1)
])
])
], 4)) : (vue.openBlock(), vue.createElementBlock("div", {
key: 3,
class: "progress-wrap",
style: vue.normalizeStyle([_ctx.trackColor ? `--progress-track-bg-color: ${_ctx.trackColor}` : ""])
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass(["progress-bar", _ctx.type ? _ctx.type : "", _ctx.striped ? "striped" : "", _ctx.active ? "is-active" : "", _ctx.indicating ? "indicating" : ""]),
style: vue.normalizeStyle([_ctx.barStyle, _ctx.strokeWidth ? `--progress-height: ${_ctx.strokeWidth}` : ""]),
role: "progressbar",
"aria-valuemin": "0",
"aria-valuemax": "100",
"aria-valuenow": _ctx.percentage
}, [
_ctx.showAs !== "line" ? vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.mergeProps({ key: 0 }, _ctx.slotData)), () => [
vue.createElementVNode("span", { class: "progress-label" }, vue.toDisplayString(_ctx.text), 1),
vue.createElementVNode("span", { class: "progress-percentage" }, vue.toDisplayString(_ctx.content), 1)
]) : vue.createCommentVNode("v-if", true)
], 14, ["aria-valuenow"])
], 4))
], 2);
}
var Progress = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render]]);
exports["default"] = Progress;
//# sourceMappingURL=progress.js.map