Popover

<script setup lang="ts">
import { Field, FieldLabel } from "@ui-sdk/vue/field"
import { Input } from "@ui-sdk/vue/input"
import {
  Popover,
  PopoverClose,
  PopoverContent,
  PopoverDescription,
  PopoverTitle,
  PopoverTrigger,
} from "@ui-sdk/vue/popover"
</script>

<template>
  <Popover>
    <PopoverTrigger>Share</PopoverTrigger>
    <PopoverContent>
      <PopoverTitle>Share this document</PopoverTitle>
      <PopoverDescription>Anyone with the link can view it.</PopoverDescription>
      <Field>
        <FieldLabel>Link</FieldLabel>
        <Input readonly default-value="acme.app/d/q3-roadmap" />
      </Field>
      <div data-slot="row">
        <PopoverClose>Cancel</PopoverClose>
        <PopoverClose data-variant="solid">Copy Link</PopoverClose>
      </div>
    </PopoverContent>
  </Popover>
</template>

<script setup lang="ts">
import { Field, FieldLabel } from "@ui-sdk/vue/field"
import { Input } from "@ui-sdk/vue/input"
import {
  Popover,
  PopoverClose,
  PopoverContent,
  PopoverDescription,
  PopoverTitle,
  PopoverTrigger,
} from "@ui-sdk/vue/popover"
import { ref } from "vue"
import { useLog } from "./log"

const log = useLog()
const open = ref(false)

function onSubmit(event: Event) {
  log(
    `Saved ${new FormData(event.currentTarget as HTMLFormElement).get("name")}`
  )
  open.value = false
}
</script>

<template>
  <Popover v-model:open="open">
    <PopoverTrigger>Edit Profile</PopoverTrigger>
    <PopoverContent>
      <PopoverTitle>Edit profile</PopoverTitle>
      <PopoverDescription>Your name shows on your posts.</PopoverDescription>
      <form data-slot="stack" @submit.prevent="onSubmit">
        <Field>
          <FieldLabel>Name</FieldLabel>
          <Input name="name" required default-value="Hollis Grant" />
        </Field>
        <div data-slot="row">
          <PopoverClose>Cancel</PopoverClose>
          <button type="submit" data-variant="solid">Save</button>
        </div>
      </form>
    </PopoverContent>
  </Popover>
</template>

<script setup lang="ts">
import { Field, FieldControl, FieldLabel } from "@ui-sdk/vue/field"
import {
  Popover,
  PopoverClose,
  PopoverContent,
  PopoverDescription,
  PopoverTitle,
  PopoverTrigger,
} from "@ui-sdk/vue/popover"
import { ref } from "vue"
import { useLog } from "./log"

const log = useLog()
const open = ref(false)
const note = ref("")
const asking = ref(false)
let field: HTMLTextAreaElement | undefined

function close() {
  open.value = false
  note.value = ""
  asking.value = false
}

function onInput(event: Event) {
  field = event.target as HTMLTextAreaElement
  note.value = field.value
}

function onDismissAttempt(details: { reason: string }) {
  log(`Kept open (${details.reason})`)
  asking.value = true
}

function keepEditing() {
  asking.value = false
  field?.focus()
}

function discard() {
  log("Discarded the note")
  close()
}

function save() {
  log(note.value ? "Saved the note" : "Nothing to save")
  close()
}
</script>

<template>
  <Popover
    :open="open"
    :dismissible="note === ''"
    @update:open="(next: boolean) => (next ? (open = true) : close())"
    @dismiss-attempt="onDismissAttempt"
  >
    <PopoverTrigger>Add Note</PopoverTrigger>
    <PopoverContent>
      <PopoverTitle>Add a note</PopoverTitle>
      <PopoverDescription>Only your team can see it.</PopoverDescription>
      <Field>
        <FieldLabel>Note</FieldLabel>
        <FieldControl :value="note" @input="onInput">
          <template #render="{ props }">
            <textarea
              v-bind="props"
              placeholder="Call the printer about the proofs."
            />
          </template>
        </FieldControl>
      </Field>
      <div v-if="asking" data-slot="row" role="alert">
        Discard your note?
        <div data-slot="row">
          <button type="button" data-size="sm" @click="keepEditing">
            Keep Editing
          </button>
          <button
            type="button"
            data-size="sm"
            data-variant="solid"
            @click="discard"
          >
            Discard
          </button>
        </div>
      </div>
      <div v-else data-slot="row">
        <PopoverClose>Cancel</PopoverClose>
        <button type="button" data-variant="solid" @click="save">Save</button>
      </div>
    </PopoverContent>
  </Popover>
</template>

<script setup lang="ts">
import { CheckIcon, ChevronDownIcon } from "@lucide/vue"
import {
  Popover,
  PopoverContent,
  PopoverDescription,
  PopoverTitle,
  PopoverTrigger,
} from "@ui-sdk/vue/popover"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectItemIndicator,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "@ui-sdk/vue/select"
import { ref } from "vue"

const sides = [
  { value: "top", label: "Top" },
  { value: "right", label: "Right" },
  { value: "bottom", label: "Bottom" },
  { value: "left", label: "Left" },
]
const aligns = [
  { value: "start", label: "Start" },
  { value: "center", label: "Center" },
  { value: "end", label: "End" },
]
type Side = "top" | "right" | "bottom" | "left"
type Align = "start" | "center" | "end"

const side = ref<Side>("bottom")
const align = ref<Align>("center")
</script>

<template>
  <div data-slot="stack">
    <div data-slot="controls">
      <Select
        :items="sides"
        :value="side"
        @value-change="(next) => next && (side = next as Side)"
      >
        <SelectLabel>Side</SelectLabel>
        <SelectTrigger>
          <SelectValue />
          <ChevronDownIcon aria-hidden="true" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem
            v-for="option in sides"
            :key="option.value"
            :value="option.value"
          >
            {{ option.label }}
            <SelectItemIndicator>
              <CheckIcon aria-hidden="true" />
            </SelectItemIndicator>
          </SelectItem>
        </SelectContent>
      </Select>
      <Select
        :items="aligns"
        :value="align"
        @value-change="(next) => next && (align = next as Align)"
      >
        <SelectLabel>Align</SelectLabel>
        <SelectTrigger>
          <SelectValue />
          <ChevronDownIcon aria-hidden="true" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem
            v-for="option in aligns"
            :key="option.value"
            :value="option.value"
          >
            {{ option.label }}
            <SelectItemIndicator>
              <CheckIcon aria-hidden="true" />
            </SelectItemIndicator>
          </SelectItem>
        </SelectContent>
      </Select>
    </div>
    <Popover>
      <PopoverTrigger>Delivery</PopoverTrigger>
      <PopoverContent :side="side" :align="align" :side-offset="8">
        <PopoverTitle>Delivery window</PopoverTitle>
        <PopoverDescription
          >Arrives Tuesday between 9 AM and noon.</PopoverDescription
        >
      </PopoverContent>
    </Popover>
  </div>
</template>

<script setup lang="ts">
import { CheckIcon, ChevronDownIcon } from "@lucide/vue"
import {
  Popover,
  PopoverContent,
  PopoverDescription,
  PopoverTitle,
  PopoverTrigger,
} from "@ui-sdk/vue/popover"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectItemIndicator,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "@ui-sdk/vue/select"
import { reactive } from "vue"

const choices = {
  sideOffset: { label: "Side offset", values: ["4", "8", "16", "24"] },
  alignOffset: { label: "Align offset", values: ["-16", "0", "16"] },
  collisionPadding: { label: "Collision padding", values: ["8", "24", "48"] },
}
type Name = keyof typeof choices

const offsets = reactive<Record<Name, string>>({
  sideOffset: "8",
  alignOffset: "0",
  collisionPadding: "8",
})
</script>

<template>
  <div data-slot="stack">
    <div data-slot="controls">
      <Select
        v-for="(choice, name) in choices"
        :key="name"
        :items="choice.values"
        :value="offsets[name]"
        @value-change="(next) => next && (offsets[name] = next)"
      >
        <SelectLabel>{{ choice.label }}</SelectLabel>
        <SelectTrigger>
          <SelectValue />
          <ChevronDownIcon aria-hidden="true" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem
            v-for="value in choice.values"
            :key="value"
            :value="value"
          >
            {{ value }}px
            <SelectItemIndicator>
              <CheckIcon aria-hidden="true" />
            </SelectItemIndicator>
          </SelectItem>
        </SelectContent>
      </Select>
    </div>
    <Popover>
      <PopoverTrigger>Delivery</PopoverTrigger>
      <PopoverContent
        align="start"
        :side-offset="Number(offsets.sideOffset)"
        :align-offset="Number(offsets.alignOffset)"
        :collision-padding="Number(offsets.collisionPadding)"
      >
        <PopoverTitle>Delivery window</PopoverTitle>
        <PopoverDescription
          >Arrives Tuesday between 9 AM and noon.</PopoverDescription
        >
      </PopoverContent>
    </Popover>
  </div>
</template>

<script setup lang="ts">
import { CircleQuestionMarkIcon } from "@lucide/vue"
import type { ChangeDetails } from "@ui-sdk/core"
import {
  Popover,
  PopoverArrow,
  PopoverContent,
  PopoverDescription,
  PopoverTitle,
  PopoverTrigger,
} from "@ui-sdk/vue/popover"
import { ref } from "vue"

const sides = [
  { value: "top", label: "Top" },
  { value: "right", label: "Right" },
  { value: "bottom", label: "Bottom" },
  { value: "left", label: "Left" },
] as const
type Side = (typeof sides)[number]["value"]

const open = ref(false)
const side = ref<Side>("bottom")
const controls = ref<HTMLElement | null>(null)

function onOpenChange(next: boolean, details: ChangeDetails) {
  const target = details.event?.target
  const inControls = target instanceof Node && controls.value?.contains(target)
  if (inControls && details.reason !== "escape-key") {
    return details.cancel()
  }
  open.value = next
}
</script>

<template>
  <div data-slot="stack">
    <div ref="controls" data-slot="controls" role="group" aria-label="Side">
      <button
        v-for="option in sides"
        :key="option.value"
        type="button"
        data-size="sm"
        :aria-pressed="side === option.value"
        @click="side = option.value"
      >
        {{ option.label }}
      </button>
    </div>
    <Popover :open="open" @open-change="onOpenChange">
      <PopoverTrigger aria-label="Help">
        <CircleQuestionMarkIcon aria-hidden="true" />
      </PopoverTrigger>
      <PopoverContent :side="side" :side-offset="10" :arrow-padding="12">
        <PopoverArrow />
        <PopoverTitle>Keyboard shortcuts</PopoverTitle>
        <PopoverDescription
          >Press ? anywhere to see them all.</PopoverDescription
        >
      </PopoverContent>
    </Popover>
  </div>
</template>

<script setup lang="ts">
import { CheckIcon, SlidersHorizontalIcon } from "@lucide/vue"
import { Checkbox, CheckboxIndicator } from "@ui-sdk/vue/checkbox"
import {
  Popover,
  PopoverClose,
  PopoverContent,
  PopoverDescription,
  PopoverTitle,
  PopoverTrigger,
} from "@ui-sdk/vue/popover"
import { ref } from "vue"

const types = [
  { label: "Documents", checked: true },
  { label: "Images", checked: false },
  { label: "Shared with me", checked: true },
]

const anchor = ref<HTMLInputElement | null>(null)
</script>

<template>
  <div data-slot="row">
    <input
      ref="anchor"
      type="search"
      placeholder="Search files…"
      aria-label="Search files"
    />
    <Popover>
      <PopoverTrigger aria-label="Search filters">
        <SlidersHorizontalIcon aria-hidden="true" />
      </PopoverTrigger>
      <PopoverContent :anchor="anchor" align="start" :side-offset="8">
        <PopoverTitle>Filters</PopoverTitle>
        <PopoverDescription>Show only these kinds of files.</PopoverDescription>
        <div data-slot="stack">
          <label v-for="type in types" :key="type.label" data-slot="label">
            <Checkbox :default-checked="type.checked">
              <CheckboxIndicator>
                <CheckIcon aria-hidden="true" />
              </CheckboxIndicator>
            </Checkbox>
            {{ type.label }}
          </label>
        </div>
        <div data-slot="row">
          <PopoverClose>Cancel</PopoverClose>
          <PopoverClose data-variant="solid">Apply</PopoverClose>
        </div>
      </PopoverContent>
    </Popover>
  </div>
</template>

<script setup lang="ts">
import { CheckIcon, ChevronDownIcon } from "@lucide/vue"
import { Field, FieldLabel } from "@ui-sdk/vue/field"
import { Textarea } from "@ui-sdk/vue/textarea"
import {
  Popover,
  PopoverClose,
  PopoverContent,
  PopoverDescription,
  PopoverTitle,
  PopoverTrigger,
} from "@ui-sdk/vue/popover"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectItemIndicator,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "@ui-sdk/vue/select"
import { computed, ref } from "vue"

const modes = [
  { value: "false", label: "Non-modal" },
  { value: "trap-focus", label: "Trap focus" },
  { value: "true", label: "Modal" },
]

type Mode = "false" | "trap-focus" | "true"

const notes = {
  false: "Tab can leave, and focus leaving closes it.",
  "trap-focus": "Tab stays inside. The page still scrolls and takes clicks.",
  true: "Tab stays inside. The page is inert and doesn't scroll.",
}

const mode = ref<Mode>("false")
const modal = computed(() =>
  mode.value === "true" ? true : mode.value === "false" ? false : "trap-focus"
)
</script>

<template>
  <div data-slot="stack">
    <div data-slot="controls">
      <Select
        :items="modes"
        :value="mode"
        @value-change="(next) => next && (mode = next as Mode)"
      >
        <SelectLabel>Modal</SelectLabel>
        <SelectTrigger>
          <SelectValue />
          <ChevronDownIcon aria-hidden="true" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem
            v-for="option in modes"
            :key="option.value"
            :value="option.value"
          >
            {{ option.label }}
            <SelectItemIndicator>
              <CheckIcon aria-hidden="true" />
            </SelectItemIndicator>
          </SelectItem>
        </SelectContent>
      </Select>
    </div>
    <Popover :modal="modal">
      <PopoverTrigger>Add Comment</PopoverTrigger>
      <PopoverContent>
        <PopoverTitle>Add a comment</PopoverTitle>
        <PopoverDescription>{{ notes[mode] }}</PopoverDescription>
        <Field>
          <FieldLabel>Comment</FieldLabel>
          <Textarea default-value="Looks good to me." />
        </Field>
        <div data-slot="row">
          <PopoverClose>Cancel</PopoverClose>
          <PopoverClose data-variant="solid">Comment</PopoverClose>
        </div>
      </PopoverContent>
    </Popover>
  </div>
</template>

<script setup lang="ts">
import { Field, FieldLabel } from "@ui-sdk/vue/field"
import { Input } from "@ui-sdk/vue/input"
import {
  Popover,
  PopoverClose,
  PopoverContent,
  PopoverDescription,
  PopoverTitle,
  PopoverTrigger,
} from "@ui-sdk/vue/popover"
</script>

<template>
  <div data-slot="row">
    <Popover>
      <PopoverTrigger>Rename</PopoverTrigger>
      <PopoverContent>
        <PopoverTitle>Rename file</PopoverTitle>
        <PopoverDescription
          >Focus starts in the first field.</PopoverDescription
        >
        <Field>
          <FieldLabel>Name</FieldLabel>
          <Input default-value="Q3 roadmap.pdf" />
        </Field>
        <div data-slot="row">
          <PopoverClose>Cancel</PopoverClose>
          <PopoverClose data-variant="solid">Save</PopoverClose>
        </div>
      </PopoverContent>
    </Popover>
    <Popover>
      <PopoverTrigger>Publish</PopoverTrigger>
      <PopoverContent initial-focus="[data-autofocus]">
        <PopoverTitle>Publish changes?</PopoverTitle>
        <PopoverDescription
          >Focus starts on Publish, not Cancel.</PopoverDescription
        >
        <div data-slot="row">
          <PopoverClose>Cancel</PopoverClose>
          <PopoverClose data-autofocus="" data-variant="solid"
            >Publish</PopoverClose
          >
        </div>
      </PopoverContent>
    </Popover>
    <Popover>
      <PopoverTrigger>Status</PopoverTrigger>
      <PopoverContent initial-focus="none" final-focus="none">
        <PopoverTitle>All systems normal</PopoverTitle>
        <PopoverDescription>Focus stays on the trigger.</PopoverDescription>
      </PopoverContent>
    </Popover>
  </div>
</template>

<script setup lang="ts">
import {
  Popover,
  PopoverArrow,
  PopoverContent,
  PopoverDescription,
  PopoverTitle,
  PopoverTrigger,
} from "@ui-sdk/vue/popover"
import { useLog } from "./log"

const log = useLog()
</script>

<template>
  <Popover open-on-hover :delay="200" :close-delay="150">
    <PopoverTrigger>@kofi</PopoverTrigger>
    <PopoverContent :side-offset="8">
      <PopoverArrow />
      <PopoverTitle>Kofi Mensah</PopoverTitle>
      <PopoverDescription
        >Engineering manager, platform team.</PopoverDescription
      >
      <div data-slot="row">
        <button
          type="button"
          data-size="sm"
          data-variant="solid"
          @click="log('Followed @kofi')"
        >
          Follow
        </button>
      </div>
    </PopoverContent>
  </Popover>
</template>

<script setup lang="ts">
import { CheckIcon } from "@lucide/vue"
import type { ChangeDetails } from "@ui-sdk/core"
import { Checkbox, CheckboxIndicator } from "@ui-sdk/vue/checkbox"
import { Field, FieldLabel } from "@ui-sdk/vue/field"
import { Input } from "@ui-sdk/vue/input"
import {
  Popover,
  PopoverClose,
  PopoverContent,
  PopoverDescription,
  PopoverTitle,
  PopoverTrigger,
} from "@ui-sdk/vue/popover"
import { ref } from "vue"
import { useLog } from "./log"

const log = useLog()
const open = ref(false)
const controls = ref<HTMLElement | null>(null)

function onOpenChange(next: boolean, details: ChangeDetails) {
  const target = details.event?.target
  const inControls = target instanceof Node && controls.value?.contains(target)
  if (inControls && details.reason !== "escape-key") {
    return details.cancel()
  }
  log(`${next ? "Opened" : "Closed"} (${details.reason})`)
}
</script>

<template>
  <div data-slot="stack">
    <div ref="controls" data-slot="controls">
      <label data-slot="label">
        <Checkbox
          :checked="open"
          @checked-change="(next) => (open = next === true)"
        >
          <CheckboxIndicator>
            <CheckIcon aria-hidden="true" />
          </CheckboxIndicator>
        </Checkbox>
        Open
      </label>
    </div>
    <Popover v-model:open="open" @open-change="onOpenChange">
      <PopoverTrigger>Set Status</PopoverTrigger>
      <PopoverContent>
        <PopoverTitle>Set a status</PopoverTitle>
        <PopoverDescription
          >Your team sees it next to your name.</PopoverDescription
        >
        <Field>
          <FieldLabel>Status</FieldLabel>
          <Input default-value="In a meeting" />
        </Field>
        <div data-slot="row">
          <PopoverClose>Cancel</PopoverClose>
          <PopoverClose data-variant="solid">Save</PopoverClose>
        </div>
      </PopoverContent>
    </Popover>
  </div>
</template>

<script setup lang="ts">
import { Field, FieldLabel } from "@ui-sdk/vue/field"
import { Input } from "@ui-sdk/vue/input"
import {
  Popover,
  PopoverClose,
  PopoverContent,
  PopoverDescription,
  PopoverShortcut,
  PopoverTitle,
  PopoverTrigger,
} from "@ui-sdk/vue/popover"
</script>

<template>
  <Popover>
    <PopoverTrigger shortcut="mod+i">
      Invite
      <PopoverShortcut />
    </PopoverTrigger>
    <PopoverContent>
      <PopoverTitle>Invite people</PopoverTitle>
      <PopoverDescription
        >They'll get an email with a link to join.</PopoverDescription
      >
      <Field>
        <FieldLabel>Email</FieldLabel>
        <Input type="email" placeholder="wren@example.com" />
      </Field>
      <div data-slot="row">
        <PopoverClose>Cancel</PopoverClose>
        <PopoverClose data-variant="solid">Send Invite</PopoverClose>
      </div>
    </PopoverContent>
  </Popover>
</template>

<script setup lang="ts">
import { Field, FieldControl, FieldLabel } from "@ui-sdk/vue/field"
import {
  createPopoverController,
  Popover,
  PopoverContent,
  PopoverDescription,
  PopoverTitle,
  PopoverTrigger,
} from "@ui-sdk/vue/popover"
import { computed, ref } from "vue"
import { useLog } from "./log"

type Member = { name: string; role: string }

const roles = ["Admin", "Editor", "Viewer"]

const log = useLog()
const popover = createPopoverController<Member>()
const MemberPopoverContent = PopoverContent<Member>
const members = ref<Member[]>([
  { name: "Hollis Grant", role: "Owner" },
  { name: "Inès Moreau", role: "Editor" },
  { name: "Kofi Mensah", role: "Viewer" },
  { name: "Wren Takahashi", role: "Viewer" },
])
const newest = computed(() => members.value[members.value.length - 1])

async function editNewest(event: MouseEvent) {
  const result = await popover.open({
    payload: newest.value,
    anchor: event.currentTarget as HTMLElement,
  })
  log(`Closed (${result.reason}), returned ${result.returnValue ?? "nothing"}`)
}

function onPayloadChange(payload: unknown) {
  const member = payload as Member | undefined
  if (member) {
    log(`Editing ${member.name}`)
  }
}

function save(event: SubmitEvent, member: Member | undefined) {
  if ((event.submitter as HTMLButtonElement).value !== "save" || !member) {
    return
  }
  const role = String(
    new FormData(event.currentTarget as HTMLFormElement).get("role")
  )
  members.value = members.value.map((entry) =>
    entry.name === member.name ? { ...entry, role } : entry
  )
}
</script>

<template>
  <div data-slot="stack">
    <div data-slot="controls">
      <button type="button" @click="editNewest">Edit Newest Member</button>
    </div>
    <ul data-slot="list">
      <li v-for="member in members" :key="member.name" data-slot="row">
        {{ member.name }}
        <span data-slot="hint">{{ member.role }}</span>
        <PopoverTrigger
          :controller="popover"
          :payload="member"
          :disabled="member.role === 'Owner'"
          data-size="sm"
          data-variant="ghost"
          :aria-label="`Edit ${member.name}`"
        >
          Edit
        </PopoverTrigger>
      </li>
    </ul>
    <Popover :controller="popover" @payload-change="onPayloadChange">
      <MemberPopoverContent v-slot="{ state }" align="end" :side-offset="8">
        <PopoverTitle>{{ state.payload?.name }}</PopoverTitle>
        <PopoverDescription
          >Roles decide what they can change.</PopoverDescription
        >
        <form
          data-slot="stack"
          method="dialog"
          @submit="save($event as SubmitEvent, state.payload)"
        >
          <Field>
            <FieldLabel>Role</FieldLabel>
            <FieldControl
              :key="state.payload?.name"
              name="role"
              :default-value="state.payload?.role"
            >
              <template #render="{ props }">
                <select v-bind="props">
                  <option v-for="role in roles" :key="role">{{ role }}</option>
                </select>
              </template>
            </FieldControl>
          </Field>
          <div data-slot="row">
            <button type="submit" value="cancel" formnovalidate>Cancel</button>
            <button type="submit" value="save" data-variant="solid">
              Save
            </button>
          </div>
        </form>
      </MemberPopoverContent>
    </Popover>
  </div>
</template>

<script setup lang="ts">
import {
  Popover,
  PopoverClose,
  PopoverContent,
  PopoverDescription,
  PopoverTitle,
  PopoverTrigger,
} from "@ui-sdk/vue/popover"
import { useLog } from "./log"

const log = useLog()
</script>

<template>
  <Popover
    @open-change="(open: boolean) => log(open ? 'Opening' : 'Closing')"
    @open-change-complete="(open: boolean) => log(open ? 'Open' : 'Closed')"
  >
    <PopoverTrigger>What's New</PopoverTrigger>
    <PopoverContent keep-mounted>
      <PopoverTitle>What's new</PopoverTitle>
      <PopoverDescription
        >Comments now support threads and reactions.</PopoverDescription
      >
      <div data-slot="row">
        <PopoverClose data-variant="solid">Got It</PopoverClose>
      </div>
    </PopoverContent>
  </Popover>
</template>

<script setup lang="ts">
import { Field, FieldLabel } from "@ui-sdk/vue/field"
import { Input } from "@ui-sdk/vue/input"
import {
  Popover,
  PopoverClose,
  PopoverContent,
  PopoverDescription,
  PopoverTitle,
  PopoverTrigger,
} from "@ui-sdk/vue/popover"
</script>

<template>
  <Popover presentation="sheet">
    <PopoverTrigger>Add Reminder</PopoverTrigger>
    <PopoverContent>
      <PopoverTitle>New reminder</PopoverTitle>
      <PopoverDescription
        >We'll notify you at the time you pick.</PopoverDescription
      >
      <Field>
        <FieldLabel>Remind me to</FieldLabel>
        <Input default-value="Send the Q3 roadmap" />
      </Field>
      <div data-slot="row">
        <PopoverClose>Cancel</PopoverClose>
        <PopoverClose data-variant="solid">Save</PopoverClose>
      </div>
    </PopoverContent>
  </Popover>
</template>

<script setup lang="ts">
import {
  Popover,
  PopoverClose,
  PopoverContent,
  PopoverDescription,
  PopoverShortcut,
  PopoverTitle,
  PopoverTrigger,
} from "@ui-sdk/vue/popover"
</script>

<template>
  <Popover>
    <PopoverTrigger shortcut="mod+u">
      <template #render="{ props, state }">
        <button v-bind="props">
          {{ state.open ? "Hide Updates" : "Show Updates" }}
          <PopoverShortcut v-slot="{ state: shortcut }">{{
            shortcut.text
          }}</PopoverShortcut>
        </button>
      </template>
    </PopoverTrigger>
    <PopoverContent>
      <PopoverTitle>
        <template #render="{ props }">
          <h3 v-bind="props">Updates</h3>
        </template>
      </PopoverTitle>
      <PopoverDescription
        >Version 2.4 adds threaded comments.</PopoverDescription
      >
      <PopoverClose>
        <template #render="{ props }">
          <a v-bind="props" href="#">Read the Changelog</a>
        </template>
      </PopoverClose>
    </PopoverContent>
  </Popover>
</template>