@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
83 lines (82 loc) • 2.84 kB
JavaScript
import { defineComponent as d, ref as f, computed as o, watch as s } from "vue";
import { NeonFunctionalColor as p } from "../../../model/common/color/NeonFunctionalColor.es.js";
import { NeonSize as y } from "../../../model/common/size/NeonSize.es.js";
import g from "../../presentation/icon/NeonIcon.vue.es.js";
import { NeonNumberUtils as u } from "../../../utils/common/number/NeonNumberUtils.es.js";
const V = d({
name: "NeonLinearProgress",
components: {
NeonIcon: g
},
props: {
/**
* If no total is provided (default) the current % completion is expressed as a %, e.g. 0.15 = 15%,
* In the case of a total being provided this is the count of items from the total, i.e. the 'x' in 'x / y '.
*/
modelValue: { type: Number, required: !0 },
/**
* When the total is provided the display is 'x / y' where total is the 'y' in 'x / y'.
*/
total: { type: Number, default: null },
/**
* A label to display above the progress bar
*/
label: { type: String, default: null },
/**
* The progress bar color
*/
color: { type: String, default: p.Primary },
/**
* The alternate color for displaying the progress as a gradient
*/
alternateColor: { type: String, default: null },
/**
* The component size, NeonSize.Small or NeonSize.Medium
*/
size: { type: String, default: y.Medium },
/**
* The locale used for display purposes. This defaults to the browser's locale if none is provided.
*/
locale: { type: String, default: null },
/**
* Display the text output indicating the current state of progress
*/
output: { type: Boolean, default: !0 },
/**
* Display an icon on completion
*/
completedIcon: { type: String, default: null },
/**
* Specify the icon color (default = alternate-color || color)
*/
completedIconColor: { type: String, default: null },
/**
* The decimals to use for rounding
*/
decimals: { type: Number, default: 0 }
},
setup(e) {
const t = f(0), r = o(() => e.total ? 1 : 0.01), n = o(() => 100 * t.value / (e.total || 1)), m = o(() => e.total || 100), i = o(() => n.value >= 100), c = o(() => e.total ? `${u.formatNumber(t.value, { decimals: e.decimals }, e.locale)} / ${e.total}` : `${u.formatNumber(n.value, { decimals: e.decimals }, e.locale)}%`), a = (l) => {
setTimeout(() => {
t.value = Math.min(l, t.value + r.value), l > t.value && a(l);
}, 25);
};
return s(
() => e.modelValue,
(l) => {
a(l);
},
{ immediate: !0 }
), {
calculatedValue: t,
computedTotal: m,
completed: i,
computedOutput: c,
computedPercentage: n
};
}
});
export {
V as default
};
//# sourceMappingURL=NeonLinearProgress.es.js.map