<script>
import { computed, defineComponent, inject, provide } from "vue";
import { NavKey, NavbarKey, SidebarKey } from "@inkline/inkline/constants";
import { useComponentColor, useComponentSize } from "@inkline/inkline/composables";
const componentName = "INav";
export default defineComponent({
  name: componentName,
  inheritAttrs: false,
  props: {
    /**
     * The color variant of the nav
     * @type light | dark
     * @default
     * @name color
     */
    color: {
      type: String,
      default: void 0
    },
    /**
     * The size variant of the nav
     * @type sm | md | lg
     * @default
     * @name size
     */
    size: {
      type: String,
      default: void 0
    },
    /**
     * Display the nav with vertical orientation
     * @type Boolean
     * @default false
     * @name vertical
     */
    vertical: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    const navbar = inject(NavbarKey, null);
    const sidebar = inject(SidebarKey, null);
    const currentColor = computed(() => props.color);
    const currentSize = computed(() => props.size);
    const { color } = useComponentColor({ componentName, currentColor });
    const { size } = useComponentSize({ componentName, currentSize });
    const classes = computed(() => ({
      [`-${color.value}`]: true,
      [`-${size.value}`]: true,
      "-vertical": props.vertical
    }));
    provide(NavKey, {
      onItemClick
    });
    function onItemClick(event) {
      [navbar, sidebar].forEach((parent) => {
        if (parent) {
          parent.onItemClick(event);
        }
      });
    }
    return {
      classes
    };
  }
});
</script>

<template>
    <nav v-bind="$attrs" class="nav" :class="classes" role="menubar">
        <!-- @slot default Slot for default nav content -->
        <slot />
    </nav>
</template>
