@xen-orchestra/web-core 0.4.0 → 0.6.0

package/lib/components/card/CardTitle.vue

@@ -1,57 +0,0 @@
-<!-- v1.0 -->
-<template>
-  <div class="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>
-defineSlots<{
-  default: () => void
-  info: () => void
-  description: () => void
-}>()
-</script>
-
-<style lang="postcss" scoped>
-.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-normal-txt-base);
-}
-
-.description {
-  color: var(--color-neutral-txt-secondary);
-}
-</style>

package/lib/components/chip/ChipIcon.vue

@@ -1,30 +0,0 @@
-<template>
-  <!-- TODO: replace with correct color typing when available -->
-  <VtsIcon :class="{ disabled }" :accent="color === 'normal' ? 'brand' : color" :icon class="chip-icon" fixed-width />
-</template>
-
-<script lang="ts" setup>
-import VtsIcon from '@core/components/icon/VtsIcon.vue'
-import type { Color } from '@core/types/color.type'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
-
-defineProps<{
-  color: Color
-  icon?: IconDefinition
-  disabled?: boolean
-}>()
-</script>
-
-<style lang="postcss" scoped>
-.chip-icon {
-  color: var(--color-neutral-txt-secondary);
-
-  &.disabled {
-    color: var(--color-normal-txt-item);
-
-    &.info {
-      color: var(--color-neutral-txt-secondary);
-    }
-  }
-}
-</style>

package/lib/components/chip/ChipRemoveIcon.vue

@@ -1,13 +0,0 @@
-<template>
-  <ButtonIcon :color :icon="faXmark" class="chip-remove-icon" size="small" />
-</template>
-
-<script lang="ts" setup>
-import ButtonIcon from '@core/components/button/ButtonIcon.vue'
-import type { Color } from '@core/types/color.type'
-import { faXmark } from '@fortawesome/free-solid-svg-icons'
-
-defineProps<{
-  color: Color
-}>()
-</script>

package/lib/components/chip/UiChip.vue

@@ -1,137 +0,0 @@
-<!-- v1.1 -->
-<template>
-  <span :class="[color, { disabled }]" class="ui-chip typo p3-regular" @click="emit('edit')">
-    <ChipIcon :color :disabled :icon />
-    <span class="content text-ellipsis">
-      <slot />
-    </span>
-    <ChipRemoveIcon v-if="!disabled" :color @click.stop="emit('remove')" />
-  </span>
-</template>
-
-<script lang="ts" setup>
-import ChipIcon from '@core/components/chip/ChipIcon.vue'
-import ChipRemoveIcon from '@core/components/chip/ChipRemoveIcon.vue'
-import type { Color } from '@core/types/color.type'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
-
-withDefaults(
-  defineProps<{
-    icon?: IconDefinition
-    color?: Color
-    disabled?: boolean
-  }>(),
-  { color: 'normal' }
-)
-
-const emit = defineEmits<{
-  edit: []
-  remove: []
-}>()
-</script>
-
-<style lang="postcss" scoped>
-/* COLOR VARIANTS */
-.ui-chip {
-  --color: var(--color-neutral-txt-primary);
-
-  &.disabled {
-    --color: var(--color-normal-txt-item);
-
-    &.info {
-      --color: var(--color-neutral-txt-secondary);
-    }
-  }
-}
-
-/* BACKGROUND COLOR VARIANTS */
-.ui-chip {
-  &.info {
-    --background-color: var(--color-normal-background-selected);
-
-    &:is(:hover, .hover, :focus-visible) {
-      --background-color: var(--color-normal-background-hover);
-    }
-
-    &:is(:active, .pressed) {
-      --background-color: var(--color-normal-background-active);
-    }
-
-    &.disabled {
-      --background-color: var(--color-neutral-background-secondary);
-    }
-  }
-
-  &.success {
-    --background-color: var(--color-success-background-selected);
-
-    &:is(:hover, .hover, :focus-visible) {
-      --background-color: var(--color-success-background-hover);
-    }
-
-    &:is(:active, .pressed) {
-      --background-color: var(--color-success-background-active);
-    }
-
-    &.disabled {
-      --background-color: var(--color-success-item-disabled);
-    }
-  }
-
-  &.warning {
-    --background-color: var(--color-warning-background-selected);
-
-    &:is(:hover, .hover, :focus-visible) {
-      --background-color: var(--color-warning-background-hover);
-    }
-
-    &:is(:active, .pressed) {
-      --background-color: var(--color-warning-background-active);
-    }
-
-    &.disabled {
-      --background-color: var(--color-warning-item-disabled);
-    }
-  }
-
-  &:is(.danger, .error) {
-    --background-color: var(--color-danger-background-selected);
-
-    &:is(:hover, .hover, :focus-visible) {
-      --background-color: var(--color-danger-background-hover);
-    }
-
-    &:is(:active, .pressed) {
-      --background-color: var(--color-danger-background-active);
-    }
-
-    &.disabled {
-      --background-color: var(--color-danger-item-disabled);
-    }
-  }
-}
-
-/* IMPLEMENTATION */
-.ui-chip {
-  display: flex;
-  align-items: center;
-  gap: 0.8rem;
-  padding: 0.4rem 0.8rem;
-  border-radius: 10rem;
-  color: var(--color);
-  background-color: var(--background-color);
-  cursor: pointer;
-  min-height: 2.4rem;
-  vertical-align: middle;
-  white-space: nowrap;
-  min-width: 0;
-
-  &.disabled {
-    pointer-events: none;
-  }
-
-  .content {
-    line-height: 1.6rem;
-  }
-}
-</style>

package/lib/components/counter/VtsCounter.vue

@@ -1,147 +0,0 @@
-<!-- v2 -->
-<template>
-  <span :class="classNames" class="vts-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 = 'brand' | '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>
-/*
-VARIANT + ACCENT
---vts-counter--background-color
---vts-counter--color
-*/
-.vts-counter {
-  &.variant--primary {
-    &.accent--brand {
-      --vts-counter--background-color: var(--color-normal-item-base);
-      --vts-counter--color: var(--color-normal-txt-item);
-    }
-
-    &.accent--neutral {
-      --vts-counter--background-color: var(--color-neutral-txt-primary);
-      --vts-counter--color: var(--color-neutral-background-primary);
-    }
-
-    &.accent--success {
-      --vts-counter--background-color: var(--color-success-item-base);
-      --vts-counter--color: var(--color-success-txt-item);
-    }
-
-    &.accent--warning {
-      --vts-counter--background-color: var(--color-warning-item-base);
-      --vts-counter--color: var(--color-warning-txt-item);
-    }
-
-    &.accent--danger {
-      --vts-counter--background-color: var(--color-danger-item-base);
-      --vts-counter--color: var(--color-danger-txt-item);
-    }
-
-    &.accent--muted {
-      --vts-counter--background-color: var(--color-neutral-background-disabled);
-      --vts-counter--color: var(--color-neutral-txt-secondary);
-    }
-  }
-
-  &.variant--secondary {
-    &.accent--brand {
-      --vts-counter--background-color: var(--color-normal-background-selected);
-      --vts-counter--color: var(--color-normal-txt-base);
-    }
-
-    &.accent--neutral {
-      --vts-counter--background-color: var(--color-neutral-background-secondary);
-      --vts-counter--color: var(--color-neutral-txt-secondary);
-    }
-
-    &.accent--success {
-      --vts-counter--background-color: var(--color-success-background-selected);
-      --vts-counter--color: var(--color-success-txt-base);
-    }
-
-    &.accent--warning {
-      --vts-counter--background-color: var(--color-warning-background-selected);
-      --vts-counter--color: var(--color-warning-txt-base);
-    }
-
-    &.accent--danger {
-      --vts-counter--background-color: var(--color-danger-background-selected);
-      --vts-counter--color: var(--color-danger-txt-base);
-    }
-
-    &.accent--muted {
-      --vts-counter--background-color: var(--color-neutral-background-secondary);
-      --vts-counter--color: var(--color-neutral-txt-secondary);
-    }
-  }
-}
-
-/*
-SIZE
---vts-counter--height
---vts-counter--padding
-*/
-.vts-counter {
-  &.size--small {
-    --vts-counter--height: 1.5rem;
-    --vts-counter--padding: 0 0.4rem;
-  }
-
-  &.size--medium {
-    --vts-counter--height: 2.4rem;
-    --vts-counter--padding: 0 0.6rem;
-  }
-}
-
-/* IMPLEMENTATION */
-.vts-counter {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  vertical-align: middle;
-  text-transform: lowercase;
-  color: var(--vts-counter--color);
-  height: var(--vts-counter--height);
-  min-width: var(--vts-counter--height);
-  padding: var(--vts-counter--padding);
-  background-color: var(--vts-counter--background-color);
-  border-radius: calc(var(--vts-counter--height) / 2);
-
-  .inner {
-    line-height: 0;
-  }
-}
-</style>

package/lib/components/legend/LegendGroup.vue

@@ -1,44 +0,0 @@
-<template>
-  <div class="legend-group">
-    <LegendTitle v-if="title" :icon="title.icon" :icon-tooltip="title.iconTooltip">
-      {{ title.label }}
-    </LegendTitle>
-    <LegendList class="list">
-      <LegendItem
-        v-for="item in items"
-        :key="item.label"
-        :color="item.color"
-        :tooltip="item.tooltip"
-        :unit="item.unit"
-        :value="item.value"
-      >
-        {{ item.label }}
-      </LegendItem>
-    </LegendList>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import LegendItem, { type LegendItemProps } from '@core/components/legend/LegendItem.vue'
-import LegendList from '@core/components/legend/LegendList.vue'
-import LegendTitle, { type LegendTitleProps } from '@core/components/LegendTitle.vue'
-
-export type LegendGroupProps = {
-  items: (LegendItemProps & { label: string })[]
-  title?: LegendTitleProps & { label: string }
-}
-
-defineProps<LegendGroupProps>()
-</script>
-
-<style lang="postcss" scoped>
-.legend-group {
-  display: flex;
-  flex-direction: column;
-  gap: 0.8rem;
-}
-
-.list {
-  padding-left: 1.6rem;
-}
-</style>

package/lib/components/legend/LegendItem.vue

@@ -1,86 +0,0 @@
-<!-- v1.0 -->
-<template>
-  <li :class="color" class="legend-item">
-    <VtsIcon :icon="faCircle" accent="brand" class="circle-icon" />
-    <span class="label typo p3-regular"><slot /></span>
-    <VtsIcon v-if="tooltip" v-tooltip="tooltip" :icon="faCircleInfo" class="tooltip-icon" accent="brand" />
-    <span v-if="valueLabel" class="value-and-unit typo c3-semi-bold">{{ valueLabel }}</span>
-  </li>
-</template>
-
-<script lang="ts" setup>
-import VtsIcon from '@core/components/icon/VtsIcon.vue'
-import { vTooltip } from '@core/directives/tooltip.directive'
-import { faCircle, faCircleInfo } from '@fortawesome/free-solid-svg-icons'
-import { computed } from 'vue'
-
-export type LegendItemColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'disabled'
-
-export type LegendItemProps = {
-  color: LegendItemColor
-  value?: number
-  unit?: string
-  tooltip?: string
-}
-
-const props = defineProps<LegendItemProps>()
-
-defineSlots<{
-  default(): void
-}>()
-
-const valueLabel = computed(() => [props.value, props.unit].join(' ').trim())
-</script>
-
-<style lang="postcss" scoped>
-/* COLOR VARIANTS */
-.legend-item {
-  &.primary {
-    --circle-color: var(--color-normal-item-base);
-  }
-
-  &.secondary {
-    --circle-color: var(--color-neutral-txt-primary);
-  }
-
-  &.success {
-    --circle-color: var(--color-success-item-base);
-  }
-
-  &.warning {
-    --circle-color: var(--color-warning-item-base);
-  }
-
-  &.danger {
-    --circle-color: var(--color-danger-item-base);
-  }
-
-  &.disabled {
-    --circle-color: var(--color-neutral-background-disabled);
-  }
-}
-
-/* IMPLEMENTATION */
-.legend-item {
-  display: flex;
-  align-items: center;
-  gap: 0.8rem;
-}
-
-.circle-icon {
-  font-size: 0.8rem;
-  color: var(--circle-color);
-}
-
-.tooltip-icon {
-  font-size: 1.2rem;
-}
-
-.label {
-  color: var(--color-neutral-txt-primary);
-}
-
-.value-and-unit {
-  color: var(--color-neutral-txt-secondary);
-}
-</style>

package/lib/components/object-link/ObjectLink.vue

@@ -1,87 +0,0 @@
-<!-- v1.0 -->
-<template>
-  <RouterLink v-if="route && !disabled" :to="route" class="object-link is-link typo p3-medium">
-    <span class="icon">
-      <slot name="icon">
-        <VtsIcon :icon accent="current" />
-      </slot>
-    </span>
-    <span v-tooltip class="content text-ellipsis">
-      <slot />
-    </span>
-  </RouterLink>
-  <span v-else :class="{ disabled }" class="object-link typo p3-medium">
-    <span class="icon">
-      <slot name="icon">
-        <VtsIcon :icon accent="current" />
-      </slot>
-    </span>
-    <slot />
-  </span>
-</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 RouteLocationRaw } from 'vue-router'
-
-defineProps<{
-  route?: RouteLocationRaw
-  disabled?: boolean
-  icon?: IconDefinition
-}>()
-
-defineSlots<{
-  default: () => any
-  icon: () => any
-}>()
-</script>
-
-<style lang="postcss" scoped>
-/* COLOR VARIANTS */
-.object-link {
-  --color: var(--color-normal-txt-base);
-  --border-color: var(--color-normal-txt-base);
-
-  &.is-link {
-    &:is(:hover, .hover, :focus-visible) {
-      --color: var(--color-normal-txt-hover);
-      --border-color: var(--color-normal-txt-hover);
-    }
-
-    &:is(:active, .pressed) {
-      --color: var(--color-normal-txt-active);
-      --border-color: var(--color-normal-txt-active);
-    }
-  }
-
-  &.disabled {
-    --color: var(--color-neutral-txt-secondary);
-    --border-color: var(--color-neutral-txt-secondary);
-  }
-}
-
-/* IMPLEMENTATION */
-.object-link {
-  display: flex;
-  min-width: 0;
-  align-items: center;
-  color: var(--color);
-  gap: 1rem;
-  border-top: 0.1rem solid transparent;
-  border-bottom: 0.1rem solid var(--border-color);
-  line-height: 1;
-  padding-block: 0.5rem;
-  text-decoration: none;
-
-  &.disabled {
-    cursor: not-allowed;
-  }
-}
-
-.icon {
-  color: var(--color-neutral-txt-primary);
-  font-size: 0.8rem;
-}
-</style>

package/lib/components/state-hero/ComingSoonHero.vue

@@ -1,13 +0,0 @@
-<template>
-  <StateHero :type class="coming-soon-hero" image="under-construction">
-    {{ $t('coming-soon') }}
-  </StateHero>
-</template>
-
-<script lang="ts" setup>
-import StateHero, { type StateHeroType } from '@core/components/state-hero/StateHero.vue'
-
-defineProps<{
-  type: StateHeroType
-}>()
-</script>

package/lib/components/state-hero/LoadingHero.vue

@@ -1,15 +0,0 @@
-<template>
-  <StateHero v-if="!disabled" :type busy class="loading-hero">
-    {{ $t('loading-in-progress') }}
-  </StateHero>
-  <slot v-else />
-</template>
-
-<script lang="ts" setup>
-import StateHero, { type StateHeroType } from '@core/components/state-hero/StateHero.vue'
-
-defineProps<{
-  type: StateHeroType
-  disabled?: boolean
-}>()
-</script>

package/lib/components/state-hero/NoDataHero.vue

@@ -1,11 +0,0 @@
-<template>
-  <StateHero class="no-data-hero" image="no-data" :type>{{ $t('no-data') }}</StateHero>
-</template>
-
-<script lang="ts" setup>
-import StateHero, { type StateHeroType } from '@core/components/state-hero/StateHero.vue'
-
-defineProps<{
-  type: StateHeroType
-}>()
-</script>

package/lib/components/state-hero/ObjectNotFoundHero.vue

@@ -1,13 +0,0 @@
-<template>
-  <StateHero class="object-not-found-hero" image="no-result" type="page">
-    {{ $t('object-not-found', { id }) }}
-  </StateHero>
-</template>
-
-<script lang="ts" setup>
-import StateHero from '@core/components/state-hero/StateHero.vue'
-
-defineProps<{
-  id: string
-}>()
-</script>