Query Builder

import {
  QueryBuilderDocyrus
} from "@docyrus/ui/components/query-builder";
import type {
  QueryBuilderDocyrusProps,
  DocyrusQBField,
  RuleGroupType,
  RuleGroupTypeIC,
  RuleType,
  Field,
  FullField,
  FullOperator,
  FullCombinator,
  QueryBuilderProps,
  ActionProps,
  ValueSelectorProps,
  ValueEditorProps,
  NotToggleProps,
  DragHandleProps,
  CombinatorSelectorProps,
  FieldSelectorProps,
  OperatorSelectorProps,
  RuleGroupTypeAny,
  VersatileSelectorProps,
  QueryJsonataContext,
  EvaluateOptions,
  UseQuery2JsonataConverterOptions,
  UseQuery2JsonataConverterResult,
  ConvertQueryOptions,
  ConvertQueryResult,
  DateBindingSpec,
  OperatorApi,
  FilterGroup
} from "@docyrus/ui/components/query-builder";

<QueryBuilderDocyrus
  variant="default"
  size="sm"
  animated
  draggable
  showRuleNumbers
  maxDepth={0}
  emptyMessage={...}
  showClearButton
  clearButtonLabel={...}
  onRuleAdd={() => {}}
  onRuleRemove={() => {}}
  onGroupAdd={() => {}}
  onGroupRemove={() => {}}
  onClear={() => {}}
  enrichFieldDefaults
/>

const fields: Array<DocyrusQBField> = [
  {
    name: 'matter',
    label: 'Matter',
    fieldType: 'field-relation',
    asyncOptions: {
      load: async ({ search, page, pageSize, signal }) => {
        const res = await client.get('/v1/apps/base/matter/items', {
          filterKeyword: search,
          limit: pageSize,
          offset: page * pageSize
        }, { signal });

        return { items: res.data.map(toOption), hasMore: res.data.length === pageSize };
      },
      resolveByIds: async ({ ids, signal }) => {
        const res = await client.get('/v1/apps/base/matter/items', { filters: idFilter(ids) }, { signal });

        return res.data.map(toOption);
      }
    }
  }
];