@fieldia/designer 0.0.0-stage → 0.11.0

package/src/react.d.mts

@@ -0,0 +1,21 @@
+import { type CSSProperties } from 'react';
+import type { Skin } from '@fieldia/viewer';
+import type { Designer } from './lib/designer.mjs';
+import { type ScreenEditorHandle } from './lib/screen-editor.mjs';
+import { type SurveyEditorHandle } from './lib/survey-editor.mjs';
+/**
+ * The designer's editors as React components: `@fieldia/designer/react`. Each
+ * mounts the plain-DOM editor into its own element and takes it down when it
+ * goes; a new designer or skin mounts it again. The ref is the handle.
+ */
+interface Common {
+    designer: Designer;
+    skin?: Skin;
+    className?: string;
+    style?: CSSProperties;
+}
+export type SurveyEditorProps = Common;
+export type ScreenEditorProps = Common;
+export declare const SurveyEditor: import("react").ForwardRefExoticComponent<Common & import("react").RefAttributes<SurveyEditorHandle | null>>;
+export declare const ScreenEditor: import("react").ForwardRefExoticComponent<Common & import("react").RefAttributes<ScreenEditorHandle | null>>;
+export {};

package/src/react.d.ts

@@ -0,0 +1,21 @@
+import { type CSSProperties } from 'react';
+import type { Skin } from '@fieldia/viewer';
+import type { Designer } from './lib/designer';
+import { type ScreenEditorHandle } from './lib/screen-editor';
+import { type SurveyEditorHandle } from './lib/survey-editor';
+/**
+ * The designer's editors as React components: `@fieldia/designer/react`. Each
+ * mounts the plain-DOM editor into its own element and takes it down when it
+ * goes; a new designer or skin mounts it again. The ref is the handle.
+ */
+interface Common {
+    designer: Designer;
+    skin?: Skin;
+    className?: string;
+    style?: CSSProperties;
+}
+export type SurveyEditorProps = Common;
+export type ScreenEditorProps = Common;
+export declare const SurveyEditor: import("react").ForwardRefExoticComponent<Common & import("react").RefAttributes<SurveyEditorHandle | null>>;
+export declare const ScreenEditor: import("react").ForwardRefExoticComponent<Common & import("react").RefAttributes<ScreenEditorHandle | null>>;
+export {};

package/src/react.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScreenEditor = exports.SurveyEditor = void 0;
+const react_1 = require("react");
+const screen_editor_1 = require("./lib/screen-editor");
+const survey_editor_1 = require("./lib/survey-editor");
+exports.SurveyEditor = (0, react_1.forwardRef)(function SurveyEditor(props, ref) {
+    const host = (0, react_1.useRef)(null);
+    const [handle, setHandle] = (0, react_1.useState)(null);
+    (0, react_1.useImperativeHandle)(ref, () => handle, [handle]);
+    (0, react_1.useEffect)(() => {
+        const mounted = (0, survey_editor_1.mountSurveyEditor)(host.current, { designer: props.designer, skin: props.skin });
+        setHandle(mounted);
+        return () => {
+            mounted.destroy();
+            setHandle(null);
+        };
+    }, [props.designer, props.skin]);
+    return (0, react_1.createElement)('div', { ref: host, className: props.className, style: props.style });
+});
+exports.ScreenEditor = (0, react_1.forwardRef)(function ScreenEditor(props, ref) {
+    const host = (0, react_1.useRef)(null);
+    const [handle, setHandle] = (0, react_1.useState)(null);
+    (0, react_1.useImperativeHandle)(ref, () => handle, [handle]);
+    (0, react_1.useEffect)(() => {
+        const mounted = (0, screen_editor_1.mountScreenEditor)(host.current, { designer: props.designer, skin: props.skin });
+        setHandle(mounted);
+        return () => {
+            mounted.destroy();
+            setHandle(null);
+        };
+    }, [props.designer, props.skin]);
+    return (0, react_1.createElement)('div', { ref: host, className: props.className, style: props.style });
+});
+//# sourceMappingURL=react.js.map

package/src/react.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../../libs/designer/src/react.ts"],"names":[],"mappings":";;;AAAA,iCAAwH;AAGxH,uDAAiF;AACjF,uDAAiF;AAmBpE,QAAA,YAAY,GAAG,IAAA,kBAAU,EAA+C,SAAS,YAAY,CAAC,KAAK,EAAE,GAAG;IACnH,MAAM,IAAI,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAC1C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAA4B,IAAI,CAAC,CAAC;IACtE,IAAA,2BAAmB,EAAC,GAAG,EAAE,GAAG,EAAE,CAAC,MAA4B,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IACvE,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,IAAA,iCAAiB,EAAC,IAAI,CAAC,OAAyB,EAAE,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC;QAClH,SAAS,CAAC,OAAO,CAAC,CAAC;QACnB,OAAO,GAAG,EAAE;YACV,OAAO,CAAC,OAAO,EAAE,CAAC;YAClB,SAAS,CAAC,IAAI,CAAC,CAAC;QAClB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;IACjC,OAAO,IAAA,qBAAa,EAAC,KAAK,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC;AAC7F,CAAC,CAAC,CAAC;AAEU,QAAA,YAAY,GAAG,IAAA,kBAAU,EAA+C,SAAS,YAAY,CAAC,KAAK,EAAE,GAAG;IACnH,MAAM,IAAI,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAC1C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAA4B,IAAI,CAAC,CAAC;IACtE,IAAA,2BAAmB,EAAC,GAAG,EAAE,GAAG,EAAE,CAAC,MAA4B,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IACvE,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,IAAA,iCAAiB,EAAC,IAAI,CAAC,OAAyB,EAAE,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC;QAClH,SAAS,CAAC,OAAO,CAAC,CAAC;QACnB,OAAO,GAAG,EAAE;YACV,OAAO,CAAC,OAAO,EAAE,CAAC;YAClB,SAAS,CAAC,IAAI,CAAC,CAAC;QAClB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;IACjC,OAAO,IAAA,qBAAa,EAAC,KAAK,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC;AAC7F,CAAC,CAAC,CAAC"}

package/src/react.mjs

@@ -0,0 +1,32 @@
+import { createElement, forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { mountScreenEditor } from './lib/screen-editor.mjs';
+import { mountSurveyEditor } from './lib/survey-editor.mjs';
+export const SurveyEditor = forwardRef(function SurveyEditor(props, ref) {
+    const host = useRef(null);
+    const [handle, setHandle] = useState(null);
+    useImperativeHandle(ref, () => handle, [handle]);
+    useEffect(() => {
+        const mounted = mountSurveyEditor(host.current, { designer: props.designer, skin: props.skin });
+        setHandle(mounted);
+        return () => {
+            mounted.destroy();
+            setHandle(null);
+        };
+    }, [props.designer, props.skin]);
+    return createElement('div', { ref: host, className: props.className, style: props.style });
+});
+export const ScreenEditor = forwardRef(function ScreenEditor(props, ref) {
+    const host = useRef(null);
+    const [handle, setHandle] = useState(null);
+    useImperativeHandle(ref, () => handle, [handle]);
+    useEffect(() => {
+        const mounted = mountScreenEditor(host.current, { designer: props.designer, skin: props.skin });
+        setHandle(mounted);
+        return () => {
+            mounted.destroy();
+            setHandle(null);
+        };
+    }, [props.designer, props.skin]);
+    return createElement('div', { ref: host, className: props.className, style: props.style });
+});
+//# sourceMappingURL=react.mjs.map

package/src/react.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.mjs","sourceRoot":"","sources":["../../../../libs/designer/src/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,EAAE,QAAQ,EAAsB,MAAM,OAAO,CAAC;AAGxH,OAAO,EAAE,iBAAiB,EAA2B,MAAM,qBAAqB,CAAC;AACjF,OAAO,EAAE,iBAAiB,EAA2B,MAAM,qBAAqB,CAAC;AAmBjF,MAAM,CAAC,MAAM,YAAY,GAAG,UAAU,CAA+C,SAAS,YAAY,CAAC,KAAK,EAAE,GAAG;IACnH,MAAM,IAAI,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC1C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAA4B,IAAI,CAAC,CAAC;IACtE,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,MAA4B,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IACvE,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,iBAAiB,CAAC,IAAI,CAAC,OAAyB,EAAE,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC;QAClH,SAAS,CAAC,OAAO,CAAC,CAAC;QACnB,OAAO,GAAG,EAAE;YACV,OAAO,CAAC,OAAO,EAAE,CAAC;YAClB,SAAS,CAAC,IAAI,CAAC,CAAC;QAClB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;IACjC,OAAO,aAAa,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC;AAC7F,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,YAAY,GAAG,UAAU,CAA+C,SAAS,YAAY,CAAC,KAAK,EAAE,GAAG;IACnH,MAAM,IAAI,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC1C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAA4B,IAAI,CAAC,CAAC;IACtE,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,MAA4B,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IACvE,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,iBAAiB,CAAC,IAAI,CAAC,OAAyB,EAAE,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC;QAClH,SAAS,CAAC,OAAO,CAAC,CAAC;QACnB,OAAO,GAAG,EAAE;YACV,OAAO,CAAC,OAAO,EAAE,CAAC;YAClB,SAAS,CAAC,IAAI,CAAC,CAAC;QAClB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;IACjC,OAAO,aAAa,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC;AAC7F,CAAC,CAAC,CAAC"}

package/src/vue.d.mts

@@ -0,0 +1,65 @@
+import { type PropType } from 'vue';
+import type { Skin } from '@fieldia/viewer';
+import type { Designer } from './lib/designer.mjs';
+import { type ScreenEditorHandle } from './lib/screen-editor.mjs';
+import { type SurveyEditorHandle } from './lib/survey-editor.mjs';
+/**
+ * The designer's editors as Vue components: `@fieldia/designer/vue`. Each
+ * mounts the plain-DOM editor into its own element and takes it down when it
+ * goes; a new designer, skin or kit mounts it again. `ready` hands out the
+ * handle.
+ */
+export declare const SurveyEditor: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    designer: {
+        type: PropType<Designer>;
+        required: true;
+    };
+    skin: {
+        type: PropType<Skin>;
+        default: undefined;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    ready: (_handle: SurveyEditorHandle) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    designer: {
+        type: PropType<Designer>;
+        required: true;
+    };
+    skin: {
+        type: PropType<Skin>;
+        default: undefined;
+    };
+}>> & Readonly<{
+    onReady?: ((_handle: SurveyEditorHandle) => any) | undefined;
+}>, {
+    skin: Skin;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export declare const ScreenEditor: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    designer: {
+        type: PropType<Designer>;
+        required: true;
+    };
+    skin: {
+        type: PropType<Skin>;
+        default: undefined;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    ready: (_handle: ScreenEditorHandle) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    designer: {
+        type: PropType<Designer>;
+        required: true;
+    };
+    skin: {
+        type: PropType<Skin>;
+        default: undefined;
+    };
+}>> & Readonly<{
+    onReady?: ((_handle: ScreenEditorHandle) => any) | undefined;
+}>, {
+    skin: Skin;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/src/vue.d.ts

@@ -0,0 +1,65 @@
+import { type PropType } from 'vue';
+import type { Skin } from '@fieldia/viewer';
+import type { Designer } from './lib/designer';
+import { type ScreenEditorHandle } from './lib/screen-editor';
+import { type SurveyEditorHandle } from './lib/survey-editor';
+/**
+ * The designer's editors as Vue components: `@fieldia/designer/vue`. Each
+ * mounts the plain-DOM editor into its own element and takes it down when it
+ * goes; a new designer, skin or kit mounts it again. `ready` hands out the
+ * handle.
+ */
+export declare const SurveyEditor: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    designer: {
+        type: PropType<Designer>;
+        required: true;
+    };
+    skin: {
+        type: PropType<Skin>;
+        default: undefined;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    ready: (_handle: SurveyEditorHandle) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    designer: {
+        type: PropType<Designer>;
+        required: true;
+    };
+    skin: {
+        type: PropType<Skin>;
+        default: undefined;
+    };
+}>> & Readonly<{
+    onReady?: ((_handle: SurveyEditorHandle) => any) | undefined;
+}>, {
+    skin: Skin;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export declare const ScreenEditor: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    designer: {
+        type: PropType<Designer>;
+        required: true;
+    };
+    skin: {
+        type: PropType<Skin>;
+        default: undefined;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    ready: (_handle: ScreenEditorHandle) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    designer: {
+        type: PropType<Designer>;
+        required: true;
+    };
+    skin: {
+        type: PropType<Skin>;
+        default: undefined;
+    };
+}>> & Readonly<{
+    onReady?: ((_handle: ScreenEditorHandle) => any) | undefined;
+}>, {
+    skin: Skin;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/src/vue.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScreenEditor = exports.SurveyEditor = void 0;
+const vue_1 = require("vue");
+const screen_editor_1 = require("./lib/screen-editor");
+const survey_editor_1 = require("./lib/survey-editor");
+/**
+ * The designer's editors as Vue components: `@fieldia/designer/vue`. Each
+ * mounts the plain-DOM editor into its own element and takes it down when it
+ * goes; a new designer, skin or kit mounts it again. `ready` hands out the
+ * handle.
+ */
+exports.SurveyEditor = (0, vue_1.defineComponent)({
+    name: 'FieldiaSurveyEditor',
+    props: {
+        designer: { type: Object, required: true },
+        skin: { type: String, default: undefined },
+    },
+    emits: { ready: (_handle) => true },
+    setup(props, { emit, expose }) {
+        const host = (0, vue_1.ref)();
+        let handle = null;
+        const mount = () => {
+            handle?.destroy();
+            handle = (0, survey_editor_1.mountSurveyEditor)(host.value, { designer: props.designer, skin: props.skin });
+            emit('ready', handle);
+        };
+        (0, vue_1.onMounted)(mount);
+        (0, vue_1.watch)(() => [props.designer, props.skin], mount);
+        (0, vue_1.onBeforeUnmount)(() => handle?.destroy());
+        expose({ handle: () => handle });
+        return () => (0, vue_1.h)('div', { ref: host });
+    },
+});
+exports.ScreenEditor = (0, vue_1.defineComponent)({
+    name: 'FieldiaScreenEditor',
+    props: {
+        designer: { type: Object, required: true },
+        skin: { type: String, default: undefined },
+    },
+    emits: { ready: (_handle) => true },
+    setup(props, { emit, expose }) {
+        const host = (0, vue_1.ref)();
+        let handle = null;
+        const mount = () => {
+            handle?.destroy();
+            handle = (0, screen_editor_1.mountScreenEditor)(host.value, { designer: props.designer, skin: props.skin });
+            emit('ready', handle);
+        };
+        (0, vue_1.onMounted)(mount);
+        (0, vue_1.watch)(() => [props.designer, props.skin], mount);
+        (0, vue_1.onBeforeUnmount)(() => handle?.destroy());
+        expose({ handle: () => handle });
+        return () => (0, vue_1.h)('div', { ref: host });
+    },
+});
+//# sourceMappingURL=vue.js.map

package/src/vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vue.js","sourceRoot":"","sources":["../../../../libs/designer/src/vue.ts"],"names":[],"mappings":"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"}

package/src/vue.mjs

@@ -0,0 +1,54 @@
+import { defineComponent, h, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { mountScreenEditor } from './lib/screen-editor.mjs';
+import { mountSurveyEditor } from './lib/survey-editor.mjs';
+/**
+ * The designer's editors as Vue components: `@fieldia/designer/vue`. Each
+ * mounts the plain-DOM editor into its own element and takes it down when it
+ * goes; a new designer, skin or kit mounts it again. `ready` hands out the
+ * handle.
+ */
+export const SurveyEditor = defineComponent({
+    name: 'FieldiaSurveyEditor',
+    props: {
+        designer: { type: Object, required: true },
+        skin: { type: String, default: undefined },
+    },
+    emits: { ready: (_handle) => true },
+    setup(props, { emit, expose }) {
+        const host = ref();
+        let handle = null;
+        const mount = () => {
+            handle?.destroy();
+            handle = mountSurveyEditor(host.value, { designer: props.designer, skin: props.skin });
+            emit('ready', handle);
+        };
+        onMounted(mount);
+        watch(() => [props.designer, props.skin], mount);
+        onBeforeUnmount(() => handle?.destroy());
+        expose({ handle: () => handle });
+        return () => h('div', { ref: host });
+    },
+});
+export const ScreenEditor = defineComponent({
+    name: 'FieldiaScreenEditor',
+    props: {
+        designer: { type: Object, required: true },
+        skin: { type: String, default: undefined },
+    },
+    emits: { ready: (_handle) => true },
+    setup(props, { emit, expose }) {
+        const host = ref();
+        let handle = null;
+        const mount = () => {
+            handle?.destroy();
+            handle = mountScreenEditor(host.value, { designer: props.designer, skin: props.skin });
+            emit('ready', handle);
+        };
+        onMounted(mount);
+        watch(() => [props.designer, props.skin], mount);
+        onBeforeUnmount(() => handle?.destroy());
+        expose({ handle: () => handle });
+        return () => h('div', { ref: host });
+    },
+});
+//# sourceMappingURL=vue.mjs.map

package/src/vue.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"vue.mjs","sourceRoot":"","sources":["../../../../libs/designer/src/vue.ts"],"names":[],"mappings":"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"}