@xen-orchestra/web-core 0.20.1 → 0.21.0

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

@@ -1,193 +1,371 @@
-import { useCollection } from '@core/packages/collection'
+import {
+  type CollectionItemId,
+  type CollectionItemProperties,
+  type GetItemId,
+  guessItemId,
+  useCollection,
+} from '@core/packages/collection'
+import type { EmptyObject, MaybeArray } from '@core/types/utility.type.ts'
+import { toArray } from '@core/utils/to-array.utils.ts'
 import type {
-  FormOptionProperties,
-  FormOptionValue,
-  FormSelectBaseConfig,
-  FormSelectBaseProperties,
+  ExtractValue,
+  FormOptionCollectionItemProperties,
+  FormSelect,
+  FormSelectId,
+  GetOptionLabel,
+  GetOptionValue,
   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'
+} from './types.ts'
+import { computed, type ComputedRef, type MaybeRefOrGetter, provide, ref, type Ref, toValue, watch } from 'vue'
+import { guessLabel } from './guess-label.ts'
+import { guessValue } from './guess-value.ts'
+import { normalizeSearchTerm } from './normalize-search-term.ts'
 
-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>
+// Overload #1: Source is CollectionItemId
 
 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
-  },
+  TBaseSource extends CollectionItemId,
+  TAllowEmpty extends boolean = false,
+  TCustomProperties extends CollectionItemProperties = EmptyObject,
+  TGetValue extends GetOptionValue<$TSource, TCustomProperties> = undefined,
+  TMultiple extends boolean = false,
+  $TSource = TAllowEmpty extends true ? TBaseSource | undefined : TBaseSource,
+  $TValue = ExtractValue<$TSource, TGetValue>,
 >(
-  sources: MaybeRefOrGetter<TSource[]>,
-  config?: FormSelectBaseConfig & {
-    properties?: (source: TSource) => TProperties
+  sources: MaybeRefOrGetter<TBaseSource[]>,
+  config?: {
+    allowEmpty?: MaybeRefOrGetter<TAllowEmpty>
+    multiple?: MaybeRefOrGetter<TMultiple>
+    model?: Ref<unknown>
+    disabled?: MaybeRefOrGetter<boolean>
+    selectedLabel?: (count: number, labels: string[]) => string | undefined
+    placeholder?: MaybeRefOrGetter<string>
+    searchPlaceholder?: MaybeRefOrGetter<string>
+    loading?: MaybeRefOrGetter<boolean>
+    required?: MaybeRefOrGetter<boolean>
+    searchable?: MaybeRefOrGetter<boolean>
+    option?: {
+      id?: GetItemId<TBaseSource>
+      value?: TGetValue | ((source: $TSource, properties: TCustomProperties) => $TValue)
+      properties?: (source: $TSource) => TCustomProperties
+      label?: GetOptionLabel<$TSource, TCustomProperties>
+      selectedLabel?: (source: $TSource, properties: TCustomProperties) => string
+      disabled?: (source: $TSource, properties: TCustomProperties) => boolean
+      searchableTerm?: (source: $TSource, properties: TCustomProperties) => MaybeArray<string>
+    }
   }
-): UseFormSelectReturn<TSource, TValue, TProperties>
+): UseFormSelectReturn<TCustomProperties, $TSource, $TValue, TMultiple>
+
+// Overload #2: Source is an object with id and label
 
 export function useFormSelect<
-  TSource extends { value: FormOptionValue },
-  TValue extends FormOptionValue = TSource['value'],
-  TProperties extends FormSelectBaseProperties & {
-    value?: TValue
-    label: string
-  } = FormSelectBaseProperties & {
-    value?: TValue
-    label: string
-  },
+  TBaseSource extends { id: CollectionItemId; label: string },
+  TAllowEmpty extends boolean = false,
+  TCustomProperties extends CollectionItemProperties = EmptyObject,
+  TGetValue extends GetOptionValue<$TSource, TCustomProperties> = undefined,
+  TMultiple extends boolean = false,
+  $TSource = TAllowEmpty extends true ? TBaseSource | undefined : TBaseSource,
+  $TValue = ExtractValue<$TSource, TGetValue>,
 >(
-  sources: MaybeRefOrGetter<TSource[]>,
-  config: FormSelectBaseConfig & {
-    properties: (source: TSource) => TProperties
+  sources: MaybeRefOrGetter<TBaseSource[]>,
+  config?: {
+    allowEmpty?: MaybeRefOrGetter<TAllowEmpty>
+    multiple?: MaybeRefOrGetter<TMultiple>
+    model?: Ref<unknown>
+    disabled?: MaybeRefOrGetter<boolean>
+    selectedLabel?: (count: number, labels: string[]) => string | undefined
+    placeholder?: MaybeRefOrGetter<string>
+    searchPlaceholder?: MaybeRefOrGetter<string>
+    loading?: MaybeRefOrGetter<boolean>
+    required?: MaybeRefOrGetter<boolean>
+    searchable?: MaybeRefOrGetter<boolean>
+    option?: {
+      id?: GetItemId<TBaseSource>
+      value?: TGetValue | ((source: $TSource, properties: TCustomProperties) => $TValue)
+      properties?: (source: $TSource) => TCustomProperties
+      label?: GetOptionLabel<$TSource, TCustomProperties>
+      selectedLabel?: (source: $TSource, properties: TCustomProperties) => string
+      disabled?: (source: $TSource, properties: TCustomProperties) => boolean
+      searchableTerm?: (source: $TSource, properties: TCustomProperties) => MaybeArray<string>
+    }
   }
-): UseFormSelectReturn<TSource, TValue, TProperties>
+): UseFormSelectReturn<TCustomProperties, $TSource, $TValue, TMultiple>
+
+// Overload #3: Source is an object with id only
 
 export function useFormSelect<
-  TSource extends { id: FormOptionValue },
-  TValue extends FormOptionValue = TSource['id'],
-  TProperties extends FormSelectBaseProperties & {
-    value?: TValue
-    label: string
-  } = FormSelectBaseProperties & {
-    value?: TValue
-    label: string
-  },
+  TBaseSource extends { id: CollectionItemId },
+  TAllowEmpty extends boolean = false,
+  TCustomProperties extends CollectionItemProperties = EmptyObject,
+  TGetValue extends GetOptionValue<$TSource, TCustomProperties> = undefined,
+  TMultiple extends boolean = false,
+  $TSource = TAllowEmpty extends true ? TBaseSource | undefined : TBaseSource,
+  $TValue = ExtractValue<$TSource, TGetValue>,
 >(
-  sources: MaybeRefOrGetter<TSource[]>,
-  config: FormSelectBaseConfig & {
-    properties: (source: TSource) => TProperties
+  sources: MaybeRefOrGetter<TBaseSource[]>,
+  config: {
+    allowEmpty?: MaybeRefOrGetter<TAllowEmpty>
+    multiple?: MaybeRefOrGetter<TMultiple>
+    model?: Ref<unknown>
+    disabled?: MaybeRefOrGetter<boolean>
+    selectedLabel?: (count: number, labels: string[]) => string | undefined
+    placeholder?: MaybeRefOrGetter<string>
+    searchPlaceholder?: MaybeRefOrGetter<string>
+    loading?: MaybeRefOrGetter<boolean>
+    required?: MaybeRefOrGetter<boolean>
+    searchable?: MaybeRefOrGetter<boolean>
+    option: {
+      id?: GetItemId<TBaseSource>
+      value?: TGetValue | ((source: $TSource, properties: TCustomProperties) => $TValue)
+      properties?: (source: $TSource) => TCustomProperties
+      label: GetOptionLabel<$TSource, TCustomProperties>
+      selectedLabel?: (source: $TSource, properties: TCustomProperties) => string
+      disabled?: (source: $TSource, properties: TCustomProperties) => boolean
+      searchableTerm?: (source: $TSource, properties: TCustomProperties) => MaybeArray<string>
+    }
   }
-): UseFormSelectReturn<TSource, TValue, TProperties>
+): UseFormSelectReturn<TCustomProperties, $TSource, $TValue, TMultiple>
+
+// Overload #4: Source is an object with label only
 
 export function useFormSelect<
-  TSource extends { label: string },
-  TValue extends FormOptionValue,
-  TProperties extends FormSelectBaseProperties & {
-    value: TValue
-    label?: string
-  } = FormSelectBaseProperties & {
-    value: TValue
-    label?: string
-  },
+  TBaseSource extends { label: string },
+  TAllowEmpty extends boolean = false,
+  TCustomProperties extends CollectionItemProperties = EmptyObject,
+  TGetValue extends GetOptionValue<$TSource, TCustomProperties> = undefined,
+  TMultiple extends boolean = false,
+  $TSource = TAllowEmpty extends true ? TBaseSource | undefined : TBaseSource,
+  $TValue = ExtractValue<$TSource, TGetValue>,
 >(
-  sources: MaybeRefOrGetter<TSource[]>,
-  config: FormSelectBaseConfig & {
-    properties: (source: TSource) => TProperties
+  sources: MaybeRefOrGetter<TBaseSource[]>,
+  config: {
+    allowEmpty?: MaybeRefOrGetter<TAllowEmpty>
+    multiple?: MaybeRefOrGetter<TMultiple>
+    model?: Ref<unknown>
+    disabled?: MaybeRefOrGetter<boolean>
+    selectedLabel?: (count: number, labels: string[]) => string | undefined
+    placeholder?: MaybeRefOrGetter<string>
+    searchPlaceholder?: MaybeRefOrGetter<string>
+    loading?: MaybeRefOrGetter<boolean>
+    required?: MaybeRefOrGetter<boolean>
+    searchable?: MaybeRefOrGetter<boolean>
+    option: {
+      id: GetItemId<TBaseSource>
+      value?: TGetValue | ((source: $TSource, properties: TCustomProperties) => $TValue)
+      properties?: (source: $TSource) => TCustomProperties
+      label?: GetOptionLabel<$TSource, TCustomProperties>
+      selectedLabel?: (source: $TSource, properties: TCustomProperties) => string
+      disabled?: (source: $TSource, properties: TCustomProperties) => boolean
+      searchableTerm?: (source: $TSource, properties: TCustomProperties) => MaybeArray<string>
+    }
   }
-): UseFormSelectReturn<TSource, TValue, TProperties>
+): UseFormSelectReturn<TCustomProperties, $TSource, $TValue, TMultiple>
+
+// Overload #5: Any other case
 
 export function useFormSelect<
-  TSource,
-  TValue extends FormOptionValue,
-  TProperties extends FormSelectBaseProperties & {
-    value: TValue
-    label: string
-  } = FormSelectBaseProperties & {
-    value: TValue
-    label: string
-  },
+  TBaseSource,
+  TAllowEmpty extends boolean = false,
+  TCustomProperties extends CollectionItemProperties = EmptyObject,
+  TGetValue extends GetOptionValue<$TSource, TCustomProperties> = undefined,
+  TMultiple extends boolean = false,
+  $TSource = TAllowEmpty extends true ? TBaseSource | undefined : TBaseSource,
+  $TValue = ExtractValue<$TSource, TGetValue>,
 >(
-  sources: MaybeRefOrGetter<TSource[]>,
-  config: FormSelectBaseConfig & {
-    properties: (source: TSource) => TProperties
+  sources: MaybeRefOrGetter<TBaseSource[]>,
+  config: {
+    allowEmpty?: MaybeRefOrGetter<TAllowEmpty>
+    multiple?: MaybeRefOrGetter<TMultiple>
+    model?: Ref<unknown>
+    disabled?: MaybeRefOrGetter<boolean>
+    selectedLabel?: (count: number, labels: string[]) => string | undefined
+    placeholder?: MaybeRefOrGetter<string>
+    searchPlaceholder?: MaybeRefOrGetter<string>
+    loading?: MaybeRefOrGetter<boolean>
+    required?: MaybeRefOrGetter<boolean>
+    searchable?: MaybeRefOrGetter<boolean>
+    option: {
+      id: GetItemId<TBaseSource>
+      value?: TGetValue | ((source: $TSource, properties: TCustomProperties) => $TValue)
+      properties?: (source: $TSource) => TCustomProperties
+      label: GetOptionLabel<$TSource, TCustomProperties>
+      selectedLabel?: (source: $TSource, properties: TCustomProperties) => string
+      disabled?: (source: $TSource, properties: TCustomProperties) => boolean
+      searchableTerm?: (source: $TSource, properties: TCustomProperties) => MaybeArray<string>
+    }
   }
-): UseFormSelectReturn<TSource, TValue, TProperties>
+): UseFormSelectReturn<TCustomProperties, $TSource, $TValue, TMultiple>
+
+// Implementation
 
 export function useFormSelect<
-  TSource,
-  TProperties extends FormSelectBaseProperties & {
-    value?: FormOptionValue
-    label?: string
-  },
+  TBaseSource,
+  TAllowEmpty extends boolean = false,
+  TCustomProperties extends CollectionItemProperties = EmptyObject,
+  TGetValue extends GetOptionValue<$TSource, TCustomProperties> = undefined,
+  TMultiple extends boolean = false,
+  $TSource = TAllowEmpty extends true ? TBaseSource | undefined : TBaseSource,
+  $TValue = ExtractValue<$TSource, TGetValue>,
 >(
-  sources: MaybeRefOrGetter<TSource[]>,
-  config?: FormSelectBaseConfig & {
-    properties?: (source: TSource) => TProperties
+  baseSources: MaybeRefOrGetter<TBaseSource[]>,
+  config?: {
+    allowEmpty?: MaybeRefOrGetter<boolean>
+    multiple?: MaybeRefOrGetter<boolean>
+    model?: Ref<unknown>
+    disabled?: MaybeRefOrGetter<boolean>
+    selectedLabel?: (count: number, labels: string[]) => string | undefined
+    placeholder?: MaybeRefOrGetter<string>
+    searchPlaceholder?: MaybeRefOrGetter<string>
+    loading?: MaybeRefOrGetter<boolean>
+    required?: MaybeRefOrGetter<boolean>
+    searchable?: MaybeRefOrGetter<boolean>
+    option?: {
+      id?: GetItemId<TBaseSource>
+      value?: GetOptionValue<$TSource, TCustomProperties>
+      properties?: (source: $TSource) => TCustomProperties
+      label?: GetOptionLabel<$TSource, TCustomProperties>
+      selectedLabel?: (source: $TSource, properties: TCustomProperties) => string
+      disabled?: (source: $TSource, properties: TCustomProperties) => boolean
+      searchableTerm?: (source: $TSource, properties: TCustomProperties) => MaybeArray<string>
+    }
   }
-) {
-  const _searchTerm = ref('')
+): UseFormSelectReturn<TCustomProperties, $TSource, $TValue, TMultiple> {
+  const searchTerm = ref('')
 
-  const searchTerm = computed({
-    get: () => _searchTerm.value,
-    set: (value: string) => {
-      _searchTerm.value = value.toLowerCase().trim()
-    },
-  })
+  const normalizedSearchTerm = computed(() => normalizeSearchTerm(searchTerm))
+
+  const isMultiple = computed(() => toValue(config?.multiple) ?? false) as ComputedRef<TMultiple>
+
+  const isDisabled = computed(() => toValue(config?.disabled) ?? false)
+
+  const isLoading = computed(() => toValue(config?.loading) ?? false)
+
+  const isRequired = computed(() => toValue(config?.required) ?? false)
+
+  const placeholder = computed(() => toValue(config?.placeholder) ?? '')
+
+  const searchPlaceholder = computed(() => toValue(config?.searchPlaceholder) ?? '')
+
+  const isSearchable = computed(() => toValue(config?.searchable) ?? false)
+
+  const sources = computed(() =>
+    config?.allowEmpty ? [undefined, ...toValue(baseSources)] : toValue(baseSources)
+  ) as ComputedRef<$TSource[]>
 
   const {
     items: allOptions,
-    useFlag,
     useSubset,
+    useFlag,
   } = useCollection(sources, {
+    itemId: source =>
+      source === undefined ? '__EMPTY_OPTION__' : guessItemId(source as TBaseSource, config?.option?.id),
     flags: {
       active: { multiple: false },
-      selected: { multiple: config?.multiple ?? false },
+      selected: { multiple: isMultiple },
     },
-    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) ?? {}
+    properties: (source): FormOptionCollectionItemProperties<TCustomProperties, $TValue> => {
+      const customProperties = config?.option?.properties?.(source) ?? ({} as TCustomProperties)
+      const label = computed(() => guessLabel(source, customProperties, config?.option?.label))
+      const value = computed(() => guessValue(source, customProperties, config?.option?.value) as $TValue)
+      const disabled = computed(() => isDisabled.value || config?.option?.disabled?.(source, customProperties) === true)
+      const searchableTerm = computed(() => config?.option?.searchableTerm?.(source, customProperties))
+      const selectedLabel = computed(() => config?.option?.selectedLabel?.(source, customProperties))
+
+      const searchableTerms = computed(() =>
+        toArray(toValue(searchableTerm) ?? toValue(label)).map(term => normalizeSearchTerm(term))
+      )
 
       const matching = computed(() => {
-        if (!searchTerm.value) {
+        if (normalizedSearchTerm.value === '') {
           return true
         }
 
-        const searchableTerms = toArray(searchableTerm ?? label)
-
-        return searchableTerms.some(term => term.toLowerCase().includes(searchTerm.value))
+        return searchableTerms.value.some(term => term.includes(normalizedSearchTerm.value))
       })
 
-      return reactive({
-        id: value,
+      return {
+        value,
         label,
-        multiple: config?.multiple ?? false,
+        selectedLabel,
         disabled,
         matching,
-        ...extraProperties,
-      }) satisfies FormOptionProperties<FormOptionValue>
+        ...customProperties,
+      }
     },
   })
 
   const { items: options } = useSubset(option => option.properties.matching)
 
-  const { items: selectedOptions, ids: selectedValues } = useFlag('selected')
+  const { items: selectedOptions } = useFlag('selected')
 
-  const selectedLabels = computed(() => selectedOptions.value.map(option => option.properties.label))
+  const selectedOption = computed(() => selectedOptions.value[0])
+
+  const selectedValues = computed(() => selectedOptions.value.map(option => option.properties.value))
+
+  const selectedValue = computed(() => selectedValues.value[0])
+
+  const selectedLabels = computed(() =>
+    selectedOptions.value.map(option => option.properties.selectedLabel ?? option.properties.label)
+  )
 
   const selectedLabel = computed(
     () => config?.selectedLabel?.(selectedLabels.value.length, selectedLabels.value) ?? selectedLabels.value.join(', ')
   )
 
-  return {
+  const { model } = config ?? {}
+
+  if (model) {
+    watch(
+      model,
+      modelValue => {
+        if (isMultiple.value) {
+          allOptions.value.forEach(option => {
+            option.toggleFlag('selected', (modelValue as $TValue[]).includes(option.properties.value as $TValue))
+          })
+        } else {
+          allOptions.value.find(option => option.properties.value === modelValue)?.toggleFlag('selected', true)
+        }
+      },
+      { immediate: true }
+    )
+
+    watch(
+      selectedValues,
+      newValues => {
+        if (isMultiple.value) {
+          model.value = newValues as TMultiple extends true ? $TValue[] : $TValue
+        } else {
+          model.value = newValues[0] as TMultiple extends true ? $TValue[] : $TValue
+        }
+      },
+      { deep: 1 }
+    )
+  }
+
+  const select = {
+    isMultiple,
+    isDisabled,
+    isRequired,
+    isSearchable,
+    isLoading,
+    placeholder,
+    searchPlaceholder,
     searchTerm,
     allOptions,
     options,
-    selectedOptions,
+    selectedValue,
     selectedValues,
+    selectedOption,
+    selectedOptions,
     selectedLabel,
-  }
+  } satisfies FormSelect<TCustomProperties, any> as FormSelect<TCustomProperties, $TSource, $TValue, TMultiple>
+
+  const id = Symbol('useFormSelect ID') as FormSelectId<TCustomProperties, $TSource, $TValue, TMultiple>
+
+  provide(id, select)
+
+  return {
+    id,
+    ...select,
+  } satisfies UseFormSelectReturn<TCustomProperties, $TSource, $TValue, TMultiple>
 }

package/lib/packages/icon/DisplayIcon.vue

@@ -0,0 +1,25 @@
+<template>
+  <span class="display-icon-root">
+    <DisplayIconAny :icon />
+  </span>
+</template>
+
+<script lang="ts" setup>
+import DisplayIconAny from './DisplayIconAny.vue'
+import { type Icon } from './types.ts'
+
+defineProps<{
+  icon: Icon
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.display-icon-root {
+  display: inline-grid;
+  height: 1em;
+  width: 1em;
+  transform-origin: 50% 50%;
+  grid-template-rows: 1fr;
+  grid-template-columns: 1fr;
+}
+</style>

package/lib/packages/icon/DisplayIconAny.vue

@@ -0,0 +1,16 @@
+<template>
+  <DisplayIconStack v-if="isIconStack(icon)" :stack="icon" :stroke />
+  <DisplayIconSingle v-else :icon :stroke />
+</template>
+
+<script lang="ts" setup>
+import DisplayIconSingle from './DisplayIconSingle.vue'
+import DisplayIconStack from './DisplayIconStack.vue'
+import { isIconStack } from './is-icon-stack.ts'
+import { type Icon } from './types.ts'
+
+defineProps<{
+  icon: Icon
+  stroke?: string
+}>()
+</script>

package/lib/packages/icon/DisplayIconSingle.vue

@@ -0,0 +1,35 @@
+<template>
+  <svg v-if="icon.paths.length > 0" :viewBox="icon.viewBox" class="display-icon-single" v-bind="icon.bindings">
+    <path
+      v-for="(path, index) of icon.paths"
+      :key="index"
+      :d="path"
+      class="icon-path"
+      :stroke="stroke ?? icon.config.borderColor"
+      :stroke-width="stroke ? 64 : 32"
+    />
+  </svg>
+</template>
+
+<script lang="ts" setup>
+import type { IconSingle } from './types.ts'
+
+defineProps<{
+  icon: IconSingle
+  stroke?: string
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.display-icon-single {
+  height: 1em;
+  width: 1em;
+  overflow: visible;
+  grid-row: 1;
+  grid-column: 1;
+
+  .icon-path {
+    fill: currentColor;
+  }
+}
+</style>

package/lib/packages/icon/DisplayIconStack.vue

@@ -0,0 +1,34 @@
+<template>
+  <span v-bind="stack.bindings" class="display-icon-stack">
+    <DisplayIconAny
+      v-for="(icon, index) of stack.icons"
+      :key="index"
+      :icon
+      :stroke="stroke ?? stack.config.borderColor"
+    />
+    <DisplayIconAny v-for="(icon, index) of stack.icons" :key="index" :icon />
+  </span>
+</template>
+
+<script lang="ts" setup>
+import DisplayIconAny from '@core/packages/icon/DisplayIconAny.vue'
+import type { IconStack } from './types.ts'
+
+defineProps<{
+  stack: IconStack
+  stroke?: string
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.display-icon-stack {
+  height: 1em;
+  width: 1em;
+  overflow: visible;
+  grid-row: 1;
+  grid-column: 1;
+  display: inline-grid;
+  grid-template-rows: 1fr;
+  grid-template-columns: 1fr;
+}
+</style>