flyql-vue

flyql-vue

Vue 3 editor components for FlyQL — a schema-driven query input with autocomplete, syntax highlighting, and keyboard navigation, plus a dedicated columns expression editor.

Installation

npm install flyql-vue
# or
pnpm add flyql-vue

flyql-vue depends on the flyql core package and is automatically installed alongside it. Vue 3 is required as a peer dependency:

npm install vue

Requires Node.js 16+.

Quick Start

Query editor

<script setup>
import { ref } from 'vue'
import { FlyqlEditor, ColumnSchema } from 'flyql-vue'
import 'flyql-vue/flyql.css'

const query = ref('')
const columns = ColumnSchema.fromPlainObject({
    status: { type: 'number', suggest: true },
    level: { type: 'enum', suggest: true, autocomplete: true, values: ['debug', 'info', 'error'] },
    service: { type: 'string', suggest: true, autocomplete: true },
    host: { type: 'string', suggest: true },
})

function onSubmit() {
    console.log('Query:', query.value)
}
</script>

<template>
    <FlyqlEditor
        v-model="query"
        :columns="columns"
        placeholder="Type a FlyQL query..."
        @submit="onSubmit"
    />
</template>

Columns expression editor

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

const expr = ref('')
const columns = ColumnSchema.fromPlainObject({
    message: { type: 'string', suggest: true },
    status: { type: 'number', suggest: true },
    host: { type: 'string', suggest: true },
})
</script>

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

What's in the box

Label and icon

label and icon share the slot on the left of the field, ahead of the query text. Both components accept them; clicking either focuses the input, and a text label becomes the input's accessible name.

<!-- text label, built-in glyph -->
<FlyqlEditor v-model="query" :columns="columns" label="Filter" />

<!-- emoji icon, no label -->
<FlyqlEditor v-model="query" :columns="columns" icon="🔎" />

<!-- your own icon component, or `false` to drop the glyph entirely -->
<FlyqlEditor v-model="query" :columns="columns" :icon="MyIcon" />
<FlyqlEditor v-model="query" :columns="columns" :icon="false" label="Filter" />

For richer content use the icon and label slots — they take precedence over the props:

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

A long label is truncated with an ellipsis at half the field width rather than squeezing the input. The label renders in the UI font (--flyql-font-family), baseline-corrected to sit on the query text's baseline.

Single-line mode

multiline defaults to true. Set it to false for a field that must stay one line — a toolbar filter, say:

<FlyqlEditor v-model="query" :columns="columns" :multiline="false" />

Shift+Enter stops inserting a break, newlines arriving by paste, drop or IME are collapsed to spaces (same length, so the caret does not jump), and the text scrolls sideways instead of wrapping.

Clear button

hasClear adds a clear button at the trailing edge, shown only when the field has a value:

<FlyqlEditor v-model="query" :columns="columns" has-clear />

Clicking it emits update:modelValue with '' like any other edit — the suggestion panel closes and diagnostics drop through the normal path — and returns focus to the input. Name it with clear-button-label (default Clear).

Suggestion panel placement

The panel is teleported to body and stacks at --flyql-panel-z-index (default 100). Inside a host overlay that outranks it, either raise the variable or point the panel at the overlay:

<FlyqlEditor v-model="query" :columns="columns" :panel-container="drawerEl" />

panel-container takes a selector or an element; the panel then renders inside it and inherits its stacking context, which also makes it a DOM descendant for outside-click handling. An unresolvable target falls back to body. The teleported node carries a data-flyql-panel attribute.

Theming

The editor uses CSS custom properties (--flyql-* variables) for all visual styling. A built-in dark prop toggles the dark theme, and any variable can be overridden in your CSS to match your application's design.

<FlyqlEditor v-model="query" :columns="columns" :dark="isDark" />

See the theming documentation for the full list of variables and customization patterns.

Documentation

Full reference: docs.flyql.dev/editor

• Editor Component — props, events, exposed methods, async autocomplete, keyboard shortcuts
• Columns Component — column expression editor
• Schema Configuration — ColumnSchema structure, nested columns, remote key discovery
• Theming — CSS variables and dark mode

License

MIT