Columns Component

The FlyqlColumns component provides a dedicated input for column expressions — selecting, filtering, and applying transformers to columns.

Quick Setup

<script setup>
import { ref } from 'vue'
import { FlyqlColumns, ColumnSchema } from 'flyql-vue'

const expr = ref('')
const columns = ColumnSchema.fromPlainObject({
    status: { type: 'number', suggest: true },
    level: { type: 'enum', suggest: true },
    service: { type: 'string', suggest: true },
    host: { type: 'string', suggest: true },
})

function onParsed(parsed) {
    console.log('Parsed columns:', parsed)
}
</script>

<template>
    <FlyqlColumns
        v-model="expr"
        :columns="columns"
        :capabilities="{ transformers: true }"
        placeholder="message, status|upper, host as h"
        @update:parsed="onParsed"
    />
</template>

Props

Prop	Type	Default	Description
modelValue	String	''	Expression text (v-model)
columns	Object	{}	Column schema
capabilities	Object	null	Parser capabilities (e.g., { transformers: true })
registry	TransformerRegistry	null	Custom transformer registry (see Custom Transformers)
rendererRegistry	RendererRegistry	null	Custom renderer registry (see Custom Renderers). When null the editor disables renderer parsing entirely; supplying any registry (even an empty one) enables the post-alias | grammar.
onKeyDiscovery	Function	null	Remote key discovery callback
placeholder	String	''	Placeholder text
autofocus	Boolean	false	Auto-focus on mount
debug	Boolean	false	Debug logging
dark	Boolean	false	Enable dark theme (see theming)
label	String	''	Text shown inside the field, to the left of the query
icon	String | Object | Function | Boolean	null	Icon shown before the label: a string renders as text, a component renders as-is, false removes it
multiline	Boolean	true	Allow multi-line input. When false, newlines are collapsed to spaces and the field stays one line
hasClear	Boolean	false	Show a clear button at the trailing edge; it appears only when the field has a value
clearButtonLabel	String	'Clear'	Accessible name of the clear button
panelContainer	String | Object	'body'	Where to portal the suggestion panel: a selector or an element. Defaults to body

Example — with renderer registry

<script setup>
import { FlyqlColumns } from 'flyql-vue'
import { Renderer, RendererRegistry, ArgSpec } from 'flyql/renderers'
import { Type } from 'flyql'

class HrefRenderer extends Renderer {
    get name() { return 'href' }
    get argSchema() { return [new ArgSpec(Type.String, true)] }
}

const rendererRegistry = new RendererRegistry()
rendererRegistry.register(new HrefRenderer())
</script>

<template>
  <FlyqlColumns v-model="query" :columns="schema" :renderer-registry="rendererRegistry" />
</template>

Label and Icon

label and icon share the slot on the left of the field, ahead of the query text. Clicking either focuses the input, and an overlong label is truncated with an ellipsis at half the field width instead of squeezing the input. A text label also becomes the input’s accessible name, replacing the component’s default aria-label.

<template>
    <FlyqlColumns v-model="expr" :columns="columns" label="Filter" />
    <FlyqlColumns v-model="expr" :columns="columns" icon="🔎" />
    <FlyqlColumns v-model="expr" :columns="columns" :icon="MyIcon" />
    <FlyqlColumns v-model="expr" :columns="columns" :icon="false" label="Filter" />
</template>

The icon and label slots take precedence over the props when you need richer content:

<template>
    <FlyqlColumns v-model="expr" :columns="columns">
        <template #icon><MyIcon /></template>
        <template #label><strong>Filter</strong></template>
    </FlyqlColumns>
</template>

Events

Event	Payload	Description
update:modelValue	string	Expression text changed (v-model)
update:parsed	ParsedColumn[]	Parsed column array updated
submit	—	User pressed Ctrl/Cmd+Enter
parse-error	string	Parse error message
focus	—	Component gained focus
blur	—	Component lost focus

Exposed Methods

Method	Returns	Description
focus()	—	Focus the input
blur()	—	Blur the input
getQueryStatus()	{ valid: boolean, message: string }	Validate the expression
getParsedColumns()	ParsedColumn[]	Get parsed column array

Column Expression Syntax

Column expressions use a comma-separated format with optional transformers and aliases:

message, status|upper, host as h, metadata.labels.env

Part	Syntax	Example
Column	name	message
Transformer	name|transformer	status|upper
Transformer with args	name|transformer(arg)	name|truncate(50)
Alias	name as alias	host as h
Nested	parent.child	metadata.labels.env
Chained transformers	name|t1|t2	msg|lower|truncate(100)