wip: broken, renaming files, misc fixes

Author: connorabbas

docker-compose.local.yml

@@ -12,7 +12,7 @@ services:
     labels:
       - "traefik.enable=true"
       - "traefik.http.routers.vue-spa.rule=Host(`vue-spa.localhost`)"
-      - "traefik.http.services.vue-spa.loadbalancer.server.port=${VITE_PORT}"
+      - "traefik.http.services.vue-spa.loadbalancer.server.port=${VITE_APP_PORT}"
     networks:
       - proxy
 

eslint.config.js renamed to eslint.config.ts

@@ -30,4 +30,4 @@ export default [
             },
         },
     ),
-];
+];

package-lock.json

@@ -1,20 +1,12 @@
-<script setup>
-const props = defineProps({
-    fluid: {
-        type: Boolean,
-        default: false,
-        required: false,
-    },
-    vertical: {
-        type: Boolean,
-        default: false,
-        required: false,
-    },
-    flushMobile: {
-        type: Boolean,
-        default: false,
-        required: false,
-    },
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+    fluid?: boolean,
+    vertical?: boolean,
+    flushMobile?: boolean,
+}>(), {
+    fluid: false,
+    vertical: false,
+    flushMobile: false,
 });
 </script>
 
@@ -31,4 +23,4 @@ const props = defineProps({
     >
         <slot />
     </div>
-</template>
+</template>

src/components/Container.vue

@@ -1,14 +1,12 @@
-<script setup>
+<script setup lang="ts">
 import { useTemplateRef } from 'vue';
 import { useRouter } from 'vue-router';
 import { useAuthStore } from '@/stores/auth';
 import { useAxiosForm } from '@/composables/useAxiosForm';
 import { useFlashMessage } from '@/composables/useFlashMessage.js';
 import InputErrors from '@/components/InputErrors.vue';
 
-const modalOpen = defineModel(false, {
-    type: Boolean,
-});
+const modalOpen = defineModel<boolean>({ default: false });
 
 const authStore = useAuthStore();
 const router = useRouter();
@@ -36,8 +34,8 @@ const deleteAccount = () => {
         },
         onError: () => {
             console.error('error');
-            const passwordInputElement = passwordInput.value.$el.querySelector('input');
-            if (passwordInputElement) {
+            if (passwordInput.value && passwordInput.value?.$el) {
+                const passwordInputElement = passwordInput.value.$el.querySelector('input');
                 passwordInputElement.focus();
             }
         },

src/components/DeleteUserModal.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 defineProps({
     errors: {
         type: Array,

src/components/InputErrors.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import ApplicationLogo from '@/components/ApplicationLogo.vue';
 </script>
 
@@ -17,4 +17,4 @@ import ApplicationLogo from '@/components/ApplicationLogo.vue';
             <span class="font-bold">Laravel + PrimeVue Starter Kit</span>
         </RouterLink>
     </Button>
-</template>
+</template>

src/components/NavLogoLink.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { ref, watchEffect, inject } from 'vue';
 import { Sun, Moon, Monitor } from 'lucide-vue-next';
 

src/components/SelectColorModeButton.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { useThemePreset } from '@/composables/useThemePreset';
 
 const { presets, selectedPreset, setPreset } = useThemePreset();