Remove warnings about 'defineProps', 'defineEmits' being compiler macros

src/views/contents/ContentCard.vue

@@ -41,19 +41,19 @@
 
     </div>
 
-    <div> 
+    <div>
 
       <div>
         <h2 class="font-sans font-semibold">Commentaires</h2>
         <message-list :subject-id="props.content.id" :messages="messages">
         </message-list>
       </div>
-      
+
       <div class="border-t-2 border-gray-300 mt-4 pt-4">
         <post-message :subject-id="props.content.id" @message-posted="addMessage">
         </post-message>
       </div>
-      
+
     </div>
 
   </div>
@@ -62,7 +62,7 @@
 
 <script setup>
 
-import {defineProps, computed, reactive} from 'vue';
+import {computed, reactive} from 'vue';
 import {time_ago} from "@/internal_time_ago.js";
 import MessageList from "@/views/messages/MessageList.vue";
 import PostMessage from "@/views/messages/PostMessage.vue";

src/views/contents/ContentList.vue

@@ -4,10 +4,10 @@
                      :onLoad="load">
 
     <template v-for="content in contents">
-        <ContentCard :content="content"
+      <ContentCard :content="content"
-                     class="w-full p-2 my-2"
+                   class="w-full p-2 my-2"
-        >
+      >
-        </ContentCard>
+      </ContentCard>
     </template>
 
     <template v-slot:empty>
@@ -27,7 +27,7 @@
 <script setup>
 
 import {useClient} from '@/plugins/api.js';
-import {defineProps, ref} from 'vue';
+import {ref} from 'vue';
 import ContentCard from "./ContentCard.vue";
 
 const props = defineProps({

src/views/contents/CreatePostButton.vue

@@ -65,7 +65,7 @@
 
 <script setup>
 import {useClient} from '@/plugins/api.js';
-import {defineProps, ref} from 'vue';
+import {ref} from 'vue';
 import {useUserStore} from '@/stores/user.js';
 
 const props = defineProps({

src/views/contents/PostContent.vue

@@ -58,7 +58,7 @@
 // import posts from "@/views/posts/posts.json";
 
 import {useClient} from '@/plugins/api.js';
-import {defineProps, ref} from 'vue';
+import {ref} from 'vue';
 import PostContentMenu from "@/views/contents/PostContentMenu.vue";
 
 const props = defineProps({

src/views/creators/CreatorAboutYou.vue

@@ -86,11 +86,10 @@
 </template>
 
 <script setup>
-import { ref, defineProps } from 'vue';
 import MyUserModel from "@/models/myUserModel.js";
 
 const props = defineProps({
-  user: { type: MyUserModel },
+  user: {type: MyUserModel},
 });
 
 const dateRule = value => {

src/views/creators/CreatorBanner.vue

@@ -82,7 +82,6 @@
 
 <script setup>
 import CreatePostButton from "@/views/contents/CreatePostButton.vue";
-import {defineProps} from "vue";
 import SizeIndicator from "@/views/tools/SizeIndicator.vue";
 import AboutYou from "@/views/creators/CreatorDescriptionBtn.vue";
 

src/views/creators/CreatorCard.vue

@@ -8,7 +8,6 @@
 </template>
 
 <script setup>
-import { defineProps } from 'vue';
 
 defineProps({
   creator: {

src/views/main/DonationPopup.vue

@@ -1,33 +1,33 @@
-<template> 
+<template>
-    <div class="fixed z-50 bottom-6 right-6 flex flex-column">
+  <div class="fixed z-50 bottom-6 right-6 flex flex-column">
-      <div
+    <div
-          v-if="showPopup"
+        v-if="showPopup"
-          ref="popup"
+        ref="popup"
-          class="z-50 shadow-md shadow-gray-500 rounded-2xl"
+        class="z-50 shadow-md shadow-gray-500 rounded-2xl"
-      >
+    >
-        <div class="bg-fuchsia-900 p-4 rounded-t-2xl font-semibold self-center text-white text-center">
+      <div class="bg-fuchsia-900 p-4 rounded-t-2xl font-semibold self-center text-white text-center">
-          Je Soutiens!
+        Je Soutiens!
-        </div>
-        <div class="bg-gray-100 rounded-b-2xl p-4">
-          <div class="mx-2">
-            <StripePayment :creator-id="creatorId"></StripePayment>
-          </div>
-        </div>
       </div>
-
+      <div class="bg-gray-100 rounded-b-2xl p-4">
-      <div
+        <div class="mx-2">
-          @click="togglePopup"
+          <StripePayment :creator-id="creatorId"></StripePayment>
-          ref="popupButton"
+        </div>
-          class="bg-purple rounded-full w-16 h-16 flex justify-center items-center self-end mt-4 cursor-pointer"
-          style="background: radial-gradient(circle, rgba(163,14,121,1) 50%, rgba(107,0,101,1) 100%); border: 2px solid white;"
-      >
-        <v-icon class="text-2xl">mdi-gift-outline</v-icon>
       </div>
     </div>
+
+    <div
+        @click="togglePopup"
+        ref="popupButton"
+        class="bg-purple rounded-full w-16 h-16 flex justify-center items-center self-end mt-4 cursor-pointer"
+        style="background: radial-gradient(circle, rgba(163,14,121,1) 50%, rgba(107,0,101,1) 100%); border: 2px solid white;"
+    >
+      <v-icon class="text-2xl">mdi-gift-outline</v-icon>
+    </div>
+  </div>
 </template>
 
 <script setup>
-import {ref, onMounted, onUnmounted, defineProps} from 'vue';
+import {ref, onMounted, onUnmounted} from 'vue';
 import StripePayment from "@/views/StripePayment.vue";
 
 const showPopup = ref(false);
@@ -35,7 +35,7 @@ const popup = ref(null);
 const popupButton = ref(null);
 
 const props = defineProps({
-  creatorId: { type: String, required: true },
+  creatorId: {type: String, required: true},
 });
 
 

src/views/main/ProfileBanner.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div>
-      <div class="px-5 py-2 bg-fuchsia-800 text-white" :style="{ backgroundColor: user.profileColors.menu }" >
+      <div class="px-5 py-2 bg-fuchsia-800 text-white" :style="{ backgroundColor: user.profileColors.menu }">
         <div class="flex justify-center text-2xl">Photo de couverture</div>
       </div>
       <div>
@@ -61,7 +61,7 @@
             ref="profileImageInput"
             accept=".png, .jpeg, .jpg"
             hint="png, jpeg or jpg"
-            v-model="profilePicture" 
+            v-model="profilePicture"
             label="Téléverser une nouvelle photo de profil"
             @change="onProfileFileChange">
         </v-file-input>
@@ -85,85 +85,85 @@
 </template>
 
 <script setup>
-import {ref, defineProps, onMounted} from 'vue';
+import {ref} from 'vue';
-  import MyUserModel from "@/models/myUserModel.js";
+import MyUserModel from "@/models/myUserModel.js";
-  
-  const emit = defineEmits(["updateProfilePicture", "updateBannerPicture"]);
-  const fallbackProfilePictureUrl = '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png';
-  const fallbackBannerPictureUrl = '/images/usersmedia/HutopyProfile/banners/banner01.png';
 
-  const props = defineProps({
+const emit = defineEmits(["updateProfilePicture", "updateBannerPicture"]);
-    user: { type: MyUserModel },
+const fallbackProfilePictureUrl = '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png';
-  });
+const fallbackBannerPictureUrl = '/images/usersmedia/HutopyProfile/banners/banner01.png';
-  
-  const bannerImageUrl = ref(props.user.storedDataUrls.bannerPictureUrl);
-  const profilePictureUrl = ref(props.user.storedDataUrls.profilePictureUrl);
 
-  const bannerImage = ref(null);
+const props = defineProps({
-  const profilePicture = ref(null);
+  user: {type: MyUserModel},
+});
 
-  const showColorPicker = ref(false);
+const bannerImageUrl = ref(props.user.storedDataUrls.bannerPictureUrl);
-  const selectedColor = ref('#F4F4F4');
+const profilePictureUrl = ref(props.user.storedDataUrls.profilePictureUrl);
-  const colorTarget = ref('');
-  
-  const handleProfileImageError = (event) => {
-    event.target.src = fallbackProfilePictureUrl;
-  }
 
-  const handleBannerImageError = (event) => {
+const bannerImage = ref(null);
-    event.target.src = fallbackBannerPictureUrl;
+const profilePicture = ref(null);
-  }
 
-  const onBannerFileChange = (event) => {
+const showColorPicker = ref(false);
-    const file = event.target.files[0];
+const selectedColor = ref('#F4F4F4');
-    if (file) {
+const colorTarget = ref('');
-      const reader = new FileReader();
+
-      reader.onload = (e) => {
+const handleProfileImageError = (event) => {
+  event.target.src = fallbackProfilePictureUrl;
+}
+
+const handleBannerImageError = (event) => {
+  event.target.src = fallbackBannerPictureUrl;
+}
+
+const onBannerFileChange = (event) => {
+  const file = event.target.files[0];
+  if (file) {
+    const reader = new FileReader();
+    reader.onload = (e) => {
       bannerImageUrl.value = e.target.result;
     };
     reader.readAsDataURL(file);
     emit('updateBannerPicture', file);
-    }
+  }
 };
 
-  const onProfileFileChange = (event) => {
+const onProfileFileChange = (event) => {
-    const file = event.target.files[0];
+  const file = event.target.files[0];
-    if (file) {
+  if (file) {
-      const reader = new FileReader();
+    const reader = new FileReader();
-      reader.onload = (e) => {
+    reader.onload = (e) => {
       profilePictureUrl.value = e.target.result;
     };
     reader.readAsDataURL(file);
     emit('updateProfilePicture', file);
   }
-    
+
 };
 
-  const openColorPicker = (target) => {
+const openColorPicker = (target) => {
   colorTarget.value = target;
   showColorPicker.value = true;
 };
 
-  const applyColor = () => {
+const applyColor = () => {
   if (colorTarget.value === 'top') {
     props.user.profileColors.bannerTop = selectedColor.value;
   } else if (colorTarget.value === 'bottom') {
-      props.user.profileColors.bannerBottom = selectedColor.value;
+    props.user.profileColors.bannerBottom = selectedColor.value;
   } else if (colorTarget.value === 'accent') {
-      props.user.profileColors.accent = selectedColor.value;
+    props.user.profileColors.accent = selectedColor.value;
   } else if (colorTarget.value === 'menu') {
-      props.user.profileColors.menu = selectedColor.value;
+    props.user.profileColors.menu = selectedColor.value;
   }
-    showColorPicker.value = false;
+  showColorPicker.value = false;
-  };
+};
 
-  /// Simple function to determine if the text should be white or black based on the background color
+/// Simple function to determine if the text should be white or black based on the background color
-  const getTextColor = (bgColor) => {
+const getTextColor = (bgColor) => {
-    const color = bgColor.replace('#', '');
+  const color = bgColor.replace('#', '');
-    const r = parseInt(color.substr(0, 2), 16);
+  const r = parseInt(color.substr(0, 2), 16);
-    const g = parseInt(color.substr(2, 2), 16);
+  const g = parseInt(color.substr(2, 2), 16);
-    const b = parseInt(color.substr(4, 2), 16);
+  const b = parseInt(color.substr(4, 2), 16);
-    const brightness = (r * 299 + g * 587 + b * 114) / 1000;
+  const brightness = (r * 299 + g * 587 + b * 114) / 1000;
-    return brightness > 155 ? '#000' : '#fff';
+  return brightness > 155 ? '#000' : '#fff';
-  };
+};
 </script>

src/views/main/SocialLinks.vue

@@ -5,7 +5,8 @@
       <div class="flex justify-between items-center mb-2">
         <label class="text-lg">Instagram</label>
       </div>
-      <v-text-field v-model="props.user.socialNetworks.instagramUrl" label="Instagram" variant="outlined"></v-text-field>
+      <v-text-field v-model="props.user.socialNetworks.instagramUrl" label="Instagram"
+                    variant="outlined"></v-text-field>
 
       <div class="flex justify-between items-center mb-2">
         <label class="text-lg">TikTok</label>
@@ -30,16 +31,17 @@
       <div class="flex justify-between items-center mb-2">
         <label class="text-lg">Site Web</label>
       </div>
-      <v-text-field v-model="props.user.socialNetworks.yourWebsiteUrl" label="Site Web" variant="outlined"></v-text-field>
+      <v-text-field v-model="props.user.socialNetworks.yourWebsiteUrl" label="Site Web"
+                    variant="outlined"></v-text-field>
 
       <div class="flex flex-col space-y-4">
         <div class="flex items-center mb-2">
           <label class="text-lg mr-4">Icône pour votre site web *svg</label>
-          <v-file-input 
+          <v-file-input
               v-model="iconFile"
               accept=".png, .jpeg, .jpg"
               hint="png, jpeg or jpg"
-              label="Téléverser une icône" 
+              label="Téléverser une icône"
               @change="onFileChange">
           </v-file-input>
         </div>
@@ -52,11 +54,11 @@
 </template>
 
 <script setup>
-import { defineProps, ref } from 'vue';
+import {ref} from 'vue';
 import MyUserModel from "@/models/myUserModel.js";
 
 const props = defineProps({
-  user: { type: MyUserModel },
+  user: {type: MyUserModel},
 });
 
 const emit = defineEmits(["updateWebsiteIcon"]);

src/views/messages/Message.vue

@@ -57,7 +57,6 @@
 
 <script setup>
 
-import {defineProps} from "vue"
 import {time_ago} from "@/internal_time_ago.js";
 
 const props = defineProps({

src/views/messages/MessageList.vue

@@ -37,7 +37,7 @@
 import Message from "@/views/messages/Message.vue";
 
 import {useClient} from '@/plugins/api.js';
-import {defineProps, onBeforeMount, ref} from 'vue';
+import {onBeforeMount, ref} from 'vue';
 
 const props = defineProps({
   subjectId: {

src/views/messages/PostMessage.vue

@@ -5,7 +5,7 @@
     <div class="flex flex-row">
 
       <div class="mx-2 content-center">
-                
+
         <img :src="profileUrl"
              alt="Profile Image"
              class="rounded-full"
@@ -36,7 +36,7 @@
 <script setup>
 
 import {useClient} from '@/plugins/api.js';
-import {defineEmits, defineProps, ref} from 'vue';
+import {ref} from 'vue';
 import {useUserStore} from "@/stores/user.js";
 import {v7} from 'uuid'
 
@@ -64,7 +64,7 @@ const publish = async () => {
           "subjectId": props.subjectId,
           "message": value.value
         })
-    
+
     const currentUser = user.getCurrentUser()
     emit('message-posted',
         {
@@ -77,7 +77,7 @@ const publish = async () => {
           "value": value.value,
           parentId: null,
         })
-    
+
     value.value = ''
   } catch (error) {
     console.error(`post api/message : ${error}`)