Dev branch

2025-11-02 12:31:01 +01:00
parent 5f879c9436
commit 63e0958b66
241 changed files with 17686 additions and 7327 deletions
@@ -0,0 +1,55 @@
+<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';
+
+const props = defineProps({
+  align: {
+    type: String,
+    default: 'right', // left, right
+    validator: (v) => ['left', 'right'].includes(v),
+  },
+  size: {
+    type: String,
+    default: 'md', // sm, md
+    validator: (v) => ['sm', 'md'].includes(v),
+  },
+});
+
+const sizeClasses = {
+  sm: 'h-6 w-6',
+  md: 'h-8 w-8',
+};
+
+const emit = defineEmits(['action']);
+
+function handleAction(action) {
+  emit('action', action);
+  if (action.onClick) {
+    action.onClick();
+  }
+}
+</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"
+      >
+        <FontAwesomeIcon :icon="faEllipsisVertical" class="h-4 w-4" />
+      </button>
+    </template>
+    <template #content>
+      <slot :handle-action="handleAction" />
+    </template>
+  </Dropdown>
+</template>
+
+