Popover

<script setup>
import { Button } from "@dicehub/kappa/components/button";
import { Popover } from "@dicehub/kappa/components/popover";
</script>

<template>
  <Popover.Root>
    <Popover.Trigger as-child><Button>Inspect run</Button></Popover.Trigger>
    <Popover.Content>
      <Popover.Title>Run 4189</Popover.Title>
      <Popover.Description>Run completed in 02:14:38.</Popover.Description>
      <p>Pressure residuals stayed below the configured limit.</p>
    </Popover.Content>
  </Popover.Root>
</template>

<script setup>
import { Button } from "@dicehub/kappa/components/button";
import { Popover } from "@dicehub/kappa/components/popover";

const placements = ["top", "bottom", "left", "right"];
</script>

<template>
  <Popover.Root v-for="placement in placements" :key="placement" :positioning="{ placement }">
    <Popover.Trigger as-child><Button size="sm">{{ placement }}</Button></Popover.Trigger>
    <Popover.Content>
      <Popover.Title>{{ placement }} placement</Popover.Title>
      <Popover.Description>Ark UI flips the surface when space is limited.</Popover.Description>
    </Popover.Content>
  </Popover.Root>
</template>

<script setup>
import { ref } from "vue";
import { Button } from "@dicehub/kappa/components/button";
import { Popover } from "@dicehub/kappa/components/popover";

const runLabel = ref("PIMPLE baseline 07");
</script>

<template>
  <Popover.Root>
    <Popover.Trigger as-child><Button>Edit run details</Button></Popover.Trigger>
    <Popover.Content>
      <Popover.Title>Edit run details</Popover.Title>
      <Popover.Description>Change the label used in reports and archives.</Popover.Description>
      <label>Run label <input v-model="runLabel" /></label>
      <Popover.Close as-child label="Save changes"><Button variant="primary">Save changes</Button></Popover.Close>
    </Popover.Content>
  </Popover.Root>
</template>

<script setup>
import { ref } from "vue";
import { Button } from "@dicehub/kappa/components/button";
import { Popover } from "@dicehub/kappa/components/popover";

const open = ref(false);
</script>

<template>
  <Button @click="open = true">Open controlled popover</Button>
  <Popover.Root v-model:open="open">
    <Popover.Content>
      <Popover.Title>Controlled state</Popover.Title>
      <Popover.Description>The parent owns the open value.</Popover.Description>
      <Popover.Close as-child label="Done"><Button>Done</Button></Popover.Close>
    </Popover.Content>
  </Popover.Root>
</template>

<Popover.Root>
  <Popover.Anchor as-child>
    <span class="report-context">Report context · Run 4189</span>
  </Popover.Anchor>
  <Popover.Trigger as-child><Button aria-label="Open anchored details">Details</Button></Popover.Trigger>
  <Popover.Content>
    <Popover.Title>Anchored details</Popover.Title>
    <Popover.Description>Positioning uses the custom Anchor.</Popover.Description>
  </Popover.Content>
</Popover.Root>

<script setup>
import { onBeforeUnmount, ref } from "vue";
import { Button } from "@dicehub/kappa/components/button";
import { Popover } from "@dicehub/kappa/components/popover";

const open = ref(false);
let timer;

function cancelTimer() {
  window.clearTimeout(timer);
}

function scheduleOpen() {
  cancelTimer();
  timer = window.setTimeout(() => (open.value = true), 200);
}

function scheduleClose() {
  cancelTimer();
  timer = window.setTimeout(() => (open.value = false), 150);
}

function keepOpen() {
  cancelTimer();
  open.value = true;
}

onBeforeUnmount(cancelTimer);
</script>

<template>
  <Popover.Root v-model:open="open" :auto-focus="false">
    <Popover.Trigger as-child>
      <Button @mouseenter="scheduleOpen" @mouseleave="scheduleClose">Hover or focus</Button>
    </Popover.Trigger>
    <Popover.Content
      @mouseenter="keepOpen"
      @mouseleave="scheduleClose"
      @focusin="keepOpen"
      @focusout="scheduleClose"
    >
      <Popover.Title>Hover-triggered content</Popover.Title>
      <Popover.Description>The surface stays open while you interact with it.</Popover.Description>
      <Popover.Close as-child label="Got it"><Button>Got it</Button></Popover.Close>
    </Popover.Content>
  </Popover.Root>
</template>

<Popover.Root>
  <Popover.Trigger as-child><Button disabled>Unavailable action</Button></Popover.Trigger>
  <Popover.Content>
    <Popover.Title>Unavailable action</Popover.Title>
    <Popover.Description>Validation must pass first.</Popover.Description>
  </Popover.Content>
</Popover.Root>

<Popover.Root :modal="true">
  <Popover.Trigger as-child><Button>Modal popover</Button></Popover.Trigger>
  <Popover.Content>
    <Popover.Title>Modal popover</Popover.Title>
    <Popover.Close as-child label="Close"><Button>Close</Button></Popover.Close>
  </Popover.Content>
</Popover.Root>

<Popover.Root dir="rtl">
  <Popover.Trigger as-child><Button>فتح التفاصيل</Button></Popover.Trigger>
  <Popover.Content>
    <Popover.Title>تفاصيل المحاكاة</Popover.Title>
    <Popover.Description>النتائج جاهزة للمراجعة.</Popover.Description>
  </Popover.Content>
</Popover.Root>