@frigear-nu/forms 0.0.6 → 0.0.7

package/dist/runtime/app/components/FormBuilderCaptchaSettings.d.vue.ts

@@ -0,0 +1,15 @@
+import type { FormField } from '../../../types.js';
+import type { CaptchaSecrets } from '../composables/useCaptchaSecrets.js';
+type __VLS_Props = {
+    field: FormField;
+    /** The saved form; enables the per-form secret key. */
+    formId?: string;
+    secrets: CaptchaSecrets;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    patch: (patch: Partial<import("../../utils/index.js").CaptchaConfig>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onPatch?: ((patch: Partial<import("../../utils/index.js").CaptchaConfig>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/FormBuilderCaptchaSettings.vue

@@ -0,0 +1,126 @@
+<script setup>
+import { captchaProviders } from "../../utils";
+import { captchaSiteKey } from "../composables/useCaptcha";
+const props = defineProps({
+  field: { type: Object, required: true },
+  formId: { type: String, required: false },
+  secrets: { type: null, required: true }
+});
+const emit = defineEmits(["patch"]);
+const t = useModuleT("forms");
+const providerItems = computed(() => captchaProviders.map((value) => ({ value, label: t(`captcha.providers.${value}`, value) })));
+const themeItems = computed(() => [
+  { value: "auto", label: t("captcha.themes.auto", "Automatic") },
+  { value: "light", label: t("captcha.themes.light", "Light") },
+  { value: "dark", label: t("captcha.themes.dark", "Dark") }
+]);
+const sizeItems = computed(() => [
+  { value: "normal", label: t("captcha.sizes.normal", "Normal") },
+  { value: "compact", label: t("captcha.sizes.compact", "Compact") }
+]);
+const keyMissing = computed(() => !captchaSiteKey(props.field));
+</script>
+
+<template>
+  <template v-if="secrets.captcha">
+    <UFormField :label="t('captcha.provider', 'Provider')">
+      <USelect
+        :model-value="secrets.captcha.provider"
+        :items="providerItems"
+        class="w-full"
+        @update:model-value="emit('patch', { provider: $event })"
+      />
+    </UFormField>
+    <UAlert
+      v-if="keyMissing"
+      color="warning"
+      variant="subtle"
+      icon="i-lucide-triangle-alert"
+      :title="t('captcha.missingKey', 'The {provider} captcha has no site key configured.', { provider: t(`captcha.providers.${secrets.captcha.provider}`, secrets.captcha.provider) })"
+      :ui="{ description: 'break-words' }"
+      :description="t('captcha.missingKeyHint', 'Set the site key below or the NUXT_PUBLIC_FORMS_CAPTCHA_PROVIDER_SITE_KEY environment variable. Submissions also need the matching secret key on the server.')"
+    />
+    <UFormField
+      :label="t('captcha.siteKey', 'Site key')"
+      :description="t('captcha.siteKeyHint', 'Public key of this site. Leave empty to use the one configured for the provider.')"
+    >
+      <UInput
+        :model-value="secrets.captcha.siteKey"
+        class="w-full font-mono"
+        @update:model-value="emit('patch', { siteKey: String($event).trim() })"
+      />
+    </UFormField>
+    <UFormField
+      v-if="formId"
+      :label="t('captcha.secretLabel', 'Secret key')"
+      :description="t('captcha.secretHint', 'Server-side key used to verify this form. Stored encrypted and never shown again. Without one, the environment variable is used.')"
+    >
+      <p
+        class="mb-2 flex gap-1 text-sm"
+        data-testid="captcha-secret-status"
+      >
+        <span class="text-muted">{{ t("captcha.secretStatus", "Secret key") }}:</span>
+        <span :class="secrets.source === 'unset' ? 'text-warning' : 'text-success'">{{ secrets.statusLabel }}</span>
+      </p>
+      <UAlert
+        v-if="secrets.secrets?.unreadable"
+        color="warning"
+        variant="subtle"
+        icon="i-lucide-triangle-alert"
+        class="mb-2"
+        :title="t('captcha.secretUnreadable', 'The stored secrets of this form cannot be decrypted because the encryption key changed. Enter them again.')"
+      />
+      <form
+        class="flex gap-2"
+        @submit.prevent="secrets.save()"
+      >
+        <UInput
+          :model-value="secrets.value"
+          type="password"
+          autocomplete="new-password"
+          class="min-w-0 flex-1 font-mono"
+          :placeholder="secrets.source === 'form' ? t('captcha.secretPlaceholderSet', 'Enter a new secret key to replace it') : t('captcha.secretPlaceholder', 'Paste the secret key')"
+          @update:model-value="secrets.setValue(String($event ?? ''))"
+        />
+        <UButton
+          type="submit"
+          :loading="secrets.saving"
+          :disabled="!secrets.value.trim()"
+          :label="t('captcha.secretSave', 'Save secret')"
+        />
+        <UButton
+          v-if="secrets.source === 'form'"
+          type="button"
+          color="error"
+          variant="outline"
+          :label="t('captcha.secretRemove', 'Remove')"
+          @click="secrets.remove()"
+        />
+      </form>
+      <p class="mt-1 text-xs text-muted">
+        {{ t("captcha.secretImmediate", "Saved immediately, independent of the form Save.") }}
+      </p>
+    </UFormField>
+    <div class="grid grid-cols-2 gap-2">
+      <UFormField :label="t('captcha.theme', 'Theme')">
+        <USelect
+          :model-value="secrets.captcha.theme ?? 'auto'"
+          :items="themeItems"
+          class="w-full"
+          @update:model-value="emit('patch', { theme: $event === 'auto' ? void 0 : $event })"
+        />
+      </UFormField>
+      <UFormField :label="t('captcha.size', 'Size')">
+        <USelect
+          :model-value="secrets.captcha.size ?? 'normal'"
+          :items="sizeItems"
+          class="w-full"
+          @update:model-value="emit('patch', { size: $event === 'normal' ? void 0 : $event })"
+        />
+      </UFormField>
+    </div>
+    <p class="text-sm text-muted">
+      {{ t("captcha.hint", "Always required while visible. The token is checked on the server and never stored. Submissions with an API token skip it.") }}
+    </p>
+  </template>
+</template>

package/dist/runtime/app/components/FormBuilderCaptchaSettings.vue.d.ts

@@ -0,0 +1,15 @@
+import type { FormField } from '../../../types.js';
+import type { CaptchaSecrets } from '../composables/useCaptchaSecrets.js';
+type __VLS_Props = {
+    field: FormField;
+    /** The saved form; enables the per-form secret key. */
+    formId?: string;
+    secrets: CaptchaSecrets;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    patch: (patch: Partial<import("../../utils/index.js").CaptchaConfig>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onPatch?: ((patch: Partial<import("../../utils/index.js").CaptchaConfig>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/FormBuilderCondition.d.vue.ts

@@ -0,0 +1,16 @@
+import type { Condition } from '../../../types.js';
+type __VLS_Props = {
+    /** Keys of the fields (before this one) a condition may look at. */
+    fields: string[];
+};
+type __VLS_ModelProps = {
+    modelValue?: Condition | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: Condition | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: Condition | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/FormBuilderCondition.vue

@@ -0,0 +1,62 @@
+<script setup>
+const props = defineProps({
+  fields: { type: Array, required: true }
+});
+const model = defineModel({ type: null });
+const t = useModuleT("forms");
+const ops = ["eq", "neq", "in", "empty", "notEmpty"];
+const opNames = { eq: "is equal to", neq: "is not equal to", in: "is one of", empty: "is empty", notEmpty: "has an answer", truthy: "has an answer" };
+const withoutValue = (op) => op === "empty" || op === "notEmpty" || op === "truthy";
+const text = computed(() => {
+  const value = model.value?.value;
+  return Array.isArray(value) ? value.join(", ") : String(value ?? "");
+});
+function patch(next) {
+  const current = model.value ?? { field: props.fields[0] ?? "", op: "eq" };
+  model.value = { ...current, ...next };
+}
+function setValue(raw) {
+  patch({ value: model.value?.op === "in" ? raw.split(",").map((part) => part.trim()).filter(Boolean) : raw });
+}
+</script>
+
+<template>
+  <div class="space-y-2">
+    <USwitch
+      :model-value="!!model"
+      :disabled="!fields.length"
+      :label="t('builder.conditional', 'Show only if\u2026')"
+      @update:model-value="model = $event ? { field: fields[0], op: 'eq', value: '' } : void 0"
+    />
+    <p
+      v-if="!fields.length"
+      class="text-xs text-muted"
+    >
+      {{ t("builder.noEarlierFields", "Add a field before this one to use as a condition.") }}
+    </p>
+    <div
+      v-else-if="model"
+      class="grid gap-2"
+    >
+      <USelect
+        :model-value="model.field"
+        :items="fields"
+        class="w-full"
+        @update:model-value="patch({ field: String($event) })"
+      />
+      <USelect
+        :model-value="model.op === 'truthy' ? 'notEmpty' : model.op"
+        :items="ops.map((value) => ({ value, label: t(`builder.ops.${value}`, opNames[value]) }))"
+        class="w-full"
+        @update:model-value="patch({ op: $event, value: void 0 })"
+      />
+      <UInput
+        v-if="!withoutValue(model.op)"
+        :model-value="text"
+        :placeholder="model.op === 'in' ? t('builder.valuesHint', 'a, b, c') : t('builder.value', 'Value')"
+        class="w-full"
+        @update:model-value="setValue(String($event))"
+      />
+    </div>
+  </div>
+</template>

package/dist/runtime/app/components/FormBuilderCondition.vue.d.ts

@@ -0,0 +1,16 @@
+import type { Condition } from '../../../types.js';
+type __VLS_Props = {
+    /** Keys of the fields (before this one) a condition may look at. */
+    fields: string[];
+};
+type __VLS_ModelProps = {
+    modelValue?: Condition | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: Condition | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: Condition | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/FormBuilderFieldRow.d.vue.ts

@@ -0,0 +1,27 @@
+import type { FormField } from '../../../types.js';
+type __VLS_Props = {
+    field: FormField;
+    selected: boolean;
+    dragging: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: () => any;
+    dragover: (event: DragEvent) => any;
+    dragstart: (event: DragEvent) => any;
+    dragend: () => any;
+    up: () => any;
+    down: () => any;
+    remove: () => any;
+    duplicate: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: (() => any) | undefined;
+    onDragover?: ((event: DragEvent) => any) | undefined;
+    onDragstart?: ((event: DragEvent) => any) | undefined;
+    onDragend?: (() => any) | undefined;
+    onUp?: (() => any) | undefined;
+    onDown?: (() => any) | undefined;
+    onRemove?: (() => any) | undefined;
+    onDuplicate?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/FormBuilderFieldRow.vue

@@ -0,0 +1,87 @@
+<script setup>
+import { fieldTypeIcons, useFormBuilderLabels } from "../composables/useFormBuilderLabels";
+defineProps({
+  field: { type: Object, required: true },
+  selected: { type: Boolean, required: true },
+  dragging: { type: Boolean, required: true }
+});
+const emit = defineEmits(["select", "dragstart", "dragend", "dragover", "up", "down", "duplicate", "remove"]);
+const t = useModuleT("forms");
+const { typeLabel, summary } = useFormBuilderLabels();
+</script>
+
+<template>
+  <div
+    draggable="true"
+    class="group flex cursor-pointer items-center gap-2 rounded-md border px-2 py-2 hover:bg-elevated"
+    :class="[
+  selected ? 'border-primary bg-elevated' : 'border-default',
+  dragging ? 'opacity-40' : ''
+]"
+    @click="emit('select')"
+    @dragstart.stop="emit('dragstart', $event)"
+    @dragend="emit('dragend')"
+    @dragover="emit('dragover', $event)"
+  >
+    <UIcon
+      name="i-lucide-grip-vertical"
+      class="size-4 shrink-0 cursor-grab text-muted"
+    />
+    <UIcon
+      :name="fieldTypeIcons[field.type]"
+      class="size-4 shrink-0 text-muted"
+    />
+    <div class="min-w-0 flex-1">
+      <p class="truncate text-sm font-medium">
+        {{ summary(field) }}<span
+          v-if="field.required"
+          class="text-error"
+        > *</span>
+      </p>
+      <p class="truncate text-xs text-muted">
+        {{ typeLabel(field.type) }} · {{ field.key }}
+      </p>
+    </div>
+    <UBadge
+      v-if="field.showIf"
+      color="neutral"
+      variant="subtle"
+      size="sm"
+      :label="t('builder.conditionalBadge', 'Conditional')"
+    />
+    <div class="flex shrink-0 opacity-0 focus-within:opacity-100 group-hover:opacity-100">
+      <UButton
+        color="neutral"
+        variant="ghost"
+        size="xs"
+        icon="i-lucide-chevron-up"
+        :aria-label="t('builder.moveUp', 'Move up')"
+        @click.stop="emit('up')"
+      />
+      <UButton
+        color="neutral"
+        variant="ghost"
+        size="xs"
+        icon="i-lucide-chevron-down"
+        :aria-label="t('builder.moveDown', 'Move down')"
+        @click.stop="emit('down')"
+      />
+      <UButton
+        color="neutral"
+        variant="ghost"
+        size="xs"
+        icon="i-lucide-copy"
+        :aria-label="t('builder.duplicate', 'Duplicate')"
+        @click.stop="emit('duplicate')"
+      />
+      <UButton
+        color="error"
+        variant="ghost"
+        size="xs"
+        icon="i-lucide-trash-2"
+        :aria-label="t('builder.delete', 'Delete')"
+        @click.stop="emit('remove')"
+      />
+    </div>
+  </div>
+</template>

package/dist/runtime/app/components/FormBuilderFieldRow.vue.d.ts

@@ -0,0 +1,27 @@
+import type { FormField } from '../../../types.js';
+type __VLS_Props = {
+    field: FormField;
+    selected: boolean;
+    dragging: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: () => any;
+    dragover: (event: DragEvent) => any;
+    dragstart: (event: DragEvent) => any;
+    dragend: () => any;
+    up: () => any;
+    down: () => any;
+    remove: () => any;
+    duplicate: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: (() => any) | undefined;
+    onDragover?: ((event: DragEvent) => any) | undefined;
+    onDragstart?: ((event: DragEvent) => any) | undefined;
+    onDragend?: (() => any) | undefined;
+    onUp?: (() => any) | undefined;
+    onDown?: (() => any) | undefined;
+    onRemove?: (() => any) | undefined;
+    onDuplicate?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/FormBuilderFieldSettings.d.vue.ts

@@ -0,0 +1,25 @@
+import type { FormField, FormStep } from '../../../types.js';
+import type { CaptchaSecrets } from '../composables/useCaptchaSecrets.js';
+import type { FieldPosition } from '../../utils/index.js';
+type __VLS_Props = {
+    field: FormField;
+    at: FieldPosition;
+    /** The titles of the steps the field can move to; only given for stepped forms. */
+    steps?: FormStep[];
+    /** Keys of the fields the field's condition may look at. */
+    conditionFields: string[];
+    /** The saved form; enables per-form secrets (captcha secret key). */
+    formId?: string;
+    secrets: CaptchaSecrets;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    patch: (patch: Partial<FormField>) => any;
+    moveToStep: (step: number) => any;
+    rename: (key: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onPatch?: ((patch: Partial<FormField>) => any) | undefined;
+    onMoveToStep?: ((step: number) => any) | undefined;
+    onRename?: ((key: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/FormBuilderFieldSettings.vue

@@ -0,0 +1,170 @@
+<script setup>
+import { translate } from "../../utils";
+import { useFormBuilderLabels } from "../composables/useFormBuilderLabels";
+import { useFormsLocale } from "../composables/useForms";
+const props = defineProps({
+  field: { type: Object, required: true },
+  at: { type: Object, required: true },
+  steps: { type: Array, required: false },
+  conditionFields: { type: Array, required: true },
+  formId: { type: String, required: false },
+  secrets: { type: null, required: true }
+});
+const emit = defineEmits(["patch", "rename", "moveToStep"]);
+const t = useModuleT("forms");
+const locale = useFormsLocale();
+const { typeLabel } = useFormBuilderLabels();
+const hasOptions = computed(() => props.field.type === "select" || props.field.type === "radio");
+const hasPlaceholder = computed(() => ["text", "email", "tel", "number", "textarea", "select"].includes(props.field.type));
+const hasLength = computed(() => ["text", "email", "tel", "textarea"].includes(props.field.type));
+function setValidation(key, value) {
+  const { [key]: _old, ...rest } = props.field.validation ?? {};
+  const validation = value === null || value === void 0 || Number.isNaN(value) ? rest : { ...rest, [key]: value };
+  emit("patch", { validation: Object.keys(validation).length ? validation : void 0 });
+}
+function patchCaptcha(patch) {
+  const next = Object.fromEntries(Object.entries({ ...props.field.captcha, ...patch }).filter(([, value]) => value !== void 0 && value !== ""));
+  emit("patch", { captcha: next });
+}
+</script>
+
+<template>
+  <aside class="my-1 space-y-4 rounded-md border border-primary/40 bg-elevated/40 p-3">
+    <h3 class="font-semibold">
+      {{ typeLabel(field.type) }}
+    </h3>
+
+    <UFormField
+      v-if="field.type === 'markdown'"
+      :label="t('builder.content', 'Text (Markdown)')"
+    >
+      <FormBuilderText
+        :model-value="field.content"
+        multiline
+        @update:model-value="emit('patch', { content: $event })"
+      />
+    </UFormField>
+    <template v-else-if="field.type === 'captcha' && secrets.captcha">
+      <FormBuilderCaptchaSettings
+        :field="field"
+        :form-id="formId"
+        :secrets="secrets"
+        @patch="patchCaptcha"
+      />
+    </template>
+    <template v-else>
+      <UFormField :label="t('builder.label', 'Label')">
+        <FormBuilderText
+          :model-value="field.label"
+          @update:model-value="emit('patch', { label: $event })"
+        />
+      </UFormField>
+      <UFormField :label="t('builder.description', 'Help text')">
+        <FormBuilderText
+          :model-value="field.description"
+          @update:model-value="emit('patch', { description: $event })"
+        />
+      </UFormField>
+      <UFormField
+        v-if="hasPlaceholder"
+        :label="t('builder.placeholder', 'Placeholder')"
+      >
+        <FormBuilderText
+          :model-value="field.placeholder"
+          @update:model-value="emit('patch', { placeholder: $event })"
+        />
+      </UFormField>
+      <USwitch
+        :model-value="!!field.required"
+        :label="t('builder.required', 'Required')"
+        @update:model-value="emit('patch', { required: $event === true || void 0 })"
+      />
+      <FormBuilderPhoneSettings
+        v-if="field.type === 'tel'"
+        :field="field"
+        @patch="emit('patch', $event)"
+      />
+      <USwitch
+        v-if="field.type === 'file'"
+        :model-value="!!field.multiple"
+        :label="t('builder.multiple', 'Allow several files')"
+        @update:model-value="emit('patch', { multiple: $event === true || void 0 })"
+      />
+    </template>
+
+    <UFormField
+      :label="t('builder.key', 'Key')"
+      :description="t('builder.keyHint', 'Identifies the answer. Letters, digits and underscores.')"
+    >
+      <UInput
+        :model-value="field.key"
+        class="w-full font-mono"
+        @update:model-value="emit('rename', String($event))"
+      />
+    </UFormField>
+
+    <FormBuilderOptions
+      v-if="hasOptions"
+      :options="field.options"
+      @update:options="emit('patch', { options: $event })"
+    />
+
+    <div
+      v-if="hasLength || field.type === 'number'"
+      class="grid grid-cols-2 gap-2"
+    >
+      <template v-if="field.type === 'number'">
+        <UFormField :label="t('builder.min', 'Minimum')">
+          <UInputNumber
+            :model-value="field.validation?.min"
+            class="w-full"
+            @update:model-value="setValidation('min', $event)"
+          />
+        </UFormField>
+        <UFormField :label="t('builder.max', 'Maximum')">
+          <UInputNumber
+            :model-value="field.validation?.max"
+            class="w-full"
+            @update:model-value="setValidation('max', $event)"
+          />
+        </UFormField>
+      </template>
+      <template v-else>
+        <UFormField :label="t('builder.minLength', 'Min length')">
+          <UInputNumber
+            :model-value="field.validation?.minLength"
+            :min="0"
+            class="w-full"
+            @update:model-value="setValidation('minLength', $event)"
+          />
+        </UFormField>
+        <UFormField :label="t('builder.maxLength', 'Max length')">
+          <UInputNumber
+            :model-value="field.validation?.maxLength"
+            :min="1"
+            class="w-full"
+            @update:model-value="setValidation('maxLength', $event)"
+          />
+        </UFormField>
+      </template>
+    </div>
+
+    <UFormField
+      v-if="steps"
+      :label="t('builder.step', 'Step')"
+    >
+      <USelect
+        :model-value="at.step"
+        :items="steps.map((s, i) => ({ value: i, label: `${i + 1}. ${translate(s.title, locale) || s.id}` }))"
+        class="w-full"
+        @update:model-value="emit('moveToStep', Number($event))"
+      />
+    </UFormField>
+
+    <FormBuilderCondition
+      :model-value="field.showIf"
+      :fields="conditionFields"
+      @update:model-value="emit('patch', { showIf: $event })"
+    />
+  </aside>
+</template>

package/dist/runtime/app/components/FormBuilderFieldSettings.vue.d.ts

@@ -0,0 +1,25 @@
+import type { FormField, FormStep } from '../../../types.js';
+import type { CaptchaSecrets } from '../composables/useCaptchaSecrets.js';
+import type { FieldPosition } from '../../utils/index.js';
+type __VLS_Props = {
+    field: FormField;
+    at: FieldPosition;
+    /** The titles of the steps the field can move to; only given for stepped forms. */
+    steps?: FormStep[];
+    /** Keys of the fields the field's condition may look at. */
+    conditionFields: string[];
+    /** The saved form; enables per-form secrets (captcha secret key). */
+    formId?: string;
+    secrets: CaptchaSecrets;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    patch: (patch: Partial<FormField>) => any;
+    moveToStep: (step: number) => any;
+    rename: (key: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onPatch?: ((patch: Partial<FormField>) => any) | undefined;
+    onMoveToStep?: ((step: number) => any) | undefined;
+    onRename?: ((key: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/FormBuilderInsertRow.d.vue.ts

@@ -0,0 +1,20 @@
+import type { DropdownMenuItem } from '@nuxt/ui';
+type __VLS_Props = {
+    items?: DropdownMenuItem[][];
+    /** A small round dot instead of a regular button. */
+    dot?: boolean;
+    /** Keeps the button fully visible instead of only on hover. */
+    visible?: boolean;
+    label?: string;
+    ariaLabel?: string;
+    line?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: () => any;
+    dragover: (event: DragEvent) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: (() => any) | undefined;
+    onDragover?: ((event: DragEvent) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;