Popover

<AcceleratorPopover direction="top">
  <template #trigger>
    <AcceleratorButton>Popover</AcceleratorButton>
  </template>
  <template #content>
    <p>This is a popover</p>
  </template>
</AcceleratorPopover>

<AcceleratorPopover direction="right">
  <template #trigger>
    <AcceleratorButton>Popover</AcceleratorButton>
  </template>
  <template #content>
    <p>This is a popover</p>
  </template>
</AcceleratorPopover>

<AcceleratorPopover direction="bottom">
  <template #trigger>
    <AcceleratorButton>Popover</AcceleratorButton>
  </template>
  <template #content>
    <p>This is a popover</p>
  </template>
</AcceleratorPopover>

<AcceleratorPopover direction="left">
  <template #trigger>
    <AcceleratorButton>Popover</AcceleratorButton>
  </template>
  <template #content>
    <p>This is a popover</p>
  </template>
</AcceleratorPopover>

<AcceleratorPopover direction="top-left">
  <template #trigger>
    <AcceleratorButton>Popover</AcceleratorButton>
  </template>
  <template #content>
    <p>This is a popover</p>
  </template>
</AcceleratorPopover>

<AcceleratorPopover direction="top-right">
  <template #trigger>
    <AcceleratorButton>Popover</AcceleratorButton>
  </template>
  <template #content>
    <p>This is a popover</p>
  </template>
</AcceleratorPopover>

<AcceleratorPopover direction="bottom-left">
  <template #trigger>
    <AcceleratorButton>Popover</AcceleratorButton>
  </template>
  <template #content>
    <p>This is a popover</p>
  </template>
</AcceleratorPopover>

<AcceleratorPopover direction="bottom-right">
  <template #trigger>
    <AcceleratorButton>Popover</AcceleratorButton>
  </template>
  <template #content>
    <p>This is a popover</p>
  </template>
</AcceleratorPopover>

<AcceleratorPopover direction="top-start">
  <template #trigger>
    <AcceleratorButton>Popover</AcceleratorButton>
  </template>
  <template #content>
    <p>This is a popover</p>
  </template>
</AcceleratorPopover>

<AcceleratorPopover direction="top-end">
  <template #trigger>
    <AcceleratorButton>Popover</AcceleratorButton>
  </template>
  <template #content>
    <p>This is a popover</p>
  </template>
</AcceleratorPopover>

<AcceleratorPopover direction="bottom-start">
  <template #trigger>
    <AcceleratorButton>Popover</AcceleratorButton>
  </template>
  <template #content>
    <p>This is a popover</p>
  </template>
</AcceleratorPopover>

<AcceleratorPopover direction="bottom-end">
  <template #trigger>
    <AcceleratorButton>Popover</AcceleratorButton>
  </template>
  <template #content>
    <p>This is a popover</p>
  </template>
</AcceleratorPopover>

<template>
  <AcceleratorPopover
    v-for="direction in directions"
    :key="direction"
    :direction="direction"
  >
    <template #trigger><AcceleratorButton>{{ direction }}</AcceleratorButton></template>
    <template #content><p>{{ direction }}</p></template>
  </AcceleratorPopover>
</template>

<script setup lang="ts">
const directions = ['left-start', 'left-end', 'right-start', 'right-end'] as const;
</script>

<template>
  <AcceleratorPopover :on-confirm="onConfirmAsync">
    <template #trigger>
      <AcceleratorButton>With confirm function</AcceleratorButton>
    </template>
    <template #content>
      <p>This popover has a confirm function</p>
    </template>
  </AcceleratorPopover>
</template>

<script setup lang="ts">
async function onConfirmAsync() {
  await Promise.resolve();
  console.log('Popover confirmed');
}
</script>

<template>
  <AcceleratorPopover :on-confirm="onConfirm">
    <template #trigger>
      <AcceleratorButton>With confirm function</AcceleratorButton>
    </template>
    <template #content>
      <p>This popover has a confirm function</p>
    </template>
  </AcceleratorPopover>
</template>

<script setup lang="ts">
function onConfirm() {
  console.log('Popover confirmed');
}
</script>

<template>
  <AcceleratorPopover :on-close="onClose">
    <template #trigger>
      <AcceleratorButton>With close function</AcceleratorButton>
    </template>
    <template #content>
      <p>This popover has a close function</p>
    </template>
  </AcceleratorPopover>
</template>

<script setup lang="ts">
function onClose() {
  console.log('Popover closed');
}
</script>

<AcceleratorPopover disable-confirm>
  <template #trigger>
    <AcceleratorButton>Disabled confirm</AcceleratorButton>
  </template>
  <template #content>
    <p>The confirm AcceleratorButton is disabled</p>
  </template>
</AcceleratorPopover>

<template>
  <AcceleratorPopover :on-confirm="onConfirmAsync" :close-on-confirm="false">
    <template #trigger>
      <AcceleratorButton>Don't close on confirm</AcceleratorButton>
    </template>
    <template #content>
      <p>This popover will not close after successful confirmation</p>
    </template>
  </AcceleratorPopover>
</template>

<script setup lang="ts">
async function onConfirmAsync() {
  await Promise.resolve();
  console.log('Popover confirmed');
}
</script>

<template>
  <AcceleratorPopover :on-confirm="onConfirmAsyncError">
    <template #trigger>
      <AcceleratorButton>Don't close on error</AcceleratorButton>
    </template>
    <template #content>
      <p>This popover will not close after error</p>
    </template>
  </AcceleratorPopover>
</template>

<script setup lang="ts">
async function onConfirmAsyncError() {
  throw new Error('Example confirmation error');
}
</script>

<AcceleratorPopover direction="bottom" popover-class="custom-popover">
  <template #trigger>
    <AcceleratorButton>Custom styles</AcceleratorButton>
  </template>
  <template #content>
    <p>This popover has custom styles</p>
  </template>
</AcceleratorPopover>

<style>
:global(.lev-popover-content-container.custom-popover) {
  --lev-popover-bg: greenyellow;
  --lev-popover-padding: 32px;
}

:global(.lev-popover-content.custom-popover) {
  --lev-popover-bg: red;
  --lev-popover-min-width: 400px;
}

:global(.lev-popover-footer.custom-popover) {
  --lev-popover-bg: blue;
}
</style>

<AcceleratorPopover direction="bottom" close-when-trigger-offscreen>
  <template #trigger>
    <AcceleratorButton>Will close if trigger is offscreen</AcceleratorButton>
  </template>
  <template #content>
    <p>This popover will close if the trigger is offscreen</p>
  </template>
</AcceleratorPopover>

<AcceleratorPopover direction="bottom" match-trigger-width>
  <template #trigger>
    <AcceleratorButton>Match trigger width</AcceleratorButton>
  </template>
  <template #content>
    <p>This popover matches the trigger width</p>
  </template>
</AcceleratorPopover>

<AcceleratorPopover direction="bottom" align-with-cursor-x>
  <template #trigger>
    <AcceleratorButton>Align with cursor x</AcceleratorButton>
  </template>
  <template #content>
    <p>As close as possible to the cursor</p>
  </template>
</AcceleratorPopover>

<AcceleratorPopover disable-trigger>
  <template #trigger>
    <AcceleratorButton>Disabled trigger</AcceleratorButton>
  </template>
  <template #content>
    <p>This popover is disabled</p>
  </template>
</AcceleratorPopover>

<AcceleratorPopover preserve-content>
  <template #trigger>
    <AcceleratorButton>Preserve content</AcceleratorButton>
  </template>
  <template #content>
    <p>This popover preserves its content</p>
  </template>
</AcceleratorPopover>

<template>
  <AcceleratorPopover v-model:open="open">
    <template #trigger>
      <AcceleratorButton>Controlled</AcceleratorButton>
    </template>
    <template #content>
      <p>This popover is controlled</p>
      <AcceleratorButton class="button small" @click="open = false">Close me programmatically</AcceleratorButton>
    </template>
  </AcceleratorPopover>
</template>

<script setup lang="ts">
const open = ref(false);
</script>

<template>
  <div class="popover-preview-col">
    <AcceleratorPopover
      v-for="item in reorderingListItems"
      :key="item.id"
      v-model:open="item.open"
      direction="bottom"
      :on-confirm="() => addNewItem(item.id)"
    >
      <template #trigger>
        <AcceleratorButton>{{ item.label }}</AcceleratorButton>
      </template>
      <template #content>
        <p>This is the popover for {{ item.label }}</p>
      </template>
      <template #popoverConfirm>
        <span class="AcceleratorButton">Add New Item</span>
      </template>
    </AcceleratorPopover>
  </div>
</template>

<script setup lang="ts">
const reorderingListItems = ref([
  { id: 1, label: 'Item 1', open: false },
  { id: 2, label: 'Item 2', open: false },
]);
let nextId = 3;

async function addNewItem(currentId: number) {
  await new Promise((resolve) => setTimeout(resolve, 500));
  reorderingListItems.value.unshift({ id: nextId, label: 'Item ' + nextId++, open: true });
  const currentItem = reorderingListItems.value.find((item) => item.id === currentId);
  if (currentItem) currentItem.open = false;
}
</script>

<div class="popover-preview-col">
  <AcceleratorPopover>
    <template #trigger>
      <AcceleratorButton>Nested popover</AcceleratorButton>
    </template>
    <template #content>
      <AcceleratorPopover>
        <template #trigger>
          <AcceleratorButton>Inner popover</AcceleratorButton>
        </template>
        <template #content>
          <AcceleratorPopover>
            <template #trigger>
              <AcceleratorButton>Inner popover</AcceleratorButton>
            </template>
            <template #content>
              <AcceleratorPopover>
                <template #trigger>
                  <AcceleratorButton>Inner popover</AcceleratorButton>
                </template>
                <template #content>
                  <AcceleratorButton>This is the nested popover</AcceleratorButton>
                </template>
              </AcceleratorPopover>
            </template>
          </AcceleratorPopover>
        </template>
      </AcceleratorPopover>
    </template>
  </AcceleratorPopover>
</div>

<div class="popover-preview-col">
  <AcceleratorModal>
    <template #trigger>
      <AcceleratorButton>Modal popover</AcceleratorButton>
    </template>
    <template #content>
      <AcceleratorPopover>
        <template #trigger>
          <AcceleratorButton>Inner popover</AcceleratorButton>
        </template>
        <template #content>
          <AcceleratorPopover>
            <template #trigger>
              <AcceleratorButton>Inner popover</AcceleratorButton>
            </template>
            <template #content>
              <AcceleratorButton>This is the modal popover</AcceleratorButton>
            </template>
          </AcceleratorPopover>
        </template>
      </AcceleratorPopover>
    </template>
  </AcceleratorModal>
</div>

<div class="popover-preview-col">
  <AcceleratorPopover>
    <template #trigger>
      <AcceleratorTooltip>
        <template #trigger>
          <AcceleratorButton>Inner popover</AcceleratorButton>
        </template>
        <template #content>
          <p>This is the tooltip popover</p>
        </template>
      </AcceleratorTooltip>
    </template>
    <template #content>
      <AcceleratorButton>This is the Tooltip popover</AcceleratorButton>
    </template>
  </AcceleratorPopover>
</div>