@xen-orchestra/web-core 0.18.0 → 0.20.0

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.18.0",
+  "version": "0.20.0",
   "private": false,
   "exports": {
     "./*": {