@wssto2/vue-core 0.18.0 → 0.19.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 0.19.0 — 2026-11-06
+
+A code editor for forms, for the templates, components and page code a site is built from.
+
+### New
+- **form:** `CodeField` (CodeMirror 6, optional peers loaded when the first one shows): `v-model` string, `language: "liquid" | "html" | "css" | "javascript"`, `readonly`, `lineNumbers`, `height` (resizable), `markers: CodeMarker[]` (`{ line, column?, severity, message }` from the server's linter, drawn in the gutter and as underlines), `@save` on Ctrl/Cmd+S, a `#preview` slot that puts the app's preview beside the editor (behind a button on narrow screens). Tab indents, Esc then Tab leaves the editor. Liquid is the official `@codemirror/lang-liquid`. New types `CodeLanguage`, `CodeMarker`; new texts `core.form.code.*`. Recipe: `docs/recipes/code-field.md`.
+- **peers:** optional `@codemirror/{state,view,commands,language,lint,lang-liquid,lang-html,lang-css,lang-javascript}` and `@lezer/highlight`.
+- **check:consumer:** fails when the packed output imports quill or CodeMirror statically.
+
 ## 0.18.0 — 2026-11-06
 
 Forms and lists built from a schema at run time, for content whose fields are data (site-builder's content types). The `Dynamic*` pair generates fields and columns from a typed schema; it is not a page renderer.

package/README.md

@@ -337,6 +337,7 @@ The library's own texts are under the `core` namespace in English, Croatian, Bos
 - [App setup](docs/recipes/app-setup.md): config, session, effects, locales and flags, permissions in the UI, error sentences, startup errors
 - [Forms](docs/recipes/forms.md): form state, fields, a record edited in group sheets, a long form, commands
 - [Forms and lists from a schema](docs/recipes/content-forms.md): `DynamicForm`, `RepeatField`, `ResourceField`, `RichTextField`, `buildValidator`, `DynamicCollection`, `visible_when`
+- [A code editor](docs/recipes/code-field.md): `CodeField` (CodeMirror 6): Liquid / HTML / CSS / JavaScript, linter markers, a preview beside it, the keyboard
 - [Typed routes](docs/recipes/typed-routes.md): generated routes, `client.request`, a list from a route
 - [Sign-in](docs/recipes/sign-in.md): go-core's identity module: the sign-in page, the session wiring, the language, the module's committed types, the dev server
 - [Users and profile](docs/recipes/users.md): the users list and a person's record, "my profile" with the e-mail change by code, opting out, extra sections, refusals

package/dist/collection/RecordIdentity.vue.d.ts

@@ -26,8 +26,8 @@ type __VLS_Props = {
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     to: RouteLocationRaw | null;
     subtitle: string | null;
-    subtitleSelectable: boolean;
     highlight: string | null;
+    subtitleSelectable: boolean;
     spread: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/form/CodeField.vue.d.ts

@@ -0,0 +1,62 @@
+import { type CodeLanguage, type CodeMarker } from "./codeEditor";
+import { type FieldProps, type FieldSlots } from "./field";
+/**
+ * Source code: Liquid templates, HTML, CSS or JavaScript, with highlighting, line numbers and the findings of a linter. The value
+ * is the text ("" when empty). The editor is CodeMirror 6, optional peer dependencies loaded when the field first shows
+ * (see `loadCodeEditor`); an application that never shows this field never loads them.
+ *
+ * `markers` come from the server's linter (the browser checks nothing): each is drawn in the gutter and as an underline on its
+ * line, with the message on hover. `@save` fires on Ctrl/Cmd+S. Tab indents; Esc, then Tab, moves on to the next control.
+ * Give the `preview` slot (an iframe of the rendered page) and the editor sits beside it, below it on narrow screens behind a button.
+ *
+ *   <CodeField v-model="form.body" language="liquid" :markers="lint" label="Template" @save="save">
+ *     <template #preview><iframe :src="previewUrl" title="Preview" class="size-full" /></template>
+ *   </CodeField>
+ */
+type __VLS_Props = FieldProps & {
+    modelValue?: string;
+    language?: CodeLanguage;
+    /** Visible and selectable, not editable (a read-only viewer of a published version). */
+    readonly?: boolean;
+    lineNumbers?: boolean;
+    /** The height of the editor; the user can drag it taller (any CSS length). */
+    height?: string;
+    markers?: readonly CodeMarker[];
+};
+type __VLS_Slots = FieldSlots & {
+    /** The app's preview of the code; the editor goes beside it. */
+    preview?: () => unknown;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
+    focus: () => void | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    save: () => any;
+    "update:modelValue": (source: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSave?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((source: string) => any) | undefined;
+}>, {
+    disabled: boolean;
+    name: string;
+    label: string;
+    error: string;
+    required: boolean;
+    height: string;
+    presentation: "control" | "value";
+    modelValue: string;
+    labelHidden: boolean;
+    hint: string;
+    editable: boolean;
+    lockedReason: string;
+    readonly: boolean;
+    language: CodeLanguage;
+    lineNumbers: boolean;
+    markers: readonly CodeMarker[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/form/codeEditor.d.ts

@@ -0,0 +1,27 @@
+import type { Extension } from "@codemirror/state";
+/** What `CodeField` edits. `liquid` is HTML with `{{ }}` and `{% %}` (and the `<script>` / `<style>` of the page highlighted as their own languages). */
+export type CodeLanguage = "liquid" | "html" | "css" | "javascript";
+/** A finding of the server's linter (`site lint-templates`) shown in the editor: the gutter and an underline. Lines and columns count from 1. */
+export interface CodeMarker {
+    line: number;
+    /** Without it the whole line is marked. */
+    column?: number;
+    severity: "error" | "warning";
+    message: string;
+}
+/**
+ * CodeMirror 6, every package an optional peer dependency (`npm i @codemirror/state @codemirror/view @codemirror/commands
+ * @codemirror/language @codemirror/lint`, and `@codemirror/lang-liquid` / `lang-html` / `lang-css` / `lang-javascript` for the
+ * languages in use). This file is the only place that imports them and only through `import()`: nothing loads until a `CodeField` shows.
+ */
+export declare function loadCodeEditor(): Promise<{
+    state: typeof import("@codemirror/state");
+    view: typeof import("@codemirror/view");
+    commands: typeof import("@codemirror/commands");
+    language: typeof import("@codemirror/language");
+    lint: typeof import("@codemirror/lint");
+    highlight: typeof import("@lezer/highlight");
+}>;
+export type CodeEditor = Awaited<ReturnType<typeof loadCodeEditor>>;
+/** The grammar of one language, loaded when it is first used. */
+export declare function loadCodeLanguage(name: CodeLanguage): Promise<Extension>;

package/dist/form/index.d.ts

@@ -85,6 +85,8 @@ export { default as DynamicForm } from "./dynamic/DynamicForm.vue";
 export { default as RepeatField } from "./dynamic/RepeatField.vue";
 export { default as ResourceField } from "./dynamic/ResourceField.vue";
 export { default as RichTextField } from "./dynamic/RichTextField.vue";
+export { default as CodeField } from "./CodeField.vue";
+export type { CodeLanguage, CodeMarker } from "./codeEditor";
 export { evaluateVisibility, isEmptyValue } from "./dynamic/visibility";
 export { buildValidator } from "./dynamic/validator";
 export type { SchemaValidatorOptions } from "./dynamic/validator";