Merge branch 'dev' and recreate lock file

.yarnrc.yml

@@ -4,4 +4,4 @@ plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
     spec: "@yarnpkg/plugin-interactive-tools"
 
-yarnPath: .yarn/releases/yarn-3.3.0.cjs
+yarnPath: .yarn/releases/yarn-3.3.1.cjs

package.json

@@ -52,12 +52,12 @@
     "@heroicons/vue": "2.0.13",
     "@nuxt/module-builder": "0.2.1",
     "@nuxtjs/eslint-config-typescript": "12.0.0",
-    "@nuxtjs/tailwindcss": "6.1.3",
-    "@semantic-release/changelog": "6.0.1",
+    "@nuxtjs/tailwindcss": "6.2.0",
+    "@semantic-release/changelog": "6.0.2",
     "@semantic-release/git": "10.0.1",
-    "eslint": "8.27.0",
+    "eslint": "8.31.0",
     "nuxt": "3.0.0",
     "semantic-release": "19.0.5"
   },
-  "packageManager": "[email protected].0"
+  "packageManager": "[email protected].1"
 }

playground/app.vue

@@ -1,67 +1,136 @@
 <template>
-  <div class="w-72">
-    <HeadlessListbox v-model="selectedPerson">
-      <div class="relative mt-1">
-        <HeadlessListboxButton
-          class="relative w-full cursor-default rounded-lg bg-white py-2 pl-3 pr-10 text-left shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm"
-        >
-          <span class="block truncate">{{ selectedPerson.name }}</span>
-          <span
-            class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
+  <div>
+    <div class="w-72">
+      <HeadlessListbox v-model="selectedPerson">
+        <div class="relative mt-1">
+          <HeadlessListboxButton
+            class="relative w-full cursor-default rounded-lg bg-white py-2 pl-3 pr-10 text-left shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm"
           >
-            <ChevronUpDownIcon
-              class="h-5 w-5 text-gray-400"
-              aria-hidden="true"
-            />
-          </span>
-        </HeadlessListboxButton>
+            <span class="block truncate">{{ selectedPerson.name }}</span>
+            <span
+              class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
+            >
+              <ChevronUpDownIcon
+                class="h-5 w-5 text-gray-400"
+                aria-hidden="true"
+              />
+            </span>
+          </HeadlessListboxButton>
 
-        <transition
-          leave-active-class="transition duration-100 ease-in"
-          leave-from-class="opacity-100"
-          leave-to-class="opacity-0"
-        >
-          <HeadlessListboxOptions
-            class="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
+          <transition
+            leave-active-class="transition duration-100 ease-in"
+            leave-from-class="opacity-100"
+            leave-to-class="opacity-0"
           >
-            <HeadlessListboxOption
-              v-for="person in people"
-              v-slot="{ active, selected }"
-              :key="person.name"
-              :value="person"
-              as="template"
+            <HeadlessListboxOptions
+              class="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
             >
-              <li
-                :class="[
-                  active ? 'bg-amber-100 text-amber-900' : 'text-gray-900',
-                  'relative cursor-default select-none py-2 pl-10 pr-4',
-                ]"
+              <HeadlessListboxOption
+                v-for="person in people"
+                v-slot="{ active, selected }"
+                :key="person.name"
+                :value="person"
+                as="template"
               >
-                <span
+                <li
                   :class="[
-                    selected ? 'font-medium' : 'font-normal',
-                    'block truncate',
+                    active ? 'bg-amber-100 text-amber-900' : 'text-gray-900',
+                    'relative cursor-default select-none py-2 pl-10 pr-4',
                   ]"
-                >{{ person.name }}</span>
-                <span
-                  v-if="selected"
-                  class="absolute inset-y-0 left-0 flex items-center pl-3 text-amber-600"
                 >
-                  <CheckIcon class="h-5 w-5" aria-hidden="true" />
-                </span>
-              </li>
-            </HeadlessListboxOption>
-          </HeadlessListboxOptions>
-        </transition>
-      </div>
-    </HeadlessListbox>
+                  <span
+                    :class="[
+                      selected ? 'font-medium' : 'font-normal',
+                      'block truncate',
+                    ]"
+                  >{{ person.name }}</span>
+                  <span
+                    v-if="selected"
+                    class="absolute inset-y-0 left-0 flex items-center pl-3 text-amber-600"
+                  >
+                    <CheckIcon class="h-5 w-5" aria-hidden="true" />
+                  </span>
+                </li>
+              </HeadlessListboxOption>
+            </HeadlessListboxOptions>
+          </transition>
+        </div>
+      </HeadlessListbox>
+    </div>
+
+    <div class="fixed inset-0 flex items-center justify-center">
+      <button
+        type="button"
+        class="rounded-md bg-black bg-opacity-20 px-4 py-2 text-sm font-medium text-white hover:bg-opacity-30 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75"
+        @click="openModal"
+      >
+        Open dialog
+      </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"
+          >
+            <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"
+            >
+              <HeadlessDialogPanel
+                class="w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all"
+              >
+                <HeadlessDialogTitle
+                  as="h3"
+                  class="text-lg font-medium leading-6 text-gray-900"
+                >
+                  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>
+      </HeadlessDialog>
+    </HeadlessTransitionRoot>
   </div>
 </template>
 
 <script setup>
 import { ref } from 'vue'
 import { CheckIcon, ChevronUpDownIcon } from '@heroicons/vue/20/solid'
 
+// ListBox
 const people = [
   { name: 'Wade Cooper' },
   { name: 'Arlene Mccoy' },
@@ -71,4 +140,14 @@ const people = [
   { name: 'Hellen Schmidt' }
 ]
 const selectedPerson = ref(people[0])
+
+// Dialog
+const isOpen = ref(false)
+
+function closeModal () {
+  isOpen.value = false
+}
+function openModal () {
+  isOpen.value = true
+}
 </script>

src/module.ts

@@ -5,97 +5,116 @@ export interface ModuleOptions {
   prefix: string
 }
 
-const headlessComponents = [
+interface ComponentGroup {
+  relativePath: string
+  chunkName: string
+  exports: string[]
+  mode: 'client' | 'server' | 'all'
+}
+
+const headlessComponents: ComponentGroup[] = [
   {
     relativePath: 'combobox/combobox.js',
-    chunkName: 'headless-ui/combobox',
+    chunkName: 'headlessui/combobox',
     exports: [
       'Combobox',
       'ComboboxLabel',
       'ComboboxButton',
       'ComboboxInput',
       'ComboboxOptions',
       'ComboboxOption'
-    ]
+    ],
+    mode: 'all'
   },
   {
     relativePath: 'dialog/dialog.js',
-    chunkName: 'headless-ui/dialog',
+    chunkName: 'headlessui/dialog',
     exports: [
       'Dialog',
       'DialogOverlay',
       'DialogBackdrop',
       'DialogPanel',
       'DialogTitle',
       'DialogDescription'
-    ]
+    ],
+    mode: 'client'
   },
   {
     relativePath: 'disclosure/disclosure.js',
-    chunkName: 'headless-ui/disclosure',
-    exports: ['Disclosure', 'DisclosureButton', 'DisclosurePanel']
+    chunkName: 'headlessui/disclosure',
+    exports: ['Disclosure', 'DisclosureButton', 'DisclosurePanel'],
+    mode: 'all'
   },
   {
     relativePath: 'focus-trap/focus-trap.js',
-    chunkName: 'headless-ui/focus-trap',
-    exports: ['FocusTrap']
+    chunkName: 'headlessui/focus-trap',
+    exports: ['FocusTrap'],
+    mode: 'all'
   },
   {
     relativePath: 'listbox/listbox.js',
-    chunkName: 'headless-ui/listbox',
+    chunkName: 'headlessui/listbox',
     exports: [
       'Listbox',
       'ListboxLabel',
       'ListboxButton',
       'ListboxOptions',
       'ListboxOption'
-    ]
+    ],
+    mode: 'all'
   },
   {
     relativePath: 'menu/menu.js',
-    chunkName: 'headless-ui/menu',
-    exports: ['Menu', 'MenuButton', 'MenuItems', 'MenuItem']
+    chunkName: 'headlessui/menu',
+    exports: ['Menu', 'MenuButton', 'MenuItems', 'MenuItem'],
+    mode: 'all'
   },
   {
     relativePath: 'popover/popover.js',
-    chunkName: 'headless-ui/popover',
+    chunkName: 'headlessui/popover',
     exports: [
       'Popover',
       'PopoverButton',
       'PopoverOverlay',
       'PopoverPanel',
       'PopoverGroup'
-    ]
+    ],
+    mode: 'client'
   },
   {
     relativePath: 'portal/portal.js',
-    chunkName: 'headless-ui/portal',
-    exports: ['Portal', 'PortalGroup']
+    chunkName: 'headlessui/portal',
+    exports: ['Portal', 'PortalGroup'],
+    mode: 'client'
   },
   {
     relativePath: 'radio-group/radio-group.js',
-    chunkName: 'headless-ui/radio-group',
+    chunkName: 'headlessui/radio-group',
     exports: [
       'RadioGroup',
       'RadioGroupOption',
       'RadioGroupLabel',
       'RadioGroupDescription'
-    ]
+    ],
+    mode: 'all'
   },
   {
     relativePath: 'switch/switch.js',
-    chunkName: 'headless-ui/switch',
-    exports: ['SwitchGroup', 'Switch', 'SwitchLabel', 'SwitchDescription']
+    chunkName: 'headlessui/switch',
+    exports: ['SwitchGroup', 'Switch', 'SwitchLabel', 'SwitchDescription'],
+    mode: 'all'
   },
   {
     relativePath: 'tabs/tabs.js',
-    chunkName: 'headless-ui/tabs',
-    exports: ['TabGroup', 'TabList', 'Tab', 'TabPanels', 'TabPanel']
+    chunkName: 'headlessui/tabs',
+    exports: ['TabGroup', 'TabList', 'Tab', 'TabPanels', 'TabPanel'],
+    mode: 'all'
   },
   {
     relativePath: 'transitions/transition.js',
-    chunkName: 'headless-ui/transition',
-    exports: ['TransitionChild', 'TransitionRoot']
+    chunkName: 'headlessui/transition',
+    exports: ['TransitionChild', 'TransitionRoot'],
+    mode: 'all'
   }
 ]
 
@@ -127,7 +146,7 @@ export default defineNuxtModule<ModuleOptions>({
             export: e,
             filePath: join(root, group.relativePath),
             chunkName: group.chunkName,
-            mode: 'all'
+            mode: group.mode
           }
         )
       }