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)

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>

Events

Event	Payload	Description
update:modelValue	string	Expression text changed (v-model)
update:parsed	ParsedColumn[]	Parsed column array updated
submit	—	User pressed Shift+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)