Drop headlessui

README.md

@@ -28,7 +28,6 @@ https://github.com/ledermann/templatus-hotwire/
 - [Vue Router 4](https://next.router.vuejs.org/) for frontend routing
 - [Pinia](https://pinia.esm.dev/) for frontend state management
 - [Tailwind CSS 3](https://tailwindcss.com/) to not have to write CSS at all
-- [HeadlessUI](https://headlessui.dev/) unstyled, fully accessible UI components designed to integrate with Tailwind CSS
 - [Heroicons](https://heroicons.com/) for SVG icons as Vue components
 - [Rails Request.JS](https://github.com/rails/request.js) for AJAX requests with default headers
 
@@ -99,10 +98,9 @@ https://github.com/rails/rails/pull/41994
 
 ### JavaScript size
 
-150 KB of compiled JavaScript (after tree-shaking, minified & uncompressed). The largest parts are:
+143 KB of compiled JavaScript (after tree-shaking, minified & uncompressed). The largest parts are:
 
 - Vue.js + Vue Router (75 KB)
-- Headless UI (10 KB)
 - Honeybadger (23 KB)
 - ActionCable (9 KB)
 - Pinia (6 KB)
@@ -116,20 +114,20 @@ success Already up-to-date.
 Building with Vite ⚡️
 vite v2.9.9 building for production...
 transforming...
-✓ 334 modules transformed.
+✓ 294 modules transformed.
 rendering chunks...
 ../../public/vite/assets/logo.44ced38d.svg          0.48 KiB
 ../../public/vite/manifest-assets.json              0.22 KiB
 ../../public/vite/manifest.json                     0.20 KiB
 ../../public/vite/assets/application.ab5cb427.css   20.16 KiB / gzip: 4.70 KiB
-../../public/vite/assets/application.1990fd78.js    149.92 KiB / gzip: 56.15 KiB
-../../public/vite/assets/application.1990fd78.js.map 994.81 KiB
+../../public/vite/assets/application.a2479141.js    143.16 KiB / gzip: 53.83 KiB
+../../public/vite/assets/application.a2479141.js.map 986.78 KiB
 Build with Vite complete: /Users/ledermann/Projects/templatus/public/vite
 ```
 
 ### Network transfer
 
-Small footprint: The demo application transfers only **65 KB** of data on the first visit.
+Small footprint: The demo application transfers only **62 KB** of data on the first visit.
 
 ![Network](docs/network.png)
 

app/javascript/src/components/AppHeader.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { TabGroup, TabList, Tab } from '@headlessui/vue';
 import logoPath from '../../images/logo.svg';
 
 const tabs: {
@@ -23,25 +22,22 @@ const tabs: {
       height="150"
     />
 
-    <TabGroup>
-      <TabList
-        class="flex space-x-5 text-center text-lg font-medium uppercase lg:flex-col lg:space-y-5 lg:space-x-0"
-        as="nav"
+    <nav
+      class="flex space-x-5 text-center text-lg font-medium uppercase lg:flex-col lg:space-y-5 lg:space-x-0"
+    >
+      <router-link
+        v-for="tab in tabs"
+        :key="tab.name"
+        :to="tab.href"
+        :class="[
+          tab.href == $route.path
+            ? 'bg-white text-rails-dark lg:bg-rails-dark lg:text-white'
+            : 'bg-transparent text-white hover:bg-slate-300 hover:text-rails-dark lg:bg-white lg:text-rails-dark',
+          'rounded-md px-2 py-1 lg:shadow',
+        ]"
       >
-        <Tab v-for="tab in tabs" :key="tab.name" as="template">
-          <router-link
-            :to="tab.href"
-            :class="[
-              tab.href == $route.path
-                ? 'bg-white text-rails-dark lg:bg-rails-dark lg:text-white'
-                : 'bg-transparent text-white hover:bg-slate-300 hover:text-rails-dark lg:bg-white lg:text-rails-dark',
-              'rounded-md px-2 py-1 lg:shadow',
-            ]"
-          >
-            {{ tab.name }}
-          </router-link>
-        </Tab>
-      </TabList>
-    </TabGroup>
+        {{ tab.name }}
+      </router-link>
+    </nav>
   </header>
 </template>

app/javascript/src/pages/AboutPage.vue

@@ -94,12 +94,6 @@ const features: {
         description:
           'Intuitive, type safe, light and flexible Store for Vue using the composition api with DevTools support',
       },
-      {
-        name: 'HeadlessUI',
-        href: 'https://headlessui.dev/',
-        description:
-          'Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.',
-      },
       {
         name: 'Heroicons',
         href: 'https://heroicons.com/',

package.json

@@ -7,7 +7,6 @@
     "tsc": "vue-tsc --noEmit"
   },
   "dependencies": {
-    "@headlessui/vue": "^1.6.4",
     "@heroicons/vue": "^1.0.6",
     "@honeybadger-io/vue": "^3.1.0",
     "@rails/actioncable": "^7.0.3",

spec/javascript/src/__snapshots__/App.test.ts.snap

@@ -21,8 +21,7 @@ exports[`App matches snapshot 1`] = `
     <polygon fill="url(#grad2)" points="0,80 0,100 100,100 100,50"></polygon>
   </svg>
   <header class="flex items-end justify-between space-x-5 p-5 lg:flex-col lg:items-stretch lg:space-y-36 lg:space-x-0 lg:p-0 lg:fixed lg:top-10 lg:left-10"><img src="[object Object]" alt="Logo" class="h-20 w-20 rounded bg-gradient-to-br from-slate-200 to-white p-3 lg:h-56 lg:w-56" width="150" height="150">
-    <!---->
-    <nav role="tablist" aria-orientation="horizontal" class="flex space-x-5 text-center text-lg font-medium uppercase lg:flex-col lg:space-y-5 lg:space-x-0"><a href="/" class="router-link-active router-link-exact-active bg-white text-rails-dark lg:bg-rails-dark lg:text-white rounded-md px-2 py-1 lg:shadow" id="headlessui-tabs-tab-1" role="tab" aria-selected="true" tabindex="0" aria-current="page">Home</a><a href="/about" class="bg-transparent text-white hover:bg-slate-300 hover:text-rails-dark lg:bg-white lg:text-rails-dark rounded-md px-2 py-1 lg:shadow" id="headlessui-tabs-tab-2" role="tab" aria-selected="false" tabindex="-1">About</a></nav>
+    <nav class="flex space-x-5 text-center text-lg font-medium uppercase lg:flex-col lg:space-y-5 lg:space-x-0"><a href="/" class="router-link-active router-link-exact-active bg-white text-rails-dark lg:bg-rails-dark lg:text-white rounded-md px-2 py-1 lg:shadow" aria-current="page">Home</a><a href="/about" class="bg-transparent text-white hover:bg-slate-300 hover:text-rails-dark lg:bg-white lg:text-rails-dark rounded-md px-2 py-1 lg:shadow">About</a></nav>
   </header>
   <main class="relative flex-1 bg-white py-5 px-4 shadow-md sm:px-6 lg:mt-10 lg:mr-16 lg:ml-96 lg:max-w-5xl lg:rounded-xl lg:px-8">Home page</main>
   <footer class="flex flex-wrap items-end justify-between space-y-2 px-4 text-sm text-white sm:px-6 lg:px-0 relative mt-2 mb-6 lg:mr-16 lg:ml-96 lg:max-w-5xl lg:px-0">

spec/javascript/src/pages/__snapshots__/About.test.ts.snap

@@ -123,16 +123,6 @@ exports[`About matches snapshot 1`] = `
             </dt>
             <dd class="mt-2 ml-9 text-base text-gray-600">Intuitive, type safe, light and flexible Store for Vue using the composition api with DevTools support</dd>
           </div>
-          <div class="relative">
-            <dt><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true" class="absolute h-6 w-6 text-vue">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path>
-              </svg>
-              <p class="ml-9 flex items-center text-lg font-medium leading-6 text-rails-dark"><a href="https://headlessui.dev/" class="hover:underline" target="_blank" rel="noopener noreferrer">HeadlessUI</a>
-                <!--v-if-->
-              </p>
-            </dt>
-            <dd class="mt-2 ml-9 text-base text-gray-600">Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.</dd>
-          </div>
           <div class="relative">
             <dt><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true" class="absolute h-6 w-6 text-vue">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path>