@useinsider/ab-components 0.0.113-beta.2 → 0.0.115-beta.5

package/dist/index.d.ts

@@ -10,8 +10,10 @@ import { CSSProperties } from 'vue';
 import { DebuggerEvent } from 'vue';
 import { DefineComponent } from 'vue';
 import { DirectiveBinding } from 'vue';
+import { editor } from 'monaco-editor';
 import { GlobalComponents } from 'vue';
 import { GlobalDirectives } from 'vue';
+import { monacoEditor } from 'monaco-editor';
 import { nextTick } from 'vue';
 import { OnCleanup } from '@vue/reactivity';
 import { Placement } from '@floating-ui/vue';
@@ -1057,6 +1059,11 @@ declare interface InToggleProps {
     disabled?: boolean;
 }
 
+export declare interface LiquidVariable {
+    key: string;
+    displayName?: string;
+}
+
 export declare interface MenuItem {
     text: string;
     value: string;
@@ -1078,6 +1085,59 @@ declare interface ModalProps {
     hasOverlay?: boolean;
 }
 
+export declare const MonacoEditor: DefineComponent<MonacoEditorProps, {
+getCode: () => Promise<{
+code: string;
+valid: boolean;
+}>;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+"update:codeEditorLength": (length: number) => any;
+"update:shouldShowLengthError": (show: boolean) => any;
+"update:valid": (valid: boolean) => any;
+ready: (editor: editor.IStandaloneCodeEditor) => any;
+destroyed: () => any;
+}, string, PublicProps, Readonly<MonacoEditorProps> & Readonly<{
+"onUpdate:codeEditorLength"?: ((length: number) => any) | undefined;
+"onUpdate:shouldShowLengthError"?: ((show: boolean) => any) | undefined;
+"onUpdate:valid"?: ((valid: boolean) => any) | undefined;
+onReady?: ((editor: editor.IStandaloneCodeEditor) => any) | undefined;
+onDestroyed?: (() => any) | undefined;
+}>, {
+code: string;
+placeholder: string;
+language: keyof ReturnType<typeof useValidators>;
+disableValidation: boolean;
+liquidVariables: LiquidVariable[];
+editorOptions: editor.IStandaloneEditorConstructionOptions;
+errorGlyph: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {
+iframe: HTMLIFrameElement;
+}, HTMLIFrameElement>;
+
+export declare interface MonacoEditorProps {
+    language?: keyof ReturnType<typeof useValidators>;
+    code?: string;
+    disableValidation?: boolean;
+    /**
+     * Absolute URL to the served Monaco `vs` directory. The consuming app must
+     * host these assets. When omitted, falls back to the current origin + `/vs`.
+     */
+    monacoVsPath?: string;
+    /**
+     * Dynamic variables suggested by autocomplete when `language` is `liquid`.
+     */
+    liquidVariables?: LiquidVariable[];
+    /**
+     * Per-consumer Monaco options merged over the shared defaults (e.g. disabling
+     * the minimap). `language`/`value` are always owned by the component.
+     */
+    editorOptions?: editor.IStandaloneEditorConstructionOptions;
+    /** Render the custom error icon (gutter) + hover infobox. Off by default. */
+    errorGlyph?: boolean;
+    /** Dimmed text shown over the editor while it is empty. */
+    placeholder?: string;
+}
+
 export declare const NumberInput: DefineComponent<Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 input: (event: Event) => any;
 blur: (event: FocusEvent) => any;
@@ -1358,4 +1418,26 @@ declare interface TypographyProps {
 
 declare type TypographyVariant = 'heading' | 'title' | 'body' | 'body-default' | 'body-muted' | 'label' | 'detail' | 'detail-muted' | 'detail-danger' | 'section';
 
+declare function useValidators(): {
+    javascript(editor: editor, monaco: monacoEditor): Promise<{
+        valid: boolean;
+        results: editor[];
+    }>;
+    html(editor: editor, monaco: monacoEditor): Promise<{
+        valid: boolean;
+        results: never[];
+    } | {
+        valid: false;
+        results: editor[];
+    }>;
+    css(editor: editor, monaco: monacoEditor): Promise<{
+        valid: boolean;
+        results: editor[];
+    }>;
+    liquid(editor: editor, monaco: monacoEditor, knownKeys?: string[] | undefined): Promise<{
+        valid: boolean;
+        results: editor[];
+    }>;
+};
+
 export { }