77 lines
2.5 KiB
JavaScript
77 lines
2.5 KiB
JavaScript
|
import { w as withInstall } from "../badge/index2.js";
|
||
|
|
import { defineComponent, ref, computed, watch, onMounted, openBlock, createElementBlock, Fragment, renderSlot, createElementVNode, toDisplayString, unref } from "vue";
|
||
|
|
import { T as TransitionPresets, e as useTransition } from "../_chunks/@vueuse/index.js";
|
||
|
|
const __default__ = {
|
||
|
|
name: "LayCountUp"
|
||
|
|
};
|
||
|
|
const _sfc_main = defineComponent({
|
||
|
|
...__default__,
|
||
|
|
props: {
|
||
|
|
startVal: { default: 0 },
|
||
|
|
endVal: { default: 0 },
|
||
|
|
decimal: { default: "." },
|
||
|
|
decimalPlaces: { default: 0 },
|
||
|
|
useGrouping: { type: Boolean, default: true },
|
||
|
|
separator: { default: "," },
|
||
|
|
autoplay: { type: Boolean, default: true },
|
||
|
|
useEasing: { type: Boolean, default: true },
|
||
|
|
easingFn: { default: TransitionPresets.easeInOutCubic },
|
||
|
|
duration: { default: 2e3 },
|
||
|
|
prefix: { default: "" },
|
||
|
|
suffix: { default: "" }
|
||
|
|
},
|
||
|
|
setup(__props, { expose }) {
|
||
|
|
const props = __props;
|
||
|
|
let localStartVal = ref(props.startVal);
|
||
|
|
const isNumber = (val) => !isNaN(parseFloat(val));
|
||
|
|
const formatNumber = (num) => {
|
||
|
|
if (typeof num != "number")
|
||
|
|
return "0";
|
||
|
|
num = num.toFixed(props.decimalPlaces);
|
||
|
|
num += "";
|
||
|
|
const x = num.split(".");
|
||
|
|
let x1 = x[0];
|
||
|
|
const x2 = x.length > 1 ? props.decimal + x[1] : "";
|
||
|
|
const rgx = /(\d+)(\d{3})/;
|
||
|
|
if (props.useGrouping && props.separator && !isNumber(props.separator)) {
|
||
|
|
while (rgx.test(x1)) {
|
||
|
|
x1 = x1.replace(rgx, "$1" + props.separator + "$2");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return props.prefix + x1 + x2 + props.suffix;
|
||
|
|
};
|
||
|
|
const printVal = useTransition(localStartVal, {
|
||
|
|
delay: 0,
|
||
|
|
duration: props.duration,
|
||
|
|
disabled: !props.useEasing,
|
||
|
|
transition: typeof props.easingFn === "string" ? TransitionPresets[props.easingFn] : props.easingFn
|
||
|
|
});
|
||
|
|
const displayValue = computed(() => formatNumber(printVal.value));
|
||
|
|
const start = function() {
|
||
|
|
localStartVal.value = props.endVal;
|
||
|
|
};
|
||
|
|
watch(() => props.endVal, () => {
|
||
|
|
if (props.autoplay) {
|
||
|
|
localStartVal.value = props.endVal;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
onMounted(() => {
|
||
|
|
if (props.autoplay) {
|
||
|
|
start();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
expose({
|
||
|
|
start
|
||
|
|
});
|
||
|
|
return (_ctx, _cache) => {
|
||
|
|
return openBlock(), createElementBlock(Fragment, null, [
|
||
|
|
renderSlot(_ctx.$slots, "prefix"),
|
||
|
|
createElementVNode("span", null, toDisplayString(unref(displayValue)), 1),
|
||
|
|
renderSlot(_ctx.$slots, "suffix")
|
||
|
|
], 64);
|
||
|
|
};
|
||
|
|
}
|
||
|
|
});
|
||
|
|
const component = withInstall(_sfc_main);
|
||
|
|
export { component as default };
|