import { withDirectives as _withDirectives, createVNode as _createVNode, vShow as _vShow } from "vue";
import "./styles/counter.css";
import { computed } from "vue";
import { genericComponent } from "../../utils";
import { MaybeTransition, makeTransitionProps } from "../../composables/transition";
import { FadeTransition } from "../transition";
const Counter = genericComponent()({
  name: "VeCounter",
  props: {
    active: Boolean,
    max: [Number, String],
    value: {
      type: [Number, String],
      default: 0
    },
    ...makeTransitionProps({
      transition: {
        component: FadeTransition
      }
    })
  },
  setup(props, {
    slots
  }) {
    const counter = computed(() => {
      return props.max ? `${props.value} / ${props.max}` : String(props.value);
    });
    return () => {
      return _createVNode(MaybeTransition, {
        "transition": props.transition
      }, {
        default: () => [_withDirectives(_createVNode("div", {
          "class": "ve-counter"
        }, [slots.default?.({
          counter: counter.value,
          max: Number(props.max),
          value: Number(props.value)
        }) ?? counter.value]), [[_vShow, props.active]])]
      });
    };
  }
});
export {
  Counter
};
//# sourceMappingURL=counter.mjs.map
