review feedback

vatesfr · Nov 12, 2024 · f0363cc · f0363cc
1 parent 1f4b565
commit f0363cc
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 21 deletions.
diff --git a/.../table-actions/ui-table-actions.story.vue → .../table-actions/ui-table-actions.story.vue b/.../table-actions/ui-table-actions.story.vue → .../table-actions/ui-table-actions.story.vue
@@ -2,25 +2,28 @@
   <ComponentStory
     v-slot="{ properties, settings }"
     :params="[
+      prop('title').str(),
       slot(),
-      slot('actions').help('Meant to receive actions item like buttons'),
+      slot('title').help('Meant to receive text item like title'),
       slot('groupedBy').help('Meant to receive grouped item like breadcrumb'),
-      setting('defaultSlot').widget(text()).preset('message'),
+      setting('titleSlotContent').widget(text()).preset('Actions title'),
     ]"
   >
     <UiTableActions v-bind="properties">
-      {{ settings.defaultSlot }}
-      <template #actions>
-        <UiButton
-          v-for="(label, index) in buttonLabels"
-          :key="index"
-          :left-icon="label.icon"
-          level="tertiary"
-          color="normal"
-          size="medium"
-        >
-          {{ label.title }}
-        </UiButton>
+      <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>
@@ -31,9 +34,10 @@
 
 <script lang="ts" setup>
 import ComponentStory from '@/components/component-story/ComponentStory.vue'
-import { setting, slot } from '@/libs/story/story-param'
+import { prop, setting, slot } from '@/libs/story/story-param'
 import { text } from '@/libs/story/story-widget'
-import UiButton from '@core/components/button/UiButton.vue'
+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'

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
@@ -2,10 +2,12 @@
 <template>
   <div class="ui-table-actions">
     <div class="actions">
-      <UiActionsTitle>
-        <slot />
-      </UiActionsTitle>
-      <slot name="actions" />
+      <slot name="title">
+        <UiActionsTitle>
+          {{ title }}
+        </UiActionsTitle>
+      </slot>
+      <slot />
     </div>
     <div v-if="slots.groupedBy">
       <slot name="groupedBy" />
@@ -16,9 +18,13 @@
 <script setup lang="ts">
 import UiActionsTitle from '@core/components/ui/actions-title/UiActionsTitle.vue'
 
+defineProps<{
+  title?: string
+}>()
+
 const slots = defineSlots<{
-  actions(): any
   default(): any
+  title(): any
   groupedBy?(): any
 }>()
 </script>