@xen-orchestra/web-core 0.43.0 → 0.45.0

package/lib/packages/query-builder/node/handle-string-or-number-node.ts

@@ -0,0 +1,48 @@
+import { createQueryBuilderFilter } from '@core/packages/query-builder/filter/create-query-builder-filter'
+import { isFilterExpression } from '@core/packages/query-builder/filter/is-filter-expression.ts'
+import { handleNode } from '@core/packages/query-builder/node/handle-node'
+import type { QueryBuilderSchema } from '@core/packages/query-builder/types.ts'
+import type { NumberOrStringNode, StringNode } from 'complex-matcher'
+import { parse } from 'complex-matcher'
+
+export function handleStringOrNumberNode({
+  property,
+  node,
+  negate,
+  schema,
+}: {
+  property: string
+  node: StringNode | NumberOrStringNode
+  negate: boolean
+  schema: QueryBuilderSchema
+}) {
+  // Special case: For "any property" filter (empty property), check if the string value
+  // is actually a filter expression (e.g., "boot:firmware:uefi") that should be parsed
+  // as a property path query instead of a literal string match
+  if (property === '' && isFilterExpression(node.value)) {
+    try {
+      const parsedExpression = parse(node.value)
+      // Recursively handle the parsed expression with appropriate negation
+      return handleNode({ node: parsedExpression, negate, schema })
+    } catch {
+      // If parsing fails, fall back to treating it as a literal string
+    }
+  }
+
+  // If the value is purely numeric and the property exists in the schema,
+  // check if it supports numeric operators (like greaterThan)
+  // If so, treat it as 'is' rather than 'contains' to preserve intent
+  const isNumericValue = /^\d+$/.test(node.value)
+  const propertySchema = schema[property]
+  const hasNumericOperators =
+    propertySchema && ('greaterThan' in propertySchema.operators || 'lessThan' in propertySchema.operators)
+
+  const shouldUseIsOperator = isNumericValue && hasNumericOperators
+
+  return createQueryBuilderFilter({
+    property,
+    operator: shouldUseIsOperator ? (negate ? 'isNot' : 'is') : negate ? 'doesNotContain' : 'contains',
+    value: node.value,
+    schema,
+  })
+}

package/lib/packages/query-builder/node/handle-truthy-property-node.ts

@@ -0,0 +1,42 @@
+import { createQueryBuilderFilter } from '@core/packages/query-builder/filter/create-query-builder-filter'
+import type { QueryBuilderSchema } from '@core/packages/query-builder/types.ts'
+import type { TruthyProperty } from 'complex-matcher'
+
+export function handleTruthyPropertyNode({
+  node,
+  negate,
+  schema,
+  propertyPrefix = '',
+}: {
+  node: TruthyProperty
+  negate: boolean
+  schema: QueryBuilderSchema
+  propertyPrefix?: string
+}) {
+  // Build the full property path including any prefix from parent Property nodes
+  const fullPropertyPath = propertyPrefix ? `${propertyPrefix}:${node.name}` : node.name
+
+  // Check if the full property path exists in the schema
+  const isPropertyInSchema = schema[fullPropertyPath] !== undefined
+
+  if (!isPropertyInSchema) {
+    // Convert to "any property" filter with the boolean expression as value
+    // prop? (truthy) -> any property contains prop:true
+    // !prop? (falsy) -> any property doesNotContain prop:true
+    const expressionValue = `${fullPropertyPath}:true`
+
+    return createQueryBuilderFilter({
+      property: '',
+      operator: negate ? 'doesNotContain' : 'contains',
+      value: expressionValue,
+      schema,
+    })
+  }
+
+  return createQueryBuilderFilter({
+    property: fullPropertyPath,
+    operator: negate ? 'isEmpty' : 'isNotEmpty',
+    value: '',
+    schema,
+  })
+}

package/lib/packages/query-builder/query-builder-error.ts

@@ -0,0 +1,7 @@
+export class QueryBuilderError extends Error {
+  constructor(message: string, data?: any) {
+    super()
+
+    console.warn('QueryBuilder:', message, data)
+  }
+}

package/lib/packages/query-builder/schema/parse-operators.ts

@@ -0,0 +1,28 @@
+import { parseValues } from '@core/packages/query-builder/schema/parse-values.ts'
+import type { OperatorSchema, OperatorsDefinition, PropertyOperator } from '@core/packages/query-builder/types.ts'
+
+export function parseOperators(operators: OperatorsDefinition): Record<string, OperatorSchema> {
+  return Object.fromEntries(
+    Object.keys(operators).flatMap(operator => {
+      const operatorConfig = operators[operator as PropertyOperator]
+
+      if (operatorConfig === undefined) {
+        return []
+      }
+
+      const { label, values, expectValue } = operatorConfig
+
+      return [
+        [
+          operator,
+          {
+            label,
+            operator: operator as PropertyOperator,
+            expectValue: expectValue !== false,
+            values: parseValues(values),
+          },
+        ],
+      ]
+    })
+  )
+}

package/lib/packages/query-builder/schema/parse-values.ts

@@ -0,0 +1,19 @@
+import type { ValueSchema } from '@core/packages/query-builder/types.ts'
+
+export function parseValues(values: Record<string, string> | undefined): Record<string, ValueSchema> | undefined {
+  if (values === undefined) {
+    return undefined
+  }
+
+  return Object.fromEntries(
+    Object.keys(values).flatMap(value => [
+      [
+        value,
+        {
+          label: values[value],
+          value,
+        },
+      ],
+    ])
+  )
+}

package/lib/packages/query-builder/schema/use-query-builder-schema.ts

@@ -0,0 +1,25 @@
+import { parseOperators } from '@core/packages/query-builder/schema/parse-operators.ts'
+import type { PropertyPath, QueryBuilderSchema, QueryBuilderSchemaInput } from '@core/packages/query-builder/types.ts'
+
+export function useQueryBuilderSchema<TSource>(schema: QueryBuilderSchemaInput<TSource>): QueryBuilderSchema {
+  return Object.fromEntries(
+    Object.keys(schema).flatMap(property => {
+      const config = schema[property as PropertyPath<TSource>]
+
+      if (config === undefined) {
+        return []
+      }
+
+      return [
+        [
+          property,
+          {
+            label: config.label,
+            property,
+            operators: parseOperators(config.operators),
+          },
+        ],
+      ]
+    })
+  )
+}

package/lib/packages/query-builder/types.ts

@@ -0,0 +1,119 @@
+import type { Reactive, Ref, ComputedRef } from 'vue'
+
+export type GroupOperator = 'and' | 'or'
+
+export type PropertyOperator =
+  | 'contains'
+  | 'doesNotContain'
+  | 'is'
+  | 'isNot'
+  | 'startsWith'
+  | 'doesNotStartWith'
+  | 'endsWith'
+  | 'doesNotEndWith'
+  | 'matchesRegex'
+  | 'doesNotMatchRegex'
+  | 'matchesGlob'
+  | 'doesNotMatchGlob'
+  | 'greaterThan'
+  | 'greaterThanOrEqual'
+  | 'lessThan'
+  | 'lessThanOrEqual'
+  | 'isEmpty'
+  | 'isNotEmpty'
+
+export type OperatorsDefinition = {
+  [K in PropertyOperator]?:
+    | {
+        label: string
+        values?: Record<string, string>
+        expectValue?: never
+      }
+    | {
+        label: string
+        values?: never
+        expectValue?: boolean
+      }
+}
+
+export type PropertyDefinition = {
+  label: string
+  operators: OperatorsDefinition
+}
+
+export type PropertyPath<T> = T extends string | number | boolean | Date | any[]
+  ? never
+  : {
+      [K in keyof T & string]: `${K}` | `${K}:${PropertyPath<T[K]>}`
+    }[keyof T & string]
+
+export type QueryBuilderSchemaInput<TSource> = {
+  '': PropertyDefinition
+} & {
+  [K in PropertyPath<TSource>]?: PropertyDefinition
+}
+
+export type ValueSchema = {
+  label: string
+  value: string
+}
+
+export type OperatorSchema = {
+  label: string
+  operator: PropertyOperator
+  expectValue: boolean
+  values: Record<string, ValueSchema> | undefined
+}
+
+export type PropertySchema = {
+  label: string
+  property: string
+  operators: Record<string, OperatorSchema>
+}
+
+export type QueryBuilderSchema = Record<string, PropertySchema>
+
+export type QueryBuilderGroup = Reactive<{
+  id: string
+  operator: Ref<GroupOperator>
+  children: Ref<QueryBuilderNode[]>
+  isGroup: true
+  rawFilter: ComputedRef<string>
+  addChildFilter: () => void
+  addChildGroup: () => void
+  duplicateChild: (childIndex: number) => void
+  removeChild: (index: number, keepChildren?: boolean) => void
+  wrapInGroup: () => void
+  convertChildToGroup: (childIndex: number) => void
+  schema: QueryBuilderSchema
+}>
+
+export type QueryBuilderFilter = Reactive<{
+  id: string
+  property: Ref<string | undefined>
+  operator: Ref<PropertyOperator | undefined>
+  value: Ref<any>
+  isGroup: false
+  rawFilter: ComputedRef<string>
+  propertyOptions: ComputedRef<PropertySchema[]>
+  operatorOptions: ComputedRef<OperatorSchema[]>
+  valueOptions: ComputedRef<ValueSchema[]>
+  isValid: ComputedRef<boolean>
+  valueType: ComputedRef<'input' | 'select' | 'none'>
+}>
+
+export type QueryBuilderNode = QueryBuilderGroup | QueryBuilderFilter
+
+export type UseQueryBuilderReturn = {
+  rootGroup: Ref<QueryBuilderGroup>
+  isUsable: ComputedRef<boolean>
+  updateFilter: () => void
+  resetFilter: () => void
+}
+
+export type QueryBuilderConfig = {
+  property: string
+  operator: PropertyOperator
+  value: string
+  schema: QueryBuilderSchema
+}

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

@@ -0,0 +1,39 @@
+import { toComputed } from '@core/utils/to-computed.util.ts'
+import { useRouteQuery } from '@vueuse/router'
+import { parse } from 'complex-matcher'
+import { computed, type ComputedRef, type MaybeRefOrGetter, type Ref } from 'vue'
+
+export type UseQueryBuilderFilterReturn<TSource> = {
+  items: ComputedRef<TSource[]>
+  filter: Ref<string>
+}
+
+export function useQueryBuilderFilter<TSource>(
+  id: string,
+  sourcesRaw: MaybeRefOrGetter<TSource[]>,
+  options?: { initialFilter?: string }
+): UseQueryBuilderFilterReturn<TSource> {
+  const filter = useRouteQuery(`qb.${id}`, options?.initialFilter ?? '')
+
+  const sources = toComputed(sourcesRaw)
+
+  const mainNode = computed(() => {
+    try {
+      return parse(filter.value)
+    } catch {
+      return undefined
+    }
+  })
+
+  const predicate = computed(() => {
+    if (mainNode.value === undefined) {
+      return undefined
+    }
+
+    return mainNode.value.createPredicate()
+  })
+
+  const items = computed(() => (predicate.value ? sources.value.filter(predicate.value) : sources.value))
+
+  return { items, filter }
+}

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

@@ -0,0 +1,52 @@
+import { buildRootGroup } from '@core/packages/query-builder/group/build-root-group'
+import { createQueryBuilderGroup } from '@core/packages/query-builder/group/create-query-builder-group'
+import { handleNode } from '@core/packages/query-builder/node/handle-node.ts'
+import type { QueryBuilderNode, QueryBuilderSchema, UseQueryBuilderReturn } from '@core/packages/query-builder/types.ts'
+import { toComputed } from '@core/utils/to-computed.util.ts'
+import { parse } from 'complex-matcher'
+
+import { computed, ref, watch, type MaybeRefOrGetter, type Ref } from 'vue'
+
+export function useQueryBuilder(
+  filter: Ref<string>,
+  schemaRaw: MaybeRefOrGetter<QueryBuilderSchema>
+): UseQueryBuilderReturn {
+  const rootNode = ref<QueryBuilderNode>()
+  const schema = toComputed(schemaRaw)
+
+  function generateRootNode() {
+    try {
+      const parsed = parse(filter.value)
+      rootNode.value = handleNode({ node: parsed, negate: false, schema: schema.value })
+    } catch {
+      return undefined
+    }
+  }
+
+  watch(filter, () => generateRootNode(), { immediate: true })
+
+  const isUsable = computed(() => rootNode.value !== undefined)
+
+  const rootGroup = computed(() => {
+    if (rootNode.value === undefined) {
+      return createQueryBuilderGroup({
+        operator: 'and',
+        children: [],
+        schema: schema.value,
+      })
+    }
+
+    return buildRootGroup(rootNode.value, schema.value)
+  })
+
+  function updateFilter() {
+    filter.value = rootGroup.value.rawFilter
+  }
+
+  return {
+    rootGroup,
+    updateFilter,
+    isUsable,
+    resetFilter: generateRootNode,
+  }
+}

package/lib/stores/panel.store.ts

@@ -8,5 +8,5 @@ export const usePanelStore = defineStore('panel', () => {
   const open = () => (isExpanded.value = true)
   const close = () => (isExpanded.value = false)
 
-  return { open, close, isExpanded: computed(() => !uiStore.isMobile || isExpanded.value) }
+  return { open, close, isExpanded: computed(() => !uiStore.isSmall || isExpanded.value) }
 })

package/lib/stores/sidebar.store.ts

@@ -37,7 +37,7 @@ export const useSidebarStore = defineStore('layout', () => {
     document.removeEventListener('mouseup', handleMouseUp)
   }
 
-  const cssWidth = computed(() => (uiStore.isMobile ? '100%' : `${width.value}px`))
+  const cssWidth = computed(() => (uiStore.isSmall ? '100%' : `${width.value}px`))
 
   const cssOffset = computed(() => (isExpanded.value ? 0 : `-${cssWidth.value}`))
 
@@ -52,14 +52,14 @@ export const useSidebarStore = defineStore('layout', () => {
 
   watch(
     () => ({
-      isMobile: uiStore.isMobile,
-      isDesktopLarge: uiStore.isDesktopLarge,
+      isSmall: uiStore.isSmall,
+      isLarge: uiStore.isLarge,
     }),
-    ({ isMobile, isDesktopLarge }) => {
-      if (isMobile) {
+    ({ isSmall, isLarge }) => {
+      if (isSmall) {
         desktopState = isExpanded.value
       } else {
-        isExpanded.value = isDesktopLarge ? true : desktopState
+        isExpanded.value = isLarge ? true : desktopState
       }
     },
     { immediate: true }

package/lib/stores/ui.store.ts

@@ -9,13 +9,15 @@ export const useUiStore = defineStore('ui', () => {
   const { store: colorMode } = useColorMode({ initialValue: 'auto' })
 
   const breakpoints = useBreakpoints({
-    desktop: 1024,
-    desktopLarge: 1440,
+    medium: 1024,
+    large: 1440,
   })
 
-  const isMobile = breakpoints.smaller('desktop')
-  const isDesktop = breakpoints.between('desktop', 'desktopLarge')
-  const isDesktopLarge = breakpoints.greater('desktopLarge')
+  const isSmall = breakpoints.smaller('medium')
+  const isSmallOrMedium = breakpoints.smallerOrEqual('medium')
+  const isMedium = breakpoints.between('medium', 'large')
+  const isMediumOrLarge = breakpoints.greaterOrEqual('medium')
+  const isLarge = breakpoints.greater('large')
 
   const router = useRouter()
   const route = useRoute()
@@ -30,9 +32,11 @@ export const useUiStore = defineStore('ui', () => {
   return {
     colorMode,
     currentHostOpaqueRef,
-    isMobile,
-    isDesktop,
-    isDesktopLarge,
+    isSmall,
+    isSmallOrMedium,
+    isMedium,
+    isMediumOrLarge,
+    isLarge,
     hasUi,
   }
 })

package/lib/tables/column-definitions/input-column.ts

@@ -16,7 +16,7 @@ export const useInputColumn = defineColumn((config?: HeaderConfig & InputConfig)
       config?.headerIcon ?? (config?.type === 'number' ? 'fa:hashtag' : 'fa:align-left'),
       config?.headerLabel
     ),
-  renderBody: (model: Ref<string | number>, inputProps?: { disabled?: boolean }) =>
+  renderBody: (model: Ref<string | number | undefined>, inputProps?: { disabled?: boolean }) =>
     renderBodyCell(() =>
       h(UiInput, {
         accent: 'brand',
@@ -24,7 +24,7 @@ export const useInputColumn = defineColumn((config?: HeaderConfig & InputConfig)
         type: toValue(config?.type),
         ...inputProps,
         modelValue: toValue(model),
-        'onUpdate:modelValue': (value: string | number) => {
+        'onUpdate:modelValue': (value: string | number | undefined) => {
           model.value = value
         },
       })

package/lib/utils/query-builder/use-boolean-schema.ts

@@ -0,0 +1,11 @@
+import type { PropertyDefinition } from '@core/packages/query-builder/types.ts'
+
+export function useBooleanSchema(label: string, values: { true: string; false: string }): PropertyDefinition {
+  return {
+    label,
+    operators: {
+      isEmpty: { label: values.false, expectValue: false },
+      isNotEmpty: { label: values.true, expectValue: false },
+    },
+  }
+}

package/lib/utils/query-builder/use-number-schema.ts

@@ -0,0 +1,20 @@
+import type { PropertyDefinition } from '@core/packages/query-builder/types.ts'
+import { useI18n } from 'vue-i18n'
+
+export function useNumberSchema(label: string, values?: Record<string, string>): PropertyDefinition {
+  const { t } = useI18n()
+
+  return {
+    label,
+    operators: {
+      greaterThan: { label: '>', values },
+      lessThan: { label: '<', values },
+      greaterThanOrEqual: { label: '>=', values },
+      lessThanOrEqual: { label: '<=', values },
+      is: { label: '=', values },
+      isNot: { label: '!=', values },
+      isEmpty: { label: t('query-builder:operator:empty'), expectValue: false },
+      isNotEmpty: { label: t('query-builder:operator:not-empty'), expectValue: false },
+    },
+  }
+}

package/lib/utils/query-builder/use-string-schema.ts

@@ -0,0 +1,36 @@
+import type { PropertyDefinition } from '@core/packages/query-builder/types.ts'
+import { useI18n } from 'vue-i18n'
+
+export function useStringSchema(label: string, values?: Record<string, string>): PropertyDefinition {
+  const { t } = useI18n()
+
+  if (values !== undefined) {
+    return {
+      label,
+      operators: {
+        is: { label: t('query-builder:operator:is'), values },
+        isNot: { label: t('query-builder:operator:is-not'), values },
+        isEmpty: { label: t('query-builder:operator:empty'), expectValue: false },
+        isNotEmpty: { label: t('query-builder:operator:not-empty'), expectValue: false },
+      },
+    }
+  }
+
+  return {
+    label,
+    operators: {
+      contains: { label: t('query-builder:operator:contains') },
+      doesNotContain: { label: t('query-builder:operator:not-contain') },
+      is: { label: t('query-builder:operator:is') },
+      isNot: { label: t('query-builder:operator:is-not') },
+      startsWith: { label: t('query-builder:operator:starts-with') },
+      endsWith: { label: t('query-builder:operator:ends-with') },
+      isEmpty: { label: t('query-builder:operator:empty'), expectValue: false },
+      isNotEmpty: { label: t('query-builder:operator:not-empty'), expectValue: false },
+      matchesRegex: { label: t('query-builder:operator:matches-regex') },
+      doesNotMatchRegex: { label: t('query-builder:operator:not-match-regex') },
+      matchesGlob: { label: t('query-builder:operator:matches-glob') },
+      doesNotMatchGlob: { label: t('query-builder:operator:not-match-glob') },
+    },
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xen-orchestra/web-core",
   "type": "module",
-  "version": "0.43.0",
+  "version": "0.45.0",
   "private": false,
   "exports": {
     "./*": {
@@ -20,7 +20,9 @@
     "@types/d3-time-format": "^4.0.3",
     "@vueuse/core": "^13.0.0",
     "@vueuse/math": "^13.0.0",
+    "@vueuse/router": "^13.0.0",
     "@vueuse/shared": "^13.0.0",
+    "complex-matcher": "^1.1.0",
     "d3-time-format": "^4.1.0",
     "echarts": "^5.6.0",
     "human-format": "^1.2.1",