AisMenu #

<template>
  <div class="flex gap-8">
    <div>
      <AisMenu label="With Icons Using Default Slot">
        <AisMenuItem label="Search" icon="search" href="/search"></AisMenuItem>
        <AisMenuItem label="Save" icon="save" href="/save"></AisMenuItem>
        <AisMenuItem label="Delete" icon="delete" to="/delete"></AisMenuItem>
        <AisMenuItem label="Using a non-core icon" :icon="faApple" to="/apple"></AisMenuItem>
        <AisMenuItem label="Cancel" icon="cancel" @click="handleCancel"></AisMenuItem>
      </AisMenu>
    </div>

    <div>
      <AisMenu label="With Icons Using Items Prop"
               :items="iconItems"
      ></AisMenu>
    </div>
  </div>

</template>

<script setup>
  import { ref } from 'vue'
  import AisMenu from "@/components/menu/AisMenu.vue";
  import AisMenuItem from "@/components/menu/AisMenuItem.vue";
  import { faApple } from "@fortawesome/free-brands-svg-icons";
  import { library } from '@fortawesome/fontawesome-svg-core'
  library.add(faApple)

  const iconItems = ref([
    { key: 'search', label: 'Search', icon: 'search', href: '/search' },
    { key: 'save', label: 'Save', icon: 'save', href: '/save' },
    { key: 'delete', label: 'Delete', icon: 'save', to: '/delete' },
    { key: 'apple', label: 'Using a non-core icon', icon: faApple, to: '/apple' },
    { key: 'close', label: 'Close', icon: "cancel" },
  ])

  const handleCancel = (e) => {
    console.log(`handleCancel: ${e}`)
  }
</script>

<script>
export default {
  name: "AisMenuIcons",
}
</script>

<template>
  <div class="grid grid-cols-3 gap-4">
    <div>
      <AisMenu label="Menu Using Group">
        <AisMenuItem label="Menu Item 1"></AisMenuItem>
        <AisMenuItem label="Menu Item 2"></AisMenuItem>

        <AisMenuGroup label="Group 1" header-class="text-sm font-bold">
          <AisMenuItem label="Group 1 Item 1"></AisMenuItem>
          <AisMenuItem label="Group 1 Item 2"></AisMenuItem>
          <AisMenuItem label="Group 1 Item 3"></AisMenuItem>
        </AisMenuGroup>

        <AisMenuGroup label="Group 2" header-class="text-sm font-bold">
          <AisMenuItem label="Group 2 Item 1"></AisMenuItem>
          <AisMenuItem label="Group 2 Item 2"></AisMenuItem>
          <AisMenuItem label="Group 2 Item 3"></AisMenuItem>
        </AisMenuGroup>

        <AisMenuItem label="Menu Item 3"></AisMenuItem>
      </AisMenu>
    </div>
  </div>

</template>

<script setup>
  import { ref } from 'vue'
  import AisMenu from "@/components/menu/AisMenu.vue";
  import AisMenuItem from "@/components/menu/AisMenuItem.vue";
  import AisMenuGroup from "@/components/menu/AisMenuGroup.vue";

  const items = ref([
    { key: 'item1', label: 'Menu Item 1' },
    { key: 'item2', label: 'Menu Item 2' },
    { key: 'group1',
      type: 'group',
      label: 'Group 1',
      headerClass: 'text-gray-400 font-bold',
      items: [
        { key: 'group1Item1', label: 'Group 1 Item 1' },
        { key: 'group1Item2', label: 'Group 1 Item 2' },
        { key: 'group1Item3', label: 'Group 1 Item 3' },
      ]
    },
    { key: 'group2',
      type: 'group',
      label: 'Group 2',
      headerClass: 'text-gray-400 font-bold',
      items: [
        { key: 'group2Item1', label: 'Group 2 Item 1' },
        { key: 'group2Item2', label: 'Group 2 Item 2' },
        { key: 'group2Item3', label: 'Group 2 Item 3' },
      ]
    },
    { key: 'item3', label: 'Menu Item 3' },
  ])


</script>

<script>
export default {
  name: "AisMenuGroupExample",
}
</script>

<template>
  <div class="flex gap-8">
    <div>
      <AisMenu label="With Divider">
        <AisMenuItem label="Menu Item 1"></AisMenuItem>
        <AisMenuItem label="Menu Item 2"></AisMenuItem>
        <AisMenuDivider/>
        <AisMenuItem label="Menu Item 3"></AisMenuItem>
      </AisMenu>
    </div>
    <div>
      <AisMenu label="With Divider Using Items Prop" :items="items"></AisMenu>
    </div>
  </div>

</template>

<script setup>
  import { ref } from "vue";
  import AisMenu from "@/components/menu/AisMenu.vue";
  import AisMenuItem from "@/components/menu/AisMenuItem.vue";
  import AisMenuDivider from "@/components/menu/AisMenuDivider.vue";

  const items = ref([
    { key: 'item1', label: 'Menu Item 1' },
    { key: 'item2', label: 'Menu Item 2' },
    { key: 'divider1', type: 'divider' },
    { key: 'item3', label: 'Menu Item 3' },
  ])
</script>

<script>
export default {
  name: "AisMenuDividerExample",
}
</script>

<template>
  <div class="flex gap-8">
    <div>
      <AisMenu label="Using Default Slot">
        <AisMenuItem label="Menu Item 1" href="/menu/item/1"></AisMenuItem>
        <AisMenuItem label="Menu Item 2" to="/menu/item/1"></AisMenuItem>
        <AisMenuItem label="Menu Item 3" @click="handleClick"></AisMenuItem>
      </AisMenu>
    </div>
  </div>

</template>

<script setup>
  import AisMenu from "@/components/menu/AisMenu.vue";
  import AisMenuItem from "@/components/menu/AisMenuItem.vue";

  const handleClick = (e) => { console.log(`Item Clicked ${e}`) }
</script>

<script>
export default {
  name: "AisMenuExample",
}
</script>

<template>
  <div class="flex gap-8">
    <div>
      <AisMenu label="Using Items Prop"
               :items="items"
      ></AisMenu>
    </div>
  </div>

</template>

<script setup>
  import { ref } from "vue"
  import AisMenu from "@/components/menu/AisMenu.vue";

  const items = ref([
    { key: 'item1', label: 'Menu Item 1', href: '/menu/item/1' },
    { key: 'item2', label: 'Menu Item 2', to: '/menu/item/1' },
    { key: 'item3', label: 'Menu Item 3' },
  ])
</script>

<script>
export default {
  name: "AisMenuProps",
}
</script>

<template>
  <div class="flex gap-8">
    <div>
      <AisMenu :items="items"
               label="Using a Core Icon"
               button-class="px-3 py-2 gap-2 border border-blue-500 rounded"
               icon="group"
      ></AisMenu>
    </div>
    <div>
      <AisMenu :items="items"
               label="Using a FontAwesome object"
               button-class="px-3 py-2 gap-2 border border-blue-500 rounded"
               :icon="faApple"
      ></AisMenu>
    </div>
  </div>
</template>

<script setup>
  import AisMenu from "@/components/menu/AisMenu.vue";
  import { items } from "@/components/menu/examples/example-items.js"
  import { faApple } from "@fortawesome/free-brands-svg-icons";
  import { library } from '@fortawesome/fontawesome-svg-core'
  library.add(faApple)
</script>

<script>
export default {
  name: "AisMenuButton",
}
</script>

<template>
  <div class="flex gap-12">
    <div>
      <AisMenu label="Align Left (default)" button-class="p-2 gap-2 border border-blue-400" :items="items"></AisMenu>
    </div>
    <div>
      <AisMenu label="Align to the Right" button-class="p-2 gap-2 border border-blue-400" :items="items"
               right
      ></AisMenu>
    </div>
  </div>
</template>

<script setup>
  import AisMenu from "@/components/menu/AisMenu.vue";
  import { items } from "@/components/menu/examples/example-items.js"
</script>

<script>
export default {
  name: "AisMenuAlignment",
}
</script>

<template>
  <div class="flex justify-between gap-8">
    <div>
      <AisMenu label="Drop-Right"
               :items="items"
               arrow-icon="right"
               dropright
      ></AisMenu>
    </div>

    <div>
      <AisMenu label="Drop-Up"
               :items="items"
               dropup
      ></AisMenu>
    </div>

    <div>
      <AisMenu label="Drop-Up & Right"
               :items="items"
               dropup right
      ></AisMenu>
    </div>

    <div>
      <AisMenu label="Drop-Left"
               :items="items"
               icon="left"
               dropleft
      ></AisMenu>
    </div>
  </div>

</template>

<script setup>
  import AisMenu from "@/components/menu/AisMenu.vue";
  import { items } from "@/components/menu/examples/example-items.js"
</script>

<script>
export default {
  name: "AisMenuPositioning",
}
</script>

<template>
  <div class="flex gap-8">
    <div>
      <AisMenu label="Multi-Level">
        <AisMenuItem label="Menu Item 1"></AisMenuItem>
        <AisMenuItem label="Menu Item 2"></AisMenuItem>
        <AisMenuItem>
          <AisMenu label="Nested&nbsp;Menu&nbsp;3"
                   icon="group"
          >
            <AisMenuItem label="Menu Item 3.1" icon="person"></AisMenuItem>
            <AisMenuItem label="Menu Item 3.2" icon="person"></AisMenuItem>
            <AisMenuItem label="Menu Item 3.3" icon="person"></AisMenuItem>
            <AisMenuItem>
              <AisMenu label="Nested&nbsp;Menu&nbsp;3.4"
                       icon="group"
              >
                <AisMenuItem label="Menu Item 3.4.1" icon="person"></AisMenuItem>
                <AisMenuItem label="Menu Item 3.4.2" icon="person"></AisMenuItem>
                <AisMenuItem label="Menu Item 3.4.3" icon="person"></AisMenuItem>
              </AisMenu>
            </AisMenuItem>
          </AisMenu>
        </AisMenuItem>
      </AisMenu>
    </div>
  </div>

</template>

<script setup>
  import AisMenu from "@/components/menu/AisMenu.vue";
  import AisMenuItem from "@/components/menu/AisMenuItem.vue";

</script>

<script>
export default {
  name: "AisMenuNested",
}
</script>