import { withDirectives as _withDirectives, createVNode as _createVNode, vShow as _vShow } from "vue";
import "./styles/carousel-item.css";
import { Transition, ref, watch } from "vue";
import { defineComponent } from "../../utils";
import { makeGroupItemProps, useGroupItem } from "../../composables/group";
import { makeTagProps } from "../../composables/tag";
import { CarouselKey } from "./carousel";
const CarouselItem = defineComponent({
  name: "VeCarouselItem",
  props: {
    ...makeGroupItemProps(),
    ...makeTagProps()
  },
  setup(props, {
    slots
  }) {
    const {
      isSelected,
      group
    } = useGroupItem(props, CarouselKey);
    const {
      items,
      selected
    } = group;
    const transition = ref();
    watch(() => items.value.findIndex(({
      id
    }) => selected.value.includes(id)), (val, oldVal) => {
      transition.value = oldVal > val ? "ve-carousel-item-x-reverse-transition" : "ve-carousel-item-x-transition";
    });
    return () => _createVNode(Transition, {
      "name": transition.value
    }, {
      default: () => [_withDirectives(_createVNode(props.tag, {
        "class": "ve-carousel-item"
      }, {
        default: () => [slots.default?.()]
      }), [[_vShow, isSelected.value]])]
    });
  }
});
export {
  CarouselItem
};
//# sourceMappingURL=carousel-item.mjs.map
