add Popover example

packages/@headlessui-vue/examples/src/components/popover/popover.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="flex justify-center items-center space-x-12 p-12">
+    <button>Previous</button>
+
+    <PopoverGroup as="nav" ar-label="Mythical University" class="flex space-x-3">
+      <Popover as="div" class="relative" v-slot="{ open }">
+        <PopoverButton
+          class="px-3 py-2 bg-gray-300 border-2 border-transparent focus:outline-none focus:border-blue-900"
+          >Normal</PopoverButton
+        >
+        <PopoverPanel class="absolute flex flex-col w-64 bg-gray-100 border-2 border-blue-900">
+          <a
+            v-for="(link, i) of links"
+            :hidden="i === 2"
+            href="/"
+            class="px-3 py-2 border-2 border-transparent hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:border-blue-900"
+          >
+            Normal - {{ link }}
+          </a>
+        </PopoverPanel>
+      </Popover>
+
+      <Popover as="div" class="relative">
+        <PopoverButton
+          class="px-3 py-2 bg-gray-300 border-2 border-transparent focus:outline-none focus:border-blue-900"
+          >Focus</PopoverButton
+        >
+        <PopoverPanel
+          focus
+          class="absolute flex flex-col w-64 bg-gray-100 border-2 border-blue-900"
+        >
+          <a
+            v-for="(link, i) of links"
+            href="/"
+            class="px-3 py-2 border-2 border-transparent hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:border-blue-900"
+          >
+            Focus - {{ link }}
+          </a>
+        </PopoverPanel>
+      </Popover>
+
+      <Popover as="div" class="relative">
+        <PopoverButton
+          class="px-3 py-2 bg-gray-300 border-2 border-transparent focus:outline-none focus:border-blue-900"
+          >Portal</PopoverButton
+        >
+        <Portal>
+          <PopoverPanel class="flex flex-col w-64 bg-gray-100 border-2 border-blue-900">
+            <a
+              v-for="(link, i) of links"
+              href="/"
+              class="px-3 py-2 border-2 border-transparent hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:border-blue-900"
+            >
+              Portal - {{ link }}
+            </a>
+          </PopoverPanel>
+        </Portal>
+      </Popover>
+
+      <Popover as="div" class="relative">
+        <PopoverButton
+          class="px-3 py-2 bg-gray-300 border-2 border-transparent focus:outline-none focus:border-blue-900"
+          >Focus in portal</PopoverButton
+        >
+        <Portal>
+          <PopoverPanel focus class="flex flex-col w-64 bg-gray-100 border-2 border-blue-900">
+            <a
+              v-for="(link, i) of links"
+              href="/"
+              class="px-3 py-2 border-2 border-transparent hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:border-blue-900"
+            >
+              Focus in Portal - {{ link }}
+            </a>
+          </PopoverPanel>
+        </Portal>
+      </Popover>
+    </PopoverGroup>
+
+    <button>Next</button>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+import { Popover, PopoverOverlay, PopoverPanel, PopoverGroup, PopoverButton } from '@headlessui/vue'
+function html(templates) {
+  return templates.join('')
+}
+
+export default {
+  components: {
+    Popover,
+    PopoverPanel,
+    PopoverOverlay,
+    PopoverGroup,
+    PopoverButton,
+  },
+  setup() {
+    let links = ['First', 'Second', 'Third', 'Fourth']
+    return { links }
+  },
+}
+</script>

packages/@headlessui-vue/examples/src/routes.json

@@ -82,5 +82,16 @@
         "component": "./components/portal/portal.vue"
       }
     ]
+  },
+  {
+    "name": "Popover",
+    "path": "/popover",
+    "children": [
+      {
+        "name": "Popover",
+        "path": "/popover/popover",
+        "component": "./components/popover/popover.vue"
+      }
+    ]
   }
 ]