Changes to UI and other stuff

resources/js/Components/DataTable/TableActions.vue

@@ -1,31 +1,36 @@
 <script setup>
-import { ref } from 'vue';
-import Dropdown from '../Dropdown.vue';
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import { faEllipsisVertical } from '@fortawesome/free-solid-svg-icons';
+import { ref } from "vue";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "@/Components/ui/dropdown-menu";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { faEllipsisVertical } from "@fortawesome/free-solid-svg-icons";
+import Button from "../ui/button/Button.vue";
 
 const props = defineProps({
   align: {
     type: String,
-    default: 'right', // left, right
-    validator: (v) => ['left', 'right'].includes(v),
+    default: "right", // left, right
+    validator: (v) => ["left", "right"].includes(v),
   },
   size: {
     type: String,
-    default: 'md', // sm, md
-    validator: (v) => ['sm', 'md'].includes(v),
+    default: "md", // sm, md
+    validator: (v) => ["sm", "md"].includes(v),
   },
 });
 
 const sizeClasses = {
-  sm: 'h-6 w-6',
-  md: 'h-8 w-8',
+  sm: "h-6 w-6",
+  md: "h-8 w-8",
 };
 
-const emit = defineEmits(['action']);
+const emit = defineEmits(["action"]);
 
 function handleAction(action) {
-  emit('action', action);
+  emit("action", action);
   if (action.onClick) {
     action.onClick();
   }
@@ -33,23 +38,14 @@ function handleAction(action) {
 </script>
 
 <template>
-  <Dropdown :align="align" :content-classes="['py-1']">
-    <template #trigger>
-      <button
-        type="button"
-        :class="[
-          'inline-flex items-center justify-center rounded-full text-gray-400 hover:text-gray-600 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1 transition-colors',
-          sizeClasses[size],
-        ]"
-        aria-label="Actions"
-      >
+  <DropdownMenu>
+    <DropdownMenuTrigger as-child>
+      <Button variant="ghost" size="icon" aria-label="Actions">
         <FontAwesomeIcon :icon="faEllipsisVertical" class="h-4 w-4" />
-      </button>
-    </template>
-    <template #content>
+      </Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent :align="align === 'right' ? 'end' : 'start'" class="py-1">
       <slot :handle-action="handleAction" />
-    </template>
-  </Dropdown>
+    </DropdownMenuContent>
+  </DropdownMenu>
 </template>
-
-