@json-layout/core 0.1.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@json-layout/core",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "Compilation and state management utilities for JSON Layout.",
   "type": "module",
   "exports": {
@@ -19,7 +19,8 @@
   },
   "files": [
     "src",
-    "types"
+    "types",
+    "LICENSE"
   ],
   "scripts": {
     "test:single": "node --no-experimental-fetch --test --test-only test/*.spec.js",
@@ -46,7 +47,7 @@
   },
   "homepage": "https://github.com/json-layout/json-layout#readme",
   "dependencies": {
-    "@json-layout/vocabulary": "^0.1.0",
+    "@json-layout/vocabulary": "^0.3.0",
     "@types/markdown-it": "^13.0.1",
     "ajv": "^8.12.0",
     "ajv-errors": "^3.0.0",

package/src/compile/index.js

@@ -27,7 +27,7 @@ const Ajv = /** @type {typeof ajvModule.default} */ (ajvModule)
 // @ts-ignore
 const ajvLocalize = /** @type {typeof ajvLocalizeModule.default} */ (ajvLocalizeModule)
 
-const expressionsParams = ['data', 'options', 'display']
+const expressionsParams = ['data', 'options', 'context', 'display']
 
 const clone = rfdc()
 // const exprEvalParser = new ExprEvalParser()
@@ -87,8 +87,19 @@ export function compile (_schema, partialOptions = {}) {
   const normalizedLayouts = {}
   /** @type {import('@json-layout/vocabulary').Expression[]} */
   const expressionsDefinitions = []
+  /** @type {Record<string, string[]>} */
+  const validationErrors = {}
 
-  const skeletonTree = makeSkeletonTree(schema, options, validatePointers, normalizedLayouts, expressionsDefinitions, `${schema.$id}#`, 'main')
+  const skeletonTree = makeSkeletonTree(
+    schema,
+    options,
+    validatePointers,
+    validationErrors,
+    normalizedLayouts,
+    expressionsDefinitions,
+    `${schema.$id}#`,
+    'main'
+  )
 
   options.ajv.addSchema(schema)
 
@@ -126,6 +137,7 @@ export function compile (_schema, partialOptions = {}) {
     schema,
     skeletonTree,
     validates,
+    validationErrors,
     normalizedLayouts,
     expressions,
     locale: options.locale,

package/src/compile/serialize.js

@@ -26,7 +26,7 @@ export function serialize (compiledLayout) {
 
   code = code.replace('"use strict";', '')
 
-  // some internal imports to ajv are not translated to asm, we do it here
+  // some internal imports to ajv are not translated to esm, we do it here
   // cf https://github.com/ajv-validator/ajv-formats/pull/73
   if (code.includes('require("ajv-formats/dist/formats")')) {
     code = 'import { fullFormats } from "ajv-formats/dist/formats.js";\n' + code
@@ -37,7 +37,7 @@ export function serialize (compiledLayout) {
     code = code.replace(/require\("ajv\/dist\/runtime\/ucs2length"\)/g, 'ucs2length')
   }
 
-  // importe only the current locale from ajv-i18n
+  // import only the current locale from ajv-i18n
   code = `import localizeErrors from "ajv-i18n/localize/${compiledLayout.locale}/index.js";
 export const exportLocalizeErrors = localizeErrors;\n` + code
 
@@ -55,6 +55,7 @@ export const exportLocalizeErrors = localizeErrors;\n` + code
     skeletonTree: compiledLayout.skeletonTree,
     normalizedLayouts: compiledLayout.normalizedLayouts,
     validates: {},
+    validationErrors: compiledLayout.validationErrors,
     expressions: expressionsNodes,
     locale: compiledLayout.locale,
     messages: compiledLayout.messages,

package/src/compile/skeleton-node.js

@@ -1,5 +1,5 @@
 // import Debug from 'debug'
-import { normalizeLayoutFragment, isSwitchStruct, isGetItemsExpression, isSelectLayout, isGetItemsFetch } from '@json-layout/vocabulary'
+import { normalizeLayoutFragment, isSwitchStruct, isGetItemsExpression, isGetItemsFetch, isItemsLayout } from '@json-layout/vocabulary'
 import { makeSkeletonTree } from './skeleton-tree.js'
 
 /**
@@ -20,6 +20,7 @@ const pushExpression = (expressions, expression) => {
  * @param {any} schema
  * @param {import('./index.js').CompileOptions} options
  * @param {string[]} validates
+ * @param {Record<string, string[]>} validationErrors
  * @param {Record<string, import('@json-layout/vocabulary').NormalizedLayout>} normalizedLayouts
  * @param {import('@json-layout/vocabulary').Expression[]} expressions
  * @param {string | number} key
@@ -32,6 +33,7 @@ export function makeSkeletonNode (
   schema,
   options,
   validates,
+  validationErrors,
   normalizedLayouts,
   expressions,
   key,
@@ -44,36 +46,46 @@ export function makeSkeletonNode (
 
   // improve on ajv error messages based on ajv-errors (https://ajv.js.org/packages/ajv-errors.html)
   schema.errorMessage = schema.errorMessage ?? {}
-  /** @type {import('@json-layout/vocabulary').NormalizedLayout} */
-  const normalizedLayout = normalizedLayouts[pointer] ?? normalizeLayoutFragment(/** @type {import('@json-layout/vocabulary').SchemaFragment} */(schema), pointer, options.markdown)
-  normalizedLayouts[pointer] = normalizedLayout
+  if (!normalizedLayouts[pointer]) {
+    const normalizationResult = normalizeLayoutFragment(/** @type {import('@json-layout/vocabulary').SchemaFragment} */(schema), pointer, options.markdown)
+    normalizedLayouts[pointer] = normalizationResult.layout
+    if (normalizationResult.errors.length) {
+      validationErrors[pointer.replace('_jl#', '/')] = normalizationResult.errors
+    }
+  }
+  const normalizedLayout = normalizedLayouts[pointer]
+
+  let defaultData
+  if ('default' in schema) defaultData = schema.default
+  else if (required) {
+    if (schema.type === 'object') defaultData = {}
+    if (schema.type === 'array') defaultData = []
+  }
 
   const compObjects = isSwitchStruct(normalizedLayout) ? normalizedLayout.switch : [normalizedLayout]
   for (const compObject of compObjects) {
     if (schema.description && !compObject.help) compObject.help = schema.description
     if (compObject.if) pushExpression(expressions, compObject.if)
-    if (isSelectLayout(compObject) && compObject.getItems) {
+
+    if ('const' in schema) compObject.constData = { type: 'js-eval', expr: JSON.stringify(schema.const) }
+    if (compObject.constData) pushExpression(expressions, compObject.constData)
+
+    if (defaultData && !compObject.defaultData) compObject.defaultData = { type: 'js-eval', expr: JSON.stringify(defaultData) }
+    if (compObject.defaultData) pushExpression(expressions, compObject.defaultData)
+
+    if (isItemsLayout(compObject) && compObject.getItems) {
       if (isGetItemsExpression(compObject.getItems)) pushExpression(expressions, compObject.getItems)
       if (isGetItemsFetch(compObject.getItems)) pushExpression(expressions, compObject.getItems.url)
       if (compObject.getItems.itemTitle) pushExpression(expressions, compObject.getItems.itemTitle)
       if (compObject.getItems.itemKey) pushExpression(expressions, compObject.getItems.itemKey)
       if (compObject.getItems.itemValue) pushExpression(expressions, compObject.getItems.itemValue)
+      if (compObject.getItems.itemIcon) pushExpression(expressions, compObject.getItems.itemIcon)
       if (compObject.getItems.itemsResults) pushExpression(expressions, compObject.getItems.itemsResults)
     }
   }
 
-  let defaultData
-  if (schema.const) defaultData = schema.const
-  else if (schema.default) defaultData = schema.default
-  if (required) {
-    if (schema.type === 'object') defaultData = {} // TODO: this is only true if property is required ?
-    if (schema.type === 'array') defaultData = []
-    if (schema.type === 'string' && !schema.format) defaultData = ''
-  }
-
   /** @type {import('./types.js').SkeletonNode} */
-  const node = { key: key ?? '', pointer, parentPointer, defaultData }
-  if (schema.const) node.const = schema.const
+  const node = { key: key ?? '', pointer, parentPointer }
   if (schema.type === 'object') {
     if (schema.properties) {
       node.children = node.children ?? []
@@ -82,6 +94,7 @@ export function makeSkeletonNode (
           schema.properties[propertyKey],
           options,
           validates,
+          validationErrors,
           normalizedLayouts,
           expressions,
           propertyKey,
@@ -102,6 +115,7 @@ export function makeSkeletonNode (
           schema.allOf[i],
           options,
           validates,
+          validationErrors,
           normalizedLayouts,
           expressions,
           `$allOf-${i}`,
@@ -113,14 +127,29 @@ export function makeSkeletonNode (
     }
     if (schema.oneOf) {
       const oneOfPointer = `${pointer}/oneOf`
-      normalizedLayouts[oneOfPointer] = normalizedLayouts[oneOfPointer] ?? normalizeLayoutFragment(schema, oneOfPointer, options.markdown, 'oneOf')
+      if (!normalizedLayouts[oneOfPointer]) {
+        const normalizationResult = normalizeLayoutFragment(schema, oneOfPointer, options.markdown, 'oneOf')
+        normalizedLayouts[oneOfPointer] = normalizationResult.layout
+        if (normalizationResult.errors.length) {
+          validationErrors[oneOfPointer.replace('_jl#', '/')] = normalizationResult.errors
+        }
+      }
       /** @type {import('./types.js').SkeletonTree[]} */
       const childrenTrees = []
       for (let i = 0; i < schema.oneOf.length; i++) {
         if (!schema.oneOf[i].type) schema.oneOf[i].type = schema.type
         const title = schema.oneOf[i].title ?? `option ${i}`
         delete schema.oneOf[i].title
-        childrenTrees.push(makeSkeletonTree(schema.oneOf[i], options, validates, normalizedLayouts, expressions, `${oneOfPointer}/${i}`, title))
+        childrenTrees.push(makeSkeletonTree(
+          schema.oneOf[i],
+          options,
+          validates,
+          validationErrors,
+          normalizedLayouts,
+          expressions,
+          `${oneOfPointer}/${i}`,
+          title
+        ))
       }
       node.children = node.children ?? []
       node.children.push({ key: '$oneOf', pointer: `${pointer}/oneOf`, parentPointer: pointer, childrenTrees })
@@ -136,6 +165,7 @@ export function makeSkeletonNode (
           itemSchema,
           options,
           validates,
+          validationErrors,
           normalizedLayouts,
           expressions,
           i,
@@ -150,6 +180,7 @@ export function makeSkeletonNode (
           schema.items,
           options,
           validates,
+          validationErrors,
           normalizedLayouts,
           expressions,
           `${pointer}/items`,

package/src/compile/skeleton-tree.js

@@ -7,6 +7,7 @@ import { makeSkeletonNode } from './skeleton-node.js'
  * @param {any} schema
  * @param {import('./index.js').CompileOptions} options
  * @param {string[]} validates
+ * @param {Record<string, string[]>} validationErrors
  * @param {Record<string, import('@json-layout/vocabulary').NormalizedLayout>} normalizedLayouts
  * @param {import('@json-layout/vocabulary').Expression[]} expressions
  * @param {string} pointer
@@ -17,12 +18,13 @@ export function makeSkeletonTree (
   schema,
   options,
   validates,
+  validationErrors,
   normalizedLayouts,
   expressions,
   pointer,
   title
 ) {
-  const root = makeSkeletonNode(schema, options, validates, normalizedLayouts, expressions, '', pointer, null, true)
+  const root = makeSkeletonNode(schema, options, validates, validationErrors, normalizedLayouts, expressions, '', pointer, null, true)
   validates.push(pointer)
   return { title, root }
 }

package/src/compile/types.ts

@@ -1,11 +1,11 @@
 import type ajvModule from 'ajv'
 import type MarkdownIt from 'markdown-it'
 import { type NormalizedLayout, type StateNodeOptions } from '@json-layout/vocabulary'
-import { type ValidateFunction, type SchemaObject } from 'ajv'
+import { type ValidateFunction, type SchemaObject, type ErrorObject } from 'ajv'
 import { type Display } from '../state/utils/display.js'
 import { type LocaleMessages } from '../i18n/types.js'
 
-export type CompiledExpression = (data: any, options: StateNodeOptions, display: Display) => any
+export type CompiledExpression = (data: any, options: StateNodeOptions, context: object, display: Display) => any
 
 export interface CompileOptions {
   ajv: ajvModule.default
@@ -23,6 +23,7 @@ export interface CompiledLayout {
   schema?: SchemaObject
   skeletonTree: SkeletonTree
   validates: Record<string, ValidateFunction>
+  validationErrors: Record<string, string[]>
   normalizedLayouts: Record<string, NormalizedLayout>
   expressions: CompiledExpression[]
   locale: string
@@ -43,8 +44,6 @@ export interface SkeletonNode {
   key: string | number
   pointer: string
   parentPointer: string | null
-  defaultData?: unknown
-  const?: unknown
   children?: SkeletonNode[] // optional children in the case of arrays and object nodes
   childrenTrees?: SkeletonTree[] // other trees that can be instantiated with separate validation (for example in the case of new array items of oneOfs, etc)
 }

package/src/i18n/en.js

@@ -6,5 +6,27 @@ export default {
   delete: 'Delete',
   edit: 'Edit',
   duplicate: 'Duplicate',
-  sort: 'Sort'
+  sort: 'Sort',
+  up: 'Move up',
+  down: 'Move down',
+  showHelp: 'Show a help message',
+  mdeLink1: '[Link title',
+  mdeLink2: '](link url)',
+  mdeImg1: '![](',
+  mdeImg2: 'image url)',
+  mdeTable1: '',
+  mdeTable2: '\n\n| Column 1 | Column 2 | ColoColumnnne 3 |\n| -------- | -------- | -------- |\n| Text     | Text     | Text     |\n\n',
+  bold: 'Bold',
+  italic: 'Italic',
+  heading: 'Title',
+  quote: 'Quote',
+  unorderedList: 'Unordered list',
+  orderedList: 'Ordered list',
+  createLink: 'Create a link',
+  insertImage: 'Insert an image',
+  createTable: 'Create a table',
+  preview: 'Aperçu du rendu',
+  mdeGuide: 'Documentation de la syntaxe',
+  undo: 'Undo',
+  redo: 'Redo'
 }

package/src/i18n/fr.js

@@ -6,5 +6,27 @@ export default {
   delete: 'Supprimer',
   edit: 'Éditer',
   duplicate: 'Dupliquer',
-  sort: 'Trier'
+  sort: 'Trier',
+  up: 'Décaler vers le haut',
+  down: 'Décaler vers le bas',
+  showHelp: 'Afficher un message d\'aide',
+  mdeLink1: '[titre du lien',
+  mdeLink2: '](adresse du lien)',
+  mdeImg1: '![](',
+  mdeImg2: 'adresse de l\'image)',
+  mdeTable1: '',
+  mdeTable2: '\n\n| Colonne 1 | Colonne 2 | Colonne 3 |\n| -------- | -------- | -------- |\n| Texte     | Texte     | Texte     |\n\n',
+  bold: 'Gras',
+  italic: 'Italique',
+  heading: 'Titre',
+  quote: 'Citation',
+  unorderedList: 'Liste à puce',
+  orderedList: 'Liste numérotée',
+  createLink: 'Créer un lien',
+  insertImage: 'Insérer une image',
+  createTable: 'Créer un tableau',
+  preview: 'Preview',
+  mdeGuide: 'Syntax documentation',
+  undo: 'Défaire',
+  redo: 'Refaire'
 }

package/src/i18n/types.ts

@@ -9,6 +9,28 @@ export interface StateOptionsMessages {
   edit: string
   duplicate: string
   sort: string
+  up: string
+  down: string
+  showHelp: string
+  mdeLink1: string
+  mdeLink2: string
+  mdeImg1: string
+  mdeImg2: string
+  mdeTable1: string
+  mdeTable2: string
+  bold: string
+  italic: string
+  heading: string
+  quote: string
+  unorderedList: string
+  orderedList: string
+  createLink: string
+  insertImage: string
+  createTable: string
+  preview: string
+  mdeGuide: string
+  undo: string
+  redo: string
 }
 
 export type LocaleMessages = CompileOptionsMessages & StateOptionsMessages

package/src/state/index.js

@@ -4,7 +4,7 @@ import debug from 'debug'
 import { evalExpression, producePatchedData } from './state-node.js'
 import { createStateTree } from './state-tree.js'
 import { Display } from './utils/display.js'
-import { isGetItemsExpression, isGetItemsFetch } from '@json-layout/vocabulary'
+import { isGetItemsExpression, isGetItemsFetch, isItemsLayout } from '@json-layout/vocabulary'
 
 export { Display } from './utils/display.js'
 
@@ -20,6 +20,8 @@ export { Display } from './utils/display.js'
  * @typedef {import('./types.js').SliderNode} SliderNode
  * @typedef {import('./types.js').SectionNode} SectionNode
  * @typedef {import('./types.js').SelectNode} SelectNode
+ * @typedef {import('./types.js').AutocompleteNode} AutocompleteNode
+ * @typedef {import('./types.js').ComboboxNode} ComboboxNode
  * @typedef {import('./types.js').CheckboxNode} CheckboxNode
  * @typedef {import('./types.js').SwitchNode} SwitchNode
  * @typedef {import('./types.js').ColorPickerNode} ColorPickerNode
@@ -29,6 +31,7 @@ export { Display } from './utils/display.js'
  * @typedef {import('./types.js').ExpansionPanelsNode} ExpansionPanelsNode
  * @typedef {import('./types.js').TabsNode} TabsNode
  * @typedef {import('./types.js').VerticalTabsNode} VerticalTabsNode
+ * @typedef {import('./types.js').StepperNode} StepperNode
  * @typedef {import('./types.js').OneOfSelectNode} OneOfSelectNode
  * @typedef {import('./types.js').ListNode} ListNode
  */
@@ -36,8 +39,8 @@ export { Display } from './utils/display.js'
 /** @type {(node: StateNode | undefined) => node is SectionNode} */
 export const isSection = (node) => !!node && node.layout.comp === 'section'
 
-/** @type {(node: StateNode | undefined) => node is SelectNode} */
-export const isSelect = (node) => !!node && node.layout.comp === 'select'
+/** @type {(node: StateNode | undefined) => node is SelectNode | ComboboxNode | AutocompleteNode} */
+export const isItemsNode = (node) => !!node && isItemsLayout(node.layout)
 
 const logDataBinding = debug('jl:data-binding')
 
@@ -61,6 +64,8 @@ function fillOptions (partialOptions, compiledLayout) {
     titleDepth: 2,
     validateOn: 'input',
     initialValidation: 'withData',
+    defaultOn: 'empty',
+    autofocus: false,
     ...partialOptions,
     messages
   }
@@ -166,22 +171,36 @@ export class StatefulLayout {
   // @ts-ignore
   _lastCreateStateTreeContext
 
+  /**
+   * @private
+   * @type {string | null}
+   */
+  _autofocusTarget
+  /**
+   * @private
+   * @type {string | null}
+   */
+  _previousAutofocusTarget
+
   /**
    * @param {import("../index.js").CompiledLayout} compiledLayout
    * @param {import("../index.js").SkeletonTree} skeletonTree
    * @param {Partial<StatefulLayoutOptions>} options
-   * @param {unknown} data
+   * @param {unknown} [data]
    */
-  constructor (compiledLayout, skeletonTree, options, data = {}) {
+  constructor (compiledLayout, skeletonTree, options, data) {
     this._compiledLayout = compiledLayout
     this.skeletonTree = skeletonTree
     /** @type {import('mitt').Emitter<StatefulLayoutEvents>} */
     this.events = mitt()
     this.prepareOptions(options)
+    this._autofocusTarget = this.options.autofocus ? '' : null
+    this._previousAutofocusTarget = null
     this._data = data
     this.initValidationState()
     this.activeItems = {}
     this.updateState()
+    this.handleAutofocus()
   }
 
   /**
@@ -210,10 +229,11 @@ export class StatefulLayout {
    */
   updateState () {
     this.createStateTree()
-    if (this._data !== this._stateTree.root.data) {
+    if (this._data !== this._stateTree.root.data || this._autofocusTarget !== this._lastCreateStateTreeContext.autofocusTarget) {
       logDataBinding('hydrating state tree changed the data, do it again', this._data, this._stateTree.root.data)
       // this is necessary because a first hydration can add default values and change validity, etc
       this._data = this._stateTree.root.data
+      this._autofocusTarget = this._lastCreateStateTreeContext.autofocusTarget
       this.createStateTree()
     }
     logDataBinding('emit update event', this._data, this._stateTree)
@@ -225,7 +245,12 @@ export class StatefulLayout {
    */
   createStateTree () {
     /** @type {CreateStateTreeContext} */
-    const createStateTreeContext = { nodes: [], activeItems: this.activeItems }
+    const createStateTreeContext = {
+      nodes: [],
+      activeItems: this.activeItems,
+      autofocusTarget: this._autofocusTarget,
+      initial: !this._lastCreateStateTreeContext
+    }
     this._stateTree = createStateTree(
       createStateTreeContext,
       this._options,
@@ -238,7 +263,11 @@ export class StatefulLayout {
     )
     this._lastCreateStateTreeContext = createStateTreeContext
     if (!this.validationState.initialized) {
-      this.validationState = { initialized: true, validatedChildren: createStateTreeContext.nodes.filter(n => n.validated).map(n => n.fullKey) }
+      this._validationState = {
+        initialized: true,
+        validatedForm: this._validationState.validatedForm,
+        validatedChildren: createStateTreeContext.nodes.filter(n => n.validated).map(n => n.fullKey)
+      }
     }
   }
 
@@ -258,6 +287,13 @@ export class StatefulLayout {
     return this.stateTree.valid
   }
 
+  /**
+   * @returns {string[]}
+   */
+  get errors () {
+    return this._lastCreateStateTreeContext.nodes.filter(n => !!n.error).map(n => /** @type {string} */(n.error))
+  }
+
   /**
    * @returns {boolean}
    */
@@ -277,6 +313,7 @@ export class StatefulLayout {
     }
     if (activateKey !== undefined) {
       this.activeItems[node.fullKey] = activateKey
+      this._autofocusTarget = node.fullKey + '/' + activateKey
     }
     if (node.parentFullKey === null) {
       this.data = data
@@ -287,6 +324,10 @@ export class StatefulLayout {
     if (!parentNode) throw new Error(`parent with key "${node.parentFullKey}" not found`)
     const newParentValue = producePatchedData(parentNode.data ?? {}, node, data)
     this.input(parentNode, newParentValue)
+
+    if (activateKey !== undefined) {
+      this.handleAutofocus()
+    }
   }
 
   /**
@@ -304,11 +345,26 @@ export class StatefulLayout {
 
   /**
    * @param {StateNode} node
-   * @returns {Promise<import('@json-layout/vocabulary').SelectItems>}
    */
-  async getSelectItems (node) {
-    if (!isSelect(node)) throw new Error('node is not a select component')
-    if (node.layout.items) return node.layout.items
+  validateNodeRecurse (node) {
+    this.validationState = { validatedChildren: this.validationState.validatedChildren.concat([node.fullKey]) }
+    if (node.children) {
+      for (const child of node.children) {
+        this.validateNodeRecurse(child)
+      }
+    }
+  }
+
+  /**
+   * @private
+   * @param {StateNode} node
+   * @param {string} q
+   * @returns {Promise<[import('@json-layout/vocabulary').SelectItems, boolean]>}
+   */
+  async getSourceItems (node, q = '') {
+    if (!isItemsNode(node)) throw new Error('node is not a component with an items list')
+
+    if (node.layout.items) return [node.layout.items, false]
 
     /** @type {(expression: import('@json-layout/vocabulary').Expression, data: any) => any} */
     const evalSelectExpression = (expression, data) => {
@@ -316,12 +372,24 @@ export class StatefulLayout {
     }
 
     let rawItems
+    let appliedQ = false
     if (node.layout.getItems && isGetItemsExpression(node.layout.getItems)) {
       rawItems = evalSelectExpression(node.layout.getItems, null)
       if (!Array.isArray(rawItems)) throw new Error('getItems expression didn\'t return an array')
     }
     if (node.layout.getItems && isGetItemsFetch(node.layout.getItems)) {
-      const url = evalSelectExpression(node.layout.getItems.url, null)
+      const url = new URL(evalSelectExpression(node.layout.getItems.url, null))
+      let qSearchParam = node.layout.getItems.qSearchParam
+      if (!qSearchParam) {
+        for (const searchParam of url.searchParams.entries()) {
+          if (searchParam[1] === '{q}') qSearchParam = searchParam[0]
+        }
+      }
+      if (qSearchParam) {
+        appliedQ = true
+        if (q) url.searchParams.set(qSearchParam, q)
+        else url.searchParams.delete(qSearchParam)
+      }
       rawItems = await (await fetch(url)).json()
     }
 
@@ -329,28 +397,40 @@ export class StatefulLayout {
       if (node.layout.getItems?.itemsResults) {
         rawItems = evalSelectExpression(node.layout.getItems.itemsResults, rawItems)
       }
-      return rawItems.map((/** @type {any} */ rawItem) => {
+      /** @type {import('@json-layout/vocabulary').SelectItems} */
+      const items = rawItems.map((/** @type {any} */ rawItem) => {
+        /** @type {Partial<import('@json-layout/vocabulary').SelectItem>} */
+        const item = {}
         if (typeof rawItem === 'object') {
-          /** @type {Partial<import('@json-layout/vocabulary').SelectItem>} */
-          const item = {}
           item.value = node.layout.getItems?.itemValue ? evalSelectExpression(node.layout.getItems.itemValue, rawItem) : (node.layout.getItems?.returnObjects ? rawItem : rawItem.value)
           item.key = node.layout.getItems?.itemKey ? evalSelectExpression(node.layout.getItems.itemKey, rawItem) : rawItem.key
           item.title = node.layout.getItems?.itemTitle ? evalSelectExpression(node.layout.getItems.itemTitle, rawItem) : rawItem.title
           item.value = item.value ?? item.key
           item.key = item.key ?? item.value + ''
           item.title = item.title ?? item.key
-          return item
+          if (!item.icon && rawItem.icon) item.icon = rawItem.icon
         } else {
-          /** @type {Partial<import('@json-layout/vocabulary').SelectItem>} */
-          const item = {}
           item.value = node.layout.getItems?.itemValue ? evalSelectExpression(node.layout.getItems.itemValue, rawItem) : rawItem
           item.key = node.layout.getItems?.itemKey ? evalSelectExpression(node.layout.getItems.itemKey, rawItem) : item.value
           item.title = node.layout.getItems?.itemTitle ? evalSelectExpression(node.layout.getItems.itemTitle, rawItem) : item.value
-          return item
         }
+        if (node.layout.getItems?.itemIcon) item.icon = evalSelectExpression(node.layout.getItems?.itemIcon, rawItem)
+        return item
       })
+      return [items, appliedQ]
     }
-    throw new Error('node is missing items or getItems parameters')
+    throw new Error(`node ${node.fullKey} is missing items or getItems parameters`)
+  }
+
+  /**
+   * @param {StateNode} node
+   * @param {string} q
+   * @returns {Promise<import('@json-layout/vocabulary').SelectItems>}
+   */
+  async getItems (node, q = '') {
+    const [sourceItems, appliedQ] = await this.getSourceItems(node, q)
+    if (q && !appliedQ) return sourceItems.filter(item => item.title.toLowerCase().includes(q.toLowerCase()))
+    return sourceItems
   }
 
   /**
@@ -364,11 +444,13 @@ export class StatefulLayout {
    */
   activateItem (node, key) {
     this.activeItems[node.fullKey] = key
+    this._autofocusTarget = node.fullKey + '/' + key
     if (node.key === '$oneOf') {
-      this.input(node, node.skeleton.childrenTrees?.[key].root.defaultData)
+      this.input(node, undefined)
     } else {
       this.updateState()
     }
+    this.handleAutofocus()
   }
 
   /**
@@ -378,4 +460,15 @@ export class StatefulLayout {
     delete this.activeItems[node.fullKey]
     this.updateState()
   }
+
+  handleAutofocus () {
+    const autofocusTarget = this._autofocusTarget
+    if (autofocusTarget !== null && this._autofocusTarget !== this._previousAutofocusTarget) {
+      this._previousAutofocusTarget = autofocusTarget
+      setTimeout(() => {
+        logDataBinding('emit autofocus event', autofocusTarget)
+        this.events.emit('autofocus', autofocusTarget)
+      })
+    }
+  }
 }