@xen-orchestra/web-core 0.3.0 → 0.5.0

package/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",
@@ -39,9 +40,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}",
   "hosts": "Hôtes",
+  "learn-more": "En savoir plus",
   "loading-in-progress": "Chargement en cours…",
   "log-out": "Se déconnecter",
   "master": "Hôte primaire",
@@ -51,12 +54,13 @@
   "object-not-found": "L'objet {id} est introuvable…",
   "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",
   "running-vm": "VM en cours d'exécution | VMs en cours d'exécution",
   "see-all": "Voir tout",
   "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.3.0",
+  "version": "0.5.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>