@xen-orchestra/web-core 0.3.0 → 0.5.0

package/lib/components/ui/counter/UiCounter.vue

@@ -0,0 +1,134 @@
+<!-- v2 -->
+<template>
+  <span :class="classNames" class="ui-counter">
+    <span class="inner">{{ value }}</span>
+  </span>
+</template>
+
+<script lang="ts" setup>
+import { toVariants } from '@core/utils/to-variants.util'
+import { computed } from 'vue'
+
+type CounterAccent = 'info' | 'neutral' | 'success' | 'warning' | 'danger' | 'muted'
+type CounterVariant = 'primary' | 'secondary'
+type CounterSize = 'small' | 'medium'
+
+const props = defineProps<{
+  value: number | string
+  accent: CounterAccent
+  variant: CounterVariant
+  size: CounterSize
+}>()
+
+const typoClasses = {
+  small: 'typo p4-semi-bold',
+  medium: 'typo p1-medium',
+}
+
+const classNames = computed(() => {
+  return [
+    typoClasses[props.size],
+    toVariants({
+      accent: props.accent,
+      variant: props.variant,
+      size: props.size,
+    }),
+  ]
+})
+</script>
+
+<style lang="postcss" scoped>
+.ui-counter {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  text-transform: lowercase;
+
+  .inner {
+    line-height: 0;
+  }
+
+  /* VARIANT + ACCENT VARIANTS */
+
+  &.variant--primary {
+    &.accent--info {
+      background-color: var(--color-info-item-base);
+      color: var(--color-info-txt-item);
+    }
+
+    &.accent--neutral {
+      background-color: var(--color-neutral-txt-primary);
+      color: var(--color-neutral-background-primary);
+    }
+
+    &.accent--success {
+      background-color: var(--color-success-item-base);
+      color: var(--color-success-txt-item);
+    }
+
+    &.accent--warning {
+      background-color: var(--color-warning-item-base);
+      color: var(--color-warning-txt-item);
+    }
+
+    &.accent--danger {
+      background-color: var(--color-danger-item-base);
+      color: var(--color-danger-txt-item);
+    }
+
+    &.accent--muted {
+      background-color: var(--color-neutral-background-disabled);
+      color: var(--color-neutral-txt-secondary);
+    }
+  }
+
+  &.variant--secondary {
+    &.accent--info {
+      background-color: var(--color-info-background-selected);
+      color: var(--color-info-txt-base);
+    }
+
+    &.accent--neutral {
+      background-color: var(--color-neutral-background-secondary);
+      color: var(--color-neutral-txt-secondary);
+    }
+
+    &.accent--success {
+      background-color: var(--color-success-background-selected);
+      color: var(--color-success-txt-base);
+    }
+
+    &.accent--warning {
+      background-color: var(--color-warning-background-selected);
+      color: var(--color-warning-txt-base);
+    }
+
+    &.accent--danger {
+      background-color: var(--color-danger-background-selected);
+      color: var(--color-danger-txt-base);
+    }
+
+    &.accent--muted {
+      background-color: var(--color-neutral-background-secondary);
+      color: var(--color-neutral-txt-secondary);
+    }
+  }
+
+  /* SIZE VARIANTS */
+
+  &.size--small {
+    height: 1.5rem;
+    min-width: 1.5rem;
+    border-radius: calc(1.5rem / 2);
+    padding: 0 0.4rem;
+  }
+
+  &.size--medium {
+    height: 2.4rem;
+    min-width: 2.4rem;
+    border-radius: calc(2.4rem / 2);
+    padding: 0 0.6rem;
+  }
+}
+</style>

package/lib/components/{donut-chart/DonutChart.vue → ui/donut-chart/UiDonutChart.vue}

@@ -1,11 +1,11 @@
-<!-- v1.1 -->
+<!-- v3 -->
 <template>
-  <svg class="donut-chart" viewBox="0 0 100 100">
+  <svg class="ui-donut-chart" viewBox="0 0 100 100">
     <circle class="segment" cx="50" cy="50" r="40" />
     <circle
       v-for="(segment, index) in computedSegments"
       :key="index"
-      :class="segment.color"
+      :class="`accent--${segment.accent}`"
       :stroke-dasharray="`${segment.percent} ${circumference - segment.percent}`"
       :stroke-dashoffset="segment.offset"
       class="segment"
@@ -22,11 +22,11 @@ import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { computed } from 'vue'
 
-export type DonutSegmentColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'disabled'
+export type DonutSegmentAccent = 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'muted'
 
 export type DonutSegment = {
   value: number
-  color: DonutSegmentColor
+  accent: DonutSegmentAccent
 }
 
 export type DonutChartProps = {
@@ -49,7 +49,7 @@ const computedSegments = computed(() => {
     nextOffset -= percent
 
     return {
-      color: segment.color,
+      accent: segment.accent,
       percent,
       offset,
     }
@@ -58,39 +58,37 @@ const computedSegments = computed(() => {
 </script>
 
 <style lang="postcss" scoped>
-.donut-chart {
+.ui-donut-chart {
   width: 100px;
   height: 100px;
-}
 
-.segment {
-  stroke: var(--stroke-color);
-  stroke-width: 10;
-  fill: transparent;
-  --stroke-color: var(--color-neutral-txt-primary);
+  .segment {
+    stroke-width: 10;
+    fill: transparent;
 
-  &.primary {
-    --stroke-color: var(--color-normal-item-base);
-  }
+    &.accent--neutral {
+      stroke: var(--color-neutral-txt-primary);
+    }
 
-  &.secondary {
-    --stroke-color: var(--color-neutral-txt-primary);
-  }
+    &.accent--info {
+      stroke: var(--color-info-item-base);
+    }
 
-  &.success {
-    --stroke-color: var(--color-success-item-base);
-  }
+    &.accent--success {
+      stroke: var(--color-success-item-base);
+    }
 
-  &.warning {
-    --stroke-color: var(--color-warning-item-base);
-  }
+    &.accent--warning {
+      stroke: var(--color-warning-item-base);
+    }
 
-  &.danger {
-    --stroke-color: var(--color-danger-item-base);
-  }
+    &.accent--danger {
+      stroke: var(--color-danger-item-base);
+    }
 
-  &.disabled {
-    --stroke-color: var(--color-neutral-background-disabled);
+    &.accent--muted {
+      stroke: var(--color-neutral-background-disabled);
+    }
   }
 }
 </style>

package/lib/components/{head-bar/HeadBar.vue → ui/head-bar/UiHeadBar.vue}

@@ -1,6 +1,6 @@
-<!-- v1.0 -->
+<!-- v3 -->
 <template>
-  <div class="head-bar">
+  <div class="ui-head-bar">
     <div class="label-wrapper">
       <span v-if="slots.icon || icon" class="icon">
         <slot name="icon">
@@ -30,49 +30,49 @@ defineProps<{
 }>()
 
 const slots = defineSlots<{
-  default: () => any
-  icon?: () => any
-  status?: () => any
-  actions?: () => any
+  default(): any
+  icon?(): any
+  status?(): any
+  actions?(): any
 }>()
 </script>
 
 <style lang="postcss" scoped>
-.head-bar {
+.ui-head-bar {
   padding: 0.8rem 1.6rem;
   display: flex;
   gap: 4.8rem;
   align-items: center;
   border-bottom: 0.1rem solid var(--color-neutral-border);
   background-color: var(--color-neutral-background-primary);
-}
 
-.label-wrapper {
-  display: flex;
-  gap: 1.6rem;
-  align-items: center;
-  min-width: 0;
-}
+  .label-wrapper {
+    display: flex;
+    gap: 1.6rem;
+    align-items: center;
+    min-width: 0;
+  }
 
-.label {
-  color: var(--color-neutral-txt-primary);
-}
+  .label {
+    color: var(--color-neutral-txt-primary);
+  }
 
-.icon {
-  font-size: 2.4rem;
-}
+  .icon {
+    font-size: 2.4rem;
+  }
 
-.status {
-  color: var(--color-neutral-txt-secondary);
-  display: flex;
-  align-items: center;
-  gap: 1.6rem;
-}
+  .status {
+    color: var(--color-neutral-txt-secondary);
+    display: flex;
+    align-items: center;
+    gap: 1.6rem;
+  }
 
-.actions {
-  margin-inline-start: auto;
-  display: flex;
-  align-items: center;
-  gap: 0.8rem;
+  .actions {
+    margin-inline-start: auto;
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+  }
 }
 </style>

package/lib/components/{info/VtsInfo.vue → ui/info/UiInfo.vue}

@@ -1,8 +1,10 @@
 <!-- v2 -->
 <template>
-  <div class="vts-info">
+  <div class="ui-info">
     <VtsIcon :accent class="icon" :icon="faCircle" :overlay-icon="icon" />
-    <p class="message"><slot /></p>
+    <p class="message">
+      <slot />
+    </p>
   </div>
 </template>
 
@@ -19,7 +21,7 @@ import {
 import { computed } from 'vue'
 
 type Props = {
-  accent: 'brand' | 'success' | 'warning' | 'danger'
+  accent: 'info' | 'success' | 'warning' | 'danger'
 }
 
 const props = defineProps<Props>()
@@ -29,7 +31,7 @@ defineSlots<{
 }>()
 
 const iconByAccent: Record<Props['accent'], IconDefinition> = {
-  brand: faInfo,
+  info: faInfo,
   success: faCheck,
   warning: faExclamation,
   danger: faXmark,
@@ -39,17 +41,17 @@ const icon = computed(() => iconByAccent[props.accent])
 </script>
 
 <style lang="postcss" scoped>
-.vts-info {
+.ui-info {
   align-items: start;
   display: flex;
   gap: 0.8rem;
-}
 
-.icon {
-  font-size: 1.6rem;
-}
+  .icon {
+    font-size: 1.6rem;
+  }
 
-.message {
-  font-size: 1.2rem;
+  .message {
+    font-size: 1.2rem;
+  }
 }
 </style>

package/lib/components/{input → ui/input}/UiInput.vue

@@ -2,12 +2,12 @@
 <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" />
+    <input :id v-model.trim="modelValue" class="typo p1-regular input" type="search" v-bind="attrs" />
     <VtsIcon
-      v-if="!$attrs.disabled && modelValue"
+      v-if="!attrs.disabled && modelValue"
       :icon="faXmark"
       class="after"
-      accent="brand"
+      accent="info"
       @click="modelValue = ''"
     />
   </div>
@@ -18,7 +18,7 @@ import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import { uniqueId } from '@core/utils/unique-id.util'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { faXmark } from '@fortawesome/free-solid-svg-icons'
-import { computed } from 'vue'
+import { computed, useAttrs } from 'vue'
 
 defineOptions({
   inheritAttrs: false,
@@ -30,6 +30,8 @@ defineProps<{
 
 const modelValue = defineModel<string>({ required: true })
 
+const attrs = useAttrs()
+
 const id = computed(() => uniqueId('input-'))
 </script>
 
@@ -42,17 +44,17 @@ const id = computed(() => uniqueId('input-'))
   }
 
   &:is(:hover, :focus-visible) {
-    --border-color: var(--color-normal-item-hover);
+    --border-color: var(--color-info-item-hover);
     --background-color: var(--color-neutral-background-primary);
   }
 
   &:focus {
-    --border-color: var(--color-normal-item-base);
+    --border-color: var(--color-info-item-base);
     --background-color: var(--color-neutral-background-primary);
   }
 
   &:active {
-    --border-color: var(--color-normal-item-active);
+    --border-color: var(--color-info-item-active);
     --background-color: var(--color-neutral-background-primary);
   }
 

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

@@ -0,0 +1,120 @@
+<!-- v2 -->
+<template>
+  <div class="ui-textarea" :class="toVariants({ accent })">
+    <UiLabel v-if="slots.default" :accent="labelAccent" :required :icon :href><slot /></UiLabel>
+    <textarea v-model="model" :disabled class="textarea" v-bind="attrs" />
+    <UiInfo v-if="slots.info" :accent><slot name="info" /></UiInfo>
+  </div>
+</template>
+
+<script lang="ts" setup>
+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 { computed, useAttrs } from 'vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<{
+  accent: 'info' | 'warning' | 'danger'
+  disabled?: boolean
+  href?: string
+  icon?: IconDefinition
+  required?: boolean
+}>()
+
+const model = defineModel<string>({ required: true })
+
+const slots = defineSlots<{
+  default?(): any
+  info?(): any
+}>()
+
+const attrs = useAttrs()
+
+const labelAccent = computed(() => (props.accent === 'info' ? 'neutral' : props.accent))
+</script>
+
+<style lang="postcss" scoped>
+.ui-textarea {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+
+  .textarea {
+    border-radius: 0.4rem;
+    border-width: 0.1rem;
+    background-color: var(--color-neutral-background-primary);
+    height: 8rem;
+    outline: none;
+    padding: 0.8rem 1.6rem;
+    width: 100%;
+  }
+
+  &.accent--info {
+    .textarea {
+      border-color: var(--color-neutral-border);
+
+      &:hover {
+        border-color: var(--color-info-item-hover);
+      }
+      &:active {
+        border-color: var(--color-info-item-active);
+      }
+      &:focus:not(:active) {
+        border-width: 0.2rem;
+        border-color: var(--color-info-item-base);
+      }
+      &:disabled {
+        background-color: var(--color-neutral-background-disabled);
+        border-color: var(--color-neutral-border);
+      }
+    }
+  }
+
+  &.accent--warning {
+    .textarea {
+      border-color: var(--color-warning-item-base);
+
+      &:hover {
+        border-color: var(--color-warning-item-hover);
+      }
+      &:active {
+        border-color: var(--color-warning-item-active);
+      }
+      &:focus:not(:active) {
+        border-width: 0.2rem;
+        border-color: var(--color-warning-item-base);
+      }
+      &:disabled {
+        background-color: var(--color-neutral-background-disabled);
+        border-color: var(--color-neutral-border);
+      }
+    }
+  }
+
+  &.accent--danger {
+    .textarea {
+      border-color: var(--color-danger-item-base);
+
+      &:hover {
+        border-color: var(--color-danger-item-hover);
+      }
+      &:active {
+        border-color: var(--color-danger-item-active);
+      }
+      &:focus:not(:active) {
+        border-width: 0.2rem;
+        border-color: var(--color-danger-item-base);
+      }
+      &:disabled {
+        background-color: var(--color-neutral-background-disabled);
+        border-color: var(--color-neutral-border);
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,76 @@
+<!-- WIP -->
+<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>
+  </div>
+</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'
+import { faUpRightFromSquare } from '@fortawesome/free-solid-svg-icons'
+
+defineProps<{
+  accent: 'neutral' | 'warning' | 'danger'
+  icon?: IconDefinition
+  required?: boolean
+  href?: string
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.ui-label {
+  display: flex;
+  align-items: center;
+
+  .left-icon {
+    margin-right: 0.8rem;
+  }
+
+  .label {
+    &.required::after {
+      content: '*';
+      margin-left: 0.4rem;
+      color: var(--color-info-txt-base);
+    }
+  }
+
+  .link {
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+    margin-left: auto;
+  }
+
+  .link-icon {
+    font-size: 0.8rem;
+  }
+
+  /* ACCENT VARIANTS */
+
+  &.accent--neutral {
+    .label {
+      color: var(--color-neutral-txt-primary);
+    }
+  }
+
+  &.accent--warning {
+    .label {
+      color: var(--color-warning-txt-base);
+    }
+  }
+
+  &.accent--danger {
+    .label {
+      color: var(--color-danger-txt-base);
+    }
+  }
+}
+</style>