@xen-orchestra/web-core 0.27.0 → 0.28.0

package/lib/components/ui/quick-task-item/UiQuickTaskItem.vue

@@ -2,7 +2,7 @@
 <template>
   <li class="ui-quick-task-item">
     <div v-if="hasSubTasks" class="toggle" @click="toggleExpand()">
-      <UiButtonIcon accent="brand" :icon="isExpanded ? faAngleDown : faAngleRight" size="small" />
+      <UiButtonIcon accent="brand" :icon="isExpanded ? 'fa:angle-down' : 'fa:angle-right'" size="small" />
     </div>
     <div class="content">
       <div class="typo-body-bold">
@@ -12,14 +12,14 @@
         <div class="line-1">
           <UiTag v-if="task.tag" accent="neutral" variant="primary">{{ task.tag }}</UiTag>
           <div v-if="hasSubTasks" class="subtasks">
-            <VtsIcon :icon="faCircleNotch" accent="current" />
+            <VtsIcon name="fa:circle-notch" size="medium" />
             <span class="typo-body-regular-small">{{ t('tasks.n-subtasks', { n: subTasksCount }) }}</span>
           </div>
         </div>
         <div v-if="task.start" class="line-2 typo-body-regular-small">
           {{ d(task.start, 'datetime_short') }}
           <template v-if="task.end">
-            <VtsIcon :icon="faArrowRight" accent="current" />
+            <VtsIcon name="fa:arrow-right" size="medium" />
             {{ d(new Date(task.end), 'datetime_short') }}
           </template>
         </div>
@@ -34,7 +34,6 @@ import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import VtsQuickTaskList from '@core/components/task/VtsQuickTaskList.vue'
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import UiTag from '@core/components/ui/tag/UiTag.vue'
-import { faAngleDown, faAngleRight, faArrowRight, faCircleNotch } from '@fortawesome/free-solid-svg-icons'
 import { useToggle } from '@vueuse/core'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'

package/lib/components/ui/radio-button/UiRadioButton.vue

@@ -3,7 +3,7 @@
   <label :class="variant" class="ui-radio-button typo-body-regular">
     <span class="radio-container">
       <input v-model="model" :disabled="isDisabled" :value class="input" type="radio" />
-      <VtsIcon :icon="faCircle" accent="current" class="radio-icon" />
+      <VtsIcon name="fa:circle" size="medium" class="radio-icon" />
     </span>
     <slot />
   </label>
@@ -13,7 +13,6 @@
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import { useDisabled } from '@core/composables/disabled.composable'
 import { toVariants } from '@core/utils/to-variants.util'
-import { faCircle } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'
 
 const { accent, value, disabled } = defineProps<{

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

@@ -4,33 +4,10 @@
 
 <script setup lang="ts">
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import type { IconName } from '@core/icons'
 
 defineProps<{
   disabled: boolean
-  icon: IconDefinition
+  icon: IconName
 }>()
 </script>
-
-<style scoped lang="postcss">
-.pagination-button.accent--brand {
-  border: 0.1rem solid var(--color-neutral-border);
-  font-size: 1rem;
-  /* Override UiButtonIcon size to match DS */
-  width: 3rem;
-  height: 3rem;
-
-  &:hover {
-    border-color: var(--color-brand-item-hover);
-  }
-
-  &:active {
-    border-color: var(--color-brand-item-active);
-  }
-
-  &:disabled {
-    background-color: var(--color-neutral-background-disabled);
-    border-color: transparent;
-  }
-}
-</style>

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

@@ -1,17 +1,21 @@
-<!-- v3 -->
+<!-- v5 -->
 <template>
-  <div class="ui-table-pagination">
-    <div class="buttons-container">
-      <PaginationButton :disabled="isFirstPage" :icon="faAngleDoubleLeft" @click="emit('first')" />
-      <PaginationButton :disabled="isFirstPage" :icon="faAngleLeft" @click="emit('previous')" />
-      <PaginationButton :disabled="isLastPage" :icon="faAngleRight" @click="emit('next')" />
-      <PaginationButton :disabled="isLastPage" :icon="faAngleDoubleRight" @click="emit('last')" />
+  <div class="ui-table-pagination" :class="className">
+    <div class="container">
+      <span class="typo-body-regular-small label">
+        {{ t('core.select.n-object-of', { from, to, total }) }}
+      </span>
+      <div class="buttons-container">
+        <PaginationButton :disabled="isFirstPage" icon="fa:angle-double-left" @click="emit('first')" />
+        <PaginationButton :disabled="isFirstPage" icon="fa:angle-left" @click="emit('previous')" />
+        <PaginationButton :disabled="isLastPage" icon="fa:angle-right" @click="emit('next')" />
+        <PaginationButton :disabled="isLastPage" icon="fa:angle-double-right" @click="emit('last')" />
+      </div>
+    </div>
+    <div class="container">
+      <span class="typo-body-regular-small label show">{{ t('core.pagination.show-by') }}</span>
+      <VtsSelect :id="showBySelectId" accent="brand" class="typo-body-regular-small show-by-select" />
     </div>
-    <span class="typo-body-regular-small label">
-      {{ t('core.select.n-object-of', { from, to, total }) }}
-    </span>
-    <span class="typo-body-regular-small label show">{{ t('core.pagination.show-by') }}</span>
-    <VtsSelect :id="showBySelectId" accent="brand" class="typo-body-regular-small show-by-select" />
   </div>
 </template>
 
@@ -19,15 +23,19 @@
 import VtsSelect from '@core/components/select/VtsSelect.vue'
 import PaginationButton from '@core/components/ui/table-pagination/PaginationButton.vue'
 import { useFormSelect } from '@core/packages/form-select'
-import { faAngleDoubleLeft, faAngleDoubleRight, faAngleLeft, faAngleRight } from '@fortawesome/free-solid-svg-icons'
+import { toVariants } from '@core/utils/to-variants.util.ts'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-defineProps<{
+export type TablePaginationSize = 'small' | 'medium'
+
+const { size } = defineProps<{
   from: number
   to: number
   total: number
   isFirstPage: boolean
   isLastPage: boolean
+  size: TablePaginationSize
 }>()
 
 const emit = defineEmits<{
@@ -39,6 +47,8 @@ const emit = defineEmits<{
 
 const showBy = defineModel<number>('showBy', { default: 24 })
 
+const className = computed(() => toVariants({ size }))
+
 const { t } = useI18n()
 
 const { id: showBySelectId } = useFormSelect([12, 24, 48, -1], {
@@ -55,6 +65,21 @@ const { id: showBySelectId } = useFormSelect([12, 24, 48, -1], {
   align-items: center;
   gap: 0.8rem;
 
+  &.size--small {
+    flex-direction: column;
+    align-items: flex-end;
+  }
+
+  &.size--medium {
+    flex-direction: row;
+  }
+
+  .container {
+    display: flex;
+    gap: 0.8rem;
+    align-items: center;
+  }
+
   .buttons-container {
     display: flex;
     gap: 0.2rem;
@@ -64,19 +89,15 @@ const { id: showBySelectId } = useFormSelect([12, 24, 48, -1], {
     color: var(--color-neutral-txt-secondary);
   }
 
-  .show::before {
-    content: '-';
-    margin-right: 0.8rem;
-  }
-
   /* Workaround: we don't have "small" select yet */
   .show-by-select {
-    width: 7rem;
+    width: 6rem;
 
     &:deep(.ui-input) {
       height: 3rem;
       padding-inline: 0.8rem;
       gap: 0.8rem;
+      min-width: 6rem;
     }
 
     &:deep(.input) {

package/lib/components/ui/tag/UiTag.vue

@@ -3,7 +3,7 @@
 <template>
   <span :class="toVariants({ accent, variant })" class="ui-tag typo-body-regular-small">
     <slot name="icon">
-      <VtsIcon :icon accent="current" fixed-width />
+      <VtsIcon :name="icon" size="medium" />
     </slot>
     <span class="text-ellipsis"><slot /></span>
   </span>
@@ -11,8 +11,8 @@
 
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import type { IconName } from '@core/icons'
 import { toVariants } from '@core/utils/to-variants.util'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 
 type TagAccent = 'info' | 'neutral' | 'success' | 'warning' | 'danger' | 'muted'
 type TagVariant = 'primary' | 'secondary'
@@ -20,7 +20,7 @@ type TagVariant = 'primary' | 'secondary'
 defineProps<{
   accent: TagAccent
   variant: TagVariant
-  icon?: IconDefinition
+  icon?: IconName
 }>()
 
 defineSlots<{

package/lib/components/ui/text-area/UiTextarea.vue

@@ -19,8 +19,8 @@
 import UiCharacterLimit from '@core/components/ui/character-limit/UiCharacterLimit.vue'
 import UiInfo from '@core/components/ui/info/UiInfo.vue'
 import UiLabel from '@core/components/ui/label/UiLabel.vue'
+import type { IconName } from '@core/icons'
 import { toVariants } from '@core/utils/to-variants.util'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { useFocus } from '@vueuse/core'
 import { computed, useAttrs, useId, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -39,7 +39,7 @@ const {
   maxCharacters?: number
   disabled?: boolean
   href?: string
-  icon?: IconDefinition
+  icon?: IconName
   required?: boolean
 }>()
 

package/lib/components/ui/toaster/UiToaster.vue

@@ -2,7 +2,7 @@
 <template>
   <div :class="toVariants({ accent })" class="ui-toaster">
     <div class="content">
-      <VtsIcon class="information-icon" :accent :icon="faCircle" :overlay-icon="icon" />
+      <VtsIcon class="information-icon" :name="icon" size="medium" />
       <div>
         <div class="typo-h5">
           <slot />
@@ -11,7 +11,7 @@
           <slot name="description" />
         </div>
       </div>
-      <UiButtonIcon class="close-icon" :icon="faXmark" accent="brand" size="medium" @click="emit('close')" />
+      <UiButtonIcon class="close-icon" icon="fa:xmark" accent="brand" size="medium" @click="emit('close')" />
     </div>
     <div v-if="slots.actions" class="actions">
       <slot name="actions" />
@@ -22,14 +22,13 @@
 <script setup lang="ts">
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
+import type { IconName } from '@core/icons'
+import { useMapper } from '@core/packages/mapper'
 import { toVariants } from '@core/utils/to-variants.util'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
-import { faCheck, faCircle, faExclamation, faInfo, faXmark } from '@fortawesome/free-solid-svg-icons'
-import { computed } from 'vue'
 
 type ToasterAccent = 'info' | 'success' | 'warning' | 'danger'
 
-const props = defineProps<{
+const { accent } = defineProps<{
   accent: ToasterAccent
 }>()
 
@@ -43,13 +42,16 @@ const slots = defineSlots<{
   actions?(): any
 }>()
 
-const states: Record<ToasterAccent, IconDefinition> = {
-  info: faInfo,
-  success: faCheck,
-  warning: faExclamation,
-  danger: faXmark,
-}
-const icon = computed(() => states[props.accent])
+const icon = useMapper<ToasterAccent, IconName>(
+  () => accent,
+  {
+    info: 'legacy:status:info',
+    success: 'legacy:status:success',
+    warning: 'legacy:status:warning',
+    danger: 'legacy:status:danger',
+  },
+  'info'
+)
 </script>
 
 <style scoped lang="postcss">

package/lib/components/ui/tree-item-label/UiTreeItemLabel.vue

@@ -19,7 +19,7 @@
         v-tooltip="isExpanded ? t('core.close') : t('core.open')"
         class="toggle"
         accent="brand"
-        :icon="isExpanded ? faAngleDown : faAngleRight"
+        :icon="isExpanded ? 'fa:angle-down' : 'fa:angle-right'"
         size="small"
         :target-scale="{ x: 1.5, y: 2 }"
         @click="emit('toggle')"
@@ -27,7 +27,7 @@
       <div v-else class="h-line" />
       <a v-tooltip="{ selector: '.text' }" :href class="link typo-body-bold-small" @click="navigate">
         <slot name="icon">
-          <VtsIcon :icon accent="current" class="icon" />
+          <VtsIcon :name="icon" size="medium" class="icon" />
         </slot>
         <div class="text text-ellipsis">
           <slot />
@@ -43,9 +43,8 @@ import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import VtsTreeLine from '@core/components/tree/VtsTreeLine.vue'
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
+import type { IconName } from '@core/icons'
 import { IK_TREE_ITEM_EXPANDED, IK_TREE_ITEM_HAS_CHILDREN, IK_TREE_LIST_DEPTH } from '@core/utils/injection-keys.util'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
-import { faAngleDown, faAngleRight } from '@fortawesome/free-solid-svg-icons'
 import { inject, ref, useAttrs } from 'vue'
 import { useI18n } from 'vue-i18n'
 import type { RouteLocationRaw } from 'vue-router'
@@ -56,7 +55,7 @@ defineOptions({
 
 defineProps<{
   route: RouteLocationRaw
-  icon?: IconDefinition
+  icon?: IconName
   active?: boolean
 }>()
 

package/lib/composables/pagination.composable.ts

@@ -1,4 +1,6 @@
+import type { TablePaginationSize } from '@core/components/ui/table-pagination/UiTablePagination.vue'
 import { useRouteQuery } from '@core/composables/route-query.composable'
+import { useUiStore } from '@core/stores/ui.store.ts'
 import { clamp, useLocalStorage } from '@vueuse/core'
 import { computed, type MaybeRefOrGetter, toValue } from 'vue'
 
@@ -60,7 +62,10 @@ export function usePagination<T>(id: string, _records: MaybeRefOrGetter<T[]>) {
     startIndex.value = records.value.length - 1
   }
 
+  const uiStore = useUiStore()
+
   const paginationBindings = computed(() => ({
+    size: (uiStore.isMobile ? 'small' : 'medium') as TablePaginationSize,
     showBy: showBy.value,
     'onUpdate:showBy': (value: number) => (showBy.value = value),
     from: Math.max(0, startIndex.value + 1),

package/lib/i18n.ts

@@ -53,6 +53,10 @@ export const locales: Locales = {
     code: 'nl',
     name: 'Nederlands',
   },
+  pt_BR: {
+    code: 'pt_BR',
+    name: 'Português (Brasil)',
+  },
 }
 
 export default createI18n({

package/lib/icons/fa-icons.ts

@@ -1,5 +1,12 @@
 import { defineIconPack } from '@core/packages/icon/define-icon-pack.ts'
-import { faBuilding, faFile, faFolderClosed, faFolderOpen, faSquareCheck } from '@fortawesome/free-regular-svg-icons'
+import {
+  faBuilding,
+  faFile,
+  faFolderClosed,
+  faFolderOpen,
+  faSquareCheck,
+  faCopy,
+} from '@fortawesome/free-regular-svg-icons'
 import {
   faAlignLeft,
   faAngleDoubleLeft,
@@ -21,6 +28,9 @@ import {
   faCaretDown,
   faCaretUp,
   faCheck,
+  faCheckCircle,
+  faChevronDown,
+  faChevronUp,
   faCircle,
   faCircleCheck,
   faCircleMinus,
@@ -31,7 +41,6 @@ import {
   faClose,
   faCode,
   faComments,
-  faCopy,
   faDatabase,
   faDesktop,
   faDisplay,
@@ -41,17 +50,24 @@ import {
   faEdit,
   faEllipsis,
   faEllipsisVertical,
+  faEraser,
+  faExclamation,
+  faExclamationCircle,
   faExternalLink,
   faEyeSlash,
   faFileCsv,
   faFileExport,
   faFilter,
+  faFloppyDisk,
   faFont,
   faGear,
   faHashtag,
   faHeadset,
+  faInfo,
+  faInfoCircle,
   faKeyboard,
   faLayerGroup,
+  faLink,
   faList,
   faLock,
   faLockOpen,
@@ -74,8 +90,18 @@ import {
   faSatellite,
   faServer,
   faSliders,
+  faSquare,
+  faSquareCaretDown,
+  faStar,
+  faStop,
+  faTags,
+  faThumbTack,
+  faThumbTackSlash,
   faTrash,
+  faTriangleExclamation,
   faUpRightAndDownLeftFromCenter,
+  faUpRightFromSquare,
+  faWarning,
   faXmark,
 } from '@fortawesome/free-solid-svg-icons'
 
@@ -101,6 +127,9 @@ export const faIcons = defineIconPack({
   'caret-down': { icon: faCaretDown },
   'caret-up': { icon: faCaretUp },
   check: { icon: faCheck },
+  'check-circle': { icon: faCheckCircle },
+  'chevron-down': { icon: faChevronDown },
+  'chevron-up': { icon: faChevronUp },
   circle: { icon: faCircle },
   'circle-check': { icon: faCircleCheck },
   'circle-minus': { icon: faCircleMinus },
@@ -121,20 +150,27 @@ export const faIcons = defineIconPack({
   edit: { icon: faEdit },
   ellipsis: { icon: faEllipsis },
   'ellipsis-vertical': { icon: faEllipsisVertical },
+  eraser: { icon: faEraser },
+  exclamation: { icon: faExclamation },
+  'exclamation-circle': { icon: faExclamationCircle },
   'external-link': { icon: faExternalLink },
   'eye-slash': { icon: faEyeSlash },
   file: { icon: faFile },
   'file-csv': { icon: faFileCsv },
   'file-export': { icon: faFileExport },
   filter: { icon: faFilter },
+  'floppy-disk': { icon: faFloppyDisk },
   'folder-closed': { icon: faFolderClosed },
   'folder-open': { icon: faFolderOpen },
   font: { icon: faFont },
   gear: { icon: faGear },
   hashtag: { icon: faHashtag },
   headset: { icon: faHeadset },
+  info: { icon: faInfo },
+  'info-circle': { icon: faInfoCircle },
   keyboard: { icon: faKeyboard },
   'layer-group': { icon: faLayerGroup },
+  link: { icon: faLink },
   list: { icon: faList },
   lock: { icon: faLock },
   'lock-open': { icon: faLockOpen },
@@ -157,8 +193,18 @@ export const faIcons = defineIconPack({
   satellite: { icon: faSatellite },
   server: { icon: faServer },
   sliders: { icon: faSliders },
+  square: { icon: faSquare },
+  'square-caret-down': { icon: faSquareCaretDown },
   'square-check': { icon: faSquareCheck },
+  star: { icon: faStar },
+  stop: { icon: faStop },
+  tags: { icon: faTags },
+  'thumb-tack': { icon: faThumbTack },
+  'thumb-tack-slash': { icon: faThumbTackSlash },
   trash: { icon: faTrash },
+  'triangle-exclamation': { icon: faTriangleExclamation },
   'up-right-and-down-left-from-center': { icon: faUpRightAndDownLeftFromCenter },
+  'up-right-from-square': { icon: faUpRightFromSquare },
+  warning: { icon: faWarning },
   xmark: { icon: faXmark },
 })

package/lib/icons/index.ts

@@ -13,3 +13,7 @@ export const icons = defineIconPack({
 export type IconName = Exclude<keyof typeof icons, typeof ICON_SYMBOL>
 
 export type ObjectIconName = Extract<IconName, `object:${string}`>
+
+export function icon<TName extends IconName>(name: TName): TName {
+  return name
+}

package/lib/icons/legacy-icons.ts

@@ -8,6 +8,8 @@ import {
   faExclamation,
   faInfo,
   faMinus,
+  faMoon,
+  faPause,
   faPlay,
   faStar,
   faStop,
@@ -51,6 +53,10 @@ export const legacyIcons = defineIconPack({
     color: 'var(--color-info-item-base)',
   },
   'legend-circle': { icon: faCircle, size: 8 },
+  paused: {
+    icon: faPause,
+    color: 'var(--color-brand-item-base)',
+  },
   primary: [
     {
       icon: faCircle,
@@ -77,4 +83,8 @@ export const legacyIcons = defineIconPack({
       size: 8,
     },
   ]),
+  suspended: {
+    icon: faMoon,
+    color: 'var(--color-info-item-base)',
+  },
 })

package/lib/icons/object-icons.ts

@@ -156,7 +156,7 @@ export const objectIcons = defineIconPack({
     },
     { icon: getStatusIcon(state) },
   ]),
-  host: defineIcon([['running', 'halted', 'disabled', 'muted', 'unknown']], state => [
+  host: defineIcon([['running', 'halted', 'disabled', 'muted', 'unknown', 'maintenance']], state => [
     {
       icon: faServer,
       color: getMainColor(state),

package/lib/layouts/CoreLayout.vue

@@ -9,7 +9,7 @@
         }"
         accent="brand"
         size="medium"
-        :icon="faBars"
+        icon="fa:bars"
         class="sidebar-toggle"
         :target-scale="1.8"
         @click="sidebarStore.toggleExpand()"
@@ -48,7 +48,6 @@ import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import { useSidebarStore } from '@core/stores/sidebar.store'
 import { useUiStore } from '@core/stores/ui.store'
-import { faBars } from '@fortawesome/free-solid-svg-icons'
 import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()