import { defineComponent, createVNode } from 'vue';
import '../../../../utils/index.mjs';
import { useInjectTabs } from '../TabContext.mjs';
import { tabPanelListProps } from '../props.mjs';
import { cloneElement } from '../../../../utils/vue/vnode.mjs';

var TabPanelList = /* @__PURE__ */ defineComponent({
  compatConfig: {
    MODE: 3
  },
  name: "TabPanelList",
  inheritAttrs: false,
  props: tabPanelListProps(),
  setup(props) {
    const {
      tabs,
      prefixCls
    } = useInjectTabs();
    return () => {
      const {
        id,
        activeKey,
        animated,
        tabPosition,
        rtl,
        destroyInactiveTabPane
      } = props;
      const tabPaneAnimated = animated.tabPane;
      const pre = prefixCls.value;
      const activeIndex = tabs.value.findIndex((tab) => tab.key === activeKey);
      return createVNode("div", {
        "class": `${pre}-content-holder`
      }, [createVNode("div", {
        "class": [`${pre}-content`, `${pre}-content-${tabPosition}`, {
          [`${pre}-content-animated`]: tabPaneAnimated
        }],
        "style": activeIndex && tabPaneAnimated ? {
          [rtl ? "marginRight" : "marginLeft"]: `-${activeIndex}00%`
        } : null
      }, [tabs.value.map((tab) => {
        return cloneElement(tab.node, {
          key: tab.key,
          prefixCls: pre,
          tabKey: tab.key,
          id,
          animated: tabPaneAnimated,
          active: tab.key === activeKey,
          destroyInactiveTabPane
        });
      })])]);
    };
  }
});

export { TabPanelList as default };
//# sourceMappingURL=index.mjs.map
