VCounter.mjs 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. import { withDirectives as _withDirectives, createVNode as _createVNode, vShow as _vShow } from "vue";
  2. // Styles
  3. import "./VCounter.css";
  4. // Components
  5. import { VSlideYTransition } from "../transitions/index.mjs"; // Composables
  6. import { makeComponentProps } from "../../composables/component.mjs";
  7. import { makeTransitionProps, MaybeTransition } from "../../composables/transition.mjs"; // Utilities
  8. import { computed } from 'vue';
  9. import { genericComponent, propsFactory, useRender } from "../../util/index.mjs"; // Types
  10. export const makeVCounterProps = propsFactory({
  11. active: Boolean,
  12. disabled: Boolean,
  13. max: [Number, String],
  14. value: {
  15. type: [Number, String],
  16. default: 0
  17. },
  18. ...makeComponentProps(),
  19. ...makeTransitionProps({
  20. transition: {
  21. component: VSlideYTransition
  22. }
  23. })
  24. }, 'VCounter');
  25. export const VCounter = genericComponent()({
  26. name: 'VCounter',
  27. functional: true,
  28. props: makeVCounterProps(),
  29. setup(props, _ref) {
  30. let {
  31. slots
  32. } = _ref;
  33. const counter = computed(() => {
  34. return props.max ? `${props.value} / ${props.max}` : String(props.value);
  35. });
  36. useRender(() => _createVNode(MaybeTransition, {
  37. "transition": props.transition
  38. }, {
  39. default: () => [_withDirectives(_createVNode("div", {
  40. "class": ['v-counter', {
  41. 'text-error': props.max && !props.disabled && parseFloat(props.value) > parseFloat(props.max)
  42. }, props.class],
  43. "style": props.style
  44. }, [slots.default ? slots.default({
  45. counter: counter.value,
  46. max: props.max,
  47. value: props.value
  48. }) : counter.value]), [[_vShow, props.active]])]
  49. }));
  50. return {};
  51. }
  52. });
  53. //# sourceMappingURL=VCounter.mjs.map