@xen-orchestra/web-core 0.43.0 → 0.44.0

package/lib/packages/collection/use-collection.ts

@@ -27,7 +27,7 @@ export function useCollection<
   config?: {
     itemId?: TGetId | ((source: TSource) => CollectionItemId)
     flags?: CollectionConfigFlags<TFlag>
-    properties?: (source: TSource) => TProperties
+    properties?: (source: TSource, index: number) => TProperties
   }
 ): Collection<TSource, TFlag, TProperties, $TId>
 
@@ -44,7 +44,7 @@ export function useCollection<
   config?: {
     itemId?: TGetId | ((source: TSource) => CollectionItemId)
     flags?: CollectionConfigFlags<TFlag>
-    properties?: (source: TSource) => TProperties
+    properties?: (source: TSource, index: number) => TProperties
   }
 ): Collection<TSource, TFlag, TProperties, $TId>
 
@@ -61,7 +61,7 @@ export function useCollection<
   config: {
     itemId: TGetId | ((source: TSource) => CollectionItemId)
     flags?: CollectionConfigFlags<TFlag>
-    properties?: (source: TSource) => TProperties
+    properties?: (source: TSource, index: number) => TProperties
   }
 ): Collection<TSource, TFlag, TProperties, $TId>
 
@@ -78,7 +78,7 @@ export function useCollection<
   config?: {
     itemId?: TGetId
     flags?: CollectionConfigFlags<TFlag>
-    properties?: (source: TSource) => TProperties
+    properties?: (source: TSource, index: number) => TProperties
   }
 ): Collection<TSource, TFlag, TProperties, $TId> {
   const flagRegistry = useFlagRegistry<TFlag, $TId>(config?.flags)
@@ -86,9 +86,9 @@ export function useCollection<
   const sources = toComputed(_sources)
 
   const items = computed(() =>
-    sources.value.map(source => {
+    sources.value.map((source, index) => {
       const id = guessItemId(source, config?.itemId) as $TId
-      const properties = config?.properties?.(source) ?? ({} as TProperties)
+      const properties = config?.properties?.(source, index) ?? ({} as TProperties)
 
       return createItem<TSource, TFlag, TProperties, $TId>(id, source, properties, flagRegistry)
     })

package/lib/packages/form-select/guess-value.ts

@@ -5,14 +5,15 @@ import type { GetOptionValue } from './types.ts'
 export function guessValue<TSource, TValue, TCustomProperties extends CollectionItemProperties>(
   source: TSource,
   customProperties: TCustomProperties,
-  getter: GetOptionValue<TSource, TCustomProperties>
+  getter: GetOptionValue<TSource, TCustomProperties>,
+  index: number
 ): TValue {
   if (getter === undefined) {
     return source as unknown as TValue
   }
 
   if (typeof getter === 'function') {
-    return getter(source, customProperties) as TValue
+    return getter(source, customProperties, index) as TValue
   }
 
   if (hasObjectProperty(source, getter)) {

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

@@ -118,7 +118,7 @@ export type UseFormSelectReturn<
 export type GetOptionValue<TSource, TCustomProperties extends CollectionItemProperties> =
   | undefined
   | keyof TSource
-  | ((source: TSource, properties: TCustomProperties) => unknown)
+  | ((source: TSource, properties: TCustomProperties, index: number) => unknown)
 
 export type GetOptionLabel<TSource, TCustomProperties extends CollectionItemProperties> =
   | undefined

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

@@ -50,7 +50,15 @@ export function useFormSelectController(select: FormSelect) {
 
   const { floatingStyles } = useFloating(triggerRef, dropdownRef, {
     whileElementsMounted: autoUpdate,
-    middleware: [shift(), flip(), size()],
+    middleware: [
+      shift(),
+      flip(),
+      size({
+        apply: ({ availableHeight, elements }) => {
+          elements.floating.style.maxHeight = `${Math.min(500, availableHeight)}px`
+        },
+      }),
+    ],
     placement: 'bottom-start',
     open: isOpen,
     strategy: 'fixed',

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

@@ -52,7 +52,7 @@ export function useFormSelect<
     }>
     option?: {
       id?: GetItemId<TSource>
-      value?: TGetValue | ((source: TSource, properties: TCustomProperties) => $TValue)
+      value?: TGetValue | ((source: TSource, properties: TCustomProperties, index: number) => $TValue)
       properties?: (source: TSource) => TCustomProperties
       label?: GetOptionLabel<TSource, TCustomProperties>
       selectedLabel?: (source: TSource, properties: TCustomProperties) => string
@@ -91,7 +91,7 @@ export function useFormSelect<
     }>
     option?: {
       id?: GetItemId<TSource>
-      value?: TGetValue | ((source: TSource, properties: TCustomProperties) => $TValue)
+      value?: TGetValue | ((source: TSource, properties: TCustomProperties, index: number) => $TValue)
       properties?: (source: TSource) => TCustomProperties
       label?: GetOptionLabel<TSource, TCustomProperties>
       selectedLabel?: (source: TSource, properties: TCustomProperties) => string
@@ -130,7 +130,7 @@ export function useFormSelect<
     }>
     option: {
       id?: GetItemId<TSource>
-      value?: TGetValue | ((source: TSource, properties: TCustomProperties) => $TValue)
+      value?: TGetValue | ((source: TSource, properties: TCustomProperties, index: number) => $TValue)
       properties?: (source: TSource) => TCustomProperties
       label: GetOptionLabel<TSource, TCustomProperties>
       selectedLabel?: (source: TSource, properties: TCustomProperties) => string
@@ -169,7 +169,7 @@ export function useFormSelect<
     }>
     option: {
       id: GetItemId<TSource>
-      value?: TGetValue | ((source: TSource, properties: TCustomProperties) => $TValue)
+      value?: TGetValue | ((source: TSource, properties: TCustomProperties, index: number) => $TValue)
       properties?: (source: TSource) => TCustomProperties
       label?: GetOptionLabel<TSource, TCustomProperties>
       selectedLabel?: (source: TSource, properties: TCustomProperties) => string
@@ -208,7 +208,7 @@ export function useFormSelect<
     }>
     option: {
       id: GetItemId<TSource>
-      value?: TGetValue | ((source: TSource, properties: TCustomProperties) => $TValue)
+      value?: TGetValue | ((source: TSource, properties: TCustomProperties, index: number) => $TValue)
       properties?: (source: TSource) => TCustomProperties
       label: GetOptionLabel<TSource, TCustomProperties>
       selectedLabel?: (source: TSource, properties: TCustomProperties) => string
@@ -289,7 +289,7 @@ export function useFormSelect<
       active: { multiple: false },
       selected: { multiple: isMultiple },
     },
-    properties: (source): FormOptionCollectionItemProperties<TCustomProperties, $TValue> => {
+    properties: (source, index): FormOptionCollectionItemProperties<TCustomProperties, $TValue> => {
       if (source === EMPTY_OPTION) {
         const emptyOption = toValue(config?.emptyOption)
 
@@ -305,7 +305,7 @@ export function useFormSelect<
 
       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 value = computed(() => guessValue(source, customProperties, config?.option?.value, index) 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))
@@ -335,7 +335,7 @@ export function useFormSelect<
 
   const { items: options } = useSubset(option => option.properties.matching)
 
-  const { items: selectedOptions, toggleAll: toggleSelectAll } = useFlag('selected')
+  const { items: selectedOptions } = useFlag('selected')
 
   const selectedOption = computed(() => selectedOptions.value[0])
 
@@ -357,18 +357,18 @@ export function useFormSelect<
     watch(
       model,
       modelValue => {
-        toggleSelectAll(false)
-
         if (isMultiple.value) {
           allOptions.value.forEach(option => {
             if ((modelValue as $TValue[]).includes(toRaw(option.properties.value) as $TValue)) {
               option.toggleFlag('selected', true)
+            } else {
+              option.toggleFlag('selected', false)
             }
           })
         } else {
-          allOptions.value
-            .find(option => toRaw(option.properties.value) === toRaw(modelValue))
-            ?.toggleFlag('selected', true)
+          allOptions.value.forEach(option => {
+            option.toggleFlag('selected', toRaw(option.properties.value) === toRaw(modelValue))
+          })
         }
       },
       { immediate: true }
@@ -379,11 +379,11 @@ export function useFormSelect<
       newValues => {
         if (isMultiple.value) {
           model.value = newValues as TMultiple extends true ? $TValue[] : $TValue
-        } else {
+        } else if (newValues.length > 0) {
           model.value = newValues[0] as TMultiple extends true ? $TValue[] : $TValue
         }
       },
-      { deep: 1 }
+      { deep: 1, flush: 'post' }
     )
   }
 

package/lib/packages/icon/DisplayIconSingle.vue

@@ -1,5 +1,11 @@
 <template>
-  <svg v-if="icon.paths.length > 0" :viewBox="icon.viewBox" class="display-icon-single" v-bind="icon.bindings">
+  <svg
+    v-if="icon.paths.length > 0"
+    :viewBox="icon.viewBox"
+    class="display-icon-single"
+    :class="spinClass"
+    v-bind="icon.bindings"
+  >
     <path
       v-for="(path, index) of icon.paths"
       :key="index"
@@ -13,11 +19,16 @@
 
 <script lang="ts" setup>
 import type { IconSingle } from './types.ts'
+import { computed } from 'vue'
 
-defineProps<{
+const { icon } = defineProps<{
   icon: IconSingle
   stroke?: string
 }>()
+
+const spinClass = computed(() => {
+  return icon.bindings.style?.['--spin-duration'] ? 'spinning' : undefined
+})
 </script>
 
 <style lang="postcss" scoped>
@@ -28,8 +39,24 @@ defineProps<{
   grid-row: 1;
   grid-column: 1;
 
+  &.spinning {
+    animation-name: spin;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+    animation-duration: var(--spin-duration, 2s);
+  }
+
   .icon-path {
     fill: currentColor;
   }
 }
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
 </style>

package/lib/packages/icon/create-icon-bindings.ts

@@ -16,12 +16,15 @@ export function createIconBindings(transforms: IconTransforms): IconBindings {
 
   const shouldScale = scaleX !== 1 || scaleY !== 1
 
+  const spinDuration = typeof transforms.spin === 'number' ? transforms.spin : transforms.spin === true ? 2 : 0
+
   return {
     style: {
       color: transforms.color,
       translate: shouldTranslate ? `${(translateX / 16) * 100}% ${(translateY / 16) * 100}%` : undefined,
       rotate: transforms.rotate ? `${transforms.rotate}deg` : undefined,
       scale: shouldScale ? `${scaleX} ${scaleY}` : undefined,
+      '--spin-duration': spinDuration ? `${spinDuration}s` : undefined,
     },
   }
 }

package/lib/packages/icon/types.ts

@@ -9,6 +9,7 @@ export type IconTransforms = {
   size?: number | [number, number]
   rotate?: number
   flip?: 'horizontal' | 'vertical' | 'both'
+  spin?: boolean | number
   color?: string
 }
 
@@ -24,6 +25,7 @@ export type IconBindings = {
     rotate?: string
     translate?: string
     scale?: string
+    '--spin-duration'?: string
   }
 }
 

package/lib/packages/query-builder/filter/convert-filter-to-group.ts

@@ -0,0 +1,20 @@
+import { createEmptyFilter } from '@core/packages/query-builder/filter/create-empty-filter.ts'
+import { createQueryBuilderGroup } from '@core/packages/query-builder/group/create-query-builder-group.ts'
+import type {
+  GroupOperator,
+  QueryBuilderFilter,
+  QueryBuilderGroup,
+  QueryBuilderSchema,
+} from '@core/packages/query-builder/types.ts'
+
+export function convertFilterToGroup(
+  filter: QueryBuilderFilter,
+  groupOperator: GroupOperator,
+  schema: QueryBuilderSchema
+): QueryBuilderGroup {
+  return createQueryBuilderGroup({
+    operator: groupOperator,
+    children: [filter, createEmptyFilter(schema)],
+    schema,
+  })
+}

package/lib/packages/query-builder/filter/create-empty-filter.ts

@@ -0,0 +1,11 @@
+import { createQueryBuilderFilter } from '@core/packages/query-builder/filter/create-query-builder-filter.ts'
+import type { QueryBuilderFilter, QueryBuilderSchema } from '@core/packages/query-builder/types.ts'
+
+export function createEmptyFilter(schema: QueryBuilderSchema): QueryBuilderFilter {
+  return createQueryBuilderFilter({
+    property: '',
+    operator: 'contains',
+    value: '',
+    schema,
+  })
+}

package/lib/packages/query-builder/filter/create-query-builder-filter.ts

@@ -0,0 +1,73 @@
+import { useFilterOperator } from '@core/packages/query-builder/filter/use-filter-operator.ts'
+import { useFilterProperty } from '@core/packages/query-builder/filter/use-filter-property.ts'
+import { useFilterValue } from '@core/packages/query-builder/filter/use-filter-value.ts'
+import { useRawFilter } from '@core/packages/query-builder/filter/use-raw-filter.ts'
+import type { PropertyOperator, QueryBuilderConfig, QueryBuilderFilter } from '@core/packages/query-builder/types.ts'
+import { logicAnd } from '@vueuse/math'
+import { computed, reactive, watch } from 'vue'
+
+let nextId = 1
+
+export function createQueryBuilderFilter(config: QueryBuilderConfig): QueryBuilderFilter {
+  const id = `filter-${nextId++}`
+
+  const { property, isPropertyValid, propertyOptions, currentPropertySchema } = useFilterProperty(
+    config.schema,
+    config.property
+  )
+
+  const { operator, currentOperatorSchema, isOperatorValid, operatorsSchema, operatorOptions } = useFilterOperator(
+    currentPropertySchema,
+    config.operator
+  )
+
+  const { value, isValueValid, valuesSchema, valueOptions } = useFilterValue(currentOperatorSchema, config.value)
+
+  const isValid = logicAnd(isPropertyValid, isOperatorValid, isValueValid)
+
+  function checkValue() {
+    const values = operatorsSchema.value[operator.value].values
+
+    if (values && values[value.value] === undefined) {
+      value.value = Object.keys(values)[0]
+    }
+  }
+
+  watch(operatorsSchema, () => {
+    if (operatorsSchema.value !== undefined && operatorsSchema.value[operator.value] === undefined) {
+      operator.value = Object.keys(operatorsSchema.value)[0] as PropertyOperator
+    } else {
+      checkValue()
+    }
+  })
+
+  watch(operator, () => checkValue())
+
+  const valueType = computed(() => {
+    if (currentOperatorSchema.value?.expectValue === false) {
+      return 'none'
+    }
+
+    if (valuesSchema.value !== undefined) {
+      return 'select'
+    }
+
+    return 'input'
+  })
+
+  const rawFilter = useRawFilter(property, operator, value)
+
+  return reactive({
+    id,
+    property,
+    operator,
+    value,
+    isGroup: false,
+    rawFilter,
+    propertyOptions,
+    operatorOptions,
+    valueOptions,
+    isValid,
+    valueType,
+  })
+}

package/lib/packages/query-builder/filter/duplicate-filter.ts

@@ -0,0 +1,11 @@
+import { createQueryBuilderFilter } from '@core/packages/query-builder/filter/create-query-builder-filter.ts'
+import type { QueryBuilderFilter, QueryBuilderSchema } from '@core/packages/query-builder/types.ts'
+
+export function duplicateFilter(filter: QueryBuilderFilter, schema: QueryBuilderSchema) {
+  return createQueryBuilderFilter({
+    property: filter.property!,
+    operator: filter.operator!,
+    value: filter.value,
+    schema,
+  })
+}

package/lib/packages/query-builder/filter/is-filter-expression.ts

@@ -0,0 +1,26 @@
+import { parse } from 'complex-matcher'
+import type { Property as PropertyNode } from 'complex-matcher'
+
+/**
+ * Checks if a value looks like a filter expression (e.g., a property path like "boot:firmware:uefi")
+ * rather than a literal string to match.
+ *
+ * Returns true if:
+ * - The value can be parsed by complex-matcher
+ * - The parsed result is a PropertyNode (indicating a property path)
+ * - Contains at least one colon suggesting property nesting
+ */
+export function isFilterExpression(value: string): boolean {
+  if (!value.includes(':')) {
+    return false
+  }
+
+  try {
+    const parsed = parse(value)
+    // Check if it parses as a PropertyNode, which indicates it's a property path
+    // PropertyNode instances have a 'name' property and potentially a 'child'
+    return parsed != null && 'name' in parsed && typeof (parsed as PropertyNode).name === 'string'
+  } catch {
+    return false
+  }
+}

package/lib/packages/query-builder/filter/normalize-boolean-expression.ts

@@ -0,0 +1,63 @@
+import { parse, Property as PropertyNode, StringNode, NumberOrStringNode, type Node } from 'complex-matcher'
+
+interface PropertyPathResult {
+  propertyPath: string
+  terminalValue: string | undefined
+}
+
+/**
+ * Extracts the property path and terminal value from a parsed Complex Matcher node.
+ * Traverses nested Property nodes to build the full path (e.g., "boot:firmware")
+ * and returns the terminal string value if present.
+ */
+function extractPropertyPathAndValue(node: Node): PropertyPathResult {
+  const propertyNames: string[] = []
+  let currentNode: Node = node
+
+  // Traverse nested Property nodes to accumulate the full path
+  while (currentNode instanceof PropertyNode) {
+    propertyNames.push(currentNode.name)
+    currentNode = currentNode.child
+  }
+
+  const propertyPath = propertyNames.join(':')
+
+  // Check for terminal string value (StringNode or NumberOrStringNode)
+  let terminalValue: string | undefined
+  if (currentNode instanceof StringNode || currentNode instanceof NumberOrStringNode) {
+    terminalValue = currentNode.value
+  }
+
+  return { propertyPath, terminalValue }
+}
+
+/**
+ * Normalizes a boolean filter expression to Complex Matcher boolean syntax.
+ * Converts "prop:true" to "prop?" and "prop:false" to "!prop?".
+ * Returns the original expression if it's not a boolean expression or if parsing fails.
+ */
+export function normalizeBooleanExpression(expression: string): string {
+  try {
+    const parsed = parse(expression)
+    const { propertyPath, terminalValue } = extractPropertyPathAndValue(parsed)
+
+    if (propertyPath === '' || terminalValue === undefined) {
+      return expression
+    }
+
+    const normalizedValue = terminalValue.trim().toLowerCase()
+
+    if (normalizedValue === 'true') {
+      return `${propertyPath}?`
+    }
+
+    if (normalizedValue === 'false') {
+      return `!${propertyPath}?`
+    }
+
+    return expression
+  } catch {
+    // If parsing fails, return the original expression
+    return expression
+  }
+}

package/lib/packages/query-builder/filter/parsers/parse-contains-value.ts

@@ -0,0 +1,5 @@
+import { StringNode } from 'complex-matcher'
+
+export function parseContainsValue(value: string = '') {
+  return new StringNode(value).toString()
+}

package/lib/packages/query-builder/filter/parsers/parse-ends-with-value.ts

@@ -0,0 +1,6 @@
+import { RegExpNode } from 'complex-matcher'
+import { escapeRegExp } from 'lodash-es'
+
+export function parseEndsWithValue(value: string = '') {
+  return new RegExpNode(escapeRegExp(value)).toString().replace(/^\/(.*)\/$/, '/$1$/i')
+}

package/lib/packages/query-builder/filter/parsers/parse-glob-value.ts

@@ -0,0 +1,5 @@
+import { GlobPattern as GlobPatternNode } from 'complex-matcher'
+
+export function parseGlobValue(value: string = '') {
+  return new GlobPatternNode(value).toString().replace(/\s+/g, '*')
+}

package/lib/packages/query-builder/filter/parsers/parse-is-value.ts

@@ -0,0 +1,10 @@
+import { RegExpNode } from 'complex-matcher'
+import { escapeRegExp } from 'lodash-es'
+
+export function parseIsValue(value: string = '') {
+  if (value.match(/^\d+$/)) {
+    return value
+  }
+
+  return new RegExpNode(escapeRegExp(value)).toString().replace(/^\/(.*)\/$/, '/^$1$/')
+}

package/lib/packages/query-builder/filter/parsers/parse-number-value.ts

@@ -0,0 +1,9 @@
+export function parseNumberValue(value: string = '') {
+  const number = parseFloat(value)
+
+  if (isNaN(number)) {
+    return ''
+  }
+
+  return number
+}

package/lib/packages/query-builder/filter/parsers/parse-regex-value.ts

@@ -0,0 +1,13 @@
+import { RegExpNode } from 'complex-matcher'
+
+export function parseRegexValue(value: string = '') {
+  const regexMatch = value.match(/^\/(.*)\/([gimsuy]*)$/)
+
+  if (regexMatch) {
+    const pattern = regexMatch[1]
+    const flags = regexMatch[2]
+    return new RegExpNode(pattern, flags).toString()
+  }
+
+  return new RegExpNode(value).toString()
+}

package/lib/packages/query-builder/filter/parsers/parse-starts-with-value.ts

@@ -0,0 +1,6 @@
+import { RegExpNode } from 'complex-matcher'
+import { escapeRegExp } from 'lodash-es'
+
+export function parseStartsWithValue(value: string = '') {
+  return new RegExpNode(escapeRegExp(value)).toString().replace(/^\/(.*)\/$/, '/^$1/i')
+}

package/lib/packages/query-builder/filter/render-filter.ts

@@ -0,0 +1,11 @@
+export function renderFilter(property: string, value: string, negate: boolean) {
+  if (value === '') {
+    return ''
+  }
+
+  const negateToken = negate ? '!' : ''
+
+  const joinToken = property === '' ? '' : ':'
+
+  return `${negateToken}${property}${joinToken}${value}`
+}

package/lib/packages/query-builder/filter/use-filter-operator.ts

@@ -0,0 +1,36 @@
+import type { OperatorSchema, PropertyOperator, PropertySchema } from '@core/packages/query-builder/types.ts'
+import { type ComputedRef, ref, computed } from 'vue'
+
+export function useFilterOperator(propertySchema: ComputedRef<PropertySchema>, initialValue: PropertyOperator) {
+  const operator = ref<PropertyOperator>(initialValue)
+
+  const operatorsSchema = computed(() => {
+    return propertySchema.value?.operators
+  })
+
+  const currentOperatorSchema = computed(() => {
+    if (operatorsSchema.value === undefined) {
+      return undefined
+    }
+
+    return operatorsSchema.value[operator.value]
+  })
+
+  const isOperatorValid = computed(() => currentOperatorSchema.value !== undefined)
+
+  const operatorOptions = computed((previousValue: OperatorSchema[] | undefined) => {
+    if (operatorsSchema.value !== undefined) {
+      return Object.values(operatorsSchema.value)
+    }
+
+    return previousValue ?? []
+  })
+
+  return {
+    operator,
+    operatorsSchema,
+    currentOperatorSchema,
+    isOperatorValid,
+    operatorOptions,
+  }
+}

package/lib/packages/query-builder/filter/use-filter-property.ts

@@ -0,0 +1,19 @@
+import type { QueryBuilderSchema } from '@core/packages/query-builder/types.ts'
+import { ref, computed } from 'vue'
+
+export function useFilterProperty(schema: QueryBuilderSchema, initialValue: string) {
+  const property = ref<string>(initialValue)
+
+  const currentPropertySchema = computed(() => schema[property.value])
+
+  const isPropertyValid = computed(() => currentPropertySchema.value !== undefined)
+
+  const propertyOptions = computed(() => Object.values(schema))
+
+  return {
+    property,
+    isPropertyValid,
+    propertyOptions,
+    currentPropertySchema,
+  }
+}