--wip-- [skip ci]

resources/css/table.css

@@ -1,10 +1,10 @@
 .custom-table {
     width: 100%;
-    & > thead > th {
+    & > thead > th, & > thead > tr > th {
         @apply text-left px-6 text-gray-200 font-semibold py-3 border-gray-600 border-b;
     }
 
-    & > tr {
+    & > tr, & > tbody > tr {
         @apply text-gray-200 transition-all duration-300 rounded hover:bg-gray-800;
         & > td {
             @apply py-1 px-6;
@@ -12,10 +12,10 @@
     }
 
     &.custom-table-sm {
-        & > thead > th {
+        & > thead > th, & > thead > tr > th {
             @apply px-3 py-2;
         }
-        & > tr {
+        & > tr, & > tbody > tr {
             & > td {
                 @apply py-1 px-3;
             }
@@ -32,11 +32,4 @@
             }
         }
     }
-
-}
-.custom-table > * {
-    display: table-row;
-}
-.custom-table > * > * {
-    display: table-cell;
 }

resources/js/components/ui/ActionButton.vue

@@ -1,28 +1,14 @@
 <template>
     <a v-tooltip="tooltip" :href="href" :target="blank ? '_BLANK' : '_SELF'" class="inline-flex btn btn-sm">
-        <ui-sprite :src="icon"></ui-sprite>
+        <ui-sprite :src="icon" />
     </a>
 </template>
 
-<script setup>
-defineProps({
-    tooltip: {
-        required: true,
-        type: String,
-    },
-    href: {
-        type: String,
-        default: () => '#',
-        required: false,
-    },
-    blank: {
-        type: Boolean,
-        default: () => false,
-        required: false,
-    },
-    icon: {
-        type: String,
-        required: true,
-    },
-});
+<script lang="ts" setup>
+const {tooltip, icon, blank = false, href = '#'} = defineProps<{
+    tooltip: string,
+    href?: string,
+    blank?: boolean,
+    icon: string,
+}>();
 </script>

resources/js/components/ui/Sprite.vue

@@ -2,6 +2,5 @@
     <svg v-bind="$attrs" class="fill-current"><use :xlink:href="`/sprite.svg#${$attrs.src}`" /></svg>
 </template>
 
-<script>
-export default {};
+<script lang="ts" setup>
 </script>

resources/js/components/ui/Tabs.vue

@@ -3,21 +3,24 @@
         <div class="flex space-x-1 px-2">
             <a v-for="(item, index) in entries" :key="index" href="#" class="rounded-t-lg py-1 px-3 text-zinc-300"
                :class="index === modelValue ? `group-[.is-popup]:bg-zinc-600` : ''" @click.prevent="openMenu(index)"
-                v-text="item.title"></a>
+               v-text="item.title"
+            />
         </div>
     </div>
 </template>
 
-<script>
-export default {
-    props: {
-        modelValue: {},
-        entries: {},
-    },
-    methods: {
-        openMenu(index) {
-            this.$emit('update:modelValue', index);
-        },
-    },
-};
+<script  lang="ts" setup>
+defineProps<{
+    modelValue: number,
+    entries: {title: string}[]
+}>();
+
+const emits = defineEmits<{
+    'update:modelValue': [number],
+}>();
+
+function openMenu(index: number) {
+    emits('update:modelValue', index);
+}
+
 </script>