<template>
  <section>
      <div class="odocs-spaced">
        <o-dropdown aria-role="list">
            <template #trigger="{ active }">
                <o-button variant="primary">
                <span>Click me!</span>
                <o-icon :icon="active ? 'caret-up' : 'caret-down'"></o-icon>
                </o-button>
            </template>

            <o-dropdown-item aria-role="listitem">Action</o-dropdown-item>
            <o-dropdown-item aria-role="listitem">Another action</o-dropdown-item>
            <o-dropdown-item aria-role="listitem">Something else</o-dropdown-item>
        </o-dropdown>

        <o-dropdown :triggers="['hover']" aria-role="list">
            <template #trigger="{ active }">
                <o-button variant="info">
                <span>Hover me!</span>
                <o-icon icon="caret-down"></o-icon>
                </o-button>
            </template>

            <o-dropdown-item aria-role="listitem">Action</o-dropdown-item>
            <o-dropdown-item aria-role="listitem">Another action</o-dropdown-item>
            <o-dropdown-item aria-role="listitem">Something else</o-dropdown-item>
            </o-dropdown>

            <o-dropdown disabled aria-role="list">
            <template #trigger="{ active }">
                <o-button>
                <span>Disabled</span>
                <o-icon icon="caret-down"></o-icon>
                </o-button>
            </template>

            <o-dropdown-item aria-role="listitem">Action</o-dropdown-item>
            <o-dropdown-item aria-role="listitem">Another action</o-dropdown-item>
            <o-dropdown-item aria-role="listitem">Something else</o-dropdown-item>
        </o-dropdown>

        <o-dropdown aria-role="list">
            <template #trigger="{ active }">
                <div>
                Custom
                <o-icon
                    variant="success"
                    icon="caret-down"
                    slot="trigger"
                    role="button"
                >
                </o-icon>
                </div>
            </template>

            <o-dropdown-item aria-role="listitem">Action</o-dropdown-item>
            <o-dropdown-item aria-role="listitem">Another action</o-dropdown-item>
            <o-dropdown-item aria-role="listitem">Something else</o-dropdown-item>
        </o-dropdown>

        <o-dropdown :triggers="['contextmenu']" aria-role="list">
            <template #trigger="{ active }">
                <o-button role="button"> Right click </o-button>
            </template>

            <o-dropdown-item aria-role="listitem">Action</o-dropdown-item>
            <o-dropdown-item aria-role="listitem">Another action</o-dropdown-item>
            <o-dropdown-item aria-role="listitem">Something else</o-dropdown-item>
        </o-dropdown>
      </div>

  </section>
</template>

<template>
  <section>
    <p class="content"><b>selected</b>: {{ selectedOptions }}</p>
    <o-dropdown v-model="selectedOptions" multiple aria-role="list">
      <template #trigger>
        <o-button variant="primary" type="button">
          <span>Selected ({{ selectedOptions.length }})</span>
          <o-icon icon="caret-down"></o-icon>
        </o-button>
      </template>

      <o-dropdown-item value="option1" aria-role="listitem">
        <span>Option 1</span>
      </o-dropdown-item>

      <o-dropdown-item value="option2" aria-role="listitem">
        <span>Option 2</span>
      </o-dropdown-item>

      <o-dropdown-item value="option3" aria-role="listitem">
        <span>Option 3</span>
      </o-dropdown-item>
    </o-dropdown>
  </section>
</template>
<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const selectedOptions = ref([]);

    return {
      selectedOptions,
    };
  },
});
</script>

<template>
  <section>
    <div class="block">
      <o-field>
        <o-switch v-model="isScrollable">Scrollable</o-switch>
      </o-field>
    </div>

    <br />

    <o-dropdown
      :scrollable="isScrollable"
      :max-height="maxHeight"
      v-model="currentMenu"
      aria-role="list"
    >
      <template #trigger>
        <o-button variant="primary" type="button">
          <o-icon :icon="currentMenu.icon"></o-icon>
          <span>{{ currentMenu.text }}</span>
          <o-icon icon="caret-down"></o-icon>
        </o-button>
      </template>

      <o-dropdown-item
        v-for="(menu, index) in menus"
        :key="index"
        :value="menu"
        aria-role="listitem"
      >
        <div class="media">
          <o-icon class="media-left" :icon="menu.icon"></o-icon>
          <div class="media-content">
            <span>{{ menu.text }}</span>
          </div>
        </div>
      </o-dropdown-item>
    </o-dropdown>
  </section>
</template>
<script>
import { defineComponent, ref } from 'vue';

const maxHeight = 200;
const menus = [
  { icon: 'users', text: 'People' },
  { icon: 'box', text: 'Orders' },
  { icon: 'credit-card', text: 'Payments' },
  { icon: 'dolly', text: 'Logistics' },
  { icon: 'business-time', text: 'Jobs' },
  { icon: 'shopping-cart', text: 'Cart' },
  { icon: 'cog', text: 'Configuration' },
];

export default defineComponent({
  setup() {
    const isScrollable = ref(true);
    const currentMenu = ref({ icon: 'users', text: 'People' });

    return {
      isScrollable,
      maxHeight,
      currentMenu,
      menus,
    };
  },
});
</script>

<style>
.media {
  align-items: flex-start;
  display: flex;
  text-align: left;
}
.media-content {
  flex-basis: auto;
  flex-grow: 1;
  flex-shrink: 1;
  text-align: left;
  overflow-y: hidden;
  overflow-x: auto;
}
.media-left {
  margin-right: 1rem;
  flex-basis: auto;
  flex-grow: 0;
  flex-shrink: 0;
}
</style>