✨ awesome progress moving to nuxt ui

fumeapp · Oct 8, 2023 · 55d138f · 55d138f
1 parent 985eb01
commit 55d138f
Show file tree

Hide file tree

Showing 37 changed files with 9,177 additions and 8,220 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,4 @@
+{
+  "root": true,
+  "extends": ["@antfu"]
+}
diff --git a/.eslintrc.js b/.eslintrc.js
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,4 +1,10 @@
 {
+  "files.associations": {
+      "*.css": "tailwindcss"
+  },
+  "editor.quickSuggestions": {
+      "strings": true
+  },
   "prettier.enable": false,
   "editor.formatOnSave": false,
   "editor.codeActionsOnSave": {

diff --git a/app/Http/Controllers/SessionController.php b/app/Http/Controllers/SessionController.php
@@ -14,7 +14,7 @@ class SessionController extends Controller
      */
     public function index(): JsonResponse|Response
     {
-        sleep(1);
+        // sleep(2);
 
         return $this->render(Session::whereUserId(auth()->user()?->id)->get());
     }

diff --git a/client/app.config.ts b/client/app.config.ts
@@ -0,0 +1,26 @@
+export default defineAppConfig({
+  ui: {
+    primary: 'emerald',
+    gray: 'slate',
+    notifications: {
+      // Show toasts at the top right of the screen for desktop
+      // position: 'lg:top-0 lg:right-0 lg:justify-start',
+
+    },
+    button: {
+      default: {
+        loadingIcon: 'i-mdi-loading',
+      },
+    },
+    input: {
+      default: {
+        loadingIcon: 'i-mdi-loading',
+      },
+    },
+    selectMenu: {
+      default: {
+        selectedIcon: 'i-mdi-check-bold',
+      },
+    },
+  }
+})
diff --git a/client/app.vue b/client/app.vue
@@ -0,0 +1,27 @@
+<script lang="ts" setup >
+const color = 'repeating-linear-gradient(to right,#00c893 0%,#9c9ae3 50%,#6667ab 100%)'
+useApi().setNuxtApp(useNuxtApp())
+</script>
+
+<template>
+  <div class="min-h-screen bg-gray-100 dark:bg-gray-900">
+    <nuxt-layout>
+      <header-bar />
+      <layout-bread-crumbs>
+        <u-container>
+          <NuxtLoadingIndicator /> <!-- here -->
+          <nuxt-page />
+        </u-container>
+      </layout-bread-crumbs>
+      <u-notifications>
+        <template #title="{ title }">
+          <span v-html="title" />
+        </template>
+        <template #description="{ description }">
+          <span v-html="description" />
+        </template>
+      </u-notifications>
+      <header-login-modal />
+    </nuxt-layout>
+  </div>
+</template>
diff --git a/client/assets/css/main.css b/client/assets/css/main.css
@@ -13,26 +13,3 @@ p, h1, h2, h3 {
 button {
   @apply bg-transparent;
 }
-
-.skeleton {
-  --text-opacity: 0;
-  background-image: linear-gradient(100deg, #edf2f7 0%, #f4f7fa 20%, #edf2f7 40%);
-  background-position: 50%;
-  background-size: 200%;
-  animation: skeleton 1.25s infinite linear;
-  @apply rounded-md;
-}
-
-.dark .skeleton {
-  background-image: linear-gradient(100deg, #4B5563 0%, #6B7280 20%, #4B5563 40%);
-}
-
-
-@keyframes skeleton {
-  0% {
-    background-position: 50%;
-  }
-  50%, 100% {
-    background-position: -100%
-  }
-}
diff --git a/client/components/contact/ContactCard.vue b/client/components/contact/ContactCard.vue
@@ -12,7 +12,7 @@ const is_admin = computed(() => Math.random() >= 0.5)
 </script>
 
 <template>
-  <li class="col-span-1 bg-white dark:bg-gray-700 rounded-lg shadow">
+  <li class="col-span-1 bg-white dark:bg-gray-950 rounded-lg shadow">
     <div class="w-full flex items-center justify-between p-6 space-x-6">
       <div class="flex-1 truncate">
         <div class="flex items-center space-x-3">
@@ -32,14 +32,14 @@ const is_admin = computed(() => Math.random() >= 0.5)
       </div>
       <img
         v-if="user.avatar"
-        class="w-10 h-10 bg-gray-300 dark:border-gray-600 rounded-full flex-shrink-0"
+        class="w-10 h-10 bg-gray-300 dark:border-gray-800 rounded-full flex-shrink-0"
         :src="user.avatar"
         alt="avatar"
       >
     </div>
-    <div class="border-t border-gray-200 dark:border-gray-500">
+    <div class="border-t border-gray-200 dark:border-gray-800">
       <div class="-mt-px flex">
-        <div class="w-0 flex-1 flex border-r border-gray-200 dark:border-gray-500">
+        <div class="w-0 flex-1 flex border-r border-gray-200 dark:border-gray-800">
           <a
             class="relative -mr-px w-0 flex-1 inline-flex items-center justify-center py-4 text-sm leading-5 text-gray-700 dark:text-gray-200 font-medium border border-transparent rounded-bl-lg transition ease-in-out duration-150 hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10"
             href="#"

diff --git a/client/components/contact/ContactCardSkeleton.vue b/client/components/contact/ContactCardSkeleton.vue
@@ -1,38 +1,30 @@
 <template>
-  <li class="col-span-1 bg-white dark:bg-gray-700 rounded-lg shadow">
+  <li class="col-span-1 bg-white dark:bg-gray-950 rounded-lg shadow">
     <div class="w-full flex items-center justify-between p-6 space-x-6">
       <div class="flex-1 truncate">
         <div class="flex items-center space-x-3">
-          <h3 class="text-gray-900 text-sm leading-5 font-medium truncate skeleton w-32">
-            &nbsp;
-          </h3>
+          <u-skeleton class="w-32 text-sm leading-5 font-medium h-6" />
         </div>
-        <p class="mt-1 text-gray-500 text-sm leading-5 truncate skeleton w-36">
-          &nbsp;
-        </p>
+        <u-skeleton class="mt-1 w-36 h-6" />
       </div>
-      <div class="w-10 h-10 rounded-full flex-shrink-0 overflow-hidden skeleton" />
+      <u-skeleton class="w-10 h-10 rounded-full" />
     </div>
-    <div class="border-t border-gray-200 dark:border-gray-500">
+    <div class="border-t border-gray-200 dark:border-gray-800">
       <div class="-mt-px flex">
-        <div class="w-0 flex-1 flex border-r border-gray-200 dark:border-gray-500">
+        <div class="w-0 flex-1 flex border-r border-gray-200 dark:border-gray-800">
           <a
             class="relative -mr-px w-0 flex-1 inline-flex items-center justify-center py-4 text-sm leading-5 text-gray-700 font-medium border border-transparent rounded-bl-lg transition ease-in-out duration-150 hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10"
             href="#"
           >
-            <div class="skeleton w-20 h-full">
-              &nbsp;
-            </div>
+            <u-skeleton class="w-20 h-full" />
           </a>
         </div>
         <div class="-ml-px w-0 flex-1 flex">
           <a
             class="relative w-0 flex-1 inline-flex items-center justify-center py-4 text-sm leading-5 text-gray-700 font-medium border border-transparent rounded-br-lg transition ease-in-out duration-150 hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10"
             href="#"
           >
-            <div class="skeleton w-20 h-full">
-              &nbsp;
-            </div>
+            <u-skeleton class="w-20 h-full" />
           </a>
         </div>
       </div>

diff --git a/client/components/header/HeaderBar.vue b/client/components/header/HeaderBar.vue
@@ -5,11 +5,11 @@ const route = useRoute()
 const router = useRouter()
 const api = useApi()
 
-const menu = new Menu(route, router, api)
+const menu = new Menu(api)
 </script>
 
 <template>
-  <header class="bg-white dark:bg-gray-800">
+  <header class="bg-white dark:bg-gray-800 h-16">
     <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" aria-label="Top">
       <div class="w-full py-3 flex items-center justify-between border-b border-indigo-500 lg:border-none">
         <div class="flex items-center">

diff --git a/client/components/header/HeaderLoginModal.vue b/client/components/header/HeaderLoginModal.vue
@@ -1,14 +1,7 @@
 <script lang="ts" setup>
-import type { RouteLocationRaw } from 'vue-router'
-import { useRouter } from 'vue-router'
-import { ModalBase, PushButton } from 'tailvue'
 import type { UserLogin } from '@/types/frontend'
 
-export interface Props {
-  destroyed: () => void
-}
-
-defineProps<Props>()
+const { loginModal, loginModalOff } = useModal()
 
 const emit = defineEmits<{ (event: 'off'): void }>()
 
@@ -29,21 +22,20 @@ async function attempt(): Promise<void> {
   loading.attempt = false
   if (!result)
     return
-  api.$toast.show({
-    type: 'success',
-    title: 'Login E-mail Sent',
-    message: `Login link sent to <b>${email.value}</b>`,
+  useToast().add({
+    color: 'green',
+    title: `Login link sent to <b>${email.value}</b>`,
     timeout: 5,
   })
   email.value = ''
-  emit('off')
+  loginModalOff()
 }
 
 const oauthComplete = async (result: UserLogin): Promise<void> => {
   loading[result.provider] = false
   const redirect = await api.login(result)
-  await router.push(redirect as RouteLocationRaw)
-  emit('off')
+  navigateTo(redirect)
+  loginModalOff()
 }
 
 function messageHandler(add: boolean): void {
@@ -56,7 +48,7 @@ function handleMessage(event: { data: UserLogin }): void {
   if (event.data.user && event.data.token)
     oauthComplete(event.data)
   if (event.data.error)
-    api.$toast.show({ type: 'danger', message: event.data.error })
+    useToast().add({ color: 'red', title: event.data.error })
 }
 
 function login(provider: 'facebook' | 'google'): void {
@@ -76,43 +68,41 @@ function login(provider: 'facebook' | 'google'): void {
   }, 200)
 }
 
-if (getCurrentInstance() && window) {
-  onMounted(() => messageHandler(true))
-  onBeforeUnmount(() => messageHandler(false))
-}
+onMounted(() => messageHandler(true))
+onBeforeUnmount(() => messageHandler(false))
 </script>
 
 <template>
-  <ModalBase :destroyed="destroyed">
+  <u-modal v-model="loginModal">
     <div class="bg-white dark:bg-gray-800 py-8 px-4 sm:px-10">
       <div class="grid grid-cols-2 gap-3">
         <div>
-          <PushButton class="w-full justify-center" @click="login('google')">
-            <icon
+          <u-button class="w-full justify-center" @click="login('google')" color="white">
+            <u-icon
               v-if="loading.google"
-              icon="gg:spinner-two"
-              class="w-6 h-6 text-indigo-600 animate-spin"
+              name="i-mdi-loading"
+              class="w-6 h-6 animate-spin"
             />
-            <icon
+            <u-icon
               v-else
-              icon="flat-color-icons:google"
+              name="i-mdi-google"
               class="w-6 h-6"
             />
-          </PushButton>
+          </u-button>
         </div>
         <div>
-          <PushButton class="w-full justify-center" @click="login('facebook')">
-            <icon
+          <u-button class="w-full justify-center" @click="login('facebook')" color="white">
+            <u-icon
               v-if="loading.facebook"
-              icon="gg:spinner-two"
-              class="w-6 h-6 text-indigo-600 animate-spin"
+              name="i-mdi-loading"
+              class="w-6 h-6 animate-spin"
             />
-            <icon
+            <u-icon
               v-else
-              icon="logos:facebook"
+              name="i-mdi-facebook"
               class="w-6 h-6"
             />
-          </PushButton>
+          </u-button>
         </div>
       </div>
       <div class="mt-6 relative">
@@ -130,28 +120,27 @@ if (getCurrentInstance() && window) {
         <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
           <icon icon="mdi:envelope" class="w-5 h-5 text-gray-400" />
         </div>
-        <input
+        <u-input
           id="login_email"
           ref="input"
           v-model="email"
-          class="form-input appearance-none block dark:bg-gray-600 w-full px-3 py-2 pl-10 border border-gray-300 dark:border-gray-500 rounded-md placeholder-gray-400 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5"
           :readonly="loading.attempt"
           placeholder="email@address.com"
           type="email"
           @keydown.esc="off"
           @keydown.enter="attempt"
-        >
+        />
       </div>
       <div class="mt-6">
         <span class="block w-full rounded-md shadow-sm">
-          <PushButton theme="indigo" class="w-full justify-center" @click="attempt">
+          <u-button theme="indigo" class="w-full justify-center" @click="attempt">
             Sign in / Register
             <div v-if="loading.attempt" class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
               <icon icon="gg:spinner-two" class="w-5 h-5 text-indigo-200 animate-spin" />
             </div>
-          </PushButton>
+          </u-button>
         </span>
       </div>
     </div>
-  </ModalBase>
+  </u-modal>
 </template>
diff --git a/client/components/header/HeaderProfile.vue b/client/components/header/HeaderProfile.vue
@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import { onClickOutside } from '@vueuse/core'
-import { PushButton } from 'tailvue'
 import Menu from '@/lib/menu'
 
 const route = useRoute()
@@ -11,9 +9,9 @@ const modal = ref(false)
 const profile = ref(false)
 const outside = ref(null)
 
-const menu = new Menu(route, router, api)
+const { loginModalOn } = useModal()
 
-onClickOutside(outside, () => profile.value = false)
+const menu = new Menu(route, router, api)
 
 const toggle = () => profile.value = !profile.value
 const login = () => modal.value = true
@@ -24,9 +22,9 @@ const off = () => modal.value = false
   <div ref="outside" class="flex-shrink-0 relative mr-5">
     <client-only>
       <div class="flex items-center text-white space-x-4">
-        <PushButton v-if="!api.loggedIn.value" theme="indigo" @click="login">
+        <u-button v-if="!api.loggedIn.value" theme="indigo" @click="loginModalOn">
           Sign In
-        </PushButton>
+        </u-button>
         <button
           v-else
           id="user-menu-button"

diff --git a/client/components/layout/LayoutBreadCrumbs.vue b/client/components/layout/LayoutBreadCrumbs.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { PushButton } from 'tailvue'
 const { list, actions } = useCrumbs()
 </script>
 
@@ -52,10 +51,7 @@ const { list, actions } = useCrumbs()
           :to="action.to"
           class="flex text-xs"
         >
-          <PushButton size="xs">
-            <icon :icon="action.icon" class="w-4 h-4 mr-2.5" />
-            {{ action.name }}
-          </PushButton>
+          <u-button size="xs" :icon="action.icon" :label="action.name" />
         </router-link>
       </div>
     </nav>