dt / tabs / dropdown menu link fixes applied

SethSharp · Sep 3, 2024 · c78fa39 · c78fa39
1 parent 0ea0f66
commit c78fa39
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 29 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -27,7 +27,7 @@
         "@alpinejs/intersect": "^3.13.7",
         "@headlessui/vue": "^1.7.16",
         "@heroicons/vue": "^2.0.18",
-        "@sethsharp/ui": "1.0.0-alpha.2.0.50",
+        "@sethsharp/ui": "1.0.0-alpha.2.1.4",
         "@tiptap/extension-bubble-menu": "^2.2.1",
         "@tiptap/extension-code-block-lowlight": "^2.2.4",
         "@tiptap/extension-document": "^2.2.1",

diff --git a/resources/js/Layouts/AuthenticatedLayout.vue b/resources/js/Layouts/AuthenticatedLayout.vue
@@ -105,9 +105,7 @@ const isDark = useDark({
 
                                     <DropdownMenuLink
                                         method="post"
-                                        :is="Link"
-                                        as="button"
-                                        class="justify-start"
+                                        :as="Link"
                                         :href="route('logout')"
                                     >
                                         Log Out
@@ -207,7 +205,7 @@ const isDark = useDark({
 
             <!-- Page Content -->
             <main>
-                <div class="bg-white rounded-xl m-2 sm:m-6 p-4 sm:p-12 dark:bg-slate-900">
+                <div class="bg-white rounded-xl m-2 sm:m-6 p-4 sm:p-12 dark:bg-slate-900 space-y-4">
                     <slot />
                 </div>
             </main>

diff --git a/resources/js/Layouts/IndexBlogsLayout.vue b/resources/js/Layouts/IndexBlogsLayout.vue
@@ -29,11 +29,11 @@ const create = () => router.post(route('dashboard.blogs.create'))
                 </div>
             </div>
 
-            <Tabs :as="Link" :tabs="tabs" :data="data">
+            <Tabs :is="Link" :tabs="tabs" :data="data">
                 <slot />
-            </Tabs>
 
-            <Pagination :data="data" />
+                <Pagination :data="data" />
+            </Tabs>
         </div>
     </AuthenticatedLayout>
 </template>
diff --git a/resources/js/Pages/Dashboard/Blogs/Index.vue b/resources/js/Pages/Dashboard/Blogs/Index.vue
@@ -9,13 +9,14 @@ import {
     Dropdown,
     BaseDropdownMenuItem,
 } from '@sethsharp/ui'
-import IndexBlogsLayout from '@/Layouts/IndexBlogsLayout.vue'
 import {
     ArrowLeftStartOnRectangleIcon,
     EyeIcon,
     PencilSquareIcon,
     TrashIcon,
+    EllipsisVerticalIcon,
 } from '@heroicons/vue/16/solid/index.js'
+import IndexBlogsLayout from '@/Layouts/IndexBlogsLayout.vue'
 import { formatDate, getBlogCoverImage } from '@/Helpers/helpers.js'
 
 const props = defineProps({
@@ -71,13 +72,12 @@ const dataTableConfig = computed(() => ({
     rows: props.blogs.data,
 }))
 
-const deleteBlog = (blog) => {
+const deleteBlog = (blog) =>
     router.delete(route('dashboard.blogs.delete', blog), {
         onBefore: () => confirm('Are you sure you want to delete this blog?'),
     })
-}
 
-const restoreBlog = (blog) => {
+const restoreBlog = (blog) =>
     router.put(
         route('dashboard.blogs.restore'),
         {
@@ -87,7 +87,6 @@ const restoreBlog = (blog) => {
             onBefore: () => confirm('Are you sure you want to restore this blog?'),
         }
     )
-}
 
 watch(search, (newSearch) => {
     if (!newSearch) {
@@ -103,7 +102,7 @@ onMounted(() => {
 
 <template>
     <IndexBlogsLayout :status="status" :count="blogs.data.length" :tabs="tabs" :data="blogs">
-        <div class="flex">
+        <div class="flex my-4">
             <div class="ml-auto flex gap-2">
                 <Text type="search" v-model="search" placeholder="Search for Blogs" />
                 <SecondaryButton @click="visitSearch"> search </SecondaryButton>
@@ -114,31 +113,33 @@ onMounted(() => {
             <template #cell_cover="{ item }">
                 <div class="sm:w-1/2 p-4">
                     <img
-                        :src="getBlogCoverImage(item)"
+                        :src="getBlogCoverImage(item.cover)"
                         alt="Blog cover image"
                         class="rounded-lg h-full object-cover object-left max-h-64 mx-auto aspect-square"
                     />
                 </div>
             </template>
 
             <template #cell_created_at="{ item }">
-                {{ formatDate(item) }}
+                {{ formatDate(item.created_at) }}
             </template>
 
             <template #cell_updated_at="{ item }">
-                {{ formatDate(item) }}
+                {{ formatDate(item.updated_at) }}
             </template>
 
             <template #cell_deleted_at="{ item }">
                 <div v-if="item">
-                    {{ formatDate(item) }}
+                    {{ formatDate(item.deleted_at) }}
                 </div>
             </template>
 
-            <template #row-actions="{ item }">
+            <template #row_actions="{ item }">
                 <Dropdown>
                     <template #trigger>
-                        <SecondaryButton> Actions </SecondaryButton>
+                        <SecondaryButton>
+                            <EllipsisVerticalIcon class="size-5" />
+                        </SecondaryButton>
                     </template>
 
                     <template #content>

diff --git a/resources/js/Pages/Dashboard/Collection/Index.vue b/resources/js/Pages/Dashboard/Collection/Index.vue
@@ -46,10 +46,10 @@ const dataTableConfig = computed(() => ({
 
         <Datatable v-if="allCollections.length" v-bind="dataTableConfig">
             <template #cell_created_at="{ item }">
-                {{ formatDate(item) }}
+                {{ formatDate(item.created_at) }}
             </template>
 
-            <template #row-actions="{ item }">
+            <template #row_actions="{ item }">
                 <SecondaryButton @click="manageCollection(item)"> Edit </SecondaryButton>
             </template>
         </Datatable>

diff --git a/resources/js/Pages/Dashboard/Tags/Index.vue b/resources/js/Pages/Dashboard/Tags/Index.vue
@@ -47,14 +47,14 @@ const dataTableConfig = computed(() => ({
 
         <Datatable v-if="tags.data.length" v-bind="dataTableConfig">
             <template #cell_name="{ item }">
-                {{ item }}
+                {{ item.name }}
             </template>
 
             <template #cell_created_at="{ item }">
-                {{ formatDate(item) }}
+                {{ formatDate(item.created_at) }}
             </template>
 
-            <template #row-actions="{ item }">
+            <template #row_actions="{ item }">
                 <SecondaryButton @click="openModal(item)"> Edit </SecondaryButton>
             </template>
         </Datatable>