@xen-orchestra/web-core 0.0.1

package/lib/composables/tree.composable.ts

@@ -0,0 +1,85 @@
+import { buildNodes } from '@core/composables/tree/build-nodes'
+import type {
+  DefinitionToTreeNode,
+  TreeContext,
+  TreeNode,
+  TreeNodeDefinition,
+  TreeNodeId,
+  UseTreeOptions,
+} from '@core/composables/tree/types'
+import { computed, type MaybeRefOrGetter, reactive, ref, toValue } from 'vue'
+
+export function useTree<
+  TDefinition extends TreeNodeDefinition,
+  TTreeNode extends DefinitionToTreeNode<TDefinition> = DefinitionToTreeNode<TDefinition>,
+>(definitions: MaybeRefOrGetter<TDefinition[]>, options: UseTreeOptions = {}) {
+  const selectedIds = ref(new Set<TreeNodeId>())
+  const expandedIds = ref(new Set<TreeNodeId>())
+  const activeId = ref<TreeNodeId>()
+
+  const context = reactive({
+    allowMultiSelect: options.allowMultiSelect ?? false,
+    selectedIds,
+    expandedIds,
+    activeId,
+  }) as TreeContext
+
+  const nodes = computed(() => {
+    const nodes = buildNodes<TDefinition, TTreeNode>(toValue(definitions), context)
+
+    if (options.expand !== false) {
+      nodes.forEach(node => node.isBranch && node.toggleExpand(true, true))
+    }
+
+    return nodes
+  })
+
+  const nodesMap = computed(() => {
+    const nodeMap = new Map<TreeNodeId, TreeNode>()
+
+    function traverse(node: TreeNode) {
+      nodeMap.set(node.id, node)
+
+      if (node.isBranch) {
+        node.rawChildren.forEach(traverse)
+      }
+    }
+
+    nodes.value.forEach(traverse)
+
+    return nodeMap
+  })
+
+  const visibleNodes = computed(() => nodes.value.filter(node => !node.isExcluded))
+
+  const getNode = (id: TreeNodeId | undefined) => (id !== undefined ? nodesMap.value.get(id) : undefined)
+  const getNodes = (ids: TreeNodeId[]) => ids.map(getNode).filter(node => node !== undefined) as TreeNode[]
+
+  const selectedNodes = computed(() => getNodes(Array.from(selectedIds.value.values())))
+  const expandedNodes = computed(() => getNodes(Array.from(expandedIds.value.values())))
+  const activeNode = computed(() => getNode(activeId.value))
+
+  const selectedLabel = computed(() => {
+    if (typeof options.selectedLabel === 'function') {
+      return options.selectedLabel(selectedNodes.value)
+    }
+
+    if (typeof options.selectedLabel === 'object' && selectedNodes.value.length > options.selectedLabel.max) {
+      return options.selectedLabel.fn(selectedNodes.value.length)
+    }
+
+    return selectedNodes.value.map(node => node.label).join(', ')
+  })
+
+  return {
+    nodes: visibleNodes,
+    activeId,
+    activeNode,
+    selectedIds,
+    selectedNodes,
+    selectedLabel,
+    expandedIds,
+    expandedNodes,
+    options,
+  }
+}

package/lib/context.ts

@@ -0,0 +1,10 @@
+import { createContext } from '@core/composables/context.composable'
+import type { Color } from '@core/types/color.type'
+import { computed } from 'vue'
+
+export const DisabledContext = createContext(false)
+
+export const ColorContext = createContext('info' as Color, (color, previousColor) => ({
+  name: color,
+  colorContextClass: computed(() => (previousColor.value === color.value ? undefined : `color-context-${color.value}`)),
+}))

package/lib/directives/tooltip.directive.md

@@ -0,0 +1,117 @@
+# Tooltip Directive
+
+By default, the tooltip will appear centered above the target element.
+
+## Directive argument
+
+The directive argument is **optional** and can be either:
+
+- The tooltip [content](#tooltip-content)
+- An object containing:
+  - `content`: The tooltip [content](#tooltip-content)
+  - `placement`: The tooltip [placement](#tooltip-placement)
+  - `selector`: A descendant [selector](#tooltip-selector)
+  - `vertical`: A boolean to enable [vertical mode](#tooltip-vertical)
+
+## Automatic mode
+
+When the tooltip content is `true` or `undefined`, the directive will check the target element to see if it has text
+overflow.
+
+If so, the directive will automatically create a tooltip with the target element's text content.
+
+By default, the target element is the one the directive is attached to.
+
+This can be changed by using the [`selector`](#tooltip-selector) option.
+
+## Tooltip `content`
+
+The tooltip content can be either:
+
+- `true` or `undefined` to enable the [automatic mode](#automatic-mode).
+- `false` or an empty-string to disable the tooltip
+- Non-empty string to enable the tooltip and use the string as content.
+
+## Tooltip `placement`
+
+Tooltip can be placed in the following positions:
+
+- `top`
+- `top-start`
+- `top-end`
+- `bottom`
+- `bottom-start`
+- `bottom-end`
+- `left`
+- `left-start`
+- `left-end`
+- `right`
+- `right-start`
+- `right-end`
+
+## Tooltip `selector`
+
+When in automatic mode, by default, the directive will check if the element on which is attached the directive has text
+overflow.
+
+If you want to check the overflow of a descendant element, you can use the `selector` option.
+
+## Tooltip `vertical`
+
+By default, the overflow check is done horizontally.
+
+If you want to check the vertical overflow, you can set the `vertical` option to `true`.
+
+## Usage
+
+```vue
+<template>
+  <!-- True -->
+  <div v-tooltip="true" class="label">This content will be ellipsized by CSS but displayed entirely in the tooltip</div>
+
+  <!-- Undefined / Unset -->
+  <div v-tooltip class="label">This content will be ellipsized by CSS but displayed entirely in the tooltip</div>
+
+  <!-- String -->
+  <div v-tooltip="'Tooltip content'" class="label">This item will have "Tooltip content" as tooltip</div>
+
+  <!-- Object -->
+  <div v-tooltip="{ content: 'Foobar', placement: 'left-end' }" class="label">
+    This item will have "Foobar" as tooltip and the tooltip will be placed at the bottom left of the item
+  </div>
+
+  <!-- Dynamic -->
+  <div v-tooltip="myTooltip" class="label">This item will have the content of `myTooltip` as tooltip</div>
+
+  <!-- Conditional -->
+  <div v-tooltip="isTooltipEnabled && 'Foobar'" class="label">
+    This item will have "Foobar" as tooltip if `isTooltipEnabled` is true
+  </div>
+
+  <!-- Selector -->
+  <div v-tooltip="{ selector: '.label' }">
+    Before
+    <div class="label">
+      This content will be ellipsized by CSS but displayed entirely in the tooltip attached to the parent element
+    </div>
+    After
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { vTooltip } from '@core/directives/tooltip.directive'
+
+const myTooltip = ref('Content') // or ref({ content: "Content", placement: "left-end" })
+const isTooltipEnabled = ref(true)
+</script>
+
+<style scoped>
+div {
+  max-width: 100px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>
+```

package/lib/directives/tooltip.directive.ts

@@ -0,0 +1,52 @@
+import type { TooltipEvents, TooltipOptions } from '@core/stores/tooltip.store'
+import { useTooltipStore } from '@core/stores/tooltip.store'
+import { isObject } from 'lodash-es'
+import type { Options } from 'placement.js'
+import type { Directive } from 'vue'
+
+export type TooltipDirectiveContent = undefined | boolean | string
+
+type TooltipDirectiveOptions =
+  | TooltipDirectiveContent
+  | {
+      content?: TooltipDirectiveContent
+      placement?: Options['placement']
+      selector?: string
+      vertical?: boolean
+    }
+
+const parseOptions = (options: TooltipDirectiveOptions): TooltipOptions => {
+  const {
+    placement,
+    content,
+    selector,
+    vertical = false,
+  } = isObject(options) ? options : { placement: undefined, content: options, selector: undefined, vertical: false }
+
+  return {
+    placement,
+    content,
+    selector,
+    vertical,
+  }
+}
+
+export const vTooltip: Directive<HTMLElement, TooltipDirectiveOptions> = {
+  mounted(target, binding) {
+    const store = useTooltipStore()
+
+    const events: TooltipEvents = binding.modifiers.focus
+      ? { on: 'focusin', off: 'focusout' }
+      : { on: 'mouseenter', off: 'mouseleave' }
+
+    store.register(target, parseOptions(binding.value), events)
+  },
+  updated(target, binding) {
+    const store = useTooltipStore()
+    store.updateOptions(target, parseOptions(binding.value))
+  },
+  beforeUnmount(target) {
+    const store = useTooltipStore()
+    store.unregister(target)
+  },
+}

package/lib/i18n.ts

@@ -0,0 +1,158 @@
+import { createI18n } from 'vue-i18n'
+import messages from '@intlify/unplugin-vue-i18n/messages'
+
+interface Locales {
+  [key: string]: {
+    code: string
+    name: string
+  }
+}
+
+export const locales: Locales = {
+  en: {
+    code: 'en',
+    name: 'English',
+  },
+  fr: {
+    code: 'fr',
+    name: 'Français',
+  },
+  de: {
+    code: 'de',
+    name: 'Deutsch',
+  },
+}
+
+export default createI18n({
+  locale: localStorage.getItem('lang') ?? 'en',
+  fallbackLocale: 'en',
+  messages,
+  datetimeFormats: {
+    en: {
+      date_short: {
+        year: 'numeric',
+        month: 'numeric',
+        day: 'numeric',
+      },
+      date_medium: {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+      },
+      date_long: {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+      },
+      datetime_short: {
+        year: 'numeric',
+        month: 'numeric',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+      },
+      datetime_medium: {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+      },
+      datetime_long: {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+      },
+      time: {
+        hour: '2-digit',
+        minute: '2-digit',
+      },
+    },
+    fr: {
+      date_short: {
+        year: 'numeric',
+        month: 'numeric',
+        day: 'numeric',
+      },
+      date_medium: {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+      },
+      date_long: {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+      },
+      datetime_short: {
+        year: 'numeric',
+        month: 'numeric',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+      },
+      datetime_medium: {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+      },
+      datetime_long: {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+      },
+      time: {
+        hour: '2-digit',
+        minute: '2-digit',
+      },
+    },
+    de: {
+      date_short: {
+        year: 'numeric',
+        month: 'numeric',
+        day: 'numeric',
+      },
+      date_medium: {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+      },
+      date_long: {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+      },
+      datetime_short: {
+        year: 'numeric',
+        month: 'numeric',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+      },
+      datetime_medium: {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+      },
+      datetime_long: {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+      },
+      time: {
+        hour: '2-digit',
+        minute: '2-digit',
+      },
+    },
+  },
+})

package/lib/layouts/CoreLayout.vue

@@ -0,0 +1,182 @@
+<template>
+  <div class="core-layout">
+    <header class="header">
+      <slot name="app-logo" />
+      <UiButtonIcon
+        v-tooltip="{
+          content: sidebarStore.isExpanded ? $t('core.sidebar.close') : $t('core.sidebar.open'),
+          placement: 'right',
+        }"
+        :icon="sidebarStore.isExpanded ? faAngleDoubleLeft : faBars"
+        class="sidebar-toggle"
+        @click="sidebarStore.toggleExpand()"
+      />
+      <slot name="app-header" />
+    </header>
+    <div class="container">
+      <div
+        v-if="sidebarStore.isExpanded && !sidebarStore.isLocked"
+        class="sidebar-overlay"
+        @click="sidebarStore.toggleExpand(false)"
+      />
+      <LayoutSidebar class="sidebar">
+        <template #header>
+          <slot name="sidebar-header" />
+        </template>
+        <template #default>
+          <slot name="sidebar-content" />
+        </template>
+        <template #footer>
+          <slot name="sidebar-footer" />
+        </template>
+      </LayoutSidebar>
+      <div class="main-container">
+        <header>
+          <slot name="content-header" />
+        </header>
+        <main class="main">
+          <div class="content">
+            <slot name="content" />
+          </div>
+          <div v-if="isPanelVisible" :class="{ mobile: uiStore.isMobile }" class="panel">
+            <header v-if="$slots['panel-header'] || uiStore.isMobile" class="panel-header">
+              <UiButtonIcon
+                v-if="uiStore.isMobile"
+                :icon="faAngleLeft"
+                class="panel-close-icon"
+                @click="panelStore.close()"
+              />
+              <slot name="panel-header" />
+            </header>
+            <div v-if="$slots['panel-content']" class="panel-content">
+              <slot name="panel-content" />
+            </div>
+          </div>
+        </main>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import UiButtonIcon from '@core/components/button/ButtonIcon.vue'
+import LayoutSidebar from '@core/components/layout/LayoutSidebar.vue'
+import { vTooltip } from '@core/directives/tooltip.directive'
+import { usePanelStore } from '@core/stores/panel.store'
+import { useSidebarStore } from '@core/stores/sidebar.store'
+import { useUiStore } from '@core/stores/ui.store'
+import { faAngleDoubleLeft, faAngleLeft, faBars } from '@fortawesome/free-solid-svg-icons'
+import { computed } from 'vue'
+
+const sidebarStore = useSidebarStore()
+const panelStore = usePanelStore()
+const uiStore = useUiStore()
+
+const slots = defineSlots<{
+  'app-logo'(): any
+  'app-header'(): any
+  'sidebar-header'(): any
+  'sidebar-content'(): any
+  'sidebar-footer'(): any
+  'content-header'(): any
+  content(): any
+  'panel-header'(): any
+  'panel-content'(): any
+}>()
+
+const isPanelVisible = computed(() => {
+  if (!slots['panel-header'] && !slots['panel-content']) {
+    return false
+  }
+
+  return panelStore.isExpanded
+})
+</script>
+
+<style lang="postcss" scoped>
+.sidebar-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+}
+
+.core-layout {
+  display: flex;
+  height: 100dvh;
+  flex-direction: column;
+}
+
+.container {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  height: 5.6rem;
+  background-color: var(--background-color-secondary);
+  border-bottom: 0.1rem solid var(--color-grey-500);
+  flex-shrink: 0;
+  gap: 1.6rem;
+  padding: 0 1.6rem;
+}
+
+.sidebar-toggle {
+  margin-right: auto;
+}
+
+.main-container {
+  flex: 1;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.main {
+  background-color: var(--background-color-secondary);
+  display: flex;
+  flex: 1;
+}
+
+.content {
+  padding: 0.8rem;
+  flex: 1;
+  border-right: 0.1rem solid var(--color-grey-500);
+}
+
+.panel {
+  display: flex;
+  flex-direction: column;
+  width: 40rem;
+  background-color: var(--background-color-secondary);
+
+  &.mobile {
+    width: 100%;
+    position: fixed;
+    inset: 0 0 0 auto;
+    z-index: 1000;
+  }
+}
+
+.panel-header {
+  display: flex;
+  align-items: center;
+  padding: 0.4rem 1.6rem;
+  background-color: var(--background-color-primary);
+  border-bottom: 0.1rem solid var(--color-grey-500);
+  min-height: 4.8rem;
+}
+
+.panel-close-icon {
+  margin-right: auto;
+}
+
+.panel-content {
+  flex: 1;
+  padding: 0.8rem;
+  overflow: auto;
+  min-height: 0;
+}
+</style>

package/lib/locales/de.json

@@ -0,0 +1,6 @@
+{
+  "core": {
+    "close": "Schließen",
+    "log-out": "Abmelden"
+  }
+}

package/lib/locales/en.json

@@ -0,0 +1,15 @@
+{
+  "core": {
+    "close": "Close",
+    "log-out": "Log out",
+    "master": "Primary host",
+    "open": "Open",
+    "quick-actions": "Quick actions",
+    "sidebar": {
+      "close": "Close sidebar",
+      "lock": "Lock sidebar open",
+      "open": "Open sidebar",
+      "unlock": "Unlock sidebar"
+    }
+  }
+}

package/lib/locales/fr.json

@@ -0,0 +1,15 @@
+{
+  "core": {
+    "close": "Fermer",
+    "log-out": "Se déconnecter",
+    "master": "Hôte primaire",
+    "open": "Ouvrir",
+    "quick-actions": "Actions rapides",
+    "sidebar": {
+      "close": "Fermer la barre latérale",
+      "lock": "Verrouiller la barre latérale",
+      "open": "Ouvrir la barre latérale",
+      "unlock": "Déverrouiller la barre latérale"
+    }
+  }
+}

package/lib/stores/panel.store.ts

@@ -0,0 +1,12 @@
+import { useUiStore } from '@core/stores/ui.store'
+import { defineStore } from 'pinia'
+import { computed, ref } from 'vue'
+
+export const usePanelStore = defineStore('panel', () => {
+  const uiStore = useUiStore()
+  const isExpanded = ref(false)
+  const open = () => (isExpanded.value = true)
+  const close = () => (isExpanded.value = false)
+
+  return { open, close, isExpanded: computed(() => uiStore.isDesktop || isExpanded.value) }
+})