Popover

<script setup lang="ts">
import { Button } from "@dicehub/phi/components/button";
import { Popover } from "@dicehub/phi/components/popover";
</script>

<template>
  <Popover>
    <Popover.Trigger as-child>
      <Button>Open Popover</Button>
    </Popover.Trigger>
    <Popover.Content>
      <Popover.Title>Popover Title</Popover.Title>
      <Popover.Description>
        This is a basic popover with a title and description.
      </Popover.Description>
    </Popover.Content>
  </Popover>
</template>

<script setup lang="ts">
import { Button } from "@dicehub/phi/components/button";
import { Popover } from "@dicehub/phi/components/popover";
</script>

<template>
  <Popover>
    <Popover.Trigger as-child>
      <Button>Open Settings</Button>
    </Popover.Trigger>
    <Popover.Content>
      <Popover.Title>Settings</Popover.Title>
      <Popover.Description>Configure your preferences below.</Popover.Description>
      <div class="mt-3">
        <Popover.Close as-child>
          <Button variant="secondary" size="sm">Close</Button>
        </Popover.Close>
      </div>
    </Popover.Content>
  </Popover>
</template>

<script setup lang="ts">
import { Button } from "@dicehub/phi/components/button";
import { Popover, type PopoverSide } from "@dicehub/phi/components/popover";

const sides: PopoverSide[] = ["bottom", "top", "left", "right"];
</script>

<template>
  <div class="flex flex-wrap gap-4">
    <Popover v-for="side in sides" :key="side">
      <Popover.Trigger as-child>
        <Button variant="secondary">{{ side }}</Button>
      </Popover.Trigger>
      <Popover.Content :side="side">
        <Popover.Title>{{ side }}</Popover.Title>
        <Popover.Description>Popover on {{ side }}.</Popover.Description>
      </Popover.Content>
    </Popover>
  </div>
</template>

<script setup lang="ts">
import { Button } from "@dicehub/phi/components/button";
import { Popover } from "@dicehub/phi/components/popover";
</script>

<template>
  <Popover>
    <Popover.Trigger as-child>
      <Button>User Profile</Button>
    </Popover.Trigger>
    <Popover.Content class-name="w-64">
      <div class="flex items-center gap-3">
        <div class="size-10 rounded-full bg-recessed" />
        <div>
          <Popover.Title>Jane Doe</Popover.Title>
          <p class="text-sm text-subtle">[email protected]</p>
        </div>
      </div>
      <div class="mt-3 flex gap-2 border-t pt-3">
        <Button variant="secondary" size="sm" class="flex-1">Profile</Button>
        <Popover.Close as-child>
          <Button variant="ghost" size="sm" class="flex-1">Sign Out</Button>
        </Popover.Close>
      </div>
    </Popover.Content>
  </Popover>
</template>

<script setup lang="ts">
import { Button } from "@dicehub/phi/components/button";
import { Popover } from "@dicehub/phi/components/popover";
</script>

<template>
  <Popover>
    <Popover.Trigger as-child open-on-hover :delay="200">
      <Button variant="secondary">Hover Me</Button>
    </Popover.Trigger>
    <Popover.Content>
      <Popover.Title>Hover Triggered</Popover.Title>
      <Popover.Description>
        This popover opens on hover with a 200ms delay. It can still contain
        interactive content like buttons and links.
      </Popover.Description>
      <div class="mt-3">
        <Popover.Close as-child>
          <Button variant="secondary" size="sm">Got it</Button>
        </Popover.Close>
      </div>
    </Popover.Content>
  </Popover>
</template>

<script setup lang="ts">
import { computed, nextTick, ref, shallowRef } from "vue";
import { Button } from "@dicehub/phi/components/button";
import { Popover, type PopoverOpenChangeDetails } from "@dicehub/phi/components/popover";

const selectedRow = ref<string | null>(null);
const selectedRowElement = shallowRef<HTMLTableRowElement | null>(null);
const anchor = computed(() => {
  const row = selectedRowElement.value;
  return row
    ? {
        contextElement: row,
        getBoundingClientRect: () => row.getBoundingClientRect(),
      }
    : undefined;
});

async function editRow(row: HTMLTableRowElement, id: string) {
  selectedRowElement.value = row;
  await nextTick();
  selectedRow.value = id;
}

function onOpenChange(details: PopoverOpenChangeDetails) {
  if (!details.open) {
    selectedRow.value = null;
    selectedRowElement.value = null;
  }
}
</script>

<template>
  <table>
    <!-- call editRow(rowElement, id) from each row action -->
  </table>
  <Popover :open="Boolean(selectedRow)" @open-change="onOpenChange">
    <Popover.Content side="left" :anchor="anchor">
      <Popover.Title>Edit {{ selectedRow }}</Popover.Title>
      <Popover.Description>
        The popover anchors to the selected row, not the icon button.
      </Popover.Description>
      <Popover.Close as-child>
        <Button variant="secondary" size="sm">Close</Button>
      </Popover.Close>
    </Popover.Content>
  </Popover>
</template>