From f6883677f5778d286fb781bee246d5fb9ec4f4fb Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Mon, 21 Sep 2020 11:31:07 +0200
Subject: [PATCH] add Menu examples in Vue

---
 .../src/components/menu/menu-with-popper.vue  | 81 +++++-----------
 .../menu/menu-with-transition-and-popper.vue  | 92 +++++++++++++++++++
 ...-tailwind.vue => menu-with-transition.vue} | 50 ++++------
 .../examples/src/components/menu/menu.vue     | 84 +++++++++++++++++
 .../examples/src/hooks/use-popper.js          | 23 +++++
 .../@headlessui-vue/examples/src/routes.json  | 16 +++-
 6 files changed, 257 insertions(+), 89 deletions(-)
 create mode 100644 packages/@headlessui-vue/examples/src/components/menu/menu-with-transition-and-popper.vue
 rename packages/@headlessui-vue/examples/src/components/menu/{menu-with-tailwind.vue => menu-with-transition.vue} (66%)
 create mode 100644 packages/@headlessui-vue/examples/src/components/menu/menu.vue
 create mode 100644 packages/@headlessui-vue/examples/src/hooks/use-popper.js

diff --git a/packages/@headlessui-vue/examples/src/components/menu/menu-with-popper.vue b/packages/@headlessui-vue/examples/src/components/menu/menu-with-popper.vue
index 6192580..9dc8b0b 100644
--- a/packages/@headlessui-vue/examples/src/components/menu/menu-with-popper.vue
+++ b/packages/@headlessui-vue/examples/src/components/menu/menu-with-popper.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex justify-center w-screen h-full p-12 bg-gray-50">
-    <div class="relative inline-block text-left">
+    <div class="relative inline-block mt-64 text-left">
       <Menu>
         <span class="inline-flex rounded-md shadow-sm">
           <MenuButton
@@ -18,40 +18,31 @@
           </MenuButton>
         </span>
 
-        <transition
-          enter-active-class="transition-opacity duration-100 ease-out"
-          enter-from-class="transform scale-95 opacity-0"
-          enter-to-class="transform scale-100 opacity-100"
-          leave-active-class="transition-opacity duration-75 ease-out"
-          leave-from-class="transform scale-100 opacity-100"
-          leave-to-class="transform scale-95 opacity-0"
+        <MenuItems
+          ref="popper"
+          class="absolute right-0 w-56 origin-top-right bg-white border border-gray-200 divide-y divide-gray-100 rounded-md shadow-lg outline-none"
         >
-          <MenuItems
-            ref="popper"
-            class="absolute right-0 w-56 origin-top-right bg-white border border-gray-200 divide-y divide-gray-100 rounded-md shadow-lg outline-none"
-          >
-            <div class="px-4 py-3">
-              <p class="text-sm leading-5">Signed in as</p>
-              <p class="text-sm font-medium leading-5 text-gray-900 truncate">tom@example.com</p>
-            </div>
+          <div class="px-4 py-3">
+            <p class="text-sm leading-5">Signed in as</p>
+            <p class="text-sm font-medium leading-5 text-gray-900 truncate">tom@example.com</p>
+          </div>
 
-            <div class="py-1">
-              <MenuItem as="a" :className="resolveClass" href="#account-settings">
-                Account Settings
-              </MenuItem>
-              <MenuItem v-slot="data">
-                <a href="#support" :class="resolveClass(data)">Support</a>
-              </MenuItem>
-              <MenuItem as="a" :className="resolveClass" disabled href="#new-feature">
-                New feature (soon)
-              </MenuItem>
-              <MenuItem as="a" :className="resolveClass" href="#license">License</MenuItem>
-            </div>
-            <div class="py-1">
-              <MenuItem as="a" :className="resolveClass" href="#sign-out">Sign out</MenuItem>
-            </div>
-          </MenuItems>
-        </transition>
+          <div class="py-1">
+            <MenuItem as="a" :className="resolveClass" href="#account-settings">
+              Account Settings
+            </MenuItem>
+            <MenuItem v-slot="data">
+              <a href="#support" :class="resolveClass(data)">Support</a>
+            </MenuItem>
+            <MenuItem as="a" :className="resolveClass" disabled href="#new-feature">
+              New feature (soon)
+            </MenuItem>
+            <MenuItem as="a" :className="resolveClass" href="#license">License</MenuItem>
+          </div>
+          <div class="py-1">
+            <MenuItem as="a" :className="resolveClass" href="#sign-out">Sign out</MenuItem>
+          </div>
+        </MenuItems>
       </Menu>
     </div>
   </div>
@@ -59,35 +50,13 @@
 
 <script>
 import { defineComponent, h, ref, onMounted, watchEffect, watch } from 'vue'
-
-import { createPopper } from '@popperjs/core'
+import { usePopper } from '../../hooks/use-popper'
 import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue'
 
 function classNames(...classes) {
   return classes.filter(Boolean).join(' ')
 }
 
-function usePopper(options) {
-  const reference = ref(null)
-  const popper = ref(null)
-
-  onMounted(() => {
-    watchEffect(onInvalidate => {
-      const popperEl = popper.value.el || popper.value
-      const referenceEl = reference.value.el || reference.value
-
-      if (!(referenceEl instanceof HTMLElement)) return
-      if (!(popperEl instanceof HTMLElement)) return
-
-      const { destroy } = createPopper(referenceEl, popperEl, options)
-
-      onInvalidate(destroy)
-    })
-  })
-
-  return [reference, popper]
-}
-
 export default {
   components: { Menu, MenuButton, MenuItems, MenuItem },
   setup(props, context) {
diff --git a/packages/@headlessui-vue/examples/src/components/menu/menu-with-transition-and-popper.vue b/packages/@headlessui-vue/examples/src/components/menu/menu-with-transition-and-popper.vue
new file mode 100644
index 0000000..9f75bce
--- /dev/null
+++ b/packages/@headlessui-vue/examples/src/components/menu/menu-with-transition-and-popper.vue
@@ -0,0 +1,92 @@
+<template>
+  <div class="flex justify-center w-screen h-full p-12 bg-gray-50">
+    <div class="relative inline-block mt-64 text-left">
+      <Menu>
+        <span class="inline-flex rounded-md shadow-sm">
+          <MenuButton
+            ref="reference"
+            class="inline-flex justify-center w-full px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out bg-white border border-gray-300 rounded-md hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800"
+          >
+            <span>Options</span>
+            <svg class="w-5 h-5 ml-2 -mr-1" viewBox="0 0 20 20" fill="currentColor">
+              <path
+                fillRule="evenodd"
+                d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                clipRule="evenodd"
+              />
+            </svg>
+          </MenuButton>
+        </span>
+
+        <div ref="popper" class="w-56">
+          <transition
+            enter-active-class="transition duration-100 ease-out"
+            enter-from-class="transform scale-95 opacity-0"
+            enter-to-class="transform scale-100 opacity-100"
+            leave-active-class="transition duration-75 ease-out"
+            leave-from-class="transform scale-100 opacity-100"
+            leave-to-class="transform scale-95 opacity-0"
+          >
+            <MenuItems
+              class="w-full bg-white border border-gray-200 divide-y divide-gray-100 rounded-md shadow-lg outline-none"
+            >
+              <div class="px-4 py-3">
+                <p class="text-sm leading-5">Signed in as</p>
+                <p class="text-sm font-medium leading-5 text-gray-900 truncate">tom@example.com</p>
+              </div>
+
+              <div class="py-1">
+                <MenuItem as="a" :className="resolveClass" href="#account-settings">
+                  Account Settings
+                </MenuItem>
+                <MenuItem v-slot="data">
+                  <a href="#support" :class="resolveClass(data)">Support</a>
+                </MenuItem>
+                <MenuItem as="a" :className="resolveClass" disabled href="#new-feature">
+                  New feature (soon)
+                </MenuItem>
+                <MenuItem as="a" :className="resolveClass" href="#license">License</MenuItem>
+              </div>
+              <div class="py-1">
+                <MenuItem as="a" :className="resolveClass" href="#sign-out">Sign out</MenuItem>
+              </div>
+            </MenuItems>
+          </transition>
+        </div>
+      </Menu>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent, h, ref, onMounted, watchEffect, watch } from 'vue'
+import { usePopper } from '../../hooks/use-popper'
+import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue'
+
+function classNames(...classes) {
+  return classes.filter(Boolean).join(' ')
+}
+
+export default {
+  components: { Menu, MenuButton, MenuItems, MenuItem },
+  setup(props, context) {
+    const [reference, popper] = usePopper({
+      placement: 'bottom-end',
+      strategy: 'fixed',
+      modifiers: [{ name: 'offset', options: { offset: [0, 10] } }],
+    })
+
+    return {
+      reference,
+      popper,
+      resolveClass({ active, disabled }) {
+        return classNames(
+          'flex justify-between w-full px-4 py-2 text-sm leading-5 text-left',
+          active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+          disabled && 'cursor-not-allowed opacity-50'
+        )
+      },
+    }
+  },
+}
+</script>
diff --git a/packages/@headlessui-vue/examples/src/components/menu/menu-with-tailwind.vue b/packages/@headlessui-vue/examples/src/components/menu/menu-with-transition.vue
similarity index 66%
rename from packages/@headlessui-vue/examples/src/components/menu/menu-with-tailwind.vue
rename to packages/@headlessui-vue/examples/src/components/menu/menu-with-transition.vue
index 862f458..e6e5f48 100644
--- a/packages/@headlessui-vue/examples/src/components/menu/menu-with-tailwind.vue
+++ b/packages/@headlessui-vue/examples/src/components/menu/menu-with-transition.vue
@@ -34,13 +34,17 @@
             </div>
 
             <div class="py-1">
-              <CustomMenuItem href="#account-settings">Account Settings</CustomMenuItem>
-              <CustomMenuItem href="#support">Support</CustomMenuItem>
-              <CustomMenuItem disabled href="#new-feature">New feature (soon)</CustomMenuItem>
-              <CustomMenuItem href="#license">License</CustomMenuItem>
+              <MenuItem as="a" :className="resolveClass" href="#account-settings">
+                Account Settings
+              </MenuItem>
+              <MenuItem as="a" :className="resolveClass" href="#support">Support</MenuItem>
+              <MenuItem as="a" disabled :className="resolveClass" href="#new-feature">
+                New feature (soon)
+              </MenuItem>
+              <MenuItem as="a" :className="resolveClass" href="#license">License</MenuItem>
             </div>
             <div class="py-1">
-              <CustomMenuItem href="#sign-out">Sign out</CustomMenuItem>
+              <MenuItem as="a" :className="resolveClass" href="#sign-out">Sign out</MenuItem>
             </div>
           </MenuItems>
         </transition>
@@ -57,37 +61,23 @@ function classNames(...classes) {
   return classes.filter(Boolean).join(' ')
 }
 
-const CustomMenuItem = defineComponent({
-  components: { Menu, MenuButton, MenuItems, MenuItem },
-  setup(props, { slots }) {
-    return () => {
-      return h(MenuItem, ({ active, disabled }) => {
-        return h(
-          'a',
-          {
-            class: classNames(
-              'flex justify-between w-full text-left px-4 py-2 text-sm leading-5',
-              active ? 'bg-indigo-500 text-white' : 'text-gray-700',
-              disabled && 'cursor-not-allowed opacity-50'
-            ),
-          },
-          [
-            h('span', { class: classNames(active && 'font-bold') }, slots.default()),
-            h('kbd', { class: classNames('font-sans', active && 'text-indigo-50') }, '⌘K'),
-          ]
-        )
-      })
-    }
-  },
-})
-
 export default {
   components: {
     Menu,
     MenuButton,
     MenuItems,
     MenuItem,
-    CustomMenuItem,
+  },
+  setup() {
+    return {
+      resolveClass({ active, disabled }) {
+        return classNames(
+          'flex justify-between w-full px-4 py-2 text-sm leading-5 text-left',
+          active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+          disabled && 'cursor-not-allowed opacity-50'
+        )
+      },
+    }
   },
 }
 </script>
diff --git a/packages/@headlessui-vue/examples/src/components/menu/menu.vue b/packages/@headlessui-vue/examples/src/components/menu/menu.vue
new file mode 100644
index 0000000..dca0394
--- /dev/null
+++ b/packages/@headlessui-vue/examples/src/components/menu/menu.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="flex justify-center w-screen h-full p-12 bg-gray-50">
+    <div class="relative inline-block text-left">
+      <Menu>
+        <span class="rounded-md shadow-sm">
+          <MenuButton
+            class="inline-flex justify-center w-full px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out bg-white border border-gray-300 rounded-md hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800"
+          >
+            <span>Options</span>
+            <svg class="w-5 h-5 ml-2 -mr-1" viewBox="0 0 20 20" fill="currentColor">
+              <path
+                fillRule="evenodd"
+                d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                clipRule="evenodd"
+              />
+            </svg>
+          </MenuButton>
+        </span>
+
+        <MenuItems
+          class="absolute right-0 w-56 mt-2 origin-top-right bg-white border border-gray-200 divide-y divide-gray-100 rounded-md shadow-lg outline-none"
+        >
+          <div class="px-4 py-3">
+            <p class="text-sm leading-5">Signed in as</p>
+            <p class="text-sm font-medium leading-5 text-gray-900 truncate">tom@example.com</p>
+          </div>
+
+          <div class="py-1">
+            <CustomMenuItem href="#account-settings">Account Settings</CustomMenuItem>
+            <CustomMenuItem href="#support">Support</CustomMenuItem>
+            <CustomMenuItem disabled href="#new-feature">New feature (soon)</CustomMenuItem>
+            <CustomMenuItem href="#license">License</CustomMenuItem>
+          </div>
+          <div class="py-1">
+            <CustomMenuItem href="#sign-out">Sign out</CustomMenuItem>
+          </div>
+        </MenuItems>
+      </Menu>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent, h } from 'vue'
+import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue'
+
+function classNames(...classes) {
+  return classes.filter(Boolean).join(' ')
+}
+
+const CustomMenuItem = defineComponent({
+  components: { Menu, MenuButton, MenuItems, MenuItem },
+  setup(props, { slots }) {
+    return () => {
+      return h(MenuItem, ({ active, disabled }) => {
+        return h(
+          'a',
+          {
+            class: classNames(
+              'flex justify-between w-full text-left px-4 py-2 text-sm leading-5',
+              active ? 'bg-indigo-500 text-white' : 'text-gray-700',
+              disabled && 'cursor-not-allowed opacity-50'
+            ),
+          },
+          [
+            h('span', { class: classNames(active && 'font-bold') }, slots.default()),
+            h('kbd', { class: classNames('font-sans', active && 'text-indigo-50') }, '⌘K'),
+          ]
+        )
+      })
+    }
+  },
+})
+
+export default {
+  components: {
+    Menu,
+    MenuButton,
+    MenuItems,
+    MenuItem,
+    CustomMenuItem,
+  },
+}
+</script>
diff --git a/packages/@headlessui-vue/examples/src/hooks/use-popper.js b/packages/@headlessui-vue/examples/src/hooks/use-popper.js
new file mode 100644
index 0000000..3d74296
--- /dev/null
+++ b/packages/@headlessui-vue/examples/src/hooks/use-popper.js
@@ -0,0 +1,23 @@
+import { ref, onMounted, watchEffect } from 'vue'
+import { createPopper } from '@popperjs/core'
+
+export function usePopper(options) {
+  const reference = ref(null)
+  const popper = ref(null)
+
+  onMounted(() => {
+    watchEffect(onInvalidate => {
+      const popperEl = popper.value.el || popper.value
+      const referenceEl = reference.value.el || reference.value
+
+      if (!(referenceEl instanceof HTMLElement)) return
+      if (!(popperEl instanceof HTMLElement)) return
+
+      const { destroy } = createPopper(referenceEl, popperEl, options)
+
+      onInvalidate(destroy)
+    })
+  })
+
+  return [reference, popper]
+}
diff --git a/packages/@headlessui-vue/examples/src/routes.json b/packages/@headlessui-vue/examples/src/routes.json
index 844cfc1..8e533da 100644
--- a/packages/@headlessui-vue/examples/src/routes.json
+++ b/packages/@headlessui-vue/examples/src/routes.json
@@ -7,15 +7,25 @@
     "name": "Menu",
     "path": "/menu",
     "children": [
+      {
+        "name": "Menu (basic)",
+        "path": "/menu/menu",
+        "component": "./components/menu/menu.vue"
+      },
       {
         "name": "Menu with Popper",
         "path": "/menu/menu-with-popper",
         "component": "./components/menu/menu-with-popper.vue"
       },
       {
-        "name": "Menu with Tailwind",
-        "path": "/menu/menu-with-tailwind",
-        "component": "./components/menu/menu-with-tailwind.vue"
+        "name": "Menu with Transition",
+        "path": "/menu/menu-with-transition",
+        "component": "./components/menu/menu-with-transition.vue"
+      },
+      {
+        "name": "Menu with Popper + Transition",
+        "path": "/menu/menu-with-transition-and-popper",
+        "component": "./components/menu/menu-with-transition-and-popper.vue"
       }
     ]
   }