@xen-orchestra/web-core 0.0.1

package/lib/components/menu/MenuTrigger.vue

@@ -0,0 +1,52 @@
+<!-- v1.0 -->
+<template>
+  <div :class="{ active, disabled }" class="menu-trigger">
+    <UiIcon :busy="busy" :icon="icon" />
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import UiIcon from '@core/components/icon/UiIcon.vue'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+
+defineProps<{
+  active?: boolean
+  busy?: boolean
+  disabled?: boolean
+  icon?: IconDefinition
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.menu-trigger {
+  font-size: 1.6rem;
+  font-weight: 400;
+  display: flex;
+  align-items: center;
+  height: 4.4rem;
+  padding-right: 1.5rem;
+  padding-left: 1.5rem;
+  white-space: nowrap;
+  border-radius: 0.8rem;
+  gap: 1rem;
+  background-color: var(--color-grey-600);
+
+  &.disabled {
+    color: var(--color-grey-500);
+  }
+
+  &:not(.disabled) {
+    cursor: pointer;
+
+    &:hover {
+      background-color: var(--background-color-purple-10);
+    }
+
+    &:active,
+    &.active {
+      background-color: var(--background-color-purple-20);
+    }
+  }
+}
+</style>

package/lib/components/tab/TabItem.vue

@@ -0,0 +1,100 @@
+<!-- v1.0 -->
+<template>
+  <component :is="tag" :class="classNames" class="tab-item typo">
+    <slot />
+  </component>
+</template>
+
+<script lang="ts" setup>
+import { useContext } from '@core/composables/context.composable'
+import { DisabledContext } from '@core/context'
+import { useUiStore } from '@core/stores/ui.store'
+import { storeToRefs } from 'pinia'
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    disabled?: boolean
+    active?: boolean
+    tag?: string
+  }>(),
+  { tag: 'span', disabled: undefined }
+)
+
+const { isMobile } = storeToRefs(useUiStore())
+
+const isDisabled = useContext(DisabledContext, () => props.disabled)
+
+const classNames = computed(() => {
+  return [
+    isMobile.value ? 'c3-semi-bold' : 'c1-semi-bold',
+    {
+      disabled: isDisabled.value,
+      active: props.active,
+    },
+  ]
+})
+</script>
+
+<style lang="postcss" scoped>
+/* COLOR VARIANTS */
+.tab-item {
+  & {
+    --color: var(--color-grey-100);
+    --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);
+  }
+
+  &:is(:active, .pressed) {
+    --color: var(--color-grey-100);
+    --border-color: var(--color-purple-d40);
+    --background-color: var(--background-color-purple-30);
+  }
+
+  &:is(.active, .selected) {
+    --color: var(--color-grey-100);
+    --border-color: var(--color-purple-base);
+    --background-color: var(--background-color-purple-10);
+  }
+
+  &:is(:disabled, .disabled) {
+    --color: var(--color-grey-400);
+    --border-color: transparent;
+    --background-color: transparent;
+  }
+}
+
+/* SIZE VARIANTS */
+.tab-item {
+  &.c3-semi-bold {
+    --spacing: 0.8rem;
+  }
+
+  &.c1-semi-bold {
+    --spacing: 1.6rem;
+  }
+}
+
+/* IMPLEMENTATION */
+.tab-item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing);
+  padding: var(--spacing);
+  text-decoration: none;
+  color: var(--color);
+  background-color: var(--background-color);
+  border-bottom: 0.2rem solid var(--border-color);
+  cursor: pointer;
+
+  &.disabled {
+    pointer-events: none;
+  }
+}
+</style>

package/lib/components/tab/TabList.vue

@@ -0,0 +1,32 @@
+<!-- v1.0 -->
+<template>
+  <div class="tab-list">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useContext } from '@core/composables/context.composable'
+import { DisabledContext } from '@core/context'
+
+const props = withDefaults(
+  defineProps<{
+    disabled?: boolean
+  }>(),
+  { disabled: undefined }
+)
+
+useContext(DisabledContext, () => props.disabled)
+</script>
+
+<style lang="postcss" scoped>
+.tab-list {
+  display: flex;
+  align-items: stretch;
+  height: 5rem;
+  border-bottom: 1px solid var(--color-grey-500);
+  background-color: var(--background-color-primary);
+  max-width: 100%;
+  overflow: auto;
+}
+</style>

package/lib/components/tooltip/TooltipItem.vue

@@ -0,0 +1,80 @@
+<!-- v1.0 -->
+<template>
+  <div v-if="!isDisabled" ref="tooltipElement" class="app-tooltip typo p3-regular">
+    {{ content }}
+  </div>
+</template>
+
+<script lang="ts" setup>
+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'
+
+const props = defineProps<{
+  target: HTMLElement
+  options: TooltipOptions
+}>()
+
+const tooltipElement = ref<HTMLElement>()
+
+const content = computed(() => {
+  if (props.options.content === false) {
+    return false
+  }
+
+  if (isString(props.options.content)) {
+    return props.options.content.trim() === '' ? false : props.options.content
+  }
+
+  const ellipsisTarget = props.options.selector ? props.target.querySelector(props.options.selector) : props.target
+
+  if (!ellipsisTarget || !hasEllipsis(ellipsisTarget, { vertical: props.options.vertical })) {
+    return false
+  }
+
+  return ellipsisTarget.textContent?.trim() ?? false
+})
+
+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,
+    })
+  }
+})
+</script>
+
+<style lang="postcss" scoped>
+.app-tooltip {
+  position: relative;
+  display: inline-flex;
+  padding: 0.4rem 0.8rem;
+  pointer-events: none;
+  color: var(--color-grey-600);
+  border-radius: 0.4rem;
+  background-color: var(--color-grey-100);
+  z-index: 999999;
+}
+
+[data-placement^='top'] {
+  margin-bottom: 0.7rem;
+}
+
+[data-placement^='right'] {
+  margin-left: 0.7rem;
+}
+
+[data-placement^='bottom'] {
+  margin-top: 0.7rem;
+}
+
+[data-placement^='left'] {
+  margin-right: 0.7rem;
+}
+</style>

package/lib/components/tooltip/TooltipList.vue

@@ -0,0 +1,15 @@
+<!-- v1.0 -->
+<template>
+  <AppTooltip v-for="tooltip in tooltips" :key="tooltip.key" :options="tooltip.options" :target="tooltip.target" />
+</template>
+
+<script lang="ts" setup>
+import AppTooltip from '@core/components/tooltip/TooltipItem.vue'
+import { useTooltipStore } from '@core/stores/tooltip.store'
+import { storeToRefs } from 'pinia'
+
+const tooltipStore = useTooltipStore()
+const { tooltips } = storeToRefs(tooltipStore)
+</script>
+
+<style scoped></style>

package/lib/components/tree/TreeItem.vue

@@ -0,0 +1,34 @@
+<!-- v1.1 -->
+<template>
+  <li class="tree-item">
+    <slot />
+    <slot v-if="isExpanded" name="sublist" />
+  </li>
+</template>
+
+<script lang="ts" setup>
+import { IK_TREE_ITEM_EXPANDED, IK_TREE_ITEM_HAS_CHILDREN, IK_TREE_ITEM_TOGGLE } from '@core/utils/injection-keys.util'
+import { useToggle } from '@vueuse/core'
+import { onBeforeMount, onBeforeUpdate, provide, ref, useSlots } from 'vue'
+
+defineSlots<{
+  default: () => void
+  sublist: () => void
+}>()
+
+const [isExpanded, toggle] = useToggle(true)
+
+const hasChildren = ref(false)
+
+const updateHasChildren = () => {
+  const { sublist } = useSlots()
+  hasChildren.value = sublist !== undefined
+}
+
+onBeforeMount(() => updateHasChildren())
+onBeforeUpdate(() => updateHasChildren())
+
+provide(IK_TREE_ITEM_HAS_CHILDREN, hasChildren)
+provide(IK_TREE_ITEM_TOGGLE, toggle)
+provide(IK_TREE_ITEM_EXPANDED, isExpanded)
+</script>

package/lib/components/tree/TreeItemError.vue

@@ -0,0 +1,13 @@
+<!-- v1.1 -->
+<template>
+  <li class="tree-item-error typo h6-semi-bold">
+    <slot />
+  </li>
+</template>
+
+<style lang="postcss" scoped>
+.tree-item-error {
+  padding-left: 3rem;
+  color: var(--color-red-base);
+}
+</style>

package/lib/components/tree/TreeItemLabel.vue

@@ -0,0 +1,128 @@
+<!-- v1.1 -->
+<template>
+  <RouterLink v-slot="{ isExactActive, href, navigate }" :to="route" custom>
+    <div
+      :class="isExactActive ? 'exact-active' : active ? 'active' : undefined"
+      class="tree-item-label"
+      v-bind="$attrs"
+    >
+      <template v-if="depth > 1">
+        <TreeLine
+          v-for="i in depth - 1"
+          :key="i"
+          :half-height="(!hasToggle && i === depth - 1) || !isExpanded"
+          :right="i === depth - 1"
+        />
+      </template>
+      <ButtonIcon
+        v-if="hasToggle"
+        v-tooltip="isExpanded ? $t('core.close') : $t('core.open')"
+        :icon="isExpanded ? faAngleDown : faAngleRight"
+        size="small"
+        @click="toggle()"
+      />
+      <TreeLine v-else-if="!noIndent" />
+      <a v-tooltip="{ selector: '.text' }" :href class="link typo p2-medium" @click="navigate">
+        <slot name="icon">
+          <UiIcon :icon class="icon" />
+        </slot>
+        <div class="text">
+          <slot />
+        </div>
+      </a>
+      <slot name="addons" />
+    </div>
+  </RouterLink>
+</template>
+
+<script lang="ts" setup>
+import ButtonIcon from '@core/components/button/ButtonIcon.vue'
+import UiIcon from '@core/components/icon/UiIcon.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_ITEM_TOGGLE,
+  IK_TREE_LIST_DEPTH,
+} from '@core/utils/injection-keys.util'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import { faAngleDown, faAngleRight } from '@fortawesome/free-solid-svg-icons'
+import { inject, ref } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
+
+defineProps<{
+  icon?: IconDefinition
+  route: RouteLocationRaw
+  active?: boolean
+  noIndent?: boolean
+}>()
+
+const hasToggle = inject(IK_TREE_ITEM_HAS_CHILDREN, ref(false))
+
+const toggle = inject(IK_TREE_ITEM_TOGGLE, () => undefined)
+const isExpanded = inject(IK_TREE_ITEM_EXPANDED, ref(true))
+
+const depth = inject(IK_TREE_LIST_DEPTH, 0)
+</script>
+
+<style lang="postcss" scoped>
+/* COLOR VARIANTS */
+.tree-item-label {
+  --color: var(--color-grey-100);
+  --background-color: var(--background-color-primary);
+
+  &:is(.exact-active, .active) {
+    --color: var(--color-grey-100);
+    --background-color: var(--background-color-purple-10);
+  }
+
+  &:hover {
+    --color: var(--color-grey-100);
+    --background-color: var(--background-color-purple-20);
+  }
+
+  &:active {
+    --color: var(--color-grey-100);
+    --background-color: var(--background-color-purple-30);
+  }
+}
+
+/* IMPLEMENTATION */
+.tree-item-label {
+  display: flex;
+  align-items: center;
+  color: var(--color);
+  background-color: var(--background-color);
+  border-radius: 0.8rem;
+  gap: 0.4rem;
+  padding: 0 0.8rem;
+  margin-bottom: 0.2rem;
+}
+
+.link {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+  padding: 0.8rem 0;
+  text-decoration: none;
+  color: inherit;
+  gap: 1.2rem;
+
+  &:hover {
+    color: var(--color-grey-100);
+  }
+}
+
+.text {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  padding-inline-end: 0.4rem;
+}
+
+.icon {
+  font-size: 1.6rem;
+}
+</style>

package/lib/components/tree/TreeLine.vue

@@ -0,0 +1,51 @@
+<!-- v1.1 -->
+<template>
+  <div class="tree-line">
+    <div :class="{ 'tree-line-half-height': halfHeight }" class="tree-line-vertical" />
+    <div :class="{ right }" class="tree-line-horizontal" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  halfHeight?: boolean
+  right?: boolean
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.tree-line {
+  --offset: 0.7rem;
+  flex: 0 1 1em;
+  align-self: stretch;
+  display: flex;
+  align-items: center;
+  justify-content: end;
+
+  .tree-line-vertical {
+    width: 0.1rem;
+    background: var(--color-purple-base);
+    height: calc(100% + var(--offset));
+    transform: translateY(calc(var(--offset) * -1));
+  }
+
+  .tree-line-horizontal {
+    height: 0.1rem;
+    width: 50%;
+    background: transparent;
+
+    &.right {
+      background: var(--color-purple-base);
+    }
+  }
+}
+
+.tree-item:last-child {
+  > .tree-item-label {
+    .tree-line-half-height {
+      align-self: start;
+      height: calc(50% + var(--offset));
+    }
+  }
+}
+</style>

package/lib/components/tree/TreeList.vue

@@ -0,0 +1,14 @@
+<!-- v1.1 -->
+<template>
+  <ul class="tree-list">
+    <slot />
+  </ul>
+</template>
+
+<script lang="ts" setup>
+import { IK_TREE_LIST_DEPTH } from '@core/utils/injection-keys.util'
+import { inject, provide } from 'vue'
+
+const depth = inject(IK_TREE_LIST_DEPTH, 0)
+provide(IK_TREE_LIST_DEPTH, depth + 1)
+</script>

package/lib/components/tree/TreeLoadingItem.vue

@@ -0,0 +1,64 @@
+<!-- v1.1 -->
+<template>
+  <li class="tree-loading-item">
+    <div class="tree-loading-item-label-placeholder">
+      <div class="link-placeholder">
+        <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" />
+        <div class="loader">&nbsp;</div>
+      </div>
+    </div>
+  </li>
+</template>
+
+<script lang="ts" setup>
+import UiIcon from '@core/components/icon/UiIcon.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'
+import { inject } from 'vue'
+
+defineProps<{
+  icon: IconDefinition
+}>()
+
+const depth = inject(IK_TREE_LIST_DEPTH, 0)
+</script>
+
+<style lang="postcss" scoped>
+.tree-loading-item-label-placeholder {
+  display: flex;
+  height: 4rem;
+  background-color: var(--background-color-primary);
+}
+
+.icon {
+  color: var(--color-grey-100);
+}
+
+.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(--background-color-purple-10);
+}
+
+@keyframes pulse {
+  0% {
+    opacity: 0.5;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+</style>

package/lib/components/user/UserLink.vue

@@ -0,0 +1,72 @@
+<!-- v1.0 -->
+<template>
+  <RouterLink v-if="route && !disabled" :to="route" class="user-link is-link typo p3-medium">
+    <UserLogo class="logo" />
+    {{ username }}
+  </RouterLink>
+  <span v-else :class="{ disabled }" class="user-link typo p3-medium">
+    <UserLogo class="logo" />
+    {{ username }}
+  </span>
+</template>
+
+<script lang="ts" setup>
+import UserLogo from '@core/components/user/UserLogo.vue'
+import { type RouteLocationRaw } from 'vue-router'
+
+defineProps<{
+  route?: RouteLocationRaw
+  disabled?: boolean
+  username: string
+}>()
+</script>
+
+<style lang="postcss" scoped>
+/* COLOR VARIANTS */
+.user-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 */
+.user-link {
+  display: inline-flex;
+  align-items: center;
+  color: var(--color);
+  gap: 0.8rem;
+  border-top: 1px solid transparent;
+  border-bottom: 1px solid var(--border-color);
+  line-height: 0;
+
+  &.disabled {
+    cursor: not-allowed;
+  }
+
+  &.is-link {
+    text-decoration: none;
+  }
+
+  .logo {
+    /* Override the default color of UserLogo,
+     to apply hover, active and disabled styles */
+    --border-color: inherit;
+  }
+}
+</style>