@xen-orchestra/web-core 0.19.0 → 0.20.0

package/lib/packages/form-select/use-form-option-controller.ts

@@ -0,0 +1,50 @@
+import { type FormOption, IK_FORM_SELECT_CONTROLLER } from '@core/packages/form-select/types.ts'
+import { unrefElement, useEventListener, whenever } from '@vueuse/core'
+import { computed, inject, type MaybeRefOrGetter, ref, toValue } from 'vue'
+
+export function useFormOptionController<TOption extends FormOption>(_option: MaybeRefOrGetter<TOption>) {
+  const controller = inject(IK_FORM_SELECT_CONTROLLER)
+
+  if (!controller) {
+    throw new Error('useFormOption needs a FormSelectController to be injected')
+  }
+
+  const option = computed(() => toValue(_option))
+
+  const elementRef = ref<HTMLDivElement>()
+
+  whenever(
+    () => option.value.flags.active,
+    () => {
+      unrefElement(elementRef)?.scrollIntoView({ block: 'nearest' })
+    }
+  )
+
+  useEventListener(elementRef, 'click', event => {
+    event.preventDefault()
+
+    if (option.value.properties.disabled) {
+      return
+    }
+
+    if (option.value.properties.multiple) {
+      option.value.toggleFlag('selected')
+      controller.focusSearchOrTrigger()
+    } else {
+      option.value.toggleFlag('selected', true)
+      controller.closeDropdown(true)
+    }
+  })
+
+  useEventListener(elementRef, 'mouseenter', () => {
+    if (option.value.properties.disabled || controller.isNavigatingWithKeyboard) {
+      return
+    }
+
+    option.value.flags.active = true
+  })
+
+  return {
+    elementRef,
+  }
+}

package/lib/packages/form-select/use-form-select-controller.ts

@@ -0,0 +1,205 @@
+import { type FormOption, type FormOptionIndex, IK_FORM_SELECT_CONTROLLER } from '@core/packages/form-select/types.ts'
+import { useFormSelectKeyboardNavigation } from '@core/packages/form-select/use-form-select-keyboard-navigation.ts'
+import { ifElse } from '@core/utils/if-else.utils'
+import { type MaybeElement, useFloating } from '@floating-ui/vue'
+import { clamp, onClickOutside, useEventListener, useFocusWithin, whenever } from '@vueuse/core'
+import { logicOr } from '@vueuse/math'
+import { computed, type MaybeRefOrGetter, provide, reactive, type Ref, ref, toValue, watch } from 'vue'
+
+export function useFormSelectController<TOption extends FormOption>(config: {
+  options: MaybeRefOrGetter<TOption[]>
+  searchTerm: Ref<string | undefined>
+}) {
+  const options = computed(() => toValue(config.options))
+
+  const isMultiple = computed(() => options.value[0]?.properties.multiple ?? false)
+
+  const activeOption = computed(() => options.value.find(option => option.flags.active))
+
+  const isOpen = ref(false)
+
+  /* TRIGGER */
+
+  const triggerRef = ref<HTMLElement>()
+
+  const { focused: isTriggerFocused } = useFocusWithin(triggerRef)
+
+  const isActive = logicOr(isTriggerFocused, isOpen)
+
+  useEventListener(triggerRef, 'click', () => openDropdown())
+
+  function focusTrigger() {
+    triggerRef.value?.focus?.()
+  }
+
+  /* KEYBOARD NAVIGATION */
+
+  const { isNavigatingWithKeyboard, stopKeyboardNavigation } = useFormSelectKeyboardNavigation({
+    isActive,
+    isMultiple,
+    isOpen,
+    onSelect: () => activeOption.value?.toggleFlag('selected', true),
+    onToggle: () => activeOption.value?.toggleFlag('selected'),
+    onOpen: openDropdown,
+    onClose: closeDropdown,
+    onMove: index => moveToOptionIndex(index),
+  })
+
+  /* DROPDOWN */
+
+  const dropdownRef = ref<HTMLElement>()
+
+  onClickOutside(dropdownRef, () => closeDropdown(true), { ignore: [triggerRef] })
+
+  useEventListener(dropdownRef, 'mousemove', () => stopKeyboardNavigation())
+
+  /* DROPDOWN PLACEMENT */
+
+  const { floatingStyles } = useFloating(triggerRef, dropdownRef, {
+    placement: 'bottom-start',
+    open: isOpen,
+  })
+
+  /* SEARCH */
+
+  watch(config.searchTerm, () => stopKeyboardNavigation())
+
+  const searchRef = ref<MaybeElement<HTMLElement> & { focus?: () => void }>()
+
+  function focusSearch() {
+    if (!searchRef.value?.focus) {
+      return false
+    }
+
+    searchRef.value.focus()
+
+    return true
+  }
+
+  whenever(isOpen, () => focusSearch(), { flush: 'post' })
+
+  const currentIndex = computed(() => options.value.findIndex(option => option.flags.active))
+
+  whenever(options, () => moveToOptionIndex('first'), { flush: 'post' })
+
+  ifElse(isOpen, () => moveToOptionIndex('selected'), clear, { flush: 'post' })
+
+  function openDropdown() {
+    if (!isOpen.value) {
+      isOpen.value = true
+    }
+  }
+
+  function closeDropdown(keepFocus: boolean) {
+    if (!isOpen.value) {
+      return
+    }
+
+    isOpen.value = false
+
+    if (keepFocus) {
+      focusTrigger()
+    }
+  }
+
+  function clear() {
+    if (config.searchTerm.value !== undefined) {
+      config.searchTerm.value = ''
+    }
+  }
+
+  const boundaryIndexes = computed(() => {
+    let firstIndex: number | undefined
+    let lastIndex: number | undefined
+
+    options.value.forEach((option, index) => {
+      if (option.properties.disabled) {
+        return
+      }
+
+      if (firstIndex === undefined) {
+        firstIndex = index
+      }
+
+      lastIndex = index
+    })
+
+    if (firstIndex === undefined || lastIndex === undefined) {
+      return undefined
+    }
+
+    return {
+      first: firstIndex,
+      last: lastIndex,
+    }
+  })
+
+  function parseIndex(index: FormOptionIndex): number {
+    switch (index) {
+      case 'previous':
+        return currentIndex.value - 1
+      case 'next':
+        return currentIndex.value + 1
+      case 'previous-page':
+        return currentIndex.value - 7 // TODO: Better handle page size.
+      case 'next-page':
+        return currentIndex.value + 7 // TODO: Better handle page size.
+      case 'first':
+        return 0
+      case 'last':
+        return options.value.length - 1
+      case 'selected':
+        return options.value.findIndex(option => option.flags.selected)
+      default:
+        return index
+    }
+  }
+
+  function moveToOptionIndex(_index: FormOptionIndex) {
+    if (boundaryIndexes.value === undefined) {
+      activeOption.value?.toggleFlag('active', false)
+      return
+    }
+
+    const index = clamp(parseIndex(_index), boundaryIndexes.value.first, boundaryIndexes.value.last)
+
+    options.value[getClosestEnabledIndex(index)]?.toggleFlag('active', true)
+  }
+
+  function getClosestEnabledIndex(expectedIndex: number) {
+    let index = expectedIndex
+
+    const direction = expectedIndex < currentIndex.value ? -1 : 1
+
+    while (options.value[index]?.properties.disabled) {
+      index += direction
+    }
+
+    return index
+  }
+
+  function focusSearchOrTrigger() {
+    if (!focusSearch()) {
+      focusTrigger()
+    }
+  }
+
+  provide(
+    IK_FORM_SELECT_CONTROLLER,
+    reactive({
+      isNavigatingWithKeyboard,
+      focusSearchOrTrigger,
+      closeDropdown,
+    })
+  )
+
+  return {
+    triggerRef,
+    dropdownRef,
+    searchRef,
+    openDropdown,
+    closeDropdown,
+    isOpen,
+    floatingStyles,
+  }
+}

package/lib/packages/form-select/use-form-select-keyboard-navigation.ts

@@ -0,0 +1,157 @@
+import { FORM_SELECT_HANDLED_KEY, type FormOptionIndex } from '@core/packages/form-select/types.ts'
+import { ifElse } from '@core/utils/if-else.utils.ts'
+import { onKeyStroke } from '@vueuse/core'
+import { type EffectScope, effectScope, ref, type Ref } from 'vue'
+
+export function useFormSelectKeyboardNavigation({
+  isActive,
+  isOpen,
+  isMultiple,
+  onOpen,
+  onClose,
+  onMove,
+  onToggle,
+  onSelect,
+}: {
+  isActive: Ref<boolean>
+  isOpen: Ref<boolean>
+  isMultiple: Ref<boolean>
+  onOpen: () => void
+  onClose: (keepFocus: boolean) => void
+  onMove: (index: FormOptionIndex) => void
+  onToggle: () => void
+  onSelect: () => void
+}) {
+  const isNavigatingWithKeyboard = ref(false)
+
+  function stopKeyboardNavigation() {
+    if (isNavigatingWithKeyboard.value) {
+      isNavigatingWithKeyboard.value = false
+    }
+  }
+
+  function handleArrowUpDownKeys(event: KeyboardEvent, key: FORM_SELECT_HANDLED_KEY.UP | FORM_SELECT_HANDLED_KEY.DOWN) {
+    event.preventDefault()
+
+    isNavigatingWithKeyboard.value = true
+
+    if (!isOpen.value) {
+      return onOpen()
+    }
+
+    onMove(key === FORM_SELECT_HANDLED_KEY.UP ? 'previous' : 'next')
+  }
+
+  function handlePageUpDownKeys(
+    event: KeyboardEvent,
+    key: FORM_SELECT_HANDLED_KEY.PAGE_UP | FORM_SELECT_HANDLED_KEY.PAGE_DOWN
+  ) {
+    event.preventDefault()
+
+    isNavigatingWithKeyboard.value = true
+
+    if (!isOpen.value) {
+      return onOpen()
+    }
+
+    onMove(key === FORM_SELECT_HANDLED_KEY.PAGE_UP ? 'previous-page' : 'next-page')
+  }
+
+  function handleHomeEndKeys(event: KeyboardEvent, key: FORM_SELECT_HANDLED_KEY.HOME | FORM_SELECT_HANDLED_KEY.END) {
+    if (!isOpen.value) {
+      return
+    }
+
+    event.preventDefault()
+
+    isNavigatingWithKeyboard.value = true
+
+    onMove(key === FORM_SELECT_HANDLED_KEY.HOME ? 'first' : 'last')
+  }
+
+  function handleLeftRightKeys() {
+    isNavigatingWithKeyboard.value = false
+  }
+
+  function handleEnterSpaceKeys(
+    event: KeyboardEvent,
+    key: FORM_SELECT_HANDLED_KEY.ENTER | FORM_SELECT_HANDLED_KEY.SPACE
+  ) {
+    if (key === FORM_SELECT_HANDLED_KEY.SPACE && !isNavigatingWithKeyboard.value) {
+      return
+    }
+
+    event.preventDefault()
+
+    if (!isOpen.value) {
+      return onOpen()
+    }
+
+    if (isMultiple.value) {
+      onToggle()
+    } else {
+      onSelect()
+      onClose(true)
+    }
+  }
+
+  function handleTabEscapeKeys(
+    event: KeyboardEvent,
+    key: FORM_SELECT_HANDLED_KEY.TAB | FORM_SELECT_HANDLED_KEY.ESCAPE
+  ) {
+    if (key === FORM_SELECT_HANDLED_KEY.ESCAPE) {
+      event.preventDefault()
+    }
+
+    onClose(key === FORM_SELECT_HANDLED_KEY.ESCAPE)
+  }
+
+  const handledKeys = Object.values(FORM_SELECT_HANDLED_KEY)
+
+  let scope: EffectScope | undefined
+
+  function registerEvents() {
+    scope = effectScope()
+
+    scope.run(() =>
+      onKeyStroke(handledKeys, (event): void => {
+        const key = event.key as FORM_SELECT_HANDLED_KEY
+
+        switch (key) {
+          case FORM_SELECT_HANDLED_KEY.DOWN:
+          case FORM_SELECT_HANDLED_KEY.UP:
+            return handleArrowUpDownKeys(event, key)
+          case FORM_SELECT_HANDLED_KEY.PAGE_DOWN:
+          case FORM_SELECT_HANDLED_KEY.PAGE_UP:
+            return handlePageUpDownKeys(event, key)
+          case FORM_SELECT_HANDLED_KEY.HOME:
+          case FORM_SELECT_HANDLED_KEY.END:
+            return handleHomeEndKeys(event, key)
+          case FORM_SELECT_HANDLED_KEY.ENTER:
+          case FORM_SELECT_HANDLED_KEY.SPACE:
+            return handleEnterSpaceKeys(event, key)
+          case FORM_SELECT_HANDLED_KEY.LEFT:
+          case FORM_SELECT_HANDLED_KEY.RIGHT:
+            return handleLeftRightKeys()
+          case FORM_SELECT_HANDLED_KEY.TAB:
+          case FORM_SELECT_HANDLED_KEY.ESCAPE:
+            return handleTabEscapeKeys(event, key)
+          default:
+            return key
+        }
+      })
+    )
+  }
+
+  function unregisterEvents() {
+    scope?.stop()
+    scope = undefined
+  }
+
+  ifElse(isActive, registerEvents, unregisterEvents)
+
+  return {
+    isNavigatingWithKeyboard,
+    stopKeyboardNavigation,
+  }
+}

package/lib/packages/form-select/use-form-select.ts

@@ -0,0 +1,193 @@
+import { useCollection } from '@core/packages/collection'
+import type {
+  FormOptionProperties,
+  FormOptionValue,
+  FormSelectBaseConfig,
+  FormSelectBaseProperties,
+  UseFormSelectReturn,
+} from '@core/packages/form-select/types.ts'
+import { toArray } from '@core/utils/to-array.utils.ts'
+import type { MaybeRefOrGetter } from '@vueuse/shared'
+import { computed, reactive, ref } from 'vue'
+
+export function useFormSelect<
+  TSource extends { value: FormOptionValue; label: string },
+  TValue extends FormOptionValue = TSource['value'],
+  TProperties extends FormSelectBaseProperties & {
+    value?: TValue
+    label?: string
+  } = FormSelectBaseProperties & {
+    value?: TValue
+    label?: string
+  },
+>(
+  sources: MaybeRefOrGetter<TSource[]>,
+  config?: FormSelectBaseConfig & {
+    properties?: (source: TSource) => TProperties
+  }
+): UseFormSelectReturn<TSource, TValue, TProperties>
+
+export function useFormSelect<
+  TSource extends { id: FormOptionValue; label: string },
+  TValue extends FormOptionValue = TSource['id'],
+  TProperties extends FormSelectBaseProperties & {
+    value?: TValue
+    label?: string
+  } = FormSelectBaseProperties & {
+    value?: TValue
+    label?: string
+  },
+>(
+  sources: MaybeRefOrGetter<TSource[]>,
+  config?: FormSelectBaseConfig & {
+    properties?: (source: TSource) => TProperties
+  }
+): UseFormSelectReturn<TSource, TValue, TProperties>
+
+export function useFormSelect<
+  TSource extends { value: FormOptionValue },
+  TValue extends FormOptionValue = TSource['value'],
+  TProperties extends FormSelectBaseProperties & {
+    value?: TValue
+    label: string
+  } = FormSelectBaseProperties & {
+    value?: TValue
+    label: string
+  },
+>(
+  sources: MaybeRefOrGetter<TSource[]>,
+  config: FormSelectBaseConfig & {
+    properties: (source: TSource) => TProperties
+  }
+): UseFormSelectReturn<TSource, TValue, TProperties>
+
+export function useFormSelect<
+  TSource extends { id: FormOptionValue },
+  TValue extends FormOptionValue = TSource['id'],
+  TProperties extends FormSelectBaseProperties & {
+    value?: TValue
+    label: string
+  } = FormSelectBaseProperties & {
+    value?: TValue
+    label: string
+  },
+>(
+  sources: MaybeRefOrGetter<TSource[]>,
+  config: FormSelectBaseConfig & {
+    properties: (source: TSource) => TProperties
+  }
+): UseFormSelectReturn<TSource, TValue, TProperties>
+
+export function useFormSelect<
+  TSource extends { label: string },
+  TValue extends FormOptionValue,
+  TProperties extends FormSelectBaseProperties & {
+    value: TValue
+    label?: string
+  } = FormSelectBaseProperties & {
+    value: TValue
+    label?: string
+  },
+>(
+  sources: MaybeRefOrGetter<TSource[]>,
+  config: FormSelectBaseConfig & {
+    properties: (source: TSource) => TProperties
+  }
+): UseFormSelectReturn<TSource, TValue, TProperties>
+
+export function useFormSelect<
+  TSource,
+  TValue extends FormOptionValue,
+  TProperties extends FormSelectBaseProperties & {
+    value: TValue
+    label: string
+  } = FormSelectBaseProperties & {
+    value: TValue
+    label: string
+  },
+>(
+  sources: MaybeRefOrGetter<TSource[]>,
+  config: FormSelectBaseConfig & {
+    properties: (source: TSource) => TProperties
+  }
+): UseFormSelectReturn<TSource, TValue, TProperties>
+
+export function useFormSelect<
+  TSource,
+  TProperties extends FormSelectBaseProperties & {
+    value?: FormOptionValue
+    label?: string
+  },
+>(
+  sources: MaybeRefOrGetter<TSource[]>,
+  config?: FormSelectBaseConfig & {
+    properties?: (source: TSource) => TProperties
+  }
+) {
+  const _searchTerm = ref('')
+
+  const searchTerm = computed({
+    get: () => _searchTerm.value,
+    set: (value: string) => {
+      _searchTerm.value = value.toLowerCase().trim()
+    },
+  })
+
+  const {
+    items: allOptions,
+    useFlag,
+    useSubset,
+  } = useCollection(sources, {
+    flags: {
+      active: { multiple: false },
+      selected: { multiple: config?.multiple ?? false },
+    },
+    properties: (source: TSource) => {
+      const {
+        value = (source as { value: FormOptionValue }).value ?? (source as { id: FormOptionValue }).id,
+        label = (source as { label: string }).label,
+        disabled = false,
+        searchableTerm,
+        ...extraProperties
+      } = config?.properties?.(source) ?? {}
+
+      const matching = computed(() => {
+        if (!searchTerm.value) {
+          return true
+        }
+
+        const searchableTerms = toArray(searchableTerm ?? label)
+
+        return searchableTerms.some(term => term.toLowerCase().includes(searchTerm.value))
+      })
+
+      return reactive({
+        id: value,
+        label,
+        multiple: config?.multiple ?? false,
+        disabled,
+        matching,
+        ...extraProperties,
+      }) satisfies FormOptionProperties<FormOptionValue>
+    },
+  })
+
+  const { items: options } = useSubset(option => option.properties.matching)
+
+  const { items: selectedOptions, ids: selectedValues } = useFlag('selected')
+
+  const selectedLabels = computed(() => selectedOptions.value.map(option => option.properties.label))
+
+  const selectedLabel = computed(
+    () => config?.selectedLabel?.(selectedLabels.value.length, selectedLabels.value) ?? selectedLabels.value.join(', ')
+  )
+
+  return {
+    searchTerm,
+    allOptions,
+    options,
+    selectedOptions,
+    selectedValues,
+    selectedLabel,
+  }
+}

package/lib/stores/sidebar.store.ts

@@ -2,7 +2,7 @@ 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'
+import { computed, ref, watch } from 'vue'
 
 export const useSidebarStore = defineStore('layout', () => {
   const uiStore = useUiStore()
@@ -12,6 +12,7 @@ export const useSidebarStore = defineStore('layout', () => {
   const toggleExpand = useToggle(isExpanded)
   const toggleLock = useToggle(isLocked)
   const isResizing = ref(false)
+  let desktopState = false
 
   let initialX: number
   let initialWidth: number
@@ -49,6 +50,18 @@ export const useSidebarStore = defineStore('layout', () => {
 
   ifElse(isResizing, [load, resume], [pause, unload])
 
+  watch(
+    () => uiStore.isMobile,
+    isMobile => {
+      // keep the state of desktop expention
+      if (isMobile) {
+        desktopState = isExpanded.value
+      }
+
+      isExpanded.value = desktopState && !isMobile
+    }
+  )
+
   return {
     isExpanded,
     isLocked,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xen-orchestra/web-core",
   "type": "module",
-  "version": "0.19.0",
+  "version": "0.20.0",
   "private": false,
   "exports": {
     "./*": {

package/lib/packages/collection/build-item.ts

@@ -1,45 +0,0 @@
-import type { CollectionItem, CollectionOptions, FlagRegistry } from '@core/packages/collection'
-import { unref, type UnwrapRef } from 'vue'
-
-export function buildItem<
-  TSource,
-  TId extends PropertyKey,
-  TFlag extends string,
-  TProperties extends Record<string, unknown>,
->(
-  source: TSource,
-  options: CollectionOptions<TSource, TId, TFlag, TProperties>,
-  flagRegistry: FlagRegistry<TFlag>
-): CollectionItem<TSource, TId, TFlag, UnwrapRef<TProperties>> {
-  const id = options.identifier(source)
-  const properties = options.properties?.(source)
-
-  return {
-    id,
-    source,
-    toggleFlag(flag: TFlag, forcedValue?: boolean) {
-      flagRegistry.toggleFlag(id, flag, forcedValue)
-    },
-    flags: new Proxy({} as Record<TFlag, boolean>, {
-      has(target, flag: TFlag) {
-        return flagRegistry.isFlagDefined(flag)
-      },
-      get(target, flag: TFlag) {
-        return flagRegistry.isFlagged(id, flag)
-      },
-      set(target, flag: TFlag, value) {
-        flagRegistry.toggleFlag(id, flag, value)
-
-        return true
-      },
-    }),
-    properties: new Proxy({} as UnwrapRef<TProperties>, {
-      has(target, prop: Extract<keyof TProperties, string>) {
-        return properties !== undefined && prop in properties
-      },
-      get(target, prop: Extract<keyof TProperties, string>) {
-        return unref(properties?.[prop])
-      },
-    }),
-  }
-}