@xen-orchestra/web-core 0.20.1 → 0.21.0

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

@@ -1,45 +1,38 @@
-import type { CollectionConfigProperties, CollectionItem } from '@core/packages/collection'
-import type { MaybeArray } from '@core/types/utility.type.ts'
-import type { ComputedRef, InjectionKey, Reactive, WritableComputedRef } from 'vue'
+import type { CollectionItem, CollectionItemProperties } from '@core/packages/collection'
+import type { KeyOfByValue } from '@core/types/utility.type.ts'
+import type { ComputedRef, InjectionKey, Reactive, Ref, UnwrapRef } from 'vue'
 
-export type FormSelectBaseConfig = {
-  multiple?: boolean
-  selectedLabel?: (count: number, labels: string[]) => string | undefined
-}
+export type FormSelectId<
+  TCustomProperties extends CollectionItemProperties = CollectionItemProperties,
+  TSource = unknown,
+  TValue = unknown,
+  TMultiple extends boolean = boolean,
+> = InjectionKey<FormSelect<TCustomProperties, TSource, TValue, TMultiple>>
 
-export type FormSelectBaseProperties = Record<string, unknown> & {
-  disabled?: boolean
-  searchableTerm?: MaybeArray<string>
-}
+export type FormSelectIdToOption<TSelectId extends FormSelectId> =
+  TSelectId extends FormSelectId<infer TCustomProperties, infer TSource, infer TValue>
+    ? FormOption<TCustomProperties, TSource, TValue>
+    : never
 
-export type FormOptionValue = string | number
+export type ExtractValue<TOptionSource, TGetValue> = TGetValue extends keyof TOptionSource
+  ? TOptionSource[TGetValue]
+  : TGetValue extends (source: TOptionSource) => infer R
+    ? R
+    : TOptionSource
 
-export type FormOptionProperties<TValue extends FormOptionValue> = {
-  id: TValue
-  label: string
-  multiple: boolean
-  disabled: boolean
-  matching: boolean
-}
+export type FormOptionCollectionItemProperties<TCustomProperties extends CollectionItemProperties, TValue> = {
+  value: ComputedRef<TValue>
+  label: ComputedRef<string>
+  selectedLabel: ComputedRef<string | undefined>
+  disabled: ComputedRef<boolean>
+  matching: ComputedRef<boolean>
+} & TCustomProperties
 
 export type FormOption<
-  TSource = unknown,
-  TValue extends FormOptionValue = FormOptionValue,
-  TProperties extends CollectionConfigProperties = CollectionConfigProperties,
-> = CollectionItem<TSource, 'active' | 'selected', TProperties & FormOptionProperties<TValue>>
-
-export type UseFormSelectReturn<
-  TSource,
-  TValue extends FormOptionValue,
-  TProperties extends CollectionConfigProperties,
-> = {
-  searchTerm: WritableComputedRef<string>
-  allOptions: ComputedRef<FormOption<TSource, TValue, TProperties>[]>
-  options: ComputedRef<FormOption<TSource, TValue, TProperties>[]>
-  selectedOptions: ComputedRef<FormOption<TSource, TValue, TProperties>[]>
-  selectedValues: ComputedRef<TValue[]>
-  selectedLabel: ComputedRef<string>
-}
+  TCustomProperties extends CollectionItemProperties = CollectionItemProperties,
+  TSource = any,
+  TValue = any,
+> = CollectionItem<TSource, 'selected' | 'active', FormOptionCollectionItemProperties<TCustomProperties, TValue>>
 
 export type FormOptionIndex =
   | number
@@ -51,6 +44,16 @@ export type FormOptionIndex =
   | 'last'
   | 'selected'
 
+export type FormSelectController = Reactive<{
+  isDisabled: ComputedRef<boolean>
+  isMultiple: ComputedRef<boolean>
+  isNavigatingWithKeyboard: Ref<boolean>
+  closeDropdown(keepFocus: boolean): void
+  focusSearchOrTrigger(): void
+}>
+
+export const IK_FORM_SELECT_CONTROLLER = Symbol('IK_FORM_SELECT_CONTROLLER') as InjectionKey<FormSelectController>
+
 export enum FORM_SELECT_HANDLED_KEY {
   DOWN = 'ArrowDown',
   UP = 'ArrowUp',
@@ -66,10 +69,55 @@ export enum FORM_SELECT_HANDLED_KEY {
   PAGE_UP = 'PageUp',
 }
 
-export type FormSelectController = Reactive<{
-  isNavigatingWithKeyboard: boolean
-  closeDropdown(keepFocus: boolean): void
-  focusSearchOrTrigger(): void
-}>
+export type FormSelect<
+  TCustomProperties extends CollectionItemProperties = CollectionItemProperties,
+  TSource = unknown,
+  TValue = unknown,
+  TMultiple extends boolean = boolean,
+  TFormOption extends FormOption<TCustomProperties, TSource, TValue> = FormOption<TCustomProperties, TSource, TValue>,
+> = {
+  isMultiple: ComputedRef<TMultiple>
+  isDisabled: ComputedRef<boolean>
+  isRequired: ComputedRef<boolean>
+  isSearchable: ComputedRef<boolean>
+  isLoading: ComputedRef<boolean>
+  placeholder: ComputedRef<string>
+  searchPlaceholder: ComputedRef<string>
+  searchTerm: Ref<string>
+  allOptions: ComputedRef<TFormOption[]>
+  options: ComputedRef<TFormOption[]>
+  selectedLabel: ComputedRef<string>
+} & (TMultiple extends true
+  ? {
+      selectedValues: ComputedRef<UnwrapRef<TValue>[]>
+      selectedOptions: ComputedRef<TFormOption[]>
+    }
+  : {
+      selectedValue: ComputedRef<UnwrapRef<TValue>>
+      selectedOption: ComputedRef<TFormOption>
+    })
 
-export const IK_FORM_SELECT_CONTROLLER = Symbol('IK_FORM_SELECT_CONTROLLER') as InjectionKey<FormSelectController>
+export type UseFormSelectReturn<
+  TCustomProperties extends CollectionItemProperties,
+  TSource,
+  TValue,
+  TMultiple extends boolean,
+  $TSelect extends FormSelect<TCustomProperties, TSource, TValue, TMultiple> = FormSelect<
+    TCustomProperties,
+    TSource,
+    TValue,
+    TMultiple
+  >,
+> = $TSelect & {
+  id: FormSelectId<TCustomProperties, TSource, TValue, TMultiple>
+}
+
+export type GetOptionValue<TSource, TCustomProperties extends CollectionItemProperties> =
+  | undefined
+  | keyof TSource
+  | ((source: TSource, properties: TCustomProperties) => unknown)
+
+export type GetOptionLabel<TSource, TCustomProperties extends CollectionItemProperties> =
+  | undefined
+  | KeyOfByValue<TSource, string>
+  | ((source: TSource, properties: TCustomProperties) => string)

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

@@ -1,6 +1,6 @@
-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'
+import { type FormOption, IK_FORM_SELECT_CONTROLLER } from './types.ts'
 
 export function useFormOptionController<TOption extends FormOption>(_option: MaybeRefOrGetter<TOption>) {
   const controller = inject(IK_FORM_SELECT_CONTROLLER)
@@ -21,13 +21,17 @@ export function useFormOptionController<TOption extends FormOption>(_option: May
   )
 
   useEventListener(elementRef, 'click', event => {
+    if (controller.isDisabled) {
+      return
+    }
+
     event.preventDefault()
 
     if (option.value.properties.disabled) {
       return
     }
 
-    if (option.value.properties.multiple) {
+    if (controller.isMultiple) {
       option.value.toggleFlag('selected')
       controller.focusSearchOrTrigger()
     } else {
@@ -37,7 +41,7 @@ export function useFormOptionController<TOption extends FormOption>(_option: May
   })
 
   useEventListener(elementRef, 'mouseenter', () => {
-    if (option.value.properties.disabled || controller.isNavigatingWithKeyboard) {
+    if (controller.isDisabled || option.value.properties.disabled || controller.isNavigatingWithKeyboard) {
       return
     }
 

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

@@ -1,20 +1,13 @@
-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 { autoUpdate, flip, type MaybeElement, shift, size, 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'
+import { computed, provide, reactive, ref, watch } from 'vue'
+import { type FormOptionIndex, type FormSelect, IK_FORM_SELECT_CONTROLLER } from './types.ts'
+import { useFormSelectKeyboardNavigation } from './use-form-select-keyboard-navigation.ts'
 
-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))
+export function useFormSelectController(select: FormSelect) {
+  const activeOption = computed(() => select.options.value.find(option => option.flags.active))
 
   const isOpen = ref(false)
 
@@ -36,7 +29,7 @@ export function useFormSelectController<TOption extends FormOption>(config: {
 
   const { isNavigatingWithKeyboard, stopKeyboardNavigation } = useFormSelectKeyboardNavigation({
     isActive,
-    isMultiple,
+    isMultiple: select.isMultiple,
     isOpen,
     onSelect: () => activeOption.value?.toggleFlag('selected', true),
     onToggle: () => activeOption.value?.toggleFlag('selected'),
@@ -56,13 +49,15 @@ export function useFormSelectController<TOption extends FormOption>(config: {
   /* DROPDOWN PLACEMENT */
 
   const { floatingStyles } = useFloating(triggerRef, dropdownRef, {
+    whileElementsMounted: autoUpdate,
+    middleware: [shift(), flip(), size()],
     placement: 'bottom-start',
     open: isOpen,
   })
 
   /* SEARCH */
 
-  watch(config.searchTerm, () => stopKeyboardNavigation())
+  watch(select.searchTerm, () => stopKeyboardNavigation())
 
   const searchRef = ref<MaybeElement<HTMLElement> & { focus?: () => void }>()
 
@@ -78,13 +73,17 @@ export function useFormSelectController<TOption extends FormOption>(config: {
 
   whenever(isOpen, () => focusSearch(), { flush: 'post' })
 
-  const currentIndex = computed(() => options.value.findIndex(option => option.flags.active))
+  const currentIndex = computed(() => select.options.value.findIndex(option => option.flags.active))
 
-  whenever(options, () => moveToOptionIndex('first'), { flush: 'post' })
+  whenever(select.options, () => moveToOptionIndex('first'), { flush: 'post' })
 
   ifElse(isOpen, () => moveToOptionIndex('selected'), clear, { flush: 'post' })
 
   function openDropdown() {
+    if (select.isDisabled.value) {
+      return
+    }
+
     if (!isOpen.value) {
       isOpen.value = true
     }
@@ -103,16 +102,14 @@ export function useFormSelectController<TOption extends FormOption>(config: {
   }
 
   function clear() {
-    if (config.searchTerm.value !== undefined) {
-      config.searchTerm.value = ''
-    }
+    select.searchTerm.value = ''
   }
 
   const boundaryIndexes = computed(() => {
     let firstIndex: number | undefined
     let lastIndex: number | undefined
 
-    options.value.forEach((option, index) => {
+    select.options.value.forEach((option, index) => {
       if (option.properties.disabled) {
         return
       }
@@ -141,15 +138,15 @@ export function useFormSelectController<TOption extends FormOption>(config: {
       case 'next':
         return currentIndex.value + 1
       case 'previous-page':
-        return currentIndex.value - 7 // TODO: Better handle page size.
+        return currentIndex.value - 7 // TODO: Handle page size in a better way
       case 'next-page':
-        return currentIndex.value + 7 // TODO: Better handle page size.
+        return currentIndex.value + 7 // TODO: Handle page size in a better way
       case 'first':
         return 0
       case 'last':
-        return options.value.length - 1
+        return select.options.value.length - 1
       case 'selected':
-        return options.value.findIndex(option => option.flags.selected)
+        return select.options.value.findIndex(option => option.flags.selected)
       default:
         return index
     }
@@ -163,7 +160,15 @@ export function useFormSelectController<TOption extends FormOption>(config: {
 
     const index = clamp(parseIndex(_index), boundaryIndexes.value.first, boundaryIndexes.value.last)
 
-    options.value[getClosestEnabledIndex(index)]?.toggleFlag('active', true)
+    const closestIndex = getClosestEnabledIndex(index)
+
+    if (closestIndex === undefined) {
+      activeOption.value?.toggleFlag('active', false)
+
+      return
+    }
+
+    select.options.value[closestIndex]?.toggleFlag('active', true)
   }
 
   function getClosestEnabledIndex(expectedIndex: number) {
@@ -171,10 +176,14 @@ export function useFormSelectController<TOption extends FormOption>(config: {
 
     const direction = expectedIndex < currentIndex.value ? -1 : 1
 
-    while (options.value[index]?.properties.disabled) {
+    while (select.options.value[index]?.properties.disabled) {
       index += direction
     }
 
+    if (index > (boundaryIndexes.value?.last ?? -1)) {
+      return undefined
+    }
+
     return index
   }
 
@@ -187,6 +196,8 @@ export function useFormSelectController<TOption extends FormOption>(config: {
   provide(
     IK_FORM_SELECT_CONTROLLER,
     reactive({
+      isDisabled: select.isDisabled,
+      isMultiple: select.isMultiple,
       isNavigatingWithKeyboard,
       focusSearchOrTrigger,
       closeDropdown,

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

@@ -1,7 +1,7 @@
-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'
+import { FORM_SELECT_HANDLED_KEY, type FormOptionIndex } from './types.ts'
 
 export function useFormSelectKeyboardNavigation({
   isActive,