@xen-orchestra/web-core 0.1.0 → 0.2.0

package/lib/components/query-search-bar/QuerySearchBar.vue

@@ -12,9 +12,16 @@
       :placeholder="$t('core.query-search-bar.placeholder')"
     />
     <template v-if="uiStore.isDesktop">
-      <UiButton type="submit">{{ $t('core.search') }}</UiButton>
+      <UiButton size="medium" color="normal" level="primary" type="submit">{{ $t('core.search') }}</UiButton>
       <Divider type="stretch" />
-      <UiButton v-tooltip="$t('coming-soon')" level="secondary" :left-icon="faFilter" disabled>
+      <UiButton
+        v-tooltip="$t('coming-soon')"
+        size="medium"
+        color="normal"
+        level="secondary"
+        :left-icon="faFilter"
+        disabled
+      >
         {{ $t('core.query-search-bar.use-query-builder') }}
       </UiButton>
     </template>
@@ -55,6 +62,6 @@ const value = ref<string>('')
 }
 
 .label {
-  color: var(--color-grey-200);
+  color: var(--color-neutral-txt-secondary);
 }
 </style>

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

@@ -5,7 +5,7 @@
       v-for="(segment, index) in segments"
       :key="index"
       :color="segment.color"
-      :percentage="(segment.value / max) * 100"
+      :percentage="max === 0 ? 0 : (segment.value / max) * 100"
     />
   </div>
 </template>
@@ -38,6 +38,6 @@ const max = computed(() => Math.max(props.maxValue ?? 0, totalValue.value))
   height: 4rem;
   border-radius: 0.8rem;
   overflow: hidden;
-  background-color: var(--background-color-purple-10);
+  background-color: var(--color-neutral-background-disabled);
 }
 </style>

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

@@ -38,19 +38,19 @@ useResizeObserver(ellipsisElement, ([entry]) => {
 /* COLOR VARIANT */
 .stacked-bar-segment {
   &.primary {
-    --background-color: var(--color-purple-base);
+    --background-color: var(--color-normal-item-base);
   }
 
   &.success {
-    --background-color: var(--color-green-base);
+    --background-color: var(--color-success-item-base);
   }
 
   &.warning {
-    --background-color: var(--color-orange-base);
+    --background-color: var(--color-warning-item-base);
   }
 
   &.danger {
-    --background-color: var(--color-red-base);
+    --background-color: var(--color-danger-item-base);
   }
 }
 
@@ -60,8 +60,9 @@ useResizeObserver(ellipsisElement, ([entry]) => {
   justify-content: center;
   align-items: center;
   white-space: nowrap;
-  color: var(--color-grey-600);
+  color: var(--color-normal-txt-item);
   background-color: var(--background-color);
+  padding-inline: 0.8rem;
 }
 
 .hidden {

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

@@ -0,0 +1,11 @@
+<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/StateHero.vue

@@ -17,7 +17,7 @@ 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'
+  image?: 'no-result' | 'under-construction' | 'no-data' // TODO: 'offline' |  'not-found' | 'all-good' | 'all-done' | 'error'
 }>()
 
 const typoClass = computed(() => (props.type === 'page' ? 'h2-black' : 'h4-medium'))
@@ -35,12 +35,14 @@ const imageSrc = computed(() => {
 .state-hero {
   &.page {
     --image-width: 90%;
+    --image-max-height: none;
     --spinner-size: 10rem;
     --gap: 8.2rem;
   }
 
   &.card {
     --image-width: 70%;
+    --image-max-height: 20rem;
     --spinner-size: 6rem;
     --gap: 2rem;
   }
@@ -58,14 +60,15 @@ const imageSrc = computed(() => {
 .image {
   width: var(--image-width);
   max-width: 55rem;
+  max-height: var(--image-max-height);
 }
 
 .spinner {
-  color: var(--color-purple-base);
+  color: var(--color-normal-txt-base);
   font-size: var(--spinner-size);
 }
 
 .text {
-  color: var(--color-purple-base);
+  color: var(--color-normal-txt-base);
 }
 </style>

package/lib/components/tab/TabItem.vue

@@ -40,31 +40,31 @@ const classNames = computed(() => {
 /* COLOR VARIANTS */
 .tab-item {
   & {
-    --color: var(--color-grey-100);
+    --color: var(--color-neutral-txt-primary);
     --border-color: transparent;
     --background-color: transparent;
   }
 
   &:is(:hover, .hover, :focus-visible) {
-    --color: var(--color-grey-100);
-    --border-color: var(--color-purple-d20);
-    --background-color: var(--background-color-purple-20);
+    --color: var(--color-neutral-txt-primary);
+    --border-color: var(--color-normal-item-hover);
+    --background-color: var(--color-normal-background-hover);
   }
 
   &:is(:active, .pressed) {
-    --color: var(--color-grey-100);
-    --border-color: var(--color-purple-d40);
-    --background-color: var(--background-color-purple-30);
+    --color: var(--color-neutral-txt-primary);
+    --border-color: var(--color-normal-item-active);
+    --background-color: var(--color-normal-background-active);
   }
 
   &:is(.active, .selected) {
-    --color: var(--color-grey-100);
-    --border-color: var(--color-purple-base);
-    --background-color: var(--background-color-purple-10);
+    --color: var(--color-neutral-txt-primary);
+    --border-color: var(--color-normal-item-base);
+    --background-color: var(--color-normal-background-selected);
   }
 
   &:is(:disabled, .disabled) {
-    --color: var(--color-grey-400);
+    --color: var(--color-neutral-txt-secondary);
     --border-color: transparent;
     --background-color: transparent;
   }

package/lib/components/tab/TabList.vue

@@ -24,8 +24,8 @@ useContext(DisabledContext, () => props.disabled)
   display: flex;
   align-items: stretch;
   height: 5rem;
-  border-bottom: 1px solid var(--color-grey-500);
-  background-color: var(--background-color-primary);
+  border-bottom: 1px solid var(--color-neutral-border);
+  background-color: var(--color-neutral-background-primary);
   max-width: 100%;
   overflow: auto;
   flex-shrink: 0;

package/lib/components/table/ColumnTitle.vue

@@ -1,6 +1,6 @@
 <!-- v1.0 -->
 <template>
-  <MenuList :disabled placement="bottom-start" shadow>
+  <MenuList :disabled placement="bottom-start" border>
     <template #trigger="{ open, isOpen }">
       <th
         :class="{ interactive, disabled, focus: isOpen }"
@@ -9,10 +9,10 @@
       >
         <div class="content">
           <span class="label">
-            <UiIcon :icon />
+            <VtsIcon :icon accent="current" />
             <slot />
           </span>
-          <UiIcon :icon="currentInteraction?.icon" />
+          <VtsIcon :icon="currentInteraction?.icon" accent="current" />
         </div>
       </th>
     </template>
@@ -23,7 +23,8 @@
       :disabled="interaction.disabled"
       :on-click="() => updateInteraction(interaction)"
     >
-      <UiIcon :icon="interaction.icon" />{{ interaction.label }}
+      <VtsIcon :icon="interaction.icon" accent="current" />
+      {{ interaction.label }}
       <i v-if="currentInteraction?.id === interaction.id" class="current-interaction typo p3-regular-italic">
         {{ $t('core.current').toLowerCase() }}
       </i>
@@ -32,7 +33,7 @@
 </template>
 
 <script lang="ts" setup>
-import UiIcon from '@core/components/icon/UiIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import MenuItem from '@core/components/menu/MenuItem.vue'
 import MenuList from '@core/components/menu/MenuList.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
@@ -94,41 +95,43 @@ const updateInteraction = (interaction: Interaction) => {
 <style lang="postcss" scoped>
 /* COLOR VARIANTS */
 .column-header.interactive {
-  --color: var(--color-purple-base);
-  --background-color: var(--background-color-primary);
+  --color: var(--color-normal-txt-base);
+  --background-color: var(--color-neutral-background-primary);
 
   &.focus {
-    --color: var(--color-purple-base);
-    --background-color: var(--background-color-purple-10);
+    --color: var(--color-normal-txt-base);
+    --background-color: var(--color-normal-background-selected);
   }
 
   &:hover {
-    --color: var(--color-purple-d20);
-    --background-color: var(--background-color-purple-20);
+    --color: var(--color-normal-txt-hover);
+    --background-color: var(--color-normal-background-hover);
   }
 
   &:active {
-    --color: var(--color-purple-d40);
-    --background-color: var(--background-color-purple-30);
+    --color: var(--color-normal-txt-active);
+    --background-color: var(--color-normal-background-active);
   }
 
   &.disabled {
-    --color: var(--color-grey-400);
-    --background-color: var(--background-color-secondary);
+    --color: var(--color-neutral-txt-secondary);
+    --background-color: var(--color-neutral-background-disabled);
   }
 }
+
 /* 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);
+  color: var(--color-neutral-txt-secondary);
 }
 
 .content {

package/lib/components/table/UiTable.vue

@@ -19,16 +19,16 @@ provide('tableName', props.name)
 .ui-table {
   width: 100%;
   border-spacing: 0;
-  background-color: var(--background-color-primary);
+  background-color: var(--color-neutral-background-primary);
   line-height: 2.4rem;
-  color: var(--color-grey-200);
+  color: var(--color-neutral-txt-secondary);
   border-collapse: collapse;
   table-layout: fixed;
 
   :deep(th),
   :deep(td) {
     padding: 1rem;
-    border-top: 0.1rem solid var(--color-grey-500);
+    border-top: 0.1rem solid var(--color-neutral-border);
     text-align: left;
   }
 
@@ -39,7 +39,7 @@ provide('tableName', props.name)
   :deep(thead) {
     th,
     td {
-      color: var(--color-purple-base);
+      color: var(--color-normal-txt-base);
       font-size: 1.4rem;
       font-weight: 400;
       text-transform: uppercase;
@@ -49,7 +49,7 @@ provide('tableName', props.name)
   &.vertical-border {
     :deep(th),
     :deep(td) {
-      border-right: 0.1rem solid var(--color-grey-500);
+      border-right: 0.1rem solid var(--color-neutral-border);
 
       &:first-child {
         border-left: none;

package/lib/components/task/QuickTaskItem.vue

@@ -9,16 +9,16 @@
       </div>
       <div class="informations">
         <div class="line-1">
-          <UiTag v-if="task.tag" color="grey">{{ task.tag }}</UiTag>
+          <UiTag v-if="task.tag" color="secondary">{{ task.tag }}</UiTag>
           <div v-if="hasSubTasks" class="subtasks">
-            <UiIcon :icon="faCircleNotch" />
+            <VtsIcon :icon="faCircleNotch" accent="current" />
             <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" />
+            <VtsIcon :icon="faArrowRight" accent="current" />
             {{ $d(new Date(task.end), 'datetime_short') }}
           </template>
         </div>
@@ -30,7 +30,7 @@
 
 <script lang="ts" setup>
 import ButtonIcon from '@core/components/button/ButtonIcon.vue'
-import UiIcon from '@core/components/icon/UiIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import QuickTaskList from '@core/components/task/QuickTaskList.vue'
 import UiTag from '@core/components/UiTag.vue'
 import type { Task } from '@core/types/task.type'
@@ -54,7 +54,7 @@ const hasSubTasks = computed(() => subTasksCount.value > 0)
   display: flex;
 
   &:not(:last-child) {
-    border-bottom: 0.1rem solid var(--color-grey-500);
+    border-bottom: 0.1rem solid var(--color-neutral-border);
   }
 }
 
@@ -80,7 +80,7 @@ const hasSubTasks = computed(() => subTasksCount.value > 0)
 }
 
 .line-2 {
-  color: var(--color-grey-200);
+  color: var(--color-neutral-txt-secondary);
 }
 
 .subtasks {

package/lib/components/task/QuickTaskList.vue

@@ -29,7 +29,7 @@ defineProps<{
 .vts-quick-task-list {
   display: flex;
   flex-direction: column;
-  background-color: var(--background-color-primary);
+  background-color: var(--color-neutral-background-primary);
   padding: 1rem 0;
 
   &:not(.sublist) {

package/lib/components/task/QuickTaskPanel.vue

@@ -53,7 +53,7 @@ const currentTasks = computed(() => {
   min-width: 65rem;
   border-radius: 0.8rem;
   overflow: hidden;
-  border: 0.1rem solid var(--color-grey-500);
+  border: 0.1rem solid var(--color-neutral-border);
   z-index: 1001;
 
   &.mobile {

package/lib/components/task/QuickTaskTabBar.vue

@@ -2,15 +2,33 @@
   <TabList :disabled="loading">
     <TabItem v-bind="tabs.pending.bindings">
       {{ $t('tasks.quick-view.in-progress') }}
-      <UiCounter v-if="pendingCount !== undefined" :value="pendingCount" color="info" />
+      <VtsCounter
+        v-if="pendingCount !== undefined"
+        :value="pendingCount"
+        accent="brand"
+        variant="primary"
+        size="small"
+      />
     </TabItem>
     <TabItem v-bind="tabs.success.bindings">
       {{ $t('tasks.quick-view.done') }}
-      <UiCounter v-if="successCount !== undefined" :value="successCount" color="success" />
+      <VtsCounter
+        v-if="successCount !== undefined"
+        :value="successCount"
+        accent="success"
+        variant="primary"
+        size="small"
+      />
     </TabItem>
     <TabItem v-bind="tabs.failure.bindings">
       {{ $t('tasks.quick-view.failed') }}
-      <UiCounter v-if="failureCount !== undefined" :value="failureCount" color="danger" />
+      <VtsCounter
+        v-if="failureCount !== undefined"
+        :value="failureCount"
+        accent="danger"
+        variant="primary"
+        size="small"
+      />
     </TabItem>
     <Divider type="tab" />
     <TabItem v-bind="tabs.all.bindings">
@@ -26,10 +44,10 @@
 </template>
 
 <script lang="ts" setup>
+import VtsCounter from '@core/components/counter/VtsCounter.vue'
 import Divider from '@core/components/divider/Divider.vue'
 import TabItem from '@core/components/tab/TabItem.vue'
 import TabList from '@core/components/tab/TabList.vue'
-import UiCounter from '@core/components/UiCounter.vue'
 import { useTabList } from '@core/composables/tab-list.composable'
 import type { TaskTab } from '@core/types/task.type'
 

package/lib/components/tooltip/TooltipItem.vue

@@ -10,7 +10,7 @@ import type { TooltipOptions } from '@core/stores/tooltip.store'
 import { hasEllipsis } from '@core/utils/has-ellipsis.util'
 import { isString } from 'lodash-es'
 import place from 'placement.js'
-import { computed, ref, watchEffect } from 'vue'
+import { computed, ref, watch, watchEffect } from 'vue'
 
 const props = defineProps<{
   target: HTMLElement
@@ -41,13 +41,19 @@ const isDisabled = computed(() => content.value === false)
 
 const placement = computed(() => props.options.placement ?? 'top')
 
-watchEffect(() => {
-  if (tooltipElement.value) {
-    place(props.target, tooltipElement.value, {
-      placement: placement.value,
-    })
+function updatePlacement() {
+  if (!tooltipElement.value) {
+    return
   }
-})
+
+  place(props.target, tooltipElement.value, {
+    placement: placement.value,
+  })
+}
+
+watchEffect(() => updatePlacement(), { flush: 'post' })
+
+watch(content, () => updatePlacement(), { flush: 'post' })
 </script>
 
 <style lang="postcss" scoped>
@@ -56,9 +62,9 @@ watchEffect(() => {
   display: inline-flex;
   padding: 0.4rem 0.8rem;
   pointer-events: none;
-  color: var(--color-grey-600);
+  color: var(--color-neutral-background-primary);
   border-radius: 0.4rem;
-  background-color: var(--color-grey-100);
+  background-color: var(--color-neutral-txt-primary);
   z-index: 999999;
 }
 

package/lib/components/tree/TreeItemError.vue

@@ -8,6 +8,6 @@
 <style lang="postcss" scoped>
 .tree-item-error {
   padding-left: 3rem;
-  color: var(--color-red-base);
+  color: var(--color-danger-txt-base);
 }
 </style>

package/lib/components/tree/TreeItemLabel.vue

@@ -26,7 +26,7 @@
       <div v-else class="h-line" />
       <a v-tooltip="{ selector: '.text' }" :href class="link typo p2-medium" @click="navigate">
         <slot name="icon">
-          <UiIcon :icon class="icon" />
+          <VtsIcon :icon accent="current" class="icon" />
         </slot>
         <div class="text text-ellipsis">
           <slot />
@@ -39,7 +39,7 @@
 
 <script lang="ts" setup>
 import ButtonIcon from '@core/components/button/ButtonIcon.vue'
-import UiIcon from '@core/components/icon/UiIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import TreeLine from '@core/components/tree/TreeLine.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import { IK_TREE_ITEM_EXPANDED, IK_TREE_ITEM_HAS_CHILDREN, IK_TREE_LIST_DEPTH } from '@core/utils/injection-keys.util'
@@ -72,22 +72,22 @@ const depth = inject(IK_TREE_LIST_DEPTH, 0)
 <style lang="postcss" scoped>
 /* COLOR VARIANTS */
 .tree-item-label {
-  --color: var(--color-grey-100);
-  --background-color: var(--background-color-primary);
+  --color: var(--color-neutral-txt-primary);
+  --background-color: var(--color-neutral-background-primary);
 
   &:is(.exact-active, .active) {
-    --color: var(--color-grey-100);
-    --background-color: var(--background-color-purple-10);
+    --color: var(--color-neutral-txt-primary);
+    --background-color: var(--color-normal-background-selected);
   }
 
   &:hover {
-    --color: var(--color-grey-100);
-    --background-color: var(--background-color-purple-20);
+    --color: var(--color-neutral-txt-primary);
+    --background-color: var(--color-normal-background-hover);
   }
 
   &:active {
-    --color: var(--color-grey-100);
-    --background-color: var(--background-color-purple-30);
+    --color: var(--color-neutral-txt-primary);
+    --background-color: var(--color-normal-background-active);
   }
 }
 
@@ -114,7 +114,7 @@ const depth = inject(IK_TREE_LIST_DEPTH, 0)
   gap: 1.2rem;
 
   &:hover {
-    color: var(--color-grey-100);
+    color: var(--color-neutral-txt-primary);
   }
 }
 
@@ -128,7 +128,7 @@ const depth = inject(IK_TREE_LIST_DEPTH, 0)
 
 .h-line {
   width: 2rem;
-  border-bottom: 0.1rem solid var(--color-purple-base);
+  border-bottom: 0.1rem solid var(--color-normal-txt-base);
   margin-left: -0.4rem;
 }
 </style>

package/lib/components/tree/TreeLine.vue

@@ -24,7 +24,7 @@ defineProps<{
 
   .tree-line-vertical {
     width: 0.1rem;
-    background: var(--color-purple-base);
+    background: var(--color-normal-txt-base);
     height: calc(100% + var(--offset));
     transform: translateY(calc(var(--offset) * -1));
   }
@@ -35,7 +35,7 @@ defineProps<{
     background: transparent;
 
     &.right {
-      background: var(--color-purple-base);
+      background: var(--color-normal-txt-base);
     }
   }
 }

package/lib/components/tree/TreeLoadingItem.vue

@@ -6,7 +6,7 @@
         <template v-if="depth > 1">
           <TreeLine v-for="i in depth - 1" :key="i" :right="i === depth - 1" full-height />
         </template>
-        <UiIcon :icon class="icon" />
+        <VtsIcon :icon accent="current" />
         <div class="loader">&nbsp;</div>
       </div>
     </div>
@@ -14,7 +14,7 @@
 </template>
 
 <script lang="ts" setup>
-import UiIcon from '@core/components/icon/UiIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import TreeLine from '@core/components/tree/TreeLine.vue'
 import { IK_TREE_LIST_DEPTH } from '@core/utils/injection-keys.util'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
@@ -31,11 +31,7 @@ const depth = inject(IK_TREE_LIST_DEPTH, 0)
 .tree-loading-item-label-placeholder {
   display: flex;
   height: 4rem;
-  background-color: var(--background-color-primary);
-}
-
-.icon {
-  color: var(--color-grey-100);
+  background-color: var(--color-neutral-background-primary);
 }
 
 .link-placeholder {
@@ -49,7 +45,7 @@ const depth = inject(IK_TREE_LIST_DEPTH, 0)
 .loader {
   flex: 1;
   animation: pulse alternate 1s infinite;
-  background-color: var(--background-color-purple-10);
+  background-color: var(--color-normal-background-selected);
 }
 
 @keyframes pulse {

package/lib/components/user/UserLink.vue

@@ -24,24 +24,24 @@ defineProps<{
 <style lang="postcss" scoped>
 /* COLOR VARIANTS */
 .user-link {
-  --color: var(--color-purple-base);
-  --border-color: var(--color-purple-base);
+  --color: var(--color-normal-txt-base);
+  --border-color: var(--color-normal-txt-base);
 
   &.is-link {
     &:is(:hover, .hover, :focus-visible) {
-      --color: var(--color-purple-d20);
-      --border-color: var(--color-purple-d20);
+      --color: var(--color-normal-txt-hover);
+      --border-color: var(--color-normal-txt-hover);
     }
 
     &:is(:active, .pressed) {
-      --color: var(--color-purple-d40);
-      --border-color: var(--color-purple-d40);
+      --color: var(--color-normal-txt-active);
+      --border-color: var(--color-normal-txt-active);
     }
   }
 
   &.disabled {
-    --color: var(--color-grey-400);
-    --border-color: var(--color-grey-400);
+    --color: var(--color-neutral-txt-secondary);
+    --border-color: var(--color-neutral-txt-secondary);
   }
 }