Popover

Displays rich content in a portal, triggered by a button.

Preview

<script setup lang="ts">
import {
  Popover,
  PopoverTrigger,
  PopoverContent,
} from "~/components/ui/popover";
import { Button } from "~/components/ui/button";
import { Label } from "~/components/ui/label";
import { Input } from "~/components/ui/input";
</script>

<template>
  <Popover closeOnInteractOutside>
    <PopoverTrigger>
      <Button variant="outline">Open popover</Button>
    </PopoverTrigger>
    <PopoverContent class="w-80">
      <div class="grid gap-4">
        <div class="space-y-2">
          <h4 class="font-medium leading-none">Dimensions</h4>
          <p class="text-sm text-muted-foreground">
            Set the dimensions for the layer.
          </p>
        </div>
        <div class="grid gap-2">
          <div class="grid grid-cols-3 items-center gap-4">
            <Label for="width">Width</Label>
            <Input id="width" value="100%" class="col-span-2 h-8" />
          </div>
          <div class="grid grid-cols-3 items-center gap-4">
            <Label for="maxWidth">Max. width</Label>
            <Input id="maxWidth" value="300px" class="col-span-2 h-8" />
          </div>
          <div class="grid grid-cols-3 items-center gap-4">
            <Label for="height">Height</Label>
            <Input id="height" value="25px" class="col-span-2 h-8" />
          </div>
          <div class="grid grid-cols-3 items-center gap-4">
            <Label for="maxHeight">Max. height</Label>
            <Input id="maxHeight" value="none" class="col-span-2 h-8" />
          </div>
        </div>
      </div>
    </PopoverContent>
  </Popover>
</template>

Installation

Copy and paste this into your project

// ~/components/ui/popover.tsx

import {
  Popover as PopoverPrimitive,
  PopoverContent as PopoverContentPrimitive,
  PopoverPositioner,
  PopoverTrigger,
  PopoverProps,
} from "@ark-ui/vue";
import { ExtendProps, cn } from "~/lib/utils";
import { defineComponent, onMounted, ref } from "vue";

const Popover = defineComponent({
  props: {} as ExtendProps<PopoverProps>,
  setup(_, { slots }) {
    const key = ref("ssr");
    onMounted(() => {
      key.value = "csr";
    });
    return () => (
      <PopoverPrimitive key={key.value}>{slots.default?.()}</PopoverPrimitive>
    );
  },
});

const PopoverContent = defineComponent({
  setup(_, { slots, attrs }) {
    return () => (
      <PopoverPositioner>
        <PopoverContentPrimitive
          class={cn(
            "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
            attrs.class ?? ""
          )}
        >
          {slots.default?.()}
        </PopoverContentPrimitive>
      </PopoverPositioner>
    );
  },
});

export { Popover, PopoverContent, PopoverPositioner, PopoverTrigger };

Usage

import {
  Popover,
  PopoverTrigger,
  PopoverContent,
} from "~/components/ui/popover";

<Popover>
  <PopoverTrigger>
    <button>Open Popover</button>
  </PopoverTrigger>
  <PopoverContent>
    <div class="p-4">Popover content</div>
  </PopoverContent>
</Popover>