ESLint: Update <script setup lang="ts"> on .vue

resources/js/App.vue

@@ -3,8 +3,8 @@
     <AuthModal v-if="authStore.isOpen" :mode="authStore.authMode" />
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { onMounted, watch, inject } from "vue";
 import { useAuthStore } from "@/stores/auth";
 import AuthModal from "@/components/AuthModal.vue";
 
@@ -23,7 +23,7 @@
     try {
         await authStore.hasSessionExpired();
     } catch (error) {
         console.error("Error in App setup:", error);
     }
 });
 </script>

resources/js/components/AccountCard.vue

@@ -90,8 +90,8 @@
     </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { computed } from "vue";
 
 const props = defineProps({
     account: {
@@ -120,11 +120,11 @@
     }
 };
 
 const onImageError = (event) => {
     event.target.src = "/storage/avatars/default.jpg";
 };
 
 const formatCount = (count) => {
     if (count >= 1000000) {
         return (count / 1000000).toFixed(1) + "M";
     } else if (count >= 1000) {

resources/js/components/AlertModal.vue

@@ -69,7 +69,7 @@
                             <p
                                 :id="bodyId"
                                 class="text-gray-600 dark:text-gray-300"
                                 v-html="body"
                             ></p>
                         </div>
 
@@ -79,10 +79,10 @@
                             <button
                                 v-for="(action, index) in actions"
                                 :key="index"
                                 :class="getButtonClasses(action.type)"
                                 @click="handleAction(action)"
                                 class="px-4 py-2 text-sm font-medium rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-800 cursor-pointer"
                                 v-html="action.text"
                             ></button>
                         </div>
                     </div>
@@ -92,8 +92,8 @@
     </Teleport>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, onMounted, onUnmounted, computed } from "vue";
 
 const props = defineProps({
     title: {
@@ -140,7 +140,7 @@
     () => `alert-modal-body-${Math.random().toString(36).substr(2, 9)}`,
 );
 
 const getButtonClasses = (type) => {
     const baseClasses =
         "px-4 py-2 text-sm font-medium rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-800";
 
@@ -157,7 +157,7 @@
     }
 };
 
 const handleAction = (action) => {
     if (action.callback && typeof action.callback === "function") {
         action.callback();
     }

resources/js/components/AnimatedButton.vue

@@ -46,7 +46,7 @@
     </component>
 </template>
 
-<script>
+<script lang="ts">
 import { computed } from "vue";
 
 export default {

resources/js/components/Auth/Login.vue

@@ -43,7 +43,7 @@
     </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref } from "vue";
 
 const authStore = inject("authStore");

resources/js/components/Auth/TwoFactorInput.vue

@@ -34,7 +34,7 @@
     </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, computed, watch, nextTick, onMounted, onUnmounted } from "vue";
 
 const props = defineProps({
@@ -87,7 +87,7 @@
 
     if (isComplete.value) {
         emit("complete", newCode);
         if (props.autoSubmit) {
         }
     }
 });

resources/js/components/AuthModal.vue

@@ -844,7 +844,7 @@
     </Teleport>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, computed, watch, nextTick, inject } from "vue";
 import { useAuthStore } from "~/stores/auth";
 import CloudflareTurnstile from "@/components/Captcha/CloudflareTurnstile.vue";
@@ -1078,7 +1078,7 @@
     loading.value = true;
 
     try {
         let data = {
             email: form.value.email,
             captcha_type: form.value.captcha_type,
             captcha_token: form.value.captcha_token,

resources/js/components/Captcha/CloudflareTurnstile.vue

@@ -2,7 +2,7 @@
     <div ref="turnstileRef" class="cf-turnstile"></div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, onMounted, onUnmounted } from "vue";
 
 const props = defineProps({

resources/js/components/Captcha/HCaptcha.vue

@@ -11,7 +11,7 @@
     ></div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, onMounted, onUnmounted } from "vue";
 
 const props = defineProps({

resources/js/components/DataTable.vue

@@ -173,7 +173,7 @@
     </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, watch } from "vue";
 import {
     MagnifyingGlassIcon,

resources/js/components/ErrorDisplay.vue

@@ -39,7 +39,7 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
 export default {
     name: "ErrorDisplay",
 
@@ -76,7 +76,7 @@
                         return "The content you're looking for could not be found";
                     case 403:
                         return "You don't have permission to access this content";
                     case 401:
                         return "Please log in to continue";
                     case 429:
                         return "Too many requests. Please try again later";

resources/js/components/Feed/ReportVideo.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { ref, onMounted } from "vue";
 
 const props = defineProps({

resources/js/components/Feed/ShareModal.vue

@@ -48,7 +48,7 @@
                             </div>
 
                             <div class="mt-6 grid grid-cols-4 gap-x-4 gap-y-6">
                                 <div
                                     v-for="provider in shareProviders"
                                     class="flex flex-col items-center gap-1"
                                 >
@@ -96,7 +96,7 @@
         </Teleport>
     </div>
 </template>
-<script setup>
+<script setup lang="ts">
 import { ref, computed } from "vue";
 import UrlCopyInput from "../Form/UrlCopyInput.vue";
 import { useI18n } from "vue-i18n";
@@ -130,7 +130,7 @@
 
 const { t } = useI18n();
 
 const title = computed(() => {
     if (props.type === "video") {
         return t("common.shareThisLoop");
     } else if (props.type === "profile") {

resources/js/components/Feed/SnapScrollFeed.vue

@@ -56,7 +56,7 @@
     </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import {
     ref,
     computed,

resources/js/components/Feed/VideoPlayer.vue

@@ -538,7 +538,7 @@
     </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import {
     ref,
     onMounted,

resources/js/components/Form/EmojiPicker.vue

@@ -20,7 +20,7 @@
     </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref } from "vue";
 import { Picker } from "emoji-mart-vue-fast/src";
 import { useEmojiStore } from "@/stores/emojiStore";

resources/js/components/Form/TextInput.vue

@@ -16,7 +16,7 @@
     </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { onMounted, computed } from "vue";
 
 const props = defineProps({

resources/js/components/Form/ToggleSwitch.vue

@@ -18,7 +18,7 @@
     </button>
 </template>
 
-<script setup>
+<script setup lang="ts">
 defineProps({
     modelValue: Boolean,
 });

resources/js/components/Form/UrlCopyInput.vue

@@ -19,7 +19,7 @@
     </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref } from "vue";
 
 const props = defineProps({

resources/js/components/Layout/Header.vue

@@ -448,7 +448,7 @@
     </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, onMounted, inject, nextTick } from "vue";
 import { useRouter } from "vue-router";
 import { useSearchStore } from "@/stores/search";

resources/js/components/Layout/LanguagePicker.vue

@@ -139,7 +139,7 @@
     </Teleport>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted } from "vue";
 import { useI18n } from "vue-i18n";
 

resources/js/components/Layout/LoginModal.vue

@@ -35,7 +35,7 @@
     </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, inject } from "vue";
 import Login from "@/components/Login.vue";
 import Register from "@/components/Register.vue";

resources/js/components/Layout/NotificationsDropdown.vue

@@ -156,7 +156,7 @@
     </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { useNotificationStore } from "~/stores/notifications";
 import { useNotifications } from "~/composables/useNotifications";

resources/js/components/Layout/Sidebar.vue

@@ -210,7 +210,7 @@
     </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { inject, ref, computed, onMounted, onUnmounted } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useAuthStore } from "@/stores/auth";
@@ -335,7 +335,7 @@
 });
 
 const footerLinks = computed(() => {
     let links = [
         { name: t("nav.about"), path: "/about" },
         { name: t("nav.contact"), path: "/contact" },
         { name: t("nav.community"), path: "/community-guidelines" },

resources/js/components/Layout/SidebarNavItem.vue

@@ -22,7 +22,7 @@
     </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { computed, ref, onMounted, onUnmounted } from "vue";
 
 defineProps({

resources/js/components/Layout/SidebarProfileCard.vue

@@ -28,7 +28,7 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
 export default {
     props: {
         user: {

resources/js/components/Layout/StudioHeader.vue

@@ -85,7 +85,7 @@
     </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, onMounted, inject, nextTick } from "vue";
 import { useRouter } from "vue-router";
 import { useSearchStore } from "@/stores/search";

resources/js/components/Layout/StudioSidebar.vue

@@ -85,7 +85,7 @@
     </aside>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, onMounted, onUnmounted, computed } from "vue";
 import { useRouter, useRoute } from "vue-router";
 

resources/js/components/Layout/ThemeToggleButton.vue

@@ -7,7 +7,7 @@
     </button>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref } from "vue";
 import { SunIcon, MoonIcon } from "@heroicons/vue/24/outline";
 

resources/js/components/LoadingSpinner.vue

@@ -6,7 +6,7 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
 export default {
     name: "LoadingSpinner",
 };

resources/js/components/Login.vue

@@ -80,7 +80,7 @@
     </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, inject } from "vue";
 
 const authStore = inject("authStore");

resources/js/components/NotificationItem.vue

@@ -76,7 +76,7 @@
     </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { computed } from "vue";
 import { useRouter } from "vue-router";
 import {

resources/js/components/Profile/EditModal.vue

@@ -291,7 +291,7 @@
     </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, computed, watch, onMounted } from "vue";
 import { useRoute } from "vue-router";
 import { Cropper, CircleStencil } from "vue-advanced-cropper";

resources/js/components/Profile/FollowersModal.vue

@@ -208,7 +208,7 @@
     </Teleport>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, watch, computed } from "vue";
 import { storeToRefs } from "pinia";
 import { useInfiniteScroll } from "@vueuse/core";

resources/js/components/Profile/ProfileHeader.vue

@@ -221,7 +221,7 @@
     </Teleport>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, watch, onMounted, onUnmounted, computed } from "vue";
 import { useAuthStore } from "~/stores/auth";
 import { useProfileStore } from "~/stores/profile";

resources/js/components/Profile/ProfileTabBar.vue

@@ -48,7 +48,7 @@
     </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, computed } from "vue";
 
 const props = defineProps({

resources/js/components/Profile/ProfileVideoCard.vue

@@ -53,7 +53,7 @@
     </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useHashids } from "@/composables/useHashids";

resources/js/components/Register.vue

@@ -59,9 +59,9 @@
     </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 let name = ref(null);
 let email = ref(null);
 let password = ref(null);
 let confirmPassword = ref(null);
 let errors = ref(null);

resources/js/components/ReportModal.vue

@@ -209,7 +209,7 @@
     </Teleport>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { useReportModal } from "@/composables/useReportModal";
 import { useI18n } from "vue-i18n";
 const { t } = useI18n();

resources/js/components/Settings/Sidebar.vue

@@ -23,7 +23,7 @@
     </aside>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref } from "vue";
 import SidebarItem from "./SidebarItem.vue";
 import { useI18n } from "vue-i18n";

resources/js/components/Settings/SidebarItem.vue

@@ -13,7 +13,7 @@
     </router-link>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { computed } from "vue";
 import { useRoute } from "vue-router";
 const route = useRoute();

resources/js/components/Status/CommentItem.vue

@@ -270,7 +270,7 @@
     </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, onMounted, onUnmounted, computed, inject } from "vue";
 import { useAuthStore } from "@/stores/auth";
 import { useCommentStore } from "@/stores/comments";

resources/js/components/Status/Comments.vue

@@ -107,7 +107,7 @@
     </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, computed, watch, inject, nextTick } from "vue";
 import { useAuthStore } from "@/stores/auth";
 import { useCommentStore } from "@/stores/comments";

resources/js/components/Status/EditModal.vue

@@ -147,7 +147,7 @@
     </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, watch, computed } from "vue";
 import { XMarkIcon, ExclamationTriangleIcon } from "@heroicons/vue/24/outline";
 import { useAlertModal } from "@/composables/useAlertModal.js";