Lint tabs component

resources/js/components/ui/Tabs.vue

@@ -1,38 +1,25 @@
 <template>
     <div class="flex-none w-maxc flex flex-col justify-between border-b-2 border-gray-500 group-[.is-popup]:border-zinc-500 mb-3">
         <div class="flex space-x-1 px-2">
-            <a
+            <a v-for="(item, index) in entries" :key="index" href="#" class="rounded-t-lg py-1 px-3 text-zinc-300"
-                v-for="(item, index) in entries"
+               :class="index === modelValue ? `bg-gray-700 group-[.is-popup]:bg-zinc-600` : ''" @click.prevent="openMenu(index)"
-                :key="index"
-                href="#"
-                class="rounded-t-lg py-1 px-3 text-zinc-300"
-                :class="index === modelValue ? `bg-gray-700 group-[.is-popup]:bg-zinc-600` : ''"
-                @click.prevent="openMenu(index)"
                v-text="item.title"
-            ></a>
+            />
         </div>
     </div>
 </template>
 
-<script>
+<script  lang="ts" setup>
-export default {
+defineProps<{
-    props: {
+    modelValue: number,
-        modelValue: {
+    entries: {title: string}[]
-            type: Number,
+}>();
-            required: true,
+
-        },
+const emits = defineEmits<{
-        entries: {
+    'update:modelValue': [number],
-            required: true,
+}>();
-            validator: function (entries) {
+
-                return entries.filter((e) => e.title === undefined || typeof e.title !== 'string' || e.title.length === 0).length === 0;
+function openMenu(index: number) {
-            },
+    emits('update:modelValue', index);
-        },
+}
-    },
-    emits: ['update:modelValue'],
-    methods: {
-        openMenu(index) {
-            this.$emit('update:modelValue', index);
-        },
-    },
-};
 </script>