51 lines
1.6 KiB
JavaScript
51 lines
1.6 KiB
JavaScript
|
import { withDirectives as _withDirectives, createVNode as _createVNode, vShow as _vShow } from "vue";
|
||
|
|
// Styles
|
||
|
|
import "./VCounter.css";
|
||
|
|
|
||
|
|
// Components
|
||
|
|
import { VSlideYTransition } from "../transitions/index.mjs"; // Composables
|
||
|
|
import { makeComponentProps } from "../../composables/component.mjs";
|
||
|
|
import { makeTransitionProps, MaybeTransition } from "../../composables/transition.mjs"; // Utilities
|
||
|
|
import { computed } from 'vue';
|
||
|
|
import { genericComponent, propsFactory, useRender } from "../../util/index.mjs"; // Types
|
||
|
|
export const makeVCounterProps = propsFactory({
|
||
|
|
active: Boolean,
|
||
|
|
max: [Number, String],
|
||
|
|
value: {
|
||
|
|
type: [Number, String],
|
||
|
|
default: 0
|
||
|
|
},
|
||
|
|
...makeComponentProps(),
|
||
|
|
...makeTransitionProps({
|
||
|
|
transition: {
|
||
|
|
component: VSlideYTransition
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}, 'VCounter');
|
||
|
|
export const VCounter = genericComponent()({
|
||
|
|
name: 'VCounter',
|
||
|
|
functional: true,
|
||
|
|
props: makeVCounterProps(),
|
||
|
|
setup(props, _ref) {
|
||
|
|
let {
|
||
|
|
slots
|
||
|
|
} = _ref;
|
||
|
|
const counter = computed(() => {
|
||
|
|
return props.max ? `${props.value} / ${props.max}` : String(props.value);
|
||
|
|
});
|
||
|
|
useRender(() => _createVNode(MaybeTransition, {
|
||
|
|
"transition": props.transition
|
||
|
|
}, {
|
||
|
|
default: () => [_withDirectives(_createVNode("div", {
|
||
|
|
"class": ['v-counter', props.class],
|
||
|
|
"style": props.style
|
||
|
|
}, [slots.default ? slots.default({
|
||
|
|
counter: counter.value,
|
||
|
|
max: props.max,
|
||
|
|
value: props.value
|
||
|
|
}) : counter.value]), [[_vShow, props.active]])]
|
||
|
|
}));
|
||
|
|
return {};
|
||
|
|
}
|
||
|
|
});
|
||
|
|
//# sourceMappingURL=VCounter.mjs.map
|