@xen-orchestra/web-core 0.0.1

package/lib/stores/sidebar.store.ts

@@ -0,0 +1,63 @@
+import { useUiStore } from '@core/stores/ui.store'
+import { ifElse } from '@core/utils/if-else.utils'
+import { useLocalStorage, useRafFn, useStyleTag, useToggle } from '@vueuse/core'
+import { defineStore } from 'pinia'
+import { computed, ref } from 'vue'
+
+export const useSidebarStore = defineStore('layout', () => {
+  const uiStore = useUiStore()
+  const isExpanded = useLocalStorage('sidebar.expanded', true)
+  const isLocked = useLocalStorage('sidebar.locked', true)
+  const width = useLocalStorage('sidebar.width', 350)
+  const toggleExpand = useToggle(isExpanded)
+  const toggleLock = useToggle(isLocked)
+  const isResizing = ref(false)
+
+  let initialX: number
+  let initialWidth: number
+  let clientX: number
+
+  function startResize(event: MouseEvent) {
+    clientX = event.clientX
+    initialX = clientX
+    initialWidth = width.value
+    isResizing.value = true
+    document.addEventListener('mousemove', handleMouseMove)
+    document.addEventListener('mouseup', handleMouseUp)
+  }
+
+  function handleMouseMove(event: MouseEvent) {
+    clientX = event.clientX
+  }
+
+  function handleMouseUp() {
+    isResizing.value = false
+    document.removeEventListener('mousemove', handleMouseMove)
+    document.removeEventListener('mouseup', handleMouseUp)
+  }
+
+  const cssWidth = computed(() => (uiStore.isMobile ? '100%' : `${width.value}px`))
+
+  const cssOffset = computed(() => (isExpanded.value ? 0 : `-${cssWidth.value}`))
+
+  const { load, unload } = useStyleTag('body { cursor: col-resize !important; }', { immediate: false })
+
+  const { pause, resume } = useRafFn(
+    () => (width.value = Math.min(500, Math.max(200, initialWidth + clientX - initialX))),
+    { immediate: false }
+  )
+
+  ifElse(isResizing, [load, resume], [pause, unload])
+
+  return {
+    isExpanded,
+    isLocked,
+    width,
+    toggleExpand,
+    toggleLock,
+    startResize,
+    isResizing,
+    cssWidth,
+    cssOffset,
+  }
+})

package/lib/stores/tooltip.store.ts

@@ -0,0 +1,74 @@
+import type { TooltipDirectiveContent } from '@core/directives/tooltip.directive'
+import { uniqueId } from '@core/utils/unique-id.util'
+import { useEventListener, type WindowEventName } from '@vueuse/core'
+import { defineStore } from 'pinia'
+import type { Options } from 'placement.js'
+import { computed, type EffectScope, effectScope, ref } from 'vue'
+
+export type TooltipOptions = {
+  content: TooltipDirectiveContent
+  placement: Options['placement']
+  selector: string | undefined
+  vertical: boolean
+}
+
+export type TooltipEvents = { on: WindowEventName; off: WindowEventName }
+
+export const useTooltipStore = defineStore('tooltip', () => {
+  const targetsScopes = new WeakMap<HTMLElement, EffectScope>()
+  const targets = ref(new Set<HTMLElement>())
+  const targetsOptions = ref(new Map<HTMLElement, TooltipOptions>())
+  const targetsIds = ref(new Map<HTMLElement, string>())
+
+  const register = (target: HTMLElement, options: TooltipOptions, events: TooltipEvents) => {
+    const scope = effectScope()
+
+    targetsScopes.set(target, scope)
+    targetsOptions.value.set(target, options)
+    targetsIds.value.set(target, uniqueId('tooltip-'))
+
+    scope.run(() => {
+      useEventListener(target, events.on, () => {
+        targets.value.add(target)
+
+        scope.run(() => {
+          useEventListener(
+            target,
+            events.off,
+            () => {
+              targets.value.delete(target)
+            },
+            { once: true }
+          )
+        })
+      })
+    })
+  }
+
+  const updateOptions = (target: HTMLElement, options: TooltipOptions) => {
+    targetsOptions.value.set(target, options)
+  }
+
+  const unregister = (target: HTMLElement) => {
+    targets.value.delete(target)
+    targetsOptions.value.delete(target)
+    targetsScopes.get(target)?.stop()
+    targetsScopes.delete(target)
+    targetsIds.value.delete(target)
+  }
+
+  return {
+    register,
+    unregister,
+    updateOptions,
+    tooltips: computed(() => {
+      return Array.from(targets.value.values()).map(target => {
+        return {
+          target,
+          options: targetsOptions.value.get(target)!,
+          key: targetsIds.value.get(target)!,
+        }
+      })
+    }),
+  }
+})

package/lib/stores/ui.store.ts

@@ -0,0 +1,34 @@
+import { useBreakpoints, useColorMode } from '@vueuse/core'
+import { defineStore } from 'pinia'
+import { computed, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+export const useUiStore = defineStore('ui', () => {
+  const currentHostOpaqueRef = ref()
+
+  const { store: colorMode } = useColorMode({ initialValue: 'dark' })
+
+  const { desktop: isDesktop } = useBreakpoints({
+    desktop: 1024,
+  })
+
+  const isMobile = computed(() => !isDesktop.value)
+
+  const router = useRouter()
+  const route = useRoute()
+
+  const hasUi = computed<boolean>({
+    get: () => route.query.ui !== '0',
+    set: (value: boolean) => {
+      void router.replace({ query: { ui: value ? undefined : '0' } })
+    },
+  })
+
+  return {
+    colorMode,
+    currentHostOpaqueRef,
+    isDesktop,
+    isMobile,
+    hasUi,
+  }
+})

package/lib/types/button.type.ts

@@ -0,0 +1,3 @@
+export type ButtonLevel = 'primary' | 'secondary' | 'tertiary'
+
+export type ButtonSize = 'extra-small' | 'small' | 'medium'

package/lib/types/color.type.ts

@@ -0,0 +1,5 @@
+export type Color = 'info' | 'error' | 'danger' | 'warning' | 'success'
+
+export type CounterColor = Color | 'black'
+
+export type TagColor = Color | 'grey'

package/lib/types/object-icon.type.ts

@@ -0,0 +1,43 @@
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+
+export type ObjectIconSize = 'extra-small' | 'small' | 'medium'
+
+export type VmState = 'running' | 'halted' | 'paused' | 'suspended'
+
+export type HostState = 'running' | 'halted' | 'maintenance'
+
+export type SrState = 'connected' | 'partially-connected' | 'disconnected'
+
+export type BackupRepositoryState = 'connected' | 'disconnected'
+
+export type NetworkState = 'connected' | 'disconnected'
+
+export type SupportedStateByType = {
+  host: HostState
+  vm: VmState
+  sr: SrState
+  'backup-repository': BackupRepositoryState
+  network: NetworkState
+}
+
+export type SupportedType = keyof SupportedStateByType
+
+export type SupportedState<TType extends SupportedType> = SupportedStateByType[TType]
+
+export type StatusConfig = {
+  icon: IconDefinition
+  color: `--${string}`
+  translate: {
+    x: [number, number, number]
+    y: [number, number, number]
+  }
+}
+
+export type TypeConfig<TType extends SupportedType> = {
+  mainIcon: IconDefinition
+  states: Record<SupportedState<TType>, StatusConfig>
+}
+
+export type ObjectIconConfig = {
+  [K in SupportedType]: TypeConfig<K>
+}

package/lib/types/power-state.type.ts

@@ -0,0 +1 @@
+export type POWER_STATE = 'running' | 'paused' | 'halted' | 'suspended'

package/lib/types/size.type.ts

@@ -0,0 +1,3 @@
+export type CounterSize = 'small' | 'medium'
+
+export type UserLogoSize = 'extra-small' | 'small' | 'medium'

package/lib/types/subscribable-store.type.ts

@@ -0,0 +1,21 @@
+import type { MaybeRefOrGetter, Ref } from 'vue'
+
+export type SubscribeContext<TContext, TDefer extends boolean = false> = TDefer extends true
+  ? TContext & {
+      deferred: true
+      start: () => void
+      stop: () => void
+      isStarted: Readonly<Ref<boolean>>
+    }
+  : TContext & { deferred: false }
+
+export type Subscribe<TDefer extends boolean = false> = (options?: {
+  defer?: TDefer
+}) => SubscribeContext<object, TDefer>
+
+export type SubscribableStoreConfig<TContext> = {
+  context: TContext
+  onSubscribe: () => void
+  onUnsubscribe: () => void
+  isEnabled?: MaybeRefOrGetter<boolean>
+}

package/lib/types/utility.type.ts

@@ -0,0 +1 @@
+export type MaybeArray<T> = T | T[]

package/lib/utils/create-subscribable-store-context.util.ts

@@ -0,0 +1,66 @@
+import type { SubscribableStoreConfig, Subscribe, SubscribeContext } from '@core/types/subscribable-store.type'
+import { ifElse } from '@core/utils/if-else.utils'
+import { computed, onBeforeUnmount, readonly, type Ref, ref, toValue } from 'vue'
+
+export function createSubscribableStoreContext<TContext>(
+  config: SubscribableStoreConfig<TContext>,
+  dependsOn: Record<any, { subscribe: Subscribe<boolean> }>
+) {
+  const subscriptions = ref(new Set()) as Ref<Set<symbol>>
+  const hasSubscriptions = computed(() => subscriptions.value.size > 0)
+
+  ifElse(() => toValue(config.isEnabled ?? true) && hasSubscriptions.value, config.onSubscribe, config.onUnsubscribe)
+
+  function subscribe(options?: { defer: false }): SubscribeContext<TContext>
+  function subscribe(options: { defer: true }): SubscribeContext<TContext, true>
+  function subscribe<TDefer extends boolean = false>(options?: { defer?: TDefer }): SubscribeContext<TContext, TDefer>
+  function subscribe<TDefer extends boolean>(options?: { defer?: TDefer }): SubscribeContext<TContext, TDefer> {
+    const dependencyControls = [] as { start: () => void; stop: () => void }[]
+
+    Object.values(dependsOn).forEach(dep => {
+      const context = dep.subscribe({ defer: options?.defer })
+
+      if (context.deferred) {
+        dependencyControls.push({ start: context.start, stop: context.stop })
+      }
+    })
+
+    const id = Symbol('Store subscription ID')
+    const isStarted = ref(false)
+
+    const start = () => {
+      isStarted.value = true
+      dependencyControls.forEach(({ start }) => start())
+      subscriptions.value.add(id)
+    }
+
+    const stop = () => {
+      subscriptions.value.delete(id)
+      dependencyControls.forEach(({ stop }) => stop())
+      isStarted.value = false
+    }
+
+    onBeforeUnmount(() => stop())
+
+    if (!options?.defer) {
+      start()
+      return {
+        ...config.context,
+        deferred: false,
+      } as SubscribeContext<TContext, TDefer>
+    }
+
+    return {
+      ...config.context,
+      deferred: true,
+      start,
+      stop,
+      isStarted: readonly(isStarted),
+    } as SubscribeContext<TContext, TDefer>
+  }
+
+  return {
+    $context: config.context,
+    subscribe,
+  }
+}

package/lib/utils/has-ellipsis.util.ts

@@ -0,0 +1,11 @@
+export const hasEllipsis = (target: Element | undefined | null, { vertical = false }: { vertical?: boolean } = {}) => {
+  if (target == null) {
+    return false
+  }
+
+  if (vertical) {
+    return target.clientHeight < target.scrollHeight
+  }
+
+  return target.clientWidth < target.scrollWidth
+}

package/lib/utils/if-else.utils.ts

@@ -0,0 +1,27 @@
+import type { MaybeArray } from '@core/types/utility.type'
+import { toArray } from '@core/utils/to-array.utils'
+import { watch, type WatchOptions, type WatchSource } from 'vue'
+
+export interface IfElseOptions extends Pick<WatchOptions, 'immediate'> {}
+
+export function ifElse(
+  source: WatchSource<boolean>,
+  onTrue: MaybeArray<VoidFunction>,
+  onFalse: MaybeArray<VoidFunction>,
+  options?: IfElseOptions
+) {
+  const onTrueFunctions = toArray(onTrue)
+  const onFalseFunctions = toArray(onFalse)
+
+  return watch(
+    source,
+    value => {
+      if (value) {
+        onTrueFunctions.forEach(func => func())
+      } else {
+        onFalseFunctions.forEach(func => func())
+      }
+    },
+    options
+  )
+}

package/lib/utils/injection-keys.util.ts

@@ -0,0 +1,17 @@
+import type { ComputedRef, InjectionKey, Ref } from 'vue'
+
+export const IK_TREE_ITEM_HAS_CHILDREN = Symbol('IK_TREE_ITEM_HAS_CHILDREN') as InjectionKey<Ref<boolean>>
+
+export const IK_TREE_ITEM_TOGGLE = Symbol('IK_TREE_ITEM_TOGGLE') as InjectionKey<(force?: boolean) => void>
+
+export const IK_TREE_ITEM_EXPANDED = Symbol('IK_TREE_ITEM_EXPANDED') as InjectionKey<Ref<boolean>>
+
+export const IK_TREE_LIST_DEPTH = Symbol('IK_TREE_LIST_DEPTH') as InjectionKey<number>
+
+export const IK_DROPDOWN_CHECKBOX = Symbol('IK_DROPDOWN_CHECKBOX') as InjectionKey<ComputedRef<boolean>>
+
+export const IK_MENU_HORIZONTAL = Symbol('IK_MENU_HORIZONTAL') as InjectionKey<ComputedRef<boolean>>
+
+export const IK_CLOSE_MENU = Symbol('IK_CLOSE_MENU') as InjectionKey<() => void>
+
+export const IK_MENU_TELEPORTED = Symbol('IK_MENU_TELEPORTED') as InjectionKey<boolean>

package/lib/utils/sort-by-name-label.util.ts

@@ -0,0 +1,6 @@
+export function sortByNameLabel<TObject extends { name_label: string }>(
+  { name_label: label1 }: TObject,
+  { name_label: label2 }: TObject
+) {
+  return label1.localeCompare(label2, undefined, { numeric: true })
+}

package/lib/utils/to-array.utils.ts

@@ -0,0 +1,9 @@
+import type { MaybeArray } from '@core/types/utility.type'
+
+export function toArray<T>(value: MaybeArray<T> | undefined): T[] {
+  if (value === undefined) {
+    return []
+  }
+
+  return Array.isArray(value) ? value : [value]
+}

package/lib/utils/unique-id.util.ts

@@ -0,0 +1,8 @@
+const uniqueIds = new Map<string | undefined, number>()
+
+export const uniqueId = (prefix?: string) => {
+  const id = uniqueIds.get(prefix) || 0
+  uniqueIds.set(prefix, id + 1)
+
+  return prefix !== undefined ? `${prefix}-${id}` : `${id}`
+}

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@xen-orchestra/web-core",
+  "type": "module",
+  "version": "0.0.1",
+  "private": false,
+  "exports": {
+    "./*": {
+      "types": "./lib/*",
+      "import": "./lib/*"
+    }
+  },
+  "devDependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-regular-svg-icons": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/vue-fontawesome": "^3.0.5",
+    "@types/lodash-es": "^4.17.12",
+    "@vue/tsconfig": "^0.5.1",
+    "@vueuse/core": "^10.7.1",
+    "lodash-es": "^4.17.21",
+    "pinia": "^2.1.7",
+    "placement.js": "^1.0.0-beta.5",
+    "vue": "^3.4.13",
+    "vue-i18n": "^9.9.0",
+    "vue-router": "^4.2.5"
+  },
+  "homepage": "https://github.com/vatesfr/xen-orchestra/tree/master/@xen-orchestra/web-core",
+  "bugs": "https://github.com/vatesfr/xen-orchestra/issues",
+  "repository": {
+    "directory": "@xen-orchestra/web-core",
+    "type": "git",
+    "url": "https://github.com/vatesfr/xen-orchestra.git"
+  },
+  "author": {
+    "name": "Vates SAS",
+    "url": "https://vates.fr"
+  },
+  "license": "AGPL-3.0-or-later",
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "postversion": "npm publish --access public"
+  }
+}

package/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["env.d.ts", "lib/**/*", "lib/**/*.vue"],
+  "exclude": ["lib/**/__tests__/*"],
+  "compilerOptions": {
+    "noEmit": true,
+    "baseUrl": ".",
+    "paths": {
+      "@core/*": ["./lib/*"]
+    }
+  }
+}