@embedpdf/vue 0.0.0-stage → 3.0.0-next.16

package/dist/FormLayer.vue_vue_type_script_setup_true_lang-DUqft-xs.js

@@ -0,0 +1,683 @@
+import { computed, toValue, ref, watch, defineComponent, openBlock, createElementBlock, normalizeStyle, unref, createElementVNode, createCommentVNode, Fragment, renderList, toDisplayString, createVNode, shallowRef, onUnmounted, watchEffect, createBlock } from "vue";
+import { annotationKey, shallowEqual } from "@embedpdf/core";
+import { FormToken as FormToken$1 } from "@embedpdf/plugin-form/contract/host";
+import { InteractionToken } from "@embedpdf/plugin-interaction/contract/host";
+import { a as usePaintsPagePart } from "./page-layers-rlh4-1qr.js";
+import { a as useCapability, b as useCapabilityEvent, i as useOptionalSelector, h as useOptionalCapability } from "./capabilities-C7YzgPCX.js";
+import { u as usePage } from "./page-D9XIuLSj.js";
+import { formColorsOf, isolatePointerDown, bindWidgetEvents, rectInPixels, widgetBoxStyleOf, FORM_CONTROL_FILL, formFocusRingStyleOf, createShownUrls, loadAppearanceUrls, pictureOrPainting, shownAppearance, svgShapesOf, createOptimisticSelection, isolateWheel, showSelectedOptions, listBoxControlStyleOf, createTextFieldEditor, createFontMounts, textFieldEditorStyleOf, pressToggle } from "@embedpdf/web";
+import { FormToken, formState } from "@embedpdf/plugin-form";
+import { e as useViewerSettings } from "./documents-DUu5H4yH.js";
+import { s as settingsComposable, a as stateComposable } from "./state-DZg8q3v6.js";
+import { MITER_LIMIT } from "@embedpdf/core-annotation";
+import { RenderToken } from "@embedpdf/plugin-render/contract/host";
+import { _ as _sfc_main$a } from "./SvgShapes.vue_vue_type_script_setup_true_lang-fOTs4aqv.js";
+import { SignatureToken } from "@embedpdf/plugin-signature/contract";
+function useForm() {
+  return useCapability(FormToken);
+}
+function useFormEvent(select, handler) {
+  useCapabilityEvent(FormToken, select, handler);
+}
+const useFormState = stateComposable(formState);
+const useFormSettings = settingsComposable(FormToken);
+function useFormValue(field) {
+  return useOptionalSelector(FormToken, (form) => form.getValue(toValue(field)), null);
+}
+function useFormColors() {
+  const accent = useViewerSettings((settings) => settings.accent);
+  const focus = useFormSettings((settings) => settings.focus);
+  const fields = useFormSettings((settings) => settings.fields);
+  return computed(() => formColorsOf({ focus: focus.value, fields: fields.value }, accent.value));
+}
+function useWidgetActivation(widget) {
+  const form = useCapability(FormToken$1);
+  return () => {
+    const target = widget();
+    if (target) void form.activateWidget(target);
+  };
+}
+function useWidgetBox(item, colors, options = {}) {
+  const page = usePage();
+  const form = useCapability(FormToken$1);
+  const element = ref(null);
+  const edge = options.edge ?? true;
+  watch(
+    element,
+    (box, _previous, onCleanup) => {
+      if (!box) return;
+      const release = isolatePointerDown(box);
+      const unbind = bindWidgetEvents(box, (event) => {
+        const { fieldRef, annotationRef } = item();
+        if (annotationRef) form.notifyWidgetEvent(fieldRef, annotationRef, event);
+      });
+      onCleanup(() => {
+        release();
+        unbind();
+      });
+    },
+    { immediate: true, flush: "post" }
+  );
+  const frame = computed(() => rectInPixels(item().box, page.value.transform));
+  const style = computed(
+    () => widgetBoxStyleOf(item(), frame.value, colors(), { edge })
+  );
+  return { element, frame, style };
+}
+const _hoisted_1$7 = ["aria-label", "disabled"];
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+  __name: "ButtonControl",
+  props: {
+    item: {},
+    colors: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const activate = useWidgetActivation(() => props.item.annotationRef);
+    const { element: box, style: boxStyle } = useWidgetBox(
+      () => props.item,
+      () => props.colors,
+      { edge: false }
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "box",
+        ref: box,
+        style: normalizeStyle([unref(boxStyle), { cursor: __props.item.disabled ? "default" : "pointer" }])
+      }, [
+        createElementVNode("button", {
+          type: "button",
+          "aria-label": __props.item.label,
+          disabled: __props.item.disabled,
+          style: normalizeStyle({
+            ...unref(FORM_CONTROL_FILL),
+            padding: "0",
+            border: "0",
+            background: "transparent",
+            cursor: "inherit",
+            pointerEvents: __props.item.disabled ? "none" : "auto"
+          }),
+          onClick: _cache[0] || (_cache[0] = //@ts-ignore
+          (...args) => unref(activate) && unref(activate)(...args))
+        }, null, 12, _hoisted_1$7)
+      ], 4);
+    };
+  }
+});
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+  __name: "FormFocusRing",
+  props: {
+    visible: { type: Boolean },
+    color: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return __props.visible ? (openBlock(), createElementBlock("span", {
+        key: 0,
+        "aria-hidden": "true",
+        "data-embedpdf-form-focus-ring": "",
+        style: normalizeStyle(unref(formFocusRingStyleOf)(__props.color))
+      }, null, 4)) : createCommentVNode("", true);
+    };
+  }
+});
+const _hoisted_1$6 = ["value", "aria-label", "disabled"];
+const _hoisted_2$3 = {
+  key: 0,
+  value: ""
+};
+const _hoisted_3 = ["value"];
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+  __name: "ComboControl",
+  props: {
+    item: {},
+    colors: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const form = useCapability(FormToken$1);
+    const activate = useWidgetActivation(() => props.item.annotationRef);
+    const { element: box, style: boxStyle } = useWidgetBox(
+      () => props.item,
+      () => props.colors
+    );
+    const focused = ref(false);
+    const selectionKey = computed(() => props.item.selected.join("\0"));
+    function onChange(event) {
+      const value = event.currentTarget.value;
+      void form.setValue(props.item.fieldRef, { value: value || null });
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "box",
+        ref: box,
+        style: normalizeStyle(unref(boxStyle)),
+        onClick: _cache[2] || (_cache[2] = //@ts-ignore
+        (...args) => unref(activate) && unref(activate)(...args))
+      }, [
+        (openBlock(), createElementBlock("select", {
+          key: selectionKey.value,
+          value: __props.item.selected[0] ?? "",
+          "aria-label": __props.item.label,
+          disabled: __props.item.disabled,
+          style: normalizeStyle({
+            ...unref(FORM_CONTROL_FILL),
+            opacity: 0,
+            cursor: __props.item.disabled ? "default" : "pointer",
+            ...__props.item.disabled ? { pointerEvents: "none" } : {}
+          }),
+          onFocus: _cache[0] || (_cache[0] = ($event) => focused.value = true),
+          onBlur: _cache[1] || (_cache[1] = ($event) => focused.value = false),
+          onChange
+        }, [
+          __props.item.selected.length === 0 ? (openBlock(), createElementBlock("option", _hoisted_2$3)) : createCommentVNode("", true),
+          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.item.options, (option, index) => {
+            return openBlock(), createElementBlock("option", {
+              key: index,
+              value: option.value
+            }, toDisplayString(option.label), 9, _hoisted_3);
+          }), 128))
+        ], 44, _hoisted_1$6)),
+        createVNode(_sfc_main$8, {
+          visible: focused.value,
+          color: __props.colors.focus
+        }, null, 8, ["visible", "color"])
+      ], 4);
+    };
+  }
+});
+const _hoisted_1$5 = ["src"];
+const _hoisted_2$2 = ["viewBox"];
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+  __name: "FieldPictures",
+  setup(__props) {
+    const NO_WIDGETS = Object.freeze([]);
+    const page = usePage();
+    const form = useOptionalCapability(FormToken$1);
+    const widgets = useOptionalSelector(
+      FormToken$1,
+      (form2) => form2.listShownWidgets(page.value.ref),
+      NO_WIDGETS,
+      shallowEqual
+    );
+    const epoch = useOptionalSelector(
+      FormToken$1,
+      (form2) => form2.getAppearanceEpoch(page.value.ref),
+      ""
+    );
+    const scale = useOptionalSelector(
+      RenderToken,
+      (lens) => lens.getAppearanceScale(page.value.transform.renderScale),
+      0
+    );
+    const urls = shallowRef(null);
+    const shown = createShownUrls();
+    onUnmounted(() => shown.release());
+    watch(
+      [form, () => page.value.ref, scale, epoch],
+      ([host, pageRef, at], _previous, onCleanup) => {
+        if (!host || !at) return;
+        onCleanup(
+          loadAppearanceUrls(
+            shown,
+            (signal) => host.renderAppearances(pageRef, at, signal),
+            annotationKey,
+            (loaded) => urls.value = loaded
+          )
+        );
+      },
+      { immediate: true }
+    );
+    const looks = computed(
+      () => widgets.value.flatMap((widget) => {
+        const key = annotationKey(widget.ref);
+        const look = pictureOrPainting({
+          pending: widget.pending,
+          picture: urls.value && shownAppearance(urls.value, key, widget.appearanceState),
+          version: widget.pictureVersion,
+          loaded: urls.value !== null,
+          paint: () => {
+            var _a;
+            return ((_a = form.value) == null ? void 0 : _a.getWidgetPainting(widget.ref)) ?? null;
+          }
+        });
+        if (!look) return [];
+        if (look.kind === "picture") {
+          return [
+            {
+              kind: "picture",
+              key,
+              url: look.picture.url,
+              frame: rectInPixels(look.picture.box, page.value.transform)
+            }
+          ];
+        }
+        const { x, y, width, height } = widget.rect;
+        return [
+          {
+            kind: "painting",
+            key,
+            viewBox: `${x} ${y} ${width} ${height}`,
+            shapes: svgShapesOf(look.painting.scene, { miterLimit: MITER_LIMIT }),
+            frame: rectInPixels(widget.rect, page.value.transform)
+          }
+        ];
+      })
+    );
+    return (_ctx, _cache) => {
+      return openBlock(true), createElementBlock(Fragment, null, renderList(looks.value, (look) => {
+        return openBlock(), createElementBlock(Fragment, {
+          key: look.key
+        }, [
+          look.kind === "picture" ? (openBlock(), createElementBlock("img", {
+            key: 0,
+            src: look.url,
+            alt: "",
+            draggable: "false",
+            style: normalizeStyle({
+              position: "absolute",
+              left: `${look.frame.left}px`,
+              top: `${look.frame.top}px`,
+              width: `${look.frame.width}px`,
+              height: `${look.frame.height}px`,
+              // A global `img { max-width: 100% }` reset would clamp it.
+              maxWidth: "none",
+              maxHeight: "none",
+              pointerEvents: "none"
+            })
+          }, null, 12, _hoisted_1$5)) : (openBlock(), createElementBlock("svg", {
+            key: 1,
+            viewBox: look.viewBox,
+            style: normalizeStyle({
+              position: "absolute",
+              left: `${look.frame.left}px`,
+              top: `${look.frame.top}px`,
+              width: `${look.frame.width}px`,
+              height: `${look.frame.height}px`,
+              overflow: "visible",
+              pointerEvents: "none"
+            })
+          }, [
+            createVNode(_sfc_main$a, {
+              shapes: look.shapes
+            }, null, 8, ["shapes"])
+          ], 12, _hoisted_2$2))
+        ], 64);
+      }), 128);
+    };
+  }
+});
+const _hoisted_1$4 = ["aria-label", "multiple", "size", "disabled"];
+const _hoisted_2$1 = ["value"];
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  __name: "NativeListBox",
+  props: {
+    label: {},
+    disabled: { type: Boolean },
+    multi: { type: Boolean },
+    options: {},
+    selected: {},
+    onSelect: { type: Function }
+  },
+  emits: ["focus", "blur"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const selection = createOptimisticSelection(props.selected);
+    const shown = shallowRef(selection.get());
+    onUnmounted(selection.subscribe(() => shown.value = selection.get()));
+    watch(
+      () => props.selected,
+      (values) => selection.setConfirmed(values)
+    );
+    const control = ref(null);
+    watch(
+      control,
+      (element, _previous, onCleanup) => {
+        if (element) onCleanup(isolateWheel(element));
+      },
+      { immediate: true, flush: "post" }
+    );
+    watch(
+      [control, shown, () => props.options],
+      ([element, values]) => {
+        if (element) showSelectedOptions(element, values);
+      },
+      { immediate: true, flush: "post" }
+    );
+    function onChange(event) {
+      const element = event.currentTarget;
+      selection.choose(
+        Array.from(element.selectedOptions).map((option) => option.value),
+        props.onSelect
+      );
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("select", {
+        ref_key: "control",
+        ref: control,
+        "aria-label": __props.label,
+        multiple: __props.multi,
+        size: Math.max(2, __props.options.length),
+        disabled: __props.disabled,
+        onFocus: _cache[0] || (_cache[0] = ($event) => emit("focus")),
+        onBlur: _cache[1] || (_cache[1] = ($event) => emit("blur")),
+        onChange
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option, index) => {
+          return openBlock(), createElementBlock("option", {
+            key: index,
+            value: option.value
+          }, toDisplayString(option.label), 9, _hoisted_2$1);
+        }), 128))
+      ], 40, _hoisted_1$4);
+    };
+  }
+});
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  __name: "ListControl",
+  props: {
+    item: {},
+    colors: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const form = useCapability(FormToken$1);
+    const activate = useWidgetActivation(() => props.item.annotationRef);
+    const {
+      element: box,
+      frame,
+      style: boxStyle
+    } = useWidgetBox(
+      () => props.item,
+      () => props.colors,
+      { edge: false }
+    );
+    const focused = ref(false);
+    const select = (values) => form.setValue(props.item.fieldRef, { selectedValues: values });
+    const listStyle = computed(() => listBoxControlStyleOf(props.item, frame.value, props.colors));
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "box",
+        ref: box,
+        style: normalizeStyle(unref(boxStyle)),
+        onClick: _cache[2] || (_cache[2] = //@ts-ignore
+        (...args) => unref(activate) && unref(activate)(...args))
+      }, [
+        createVNode(_sfc_main$5, {
+          label: __props.item.label,
+          disabled: __props.item.disabled,
+          multi: __props.item.multi,
+          options: __props.item.options,
+          selected: __props.item.selected,
+          "on-select": select,
+          style: normalizeStyle(listStyle.value),
+          onFocus: _cache[0] || (_cache[0] = ($event) => focused.value = true),
+          onBlur: _cache[1] || (_cache[1] = ($event) => focused.value = false)
+        }, null, 8, ["label", "disabled", "multi", "options", "selected", "style"]),
+        createVNode(_sfc_main$8, {
+          visible: focused.value,
+          color: __props.colors.focus
+        }, null, 8, ["visible", "color"])
+      ], 4);
+    };
+  }
+});
+const _hoisted_1$3 = ["aria-label", "data-signed"];
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "SignatureControl",
+  props: {
+    item: {},
+    colors: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const { element: box, style: boxStyle } = useWidgetBox(
+      () => props.item,
+      () => props.colors
+    );
+    const signature = useOptionalCapability(SignatureToken);
+    const known = useOptionalSelector(
+      SignatureToken,
+      (capability) => {
+        var _a;
+        return ((_a = capability.getSignature(props.item.fieldRef)) == null ? void 0 : _a.signed) ?? null;
+      },
+      null
+    );
+    const signed = computed(() => known.value ?? props.item.signed);
+    const actionable = computed(
+      () => signature.value !== null && (signed.value || !props.item.disabled)
+    );
+    function onClick() {
+      const plugin = signature.value;
+      if (!plugin) return;
+      if (signed.value) plugin.requestInspection(props.item.fieldRef);
+      else plugin.setTarget(props.item.fieldRef);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "box",
+        ref: box,
+        style: normalizeStyle([unref(boxStyle), { cursor: actionable.value ? "pointer" : "default" }])
+      }, [
+        actionable.value ? (openBlock(), createElementBlock("button", {
+          key: 0,
+          type: "button",
+          "aria-label": __props.item.label,
+          "data-signed": signed.value ? "" : void 0,
+          style: normalizeStyle({
+            ...unref(FORM_CONTROL_FILL),
+            padding: "0",
+            border: "0",
+            background: "transparent",
+            cursor: "inherit"
+          }),
+          onClick
+        }, null, 12, _hoisted_1$3)) : createCommentVNode("", true)
+      ], 4);
+    };
+  }
+});
+const _hoisted_1$2 = ["value", "maxlength", "aria-label", "disabled"];
+const _hoisted_2 = ["type", "value", "maxlength", "aria-label", "disabled"];
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "TextControl",
+  props: {
+    item: {},
+    colors: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const form = useCapability(FormToken$1);
+    const activate = useWidgetActivation(() => props.item.annotationRef);
+    const { element: box, frame, style: boxStyle } = useWidgetBox(
+      () => props.item,
+      () => props.colors
+    );
+    const editor = createTextFieldEditor(form, props.item.fieldRef, props.item.value);
+    const state = shallowRef(editor.getState());
+    onUnmounted(editor.subscribe(() => state.value = editor.getState()));
+    watch(
+      () => props.item.value,
+      (value) => editor.setValue(value)
+    );
+    const layout = computed(
+      () => props.item.annotationRef ? form.getTextEditorLayout(props.item.annotationRef, state.value.draft) : null
+    );
+    const mounts = createFontMounts();
+    onUnmounted(() => mounts.release());
+    watchEffect(() => {
+      if (layout.value) mounts.mount([layout.value.program]);
+    });
+    const editorStyle = computed(
+      () => textFieldEditorStyleOf(props.item, frame.value, props.colors, state.value.focused, layout.value)
+    );
+    const onInput = (event) => editor.input(event.target.value);
+    function onKeydown(event) {
+      if (editor.keyDown(event.key, props.item.multiline)) {
+        event.currentTarget.blur();
+      }
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "box",
+        ref: box,
+        style: normalizeStyle(unref(boxStyle)),
+        onClick: _cache[4] || (_cache[4] = //@ts-ignore
+        (...args) => unref(activate) && unref(activate)(...args))
+      }, [
+        __props.item.multiline ? (openBlock(), createElementBlock("textarea", {
+          key: 0,
+          value: state.value.draft,
+          maxlength: __props.item.maxLength ?? void 0,
+          "aria-label": __props.item.label,
+          disabled: __props.item.disabled,
+          style: normalizeStyle(editorStyle.value),
+          onFocus: _cache[0] || (_cache[0] = //@ts-ignore
+          (...args) => unref(editor).focus && unref(editor).focus(...args)),
+          onInput,
+          onBlur: _cache[1] || (_cache[1] = //@ts-ignore
+          (...args) => unref(editor).blur && unref(editor).blur(...args)),
+          onKeydown
+        }, null, 44, _hoisted_1$2)) : (openBlock(), createElementBlock("input", {
+          key: 1,
+          type: __props.item.password ? "password" : "text",
+          value: state.value.draft,
+          maxlength: __props.item.maxLength ?? void 0,
+          "aria-label": __props.item.label,
+          disabled: __props.item.disabled,
+          style: normalizeStyle(editorStyle.value),
+          onFocus: _cache[2] || (_cache[2] = //@ts-ignore
+          (...args) => unref(editor).focus && unref(editor).focus(...args)),
+          onInput,
+          onBlur: _cache[3] || (_cache[3] = //@ts-ignore
+          (...args) => unref(editor).blur && unref(editor).blur(...args)),
+          onKeydown
+        }, null, 44, _hoisted_2))
+      ], 4);
+    };
+  }
+});
+const _hoisted_1$1 = ["role", "aria-checked", "aria-label", "tabindex"];
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "ToggleControl",
+  props: {
+    item: {},
+    colors: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const form = useCapability(FormToken$1);
+    const activate = useWidgetActivation(() => props.item.annotationRef);
+    const { element: box, style: boxStyle } = useWidgetBox(
+      () => props.item,
+      () => props.colors
+    );
+    const focused = ref(false);
+    const press = () => pressToggle(form, props.item, activate);
+    function onKeydown(event) {
+      if (event.key !== " " && event.key !== "Enter") return;
+      event.preventDefault();
+      press();
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "box",
+        ref: box,
+        role: __props.item.kind === "checkbox" ? "checkbox" : "radio",
+        "aria-checked": __props.item.checked,
+        "aria-label": __props.item.label,
+        tabindex: __props.item.disabled ? -1 : 0,
+        style: normalizeStyle([unref(boxStyle), { cursor: __props.item.disabled ? "default" : "pointer", outline: "none" }]),
+        onClick: press,
+        onKeydown,
+        onFocus: _cache[0] || (_cache[0] = ($event) => focused.value = true),
+        onBlur: _cache[1] || (_cache[1] = ($event) => focused.value = false)
+      }, [
+        createVNode(_sfc_main$8, {
+          visible: focused.value,
+          color: __props.colors.focus
+        }, null, 8, ["visible", "color"])
+      ], 44, _hoisted_1$1);
+    };
+  }
+});
+const _hoisted_1 = { style: { position: "absolute", inset: "0", pointerEvents: "none" } };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "FormLayer",
+  setup(__props) {
+    const NO_WIDGETS = Object.freeze([]);
+    const page = usePage();
+    const form = useOptionalCapability(FormToken$1);
+    usePaintsPagePart(
+      computed(() => form.value ? page.value.ref : null),
+      "formFields"
+    );
+    const colors = useFormColors();
+    const active = useOptionalSelector(
+      InteractionToken,
+      (interaction) => interaction.activeToolEnables("form-fill"),
+      false
+    );
+    const items = useOptionalSelector(
+      FormToken$1,
+      (lens) => lens.listWidgets(page.value.ref),
+      NO_WIDGETS,
+      shallowEqual
+    );
+    watch(
+      [form, () => page.value.ref],
+      ([lens, pageRef]) => {
+        if (lens) void lens.ensureLoaded(pageRef);
+      },
+      { immediate: true }
+    );
+    const keyOf = (item) => `${item.key}:${item.annotObjectNumber}`;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(_sfc_main$6),
+        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(active) ? unref(items) : [], (item) => {
+          return openBlock(), createElementBlock(Fragment, {
+            key: keyOf(item)
+          }, [
+            item.control === "text" ? (openBlock(), createBlock(_sfc_main$2, {
+              key: 0,
+              item,
+              colors: unref(colors)
+            }, null, 8, ["item", "colors"])) : item.control === "toggle" ? (openBlock(), createBlock(_sfc_main$1, {
+              key: 1,
+              item,
+              colors: unref(colors)
+            }, null, 8, ["item", "colors"])) : item.control === "choice" && item.kind === "list" ? (openBlock(), createBlock(_sfc_main$4, {
+              key: 2,
+              item,
+              colors: unref(colors)
+            }, null, 8, ["item", "colors"])) : item.control === "choice" ? (openBlock(), createBlock(_sfc_main$7, {
+              key: 3,
+              item,
+              colors: unref(colors)
+            }, null, 8, ["item", "colors"])) : item.control === "button" ? (openBlock(), createBlock(_sfc_main$9, {
+              key: 4,
+              item,
+              colors: unref(colors)
+            }, null, 8, ["item", "colors"])) : item.control === "signature" ? (openBlock(), createBlock(_sfc_main$3, {
+              key: 5,
+              item,
+              colors: unref(colors)
+            }, null, 8, ["item", "colors"])) : createCommentVNode("", true)
+          ], 64);
+        }), 128))
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as _,
+  useFormEvent as a,
+  useFormSettings as b,
+  useFormState as c,
+  useFormValue as d,
+  useForm as u
+};
+//# sourceMappingURL=FormLayer.vue_vue_type_script_setup_true_lang-DUqft-xs.js.map