import { ref, watch, createVNode, Transition, withDirectives, vShow } from "vue";
import "./styles/carousel-item.scss";
import { makeGroupItemProps, useGroupItem } from "../../composables/group/index.mjs";
import { makeTagProps } from "../../composables/tag/index.mjs";
import { CarouselKey } from "./carousel.mjs";
import { defineComponent } from "../../utils/define-component.mjs";
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: () => {
          var _a;
          return [(_a = slots.default) == null ? void 0 : _a.call(slots)];
        }
      }), [[vShow, isSelected.value]])]
    });
  }
});
export {
  CarouselItem
};
//# sourceMappingURL=carousel-item.mjs.map
