Popover

<script setup lang="ts">
import { reactive } from "vue";
import { Button } from "@/components/orvui/motion/button";
import { Popover, PopoverTrigger, PopoverContent } from "@/components/orvui/motion/popover";
const dimensions = reactive([
  { label: "Width", value: "100%" },
  { label: "Height", value: "auto" },
]);
</script>
<template>
  <div class="flex flex-wrap items-center justify-center gap-4">
    <Popover side="bottom" align="start"
      ><PopoverTrigger
        ><Button variant="secondary">Edit profile</Button></PopoverTrigger
      ><PopoverContent class="w-72"
        ><p class="text-sm font-medium text-foreground">Dimensions</p>
        <p class="mt-1 text-xs text-muted-foreground">
          Set the width and height for the layer.
        </p>
        <div class="mt-3 flex flex-col gap-2">
          <label
            v-for="dimension in dimensions"
            :key="dimension.label"
            class="flex items-center justify-between gap-3 text-sm"
            ><span class="text-muted-foreground">{{ dimension.label }}</span
            ><input
              v-model="dimension.value"
              class="h-8 w-32 rounded-lg border border-border bg-background px-2.5 text-sm text-foreground outline-none focus-visible:ring-2 focus-visible:ring-foreground/20"
          /></label></div></PopoverContent></Popover
    ><Popover trigger="hover" side="top"
      ><PopoverTrigger
        ><Button variant="outline">Hover me</Button></PopoverTrigger
      ><PopoverContent class="w-56"
        ><p class="text-sm text-foreground">
          Opens on hover, with a grace window so you can move into the panel.
        </p></PopoverContent
      ></Popover
    >
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ChevronDown, Copy, Pencil, Share2, Trash2 } from "lucide-vue-next";
import {
  MorphPopover,
  MorphPopoverTrigger,
  MorphPopoverContent,
} from "@/components/orvui/motion/popover";
const expanded = ref(false);
const actions = [
  ["Edit", Pencil],
  ["Duplicate", Copy],
  ["Share", Share2],
  ["Delete", Trash2],
].map(([label, icon]) => ({ label: label as string, icon }));
function choose() {
  expanded.value = false;
}
</script>
<template>
  <MorphPopover v-model:open="expanded"
    ><MorphPopoverTrigger
      ><button
        type="button"
        class="inline-flex h-10 items-center gap-2 rounded-xl border border-border bg-background px-4 text-sm font-medium text-foreground outline-none transition-colors hover:border-border-strong focus-visible:ring-2 focus-visible:ring-ring"
      >
        Options<ChevronDown
          class="h-4 w-4 text-muted-foreground"
        /></button></MorphPopoverTrigger
    ><MorphPopoverContent align="start" class="w-48 p-1.5"
      ><button
        v-for="action in actions"
        :key="action.label"
        type="button"
        @click="choose"
        class="flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-left text-sm text-foreground outline-none transition-colors hover:bg-muted focus-visible:bg-muted"
      >
        <component :is="action.icon" class="h-4 w-4 text-muted-foreground" />{{
          action.label
        }}
      </button></MorphPopoverContent
    ></MorphPopover
  >
</template>