feat(web-core): added UiTopBottomTable component and some trad (#8055)

@xen-orchestra/lite/src/stories/web-core/ui/head-bar/ui-head-bar.story.vue

@@ -19,8 +19,8 @@
         migrating... (34%)
       </template>
       <template v-if="settings.showDemoButtons" #actions>
-        <UiButton size="medium" variant="primary" accent="normal" :left-icon="faPlus">New VM</UiButton>
-        <UiButton size="medium" variant="secondary" accent="normal" :left-icon="faPowerOff">Change state</UiButton>
+        <UiButton size="medium" variant="primary" accent="info" :left-icon="faPlus">New VM</UiButton>
+        <UiButton size="medium" variant="secondary" accent="info" :left-icon="faPowerOff">Change state</UiButton>
       </template>
     </UiHeadBar>
   </ComponentStory>

@xen-orchestra/lite/src/stories/web-core/ui/top-bottom-table/ui-top-bottom-table.story.vue

@@ -0,0 +1,48 @@
+<template>
+  <ComponentStory
+    v-slot="{ properties }"
+    :params="[
+      prop('selected-items').required().num(),
+      prop('total-items').required().num(),
+      event('toggleSelectAll').args({ value: 'boolean' }),
+    ]"
+  >
+    <UiTopBottomTable
+      v-bind="properties"
+      :selected-items="selectedItems"
+      :total-items="totalItems.length"
+      @toggle-select-all="toggleSelect"
+    />
+    <div v-for="(item, index) in totalItems" :key="index">
+      <input v-model="item.selected" type="checkbox" /> {{ item.name }}
+    </div>
+  </ComponentStory>
+</template>
+
+<script lang="ts" setup>
+import ComponentStory from '@/components/component-story/ComponentStory.vue'
+import { event, prop } from '@/libs/story/story-param'
+import UiTopBottomTable from '@core/components/ui/top-bottom-table/UiTopBottomTable.vue'
+import { computed, ref } from 'vue'
+
+const totalItems = ref([
+  { name: 'Item 1', selected: false },
+  { name: 'Item 2', selected: false },
+  { name: 'Item 3', selected: false },
+  { name: 'Item 4', selected: false },
+  { name: 'Item 5', selected: false },
+  { name: 'Item 6', selected: false },
+  { name: 'Item 7', selected: false },
+  { name: 'Item 8', selected: false },
+  { name: 'Item 9', selected: false },
+  { name: 'Item 10', selected: false },
+])
+
+const toggleSelect = (isSelected: boolean) => {
+  totalItems.value.forEach(item => {
+    item.selected = isSelected
+  })
+}
+
+const selectedItems = computed(() => totalItems.value.filter(item => item.selected).length)
+</script>

@xen-orchestra/web-core/lib/components/ui/top-bottom-table/UiTopBottomTable.vue

@@ -0,0 +1,64 @@
+<!-- v2 -->
+<template>
+  <div class="ui-top-bottom-table">
+    <div class="content">
+      <span class="typo p3-regular label">
+        {{ $t('core.select.n-selected-of', { count: selectedItems, total: totalItems }) }}
+      </span>
+
+      <UiButton
+        :disabled="selectedItems === totalItems"
+        accent="info"
+        size="small"
+        variant="tertiary"
+        @click="emit('toggleSelectAll', true)"
+      >
+        {{ $t('core.select.all') }}
+      </UiButton>
+      <UiButton
+        :disabled="selectedItems === 0"
+        accent="info"
+        size="small"
+        variant="tertiary"
+        @click="emit('toggleSelectAll', false)"
+      >
+        {{ $t('core.select.unselect') }}
+      </UiButton>
+    </div>
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import UiButton from '@core/components/ui/button/UiButton.vue'
+
+defineProps<{
+  selectedItems: number
+  totalItems: number
+}>()
+
+const emit = defineEmits<{
+  toggleSelectAll: [value: boolean]
+}>()
+
+defineSlots<{
+  default(): any
+}>()
+</script>
+
+<style scoped lang="postcss">
+.ui-top-bottom-table {
+  display: flex;
+  justify-content: space-between;
+
+  .content {
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+  }
+
+  .label {
+    color: var(--color-neutral-txt-secondary);
+  }
+}
+</style>

@xen-orchestra/web-core/lib/locales/en.json

@@ -26,7 +26,8 @@
 
   "core.select.all": "Select all",
   "core.select.none": "Select none",
-
+  "core.select.unselect": "Unselect all",
+  "core.select.n-selected-of": "{count} selected of {total} objects",
   "core.sidebar.close": "Close sidebar",
   "core.sidebar.lock": "Lock sidebar open",
   "core.sidebar.open": "Open sidebar",

@xen-orchestra/web-core/lib/locales/fr.json

@@ -26,7 +26,8 @@
 
   "core.select.all": "Tout sélectionner",
   "core.select.none": "Tout désélectionner",
-
+  "core.select.unselect": "Tout désélectionner",
+  "core.select.n-selected-of": "{count} objet sélectionné sur {total} | {count} objet sélectionné sur {total} | {count} objets sélectionnés sur {total}",
   "core.sidebar.close": "Fermer la barre latérale",
   "core.sidebar.lock": "Verrouiller la barre latérale",
   "core.sidebar.open": "Ouvrir la barre latérale",