@xen-orchestra/web-core 0.0.3 → 0.0.5

package/lib/components/{UiLegend.vue → legend/LegendItem.vue}

@@ -1,67 +1,85 @@
 <!-- v1.0 -->
 <template>
-  <li :class="color" class="ui-legend">
+  <li :class="color" class="legend-item">
     <UiIcon :icon="faCircle" class="circle-icon" />
     <span class="label typo p3-regular"><slot /></span>
     <UiIcon v-if="tooltip" v-tooltip="tooltip" :icon="faCircleInfo" class="tooltip-icon" color="info" />
-
-    <span class="value-and-unit typo c3-semi-bold">{{ value }} {{ unit }}</span>
+    <span v-if="valueLabel" class="value-and-unit typo c3-semi-bold">{{ valueLabel }}</span>
   </li>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import UiIcon from '@core/components/icon/UiIcon.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
-import { faCircleInfo, faCircle } from '@fortawesome/free-solid-svg-icons'
+import { faCircle, faCircleInfo } from '@fortawesome/free-solid-svg-icons'
+import { computed } from 'vue'
 
-type LegendColor = 'default' | 'success' | 'warning' | 'error' | 'disabled' | 'dark-blue'
+export type LegendItemColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'disabled'
 
-defineProps<{
-  color: LegendColor
+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 */
-.ui-legend {
+.legend-item {
+  &.primary {
+    --circle-color: var(--color-purple-base);
+  }
+
+  &.secondary {
+    --circle-color: var(--color-grey-100);
+  }
+
   &.success {
     --circle-color: var(--color-green-base);
   }
+
   &.warning {
     --circle-color: var(--color-orange-base);
   }
-  &.error {
+
+  &.danger {
     --circle-color: var(--color-red-base);
   }
-  &.default {
-    --circle-color: var(--color-purple-base);
-  }
+
   &.disabled {
     --circle-color: var(--color-grey-300);
   }
-  &.dark-blue {
-    --circle-color: var(--color-grey-100);
-  }
 }
+
 /* IMPLEMENTATION */
-.ui-legend {
+.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-grey-000);
 }
+
 .value-and-unit {
   color: var(--color-grey-300);
 }

package/lib/components/legend/LegendList.vue

@@ -0,0 +1,19 @@
+<template>
+  <ul class="legend-list">
+    <slot />
+  </ul>
+</template>
+
+<script lang="ts" setup>
+defineSlots<{
+  default(): void
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.legend-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+</style>

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

@@ -0,0 +1,87 @@
+<!-- v1.0 -->
+<template>
+  <RouterLink v-if="route && !disabled" :to="route" class="object-link is-link typo p3-medium">
+    <span class="icon">
+      <slot name="icon">
+        <UiIcon :icon />
+      </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">
+        <UiIcon :icon />
+      </slot>
+    </span>
+    <slot />
+  </span>
+</template>
+
+<script lang="ts" setup>
+import UiIcon from '@core/components/icon/UiIcon.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-purple-base);
+  --border-color: var(--color-purple-base);
+
+  &.is-link {
+    &:is(:hover, .hover, :focus-visible) {
+      --color: var(--color-purple-d20);
+      --border-color: var(--color-purple-d20);
+    }
+
+    &:is(:active, .pressed) {
+      --color: var(--color-purple-d40);
+      --border-color: var(--color-purple-d40);
+    }
+  }
+
+  &.disabled {
+    --color: var(--color-grey-400);
+    --border-color: var(--color-grey-400);
+  }
+}
+
+/* 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-grey-100);
+  font-size: 0.8rem;
+}
+</style>

package/lib/components/search-bar/SearchBar.vue

@@ -0,0 +1,60 @@
+<!-- v1.1 -->
+<template>
+  <form class="search-bar" @submit.prevent="emit('search', value)">
+    <label v-if="uiStore.isDesktop" :for="id" class="typo p2-regular label">
+      {{ $t('core.search-bar.label') }}
+    </label>
+    <UiInput
+      :id
+      v-model="value"
+      :aria-label="uiStore.isMobile ? $t('core.search-bar.label') : undefined"
+      :icon="uiStore.isDesktop ? faMagnifyingGlass : undefined"
+      :placeholder="$t('core.search-bar.placeholder')"
+    />
+    <template v-if="uiStore.isDesktop">
+      <UiButton type="submit">{{ $t('core.search') }}</UiButton>
+      <Divider type="stretch" />
+      <UiButton v-tooltip="$t('coming-soon')" level="secondary" :left-icon="faFilter" disabled>
+        {{ $t('core.search-bar.use-query-builder') }}
+      </UiButton>
+    </template>
+    <template v-else>
+      <ButtonIcon type="submit" :icon="faMagnifyingGlass" />
+      <ButtonIcon disabled :icon="faFilter" />
+    </template>
+  </form>
+</template>
+
+<script lang="ts" setup>
+import ButtonIcon from '@core/components/button/ButtonIcon.vue'
+import UiButton from '@core/components/button/UiButton.vue'
+import Divider from '@core/components/divider/Divider.vue'
+import UiInput from '@core/components/input/UiInput.vue'
+import { vTooltip } from '@core/directives/tooltip.directive'
+import { useUiStore } from '@core/stores/ui.store'
+import { uniqueId } from '@core/utils/unique-id.util'
+import { faFilter, faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons'
+import { ref } from 'vue'
+
+const emit = defineEmits<{
+  search: [value: string]
+}>()
+
+const id = uniqueId('search-input-')
+
+const uiStore = useUiStore()
+
+const value = ref<string>('')
+</script>
+
+<style lang="postcss" scoped>
+.search-bar {
+  display: flex;
+  gap: 1.6rem;
+  align-items: center;
+}
+
+.label {
+  color: var(--color-grey-200);
+}
+</style>

package/lib/components/stacked-bar/StackedBarSegment.vue

@@ -1,11 +1,11 @@
 <template>
   <div
-    v-tooltip="{ selector: '.ellipsis' }"
+    v-tooltip="{ selector: '.text-ellipsis' }"
     :class="color"
     :style="{ width: percentage + '%' }"
     class="stacked-bar-segment typo c4-semi-bold"
   >
-    <div ref="ellipsisElement" :class="{ hidden }" class="ellipsis">
+    <div ref="ellipsisElement" :class="{ hidden }" class="text-ellipsis">
       {{ $n(percentage / 100, 'percent') }}
     </div>
   </div>
@@ -61,12 +61,6 @@ useResizeObserver(ellipsisElement, ([entry]) => {
   background-color: var(--background-color);
 }
 
-.ellipsis {
-  overflow: hidden;
-  white-space: nowrap;
-  min-width: 0;
-}
-
 .hidden {
   visibility: hidden;
 }

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

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

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

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

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

@@ -1,5 +1,5 @@
 <template>
-  <StateHero image="no-result" class="object-not-found-hero">
+  <StateHero class="object-not-found-hero" image="no-result" type="page">
     {{ $t('object-not-found', { id }) }}
   </StateHero>
 </template>

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

@@ -1,8 +1,8 @@
 <template>
-  <div class="state-hero">
+  <div :class="type" class="state-hero">
     <UiSpinner v-if="busy" class="spinner" />
     <img v-else-if="imageSrc" :src="imageSrc" alt="" class="image" />
-    <p v-if="$slots.default" class="typo h2-black text">
+    <p v-if="$slots.default" :class="typoClass" class="typo text">
       <slot />
     </p>
   </div>
@@ -12,42 +12,60 @@
 import UiSpinner from '@core/components/UiSpinner.vue'
 import { computed } from 'vue'
 
+export type StateHeroType = 'page' | 'card'
+
 const props = defineProps<{
+  type: StateHeroType
   busy?: boolean
   image?: 'no-result' | 'under-construction' // TODO: 'offline' | 'no-data' |  'not-found' | 'all-good' | 'all-done' | 'error'
 }>()
 
+const typoClass = computed(() => (props.type === 'page' ? 'h2-black' : 'h4-medium'))
+
 const imageSrc = computed(() => {
-  try {
-    return new URL(`../../assets/${props.image}.svg`, import.meta.url).href
-  } catch {
+  if (!props.image) {
     return undefined
   }
+
+  return new URL(`../../assets/${props.image}.svg`, import.meta.url).href
 })
 </script>
 
 <style lang="postcss" scoped>
+.state-hero {
+  &.page {
+    --image-width: 90%;
+    --spinner-size: 10rem;
+    --gap: 8.2rem;
+  }
+
+  &.card {
+    --image-width: 70%;
+    --spinner-size: 6rem;
+    --gap: 2rem;
+  }
+}
+
 .state-hero {
   flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 4.2rem;
+  gap: var(--gap);
 }
 
 .image {
-  width: 90%;
+  width: var(--image-width);
   max-width: 55rem;
 }
 
 .spinner {
   color: var(--color-purple-base);
-  font-size: 10rem;
+  font-size: var(--spinner-size);
 }
 
 .text {
   color: var(--color-purple-base);
-  margin-top: 4rem;
 }
 </style>

package/lib/components/tab/TabList.vue

@@ -28,5 +28,6 @@ useContext(DisabledContext, () => props.disabled)
   background-color: var(--background-color-primary);
   max-width: 100%;
   overflow: auto;
+  flex-shrink: 0;
 }
 </style>

package/lib/components/table/UiTable.vue

@@ -22,6 +22,8 @@ provide('tableName', props.name)
   background-color: var(--background-color-primary);
   line-height: 2.4rem;
   color: var(--color-grey-200);
+  border-collapse: collapse;
+  table-layout: fixed;
 
   :deep(th),
   :deep(td) {
@@ -49,6 +51,10 @@ provide('tableName', props.name)
     :deep(td) {
       border-right: 0.1rem solid var(--color-grey-500);
 
+      &:first-child {
+        border-left: none;
+      }
+
       &:last-child {
         border-right: none;
       }

package/lib/components/task/QuickTaskButton.vue

@@ -0,0 +1,62 @@
+<template>
+  <ButtonIcon
+    ref="buttonRef"
+    v-tooltip="{ content: $t('tasks.quick-view'), placement: 'bottom-end' }"
+    :dot="hasNewTask"
+    :icon="faBarsProgress"
+    size="large"
+    @click="isPanelOpen = true"
+  />
+  <Teleport v-if="isPanelOpen" to="body">
+    <Backdrop @click="isPanelOpen = false" />
+    <QuickTaskPanel ref="panelRef" :loading :tasks />
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import Backdrop from '@core/components/backdrop/Backdrop.vue'
+import ButtonIcon from '@core/components/button/ButtonIcon.vue'
+import QuickTaskPanel from '@core/components/task/QuickTaskPanel.vue'
+import { vTooltip } from '@core/directives/tooltip.directive'
+import type { Task } from '@core/types/task.type'
+import { faBarsProgress } from '@fortawesome/free-solid-svg-icons'
+import { unrefElement, watchArray, whenever } from '@vueuse/core'
+import placementJs from 'placement.js'
+import { computed, nextTick, ref } from 'vue'
+
+const props = defineProps<{
+  tasks: Task[]
+  loading?: boolean
+}>()
+
+const ids = computed(() => props.tasks.map(task => task.id))
+
+const isPanelOpen = ref(false)
+const hasNewTask = ref(false)
+
+watchArray(ids, (_newList, _oldList, addedIds) => {
+  if (addedIds.length > 0 && !isPanelOpen.value) {
+    hasNewTask.value = true
+  }
+})
+
+const buttonRef = ref<HTMLButtonElement | null>(null)
+const panelRef = ref<HTMLDivElement | null>(null)
+
+whenever(isPanelOpen, async () => {
+  await nextTick()
+
+  const button = unrefElement(buttonRef)
+  const panel = unrefElement(panelRef)
+
+  if (!button || !panel) {
+    return
+  }
+
+  placementJs(button, panel, {
+    placement: 'bottom-end',
+  })
+
+  hasNewTask.value = false
+})
+</script>

package/lib/components/task/QuickTaskItem.vue

@@ -0,0 +1,91 @@
+<template>
+  <li class="vts-quick-task-item">
+    <div v-if="hasSubTasks" class="toggle" @click="toggleExpand()">
+      <ButtonIcon :icon="isExpanded ? faAngleDown : faAngleRight" size="small" />
+    </div>
+    <div class="content">
+      <div class="typo p1-medium">
+        {{ task.name }}
+      </div>
+      <div class="informations">
+        <div class="line-1">
+          <UiTag v-if="task.tag" color="grey">{{ task.tag }}</UiTag>
+          <div v-if="hasSubTasks" class="subtasks">
+            <UiIcon :icon="faCircleNotch" />
+            <span class="typo p4-medium">{{ $t('tasks.n-subtasks', { n: subTasksCount }) }}</span>
+          </div>
+        </div>
+        <div v-if="task.start" class="line-2 typo p4-regular">
+          {{ $d(task.start, 'datetime_short') }}
+          <template v-if="task.end">
+            <UiIcon :icon="faArrowRight" />
+            {{ $d(new Date(task.end), 'datetime_short') }}
+          </template>
+        </div>
+      </div>
+      <QuickTaskList v-if="hasSubTasks && isExpanded" :tasks="subTasks" sublist />
+    </div>
+  </li>
+</template>
+
+<script lang="ts" setup>
+import ButtonIcon from '@core/components/button/ButtonIcon.vue'
+import UiIcon from '@core/components/icon/UiIcon.vue'
+import QuickTaskList from '@core/components/task/QuickTaskList.vue'
+import UiTag from '@core/components/UiTag.vue'
+import type { Task } from '@core/types/task.type'
+import { faAngleDown, faAngleRight, faArrowRight, faCircleNotch } from '@fortawesome/free-solid-svg-icons'
+import { useToggle } from '@vueuse/core'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  task: Task
+}>()
+
+const [isExpanded, toggleExpand] = useToggle()
+
+const subTasks = computed(() => props.task.subtasks ?? [])
+const subTasksCount = computed(() => subTasks.value.length)
+const hasSubTasks = computed(() => subTasksCount.value > 0)
+</script>
+
+<style lang="postcss" scoped>
+.vts-quick-task-item {
+  display: flex;
+
+  &:not(:last-child) {
+    border-bottom: 0.1rem solid var(--color-grey-500);
+  }
+}
+
+.toggle {
+  padding: 0.4rem 0;
+}
+
+.content {
+  flex: 1;
+  padding: 0.4rem 0.4rem 0.4rem 0.8rem;
+}
+
+.informations {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.line-1 {
+  display: flex;
+  align-items: center;
+  gap: 0.2rem 0.8rem;
+}
+
+.line-2 {
+  color: var(--color-grey-200);
+}
+
+.subtasks {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+</style>

package/lib/components/task/QuickTaskList.vue

@@ -0,0 +1,48 @@
+<template>
+  <ul :class="{ sublist }" class="vts-quick-task-list">
+    <li v-if="loading">
+      <div class="loading">
+        <UiSpinner />
+        <div>{{ $t('loading-in-progress') }}</div>
+      </div>
+    </li>
+    <template v-else>
+      <li v-if="tasks.length === 0" class="typo p1-medium">{{ $t('tasks.no-tasks') }}</li>
+      <QuickTaskItem v-for="task of tasks" :key="task.id" :task />
+    </template>
+  </ul>
+</template>
+
+<script lang="ts" setup>
+import QuickTaskItem from '@core/components/task/QuickTaskItem.vue'
+import UiSpinner from '@core/components/UiSpinner.vue'
+import type { Task } from '@core/types/task.type'
+
+defineProps<{
+  tasks: Task[]
+  sublist?: boolean
+  loading?: boolean
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.vts-quick-task-list {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--background-color-primary);
+  padding: 1rem 0;
+
+  &:not(.sublist) {
+    padding: 1.6rem 2rem;
+    max-height: 40rem;
+    overflow: auto;
+  }
+}
+
+.loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+}
+</style>