@xen-orchestra/web-core 0.8.0 → 0.10.0

package/lib/components/connection-status/VtsConnectionStatus.vue

@@ -0,0 +1,29 @@
+<template>
+  <UiInfo :accent="currentStatus.accent">
+    {{ currentStatus.text }}
+  </UiInfo>
+</template>
+
+<script setup lang="ts">
+import UiInfo, { type InfoAccent } from '@core/components/ui/info/UiInfo.vue'
+import { computed, type ComputedRef } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+type ConnectionStatus = 'connected' | 'disconnected' | 'partially-connected' | 'disconnected-from-physical-device'
+type ConnectionStatusesMap = Record<ConnectionStatus, { text: string; accent: InfoAccent }>
+
+const { status } = defineProps<{
+  status: ConnectionStatus
+}>()
+
+const { t } = useI18n()
+
+const statuses: ComputedRef<ConnectionStatusesMap> = computed(() => ({
+  connected: { text: t('connected'), accent: 'success' },
+  disconnected: { text: t('disconnected'), accent: 'danger' },
+  'partially-connected': { text: t('partially-connected'), accent: 'warning' },
+  'disconnected-from-physical-device': { text: t('disconnected-from-physical-device'), accent: 'warning' },
+}))
+
+const currentStatus = computed(() => statuses.value[status])
+</script>

package/lib/components/ui/info/UiInfo.vue

@@ -2,7 +2,7 @@
 <template>
   <div class="ui-info">
     <VtsIcon :accent class="icon" :icon="faCircle" :overlay-icon="icon" />
-    <p class="message">
+    <p v-tooltip="!wrap" class="typo p3-regular" :class="{ 'text-ellipsis': !wrap }">
       <slot />
     </p>
   </div>
@@ -10,6 +10,7 @@
 
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import { vTooltip } from '@core/directives/tooltip.directive'
 import {
   faCheck,
   faCircle,
@@ -20,24 +21,25 @@ import {
 } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'
 
-type Props = {
-  accent: 'info' | 'success' | 'warning' | 'danger'
-}
+export type InfoAccent = 'info' | 'success' | 'warning' | 'danger'
 
-const props = defineProps<Props>()
+const { accent } = defineProps<{
+  accent: InfoAccent
+  wrap?: boolean
+}>()
 
 defineSlots<{
   default(): any
 }>()
 
-const iconByAccent: Record<Props['accent'], IconDefinition> = {
+const iconByAccent: Record<InfoAccent, IconDefinition> = {
   info: faInfo,
   success: faCheck,
   warning: faExclamation,
   danger: faXmark,
 }
 
-const icon = computed(() => iconByAccent[props.accent])
+const icon = computed(() => iconByAccent[accent])
 </script>
 
 <style lang="postcss" scoped>
@@ -49,9 +51,5 @@ const icon = computed(() => iconByAccent[props.accent])
   .icon {
     font-size: 1.6rem;
   }
-
-  .message {
-    font-size: 1.2rem;
-  }
 }
 </style>

package/lib/components/ui/input/UiInput.vue

@@ -1,141 +1,170 @@
-<!-- WIP -->
+<!-- v5 -->
 <template>
-  <div class="ui-input">
-    <VtsIcon :icon accent="current" class="before" />
-    <input :id v-model.trim="modelValue" class="typo p1-regular input" type="search" v-bind="attrs" />
-    <VtsIcon
-      v-if="!attrs.disabled && modelValue"
-      :icon="faXmark"
-      class="after"
-      accent="info"
-      @click="modelValue = ''"
-    />
+  <div class="ui-input" :class="toVariants({ accent })">
+    <UiLabel v-if="slots.default || label" :accent="labelAccent" :required :icon="labelIcon" :href :for="id">
+      <slot>{{ label }}</slot>
+    </UiLabel>
+    <div>
+      <VtsIcon :icon accent="current" class="before" />
+      <input :id v-model.trim="modelValue" class="typo p1-regular input text-ellipsis" :type :disabled v-bind="attrs" />
+      <VtsIcon
+        v-if="!attrs.disabled && modelValue && clearable"
+        :icon="faXmark"
+        class="after"
+        accent="info"
+        @click="modelValue = ''"
+      />
+    </div>
+    <UiInfo v-if="slots.info || info" :accent>
+      <slot name="info">{{ info }}</slot>
+    </UiInfo>
   </div>
 </template>
 
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
-import { uniqueId } from '@core/utils/unique-id.util'
+import UiInfo from '@core/components/ui/info/UiInfo.vue'
+import UiLabel from '@core/components/ui/label/UiLabel.vue'
+import { toVariants } from '@core/utils/to-variants.util'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { faXmark } from '@fortawesome/free-solid-svg-icons'
-import { computed, useAttrs } from 'vue'
+import { computed, useAttrs, useId } from 'vue'
+
+type InputAccent = 'info' | 'warning' | 'danger'
+type InputType = 'text' | 'number' | 'password' | 'search'
 
 defineOptions({
   inheritAttrs: false,
 })
 
-defineProps<{
+const { accent, id = useId() } = defineProps<{
+  accent: InputAccent
+  label?: string
+  info?: string
+  id?: string
+  disabled?: boolean
+  clearable?: boolean
+  href?: string
+  required?: boolean
+  labelIcon?: IconDefinition
   icon?: IconDefinition
+  type?: InputType
 }>()
 
-const modelValue = defineModel<string>({ required: true })
+const modelValue = defineModel<string | number>({ required: true })
+
+const slots = defineSlots<{
+  default?(): any
+  info?(): any
+}>()
 
 const attrs = useAttrs()
 
-const id = computed(() => uniqueId('input-'))
+const labelAccent = computed(() => (accent === 'info' ? 'neutral' : accent))
 </script>
 
 <style lang="postcss" scoped>
-/* COLOR VARIANTS */
-.input {
-  & {
-    --border-color: var(--color-neutral-border);
-    --background-color: var(--color-neutral-background-primary);
+/* IMPLEMENTATION */
+.ui-input {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+
+  .input {
+    border-radius: 0.4rem;
+    border-width: 0.1rem;
+    border-style: solid;
+    background-color: var(--color-neutral-background-primary);
+    color: var(--color-neutral-txt-primary);
+    height: 4rem;
+    outline: none;
+    width: 100%;
+    padding-block: 0.8rem;
+    padding-inline: 1.6rem;
+
+    &::placeholder {
+      color: var(--color-neutral-txt-secondary);
+    }
+
+    &:focus {
+      border-width: 0.2rem;
+    }
+
+    &:has(+ .after) {
+      padding-inline-end: 4.8rem;
+    }
   }
 
-  &:is(:hover, :focus-visible) {
-    --border-color: var(--color-info-item-hover);
-    --background-color: var(--color-neutral-background-primary);
-  }
+  /* VARIANT */
 
-  &:focus {
-    --border-color: var(--color-info-item-base);
-    --background-color: var(--color-neutral-background-primary);
-  }
+  &.accent--info {
+    .input {
+      border-color: var(--color-neutral-border);
 
-  &:active {
-    --border-color: var(--color-info-item-active);
-    --background-color: var(--color-neutral-background-primary);
-  }
+      &:hover {
+        border-color: var(--color-info-item-hover);
+      }
 
-  &:disabled {
-    --border-color: var(--color-neutral-border);
-    --background-color: var(--color-neutral-background-disabled);
-  }
-}
+      &:focus {
+        border-color: var(--color-info-item-base);
+      }
 
-/* BORDER VARIANTS */
-.input {
-  --border-width: 0.1rem;
+      &:active {
+        border-color: var(--color-info-item-active);
+      }
 
-  &:is(:hover, :focus-visible) {
-    --border-width: 0.1rem;
+      &:disabled {
+        border-color: var(--color-neutral-border);
+        background-color: var(--color-neutral-background-disabled);
+      }
+    }
   }
 
-  &:focus {
-    --border-width: 0.2rem;
-  }
+  &.accent--warning {
+    .input {
+      border-color: var(--color-warning-item-base);
 
-  &:active {
-    --border-width: 0.1rem;
+      &:disabled {
+        border-color: var(--color-neutral-border);
+        background-color: var(--color-neutral-background-disabled);
+      }
+    }
   }
 
-  &:disabled {
-    --border-width: 0.1rem;
+  &.accent--danger {
+    .input {
+      border-color: var(--color-danger-item-base);
+
+      &:disabled {
+        border-color: var(--color-neutral-border);
+        background-color: var(--color-neutral-background-disabled);
+      }
+    }
   }
-}
 
-/* IMPLEMENTATION */
-.ui-input {
-  position: relative;
+  /* ICON POSITION */
 
   .before + .input {
     padding-inline-start: 4.8rem;
   }
-}
-
-.input {
-  border: var(--border-width) solid var(--border-color);
-  border-radius: 0.8rem;
-  outline: none;
-  width: 100%;
-  height: 4rem;
-  padding: 0.8rem 1.6rem;
-  color: var(--color-neutral-txt-primary);
-  background-color: var(--background-color);
-
-  &:has(+ .after) {
-    padding-inline-end: 4.8rem;
-  }
 
-  &:disabled {
-    cursor: not-allowed;
+  .before,
+  .after {
+    position: absolute;
+    inset-block: 1.2rem;
   }
 
-  &::placeholder {
+  .before {
     color: var(--color-neutral-txt-secondary);
+    inset-inline-start: 1.6rem;
+    pointer-events: none;
+    z-index: 1;
   }
 
-  &[type='search']::-webkit-search-cancel-button {
-    display: none;
+  .after {
+    inset-inline-end: 1.6rem;
+    cursor: pointer;
   }
 }
-
-.before,
-.after {
-  position: absolute;
-  inset-block: 1.2rem;
-}
-
-.before {
-  color: var(--color-neutral-txt-secondary);
-  inset-inline-start: 1.6rem;
-  pointer-events: none;
-  z-index: 1;
-}
-
-.after {
-  inset-inline-end: 1.6rem;
-  cursor: pointer;
-}
 </style>

package/lib/components/ui/label/UiLabel.vue

@@ -1,24 +1,23 @@
-<!-- WIP -->
+<!-- v1 -->
 <template>
   <div :class="toVariants({ accent })" class="ui-label">
-    <VtsIcon accent="current" :icon class="left-icon" />
-    <span :class="{ required }" class="typo c2-semi-bold label"><slot /></span>
-    <!-- @TODO: Replace it by the VtsLink component when available -->
-    <a v-if="href" :href class="link">
-      <span class="typo p3-regular-underline">{{ $t('learn-more') }}</span>
-      <VtsIcon accent="current" :icon="faUpRightFromSquare" class="link-icon" />
-    </a>
+    <VtsIcon accent="current" :icon class="icon" />
+    <label :for="htmlFor" :class="{ required }" class="typo c2-semi-bold label">
+      <slot />
+    </label>
+    <UiLink v-if="href" class="learn-more-link" size="small" :href>{{ $t('learn-more') }}</UiLink>
   </div>
 </template>
 
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import UiLink from '@core/components/ui/link/UiLink.vue'
 import { toVariants } from '@core/utils/to-variants.util'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
-import { faUpRightFromSquare } from '@fortawesome/free-solid-svg-icons'
 
-defineProps<{
+const { for: htmlFor } = defineProps<{
   accent: 'neutral' | 'warning' | 'danger'
+  for?: string
   icon?: IconDefinition
   required?: boolean
   href?: string
@@ -30,7 +29,7 @@ defineProps<{
   display: flex;
   align-items: center;
 
-  .left-icon {
+  .icon {
     margin-right: 0.8rem;
   }
 
@@ -42,17 +41,10 @@ defineProps<{
     }
   }
 
-  .link {
-    display: flex;
-    align-items: center;
-    gap: 0.8rem;
+  .learn-more-link {
     margin-left: auto;
   }
 
-  .link-icon {
-    font-size: 0.8rem;
-  }
-
   /* ACCENT VARIANTS */
 
   &.accent--neutral {

package/lib/components/ui/query-search-bar/UiQuerySearchBar.vue

@@ -7,6 +7,8 @@
     <UiInput
       :id
       v-model="value"
+      type="text"
+      accent="info"
       :aria-label="uiStore.isMobile ? $t('core.query-search-bar.label') : undefined"
       :icon="uiStore.isDesktop ? faMagnifyingGlass : undefined"
       :placeholder="$t('core.query-search-bar.placeholder')"

package/lib/components/ui/table-pagination/PaginationButton.vue

@@ -0,0 +1,33 @@
+<template>
+  <UiButtonIcon :disabled accent="info" class="pagination-button" size="small" :icon />
+</template>
+
+<script setup lang="ts">
+import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+
+const { disabled, icon } = defineProps<{
+  disabled: boolean
+  icon: IconDefinition
+}>()
+</script>
+
+<style scoped lang="postcss">
+.pagination-button.accent--info {
+  border: 0.1rem solid var(--color-neutral-border);
+  font-size: 1rem;
+
+  &:hover {
+    border-color: var(--color-info-item-hover);
+  }
+
+  &:active {
+    border-color: var(--color-info-item-active);
+  }
+
+  &:disabled {
+    background-color: var(--color-neutral-background-disabled);
+    border-color: transparent;
+  }
+}
+</style>

package/lib/components/ui/table-pagination/UiTablePagination.vue

@@ -0,0 +1,178 @@
+<!-- v2 -->
+<template>
+  <div class="ui-table-pagination">
+    <div class="buttons-container">
+      <PaginationButton :disabled="isFirstPage || disabled" :icon="faAngleDoubleLeft" @click="goToFirstPage()" />
+      <PaginationButton :disabled="isFirstPage || disabled" :icon="faAngleLeft" @click="goToPreviousPage()" />
+      <PaginationButton :disabled="isLastPage || disabled" :icon="faAngleRight" @click="goToNextPage()" />
+      <PaginationButton :disabled="isLastPage || disabled" :icon="faAngleDoubleRight" @click="goToLastPage()" />
+    </div>
+    <span class="typo p3-regular label">
+      {{ $t('core.select.n-object-of', { from: startIndex, to: endIndex, total: totalItems }) }}
+    </span>
+    <span class="typo p3-regular label show">{{ $t('core.show-by') }}</span>
+    <div class="dropdown-wrapper">
+      <select v-model="pageSize" :disabled class="dropdown typo c3-regular" @change="goToFirstPage">
+        <option v-for="option in pageSizeOptions" :key="option" :value="option" class="typo p2-medium">
+          {{ option }}
+        </option>
+      </select>
+      <VtsIcon class="icon" accent="current" :icon="faAngleDown" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import PaginationButton from '@core/components/ui/table-pagination/PaginationButton.vue'
+import {
+  faAngleDoubleLeft,
+  faAngleDoubleRight,
+  faAngleDown,
+  faAngleLeft,
+  faAngleRight,
+} from '@fortawesome/free-solid-svg-icons'
+import { useOffsetPagination } from '@vueuse/core'
+import { computed, ref, watch } from 'vue'
+
+export type PaginationPayload = {
+  currentPage: number
+  pageSize: number
+  startIndex: number
+  endIndex: number
+}
+
+const { totalItems, disabled = false } = defineProps<{
+  totalItems: number
+  disabled?: boolean
+}>()
+
+const emit = defineEmits<{
+  change: [payload: PaginationPayload]
+}>()
+
+const pageSize = ref(50)
+const pageSizeOptions = [10, 50, 100, 150, 200]
+const {
+  currentPage,
+  currentPageSize,
+  pageCount,
+  isFirstPage,
+  isLastPage,
+  prev: goToPreviousPage,
+  next: goToNextPage,
+} = useOffsetPagination({
+  total: () => totalItems,
+  pageSize,
+})
+const startIndex = computed(() => (currentPage.value - 1) * currentPageSize.value + 1)
+const endIndex = computed(() => Math.min(currentPage.value * currentPageSize.value, totalItems))
+
+const goToFirstPage = () => {
+  currentPage.value = 1
+}
+const goToLastPage = () => {
+  currentPage.value = pageCount.value
+}
+
+watch([currentPage, currentPageSize], ([newPage, newPageSize]) => {
+  emit('change', {
+    currentPage: newPage,
+    pageSize: newPageSize,
+    startIndex: startIndex.value,
+    endIndex: endIndex.value,
+  })
+})
+</script>
+
+<style scoped lang="postcss">
+.ui-table-pagination {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+
+  .buttons-container {
+    display: flex;
+    gap: 0.2rem;
+  }
+
+  .label {
+    color: var(--color-neutral-txt-secondary);
+  }
+
+  .show::before {
+    content: '-';
+    margin-right: 0.8rem;
+  }
+
+  .dropdown-wrapper {
+    position: relative;
+
+    .dropdown {
+      cursor: pointer;
+      padding: 0.2rem 0.6rem;
+      height: 2.6rem;
+      width: 4.8rem;
+      appearance: none;
+      border-radius: 0.4rem;
+      color: var(--color-info-txt-base);
+      border: 0.1rem solid var(--color-neutral-border);
+      background-color: var(--color-neutral-background-primary);
+
+      &:hover {
+        border-color: var(--color-info-item-hover);
+        background-color: var(--color-info-background-hover);
+        color: var(--color-info-txt-hover);
+
+        + .icon {
+          color: var(--color-info-txt-hover);
+        }
+      }
+
+      &:disabled {
+        cursor: not-allowed;
+        background-color: var(--color-neutral-background-disabled);
+        color: var(--color-neutral-txt-secondary);
+        border-color: transparent;
+
+        + .icon {
+          color: var(--color-neutral-txt-secondary);
+        }
+      }
+
+      &:active {
+        background-color: var(--color-info-background-active);
+        border-color: var(--color-info-item-active);
+      }
+
+      &:focus-visible {
+        outline: 0.1rem solid var(--color-info-item-base);
+        border: 0.1rem solid var(--color-info-item-base);
+        color: var(--color-info-txt-base);
+        background-color: var(--color-info-background-selected);
+
+        + .icon {
+          color: var(--color-info-txt-base);
+        }
+      }
+
+      option {
+        background-color: var(--color-neutral-background-primary);
+        border: 0.1rem solid var(--color-neutral-border);
+        border-radius: 0.4rem;
+        color: var(--color-neutral-txt-primary);
+      }
+    }
+
+    .icon {
+      position: absolute;
+      top: 50%;
+      right: 0.8rem;
+      transform: translateY(-50%);
+      pointer-events: none;
+      font-size: 1rem;
+      color: var(--color-info-txt-base);
+    }
+  }
+}
+</style>

package/lib/locales/en.json

@@ -21,6 +21,7 @@
   "core.quick-actions": "Quick actions",
 
   "core.search": "Search",
+  "core.show-by": "Show by",
 
   "core.query-search-bar.label": "Search Engine",
   "core.query-search-bar.placeholder": "Write your query…",
@@ -29,6 +30,7 @@
   "core.select.all": "Select all",
   "core.select.none": "Select none",
   "core.select.unselect": "Unselect all",
+  "core.select.n-object-of": "{from} - {to} of {total} objects",
   "core.select.n-selected-of": "{count} selected of {total} objects",
   "core.sidebar.close": "Close sidebar",
   "core.sidebar.lock": "Lock sidebar open",
@@ -43,7 +45,10 @@
   "dark-mode.auto": "Auto dark mode",
 
   "access-forum": "Access forum",
+  "connected": "Connected",
   "dashboard": "Dashboard",
+  "disconnected": "Disconnected",
+  "disconnected-from-physical-device": "Disconnected from physical device",
   "documentation-name": "{name} documentation",
   "error-no-data": "Error, can't collect data.",
   "exit-fullscreen": "Exit fullscreen",
@@ -61,6 +66,7 @@
   "open-console-in-new-tab": "Open console in new tab",
   "other": "Other",
   "page-not-found": "This page is not to be found…",
+  "partially-connected": "Partially connected",
   "patches": "Patches",
   "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",

package/lib/locales/fr.json

@@ -21,6 +21,7 @@
   "core.quick-actions": "Actions rapides",
 
   "core.search": "Rechercher",
+  "core.show-by": "Afficher par",
 
   "core.query-search-bar.label": "Moteur de recherche",
   "core.query-search-bar.placeholder": "Écrivez votre requête…",
@@ -29,6 +30,7 @@
   "core.select.all": "Tout sélectionner",
   "core.select.none": "Tout désélectionner",
   "core.select.unselect": "Tout désélectionner",
+  "core.select.n-object-of": "{from} - {to} de {total} objets",
   "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",
@@ -43,7 +45,10 @@
   "dark-mode.auto": "Mode sombre automatique",
 
   "access-forum": "Accès au forum",
+  "connected": "Connecté",
   "dashboard": "Tableau de bord",
+  "disconnected": "Déconnecté",
+  "disconnected-from-physical-device": "Déconnecté de l'appareil physique",
   "documentation-name": "Documentation {name}",
   "error-no-data": "Erreur, impossible de collecter les données.",
   "exit-fullscreen": "Quitter le plein écran",
@@ -61,6 +66,7 @@
   "open-console-in-new-tab": "Ouvrir la console dans un nouvel onglet",
   "other": "Autre",
   "page-not-found": "Cette page est introuvable…",
+  "partially-connected": "Partiellement connecté",
   "patches": "Patches",
   "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",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xen-orchestra/web-core",
   "type": "module",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "private": false,
   "exports": {
     "./*": {