@xen-orchestra/web-core 0.16.0 → 0.17.0

package/lib/composables/mapper.composable.md

@@ -0,0 +1,74 @@
+# `useMapper` composable
+
+This composable maps values from one type to another using a mapping record. It takes a source value, a mapping object, and a default value to use when the source value is undefined or not found in the mapping.
+
+## Usage
+
+```ts
+const mappedValue = useMapper(sourceValue, mapping, defaultValue)
+```
+
+|                | Required | Type                      | Default |                                                                                   |
+| -------------- | :------: | ------------------------- | ------- | --------------------------------------------------------------------------------- |
+| `sourceValue`  |    ✓     | `MaybeRefOrGetter<TFrom>` |         | The source value to be mapped. Can be a ref, a getter function, or a raw value    |
+| `mapping`      |    ✓     | `Record<TFrom, TTo>`      |         | An object mapping source values to destination values                             |
+| `defaultValue` |    ✓     | `MaybeRefOrGetter<TTo>`   |         | The default value to use when the source is undefined or not found in the mapping |
+
+## Return value
+
+|               | Type               |                                                  |
+| ------------- | ------------------ | ------------------------------------------------ |
+| `mappedValue` | `ComputedRef<TTo>` | A computed reference containing the mapped value |
+
+## Example
+
+```vue
+<template>
+  <div>
+    <p>Selected car color: {{ carColor }}</p>
+    <p>Recommended wall color: {{ wallColor }}</p>
+
+    <button @click="carColor = 'red'">Red Car</button>
+    <button @click="carColor = 'blue'">Blue Car</button>
+    <button @click="carColor = 'black'">Black Car</button>
+    <button @click="carColor = 'green'">Green Car</button>
+    <button @click="carColor = 'silver'">Silver Car</button>
+    <button @click="carColor = undefined">No Car</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useMapper } from '@/composables/mapper'
+import { ref } from 'vue'
+
+// Source type
+type CarColor = 'red' | 'blue' | 'black' | 'green' | 'silver'
+
+// Destination type
+type WallColor = 'beige' | 'lightGray' | 'cream' | 'white'
+
+// Create a ref for the source value
+const carColor = ref<CarColor | undefined>(undefined)
+
+// Create a computed property that maps car color to wall color
+const wallColor = useMapper<CarColor, WallColor>(
+  carColor,
+  {
+    red: 'beige',
+    blue: 'lightGray',
+    black: 'cream',
+    green: 'beige',
+    silver: 'lightGray',
+  },
+  'white'
+)
+</script>
+```
+
+In this example:
+
+- When `carColor.value` is `'red'` or `'green'`, `wallColor.value` will be `'beige'`
+- When `carColor.value` is `'blue'` or `'silver'`, `wallColor.value` will be `'lightGray'`
+- When `carColor.value` is `'black'`, `wallColor.value` will be `'cream'`
+- When `carColor.value` is `undefined` or any value not in the mapping, `wallColor.value` will be
+  `'white'` (the default value)

package/lib/composables/mapper.composable.ts

@@ -0,0 +1,18 @@
+import { computed, type ComputedRef, type MaybeRefOrGetter, toValue } from 'vue'
+
+export function useMapper<TFrom extends string | number, TTo>(
+  _source: MaybeRefOrGetter<TFrom | undefined>,
+  mapping: Record<TFrom, TTo>,
+  _defaultValue: MaybeRefOrGetter<TTo>
+): ComputedRef<TTo> {
+  return computed(() => {
+    const source = toValue(_source)
+    const defaultValue = toValue(_defaultValue)
+
+    if (source === undefined) {
+      return defaultValue
+    }
+
+    return Object.prototype.hasOwnProperty.call(mapping, source) ? mapping[source] : defaultValue
+  })
+}

package/lib/composables/pagination.composable.md

@@ -0,0 +1,32 @@
+# usePagination Composable
+
+Handles record pagination with localStorage and route persistence.
+
+The composable uses index-based pagination instead of page numbers, enabling URL sharing across users with different "Show by" settings. The index represents the first visible record.
+
+## Storage
+
+- Route query: `{id}.idx` stores start index
+- LocalStorage: `{id}.per-page` stores "Show by" value (default: 50)
+
+## Key Points
+
+- `showBy = -1` displays all records
+- `pageRecords` returns current page's records subset
+- `seek(predicate)` finds and navigates to specific record's page
+- All indices auto-align to page boundaries
+- `paginationBindings` contains props and events for `UiTablePagination`
+
+## Usage
+
+```typescript
+// Basic usage
+const { pageRecords, paginationBindings } = usePagination('items', items)
+
+// Template
+<div v-for="item in pageRecords" :key="item.id">
+  {{ item.name }}
+</div>
+
+<UiTablePagination v-bind="paginationBindings" />
+```

package/lib/composables/pagination.composable.ts

@@ -0,0 +1,91 @@
+import { useRouteQuery } from '@core/composables/route-query.composable'
+import { clamp, useLocalStorage } from '@vueuse/core'
+import { computed, type MaybeRefOrGetter, toValue } from 'vue'
+
+export function usePagination<T>(id: string, _records: MaybeRefOrGetter<T[]>) {
+  const records = computed(() => toValue(_records))
+
+  const showBy = useLocalStorage(`${id}.per-page`, 50)
+
+  const pageSize = computed({
+    get: () => (showBy.value === -1 ? Number.MAX_SAFE_INTEGER : showBy.value),
+    set: value => (showBy.value = value),
+  })
+
+  function toStartIndex(rawIndex: number | string) {
+    const index = clamp(+rawIndex, 0, records.value.length - 1) || 0
+
+    return Math.floor(index / pageSize.value) * pageSize.value
+  }
+
+  const startIndex = useRouteQuery<number>(`${id}.idx`, {
+    defaultQuery: '0',
+    toData: value => toStartIndex(value),
+    toQuery: value => toStartIndex(value).toString(10),
+  })
+
+  const endIndex = computed(() => Math.min(startIndex.value + pageSize.value - 1, records.value.length - 1))
+
+  const isFirstPage = computed(() => startIndex.value <= 0)
+
+  const isLastPage = computed(() => endIndex.value >= records.value.length - 1)
+
+  const pageRecords = computed(() => records.value.slice(startIndex.value, endIndex.value + 1))
+
+  function seek(predicate: (record: T) => boolean) {
+    const index = records.value.findIndex(predicate)
+
+    if (index !== -1) {
+      startIndex.value = index
+    }
+  }
+
+  function goToNextPage() {
+    if (!isLastPage.value) {
+      startIndex.value = startIndex.value + pageSize.value
+    }
+  }
+
+  function goToPreviousPage() {
+    if (!isFirstPage.value) {
+      startIndex.value = startIndex.value - pageSize.value
+    }
+  }
+
+  function goToFirstPage() {
+    startIndex.value = 0
+  }
+
+  function goToLastPage() {
+    startIndex.value = records.value.length - 1
+  }
+
+  const paginationBindings = computed(() => ({
+    showBy: showBy.value,
+    'onUpdate:showBy': (value: number) => (showBy.value = value),
+    from: Math.max(0, startIndex.value + 1),
+    to: endIndex.value + 1,
+    total: records.value.length,
+    isFirstPage: isFirstPage.value,
+    isLastPage: isLastPage.value,
+    onFirst: goToFirstPage,
+    onLast: goToLastPage,
+    onNext: goToNextPage,
+    onPrevious: goToPreviousPage,
+  }))
+
+  return {
+    startIndex,
+    endIndex,
+    seek,
+    showBy,
+    isFirstPage,
+    isLastPage,
+    goToPreviousPage,
+    goToNextPage,
+    goToFirstPage,
+    goToLastPage,
+    pageRecords,
+    paginationBindings,
+  }
+}

package/lib/composables/ranked.composable.md

@@ -0,0 +1,118 @@
+# `useRanked` composable
+
+This composable helps sort items based on a predefined ranking order.
+
+It takes an array of items and a ranking order, and returns a computed sorted array according to the ranking.
+
+## Usage
+
+### Signature 1: Sorting ranks directly
+
+```ts
+const sortedRanks = useRanked(ranks, ranking)
+```
+
+|           | Required | Type                        | Default | Description                                                |
+| --------- | :------: | --------------------------- | ------- | ---------------------------------------------------------- |
+| `ranks`   |    ✓     | `MaybeRefOrGetter<TRank[]>` |         | The array of ranks to sort                                 |
+| `ranking` |    ✓     | `TRank[]`                   |         | The array of ranks ordered from highest to lowest priority |
+
+#### Return value
+
+|               | Type                   | Description                                                     |
+| ------------- | ---------------------- | --------------------------------------------------------------- |
+| `sortedRanks` | `ComputedRef<TRank[]>` | A computed array of ranks sorted according to the ranking order |
+
+- Ranks are sorted based on their position in the `ranking` array (lower index = higher priority)
+- Ranks not found in the `ranking` array are placed after all defined ranks in their original order
+
+#### Example: Sorting priority levels
+
+```ts
+import { useRanked } from '@core/composables/ranked.composable'
+import { ref } from 'vue'
+
+// Priority levels in random order
+const currentPriorities = ref(['high', 'medium', 'low', 'critical', 'low', 'medium', 'high'])
+
+// Define the ranking order (from highest to lowest priority)
+const priorityRanking = ['critical', 'high', 'medium', 'low']
+
+// Sort priorities according to the ranking
+const sortedPriorities = useRanked(currentPriorities, priorityRanking)
+
+// sortedPriorities.value will be:
+// ['critical', 'high', 'high', 'medium', 'medium', 'low', 'low']
+```
+
+### Signature 2: Sorting items by their rank
+
+```ts
+const sortedItems = useRanked(items, getRank, ranking)
+```
+
+|           | Required | Type                        | Default | Description                                                |
+| --------- | :------: | --------------------------- | ------- | ---------------------------------------------------------- |
+| `items`   |    ✓     | `MaybeRefOrGetter<TItem[]>` |         | The array of items to sort                                 |
+| `getRank` |    ✓     | `(item: TItem) => TRank`    |         | A function to extract rank from an item                    |
+| `ranking` |    ✓     | `TRank[]`                   |         | The array of ranks ordered from highest to lowest priority |
+
+#### Return value
+
+|               | Type                   | Description                                       |
+| ------------- | ---------------------- | ------------------------------------------------- |
+| `sortedItems` | `ComputedRef<TItem[]>` | A computed array of items sorted by their ranking |
+
+- Items are sorted based on their rank in the `ranking` array (lower index = higher priority)
+- Items with ranks not found in the `ranking` array are placed after all ranked items in their original order
+
+#### Example: Sorting tasks by priority
+
+```ts
+import { useRanked } from '@core/composables/ranked.composable'
+import { ref } from 'vue'
+
+// Tasks with different priorities
+const tasks = ref([
+  {
+    id: 1,
+    title: 'Fix login bug',
+    priority: 'high',
+  },
+  {
+    id: 2,
+    title: 'Update documentation',
+    priority: 'low',
+  },
+  {
+    id: 3,
+    title: 'Server outage',
+    priority: 'critical',
+  },
+  {
+    id: 4,
+    title: 'Refactor components',
+    priority: 'medium',
+  },
+  {
+    id: 5,
+    title: 'Design review',
+    priority: 'medium',
+  },
+])
+
+// Define the ranking order (from highest to lowest priority)
+const priorityRanking = ['critical', 'high', 'medium', 'low']
+
+// Sort tasks by priority according to the ranking
+const sortedTasks = useRanked(tasks, task => task.priority, priorityRanking)
+
+// sortedTasks.value will be:
+// [
+//   { id: 3, title: 'Server outage', priority: 'critical' },
+//   { id: 1, title: 'Fix login bug', priority: 'high' },
+//   { id: 4, title: 'Refactor components', priority: 'medium' },
+//   { id: 5, title: 'Design review', priority: 'medium' },
+//   { id: 2, title: 'Update documentation', priority: 'low' }
+// ]
+```

package/lib/composables/ranked.composable.ts

@@ -0,0 +1,37 @@
+import { clamp, useSorted } from '@vueuse/core'
+import { computed, type ComputedRef, type MaybeRefOrGetter, toValue } from 'vue'
+
+export function useRanked<TRank extends string | number>(
+  ranks: MaybeRefOrGetter<TRank[]>,
+  ranking: NoInfer<TRank>[]
+): ComputedRef<TRank[]>
+
+export function useRanked<TItem, TRank extends string | number>(
+  items: MaybeRefOrGetter<TItem[]>,
+  getRank: (item: TItem) => TRank,
+  ranking: NoInfer<TRank>[]
+): ComputedRef<TItem[]>
+
+export function useRanked<TItem, TRank extends string | number>(
+  items: MaybeRefOrGetter<TItem[]>,
+  ranksOrGetRank: TRank[] | ((item: TItem) => TRank),
+  ranksOrNone?: TRank[]
+) {
+  const getRank = typeof ranksOrGetRank === 'function' ? ranksOrGetRank : (item: TItem) => item as unknown as TRank
+
+  const ranks = ranksOrNone === undefined ? (ranksOrGetRank as TRank[]) : ranksOrNone
+
+  const ranksMap = computed(() => Object.fromEntries(ranks.map((rank, index) => [rank, index + 1]))) as ComputedRef<
+    Record<TRank, number>
+  >
+
+  function getRankNumber(item: TItem): number {
+    return ranksMap.value[getRank(item)] ?? toValue(items).length + 1
+  }
+
+  function compare(item1: TItem, item2: TItem) {
+    return clamp(getRankNumber(item1) - getRankNumber(item2), -1, 1) as -1 | 0 | 1
+  }
+
+  return useSorted(items, compare)
+}

package/lib/locales/en.json

@@ -53,6 +53,7 @@
   "cancel": "Cancel",
   "change-state": "Change state",
   "check-errors": "Check out the errors:",
+  "check-summing": "TX checksumming",
   "click-to-display-alarms": "Click to display alarms:",
   "click-to-return-default-pool": "Click here to return to the default pool",
   "close": "Close",
@@ -68,6 +69,7 @@
   "console-clipboard": "Console clipboard",
   "console-unavailable": "Console unavailable",
   "copy": "Copy",
+  "copy-all": "Copy all",
   "copy-info-json": "Copy information into JSON",
   "core.character-limit": "{count}/{max} character | {count}/{max} characters",
   "core.close": "Close",
@@ -78,6 +80,8 @@
   "core.group": "Group",
   "core.hide": "Hide",
   "core.open": "Open",
+  "core.pagination.all": "All",
+  "core.pagination.show-by": "Show by",
   "core.query-search-bar.label": "Search Engine",
   "core.query-search-bar.placeholder": "Write your query…",
   "core.query-search-bar.use-query-builder": "Use query builder",
@@ -269,17 +273,19 @@
   "networks": "Networks",
   "new": "New",
   "new-features-are-coming": "New features are coming soon!",
+  "new-vif": "New VIF",
   "news": "News",
   "news-name": "{name} news",
   "no-alarm-triggered": "No alarm triggered",
   "no-data": "No data",
   "no-network-detected": "No network detected",
-  "no-pif-detected": "No pif detected",
+  "no-pif-detected": "No PIF detected",
   "no-result": "No result",
   "no-results": "No results",
   "no-selected-vm-can-be-exported": "No selected VM can be exported",
   "no-selected-vm-can-be-migrated": "No selected VM can be migrated",
   "no-tasks": "No tasks",
+  "no-vif-detected": "No VIF detected",
   "none": "None",
   "not-found": "Not found",
   "object": "Object",
@@ -407,6 +413,10 @@
   "vcpus": "vCPUs",
   "vcpus-used": "vCPUs used",
   "version": "Version",
+  "vif": "VIF",
+  "vif-device": "VIF #{device}",
+  "vif-status": "VIF status",
+  "vifs": "VIFs",
   "vlan": "VLAN",
   "vm": "VM",
   "vm-description": "VM description",

package/lib/locales/fr.json

@@ -53,6 +53,7 @@
   "cancel": "Annuler",
   "change-state": "Changer l'état",
   "check-errors": "Consultez les erreurs :",
+  "check-summing": "TX checksumming",
   "click-to-display-alarms": "Cliquer pour afficher les alarmes :",
   "click-to-return-default-pool": "Cliquer ici pour revenir au pool par défaut",
   "close": "Fermer",
@@ -68,6 +69,7 @@
   "console-clipboard": "Presse-papiers de la console",
   "console-unavailable": "Console indisponible",
   "copy": "Copier",
+  "copy-all": "Copier tout",
   "copy-info-json": "Copier les informations en JSON",
   "core.character-limit": "{count}/{max} caractère | {count}/{max} caractères",
   "core.close": "Fermer",
@@ -78,6 +80,8 @@
   "core.group": "Grouper",
   "core.hide": "Masquer",
   "core.open": "Ouvrir",
+  "core.pagination.all": "Tous",
+  "core.pagination.show-by": "Afficher par",
   "core.query-search-bar.label": "Moteur de recherche",
   "core.query-search-bar.placeholder": "Écrivez votre requête…",
   "core.query-search-bar.use-query-builder": "Utiliser le constructeur de requête",
@@ -269,6 +273,7 @@
   "networks": "Réseaux",
   "new": "Nouveau",
   "new-features-are-coming": "De nouvelles fonctionnalités arrivent bientôt !",
+  "new-vif": "Nouveau VIF",
   "news": "Actualités",
   "news-name": "Actualités {name}",
   "no-alarm-triggered": "Aucune alarme déclenchée",
@@ -280,6 +285,7 @@
   "no-selected-vm-can-be-exported": "Aucune VM sélectionnée ne peut être exportée",
   "no-selected-vm-can-be-migrated": "Aucune VM sélectionnée ne peut être migrée",
   "no-tasks": "Aucune tâche",
+  "no-vif-detected": "Aucun VIF détecté",
   "none": "Aucun",
   "not-found": "Non trouvé",
   "object": "Objet",
@@ -407,6 +413,10 @@
   "vcpus": "vCPUs",
   "vcpus-used": "vCPUs utilisés",
   "version": "Version",
+  "vif": "VIF",
+  "vif-device": "VIF #{device}",
+  "vif-status": "Statut du VIF",
+  "vifs": "VIFs",
   "vlan": "VLAN",
   "vm": "VM",
   "vm-description": "Description de la VM",

package/lib/utils/if-else.utils.ts

@@ -2,7 +2,7 @@ import type { MaybeArray, VoidFunction } from '@core/types/utility.type'
 import { toArray } from '@core/utils/to-array.utils'
 import { watch, type WatchOptions, type WatchSource } from 'vue'
 
-export interface IfElseOptions extends Pick<WatchOptions, 'immediate'> {}
+export interface IfElseOptions extends Pick<WatchOptions, 'immediate' | 'flush'> {}
 
 export function ifElse(
   source: WatchSource<boolean>,

package/lib/utils/injection-keys.util.ts

@@ -1,3 +1,4 @@
+import type { InputWrapperController } from '@core/components/input-wrapper/VtsInputWrapper.vue'
 import type { ValueFormatter } from '@core/types/chart'
 import type { ComputedRef, InjectionKey, Ref } from 'vue'
 
@@ -11,8 +12,6 @@ export const IK_TREE_ITEM_EXPANDED = Symbol('IK_TREE_ITEM_EXPANDED') as Injectio
 
 export const IK_TREE_LIST_DEPTH = Symbol('IK_TREE_LIST_DEPTH') as InjectionKey<number>
 
-export const IK_DROPDOWN_CHECKBOX = Symbol('IK_DROPDOWN_CHECKBOX') as InjectionKey<ComputedRef<boolean>>
-
 export const IK_MENU_HORIZONTAL = Symbol('IK_MENU_HORIZONTAL') as InjectionKey<ComputedRef<boolean>>
 
 export const IK_CLOSE_MENU = Symbol('IK_CLOSE_MENU') as InjectionKey<() => void>
@@ -20,3 +19,5 @@ export const IK_CLOSE_MENU = Symbol('IK_CLOSE_MENU') as InjectionKey<() => void>
 export const IK_MENU_TELEPORTED = Symbol('IK_MENU_TELEPORTED') as InjectionKey<boolean>
 
 export const IK_DISABLED = Symbol('IK_DISABLED') as InjectionKey<ComputedRef<boolean>>
+
+export const IK_INPUT_WRAPPER_CONTROLLER = Symbol('IK_INPUT_WRAPPER_CONTROLLER') as InjectionKey<InputWrapperController>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xen-orchestra/web-core",
   "type": "module",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "private": false,
   "exports": {
     "./*": {
@@ -10,19 +10,19 @@
     }
   },
   "dependencies": {
-    "@floating-ui/vue": "^1.1.5",
-    "@fontsource/poppins": "^5.0.14",
-    "@fortawesome/fontawesome-common-types": "^6.5.1",
-    "@fortawesome/free-regular-svg-icons": "^6.5.1",
-    "@fortawesome/free-solid-svg-icons": "^6.5.1",
-    "@fortawesome/vue-fontawesome": "^3.0.5",
-    "@novnc/novnc": "^1.4.0",
+    "@floating-ui/vue": "^1.1.6",
+    "@fontsource/poppins": "^5.2.5",
+    "@fortawesome/fontawesome-common-types": "^6.7.2",
+    "@fortawesome/free-regular-svg-icons": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/vue-fontawesome": "^3.0.8",
+    "@novnc/novnc": "~1.5.0",
     "@types/d3-time-format": "^4.0.3",
-    "@vueuse/core": "^10.7.1",
-    "@vueuse/math": "^10.7.1",
-    "@vueuse/shared": "^10.7.1",
+    "@vueuse/core": "^13.0.0",
+    "@vueuse/math": "^13.0.0",
+    "@vueuse/shared": "^13.0.0",
     "d3-time-format": "^4.1.0",
-    "echarts": "^5.4.3",
+    "echarts": "^5.6.0",
     "human-format": "^1.2.1",
     "iterable-backoff": "^0.1.0",
     "lodash-es": "^4.17.21",
@@ -30,19 +30,19 @@
     "vue-echarts": "^6.6.8"
   },
   "peerDependencies": {
-    "pinia": "^2.2.6",
-    "vue": "~3.5.12",
-    "vue-i18n": "^9.9.0",
-    "vue-router": "^4.4.5"
+    "pinia": "^3.0.1",
+    "vue": "~3.5.13",
+    "vue-i18n": "^11.1.2",
+    "vue-router": "^4.5.0"
   },
   "devDependencies": {
     "@types/lodash-es": "^4.17.12",
-    "@types/novnc__novnc": "^1.5.0",
-    "@vue/tsconfig": "^0.5.1",
-    "pinia": "^2.2.6",
-    "vue": "~3.5.12",
-    "vue-i18n": "^9.9.0",
-    "vue-router": "^4.4.5"
+    "@types/novnc__novnc": "~1.5.0",
+    "@vue/tsconfig": "^0.7.0",
+    "pinia": "^3.0.1",
+    "vue": "~3.5.13",
+    "vue-i18n": "^11.1.2",
+    "vue-router": "^4.5.0"
   },
   "homepage": "https://github.com/vatesfr/xen-orchestra/tree/master/@xen-orchestra/web-core",
   "bugs": "https://github.com/vatesfr/xen-orchestra/issues",