import { computed, toRef, createVNode, mergeProps } from "vue";
import "./styles/tabs.scss";
import { makeDensityProps, useDensity } from "../../composables/density/index.mjs";
import { makeTagProps } from "../../composables/tag/index.mjs";
import { provideDefaults } from "../../composables/defaults/index.mjs";
import { Tab } from "./tab.mjs";
import { SlideGroup } from "../slide-group/slide-group.mjs";
import { createSymbol } from "../../utils/symbol.mjs";
import { defineComponent } from "../../utils/define-component.mjs";
function parseItems(items) {
  if (!items)
    return [];
  return items.map((item) => {
    if (typeof item === "string")
      return {
        title: item,
        value: item
      };
    return item;
  });
}
const TabsKey = createSymbol("tabs");
const Tabs = defineComponent({
  name: "VeTabs",
  props: {
    alignWithTitle: Boolean,
    color: String,
    direction: {
      type: String,
      default: "horizontal"
    },
    fixedTabs: Boolean,
    items: {
      type: Array,
      default: () => []
    },
    stacked: Boolean,
    backgroundColor: String,
    centered: Boolean,
    grow: Boolean,
    height: {
      type: [Number, String],
      default: void 0
    },
    hideSlider: Boolean,
    optional: Boolean,
    right: Boolean,
    sliderColor: String,
    ...makeDensityProps(),
    ...makeTagProps()
  },
  setup(props, {
    slots,
    attrs
  }) {
    const parsedItems = computed(() => parseItems(props.items));
    const {
      densityClasses
    } = useDensity(props);
    provideDefaults({
      Tab: {
        color: toRef(props, "color"),
        direction: toRef(props, "direction"),
        stacked: toRef(props, "stacked"),
        fixed: toRef(props, "fixedTabs"),
        sliderColor: toRef(props, "sliderColor"),
        hideSlider: toRef(props, "hideSlider")
      }
    });
    return () => createVNode(SlideGroup, mergeProps({
      "class": ["ve-tabs", `ve-tabs--${props.direction}`, {
        "ve-tabs--align-with-title": props.alignWithTitle,
        "ve-tabs--centered": props.centered,
        "ve-tabs--fixed-tabs": props.fixedTabs,
        "ve-tabs--grow": props.grow,
        "ve-tabs--right": props.right,
        "ve-tabs--stacked": props.stacked
      }, densityClasses.value],
      "role": "tablist",
      "symbol": TabsKey,
      "mandatory": "force",
      "direction": props.direction
    }, attrs), {
      default: () => [slots.default ? slots.default() : parsedItems.value.map((item) => createVNode(Tab, mergeProps(item, {
        "key": item.title
      }), null))]
    });
  }
});
export {
  Tabs,
  TabsKey
};
//# sourceMappingURL=tabs.mjs.map
