@jsonschema-editor/vue 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 JSON Schema Editor Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,61 @@
+# @jsonschema-editor/vue
+
+JSON-Schema-Form-Editor und ausfüllbares Formular für **Vue 3**.
+
+## Installation
+
+```bash
+npm install @jsonschema-editor/vue vue
+```
+
+Peer Dependency: `vue@^3.5.0`
+
+Die Pakete `@jsonschema-editor/json-schema` und `@jsonschema-editor/ui-schema` werden als Abhängigkeiten mitinstalliert.
+
+## Styles
+
+```ts
+import "@jsonschema-editor/vue/style.css";
+```
+
+## Schnellstart
+
+```ts
+import { createApp } from "vue";
+import { install, JsonSchemaFormEditor } from "@jsonschema-editor/vue";
+import "@jsonschema-editor/vue/style.css";
+
+const app = createApp({ components: { JsonSchemaFormEditor } });
+install(app);
+app.mount("#app");
+```
+
+```vue
+<template>
+  <JsonSchemaFormEditor
+    :schema="schemaJson"
+    :ui-schema="uiSchemaJson"
+    v-model="data"
+  />
+</template>
+```
+
+## Exporte
+
+- `JsonSchemaForm` – ausfüllbares Formular
+- `JsonSchemaFormEditor` – visueller Schema-/UI-Editor
+- `ControlField`, `UiElementRenderer` – Bausteine für eigene Layouts
+- Composables und Registries für Erweiterungen
+- Re-Exporte aus `@jsonschema-editor/json-schema` (`SchemaDocument`, `documentFromJSON`, …)
+
+## Entwicklung
+
+```bash
+pnpm install
+pnpm run build
+pnpm run typecheck
+```
+
+## Lizenz
+
+MIT – siehe [LICENSE](../LICENSE) im Repository-Root.

package/dist/index.d.ts

@@ -0,0 +1,389 @@
+import { App } from 'vue';
+import { buildDefRef } from '@jsonschema-editor/json-schema';
+import { Component } from 'vue';
+import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
+import { ComputedRef } from 'vue';
+import { Control } from '@jsonschema-editor/ui-schema';
+import { DefineComponent } from 'vue';
+import { documentFromJSON } from '@jsonschema-editor/json-schema';
+import { Group } from '@jsonschema-editor/ui-schema';
+import { HorizontalLayout } from '@jsonschema-editor/ui-schema';
+import { InjectionKey } from 'vue';
+import { JsonSchemaAttributeRegistry } from '@jsonschema-editor/json-schema';
+import { Label } from '@jsonschema-editor/ui-schema';
+import { parseDefRef } from '@jsonschema-editor/json-schema';
+import { PublicProps } from 'vue';
+import { Ref } from 'vue';
+import { SchemaDocument } from '@jsonschema-editor/json-schema';
+import { SchemaNode } from '@jsonschema-editor/json-schema';
+import { ShallowRef } from 'vue';
+import { UiElement } from '@jsonschema-editor/ui-schema';
+import { UiSchema } from '@jsonschema-editor/ui-schema/bridge';
+import { UiSchemaAttributeRegistry } from '@jsonschema-editor/ui-schema';
+import { VerticalLayout } from '@jsonschema-editor/ui-schema';
+import { WritableComputedRef } from 'vue';
+
+declare type __VLS_Props = {
+    schema: SchemaDocument;
+    uiSchema: UiSchema;
+    readonly?: boolean;
+};
+
+declare type __VLS_Props_2 = {
+    schema: SchemaDocument;
+    uiSchema: UiSchema;
+};
+
+declare type __VLS_Props_3 = {
+    schema: SchemaNode;
+    scope: string;
+    label?: string;
+    readonly?: boolean;
+};
+
+declare type __VLS_Props_4 = {
+    element: UiElement;
+    schema: SchemaNode;
+    document?: SchemaDocument;
+    readonly?: boolean;
+};
+
+declare type __VLS_PublicProps = {
+    modelValue: Record<string, unknown>;
+} & __VLS_Props;
+
+declare type __VLS_PublicProps_2 = {
+    modelValue: Record<string, unknown>;
+} & __VLS_Props_3;
+
+declare type __VLS_PublicProps_3 = {
+    modelValue: Record<string, unknown>;
+} & __VLS_Props_4;
+
+export declare interface AttributeControlContext<TNode = unknown> {
+    node: TNode;
+    attributeName: string;
+    label: string;
+    value: unknown;
+    readonly?: boolean;
+}
+
+export declare interface AttributeControlRegistration<TNode = unknown> {
+    id?: string;
+    matcher: AttributeMatcher<TNode>;
+    component: Component;
+}
+
+/**
+ * Registry für Editor-Controls pro Schema-/UI-Attribut.
+ * Erweiterbar per Name, valueType oder eigener match-Funktion.
+ */
+export declare class AttributeControlRegistry<TNode = unknown> {
+    private registrations;
+    private defaultComponent;
+    register(registration: AttributeControlRegistration<TNode>): this;
+    registerName(name: string, component: Component, priority?: number, id?: string): this;
+    registerNames(names: readonly string[], component: Component, priority?: number, id?: string): this;
+    registerValueType(valueType: AttributeValueType, component: Component, priority?: number, id?: string): this;
+    registerMatch(match: (context: AttributeControlContext<TNode>) => boolean, component: Component, priority?: number, id?: string): this;
+    setDefault(component: Component): this;
+    unregister(id: string): boolean;
+    resolve(context: AttributeControlContext<TNode>): Component | null;
+    private matches;
+}
+
+export declare interface AttributeMatcher<TNode = unknown> {
+    priority?: number;
+    /** Exakter Attributname. */
+    name?: string;
+    /** Mehrere Attributnamen. */
+    names?: readonly string[];
+    /** Erwarteter Werttyp (Heuristik). */
+    valueType?: AttributeValueType;
+    /** Freie Logik – z. B. Custom-Attribute aus JsonSchemaAttributeRegistry. */
+    match?: (context: AttributeControlContext<TNode>) => boolean;
+}
+
+export declare type AttributeValueType = "string" | "number" | "boolean" | "array" | "unknown";
+
+export { buildDefRef }
+
+export declare const ControlField: DefineComponent<__VLS_PublicProps_2, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+"update:modelValue": (value: Record<string, unknown>) => any;
+}, string, PublicProps, Readonly<__VLS_PublicProps_2> & Readonly<{
+"onUpdate:modelValue"?: ((value: Record<string, unknown>) => any) | undefined;
+}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+declare const _default: {
+    install: typeof install;
+};
+export default _default;
+
+export { documentFromJSON }
+
+export declare const EDITOR_CONTEXT_KEY: InjectionKey<EditorContext>;
+
+export declare const EDITOR_TABS: ({
+    id: "schema";
+    label: string;
+    description: string;
+} | {
+    id: "ui";
+    label: string;
+    description: string;
+})[];
+
+export declare type EditorAttributeRenderer = Component<EditorAttributeRendererProps & {
+    modelValue?: unknown;
+}>;
+
+export declare interface EditorAttributeRendererProps {
+    schema: SchemaNode;
+    attributeName: string;
+    label: string;
+    readonly?: boolean;
+}
+
+export declare interface EditorContext {
+    document: Ref<SchemaDocument>;
+    schema: Ref<SchemaNode>;
+    uiSchema: Ref<UiSchema>;
+    updateDocument: (next: SchemaDocument) => void;
+    updateSchema: (next: SchemaDocument) => void;
+    updateUiSchema: (next: UiSchema, manual?: boolean) => void;
+}
+
+export declare type EditorKindRenderer = Component<EditorKindRendererProps>;
+
+export declare interface EditorKindRendererProps {
+    schema: SchemaNode;
+    propertyName?: string;
+    readonly?: boolean;
+}
+
+export declare type EditorTab = "schema" | "ui";
+
+export declare type FormFieldRenderer = Component<FormFieldRendererProps & {
+    modelValue?: unknown;
+}>;
+
+export declare interface FormFieldRendererProps {
+    schema: SchemaNode;
+    scope: string;
+    label?: string;
+    readonly?: boolean;
+}
+
+export declare const globalRendererRegistry: RendererRegistry;
+
+/** Attribut-Control im Schema-Editor. */
+export declare const globalSchemaAttributeControlRegistry: AttributeControlRegistry<SchemaNode>;
+
+/** Editor-Panel pro JSON-Schema-Knoten (Struktur-Editor). */
+export declare const globalSchemaEditorTypeRegistry: TypeControlRegistry<SchemaNode>;
+
+/** Formularfeld pro JSON-Schema-Knoten (Ausfüll-Modus). */
+export declare const globalSchemaFormTypeRegistry: TypeControlRegistry<SchemaNode>;
+
+/** Attribut-Control im UI-Schema-Editor. */
+export declare const globalUiAttributeControlRegistry: AttributeControlRegistry<UiElement>;
+
+/** Editor-Panel pro UI-Schema-Element. */
+export declare const globalUiEditorTypeRegistry: TypeControlRegistry<UiElement>;
+
+/** Formular-Renderer pro UI-Schema-Element. */
+export declare const globalUiFormTypeRegistry: TypeControlRegistry<UiElement>;
+
+export declare function inferValueType(value: unknown): AttributeValueType;
+
+export declare function install(app: App): void;
+
+export declare function isControl(element: UiElement): element is Control;
+
+export declare function isGroup(element: UiElement): element is Group;
+
+export declare function isHorizontalLayout(element: UiElement): element is HorizontalLayout;
+
+export declare function isLabel(element: UiElement): element is Label;
+
+export declare function isVerticalLayout(element: UiElement): element is VerticalLayout;
+
+export declare const JSON_SCHEMA_ATTRIBUTE_REGISTRY_KEY: InjectionKey<JsonSchemaAttributeRegistry>;
+
+export declare const JsonSchemaForm: DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+"update:modelValue": (value: Record<string, unknown>) => any;
+}, string, PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+"onUpdate:modelValue"?: ((value: Record<string, unknown>) => any) | undefined;
+}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLFormElement>;
+
+export declare const JsonSchemaFormEditor: DefineComponent<__VLS_Props_2, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+"update:schema": (schema: SchemaDocument) => any;
+"update:uiSchema": (uiSchema: UiSchema) => any;
+}, string, PublicProps, Readonly<__VLS_Props_2> & Readonly<{
+"onUpdate:schema"?: ((schema: SchemaDocument) => any) | undefined;
+"onUpdate:uiSchema"?: ((uiSchema: UiSchema) => any) | undefined;
+}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+
+export { parseDefRef }
+
+export declare function registerDefaultControls(): void;
+
+export declare const RENDERER_REGISTRY_KEY: InjectionKey<RendererRegistry>;
+
+/**
+ * Abwärtskompatibel: delegiert an die neuen Type-/Attribute-Control-Registries.
+ * Bevorzugt direkt `TypeControlRegistry` / `AttributeControlRegistry` nutzen.
+ */
+export declare class RendererRegistry {
+    private readonly schemaFormTypes;
+    private readonly schemaEditorTypes;
+    private readonly schemaAttributes;
+    constructor(schemaFormTypes?: TypeControlRegistry<SchemaNode>, schemaEditorTypes?: TypeControlRegistry<SchemaNode>, schemaAttributes?: AttributeControlRegistry<SchemaNode>);
+    registerFormKind(kind: string, renderer: FormFieldRenderer): this;
+    registerFormAttribute(name: string, renderer: FormFieldRenderer): this;
+    registerEditorKind(kind: string, renderer: EditorKindRenderer): this;
+    registerEditorAttribute(name: string, renderer: EditorAttributeRenderer): this;
+    registerFormInstanceOf(ctor: abstract new (...args: never[]) => SchemaNode, renderer: FormFieldRenderer, priority?: number): this;
+    registerFormMatch(match: (schema: SchemaNode) => boolean, renderer: FormFieldRenderer, priority?: number): this;
+    setDefaultFormRenderer(renderer: FormFieldRenderer): this;
+    setDefaultEditorKindRenderer(renderer: EditorKindRenderer): this;
+    setDefaultEditorAttributeRenderer(renderer: EditorAttributeRenderer): this;
+    resolveFormRenderer(schema: SchemaNode, attributeName?: string): FormFieldRenderer | null;
+    resolveEditorKindRenderer(schema: SchemaNode): EditorKindRenderer | null;
+    resolveEditorAttributeRenderer(attributeName: string): EditorAttributeRenderer | null;
+    /** Direkter Zugriff auf die Typ-Registry (Formular). */
+    get schemaFormTypeRegistry(): TypeControlRegistry<SchemaNode>;
+    /** Direkter Zugriff auf die Typ-Registry (Editor). */
+    get schemaEditorTypeRegistry(): TypeControlRegistry<SchemaNode>;
+    /** Direkter Zugriff auf die Attribut-Registry (Schema). */
+    get schemaAttributeControlRegistry(): AttributeControlRegistry<SchemaNode>;
+    /** UI-Formular-Typen. */
+    get uiFormTypeRegistry(): TypeControlRegistry<UiElement>;
+    /** UI-Editor-Typen. */
+    get uiEditorTypeRegistry(): TypeControlRegistry<UiElement>;
+    /** UI-Attribut-Controls. */
+    get uiAttributeControlRegistry(): AttributeControlRegistry<UiElement>;
+}
+
+export declare const SCHEMA_ATTRIBUTE_CONTROL_REGISTRY_KEY: InjectionKey<AttributeControlRegistry<SchemaNode>>;
+
+export declare const SCHEMA_EDITOR_TYPE_REGISTRY_KEY: InjectionKey<TypeControlRegistry<SchemaNode>>;
+
+export declare const SCHEMA_FORM_TYPE_REGISTRY_KEY: InjectionKey<TypeControlRegistry<SchemaNode>>;
+
+export { SchemaDocument }
+
+export declare interface SchemaFormEditorEmits {
+    (event: "update:schema", schema: SchemaDocument): void;
+    (event: "update:uiSchema", uiSchema: UiSchema): void;
+}
+
+declare type SchemaPath = string[];
+
+export declare interface TypeControlRegistration<T> {
+    id?: string;
+    matcher: TypeMatcher<T>;
+    component: Component;
+}
+
+/**
+ * Registry für Vue-Controls pro Typ.
+ * Erweiterbar per instanceof, kind/elementKind oder eigener match-Funktion.
+ */
+export declare class TypeControlRegistry<T> {
+    private registrations;
+    private defaultComponent;
+    register(registration: TypeControlRegistration<T>): this;
+    registerInstanceOf<C extends T>(ctor: abstract new (...args: never[]) => C, component: Component, options?: {
+        priority?: number;
+        id?: string;
+    }): this;
+    registerKind(kind: string, component: Component, priority?: number, id?: string): this;
+    registerElementKind(elementKind: string, component: Component, priority?: number, id?: string): this;
+    registerMatch(match: (value: T, context?: unknown) => boolean, component: Component, priority?: number, id?: string): this;
+    setDefault(component: Component): this;
+    unregister(id: string): boolean;
+    list(): readonly TypeControlRegistration<T>[];
+    resolve(value: T, context?: unknown): Component | null;
+    private matches;
+}
+
+export declare interface TypeMatcher<T> {
+    /** Höhere Priorität gewinnt bei mehreren Treffern. */
+    priority?: number;
+    /** Treffer per `value instanceof Konstruktor`. */
+    instanceOf?: abstract new (...args: never[]) => T;
+    /** Treffer per `(value as { kind }).kind`. */
+    kind?: string;
+    /** Treffer per `(value as { elementKind }).elementKind`. */
+    elementKind?: string;
+    /** Freie Logik – kann allein oder zusätzlich zu instanceOf/kind stehen. */
+    match?: (value: T, context?: unknown) => boolean;
+}
+
+export declare const UI_ATTRIBUTE_CONTROL_REGISTRY_KEY: InjectionKey<AttributeControlRegistry<UiElement>>;
+
+export declare const UI_EDITOR_TYPE_REGISTRY_KEY: InjectionKey<TypeControlRegistry<UiElement>>;
+
+export declare const UI_FORM_TYPE_REGISTRY_KEY: InjectionKey<TypeControlRegistry<UiElement>>;
+
+export declare const UI_SCHEMA_ATTRIBUTE_REGISTRY_KEY: InjectionKey<UiSchemaAttributeRegistry>;
+
+export declare const UiElementRenderer: DefineComponent<__VLS_PublicProps_3, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+"update:modelValue": (value: Record<string, unknown>) => any;
+}, string, PublicProps, Readonly<__VLS_PublicProps_3> & Readonly<{
+"onUpdate:modelValue"?: ((value: Record<string, unknown>) => any) | undefined;
+}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+declare type UiPath = number[];
+
+export declare function useEditorContext(): EditorContext;
+
+export declare function useFormFieldLabel(rootSchema: Ref<SchemaNode>, scope: string, label: Ref<string | undefined> | undefined, fieldSchema: Ref<SchemaNode | undefined>): {
+    resolvedSchema: ComputedRef<SchemaNode>;
+    displayLabel: ComputedRef<string>;
+    description: ComputedRef<string | undefined>;
+};
+
+export declare function useJsonSchemaAttributeRegistry(): JsonSchemaAttributeRegistry;
+
+export declare function useRendererRegistry(): RendererRegistry;
+
+export declare function useSchemaAttributeControlRegistry(): AttributeControlRegistry<SchemaNode>;
+
+export declare function useSchemaEditorTypeRegistry(): TypeControlRegistry<SchemaNode>;
+
+export declare function useSchemaFormEditorState(schema: Ref<SchemaDocument>, uiSchema: Ref<UiSchema>, emit: SchemaFormEditorEmits): {
+    editorTab: Ref<EditorTab, EditorTab>;
+    selectedSchemaPath: Ref<string[], string[] | SchemaPath>;
+    selectedUiPath: Ref<number[], number[] | UiPath>;
+    uiManualEdit: Ref<boolean, boolean>;
+    showAdvancedJson: Ref<boolean, boolean>;
+    documentRef: ShallowRef<SchemaDocument, SchemaDocument>;
+    uiSchemaRef: ShallowRef<UiSchema, UiSchema>;
+    uiRoot: ComputedRef<UiElement>;
+    updateDocument: (next: SchemaDocument) => void;
+    updateUiRoot: (next: UiElement) => void;
+    regenerateUiFromSchema: () => void;
+    schemaJson: WritableComputedRef<string, string>;
+    uiSchemaJson: WritableComputedRef<string, string>;
+};
+
+export declare function useSchemaFormTypeRegistry(): TypeControlRegistry<SchemaNode>;
+
+export declare function useScopedField(rootSchema: Ref<SchemaNode>, rootData: Ref<Record<string, unknown>>, scope: string, document?: Ref<SchemaDocument | undefined>): {
+    path: ComputedRef<string[]>;
+    fieldSchema: ComputedRef<SchemaNode | undefined>;
+    value: WritableComputedRef<unknown, unknown>;
+};
+
+export declare function useUiAttributeControlRegistry(): AttributeControlRegistry<UiElement>;
+
+export declare function useUiEditorTypeRegistry(): TypeControlRegistry<UiElement>;
+
+export declare function useUiFormTypeRegistry(): TypeControlRegistry<UiElement>;
+
+export declare function useUiSchemaAttributeRegistry(): UiSchemaAttributeRegistry;
+
+export { }