@xen-orchestra/web-core 0.26.1 → 0.28.0

package/lib/components/ui/checkbox/UiCheckbox.vue

@@ -10,7 +10,7 @@
       v-bind="attrs"
     />
     <span class="fake-checkbox">
-      <VtsIcon :icon accent="current" class="icon" />
+      <VtsIcon :name="icon" size="medium" class="icon" />
     </span>
     <span v-if="slots.default" class="typo-body-regular">
       <slot />
@@ -26,7 +26,6 @@ import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import UiInfo from '@core/components/ui/info/UiInfo.vue'
 import { useDisabled } from '@core/composables/disabled.composable'
 import { toVariants } from '@core/utils/to-variants.util'
-import { faCheck, faMinus } from '@fortawesome/free-solid-svg-icons'
 import { computed, type LabelHTMLAttributes, useAttrs } from 'vue'
 
 type CheckboxAccent = 'brand' | 'warning' | 'danger'
@@ -57,13 +56,7 @@ const classNames = computed(() => [
 
 const isIndeterminate = computed(() => checkboxModel.value === undefined)
 
-const icon = computed(() => {
-  if (isIndeterminate.value) {
-    return faMinus
-  }
-
-  return faCheck
-})
+const icon = computed(() => (isIndeterminate.value ? 'fa:minus' : 'fa:check'))
 
 const attrs = useAttrs()
 </script>

package/lib/components/ui/chip/ChipIcon.vue

@@ -1,13 +1,13 @@
 <template>
-  <VtsIcon :class="{ muted: disabled }" accent="current" :icon class="chip-icon" fixed-width />
+  <VtsIcon :class="{ muted: disabled }" :name="icon" size="medium" class="chip-icon" />
 </template>
 
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import type { IconName } from '@core/icons'
 
 defineProps<{
-  icon?: IconDefinition
+  icon?: IconName
   disabled?: boolean
 }>()
 </script>

package/lib/components/ui/chip/ChipRemoveIcon.vue

@@ -1,11 +1,10 @@
 <template>
-  <UiButtonIcon :accent="buttonAccent" :icon="faXmark" size="small" />
+  <UiButtonIcon :accent="buttonAccent" icon="fa:xmark" size="small" />
 </template>
 
 <script lang="ts" setup>
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import type { ChipAccent } from '@core/components/ui/chip/UiChip.vue'
-import { faXmark } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'
 
 const { accent } = defineProps<{

package/lib/components/ui/chip/UiChip.vue

@@ -12,15 +12,15 @@
 <script lang="ts" setup>
 import ChipIcon from '@core/components/ui/chip/ChipIcon.vue'
 import ChipRemoveIcon from '@core/components/ui/chip/ChipRemoveIcon.vue'
+import type { IconName } from '@core/icons'
 import { toVariants } from '@core/utils/to-variants.util'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { computed } from 'vue'
 
 export type ChipAccent = 'info' | 'success' | 'warning' | 'danger'
 
 const props = defineProps<{
   accent: ChipAccent
-  icon?: IconDefinition
+  icon?: IconName
   disabled?: boolean
 }>()
 

package/lib/components/ui/circle-progress-bar/UiCircleProgressBar.vue

@@ -18,7 +18,7 @@
       />
     </svg>
     <div v-if="size !== 'extra-small'" class="overlay">
-      <VtsIcon v-if="isComplete" class="icon" :icon :accent="iconAccent" />
+      <VtsIcon v-if="isComplete" class="icon" :name="icon" size="medium" />
       <span v-else>{{ percentValue }}</span>
     </div>
   </div>
@@ -26,8 +26,8 @@
 
 <script setup lang="ts">
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import type { IconName } from '@core/icons'
 import { toVariants } from '@core/utils/to-variants.util.ts'
-import { faCheck, faExclamation } from '@fortawesome/free-solid-svg-icons'
 import { useClamp, useMax } from '@vueuse/math'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -90,8 +90,7 @@ const dashOffset = computed(() => {
 
 const percentValue = computed(() => n(valuePercent.value / 100, 'percent'))
 
-const iconAccent = computed(() => (isCompleteWithSuccess.value ? 'success' : accent))
-const icon = computed(() => (accent === 'warning' || accent === 'danger' ? faExclamation : faCheck))
+const icon = computed<IconName>(() => (accent === 'warning' || accent === 'danger' ? 'fa:exclamation' : 'fa:check'))
 
 const className = computed(() => [
   fontClass.value,
@@ -125,6 +124,10 @@ const className = computed(() => [
     .success {
       stroke: var(--color-success-item-base);
     }
+
+    .icon {
+      color: var(--color-success-item-base);
+    }
   }
 
   &.accent--warning {

package/lib/components/ui/collapsible-list/UiCollapsibleList.vue

@@ -0,0 +1,73 @@
+<!-- v1 -->
+<template>
+  <div class="ui-collapsible-list" :class="{ expanded: isExpanded }">
+    <component :is="tag" class="container">
+      <slot />
+    </component>
+    <div v-if="hasMoreItems" class="footer">
+      <span v-if="!isExpanded" class="typo-body-regular-small">{{ t('n-more', { n: remainingItems }) }}</span>
+      <UiButton size="small" accent="brand" variant="tertiary" @click="isExpanded = !isExpanded">
+        {{ isExpanded ? t('see-less') : t('see-all') }}
+      </UiButton>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import UiButton from '@core/components/ui/button/UiButton.vue'
+import { useStyleTag } from '@vueuse/core'
+import { useMax } from '@vueuse/math'
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const {
+  tag,
+  totalItems,
+  visibleItems = 5,
+} = defineProps<{
+  tag: string
+  totalItems: number
+  visibleItems?: number
+}>()
+
+defineSlots<{
+  default(): any
+}>()
+
+const { t } = useI18n()
+
+const remainingItems = useMax(() => totalItems - visibleItems, 0)
+
+const hasMoreItems = computed(() => remainingItems.value > 0)
+
+const isExpanded = ref(false)
+
+const style = computed(
+  () => `.ui-collapsible-list:not(.expanded) > .container *:nth-child(n+${visibleItems + 1}) { display: none }`
+)
+
+useStyleTag(style)
+</script>
+
+<style lang="postcss" scoped>
+.ui-collapsible-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+  align-items: start;
+
+  .container {
+    display: flex;
+    flex-direction: column;
+    gap: 0.8rem;
+    width: 100%;
+  }
+
+  .footer {
+    display: flex;
+    gap: 1.2rem;
+    align-items: center;
+    color: var(--color-neutral-txt-secondary);
+  }
+}
+</style>

package/lib/components/ui/donut-chart/UiDonutChart.vue

@@ -1,25 +1,27 @@
 <!-- v3 -->
 <template>
-  <svg class="ui-donut-chart" viewBox="0 0 100 100">
-    <circle class="segment accent--muted" cx="50" cy="50" r="40" />
-    <circle
-      v-for="(segment, index) in computedSegments"
-      :key="index"
-      :class="`accent--${segment.accent}`"
-      :stroke-dasharray="`${segment.percent} ${circumference - segment.percent}`"
-      :stroke-dashoffset="segment.offset"
-      class="segment"
-      cx="50"
-      cy="50"
-      r="40"
-    />
-    <VtsIcon :icon accent="current" height="24" width="24" x="38" y="38" />
-  </svg>
+  <div class="ui-donut-chart">
+    <VtsIcon v-if="icon" :name="icon" size="medium" class="chart-icon" />
+    <svg viewBox="0 0 100 100">
+      <circle class="segment accent--muted" cx="50" cy="50" r="40" />
+      <circle
+        v-for="(segment, index) in computedSegments"
+        :key="index"
+        :class="`accent--${segment.accent}`"
+        :stroke-dasharray="`${segment.percent} ${circumference - segment.percent}`"
+        :stroke-dashoffset="segment.offset"
+        class="segment"
+        cx="50"
+        cy="50"
+        r="40"
+      />
+    </svg>
+  </div>
 </template>
 
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import type { IconName } from '@core/icons'
 import { computed } from 'vue'
 
 export type DonutSegmentAccent = 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'muted'
@@ -31,7 +33,7 @@ export type DonutSegment = {
 
 export type DonutChartProps = {
   segments: DonutSegment[]
-  icon?: IconDefinition
+  icon?: IconName
 }
 
 const props = defineProps<DonutChartProps>()
@@ -59,9 +61,20 @@ const computedSegments = computed(() => {
 
 <style lang="postcss" scoped>
 .ui-donut-chart {
+  display: grid;
+  place-items: center;
   width: 100px;
   height: 100px;
 
+  .chart-icon {
+    grid-area: 1 / 1;
+    z-index: 1;
+  }
+
+  svg {
+    grid-area: 1 / 1;
+  }
+
   .segment {
     stroke-width: 10;
     fill: transparent;

package/lib/components/ui/dropdown/UiDropdown.vue

@@ -3,7 +3,7 @@
   <div v-tooltip="{ selector: '.text-ellipsis' }" :class="className" class="ui-dropdown">
     <UiCheckbox v-if="checkbox" :disabled :model-value="selected" accent="brand" />
     <slot name="icon">
-      <VtsIcon :icon accent="current" />
+      <VtsIcon :name="icon" size="medium" />
     </slot>
     <div class="text-ellipsis typo-body-bold-small">
       <slot />
@@ -11,10 +11,9 @@
     <div v-if="info" class="info typo-body-regular-small">{{ info }}</div>
     <VtsIcon
       v-if="subMenuIcon || locked"
-      :accent="disabled ? 'current' : 'brand'"
-      :icon="locked ? faLock : faAngleRight"
+      :name="locked ? 'fa:lock' : 'fa:angle-right'"
+      size="medium"
       class="right-icon"
-      fixed-width
     />
   </div>
 </template>
@@ -23,9 +22,8 @@
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import UiCheckbox from '@core/components/ui/checkbox/UiCheckbox.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
+import type { IconName } from '@core/icons'
 import { toVariants } from '@core/utils/to-variants.util'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
-import { faAngleRight, faLock } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'
 
 export type DropdownAccent = 'normal' | 'brand' | 'success' | 'warning' | 'danger'
@@ -44,7 +42,7 @@ const {
   hover?: boolean
   checkbox?: boolean
   subMenuIcon?: boolean
-  icon?: IconDefinition
+  icon?: IconName
   info?: string
 }>()
 

package/lib/components/ui/dropdown-button/UiDropdownButton.vue

@@ -1,24 +1,23 @@
 <!-- v5 -->
 <template>
   <button :class="{ selected }" :disabled="isDisabled" class="ui-dropdown-item" type="button">
-    <VtsIcon :icon accent="current" class="left-icon" fixed-width />
+    <VtsIcon :name="icon" size="medium" />
     <span class="typo-action-button label">
       <slot />
     </span>
-    <VtsIcon :icon="faAngleDown" accent="current" class="right-icon" fixed-width />
+    <VtsIcon name="fa:angle-down" size="medium" />
   </button>
 </template>
 
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import { useDisabled } from '@core/composables/disabled.composable'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
-import { faAngleDown } from '@fortawesome/free-solid-svg-icons'
+import type { IconName } from '@core/icons'
 
 const { disabled, selected, icon } = defineProps<{
   disabled?: boolean
   selected?: boolean
-  icon?: IconDefinition
+  icon?: IconName
 }>()
 
 const isDisabled = useDisabled(() => disabled)

package/lib/components/ui/head-bar/UiHeadBar.vue

@@ -2,11 +2,9 @@
 <template>
   <div class="ui-head-bar">
     <div class="label-wrapper">
-      <span v-if="slots.icon || icon" class="icon">
-        <slot name="icon">
-          <VtsIcon :icon accent="current" />
-        </slot>
-      </span>
+      <slot name="icon">
+        <VtsIcon :name="icon" size="medium" />
+      </slot>
       <h4 v-tooltip class="typo-h4 label text-ellipsis">
         <slot />
       </h4>
@@ -23,10 +21,10 @@
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import type { IconName } from '@core/icons'
 
 defineProps<{
-  icon?: IconDefinition
+  icon?: IconName
 }>()
 
 const slots = defineSlots<{
@@ -39,6 +37,7 @@ const slots = defineSlots<{
 
 <style lang="postcss" scoped>
 .ui-head-bar {
+  min-height: 5.6rem;
   padding: 0.8rem 1.6rem;
   display: flex;
   gap: 1.6rem;
@@ -57,10 +56,6 @@ const slots = defineSlots<{
     color: var(--color-neutral-txt-primary);
   }
 
-  .icon {
-    font-size: 2.4rem;
-  }
-
   .status {
     color: var(--color-neutral-txt-secondary);
     display: flex;

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

@@ -1,7 +1,7 @@
 <!-- v4 -->
 <template>
   <div class="ui-info">
-    <VtsIcon :accent class="icon" :icon="faCircle" :overlay-icon="icon" />
+    <VtsIcon class="icon" :name="icon" size="medium" />
     <p v-tooltip="!wrap" class="typo-body-regular-small" :class="{ 'text-ellipsis': !wrap }">
       <slot />
     </p>
@@ -11,16 +11,8 @@
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
-import {
-  faCheck,
-  faCircle,
-  faExclamation,
-  faInfo,
-  faMinus,
-  faXmark,
-  type IconDefinition,
-} from '@fortawesome/free-solid-svg-icons'
-import { computed } from 'vue'
+import type { IconName } from '@core/icons'
+import { useMapper } from '@core/packages/mapper'
 
 export type InfoAccent = 'info' | 'success' | 'warning' | 'danger' | 'muted'
 
@@ -33,15 +25,17 @@ defineSlots<{
   default(): any
 }>()
 
-const iconByAccent: Record<InfoAccent, IconDefinition> = {
-  info: faInfo,
-  success: faCheck,
-  warning: faExclamation,
-  danger: faXmark,
-  muted: faMinus,
-}
-
-const icon = computed(() => iconByAccent[accent])
+const icon = useMapper<InfoAccent, IconName>(
+  () => accent,
+  {
+    info: 'legacy:status:info',
+    success: 'legacy:status:success',
+    warning: 'legacy:status:warning',
+    danger: 'legacy:status:danger',
+    muted: 'legacy:status:muted',
+  },
+  'muted'
+)
 </script>
 
 <style lang="postcss" scoped>

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

@@ -1,7 +1,7 @@
 <!-- v5 -->
 <template>
   <div :class="toVariants({ accent, disabled })" class="ui-input" @click.self="focus()">
-    <VtsIcon :icon accent="current" class="left-icon" />
+    <VtsIcon :name="icon" size="medium" class="left-icon" />
     <input
       :id="wrapperController?.id ?? id"
       ref="inputRef"
@@ -14,14 +14,14 @@
     />
     <UiButtonIcon
       v-if="!disabled && modelValue && clearable"
-      :icon="faXmark"
+      icon="fa:xmark"
       :target-scale="1.6"
       accent="brand"
       size="small"
       @click="clear()"
     />
     <slot v-if="slots['right-icon'] || rightIcon" name="right-icon">
-      <VtsIcon :icon="rightIcon" accent="current" class="right-icon" />
+      <VtsIcon :name="rightIcon" size="medium" class="right-icon" />
     </slot>
   </div>
 </template>
@@ -30,11 +30,10 @@
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import type { LabelAccent } from '@core/components/ui/label/UiLabel.vue'
+import type { IconName } from '@core/icons'
 import { useMapper } from '@core/packages/mapper/use-mapper.ts'
 import { IK_INPUT_WRAPPER_CONTROLLER } from '@core/utils/injection-keys.util'
 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 { inject, ref, useAttrs, watchEffect } from 'vue'
 
 type InputAccent = 'brand' | 'warning' | 'danger'
@@ -55,8 +54,8 @@ const {
   required?: boolean
   disabled?: boolean
   type?: InputType
-  icon?: IconDefinition
-  rightIcon?: IconDefinition
+  icon?: IconName
+  rightIcon?: IconName
   clearable?: boolean
 }>()
 

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

@@ -1,7 +1,7 @@
 <!-- v1 -->
 <template>
   <div :class="toVariants({ accent })" class="ui-label">
-    <VtsIcon accent="current" :icon class="icon" />
+    <VtsIcon :name="icon" size="medium" class="icon" />
     <label :for="htmlFor" :class="{ required }" class="typo-caption label">
       <slot />
     </label>
@@ -12,8 +12,8 @@
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import UiLink from '@core/components/ui/link/UiLink.vue'
+import type { IconName } from '@core/icons'
 import { toVariants } from '@core/utils/to-variants.util'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { useI18n } from 'vue-i18n'
 
 export type LabelAccent = 'neutral' | 'warning' | 'danger'
@@ -21,7 +21,7 @@ export type LabelAccent = 'neutral' | 'warning' | 'danger'
 const { for: htmlFor } = defineProps<{
   accent: LabelAccent
   for?: string
-  icon?: IconDefinition
+  icon?: IconName
   required?: boolean
   href?: string
 }>()

package/lib/components/ui/legend/UiLegend.vue

@@ -1,9 +1,9 @@
 <!-- v3 -->
 <template>
   <li :class="classNames" class="ui-legend">
-    <VtsIcon :icon="faCircle" accent="current" class="circle-icon" />
+    <VtsIcon name="fa:circle" size="medium" class="circle-icon" />
     <span class="label typo-body-regular-small"><slot /></span>
-    <VtsIcon v-if="tooltip" v-tooltip="tooltip" :icon="faCircleInfo" class="tooltip-icon" accent="info" />
+    <VtsIcon v-if="tooltip" v-tooltip="tooltip" name="fa:info-circle" size="medium" class="tooltip-icon" />
     <span v-if="valueLabel" class="value-and-unit typo-caption-small">{{ valueLabel }}</span>
   </li>
 </template>
@@ -12,7 +12,6 @@
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import { toVariants } from '@core/utils/to-variants.util'
-import { faCircle, faCircleInfo } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'
 
 export type LegendItemAccent = 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'muted'
@@ -47,6 +46,7 @@ const classNames = computed(() => toVariants({ accent }))
 
   .tooltip-icon {
     font-size: 1.2rem;
+    color: var(--color-info-item-base);
   }
 
   .label {

package/lib/components/ui/legend-title/UiLegendTitle.vue

@@ -2,18 +2,18 @@
 <template>
   <div class="ui-legend-title typo-caption-small">
     <slot />
-    <VtsIcon v-tooltip="iconTooltip ?? false" :icon accent="info" />
+    <VtsIcon v-tooltip="iconTooltip ?? false" class="icon" :name="icon" size="medium" />
   </div>
 </template>
 
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import type { IconName } from '@core/icons'
 
 export type LegendTitleProps = {
   iconTooltip?: string
-  icon?: IconDefinition
+  icon?: IconName
 }
 
 defineProps<LegendTitleProps>()
@@ -29,5 +29,9 @@ defineSlots<{
   display: flex;
   gap: 0.8rem;
   align-items: center;
+
+  .icon {
+    color: var(--color-info-item-base);
+  }
 }
 </style>

package/lib/components/ui/link/UiLink.vue

@@ -1,23 +1,22 @@
 <!-- v3 -->
 <template>
   <component :is="component" :class="classes" class="ui-link" v-bind="attributes">
-    <VtsIcon :icon accent="current" />
+    <VtsIcon :name="icon" size="medium" />
     <slot />
-    <VtsIcon v-if="attributes.target === '_blank'" :icon="faUpRightFromSquare" accent="current" class="external-icon" />
+    <VtsIcon v-if="attributes.target === '_blank'" name="fa:up-right-from-square" size="medium" class="external-icon" />
   </component>
 </template>
 
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import { type LinkOptions, useLinkComponent } from '@core/composables/link-component.composable'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
-import { faUpRightFromSquare } from '@fortawesome/free-solid-svg-icons'
+import type { IconName } from '@core/icons'
 import { computed } from 'vue'
 
 const props = defineProps<
   LinkOptions & {
     size: 'small' | 'medium'
-    icon?: IconDefinition
+    icon?: IconName
   }
 >()