import { computed, createVNode, withDirectives, vShow } from "vue";
import "./styles/counter.scss";
import { makeTransitionProps, MaybeTransition } from "../../composables/transition/index.mjs";
import { FadeTransition } from "../transition/fade-transition.mjs";
import { genericComponent } from "../../utils/define-component.mjs";
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: () => {
          var _a, _b;
          return [withDirectives(createVNode("div", {
            "class": "ve-counter"
          }, [(_b = (_a = slots.default) == null ? void 0 : _a.call(slots, {
            counter: counter.value,
            max: Number(props.max),
            value: Number(props.value)
          })) != null ? _b : counter.value]), [[vShow, props.active]])];
        }
      });
    };
  }
});
export {
  Counter
};
//# sourceMappingURL=counter.mjs.map
