@xen-orchestra/web-core 0.0.1

package/lib/components/user/UserLogo.vue

@@ -0,0 +1,57 @@
+<!-- v1.0 -->
+<template>
+  <span :class="size" class="user-logo" />
+</template>
+
+<script lang="ts" setup>
+import type { UserLogoSize } from '@core/types/size.type'
+
+withDefaults(
+  defineProps<{
+    size?: UserLogoSize
+  }>(),
+  { size: 'extra-small' }
+)
+</script>
+
+<style lang="postcss" scoped>
+/* COLOR VARIANTS */
+.user-logo {
+  --border-color: var(--color-purple-base);
+}
+
+/* SIZE VARIANTS */
+.user-logo {
+  &.extra-small {
+    --size: 1.6rem;
+    --border-size: 0.1rem;
+    --background-position: -0.8rem -0.493rem;
+    --background-size: 2.88rem;
+  }
+
+  &.small {
+    --size: 2.4rem;
+    --border-size: 0.1rem;
+    --background-position: -1.2rem -0.739rem;
+    --background-size: 4.32rem;
+  }
+
+  &.medium {
+    --size: 4rem;
+    --border-size: 0.2rem;
+    --background-position: -2rem -1.232rem;
+    --background-size: 7.2rem;
+  }
+}
+
+/* IMPLEMENTATION */
+.user-logo {
+  display: block;
+  width: var(--size);
+  height: var(--size);
+  background: var(--color-grey-100) url('../../assets/user.png') no-repeat var(--background-position) /
+    var(--background-size);
+  border: var(--border-size) solid var(--border-color);
+  border-radius: 20rem;
+}
+</style>

package/lib/composables/context.composable.ts

@@ -0,0 +1,34 @@
+import type { ComputedRef, InjectionKey, MaybeRefOrGetter } from 'vue'
+import { computed, inject, provide, toValue } from 'vue'
+
+export const createContext = <T, Output = ComputedRef<T>>(
+  initialValue: MaybeRefOrGetter<T>,
+  customBuilder?: (value: ComputedRef<T>, previousValue: ComputedRef<T>) => Output
+) => {
+  return {
+    id: Symbol('CONTEXT_ID') as InjectionKey<MaybeRefOrGetter<T>>,
+    initialValue,
+    builder: customBuilder ?? (value => value as Output),
+  }
+}
+
+type Context<T = any, Output = any> = ReturnType<typeof createContext<T, Output>>
+
+type ContextOutput<Ctx extends Context> = Ctx extends Context<any, infer Output> ? Output : never
+
+type ContextValue<Ctx extends Context> = Ctx extends Context<infer T> ? T : never
+
+export const useContext = <Ctx extends Context, T extends ContextValue<Ctx>>(
+  context: Ctx,
+  newValue?: MaybeRefOrGetter<T | undefined>
+): ContextOutput<Ctx> => {
+  const currentValue = inject(context.id, undefined)
+
+  const updatedValue = () => toValue(newValue) ?? toValue(currentValue) ?? context.initialValue
+  provide(context.id, updatedValue)
+
+  return context.builder(
+    computed(() => toValue(updatedValue)),
+    computed(() => toValue(currentValue))
+  )
+}

package/lib/composables/tree/branch-definition.ts

@@ -0,0 +1,17 @@
+import { TreeNodeDefinitionBase } from '@core/composables/tree/tree-node-definition-base'
+import type { TreeNodeDefinition, TreeNodeOptions } from '@core/composables/tree/types'
+
+export class BranchDefinition<
+  TData extends object = any,
+  TChildDefinition extends TreeNodeDefinition = TreeNodeDefinition,
+  const TDiscriminator = any,
+> extends TreeNodeDefinitionBase<TData, TDiscriminator> {
+  readonly isBranch = true
+  children: TChildDefinition[]
+
+  constructor(data: TData, options: TreeNodeOptions<TData, TDiscriminator>, children: TChildDefinition[]) {
+    super(data, options)
+
+    this.children = children
+  }
+}

package/lib/composables/tree/branch.ts

@@ -0,0 +1,143 @@
+import { TreeNodeBase } from '@core/composables/tree/tree-node-base'
+import type {
+  BranchStatuses,
+  ChildTreeGetter,
+  TreeContext,
+  TreeNode,
+  TreeNodeOptions,
+} from '@core/composables/tree/types'
+
+export class Branch<
+  TData extends object = any,
+  TChildNode extends TreeNode = TreeNode,
+  const TDiscriminator = any,
+> extends TreeNodeBase<TData, TDiscriminator> {
+  readonly isBranch = true
+  readonly rawChildren: TChildNode[]
+
+  constructor(
+    data: TData,
+    parent: Branch | undefined,
+    context: TreeContext,
+    depth: number,
+    options: TreeNodeOptions<TData, TDiscriminator> | undefined,
+    getChildTree: ChildTreeGetter<TData, TChildNode, TDiscriminator>
+  ) {
+    super(data, parent, context, depth, options)
+    this.rawChildren = getChildTree(this)
+  }
+
+  get children() {
+    return this.rawChildren.filter(child => !child.isExcluded)
+  }
+
+  get hasChildren() {
+    return this.rawChildren.length > 0
+  }
+
+  get passesFilterDownwards(): boolean {
+    return this.passesFilter || this.rawChildren.some(child => child.passesFilterDownwards)
+  }
+
+  get failsFilterDownwards(): boolean {
+    return this.passesFilter !== true && this.rawChildren.every(child => child.failsFilterDownwards)
+  }
+
+  get isExcluded() {
+    if (this.parent?.isExpanded === false) {
+      return true
+    }
+
+    if (!this.hasChildren) {
+      return true
+    }
+
+    if (this.passesFilterUpwards || this.passesFilterDownwards) {
+      return false
+    }
+
+    return this.failsFilterDownwards
+  }
+
+  get isExpanded() {
+    return this.context.expandedIds.has(this.id) || this.passesFilterDownwards || this.passesFilterUpwards
+  }
+
+  get areChildrenFullySelected(): boolean {
+    if (!this.context.allowMultiSelect) {
+      console.warn('allowMultiSelect must be enabled to use areChildrenFullySelected')
+      return false
+    }
+
+    return this.rawChildren.every(child => (child.isBranch ? child.areChildrenFullySelected : child.isSelected))
+  }
+
+  get areChildrenPartiallySelected(): boolean {
+    if (!this.context.allowMultiSelect) {
+      console.warn('allowMultiSelect must be enabled to use areChildrenPartiallySelected')
+      return false
+    }
+
+    if (this.areChildrenFullySelected) {
+      return false
+    }
+
+    return this.rawChildren.some(child => (child.isBranch ? child.areChildrenPartiallySelected : child.isSelected))
+  }
+
+  get statuses(): BranchStatuses {
+    return {
+      active: this.isActive,
+      selected: this.isSelected,
+      matches: this.passesFilter === true,
+      'selected-partial': this.context.allowMultiSelect && this.areChildrenPartiallySelected,
+      'selected-full': this.context.allowMultiSelect && this.areChildrenFullySelected,
+      expanded: this.isExpanded,
+    }
+  }
+
+  get childrenSelectedState() {
+    console.warn('allowMultiSelect must be enabled to use childrenSelectedState')
+    return this.areChildrenFullySelected ? 'all' : this.areChildrenPartiallySelected ? 'some' : 'none'
+  }
+
+  toggleExpand(forcedValue?: boolean, recursive?: boolean) {
+    const nextExpanded = forcedValue ?? !this.isExpanded
+
+    if (nextExpanded) {
+      this.context.expandedIds.add(this.id)
+    } else {
+      this.context.expandedIds.delete(this.id)
+    }
+
+    const shouldPropagate = recursive ?? !nextExpanded
+
+    if (shouldPropagate) {
+      this.rawChildren.forEach(child => {
+        if (child.isBranch) {
+          child.toggleExpand(nextExpanded, recursive)
+        }
+      })
+    }
+  }
+
+  get shouldSelectChildren(): boolean {
+    return this.children.some(child => (child.isBranch ? child.shouldSelectChildren : !child.isSelected))
+  }
+
+  toggleChildrenSelect(forcedValue?: boolean) {
+    if (!this.context.allowMultiSelect) {
+      console.warn('allowMultiSelect must be enabled to use toggleChildrenSelect')
+      return
+    }
+
+    const shouldSelect = forcedValue ?? this.shouldSelectChildren
+    this.rawChildren.forEach(child => {
+      if (child.isBranch) {
+        child.toggleChildrenSelect(shouldSelect)
+      } else if (!child.isExcluded) {
+        child.toggleSelect(shouldSelect)
+      }
+    })
+  }
+}

package/lib/composables/tree/build-nodes.ts

@@ -0,0 +1,20 @@
+import { Branch } from '@core/composables/tree/branch'
+import { Leaf } from '@core/composables/tree/leaf'
+import type { DefinitionToTreeNode, TreeContext, TreeNode, TreeNodeDefinition } from '@core/composables/tree/types'
+
+export function buildNodes<TDefinition extends TreeNodeDefinition, TTreeNode extends DefinitionToTreeNode<TDefinition>>(
+  definitions: TDefinition[],
+  context: TreeContext
+): TTreeNode[] {
+  function create(definitions: TreeNodeDefinition[], parent: Branch | undefined, depth: number): TreeNode[] {
+    return definitions.map(definition =>
+      definition.isBranch
+        ? new Branch(definition.data, parent, context, depth, definition.options, thisBranch =>
+            create(definition.children, thisBranch, depth + 1)
+          )
+        : new Leaf(definition.data, parent, context, depth, definition.options)
+    )
+  }
+
+  return create(definitions, undefined, 0) as TTreeNode[]
+}

package/lib/composables/tree/define-branch.ts

@@ -0,0 +1,23 @@
+import { BranchDefinition } from '@core/composables/tree/branch-definition'
+import type { Identifiable, Labeled, TreeNodeDefinition, TreeNodeOptions } from '@core/composables/tree/types'
+
+export function defineBranch<
+  TData extends Identifiable & Labeled,
+  TChildDefinition extends TreeNodeDefinition,
+  const TDiscriminator,
+>(data: TData, children: TChildDefinition[]): BranchDefinition<TData, TChildDefinition, TDiscriminator>
+export function defineBranch<TData extends object, TChildDefinition extends TreeNodeDefinition, const TDiscriminator>(
+  data: TData,
+  options: TreeNodeOptions<TData, TDiscriminator>,
+  children: TChildDefinition[]
+): BranchDefinition<TData, TChildDefinition, TDiscriminator>
+export function defineBranch<TData extends object, TChildDefinition extends TreeNodeDefinition, const TDiscriminator>(
+  data: TData,
+  optionsOrChildren: TreeNodeOptions<TData, TDiscriminator> | TChildDefinition[],
+  childrenOrNone?: TChildDefinition[]
+): BranchDefinition<TData, TChildDefinition, TDiscriminator> {
+  const options = Array.isArray(optionsOrChildren) ? ({} as TreeNodeOptions<TData, TDiscriminator>) : optionsOrChildren
+  const children = Array.isArray(optionsOrChildren) ? optionsOrChildren : childrenOrNone!
+
+  return new BranchDefinition(data, options, children)
+}

package/lib/composables/tree/define-leaf.ts

@@ -0,0 +1,16 @@
+import { LeafDefinition } from '@core/composables/tree/leaf-definition'
+import type { Identifiable, Labeled, TreeNodeOptions } from '@core/composables/tree/types'
+
+export function defineLeaf<TData extends Identifiable & Labeled, const TDiscriminator>(
+  data: TData
+): LeafDefinition<TData, TDiscriminator>
+export function defineLeaf<TData extends object, const TDiscriminator>(
+  data: TData,
+  options: TreeNodeOptions<TData, TDiscriminator>
+): LeafDefinition<TData, TDiscriminator>
+export function defineLeaf<TData extends object, const TDiscriminator>(
+  data: TData,
+  options?: TreeNodeOptions<TData, TDiscriminator>
+): LeafDefinition<TData, TDiscriminator> {
+  return new LeafDefinition(data, options ?? ({} as TreeNodeOptions<TData, TDiscriminator>))
+}

package/lib/composables/tree/define-tree.ts

@@ -0,0 +1,65 @@
+import { BranchDefinition } from '@core/composables/tree/branch-definition'
+import { LeafDefinition } from '@core/composables/tree/leaf-definition'
+import type {
+  ChildTreeDefinitionGetter,
+  Identifiable,
+  Labeled,
+  TreeNodeDefinition,
+  TreeNodeOptions,
+} from '@core/composables/tree/types'
+
+// Overload 1: Leaf with no options
+export function defineTree<TData extends Identifiable & Labeled, const TDiscriminator = any>(
+  entries: TData[]
+): LeafDefinition<TData, TDiscriminator>[]
+
+// Overload 2: Leaf with options
+export function defineTree<TData extends object, const TDiscriminator = any>(
+  entries: TData[],
+  options: TreeNodeOptions<TData, TDiscriminator>
+): LeafDefinition<TData, TDiscriminator>[]
+
+// Overload 3: Branch with no options
+export function defineTree<
+  TData extends Identifiable & Labeled,
+  TChildDefinition extends TreeNodeDefinition,
+  const TDiscriminator = any,
+>(
+  entries: TData[],
+  getChildTree: ChildTreeDefinitionGetter<TData, TChildDefinition>
+): BranchDefinition<TData, TChildDefinition, TDiscriminator>[]
+
+// Overload 4: Branch with options
+export function defineTree<
+  TData extends object,
+  TChildDefinition extends TreeNodeDefinition = TreeNodeDefinition,
+  const TDiscriminator = any,
+>(
+  entries: TData[],
+  options: TreeNodeOptions<TData, TDiscriminator>,
+  getChildTree: ChildTreeDefinitionGetter<TData, TChildDefinition>
+): BranchDefinition<TData, TChildDefinition, TDiscriminator>[]
+
+// Implementation
+export function defineTree<
+  TData extends object,
+  TChildDefinition extends TreeNodeDefinition = TreeNodeDefinition,
+  const TDiscriminator = any,
+>(
+  entries: TData[],
+  optionsOrGetChildTree?: TreeNodeOptions<TData, TDiscriminator> | ChildTreeDefinitionGetter<TData, TChildDefinition>,
+  getChildTreeOrNone?: ChildTreeDefinitionGetter<TData, TChildDefinition>
+) {
+  const options = (typeof optionsOrGetChildTree === 'function' ? {} : optionsOrGetChildTree ?? {}) as TreeNodeOptions<
+    TData,
+    TDiscriminator
+  >
+
+  const getChildTree = typeof optionsOrGetChildTree === 'function' ? optionsOrGetChildTree : getChildTreeOrNone
+
+  if (getChildTree !== undefined) {
+    return entries.map(data => new BranchDefinition(data, options, getChildTree(data)))
+  }
+
+  return entries.map(data => new LeafDefinition(data, options))
+}

package/lib/composables/tree/leaf-definition.ts

@@ -0,0 +1,8 @@
+import { TreeNodeDefinitionBase } from '@core/composables/tree/tree-node-definition-base'
+
+export class LeafDefinition<TData extends object = any, const TDiscriminator = any> extends TreeNodeDefinitionBase<
+  TData,
+  TDiscriminator
+> {
+  readonly isBranch = false
+}

package/lib/composables/tree/leaf.ts

@@ -0,0 +1,34 @@
+import { TreeNodeBase } from '@core/composables/tree/tree-node-base'
+import type { LeafStatuses } from '@core/composables/tree/types'
+
+export class Leaf<TData extends object = any, const TDiscriminator = any> extends TreeNodeBase<TData, TDiscriminator> {
+  readonly isBranch = false
+
+  get passesFilterDownwards(): boolean {
+    return this.passesFilter ?? false
+  }
+
+  get failsFilterDownwards(): boolean {
+    return this.passesFilter === false
+  }
+
+  get isExcluded() {
+    if (this.parent?.isExpanded === false) {
+      return true
+    }
+
+    if (this.passesFilterUpwards) {
+      return false
+    }
+
+    return this.passesFilter === false
+  }
+
+  get statuses(): LeafStatuses {
+    return {
+      active: this.isActive,
+      selected: this.isSelected,
+      matches: this.passesFilter === true,
+    }
+  }
+}

package/lib/composables/tree/tree-node-base.ts

@@ -0,0 +1,103 @@
+import type { Branch } from '@core/composables/tree/branch'
+import type { Identifiable, Labeled, TreeContext, TreeNodeOptions } from '@core/composables/tree/types'
+
+export abstract class TreeNodeBase<TData extends object = any, TDiscriminator = any> {
+  abstract readonly isBranch: boolean
+  abstract passesFilterDownwards: boolean
+  abstract isExcluded: boolean
+  abstract statuses: Record<string, boolean>
+
+  readonly data: TData
+  readonly depth: number
+  readonly parent: Branch | undefined
+  readonly context: TreeContext
+  readonly options: TreeNodeOptions<TData, TDiscriminator>
+
+  constructor(
+    data: TData,
+    parent: Branch | undefined,
+    context: TreeContext,
+    depth: number,
+    options?: TreeNodeOptions<TData, TDiscriminator>
+  ) {
+    this.data = data
+    this.parent = parent
+    this.context = context
+    this.depth = depth
+    this.options = options ?? ({} as TreeNodeOptions<TData, TDiscriminator>)
+  }
+
+  get id() {
+    if (this.options.getId === undefined) {
+      return (this.data as Identifiable).id
+    }
+
+    if (typeof this.options.getId === 'function') {
+      return this.options.getId(this.data)
+    }
+
+    return this.data[this.options.getId]
+  }
+
+  get label() {
+    if (this.options.getLabel === undefined) {
+      return (this.data as Labeled).label
+    }
+
+    if (typeof this.options.getLabel === 'function') {
+      return this.options.getLabel(this.data)
+    }
+
+    return this.data[this.options.getLabel]
+  }
+
+  get discriminator() {
+    return this.options.discriminator
+  }
+
+  get passesFilter() {
+    return this.options.predicate?.(this)
+  }
+
+  get isSelected() {
+    return this.context.selectedIds.has(this.id)
+  }
+
+  get isActive() {
+    return this.context.activeId === this.id
+  }
+
+  get passesFilterUpwards(): boolean {
+    return this.passesFilter || (this.parent?.passesFilterUpwards ?? false)
+  }
+
+  get isSelectable() {
+    return this.options.selectable?.(this.data) ?? !this.isBranch
+  }
+
+  activate() {
+    if (!this.isSelectable) {
+      return
+    }
+
+    this.context.activeId = this.id
+  }
+
+  toggleSelect(forcedValue?: boolean) {
+    if (!this.isSelectable) {
+      return
+    }
+
+    const shouldSelect = forcedValue ?? !this.isSelected
+
+    if (shouldSelect) {
+      if (!this.context.allowMultiSelect) {
+        this.context.selectedIds.clear()
+      }
+
+      this.context.selectedIds.add(this.id)
+    } else {
+      this.context.selectedIds.delete(this.id)
+    }
+  }
+}

package/lib/composables/tree/tree-node-definition-base.ts

@@ -0,0 +1,12 @@
+import type { TreeNodeOptions } from '@core/composables/tree/types'
+
+export abstract class TreeNodeDefinitionBase<TData extends object, TDiscriminator> {
+  abstract readonly isBranch: boolean
+  data: TData
+  options: TreeNodeOptions<TData, TDiscriminator>
+
+  constructor(data: TData, options: TreeNodeOptions<TData, TDiscriminator>) {
+    this.data = data
+    this.options = options
+  }
+}

package/lib/composables/tree/types.ts

@@ -0,0 +1,92 @@
+import { useTree } from '@core/composables/tree.composable'
+import type { Branch } from '@core/composables/tree/branch'
+import type { BranchDefinition } from '@core/composables/tree/branch-definition'
+import type { Leaf } from '@core/composables/tree/leaf'
+import type { LeafDefinition } from '@core/composables/tree/leaf-definition'
+import type { TreeNodeBase } from '@core/composables/tree/tree-node-base'
+
+export type TreeNodeId = string | number
+
+export type Identifiable = { id: TreeNodeId }
+
+export type Labeled = { label: string }
+
+type AcceptableKeys<TData, TAccepted> = {
+  [K in keyof TData]: TData[K] extends TAccepted ? K : never
+}[keyof TData]
+
+type AcceptableGetter<TData, TAccepted> = AcceptableKeys<TData, TAccepted> | ((data: TData) => TAccepted)
+
+export type TreeNode<
+  TData extends object = any,
+  TChildNode extends TreeNode = TreeNode<any, any>,
+  TDiscriminator = any,
+> = Leaf<TData, TDiscriminator> | Branch<TData, TChildNode, TDiscriminator>
+
+export type BaseTreeNodeOptions<TData extends object, TDiscriminator> = {
+  discriminator?: TDiscriminator
+  predicate?: (node: TreeNodeBase<TData, TDiscriminator>) => boolean | undefined
+  selectable?: (data: TData) => boolean
+  meta?: any
+}
+
+type GetIdOption<TData extends object> = TData extends Identifiable
+  ? { getId?: AcceptableGetter<TData, TreeNodeId> }
+  : { getId: AcceptableGetter<TData, TreeNodeId> }
+
+type GetLabelOption<TData extends object> = TData extends Labeled
+  ? { getLabel?: AcceptableGetter<TData, string> }
+  : { getLabel: AcceptableGetter<TData, string> }
+
+export type TreeNodeOptions<TData extends object, TDiscriminator> = BaseTreeNodeOptions<TData, TDiscriminator> &
+  GetIdOption<TData> &
+  GetLabelOption<TData>
+
+export type TreeNodeDefinition = LeafDefinition | BranchDefinition
+
+export type DefinitionToTreeNode<TDefinition> =
+  TDefinition extends BranchDefinition<infer TData, infer TChildDefinition, infer TDiscriminator>
+    ? Branch<TData, DefinitionToTreeNode<TChildDefinition>, TDiscriminator>
+    : TDefinition extends LeafDefinition<infer TData, infer TDiscriminator>
+      ? Leaf<TData, TDiscriminator>
+      : never
+
+export type ChildTreeGetter<TData extends object, TChildNode extends TreeNode, TDiscriminator> = (
+  thisBranch: Branch<TData, TChildNode, TDiscriminator>
+) => TChildNode[]
+
+export type ChildTreeDefinitionGetter<TData extends object, TChildDefinition extends TreeNodeDefinition> = (
+  data: TData
+) => TChildDefinition[]
+
+export type TreeContext = {
+  allowMultiSelect: boolean
+  selectedIds: Set<TreeNodeId>
+  expandedIds: Set<TreeNodeId>
+  activeId: TreeNodeId | undefined
+}
+
+export type UseTreeOptions = {
+  allowMultiSelect?: boolean
+  expand?: boolean
+  selectedLabel?:
+    | ((nodes: TreeNode[]) => string)
+    | {
+        max: number
+        fn: (count: number) => string
+      }
+}
+
+export type Tree = ReturnType<typeof useTree>
+
+export type LeafStatuses = {
+  active: boolean
+  selected: boolean
+  matches: boolean
+}
+
+export type BranchStatuses = LeafStatuses & {
+  'selected-partial': boolean
+  'selected-full': boolean
+  expanded: boolean
+}

package/lib/composables/tree-filter.composable.ts

@@ -0,0 +1,12 @@
+import type { TreeNodeBase } from '@core/composables/tree/tree-node-base'
+import { computed, ref } from 'vue'
+
+export function useTreeFilter() {
+  const filter = ref('')
+  const hasFilter = computed(() => filter.value.trim().length > 0)
+
+  const predicate = (node: TreeNodeBase) =>
+    hasFilter.value ? node.label.toLocaleLowerCase().includes(filter.value.toLocaleLowerCase()) : undefined
+
+  return { filter, predicate }
+}