From 2dafb3a1ecbaf2606a4f08e4614841d62cf1b53c Mon Sep 17 00:00:00 2001
From: Joris K <43381087+J0ris-K@users.noreply.github.com>
Date: Fri, 15 Nov 2024 09:00:57 +0100
Subject: [PATCH] feat(web-core): added UiTableActions component (#8072)

---
 .../table-actions/ui-table-actions.story.vue  | 50 +++++++++++++++++++
 .../ui/table-actions/UiTableActions.vue       | 46 +++++++++++++++++
 2 files changed, 96 insertions(+)
 create mode 100644 @xen-orchestra/lite/src/stories/web-core/ui/table-actions/ui-table-actions.story.vue
 create mode 100644 @xen-orchestra/web-core/lib/components/ui/table-actions/UiTableActions.vue

diff --git a/@xen-orchestra/lite/src/stories/web-core/ui/table-actions/ui-table-actions.story.vue b/@xen-orchestra/lite/src/stories/web-core/ui/table-actions/ui-table-actions.story.vue
new file mode 100644
index 00000000000..e9242fb20af
--- /dev/null
+++ b/@xen-orchestra/lite/src/stories/web-core/ui/table-actions/ui-table-actions.story.vue
@@ -0,0 +1,50 @@
+<template>
+  <ComponentStory
+    v-slot="{ properties, settings }"
+    :params="[
+      prop('title').str(),
+      slot(),
+      slot('title').help('Meant to receive text item like title'),
+      slot('groupedBy').help('Meant to receive grouped item like breadcrumb'),
+      setting('titleSlotContent').widget(text()).preset('Actions title'),
+    ]"
+  >
+    <UiTableActions v-bind="properties">
+      <UiButton
+        v-for="(label, index) in buttonLabels"
+        :key="index"
+        :left-icon="label.icon"
+        variant="tertiary"
+        accent="info"
+        size="medium"
+      >
+        {{ label.title }}
+      </UiButton>
+      <template #title>
+        <UiActionsTitle>
+          {{ settings.titleSlotContent }}
+        </UiActionsTitle>
+      </template>
+      <template #groupedBy>
+        <span>Grouped By</span>
+      </template>
+    </UiTableActions>
+  </ComponentStory>
+</template>
+
+<script lang="ts" setup>
+import ComponentStory from '@/components/component-story/ComponentStory.vue'
+import { prop, setting, slot } from '@/libs/story/story-param'
+import { text } from '@/libs/story/story-widget'
+import UiActionsTitle from '@core/components/ui/actions-title/UiActionsTitle.vue'
+import UiButton from '@core/components/ui/button/UiButton.vue'
+import UiTableActions from '@core/components/ui/table-actions/UiTableActions.vue'
+import { faArrowsAlt, faCalendarDays, faCircleChevronRight } from '@fortawesome/free-solid-svg-icons'
+import { ref } from 'vue'
+
+const buttonLabels = ref([
+  { title: 'Label', icon: faArrowsAlt },
+  { title: 'Label', icon: faCircleChevronRight },
+  { title: 'Label', icon: faCalendarDays },
+])
+</script>
diff --git a/@xen-orchestra/web-core/lib/components/ui/table-actions/UiTableActions.vue b/@xen-orchestra/web-core/lib/components/ui/table-actions/UiTableActions.vue
new file mode 100644
index 00000000000..38e653c39da
--- /dev/null
+++ b/@xen-orchestra/web-core/lib/components/ui/table-actions/UiTableActions.vue
@@ -0,0 +1,46 @@
+<!-- v2 -->
+<template>
+  <div class="ui-table-actions">
+    <div class="actions">
+      <slot name="title">
+        <UiActionsTitle>
+          {{ title }}
+        </UiActionsTitle>
+      </slot>
+      <slot />
+    </div>
+    <div v-if="slots.groupedBy">
+      <slot name="groupedBy" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import UiActionsTitle from '@core/components/ui/actions-title/UiActionsTitle.vue'
+
+defineProps<{
+  title?: string
+}>()
+
+const slots = defineSlots<{
+  default(): any
+  title(): any
+  groupedBy?(): any
+}>()
+</script>
+
+<style scoped lang="postcss">
+.ui-table-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-block: 0.4rem;
+  border-bottom: 0.1rem solid var(--color-neutral-border);
+
+  .actions {
+    display: flex;
+    align-items: center;
+    gap: 2.4rem;
+  }
+}
+</style>