@xen-orchestra/web-core 0.0.2 → 0.0.4

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/StackedBar.vue

@@ -0,0 +1,49 @@
+<!-- v1.0 -->
+<template>
+  <div class="stacked-bar">
+    <StackedBarSegment
+      v-for="(segment, index) in computedSegments"
+      :key="index"
+      :color="segment.color"
+      :percentage="segment.percentage"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import StackedBarSegment from '@core/components/stacked-bar/StackedBarSegment.vue'
+import type { Color } from '@core/types/color.type'
+import { computed } from 'vue'
+
+type Segment = {
+  value: number
+  color: Color
+}
+
+const props = defineProps<{
+  segments: Segment[]
+  maxValue?: number
+}>()
+
+const totalValue = computed(() => props.segments.reduce((acc, bar) => acc + bar.value, 0))
+
+const max = computed(() => Math.max(props.maxValue ?? 0, totalValue.value))
+
+const computedSegments = computed(() => {
+  return props.segments.map(segment => ({
+    ...segment,
+    percentage: (segment.value / max.value) * 100,
+  }))
+})
+</script>
+
+<style lang="postcss" scoped>
+.stacked-bar {
+  width: 100%;
+  display: flex;
+  height: 4rem;
+  border-radius: 0.8rem;
+  overflow: hidden;
+  background-color: var(--background-color-purple-10);
+}
+</style>

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

@@ -0,0 +1,67 @@
+<template>
+  <div
+    v-tooltip="{ selector: '.text-ellipsis' }"
+    :class="color"
+    :style="{ width: percentage + '%' }"
+    class="stacked-bar-segment typo c4-semi-bold"
+  >
+    <div ref="ellipsisElement" :class="{ hidden }" class="text-ellipsis">
+      {{ $n(percentage / 100, 'percent') }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { vTooltip } from '@core/directives/tooltip.directive'
+import type { Color } from '@core/types/color.type'
+import { hasEllipsis } from '@core/utils/has-ellipsis.util'
+import { useResizeObserver } from '@vueuse/core'
+import { ref } from 'vue'
+
+defineProps<{
+  color: Color
+  percentage: number
+}>()
+
+const hidden = ref(false)
+const ellipsisElement = ref<HTMLElement | null>(null)
+
+useResizeObserver(ellipsisElement, ([entry]) => {
+  hidden.value = hasEllipsis(entry.target)
+})
+</script>
+
+<style lang="postcss" scoped>
+/* COLOR VARIANT */
+.stacked-bar-segment {
+  &.info {
+    --background-color: var(--color-purple-base);
+  }
+
+  &.success {
+    --background-color: var(--color-green-base);
+  }
+
+  &.warning {
+    --background-color: var(--color-orange-base);
+  }
+
+  &.error {
+    --background-color: var(--color-red-base);
+  }
+}
+
+/* IMPLEMENTATION */
+.stacked-bar-segment {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  white-space: nowrap;
+  color: var(--color-grey-600);
+  background-color: var(--background-color);
+}
+
+.hidden {
+  visibility: hidden;
+}
+</style>

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

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

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

@@ -0,0 +1,9 @@
+<template>
+  <StateHero busy class="loading-hero">
+    {{ $t('loading-in-progress') }}
+  </StateHero>
+</template>
+
+<script lang="ts" setup>
+import StateHero from '@core/components/state-hero/StateHero.vue'
+</script>

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

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

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

@@ -0,0 +1,53 @@
+<template>
+  <div 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">
+      <slot />
+    </p>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import UiSpinner from '@core/components/UiSpinner.vue'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  busy?: boolean
+  image?: 'no-result' | 'under-construction' // TODO: 'offline' | 'no-data' |  'not-found' | 'all-good' | 'all-done' | 'error'
+}>()
+
+const imageSrc = computed(() => {
+  try {
+    return new URL(`../../assets/${props.image}.svg`, import.meta.url).href
+  } catch {
+    return undefined
+  }
+})
+</script>
+
+<style lang="postcss" scoped>
+.state-hero {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4.2rem;
+}
+
+.image {
+  width: 90%;
+  max-width: 55rem;
+}
+
+.spinner {
+  color: var(--color-purple-base);
+  font-size: 10rem;
+}
+
+.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/ColumnTitle.vue

@@ -0,0 +1,150 @@
+<!-- v1.0 -->
+<template>
+  <MenuList :disabled placement="bottom-start" shadow>
+    <template #trigger="{ open, isOpen }">
+      <th
+        :class="{ interactive, disabled, focus: isOpen }"
+        class="column-header"
+        @click="ev => (interactive ? open(ev) : noop())"
+      >
+        <div class="content">
+          <span class="label">
+            <UiIcon :icon />
+            <slot />
+          </span>
+          <UiIcon :icon="currentInteraction?.icon" />
+        </div>
+      </th>
+    </template>
+    <MenuItem
+      v-for="interaction in interactions"
+      :key="interaction.id"
+      v-tooltip="$t('coming-soon')"
+      :disabled="interaction.disabled"
+      :on-click="() => updateInteraction(interaction)"
+    >
+      <UiIcon :icon="interaction.icon" />{{ interaction.label }}
+      <i v-if="currentInteraction?.id === interaction.id" class="current-interaction typo p3-regular-italic">
+        {{ $t('core.current').toLowerCase() }}
+      </i>
+    </MenuItem>
+  </MenuList>
+</template>
+
+<script lang="ts" setup>
+import UiIcon from '@core/components/icon/UiIcon.vue'
+import MenuItem from '@core/components/menu/MenuItem.vue'
+import MenuList from '@core/components/menu/MenuList.vue'
+import { vTooltip } from '@core/directives/tooltip.directive'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import { faArrowDown, faArrowUp, faEyeSlash, faFilter, faLayerGroup } from '@fortawesome/free-solid-svg-icons'
+import { noop } from '@vueuse/core'
+import { computed, inject } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+
+type InteractionId = 'sort-asc' | 'sort-desc' | 'group' | 'filter' | 'hide'
+type Interaction = {
+  disabled?: boolean
+  id: InteractionId
+  icon: IconDefinition
+  label: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    id?: string
+    icon?: IconDefinition
+    interactive?: boolean
+    disabled?: boolean
+  }>(),
+  {
+    disabled: false,
+    interactive: true,
+  }
+)
+const { t } = useI18n()
+const router = useRouter()
+
+const interactions = computed<Interaction[]>(() => [
+  { id: 'sort-asc', icon: faArrowDown, label: t('core.sort.ascending'), disabled: true },
+  { id: 'sort-desc', icon: faArrowUp, label: t('core.sort.descending'), disabled: true },
+  { id: 'group', icon: faLayerGroup, label: t('core.group'), disabled: true },
+  { id: 'filter', icon: faFilter, label: t('core.filter'), disabled: true },
+  { id: 'hide', icon: faEyeSlash, label: t('core.hide'), disabled: true },
+])
+
+const tableName = inject<string>('tableName')
+
+const currentInteraction = computed(() =>
+  interactions.value.find(interaction => router.currentRoute.value.query[columnName] === interaction.id)
+)
+
+const columnName = `${tableName}__${props.id}`
+
+const updateInteraction = (interaction: Interaction) => {
+  router.replace({
+    query: {
+      [columnName]: interaction.id,
+    },
+  })
+}
+</script>
+
+<style lang="postcss" scoped>
+/* COLOR VARIANTS */
+.column-header.interactive {
+  --color: var(--color-purple-base);
+  --background-color: var(--background-color-primary);
+
+  &.focus {
+    --color: var(--color-purple-base);
+    --background-color: var(--background-color-purple-10);
+  }
+
+  &:hover {
+    --color: var(--color-purple-d20);
+    --background-color: var(--background-color-purple-20);
+  }
+
+  &:active {
+    --color: var(--color-purple-d40);
+    --background-color: var(--background-color-purple-30);
+  }
+
+  &.disabled {
+    --color: var(--color-grey-400);
+    --background-color: var(--background-color-secondary);
+  }
+}
+/* IMPLEMENTATION */
+.column-header.interactive {
+  cursor: pointer;
+  color: var(--color);
+  background-color: var(--background-color);
+  &.disabled {
+    cursor: not-allowed;
+  }
+}
+
+.current-interaction {
+  color: var(--color-grey-300);
+}
+
+.content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.label {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.filter-icon {
+  cursor: pointer;
+}
+</style>

package/lib/components/table/UiTable.vue

@@ -0,0 +1,64 @@
+<template>
+  <table :class="{ 'vertical-border': verticalBorder }" class="ui-table typo p2-regular">
+    <slot />
+  </table>
+</template>
+
+<script lang="ts" setup>
+import { provide } from 'vue'
+
+const props = defineProps<{
+  name?: string
+  verticalBorder?: boolean
+}>()
+
+provide('tableName', props.name)
+</script>
+
+<style lang="postcss" scoped>
+.ui-table {
+  width: 100%;
+  border-spacing: 0;
+  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) {
+    padding: 1rem;
+    border-top: 0.1rem solid var(--color-grey-500);
+    text-align: left;
+  }
+
+  :deep(th) {
+    font-weight: 700;
+  }
+
+  :deep(thead) {
+    th,
+    td {
+      color: var(--color-purple-base);
+      font-size: 1.4rem;
+      font-weight: 400;
+      text-transform: uppercase;
+    }
+  }
+
+  &.vertical-border {
+    :deep(th),
+    :deep(td) {
+      border-right: 0.1rem solid var(--color-grey-500);
+
+      &:first-child {
+        border-left: none;
+      }
+
+      &:last-child {
+        border-right: none;
+      }
+    }
+  }
+}
+</style>

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>