- prettier formatting

- npm updates
- new SearchMap.vue component

resources/js/Components/CardBoxClient.vue

@@ -1,101 +1,89 @@
 <script setup>
-import { computed } from 'vue'
-import { mdiTrendingDown, mdiTrendingUp, mdiTrendingNeutral } from '@mdi/js'
-import CardBox from '@/Components/CardBox.vue'
-import BaseLevel from '@/Components/BaseLevel.vue'
-import PillTag from '@/Components/PillTag.vue'
-import UserAvatar from '@/Components/UserAvatar.vue'
+import { computed } from 'vue';
+import { mdiTrendingDown, mdiTrendingUp, mdiTrendingNeutral } from '@mdi/js';
+import CardBox from '@/Components/CardBox.vue';
+import BaseLevel from '@/Components/BaseLevel.vue';
+import PillTag from '@/Components/PillTag.vue';
+import UserAvatar from '@/Components/UserAvatar.vue';
 
 const props = defineProps({
-  name: {
-    type: String,
-    required: true
-  },
-  login: {
-    type: String,
-    required: false
-  },
-  email: {
-    type: String,
-    required: false
-  },
-  date: {
-    type: String,
-    required: false
-  },
-  progress: {
-    type: Number,
-    default: 0
-  },
-  text: {
-    type: String,
-    default: null
-  },
-  type: {
-    type: String,
-    default: null
-  }
-})
-
+    name: {
+        type: String,
+        required: true,
+    },
+    login: {
+        type: String,
+        required: false,
+    },
+    email: {
+        type: String,
+        required: false,
+    },
+    date: {
+        type: String,
+        required: false,
+    },
+    progress: {
+        type: Number,
+        default: 0,
+    },
+    text: {
+        type: String,
+        default: null,
+    },
+    type: {
+        type: String,
+        default: null,
+    },
+});
 
 const pillType = computed(() => {
-  if (props.type) {
-    return props.type
-  }
-
-  if (props.progress) {
-    if (props.progress >= 60) {
-      return 'success'
-    }
-    if (props.progress >= 40) {
-      return 'warning'
+    if (props.type) {
+        return props.type;
     }
 
-    return 'danger'
-  }
+    if (props.progress) {
+        if (props.progress >= 60) {
+            return 'success';
+        }
+        if (props.progress >= 40) {
+            return 'warning';
+        }
 
-  return 'info'
-})
+        return 'danger';
+    }
+
+    return 'info';
+});
 
 const pillIcon = computed(() => {
-  return {
-    success: mdiTrendingUp,
-    warning: mdiTrendingNeutral,
-    danger: mdiTrendingDown,
-    info: mdiTrendingNeutral,
-  }[pillType.value]
-})
+    return {
+        success: mdiTrendingUp,
+        warning: mdiTrendingNeutral,
+        danger: mdiTrendingDown,
+        info: mdiTrendingNeutral,
+    }[pillType.value];
+});
 
-const pillText = computed(() => props.text ?? `${props.progress}%`)
+const pillText = computed(() => props.text ?? `${props.progress}%`);
 </script>
 
 <template>
-  <CardBox
-    class="mb-6 last:mb-0"
-    hoverable
-  >
-    <BaseLevel>
-      <BaseLevel type="justify-start">
-        <UserAvatar
-          class="w-12 h-12 mr-6"
-          :username="props.name"
-        />
-        <div class="text-center md:text-left overflow-hidden">
-          <h4 class="text-xl text-ellipsis ">
-            {{ name }}
-          </h4>
-          <p class="text-gray-500 dark:text-slate-400">
-            <!-- {{ date }} @ {{ login }} -->
-            {{ email }}
-          </p>
-        </div>
-      </BaseLevel>
-      <PillTag
-        :type="pillType"
-        :text="pillText"
-        small
-        :icon="pillIcon"
-      />
-    </BaseLevel>
-  </CardBox>
+    <CardBox class="mb-6 last:mb-0" hoverable>
+        <BaseLevel>
+            <BaseLevel type="justify-start">
+                <UserAvatar class="w-12 h-12 mr-6" :username="props.name" />
+                <div class="text-center md:text-left overflow-hidden">
+                    <h4 class="text-xl text-ellipsis">
+                        {{ name }}
+                    </h4>
+                    <p class="text-gray-500 dark:text-slate-400">
+                        <!-- {{ date }} @ {{ login }} -->
+                        {{ email }}
+                    </p>
+                </div>
+            </BaseLevel>
+            <PillTag :type="pillType" :text="pillText" small :icon="pillIcon" />
+        </BaseLevel>
+    </CardBox>
 </template>