add more Vue examples

tailwindlabs · Apr 29, 2021 · 82db7bb · 82db7bb
1 parent 769b9d2
commit 82db7bb
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 4 deletions.
diff --git a/packages/@headlessui-vue/examples/src/components/dialog/dialog.vue b/packages/@headlessui-vue/examples/src/components/dialog/dialog.vue
@@ -8,7 +8,7 @@
   </button>
 
   <TransitionRoot :show="isOpen" as="template">
-    <Dialog :open="isOpen" @close="setIsOpen" static>
+    <Dialog @close="setIsOpen">
       <div class="fixed z-10 inset-0 overflow-y-auto">
         <div
           class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
@@ -74,7 +74,7 @@
                         permanently removed. This action cannot be undone.
                       </p>
                       <div class="relative inline-block text-left mt-10">
-                        <Menu v-slot="{ open }">
+                        <Menu>
                           <span class="rounded-md shadow-sm">
                             <MenuButton
                               ref="trigger"
@@ -95,9 +95,16 @@
                             </MenuButton>
                           </span>
 
-                          <Portal v-if="open">
+                              <TransitionRoot
+                                enter="transition duration-300 ease-out"
+                                enterFrom="transform scale-95 opacity-0"
+                                enterTo="transform scale-100 opacity-100"
+                                leave="transition duration-75 ease-out"
+                                leaveFrom="transform scale-100 opacity-100"
+                                leaveTo="transform scale-95 opacity-0"
+                              >
+                          <Portal>
                             <MenuItems
-                              static
                               ref="container"
                               class="z-20 w-56 mt-2 origin-top-right bg-white border border-gray-200 divide-y divide-gray-100 rounded-md shadow-lg outline-none"
                             >
@@ -135,6 +142,7 @@
                               </div>
                             </MenuItems>
                           </Portal>
+                              </TransitionRoot>
                         </Menu>
                       </div>
                     </div>

diff --git a/packages/@headlessui-vue/examples/src/components/disclosure/disclosure.vue b/packages/@headlessui-vue/examples/src/components/disclosure/disclosure.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="flex justify-center w-screen h-full p-12 bg-gray-50">
+    <div class="w-full max-w-xs mx-auto">
+      <Disclosure>
+        <DisclosureButton>Trigger</DisclosureButton>
+
+        <TransitionRoot
+          enter="transition duration-1000 ease-out"
+          enterFrom="transform scale-95 opacity-0"
+          enterTo="transform scale-100 opacity-100"
+          leave="transition duration-1000 ease-out"
+          leaveFrom="transform scale-100 opacity-100"
+          leaveTo="transform scale-95 opacity-0"
+        >
+          <DisclosurePanel class="p-4 bg-white mt-4">Content</DisclosurePanel>
+        </TransitionRoot>
+      </Disclosure>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Disclosure, DisclosureButton, DisclosurePanel, TransitionRoot } from '@headlessui/vue'
+
+export default {
+  components: {
+    Disclosure,
+    DisclosureButton,
+    DisclosurePanel,
+    TransitionRoot,
+  },
+}
+</script>
diff --git a/packages/@headlessui-vue/examples/src/routes.json b/packages/@headlessui-vue/examples/src/routes.json
@@ -94,6 +94,17 @@
       }
     ]
   },
+  {
+    "name": "Disclosure",
+    "path": "/disclosure",
+    "children": [
+      {
+        "name": "Disclosure",
+        "path": "/disclosure/disclosure",
+        "component": "./components/disclosure/disclosure.vue"
+      }
+    ]
+  },
   {
     "name": "Dialog",
     "path": "/dialog",