@xen-orchestra/web-core 0.4.0 → 0.6.0

package/lib/components/ui/button-icon/UiButtonIcon.vue

@@ -0,0 +1,248 @@
+<!-- WIP -->
+<!-- TODO: Add complex icon -->
+<template>
+  <button :class="classNames" :disabled class="ui-button-icon" type="button">
+    <VtsIcon :icon accent="current" />
+    <span v-if="dot" class="dot" />
+  </button>
+</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 { computed } from 'vue'
+
+type ButtonIconAccent = 'info' | 'success' | 'warning' | 'danger'
+type ButtonSize = 'small' | 'medium' | 'large'
+
+const props = withDefaults(
+  defineProps<{
+    icon: IconDefinition
+    size: ButtonSize
+    accent: ButtonIconAccent
+    disabled?: boolean
+    selected?: boolean
+    dot?: boolean
+    targetScale?: number | { x: number; y: number }
+  }>(),
+  { targetScale: 1 }
+)
+
+const cssTargetScale = computed(() => {
+  if (typeof props.targetScale === 'number') {
+    return `scale(${props.targetScale})`
+  }
+
+  return `scale(${props.targetScale.x}, ${props.targetScale.y})`
+})
+
+const classNames = computed(() => {
+  return [
+    toVariants({
+      accent: props.accent,
+      size: props.size,
+      muted: props.disabled,
+      selected: props.selected,
+    }),
+  ]
+})
+</script>
+
+<style lang="postcss" scoped>
+.ui-button-icon {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  padding: 0;
+  border-radius: 0.2rem;
+  position: relative;
+  cursor: pointer;
+  outline: none;
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  .dot {
+    position: absolute;
+    display: block;
+    border-radius: 50%;
+    background-color: var(--color-danger-txt-base);
+  }
+
+  /* ACCENT VARIANTS */
+
+  &.accent--info {
+    & {
+      color: var(--color-info-txt-base);
+      background-color: transparent;
+    }
+
+    &:is(:hover, :focus-visible) {
+      color: var(--color-info-txt-hover);
+      background-color: var(--color-info-background-hover);
+    }
+
+    &:active {
+      color: var(--color-info-txt-active);
+      background-color: var(--color-info-background-active);
+    }
+
+    &.selected {
+      color: var(--color-info-txt-base);
+      background-color: var(--color-info-background-selected);
+    }
+
+    &.muted {
+      color: var(--color-neutral-txt-secondary);
+      background-color: transparent;
+    }
+  }
+
+  &.accent--success {
+    & {
+      color: var(--color-success-txt-base);
+      background-color: transparent;
+    }
+
+    &:is(:hover, :focus-visible) {
+      color: var(--color-success-txt-hover);
+      background-color: var(--color-success-background-hover);
+    }
+
+    &:active {
+      color: var(--color-success-txt-active);
+      background-color: var(--color-success-background-active);
+    }
+
+    &.selected {
+      color: var(--color-success-txt-base);
+      background-color: var(--color-success-background-selected);
+    }
+
+    &.muted {
+      color: var(--color-neutral-txt-secondary);
+      background-color: transparent;
+    }
+  }
+
+  &.accent--warning {
+    & {
+      color: var(--color-warning-txt-base);
+      background-color: transparent;
+    }
+
+    &:is(:hover, :focus-visible) {
+      color: var(--color-warning-txt-hover);
+      background-color: var(--color-warning-background-hover);
+    }
+
+    &:active {
+      color: var(--color-warning-txt-active);
+      background-color: var(--color-warning-background-active);
+    }
+
+    &.selected {
+      color: var(--color-warning-txt-base);
+      background-color: var(--color-warning-background-selected);
+    }
+
+    &.muted {
+      color: var(--color-neutral-txt-secondary);
+      background-color: transparent;
+    }
+  }
+
+  &.accent--danger {
+    & {
+      color: var(--color-danger-txt-base);
+      background-color: transparent;
+
+      .dot {
+        background-color: var(--color-warning-txt-base);
+      }
+    }
+
+    &:is(:hover, :focus-visible) {
+      color: var(--color-danger-txt-hover);
+      background-color: var(--color-danger-background-hover);
+    }
+
+    &:active {
+      color: var(--color-danger-txt-active);
+      background-color: var(--color-danger-background-active);
+    }
+
+    &.selected {
+      color: var(--color-danger-txt-base);
+      background-color: var(--color-danger-background-selected);
+    }
+
+    &.muted {
+      color: var(--color-neutral-txt-secondary);
+      background-color: transparent;
+    }
+  }
+
+  /* SIZE VARIANTS */
+
+  &.size--small {
+    & {
+      width: 1.6rem;
+      height: 1.6rem;
+      font-size: 1.2rem;
+    }
+
+    .dot {
+      width: 0.4rem;
+      height: 0.4rem;
+      top: 0.2rem;
+      right: 0.2rem;
+    }
+  }
+
+  &.size--medium {
+    & {
+      width: 2.4rem;
+      height: 2.4rem;
+      font-size: 1.6rem;
+    }
+
+    .dot {
+      width: 0.5rem;
+      height: 0.5rem;
+      top: 0.4rem;
+      right: 0.4rem;
+    }
+  }
+
+  &.size--large {
+    & {
+      width: 4rem;
+      height: 4rem;
+      font-size: 2.4rem;
+    }
+
+    .dot {
+      width: 0.8rem;
+      height: 0.8rem;
+      top: 0.8rem;
+      right: 0.8rem;
+    }
+  }
+
+  /*
+   * Increase the size of the clickable area,
+   * without changing the padding of the ButtonIcon component
+  */
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    transform: v-bind(cssTargetScale);
+  }
+}
+</style>

package/lib/components/{UiCard.vue → ui/card/UiCard.vue}

@@ -5,11 +5,13 @@
 </template>
 
 <script lang="ts" setup>
-type Props = {
+defineProps<{
   horizontal?: boolean
-}
+}>()
 
-defineProps<Props>()
+defineSlots<{
+  default(): any
+}>()
 </script>
 
 <style lang="postcss" scoped>
@@ -21,9 +23,9 @@ defineProps<Props>()
   background-color: var(--color-neutral-background-primary);
   border: 0.1rem solid var(--color-neutral-border);
   border-radius: 0.8rem;
-}
 
-.horizontal {
-  flex-direction: row;
+  &.horizontal {
+    flex-direction: row;
+  }
 }
 </style>

package/lib/components/ui/card-numbers/UiCardNumbers.vue

@@ -0,0 +1,103 @@
+<!-- v1 -->
+<template>
+  <div class="ui-card-numbers" :class="sizeClass">
+    <span class="label" :class="labelFontClass">{{ label }}</span>
+    <div class="values" :class="sizeClass">
+      <span v-if="percentValue" class="value typo c2-semi-bold">
+        {{ percentValue }}
+      </span>
+
+      <div class="value" :class="valueFontClass">
+        {{ value ?? '-' }}<span class="unit" :class="unitFontClass">{{ unit }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" generic="TSize extends 'small' | 'medium'">
+import { toVariants } from '@core/utils/to-variants.util'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const props = defineProps<{
+  label: string
+  size: TSize
+  value?: number
+  unit?: string
+  max?: TSize extends 'small' ? number : never
+}>()
+
+const { n } = useI18n()
+
+const sizeClass = computed(() => toVariants({ size: props.size }))
+
+const labelFontClass = computed(() => (props.size === 'medium' ? 'typo c3-semi-bold' : 'typo c2-semi-bold'))
+
+const valueFontClass = computed(() => (props.size === 'medium' ? 'typo h3-semi-bold' : 'typo c2-semi-bold'))
+
+const unitFontClass = computed(() => (props.size === 'medium' ? 'typo p2-medium' : 'typo c2-semi-bold'))
+
+const percentValue = computed(() => {
+  if (props.size !== 'small' || props.max === undefined || props.max === 0) {
+    return undefined
+  }
+
+  if (props.value === undefined) {
+    return n(0, 'percent').replace('0', '-')
+  }
+
+  return n(props.value / props.max, 'percent')
+})
+</script>
+
+<style lang="postcss" scoped>
+.ui-card-numbers {
+  display: flex;
+  width: fit-content;
+
+  .values {
+    display: flex;
+    flex-direction: column;
+    gap: 0.8rem;
+  }
+
+  .value {
+    color: var(--color-neutral-txt-primary);
+    display: flex;
+    gap: 0.2rem;
+    align-items: center;
+  }
+
+  .unit {
+    color: var(--color-neutral-txt-primary);
+  }
+
+  /* SIZE VARIANTS */
+
+  &.size--small {
+    gap: 0.8rem;
+    flex-direction: row;
+
+    .label {
+      color: var(--color-neutral-txt-primary);
+    }
+
+    .values {
+      align-items: flex-end;
+    }
+  }
+
+  &.size--medium {
+    gap: 0.4rem;
+    flex-direction: column;
+
+    .label {
+      color: var(--color-neutral-txt-secondary);
+    }
+
+    .values {
+      align-items: flex-start;
+    }
+  }
+}
+</style>

package/lib/components/ui/card-subtitle/UiCardSubtitle.vue

@@ -0,0 +1,24 @@
+<!-- v1 -->
+<template>
+  <div class="ui-card-subtitle">
+    <span class="typo h7-semi-bold"><slot /></span>
+    <span v-if="slots.info" class="typo p3-medium"><slot name="info" /></span>
+  </div>
+</template>
+
+<script setup lang="ts">
+const slots = defineSlots<{
+  default(): any
+  info?(): any
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.ui-card-subtitle {
+  color: var(--color-info-txt-base);
+  border-bottom: 0.1rem solid var(--color-info-txt-base);
+  display: flex;
+  justify-content: space-between;
+  gap: 0.8rem;
+}
+</style>

package/lib/components/ui/card-title/UiCardTitle.vue

@@ -0,0 +1,56 @@
+<!-- v1 -->
+<template>
+  <div class="ui-card-title">
+    <div class="main-content">
+      <div class="title typo h6-medium">
+        <slot />
+      </div>
+      <div v-if="slots.info" class="info typo h7-semi-bold">
+        <slot name="info" />
+      </div>
+    </div>
+    <p v-if="slots.description" class="description typo p3-regular">
+      <slot name="description" />
+    </p>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const slots = defineSlots<{
+  default(): any
+  info?(): any
+  description?(): any
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.ui-card-title {
+  display: flex;
+  flex-direction: column;
+
+  .main-content {
+    display: flex;
+    gap: 1.6rem;
+    align-items: center;
+  }
+
+  .title {
+    display: flex;
+    align-items: center;
+    gap: 1.6rem;
+    color: var(--color-neutral-txt-primary);
+  }
+
+  .info {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+    color: var(--color-info-txt-base);
+  }
+
+  .description {
+    color: var(--color-neutral-txt-secondary);
+  }
+}
+</style>