fix: revert „feat: make portal, popover, and Dialog client components“

#18 Closes #20
P4sca1 · Jan 9, 2023 · c71eaa1 · c71eaa1
1 parent 362ea83
commit c71eaa1
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 74 deletions.
diff --git a/playground/app.vue b/playground/app.vue
@@ -68,60 +68,62 @@
       </button>
     </div>
     <HeadlessTransitionRoot appear :show="isOpen">
-      <HeadlessDialog as="div" class="relative z-10" @close="closeModal">
-        <HeadlessTransitionChild
-          enter="duration-300 ease-out"
-          enter-from="opacity-0"
-          enter-to="opacity-100"
-          leave="duration-200 ease-in"
-          leave-from="opacity-100"
-          leave-to="opacity-0"
-        >
-          <div class="fixed inset-0 bg-black bg-opacity-25" />
-        </HeadlessTransitionChild>
-
-        <div class="fixed inset-0 overflow-y-auto">
-          <div
-            class="flex min-h-full items-center justify-center p-4 text-center"
+      <ClientOnly>
+        <HeadlessDialog as="div" class="relative z-10" @close="closeModal">
+          <HeadlessTransitionChild
+            enter="duration-300 ease-out"
+            enter-from="opacity-0"
+            enter-to="opacity-100"
+            leave="duration-200 ease-in"
+            leave-from="opacity-100"
+            leave-to="opacity-0"
           >
-            <HeadlessTransitionChild
-              enter="duration-300 ease-out"
-              enter-from="opacity-0 scale-95"
-              enter-to="opacity-100 scale-100"
-              leave="duration-200 ease-in"
-              leave-from="opacity-100 scale-100"
-              leave-to="opacity-0 scale-95"
+            <div class="fixed inset-0 bg-black bg-opacity-25" />
+          </HeadlessTransitionChild>
+
+          <div class="fixed inset-0 overflow-y-auto">
+            <div
+              class="flex min-h-full items-center justify-center p-4 text-center"
             >
-              <HeadlessDialogPanel
-                class="w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all"
+              <HeadlessTransitionChild
+                enter="duration-300 ease-out"
+                enter-from="opacity-0 scale-95"
+                enter-to="opacity-100 scale-100"
+                leave="duration-200 ease-in"
+                leave-from="opacity-100 scale-100"
+                leave-to="opacity-0 scale-95"
               >
-                <HeadlessDialogTitle
-                  as="h3"
-                  class="text-lg font-medium leading-6 text-gray-900"
+                <HeadlessDialogPanel
+                  class="w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all"
                 >
-                  Payment successful
-                </HeadlessDialogTitle>
-                <div class="mt-2">
-                  <p class="text-sm text-gray-500">
-                    Your payment has been successfully submitted. We’ve sent you
-                    an email with all of the details of your order.
-                  </p>
-                </div>
-
-                <div class="mt-4">
-                  <button
-                    type="button"
-                    class="inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
-                    @click="closeModal"
+                  <HeadlessDialogTitle
+                    as="h3"
+                    class="text-lg font-medium leading-6 text-gray-900"
                   >
-                    Got it, thanks!
-                  </button>
-                </div>
-              </HeadlessDialogPanel>
-            </HeadlessTransitionChild>
+                    Payment successful
+                  </HeadlessDialogTitle>
+                  <div class="mt-2">
+                    <p class="text-sm text-gray-500">
+                      Your payment has been successfully submitted. We’ve sent you
+                      an email with all of the details of your order.
+                    </p>
+                  </div>
+
+                  <div class="mt-4">
+                    <button
+                      type="button"
+                      class="inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
+                      @click="closeModal"
+                    >
+                      Got it, thanks!
+                    </button>
+                  </div>
+                </HeadlessDialogPanel>
+              </HeadlessTransitionChild>
+            </div>
           </div>
-        </div>
-      </HeadlessDialog>
+        </HeadlessDialog>
+      </ClientOnly>
     </HeadlessTransitionRoot>
   </div>
 </template>

diff --git a/src/module.ts b/src/module.ts
@@ -9,7 +9,6 @@ interface ComponentGroup {
   relativePath: string
   chunkName: string
   exports: string[]
-  mode: 'client' | 'server' | 'all'
 }
 
 const headlessComponents: ComponentGroup[] = [
@@ -23,8 +22,7 @@ const headlessComponents: ComponentGroup[] = [
       'ComboboxInput',
       'ComboboxOptions',
       'ComboboxOption'
-    ],
-    mode: 'all'
+    ]
   },
   {
     relativePath: 'dialog/dialog.js',
@@ -36,20 +34,18 @@ const headlessComponents: ComponentGroup[] = [
       'DialogPanel',
       'DialogTitle',
       'DialogDescription'
-    ],
-    mode: 'client'
+    ]
   },
   {
     relativePath: 'disclosure/disclosure.js',
     chunkName: 'headlessui/disclosure',
-    exports: ['Disclosure', 'DisclosureButton', 'DisclosurePanel'],
-    mode: 'all'
+    exports: ['Disclosure', 'DisclosureButton', 'DisclosurePanel']
+
   },
   {
     relativePath: 'focus-trap/focus-trap.js',
     chunkName: 'headlessui/focus-trap',
-    exports: ['FocusTrap'],
-    mode: 'all'
+    exports: ['FocusTrap']
   },
   {
     relativePath: 'listbox/listbox.js',
@@ -60,14 +56,13 @@ const headlessComponents: ComponentGroup[] = [
       'ListboxButton',
       'ListboxOptions',
       'ListboxOption'
-    ],
-    mode: 'all'
+    ]
   },
   {
     relativePath: 'menu/menu.js',
     chunkName: 'headlessui/menu',
-    exports: ['Menu', 'MenuButton', 'MenuItems', 'MenuItem'],
-    mode: 'all'
+    exports: ['Menu', 'MenuButton', 'MenuItems', 'MenuItem']
+
   },
   {
     relativePath: 'popover/popover.js',
@@ -78,14 +73,12 @@ const headlessComponents: ComponentGroup[] = [
       'PopoverOverlay',
       'PopoverPanel',
       'PopoverGroup'
-    ],
-    mode: 'client'
+    ]
   },
   {
     relativePath: 'portal/portal.js',
     chunkName: 'headlessui/portal',
-    exports: ['Portal', 'PortalGroup'],
-    mode: 'client'
+    exports: ['Portal', 'PortalGroup']
   },
   {
     relativePath: 'radio-group/radio-group.js',
@@ -95,26 +88,22 @@ const headlessComponents: ComponentGroup[] = [
       'RadioGroupOption',
       'RadioGroupLabel',
       'RadioGroupDescription'
-    ],
-    mode: 'all'
+    ]
   },
   {
     relativePath: 'switch/switch.js',
     chunkName: 'headlessui/switch',
-    exports: ['SwitchGroup', 'Switch', 'SwitchLabel', 'SwitchDescription'],
-    mode: 'all'
+    exports: ['SwitchGroup', 'Switch', 'SwitchLabel', 'SwitchDescription']
   },
   {
     relativePath: 'tabs/tabs.js',
     chunkName: 'headlessui/tabs',
-    exports: ['TabGroup', 'TabList', 'Tab', 'TabPanels', 'TabPanel'],
-    mode: 'all'
+    exports: ['TabGroup', 'TabList', 'Tab', 'TabPanels', 'TabPanel']
   },
   {
     relativePath: 'transitions/transition.js',
     chunkName: 'headlessui/transition',
-    exports: ['TransitionChild', 'TransitionRoot'],
-    mode: 'all'
+    exports: ['TransitionChild', 'TransitionRoot']
   }
 ]
 
@@ -146,7 +135,7 @@ export default defineNuxtModule<ModuleOptions>({
             export: e,
             filePath: join(root, group.relativePath),
             chunkName: group.chunkName,
-            mode: group.mode
+            mode: 'all'
           }
         )
       }