@xen-orchestra/web-core 0.4.0 → 0.6.0

package/lib/locales/en.json

@@ -7,6 +7,8 @@
 
   "coming-soon": "Coming soon!",
   "console": "Console",
+  "console-actions": "Console actions",
+  "console-clipboard": "Console clipboard",
 
   "core.copied": "Copied",
   "core.copy-id": "Copy ID",
@@ -26,7 +28,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",
@@ -39,8 +42,11 @@
   "dark-mode.disable": "Disable dark mode",
   "dark-mode.auto": "Auto dark mode",
 
+  "access-forum": "Access forum",
   "dashboard": "Dashboard",
   "documentation-name": "{name} documentation",
+  "exit-fullscreen": "Exit fullscreen",
+  "fullscreen": "Fullscreen",
   "hosts": "Hosts",
   "learn-more": "Learn more",
   "loading-in-progress": "Loading in progress…",
@@ -50,14 +56,19 @@
   "network": "Network",
   "no-data": "No data",
   "object-not-found": "Object {id} can't be found…",
+  "open-console-in-new-tab": "Open console in new tab",
   "other": "Other",
   "patches": "Patches",
-  "power-on-for-console": "Power on your VM to access its console",
+  "power-on-vm-for-console": "Power on your VM to access its console",
+  "power-on-host-for-console": "Power on your host to access its console",
+  "professional-support": "Professional support",
+  "receive": "Receive",
   "running-vm": "Running VM | Running VMs",
   "see-all": "See all",
+  "send": "Send",
+  "send-ctrl-alt-del": "Send Ctrl+Alt+Del",
   "stats": "Stats",
   "storage": "Storage",
-  "support-name": "{name} pro support",
   "system": "System",
 
   "tasks": "Tasks",

package/lib/locales/fa.json

@@ -33,17 +33,20 @@
 
   "dashboard": "داشبورد",
   "documentation-name": "اسناد {name}",
+  "fullscreen": "تمام صفحه",
   "learn-more": "بیشتر بدانید",
   "loading-in-progress": "بارگیری در حال انجام است…",
   "log-out": "خروج",
   "master": "میزبان اصلی",
   "network": "شبکه",
+  "open-console-in-new-tab": "باز کردن کنسول در برگه جدید",
   "patches": "وصله ها",
-  "power-on-for-console": "ماشین مجازی خود را روشن کنید تا به کنسول آن دسترسی داشته باشید",
+  "power-on-vm-for-console": "ماشین مجازی خود را روشن کنید تا به کنسول آن دسترسی داشته باشید",
+  "power-on-host-for-console": "هاست خود را برای دسترسی به کنسول آن روشن کنید",
   "running-vm": "ماشین های مجازی در حال اجرا | ماشین مجازی در حال اجرا",
+  "send-ctrl-alt-del": "ارسال کلیدهای Ctrl+Alt+Del",
   "stats": "آمار",
   "storage": "ذخیره سازی",
-  "support-name": "پشتیبانی حرفه ای {name}",
   "system": "سیستم",
   "tasks": "کارها"
 }

package/lib/locales/fr.json

@@ -7,6 +7,8 @@
 
   "coming-soon": "Bientôt disponible !",
   "console": "Console",
+  "console-actions": "Actions de la console",
+  "console-clipboard": "Presse-papiers de la console",
 
   "core.copied": "Copié",
   "core.copy-id": "Copier l'ID",
@@ -26,7 +28,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",
@@ -39,8 +42,11 @@
   "dark-mode.disable": "Désactiver le mode sombre",
   "dark-mode.auto": "Mode sombre automatique",
 
+  "access-forum": "Accès au forum",
   "dashboard": "Tableau de bord",
   "documentation-name": "Documentation {name}",
+  "exit-fullscreen": "Quitter le plein écran",
+  "fullscreen": "Plein écran",
   "hosts": "Hôtes",
   "learn-more": "En savoir plus",
   "loading-in-progress": "Chargement en cours…",
@@ -50,14 +56,19 @@
   "network": "Réseau",
   "no-data": "Aucune donnée",
   "object-not-found": "L'objet {id} est introuvable…",
+  "open-console-in-new-tab": "Ouvrir la console dans un nouvel onglet",
   "other": "Autre",
   "patches": "Patches",
-  "power-on-for-console": "Allumez votre VM pour accéder à sa console",
+  "power-on-vm-for-console": "Allumez votre VM pour accéder à sa console",
+  "power-on-host-for-console": "Allumez votre hôte pour accéder à sa console",
+  "professional-support": "Support professionel",
+  "receive": "Recevoir",
   "running-vm": "VM en cours d'exécution | VMs en cours d'exécution",
   "see-all": "Voir tout",
+  "send": "Envoyer",
+  "send-ctrl-alt-del": "Envoyer Ctrl+Alt+Suppr",
   "stats": "Stats",
   "storage": "Stockage",
-  "support-name": "Support pro {name}",
   "system": "Système",
 
   "tasks": "Tâches",

package/lib/types/color.type.ts

@@ -1,3 +1 @@
 export type Color = 'normal' | 'success' | 'warning' | 'danger'
-
-export type TagColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'disabled'

package/lib/types/subscribable-store.type.ts

@@ -15,7 +15,7 @@ export type Subscribe<TDefer extends boolean = false> = (options?: {
 
 export type SubscribableStoreConfig<TContext> = {
   context: TContext
-  onSubscribe: () => void
-  onUnsubscribe: () => void
+  onSubscribe?: () => void
+  onUnsubscribe?: () => void
   isEnabled?: MaybeRefOrGetter<boolean>
 }

package/lib/utils/create-subscribable-store-context.util.ts

@@ -60,7 +60,7 @@ export function createSubscribableStoreContext<TContext>(
   }
 
   return {
-    $context: config.context,
+    getContext: () => config.context,
     subscribe,
   }
 }

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

@@ -0,0 +1,23 @@
+# `ifElse`
+
+`ifElse` utility is a wrapper around `watch`.
+
+It allows watching a `boolean` source and execute the first callback if the source is `true`, or the second one if the
+source is `false`.
+
+```ts
+ifElse(mySource, doSomething, doSomethingElse)
+ifElse(mySource, doSomething, doSomethingElse, { immediate: true })
+```
+
+## Example
+
+```ts
+const myValue = ref(5)
+
+ifElse(
+  () => myValue.value > 10,
+  () => console.log('myValue is greater than 10'),
+  () => console.log('myValue is less than or equal to 10')
+)
+```

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

@@ -6,8 +6,8 @@ export interface IfElseOptions extends Pick<WatchOptions, 'immediate'> {}
 
 export function ifElse(
   source: WatchSource<boolean>,
-  onTrue: MaybeArray<VoidFunction>,
-  onFalse: MaybeArray<VoidFunction>,
+  onTrue: MaybeArray<VoidFunction> | undefined,
+  onFalse: MaybeArray<VoidFunction> | undefined,
   options?: IfElseOptions
 ) {
   const onTrueFunctions = toArray(onTrue)

package/lib/utils/to-variants.util.md

@@ -0,0 +1,62 @@
+# toVariants utility
+
+This utility is used to convert a set of props into a list of CSS variants classes.
+
+- No class will be added for _falsy_ values
+- `<key>` class will be added for `true` values
+- `<key>--<value>` class will be added for other values
+
+## Basic usage
+
+```ts
+const props = defineProps<{
+  label: string
+  color: 'blue' | 'red'
+  size: 'small' | 'large'
+  disabled?: boolean
+}>()
+
+const variants = computed(() =>
+  toVariants({
+    color: props.color,
+    size: props.size,
+    disabled: props.disabled,
+  })
+)
+```
+
+If `color` is `'blue'`, `size` is `'small'`, and `disabled` is `false`,
+then `variants` will be `['color--blue', 'size--small']`.
+
+## Advanced usage
+
+Variants don't have to be based on props, you can define them the way you want.
+
+Thanks to the way Vue works, they can also be mixed with other classes.
+
+```ts
+const props = defineProps<{
+  label: string
+  color: 'blue' | 'red'
+  size: 'small' | 'large'
+}>()
+
+const isDisabled = inject('isParentDisabled', ref(false))
+
+const typoClasses = {
+  small: 'typo p3-regular',
+  large: 'typo p2-medium',
+}
+
+const classes = computed(() => [
+  typoClasses[props.size],
+  { disabled: isDisabled.value },
+  toVariants({
+    color: props.color,
+    size: props.size.slice(0, 1),
+    state: isDisabled.value ? 'off' : 'on',
+  }),
+])
+```
+
+`classes` applied to the component will then look like `typo p3-regular disabled color-blue size-s state-off`

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xen-orchestra/web-core",
   "type": "module",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "private": false,
   "exports": {
     "./*": {
@@ -23,19 +23,19 @@
     "placement.js": "^1.0.0-beta.5"
   },
   "peerDependencies": {
-    "pinia": "^2.1.7",
-    "vue": "~3.4.13",
+    "pinia": "^2.2.6",
+    "vue": "~3.5.12",
     "vue-i18n": "^9.9.0",
-    "vue-router": "^4.4.0"
+    "vue-router": "^4.4.5"
   },
   "devDependencies": {
     "@types/lodash-es": "^4.17.12",
     "@types/novnc__novnc": "^1.5.0",
     "@vue/tsconfig": "^0.5.1",
-    "pinia": "^2.1.7",
-    "vue": "~3.4.13",
+    "pinia": "^2.2.6",
+    "vue": "~3.5.12",
     "vue-i18n": "^9.9.0",
-    "vue-router": "^4.4.0"
+    "vue-router": "^4.4.5"
   },
   "homepage": "https://github.com/vatesfr/xen-orchestra/tree/master/@xen-orchestra/web-core",
   "bugs": "https://github.com/vatesfr/xen-orchestra/issues",

package/lib/components/CardNumbers.vue

@@ -1,101 +0,0 @@
-<!-- v1.0 -->
-<template>
-  <div class="card-numbers" :class="size">
-    <span class="label typo" :class="labelFontClass">{{ label }}</span>
-    <div class="values" :class="size">
-      <span v-if="percentValue" class="value typo c2-semi-bold">
-        {{ percentValue }}
-      </span>
-
-      <div class="value typo" :class="valueFontClass">
-        {{ value ?? '-' }}<span class="unit typo" :class="unitFontClass">{{ unit }}</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts" generic="TSize extends 'small' | 'medium'">
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-interface CardNumbersProps {
-  label: string
-  size: TSize
-  value?: number
-  unit?: string
-  max?: TSize extends 'small' ? number : never
-}
-
-const props = defineProps<CardNumbersProps>()
-
-const { n } = useI18n()
-
-const labelFontClass = computed(() => (props.size === 'medium' ? 'c3-semi-bold' : 'c2-semi-bold'))
-
-const valueFontClass = computed(() => (props.size === 'medium' ? 'h3-semi-bold' : 'c2-semi-bold'))
-
-const unitFontClass = computed(() => (props.size === 'medium' ? 'p2-medium' : 'c2-semi-bold'))
-
-const percentValue = computed(() => {
-  if (props.size !== 'small' || props.max === undefined || props.max === 0) {
-    return undefined
-  }
-
-  if (props.value === undefined) {
-    return n(0, 'percent').replace('0', '-')
-  }
-
-  return n(props.value / props.max, 'percent')
-})
-</script>
-
-<style lang="postcss" scoped>
-/* COLOR VARIANTS */
-.card-numbers {
-  &.small {
-    --label-color: var(--color-neutral-txt-primary);
-  }
-
-  &.medium {
-    --label-color: var(--color-neutral-txt-secondary);
-  }
-}
-
-/* IMPLEMENTATION */
-.card-numbers {
-  display: flex;
-  gap: 0.8rem;
-  width: fit-content;
-
-  &.medium {
-    flex-direction: column;
-    gap: 0.4rem;
-  }
-}
-
-.label {
-  color: var(--label-color);
-}
-
-.values {
-  display: flex;
-  flex-direction: column;
-  gap: 0.8rem;
-  align-items: flex-end;
-
-  &.medium {
-    align-items: flex-start;
-  }
-}
-
-.value {
-  color: var(--color-neutral-txt-primary);
-  display: flex;
-  gap: 0.2rem;
-  align-items: center;
-}
-
-.unit {
-  color: var(--color-neutral-txt-primary);
-}
-</style>

package/lib/components/PowerStateIcon.vue

@@ -1,46 +0,0 @@
-<!-- v1.0 -->
-<template>
-  <VtsIcon :class="className" accent="current" :icon class="power-state-icon" />
-</template>
-
-<script lang="ts" setup>
-import VtsIcon from '@core/components/icon/VtsIcon.vue'
-import type { POWER_STATE } from '@core/types/power-state.type'
-import { faMoon, faPause, faPlay, faStop } from '@fortawesome/free-solid-svg-icons'
-import { computed } from 'vue'
-
-const props = defineProps<{
-  state: POWER_STATE
-}>()
-
-const icons = {
-  running: faPlay,
-  paused: faPause,
-  suspended: faMoon,
-  halted: faStop,
-}
-
-const icon = computed(() => icons[props.state])
-
-const className = computed(() => `state-${props.state}`)
-</script>
-
-<style lang="postcss" scoped>
-.power-state-icon {
-  &.state-suspended {
-    color: var(--color-normal-txt-item);
-  }
-
-  &.state-running {
-    color: var(--color-success-item-base);
-  }
-
-  &.state-paused {
-    color: var(--color-normal-item-active);
-  }
-
-  &.state-halted {
-    color: var(--color-danger-item-base);
-  }
-}
-</style>

package/lib/components/UiTag.vue

@@ -1,101 +0,0 @@
-<!-- v1.2 -->
-<template>
-  <span :class="[color, { light }]" class="ui-tag typo p3-regular">
-    <slot name="icon">
-      <VtsIcon :icon accent="current" fixed-width />
-    </slot>
-    <span class="text-ellipsis"><slot /></span>
-  </span>
-</template>
-
-<script lang="ts" setup>
-import VtsIcon from '@core/components/icon/VtsIcon.vue'
-import type { TagColor } from '@core/types/color.type'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
-
-defineProps<{
-  color: TagColor
-  light?: boolean
-  icon?: IconDefinition
-}>()
-</script>
-
-<style lang="postcss" scoped>
-/* COLOR VARIANTS */
-.ui-tag {
-  &.primary {
-    --background-color: var(--color-normal-item-base);
-    --color: var(--color-normal-txt-item);
-
-    &.light {
-      --background-color: var(--color-normal-background-selected);
-      --color: var(--color-normal-txt-base);
-    }
-  }
-
-  &.secondary {
-    --background-color: var(--color-neutral-txt-primary);
-    --color: var(--color-neutral-background-primary);
-
-    &.light {
-      --background-color: var(--color-neutral-background-secondary);
-      --color: var(--color-neutral-txt-primary);
-    }
-  }
-
-  &.success {
-    --background-color: var(--color-success-item-base);
-    --color: var(--color-success-txt-item);
-
-    &.light {
-      --background-color: var(--color-success-background-selected);
-      --color: var(--color-success-txt-base);
-    }
-  }
-
-  &.warning {
-    --background-color: var(--color-warning-item-base);
-    --color: var(--color-warning-txt-item);
-
-    &.light {
-      --background-color: var(--color-warning-background-selected);
-      --color: var(--color-warning-txt-base);
-    }
-  }
-
-  &.danger {
-    --background-color: var(--color-danger-item-base);
-    --color: var(--color-danger-txt-item);
-
-    &.light {
-      --background-color: var(--color-danger-background-selected);
-      --color: var(--color-danger-txt-base);
-    }
-  }
-
-  &.disabled {
-    --background-color: var(--color-neutral-background-disabled);
-    --color: var(--color-neutral-txt-secondary);
-
-    &.light {
-      --background-color: var(--color-neutral-background-secondary);
-      --color: var(--color-neutral-txt-secondary);
-    }
-  }
-}
-
-/* IMPLEMENTATION */
-.ui-tag {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 0.8rem;
-  white-space: nowrap;
-  color: var(--color);
-  background-color: var(--background-color);
-  padding: 0.2rem 0.8rem;
-  border-radius: 0.4rem;
-  vertical-align: middle;
-  min-width: 0;
-}
-</style>

package/lib/components/backup-item/BackupItem.vue

@@ -1,40 +0,0 @@
-<!-- v1.0 -->
-<template>
-  <div class="backup-item">
-    <RouterLink v-if="backup.route !== undefined" :to="backup.route">
-      {{ backup.label }}
-    </RouterLink>
-    <p v-else class="typo p3-medium">
-      {{ backup.label }}
-    </p>
-    <div class="states">
-      <BackupState v-for="(state, index) in backup.states" :key="index" :state />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import BackupState from '@core/components/backup-state/BackupState.vue'
-import type { Backup } from '@core/types/backup.type'
-
-defineProps<{
-  backup: Backup
-}>()
-</script>
-
-<style lang="postcss" scoped>
-.backup-item {
-  padding: 0.8rem 0.4rem;
-  border-top: 0.1rem solid var(--color-neutral-border);
-  display: flex;
-  align-items: center;
-  gap: 0.2rem;
-}
-
-.states {
-  margin-inline-start: auto;
-  display: flex;
-  align-items: center;
-  gap: 0.2rem;
-}
-</style>