@xen-orchestra/web-core 0.0.1

package/lib/components/icon/ComplexIcon.vue

@@ -0,0 +1,51 @@
+<!-- v1.1 -->
+<template>
+  <FontAwesomeLayers :class="size" class="complex-icon">
+    <slot />
+  </FontAwesomeLayers>
+</template>
+
+<script lang="ts" setup>
+import { FontAwesomeLayers } from '@fortawesome/vue-fontawesome'
+
+withDefaults(
+  defineProps<{
+    size?: 'small' | 'medium' | 'large'
+  }>(),
+  { size: 'medium' }
+)
+</script>
+
+<style lang="postcss" scoped>
+/* SIZE VARIANTS */
+.complex-icon {
+  &.small {
+    --font-size: 1.2rem;
+  }
+
+  &.medium {
+    --font-size: 1.6rem;
+  }
+
+  &.large {
+    --font-size: 2rem;
+  }
+}
+
+/* IMPLEMENTATION */
+.complex-icon {
+  font-size: var(--font-size);
+
+  :nth-child(2) {
+    font-size: 0.5em;
+    transform: translate(100%, 80%);
+
+    :deep(path) {
+      stroke: var(--color-grey-600);
+      stroke-width: 100px;
+      stroke-linejoin: round;
+      paint-order: stroke;
+    }
+  }
+}
+</style>

package/lib/components/icon/ObjectIcon.vue

@@ -0,0 +1,243 @@
+<!-- VM v1.0 -->
+<!-- Host v1.0 -->
+<!-- SR v1.0 -->
+<!-- Backup Repository v1.0 -->
+<!-- Network v1.0 -->
+<template>
+  <FontAwesomeLayers :class="[size, { disabled: stateConfig === undefined }]" class="object-icon">
+    <UiIcon :icon="mainIcon" />
+    <UiIcon :icon="stateIcon" :style="stateIconStyle" class="state" />
+  </FontAwesomeLayers>
+</template>
+
+<script generic="TType extends SupportedType" lang="ts" setup>
+import UiIcon from '@core/components/icon/UiIcon.vue'
+import type { ObjectIconConfig, ObjectIconSize, SupportedState, SupportedType } from '@core/types/object-icon.type'
+import {
+  faCheckCircle,
+  faCircleMinus,
+  faCircleXmark,
+  faDatabase,
+  faDisplay,
+  faMoon,
+  faNetworkWired,
+  faPause,
+  faPlay,
+  faServer,
+  faStop,
+  faTriangleExclamation,
+  faWarehouse,
+} from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeLayers } from '@fortawesome/vue-fontawesome'
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    type: TType
+    state?: SupportedState<TType> | 'disabled'
+    size?: ObjectIconSize
+  }>(),
+  { size: 'small', state: 'disabled' }
+)
+
+const config: ObjectIconConfig = {
+  vm: {
+    mainIcon: faDisplay,
+    states: {
+      running: {
+        icon: faPlay,
+        color: '--color-green-base',
+        translate: {
+          x: [100, 132, 148],
+          y: [65, 75, 90],
+        },
+      },
+      halted: {
+        icon: faStop,
+        color: '--color-red-base',
+        translate: {
+          x: [100, 136, 144],
+          y: [65, 75, 90],
+        },
+      },
+      suspended: {
+        icon: faMoon,
+        color: '--color-purple-d60',
+        translate: {
+          x: [88, 130, 140],
+          y: [65, 75, 90],
+        },
+      },
+      paused: {
+        icon: faPause,
+        color: '--color-purple-l40',
+        translate: {
+          x: [110, 154, 170],
+          y: [65, 75, 90],
+        },
+      },
+    },
+  },
+  host: {
+    mainIcon: faServer,
+    states: {
+      running: {
+        icon: faPlay,
+        color: '--color-green-base',
+        translate: {
+          x: [82, 122, 136],
+          y: [66, 70, 90],
+        },
+      },
+      halted: {
+        icon: faStop,
+        color: '--color-red-base',
+        translate: {
+          x: [90, 122, 134],
+          y: [65, 72, 85],
+        },
+      },
+      maintenance: {
+        icon: faTriangleExclamation,
+        color: '--color-orange-base',
+        translate: {
+          x: [60, 88, 100],
+          y: [68, 72, 82],
+        },
+      },
+    },
+  },
+  sr: {
+    mainIcon: faDatabase,
+    states: {
+      connected: {
+        icon: faCheckCircle,
+        color: '--color-green-base',
+        translate: {
+          x: [60, 90, 100],
+          y: [65, 75, 90],
+        },
+      },
+      'partially-connected': {
+        icon: faCircleMinus,
+        color: '--color-orange-base',
+        translate: {
+          x: [60, 90, 100],
+          y: [65, 75, 90],
+        },
+      },
+      disconnected: {
+        icon: faCircleXmark,
+        color: '--color-red-base',
+        translate: {
+          x: [60, 90, 100],
+          y: [65, 75, 90],
+        },
+      },
+    },
+  },
+  'backup-repository': {
+    mainIcon: faWarehouse,
+    states: {
+      connected: {
+        icon: faCheckCircle,
+        color: '--color-green-base',
+        translate: {
+          x: [112, 130, 162],
+          y: [74, 78, 102],
+        },
+      },
+      disconnected: {
+        icon: faCircleXmark,
+        color: '--color-red-base',
+        translate: {
+          x: [112, 130, 162],
+          y: [74, 78, 102],
+        },
+      },
+    },
+  },
+  network: {
+    mainIcon: faNetworkWired,
+    states: {
+      connected: {
+        icon: faCheckCircle,
+        color: '--color-green-base',
+        translate: {
+          x: [84, 110, 128],
+          y: [66, 72, 88],
+        },
+      },
+      disconnected: {
+        icon: faCircleXmark,
+        color: '--color-red-base',
+        translate: {
+          x: [84, 110, 128],
+          y: [66, 72, 88],
+        },
+      },
+    },
+  },
+}
+
+const mainIcon = computed(() => config[props.type].mainIcon)
+const stateConfig = computed(() => (props.state === 'disabled' ? undefined : config[props.type].states[props.state]))
+const stateIcon = computed(() => stateConfig.value?.icon)
+
+const stateIconStyle = computed(() => {
+  if (stateConfig.value === undefined) {
+    return undefined
+  }
+
+  let translateIndex: number
+
+  if (props.size === 'extra-small') {
+    translateIndex = 0
+  } else if (props.size === 'medium') {
+    translateIndex = 2
+  } else {
+    translateIndex = 1
+  }
+
+  return {
+    '--color': `var(${stateConfig.value.color})`,
+    '--state-icon-translate-x': `${stateConfig.value.translate.x[translateIndex]}%`,
+    '--state-icon-translate-y': `${stateConfig.value.translate.y[translateIndex]}%`,
+  }
+})
+</script>
+
+<style lang="postcss" scoped>
+/* SIZE VARIANTS */
+.object-icon {
+  &.extra-small {
+    --font-size: 0.8rem;
+    --state-icon-font-size: 0.75em;
+  }
+
+  &.small {
+    --font-size: 1.6rem;
+    --state-icon-font-size: 0.625em;
+  }
+
+  &.medium {
+    --font-size: 2.4rem;
+    --state-icon-font-size: 0.5em;
+  }
+}
+
+/* IMPLEMENTATION */
+.object-icon {
+  flex-shrink: 0;
+  font-size: var(--font-size);
+
+  &.disabled {
+    color: var(--color-grey-400);
+  }
+}
+
+.state {
+  font-size: var(--state-icon-font-size);
+  transform: translate(var(--state-icon-translate-x), var(--state-icon-translate-y));
+}
+</style>

package/lib/components/icon/UiIcon.vue

@@ -0,0 +1,47 @@
+<!-- v1.0 -->
+<template>
+  <UiSpinner v-if="busy" class="ui-icon" />
+  <FontAwesomeIcon v-else-if="icon !== undefined" :class="color" :fixed-width="fixedWidth" :icon class="ui-icon" />
+</template>
+
+<script lang="ts" setup>
+import UiSpinner from '@core/components/UiSpinner.vue'
+import type { Color } from '@core/types/color.type'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+
+defineProps<{
+  busy?: boolean
+  icon?: IconDefinition
+  fixedWidth?: boolean
+  color?: Color
+}>()
+</script>
+
+<style lang="postcss" scoped>
+/* COLOR VARIANTS */
+.ui-icon {
+  --color: currentColor;
+
+  &.info {
+    --color: var(--color-purple-base);
+  }
+
+  &.success {
+    --color: var(--color-green-base);
+  }
+
+  &.warning {
+    --color: var(--color-orange-base);
+  }
+
+  &.error {
+    --color: var(--color-red-base);
+  }
+}
+
+/* IMPLEMENTATION */
+.ui-icon {
+  color: var(--color);
+}
+</style>

package/lib/components/icon/VmIcon.vue

@@ -0,0 +1,30 @@
+<!-- v1.0 -->
+<template>
+  <FontAwesomeLayers class="vm-icon">
+    <UiIcon :icon="faDisplay" />
+    <PowerStateIcon :state class="state" />
+  </FontAwesomeLayers>
+</template>
+
+<script lang="ts" setup>
+import PowerStateIcon from '@core/components/PowerStateIcon.vue'
+import UiIcon from '@core/components/icon/UiIcon.vue'
+import type { POWER_STATE } from '@core/types/power-state.type'
+import { faDisplay } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeLayers } from '@fortawesome/vue-fontawesome'
+
+defineProps<{
+  state: POWER_STATE
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.vm-icon {
+  flex-shrink: 0;
+}
+
+.state {
+  font-size: 0.7em;
+  transform: translate(80%, 70%);
+}
+</style>

package/lib/components/layout/LayoutSidebar.vue

@@ -0,0 +1,100 @@
+<!-- v1.0 -->
+<template>
+  <div
+    :class="{ locked: sidebar.isLocked && !ui.isMobile, expanded: sidebar.isExpanded, mobile: ui.isMobile }"
+    class="layout-sidebar"
+  >
+    <div v-if="!ui.isMobile" class="lock">
+      <UiButtonIcon
+        v-tooltip="{
+          content: sidebar.isLocked ? $t('core.sidebar.unlock') : $t('core.sidebar.lock'),
+          placement: 'right',
+        }"
+        :icon="sidebar.isLocked ? faLock : faLockOpen"
+        @click="sidebar.toggleLock()"
+      />
+    </div>
+    <div v-if="$slots.header">
+      <slot name="header" />
+    </div>
+    <div class="content">
+      <slot />
+    </div>
+    <div v-if="$slots.footer">
+      <slot name="footer" />
+    </div>
+    <div
+      v-if="!ui.isMobile"
+      :class="{ active: sidebar.isResizing }"
+      class="resize-handle"
+      @mousedown="sidebar.startResize"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import UiButtonIcon from '@core/components/button/ButtonIcon.vue'
+import { vTooltip } from '@core/directives/tooltip.directive'
+import { useSidebarStore } from '@core/stores/sidebar.store'
+import { useUiStore } from '@core/stores/ui.store'
+import { faLock, faLockOpen } from '@fortawesome/free-solid-svg-icons'
+
+defineSlots<{
+  header(): any
+  default(): any
+  footer(): any
+}>()
+
+const sidebar = useSidebarStore()
+const ui = useUiStore()
+</script>
+
+<style lang="postcss" scoped>
+.layout-sidebar {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-color: var(--background-color-secondary);
+  border-right: 0.1rem solid var(--color-grey-500);
+  width: v-bind('sidebar.cssWidth');
+  z-index: 1001;
+  transition:
+    margin-left 0.25s,
+    transform 0.25s;
+
+  &.locked {
+    margin-left: v-bind('sidebar.cssOffset');
+  }
+
+  &:not(.locked) {
+    position: absolute;
+    transform: translateX(v-bind('sidebar.cssOffset'));
+  }
+}
+
+.lock {
+  text-align: right;
+  padding: 0.8rem;
+}
+
+.content {
+  flex: 1;
+  overflow: auto;
+}
+
+.resize-handle {
+  position: absolute;
+  inset: 0 0 0 auto;
+  width: 0.8rem;
+  background-color: transparent;
+  cursor: col-resize;
+  transition: background-color 0.4s;
+  user-select: none;
+
+  &:hover,
+  &.active {
+    background-color: var(--color-grey-500);
+    transition: background-color 0.05s;
+  }
+}
+</style>

package/lib/components/menu/MenuItem.vue

@@ -0,0 +1,82 @@
+<!-- v1.0 -->
+<template>
+  <li class="menu-item">
+    <MenuTrigger
+      v-if="!$slots.submenu"
+      :active="isBusy"
+      :busy="isBusy"
+      :disabled="isDisabled"
+      :icon
+      @click="handleClick"
+    >
+      <slot />
+    </MenuTrigger>
+    <MenuList v-else :disabled="isDisabled" shadow>
+      <template #trigger="{ open, isOpen }">
+        <MenuTrigger :active="isOpen" :busy="isBusy" :disabled="isDisabled" :icon @click="open">
+          <slot />
+          <UiIcon :fixed-width="false" :icon="submenuIcon" class="submenu-icon" />
+        </MenuTrigger>
+      </template>
+      <slot name="submenu" />
+    </MenuList>
+  </li>
+</template>
+
+<script lang="ts" setup>
+import UiIcon from '@core/components/icon/UiIcon.vue'
+import MenuTrigger from '@core/components/menu/MenuTrigger.vue'
+import MenuList from '@core/components/menu/MenuList.vue'
+import { useContext } from '@core/composables/context.composable'
+import { DisabledContext } from '@core/context'
+import { IK_CLOSE_MENU, IK_MENU_HORIZONTAL } from '@core/utils/injection-keys.util'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import { faAngleDown, faAngleRight } from '@fortawesome/free-solid-svg-icons'
+import { computed, inject, ref } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    icon?: IconDefinition
+    onClick?: () => any
+    disabled?: boolean
+    busy?: boolean
+  }>(),
+  { disabled: undefined }
+)
+
+const isParentHorizontal = inject(
+  IK_MENU_HORIZONTAL,
+  computed(() => false)
+)
+const isDisabled = useContext(DisabledContext, () => props.disabled)
+
+const submenuIcon = computed(() => (isParentHorizontal.value ? faAngleDown : faAngleRight))
+
+const isHandlingClick = ref(false)
+const isBusy = computed(() => isHandlingClick.value || props.busy === true)
+const closeMenu = inject(IK_CLOSE_MENU, undefined)
+
+const handleClick = async () => {
+  if (isDisabled.value || isBusy.value) {
+    return
+  }
+
+  isHandlingClick.value = true
+  try {
+    await props.onClick?.()
+    closeMenu?.()
+  } finally {
+    isHandlingClick.value = false
+  }
+}
+</script>
+
+<style lang="postcss" scoped>
+.menu-item {
+  color: var(--color-grey-000);
+}
+
+.submenu-icon {
+  margin-left: auto;
+}
+</style>

package/lib/components/menu/MenuList.vue

@@ -0,0 +1,104 @@
+<!-- v1.0 -->
+<template>
+  <slot :is-open="isOpen" :open="open" name="trigger" />
+  <Teleport :disabled="!shouldTeleport" to="body">
+    <ul v-if="!hasTrigger || isOpen" ref="menu" :class="{ horizontal, shadow }" class="menu-list" v-bind="$attrs">
+      <slot />
+    </ul>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { useContext } from '@core/composables/context.composable'
+import { DisabledContext } from '@core/context'
+import { IK_CLOSE_MENU, IK_MENU_HORIZONTAL, IK_MENU_TELEPORTED } from '@core/utils/injection-keys.util'
+import placementJs, { type Options } from 'placement.js'
+import { computed, inject, nextTick, provide, ref, useSlots } from 'vue'
+import { onClickOutside, unrefElement, whenever } from '@vueuse/core'
+
+const props = withDefaults(
+  defineProps<{
+    horizontal?: boolean
+    shadow?: boolean
+    disabled?: boolean
+    placement?: Options['placement']
+  }>(),
+  { disabled: undefined }
+)
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const slots = useSlots()
+const isOpen = ref(false)
+const menu = ref()
+const isParentHorizontal = inject(
+  IK_MENU_HORIZONTAL,
+  computed(() => false)
+)
+provide(
+  IK_MENU_HORIZONTAL,
+  computed(() => props.horizontal ?? false)
+)
+
+useContext(DisabledContext, () => props.disabled)
+
+let clearClickOutsideEvent: (() => void) | undefined
+
+const hasTrigger = useSlots().trigger !== undefined
+
+const shouldTeleport = hasTrigger && !inject(IK_MENU_TELEPORTED, false)
+
+if (shouldTeleport) {
+  provide(IK_MENU_TELEPORTED, true)
+}
+
+whenever(
+  () => !isOpen.value,
+  () => clearClickOutsideEvent?.()
+)
+if (slots.trigger && inject(IK_CLOSE_MENU, undefined) === undefined) {
+  provide(IK_CLOSE_MENU, () => (isOpen.value = false))
+}
+
+const open = (event: MouseEvent) => {
+  if (isOpen.value) {
+    return (isOpen.value = false)
+  }
+
+  isOpen.value = true
+
+  nextTick(() => {
+    clearClickOutsideEvent = onClickOutside(menu, () => (isOpen.value = false), {
+      ignore: [event.currentTarget as HTMLElement],
+    })
+
+    placementJs(event.currentTarget as HTMLElement, unrefElement(menu), {
+      placement: props.placement ?? (isParentHorizontal.value ? 'bottom-start' : 'right-start'),
+    })
+  })
+}
+</script>
+
+<style lang="postcss" scoped>
+.menu-list {
+  z-index: 1;
+  display: inline-flex;
+  flex-direction: column;
+  padding: 0.4rem;
+  cursor: default;
+  color: var(--color-grey-200);
+  border-radius: 0.4rem;
+  background-color: var(--color-grey-600);
+  gap: 0.2rem;
+
+  &.horizontal {
+    flex-direction: row;
+  }
+
+  &.shadow {
+    box-shadow: var(--shadow-300);
+  }
+}
+</style>

package/lib/components/menu/MenuSeparator.vue

@@ -0,0 +1,27 @@
+<!-- v1.0 -->
+<template>
+  <li :class="{ horizontal }" class="menu-separator" />
+</template>
+
+<script lang="ts" setup>
+import { IK_MENU_HORIZONTAL } from '@core/utils/injection-keys.util'
+import { computed, inject } from 'vue'
+
+const horizontal = inject(
+  IK_MENU_HORIZONTAL,
+  computed(() => false)
+)
+</script>
+
+<style lang="postcss" scoped>
+.menu-separator {
+  &.horizontal {
+    margin: 0 0.5rem;
+    border-right: 1px solid var(--color-grey-500);
+  }
+
+  &:not(.horizontal) {
+    border-bottom: 1px solid var(--color-grey-500);
+  }
+}
+</style>