@xen-orchestra/web-core 0.4.0 → 0.5.0

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

@@ -0,0 +1,196 @@
+<!-- v4 -->
+<template>
+  <label :class="variant" class="ui-radio-button typo p1-regular">
+    <span class="radio-container">
+      <input v-model="model" :value :disabled="isDisabled" class="input" type="radio" />
+      <VtsIcon :icon="faCircle" accent="current" class="radio-icon" />
+    </span>
+    <slot />
+  </label>
+</template>
+
+<script lang="ts" setup>
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import { useContext } from '@core/composables/context.composable'
+import { DisabledContext } from '@core/context'
+import { toVariants } from '@core/utils/to-variants.util'
+import { faCircle } from '@fortawesome/free-solid-svg-icons'
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    accent: 'info' | 'success' | 'warning' | 'danger'
+    value: any
+    disabled?: boolean
+  }>(),
+  {
+    disabled: undefined,
+  }
+)
+const model = defineModel<boolean>()
+
+defineSlots<{
+  default(): any
+}>()
+
+const variant = computed(() => toVariants({ accent: props.accent }))
+
+const isDisabled = useContext(DisabledContext, () => props.disabled)
+</script>
+
+<style lang="postcss" scoped>
+.ui-radio-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.8rem;
+
+  .radio-container {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 0.2rem solid var(--accent-color);
+    background-color: transparent;
+    border-radius: 0.8rem;
+    width: 1.6rem;
+    height: 1.6rem;
+    position: relative;
+    transition:
+      border-color 0.125s ease-in-out,
+      background-color 0.125s ease-in-out;
+
+    &:has(input:focus-visible) {
+      outline: none;
+      &::after {
+        position: absolute;
+        content: '';
+        inset: -0.5rem;
+        border: 0.2rem solid var(--color-info-txt-base);
+        border-radius: 0.4rem;
+      }
+    }
+    &:has(.input:disabled) {
+      cursor: not-allowed;
+
+      /*
+      TODO: To be removed or kept after a decision has been taken
+      See https://www.figma.com/design/l2O2VvzJRnOCvqxhM7d124?node-id=8-1940#1021964394
+      */
+
+      &:not(:has(.input:checked)) {
+        --accent-color: var(--color-neutral-txt-secondary);
+      }
+    }
+
+    &:has(.input:checked) {
+      background-color: var(--accent-color);
+    }
+
+    /* INPUT */
+
+    .input {
+      opacity: 0;
+      position: absolute;
+      pointer-events: none;
+    }
+
+    /* ICON */
+
+    .radio-icon {
+      font-size: 0.8rem;
+      position: absolute;
+      opacity: 0;
+      transition: opacity 0.125s ease-in-out;
+    }
+
+    .input:disabled + .radio-icon {
+      color: var(--color-neutral-txt-secondary);
+    }
+
+    .input:checked + .radio-icon {
+      opacity: 1;
+    }
+  }
+
+  /* ACCENT */
+
+  &.accent--info {
+    --accent-color: var(--color-info-item-base);
+
+    &:hover {
+      --accent-color: var(--color-info-item-hover);
+    }
+
+    &:active {
+      --accent-color: var(--color-info-item-active);
+    }
+
+    &:has(.input:disabled) {
+      --accent-color: var(--color-info-item-disabled);
+    }
+
+    .radio-icon {
+      color: var(--color-info-txt-item);
+    }
+  }
+
+  &.accent--success {
+    --accent-color: var(--color-success-item-base);
+
+    &:hover {
+      --accent-color: var(--color-success-item-hover);
+    }
+
+    &:active {
+      --accent-color: var(--color-success-item-active);
+    }
+
+    &:has(.input:disabled) {
+      --accent-color: var(--color-success-item-disabled);
+    }
+
+    .radio-icon {
+      color: var(--color-success-txt-item);
+    }
+  }
+
+  &.accent--warning {
+    --accent-color: var(--color-warning-item-base);
+
+    &:hover {
+      --accent-color: var(--color-warning-item-hover);
+    }
+
+    &:active {
+      --accent-color: var(--color-warning-item-active);
+    }
+
+    &:has(.input:disabled) {
+      --accent-color: var(--color-warning-item-disabled);
+    }
+
+    .radio-icon {
+      color: var(--color-warning-txt-item);
+    }
+  }
+
+  &.accent--danger {
+    --accent-color: var(--color-danger-item-base);
+
+    &:hover {
+      --accent-color: var(--color-danger-item-hover);
+    }
+
+    &:active {
+      --accent-color: var(--color-danger-item-active);
+    }
+
+    &:has(.input:disabled) {
+      --accent-color: var(--color-danger-item-disabled);
+    }
+
+    .radio-icon {
+      color: var(--color-danger-txt-item);
+    }
+  }
+}
+</style>

package/lib/components/ui/radio-button-group/UiRadioButtonGroup.vue

@@ -0,0 +1,56 @@
+<!-- v1 -->
+<template>
+  <div class="ui-radio-button-group">
+    <slot v-if="slots.label || label !== undefined" name="label">
+      <UiLabel :accent="labelAccent">
+        {{ label }}
+      </UiLabel>
+    </slot>
+    <div class="group" :class="{ vertical }">
+      <slot />
+    </div>
+    <slot v-if="slots.info || info !== undefined" name="info">
+      <UiInfo :accent>
+        {{ info }}
+      </UiInfo>
+    </slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import UiInfo from '@core/components/ui/info/UiInfo.vue'
+import UiLabel from '@core/components/ui/label/UiLabel.vue'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  accent: 'info' | 'warning' | 'danger'
+  label?: string
+  info?: string
+  vertical?: boolean
+}>()
+
+const slots = defineSlots<{
+  default(): any
+  label?(): any
+  info?(): any
+}>()
+const labelAccent = computed(() => (props.accent === 'info' ? 'neutral' : props.accent))
+</script>
+
+<style scoped lang="postcss">
+.ui-radio-button-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+
+  .group {
+    display: flex;
+    gap: 6.4rem;
+
+    &.vertical {
+      flex-direction: column;
+      gap: 0.8rem;
+    }
+  }
+}
+</style>

package/lib/components/{stacked-bar → ui/stacked-bar}/StackedBarSegment.vue

@@ -2,7 +2,7 @@
   <div
     v-if="percentage > 0"
     v-tooltip="{ selector: '.text-ellipsis' }"
-    :class="color"
+    :class="`accent--${accent}`"
     :style="{ width: percentage + '%' }"
     class="stacked-bar-segment typo c4-semi-bold"
   >
@@ -18,10 +18,10 @@ import { hasEllipsis } from '@core/utils/has-ellipsis.util'
 import { useResizeObserver } from '@vueuse/core'
 import { ref } from 'vue'
 
-export type StackedBarSegmentColor = 'primary' | 'success' | 'warning' | 'danger'
+export type StackedBarSegmentAccent = 'info' | 'success' | 'warning' | 'danger'
 
 export type StackedBarSegmentProps = {
-  color: StackedBarSegmentColor
+  accent: StackedBarSegmentAccent
   percentage: number
 }
 
@@ -36,37 +36,34 @@ useResizeObserver(ellipsisElement, ([entry]) => {
 </script>
 
 <style lang="postcss" scoped>
-/* COLOR VARIANT */
 .stacked-bar-segment {
-  &.primary {
-    --background-color: var(--color-normal-item-base);
-  }
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  white-space: nowrap;
+  color: var(--color-info-txt-item);
+  padding-inline: 0.8rem;
 
-  &.success {
-    --background-color: var(--color-success-item-base);
+  .hidden {
+    visibility: hidden;
   }
 
-  &.warning {
-    --background-color: var(--color-warning-item-base);
+  /* ACCENT VARIANTS */
+
+  &.accent--info {
+    background-color: var(--color-info-item-base);
   }
 
-  &.danger {
-    --background-color: var(--color-danger-item-base);
+  &.accent--success {
+    background-color: var(--color-success-item-base);
   }
-}
 
-/* IMPLEMENTATION */
-.stacked-bar-segment {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  white-space: nowrap;
-  color: var(--color-normal-txt-item);
-  background-color: var(--background-color);
-  padding-inline: 0.8rem;
-}
+  &.accent--warning {
+    background-color: var(--color-warning-item-base);
+  }
 
-.hidden {
-  visibility: hidden;
+  &.accent--danger {
+    background-color: var(--color-danger-item-base);
+  }
 }
 </style>

package/lib/components/{stacked-bar/StackedBar.vue → ui/stacked-bar/UiStackedBar.vue}

@@ -1,22 +1,22 @@
-<!-- v1.0 -->
+<!-- v2 -->
 <template>
-  <div class="stacked-bar">
+  <div class="ui-stacked-bar">
     <StackedBarSegment
       v-for="(segment, index) in segments"
       :key="index"
-      :color="segment.color"
+      :accent="segment.accent"
       :percentage="max === 0 ? 0 : (segment.value / max) * 100"
     />
   </div>
 </template>
 
 <script lang="ts" setup>
-import StackedBarSegment, { type StackedBarSegmentProps } from '@core/components/stacked-bar/StackedBarSegment.vue'
+import StackedBarSegment, { type StackedBarSegmentProps } from '@core/components/ui/stacked-bar/StackedBarSegment.vue'
 import { computed } from 'vue'
 
 type Segment = {
   value: number
-  color: StackedBarSegmentProps['color']
+  accent: StackedBarSegmentProps['accent']
 }
 
 export type StackedBarProps = {
@@ -32,7 +32,7 @@ const max = computed(() => Math.max(props.maxValue ?? 0, totalValue.value))
 </script>
 
 <style lang="postcss" scoped>
-.stacked-bar {
+.ui-stacked-bar {
   width: 100%;
   display: flex;
   height: 4rem;

package/lib/components/ui/table-actions/UiTableActions.vue

@@ -0,0 +1,46 @@
+<!-- v2 -->
+<template>
+  <div class="ui-table-actions">
+    <div class="actions">
+      <slot name="title">
+        <UiActionsTitle>
+          {{ title }}
+        </UiActionsTitle>
+      </slot>
+      <slot />
+    </div>
+    <div v-if="slots.groupedBy">
+      <slot name="groupedBy" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import UiActionsTitle from '@core/components/ui/actions-title/UiActionsTitle.vue'
+
+defineProps<{
+  title?: string
+}>()
+
+const slots = defineSlots<{
+  default(): any
+  title(): any
+  groupedBy?(): any
+}>()
+</script>
+
+<style scoped lang="postcss">
+.ui-table-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-block: 0.4rem;
+  border-bottom: 0.1rem solid var(--color-neutral-border);
+
+  .actions {
+    display: flex;
+    align-items: center;
+    gap: 2.4rem;
+  }
+}
+</style>

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

@@ -0,0 +1,118 @@
+<!-- v3 -->
+<!-- TODO: implement tertiary variant to bump to v4 -->
+<template>
+  <span :class="toVariants({ accent, variant })" 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 { 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'
+
+defineProps<{
+  accent: TagAccent
+  variant: TagVariant
+  icon?: IconDefinition
+}>()
+
+defineSlots<{
+  default(): any
+  icon?(): any
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.ui-tag {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.8rem;
+  white-space: nowrap;
+  padding: 0.2rem 0.8rem;
+  border-radius: 0.4rem;
+  vertical-align: middle;
+  min-width: 0;
+
+  /* COLOR VARIANTS */
+
+  &.accent--info {
+    &.variant--primary {
+      background-color: var(--color-info-item-base);
+      color: var(--color-info-txt-item);
+    }
+
+    &.variant--secondary {
+      background-color: var(--color-info-background-selected);
+      color: var(--color-info-txt-base);
+    }
+  }
+
+  &.accent--neutral {
+    &.variant--primary {
+      background-color: var(--color-neutral-txt-primary);
+      color: var(--color-neutral-background-primary);
+    }
+
+    &.variant--secondary {
+      background-color: var(--color-neutral-background-secondary);
+      color: var(--color-neutral-txt-primary);
+    }
+  }
+
+  &.accent--success {
+    &.variant--primary {
+      background-color: var(--color-success-item-base);
+      color: var(--color-success-txt-item);
+    }
+
+    &.variant--secondary {
+      background-color: var(--color-success-background-selected);
+      color: var(--color-success-txt-base);
+    }
+  }
+
+  &.accent--warning {
+    &.variant--primary {
+      background-color: var(--color-warning-item-base);
+      color: var(--color-warning-txt-item);
+    }
+
+    &.variant--secondary {
+      background-color: var(--color-warning-background-selected);
+      color: var(--color-warning-txt-base);
+    }
+  }
+
+  &.accent--danger {
+    &.variant--primary {
+      background-color: var(--color-danger-item-base);
+      color: var(--color-danger-txt-item);
+    }
+
+    &.variant--secondary {
+      background-color: var(--color-danger-background-selected);
+      color: var(--color-danger-txt-base);
+    }
+  }
+
+  &.accent--muted {
+    &.variant--primary {
+      background-color: var(--color-neutral-background-disabled);
+      color: var(--color-neutral-txt-secondary);
+    }
+
+    &.variant--secondary {
+      background-color: var(--color-neutral-background-secondary);
+      color: var(--color-neutral-txt-secondary);
+    }
+  }
+}
+</style>

package/lib/components/ui/title/UiTitle.vue

@@ -23,10 +23,10 @@ const slots = defineSlots<{
   align-items: center;
   gap: 2.4rem;
   padding-block-end: 0.4rem;
-  border-bottom: 0.1rem solid var(--color-normal-txt-base);
+  border-bottom: 0.1rem solid var(--color-info-txt-base);
 
   .label {
-    color: var(--color-normal-txt-base);
+    color: var(--color-info-txt-base);
   }
 
   .actions {

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

@@ -0,0 +1,100 @@
+<!-- v3 -->
+<template>
+  <div :class="toVariants({ accent })" class="ui-toaster">
+    <div class="content">
+      <VtsIcon class="information-icon" :accent :icon="faCircle" :overlay-icon="icon" />
+      <div>
+        <div class="typo h5-semi-bold">
+          <slot />
+        </div>
+        <div v-if="slots.description" class="typo p2-regular">
+          <slot name="description" />
+        </div>
+      </div>
+      <UiButtonIcon class="close-icon" :icon="faXmark" :accent size="medium" />
+    </div>
+    <div v-if="slots.actions" class="actions">
+      <slot name="actions" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
+import { toVariants } from '@core/utils/to-variants.util'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import { faXmark, faCheck, faCircle, faInfo, faExclamation } from '@fortawesome/free-solid-svg-icons'
+import { computed } from 'vue'
+
+type ToasterAccent = 'info' | 'success' | 'warning' | 'danger'
+
+const props = defineProps<{
+  accent: ToasterAccent
+}>()
+
+const slots = defineSlots<{
+  default(): any
+  description?(): any
+  actions?(): any
+}>()
+
+const states: Record<ToasterAccent, IconDefinition> = {
+  info: faInfo,
+  success: faCheck,
+  warning: faExclamation,
+  danger: faXmark,
+}
+const icon = computed(() => states[props.accent])
+</script>
+
+<style scoped lang="postcss">
+.ui-toaster {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 1.6rem;
+  border: 0.1rem solid;
+  border-radius: 0.4rem;
+  gap: 0.8rem;
+
+  .content {
+    display: flex;
+    align-items: flex-start;
+    gap: 1.6rem;
+
+    .information-icon {
+      font-size: 2.7rem;
+    }
+
+    .close-icon {
+      margin-inline-start: auto;
+      flex-shrink: 0;
+    }
+  }
+
+  .actions {
+    align-self: flex-end;
+  }
+
+  &.accent--info {
+    background-color: var(--color-info-background-selected);
+    border-color: var(--color-info-item-base);
+  }
+
+  &.accent--success {
+    background-color: var(--color-success-background-selected);
+    border-color: var(--color-success-item-base);
+  }
+
+  &.accent--warning {
+    background-color: var(--color-warning-background-selected);
+    border-color: var(--color-warning-item-base);
+  }
+
+  &.accent--danger {
+    background-color: var(--color-danger-background-selected);
+    border-color: var(--color-danger-item-base);
+  }
+}
+</style>