@xen-orchestra/web-core 0.4.0 → 0.5.0

package/lib/components/tree/{TreeItem.vue → VtsTreeItem.vue}

@@ -1,6 +1,5 @@
-<!-- v1.1 -->
 <template>
-  <li class="tree-item">
+  <li class="vts-tree-item">
     <slot />
     <slot v-if="expanded" name="sublist" />
   </li>
@@ -15,8 +14,8 @@ const props = defineProps<{
 }>()
 
 defineSlots<{
-  default: () => void
-  sublist: () => void
+  default(): any
+  sublist?(): any
 }>()
 
 const hasChildren = ref(false)

package/lib/components/tree/VtsTreeItemError.vue

@@ -0,0 +1,18 @@
+<template>
+  <li class="vts-tree-item-error typo h6-semi-bold">
+    <slot />
+  </li>
+</template>
+
+<script lang="ts" setup>
+defineSlots<{
+  default(): any
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.vts-tree-item-error {
+  padding-left: 3rem;
+  color: var(--color-danger-txt-base);
+}
+</style>

package/lib/components/tree/{TreeLine.vue → VtsTreeLine.vue}

@@ -1,6 +1,5 @@
-<!-- v1.1 -->
 <template>
-  <div class="tree-line">
+  <div class="vts-tree-line">
     <div :class="{ 'tree-line-half-height': halfHeight }" class="tree-line-vertical" />
     <div :class="{ right }" class="tree-line-horizontal" />
   </div>
@@ -14,8 +13,7 @@ defineProps<{
 </script>
 
 <style lang="postcss" scoped>
-.tree-line {
-  --offset: 0.7rem;
+.vts-tree-line {
   flex: 0 1 1em;
   align-self: stretch;
   display: flex;
@@ -24,9 +22,9 @@ defineProps<{
 
   .tree-line-vertical {
     width: 0.1rem;
-    background: var(--color-normal-txt-base);
-    height: calc(100% + var(--offset));
-    transform: translateY(calc(var(--offset) * -1));
+    background: var(--color-info-txt-base);
+    height: calc(100% + 0.7rem);
+    transform: translateY(calc(0.7rem * -1));
   }
 
   .tree-line-horizontal {
@@ -35,16 +33,16 @@ defineProps<{
     background: transparent;
 
     &.right {
-      background: var(--color-normal-txt-base);
+      background: var(--color-info-txt-base);
     }
   }
 }
 
-.tree-item:last-child {
-  > .tree-item-label {
+.vts-tree-item:last-child {
+  > .ui-tree-item-label {
     .tree-line-half-height {
       align-self: start;
-      height: calc(50% + var(--offset));
+      height: calc(50% + 0.7rem);
     }
   }
 }

package/lib/components/tree/{TreeList.vue → VtsTreeList.vue}

@@ -1,6 +1,5 @@
-<!-- v1.1 -->
 <template>
-  <ul class="tree-list">
+  <ul class="vts-tree-list">
     <slot />
   </ul>
 </template>
@@ -9,6 +8,10 @@
 import { IK_TREE_LIST_DEPTH } from '@core/utils/injection-keys.util'
 import { inject, provide } from 'vue'
 
+defineSlots<{
+  default(): any
+}>()
+
 const depth = inject(IK_TREE_LIST_DEPTH, 0)
 provide(IK_TREE_LIST_DEPTH, depth + 1)
 </script>

package/lib/components/tree/VtsTreeLoadingItem.vue

@@ -0,0 +1,61 @@
+<template>
+  <li class="vts-tree-loading-item">
+    <div class="label-placeholder">
+      <div class="link-placeholder">
+        <template v-if="depth > 1">
+          <VtsTreeLine v-for="i in depth - 1" :key="i" :right="i === depth - 1" full-height />
+        </template>
+        <VtsIcon :icon accent="current" />
+        <div class="loader">&nbsp;</div>
+      </div>
+    </div>
+  </li>
+</template>
+
+<script lang="ts" setup>
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import VtsTreeLine from '@core/components/tree/VtsTreeLine.vue'
+import { IK_TREE_LIST_DEPTH } from '@core/utils/injection-keys.util'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import { inject } from 'vue'
+
+defineProps<{
+  icon: IconDefinition
+}>()
+
+const depth = inject(IK_TREE_LIST_DEPTH, 0)
+</script>
+
+<style lang="postcss" scoped>
+.vts-tree-loading-item {
+  .label-placeholder {
+    display: flex;
+    height: 4rem;
+    background-color: var(--color-neutral-background-primary);
+
+    .link-placeholder {
+      display: flex;
+      align-items: center;
+      flex: 1;
+      padding: 0 0.8rem;
+      gap: 0.4rem;
+    }
+
+    .loader {
+      flex: 1;
+      animation: pulse alternate 1s infinite;
+      background-color: var(--color-info-background-selected);
+    }
+  }
+
+  @keyframes pulse {
+    0% {
+      opacity: 0.5;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+}
+</style>

package/lib/components/ui/account-menu-button/UiAccountMenuButton.vue

@@ -0,0 +1,64 @@
+<!-- v2 -->
+<template>
+  <button :class="{ disabled: isDisabled, selected }" class="ui-account-menu-button" type="button">
+    <UiUserLogo class="logo" :size />
+  </button>
+</template>
+
+<script lang="ts" setup>
+import UiUserLogo from '@core/components/ui/user-logo/UiUserLogo.vue'
+import { useContext } from '@core/composables/context.composable'
+import { DisabledContext } from '@core/context'
+
+defineProps<{
+  size: 'small' | 'medium'
+  selected?: boolean
+}>()
+
+const isDisabled = useContext(DisabledContext)
+</script>
+
+<style lang="postcss" scoped>
+.ui-account-menu-button {
+  padding: 0.4rem;
+  border-radius: 0.4rem;
+  border-color: transparent;
+  background-color: transparent;
+
+  &:not(.disabled) {
+    cursor: pointer;
+  }
+
+  &:hover {
+    background-color: var(--color-info-background-hover);
+  }
+
+  &:active {
+    background-color: var(--color-info-background-active);
+  }
+
+  &.selected {
+    background-color: var(--color-info-background-selected);
+  }
+
+  &:focus-visible {
+    outline: none;
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: -0.4rem;
+      border: 0.2rem solid var(--color-info-txt-base);
+      border-radius: 0.4rem;
+    }
+  }
+
+  &.disabled {
+    background-color: transparent;
+
+    .logo {
+      border-color: var(--color-neutral-txt-secondary);
+    }
+  }
+}
+</style>

package/lib/components/ui/actions-title/UiActionsTitle.vue

@@ -1,6 +1,6 @@
 <!-- v2 -->
 <template>
-  <span class="actions-title typo p2-regular">
+  <span class="ui-actions-title typo p2-regular">
     <slot />
   </span>
 </template>
@@ -12,7 +12,7 @@ defineSlots<{
 </script>
 
 <style scoped lang="postcss">
-.actions-title {
+.ui-actions-title {
   color: var(--color-neutral-txt-secondary);
 }
 </style>