@frigear-nu/forms 0.0.6 → 0.0.8

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

@@ -0,0 +1,51 @@
+<script setup>
+defineProps({
+  items: { type: Array, required: false, default: void 0 },
+  dot: { type: Boolean, required: false },
+  visible: { type: Boolean, required: false },
+  label: { type: String, required: false, default: void 0 },
+  ariaLabel: { type: String, required: false, default: void 0 },
+  line: { type: Boolean, required: false }
+});
+const emit = defineEmits(["click", "dragover"]);
+</script>
+
+<template>
+  <div class="insert-row">
+    <UDropdownMenu
+      v-if="items"
+      :items="items"
+      :content="{ align: 'center' }"
+    >
+      <UButton
+        class="insert-button"
+        :class="dot ? 'insert-dot' : visible ? 'insert-button-visible' : ''"
+        color="neutral"
+        variant="soft"
+        size="xs"
+        icon="i-lucide-plus"
+        :aria-label="ariaLabel"
+        :label="label"
+      />
+    </UDropdownMenu>
+    <UButton
+      v-else
+      class="insert-button"
+      color="neutral"
+      variant="soft"
+      size="xs"
+      icon="i-lucide-plus"
+      :label="label"
+      @click="emit('click')"
+      @dragover="emit('dragover', $event)"
+    />
+    <div
+      v-if="line"
+      class="pointer-events-none absolute inset-x-0 top-1/2 h-1 -translate-y-1/2 rounded bg-primary"
+    />
+  </div>
+</template>
+
+<style scoped>
+.insert-row{align-items:center;display:flex;height:1rem;justify-content:center;position:relative;width:100%}.insert-row:before{border-top:1px dashed var(--ui-border-accented);content:"";inset-inline:0;opacity:0;position:absolute;top:50%;transition:opacity .15s}.insert-button{opacity:.35;position:relative;transition:opacity .15s}.insert-dot{align-items:center;border-radius:9999px;display:inline-flex;flex:none;gap:0;height:1rem;justify-content:center;line-height:0;min-width:0;padding:0;transition:opacity .15s,transform .15s;width:1rem}.insert-dot :deep(.iconify){display:block;flex:none;height:.75rem;margin:0;width:.75rem}@media (hover:none),(max-width:640px),(pointer:coarse){.insert-row{height:2rem}.insert-dot{height:1.75rem;opacity:1;width:1.75rem}.insert-dot :deep(.iconify){height:1rem;width:1rem}.insert-dot:focus-visible,.insert-dot:hover{transform:scale(1.15)}}.insert-dot:focus-visible,.insert-dot:hover{transform:scale(1.6)}.insert-row:focus-within:before,.insert-row:hover:before{opacity:1}.insert-button-visible,.insert-row:focus-within .insert-button,.insert-row:hover .insert-button{opacity:1}@media (hover:none){.insert-button,.insert-row:before{opacity:1}}
+</style>

package/dist/runtime/app/components/FormBuilderInsertRow.vue.d.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;

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

@@ -0,0 +1,11 @@
+import type { FieldOption } from '../../../types.js';
+type __VLS_Props = {
+    options?: FieldOption[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:options": (options: FieldOption[] | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:options"?: ((options: FieldOption[] | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,81 @@
+<script setup>
+import { arrayMove } from "../../utils";
+const props = defineProps({
+  options: { type: Array, required: false }
+});
+const emit = defineEmits(["update:options"]);
+const t = useModuleT("forms");
+function setOption(index, patch) {
+  const options = [...props.options ?? []];
+  options[index] = { ...options[index], ...patch };
+  emit("update:options", options);
+}
+function addOption() {
+  const options = props.options ?? [];
+  emit("update:options", [...options, { value: `option_${options.length + 1}`, label: `Option ${options.length + 1}` }]);
+}
+function moveOption(index, delta) {
+  emit("update:options", arrayMove(props.options ?? [], index, index + delta));
+}
+</script>
+
+<template>
+  <div class="space-y-2">
+    <h4 class="text-sm font-medium">
+      {{ t("builder.options", "Options") }}
+    </h4>
+    <div
+      v-for="(option, optionIndex) in options"
+      :key="optionIndex"
+      class="space-y-1 rounded-md border border-default p-2"
+    >
+      <FormBuilderText
+        :model-value="option.label"
+        :placeholder="t('builder.label', 'Label')"
+        @update:model-value="setOption(optionIndex, { label: $event ?? '' })"
+      />
+      <UInput
+        :model-value="option.value"
+        :placeholder="t('builder.value', 'Value')"
+        class="w-full font-mono"
+        @update:model-value="setOption(optionIndex, { value: String($event) })"
+      />
+      <div class="flex justify-end">
+        <UButton
+          color="neutral"
+          variant="ghost"
+          size="xs"
+          icon="i-lucide-chevron-up"
+          :disabled="optionIndex === 0"
+          :aria-label="t('builder.moveUp', 'Move up')"
+          @click="moveOption(optionIndex, -1)"
+        />
+        <UButton
+          color="neutral"
+          variant="ghost"
+          size="xs"
+          icon="i-lucide-chevron-down"
+          :disabled="optionIndex === (options?.length ?? 0) - 1"
+          :aria-label="t('builder.moveDown', 'Move down')"
+          @click="moveOption(optionIndex, 1)"
+        />
+        <UButton
+          color="error"
+          variant="ghost"
+          size="xs"
+          icon="i-lucide-x"
+          :aria-label="t('builder.delete', 'Delete')"
+          @click="emit('update:options', options?.filter((_, i) => i !== optionIndex))"
+        />
+      </div>
+    </div>
+    <UButton
+      color="neutral"
+      variant="outline"
+      size="xs"
+      icon="i-lucide-plus"
+      :label="t('builder.addOption', 'Add option')"
+      @click="addOption"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,11 @@
+import type { FieldOption } from '../../../types.js';
+type __VLS_Props = {
+    options?: FieldOption[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:options": (options: FieldOption[] | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:options"?: ((options: FieldOption[] | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,11 @@
+import type { FormField } from '../../../types.js';
+type __VLS_Props = {
+    field: FormField;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    patch: (patch: Partial<FormField>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onPatch?: ((patch: Partial<FormField>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,63 @@
+<script setup>
+import { allPhoneCountries, countryName, defaultPhoneCountry, phoneCountries } from "../../utils";
+import { useFormsLocale } from "../composables/useForms";
+const props = defineProps({
+  field: { type: Object, required: true }
+});
+const emit = defineEmits(["patch"]);
+const t = useModuleT("forms");
+const locale = useFormsLocale();
+const modeItems = computed(() => [
+  { value: "simple", label: t("builder.phoneSimple", "Single input") },
+  { value: "country", label: t("builder.phoneCountry", "Country code + number") }
+]);
+const countryItems = computed(() => allPhoneCountries.map(({ code, dial, flag }) => ({
+  value: code,
+  label: `${flag} ${countryName(code, locale.value)} (+${dial})`
+})));
+const offeredCountries = computed(() => new Set(phoneCountries(props.field.phone).map((country) => country.code)));
+function patchPhone(patch) {
+  const next = Object.fromEntries(Object.entries({ ...props.field.phone, ...patch }).filter(([, value]) => value !== void 0));
+  const countries = next.countries;
+  if (countries && next.defaultCountry && !countries.includes(next.defaultCountry)) delete next.defaultCountry;
+  emit("patch", { phone: Object.keys(next).length ? next : void 0 });
+}
+function setMode(mode) {
+  emit("patch", { phone: mode === "country" ? { ...props.field.phone, mode } : void 0 });
+}
+</script>
+
+<template>
+  <UFormField :label="t('builder.phoneMode', 'Phone input')">
+    <USelect
+      :model-value="field.phone?.mode ?? 'simple'"
+      :items="modeItems"
+      class="w-full"
+      @update:model-value="setMode($event)"
+    />
+  </UFormField>
+  <template v-if="field.phone?.mode === 'country'">
+    <UFormField
+      :label="t('builder.phoneCountries', 'Allowed countries')"
+      :description="t('builder.phoneCountriesHint', 'Leave empty to allow all countries.')"
+    >
+      <USelectMenu
+        :model-value="field.phone?.countries ?? []"
+        :items="countryItems"
+        value-key="value"
+        multiple
+        class="w-full"
+        @update:model-value="patchPhone({ countries: $event.length ? $event : void 0 })"
+      />
+    </UFormField>
+    <UFormField :label="t('builder.phoneDefaultCountry', 'Default country')">
+      <USelectMenu
+        :model-value="defaultPhoneCountry(field.phone)"
+        :items="countryItems.filter((item) => offeredCountries.has(item.value))"
+        value-key="value"
+        class="w-full"
+        @update:model-value="patchPhone({ defaultCountry: $event })"
+      />
+    </UFormField>
+  </template>
+</template>

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

@@ -0,0 +1,11 @@
+import type { FormField } from '../../../types.js';
+type __VLS_Props = {
+    field: FormField;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    patch: (patch: Partial<FormField>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onPatch?: ((patch: Partial<FormField>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,11 @@
+import type { FormDefinition } from '../../../types.js';
+type __VLS_ModelProps = {
+    modelValue: FormDefinition;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: FormDefinition) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: FormDefinition) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,233 @@
+<script setup>
+import {
+  availableVariables,
+  composeEmail,
+  emailFieldKeys,
+  patchEmailDelivery,
+  renderAnswers,
+  routableFields,
+  sampleAnswers,
+  setEmailRecipients,
+  setRoute,
+  setRouteField,
+  setStorage,
+  storageWarnings,
+  translate,
+  unknownBodyVariables
+} from "../../utils";
+import { useFormsLocale } from "../composables/useForms";
+const definition = defineModel({ type: Object, ...{ required: true } });
+const t = useModuleT("forms");
+const locale = useFormsLocale();
+const email = computed(() => definition.value.delivery?.email);
+const warnings = computed(() => storageWarnings(definition.value));
+const replyToFields = computed(() => emailFieldKeys(definition.value));
+const routable = computed(() => routableFields(definition.value));
+const routeField = computed(() => routable.value.find((field) => field.key === email.value?.routes?.field));
+const unknownVariables = computed(() => unknownBodyVariables(definition.value));
+const variables = computed(() => availableVariables(definition.value));
+const answersExample = "{{answers}}";
+const variableLabel = (name) => `{{${name}}}`;
+const bodyEditor = ref();
+let lastTextarea;
+function rememberTextarea(event) {
+  if (event.target instanceof HTMLTextAreaElement) lastTextarea = event.target;
+}
+function insertVariable(name) {
+  const textarea = lastTextarea?.isConnected ? lastTextarea : bodyEditor.value?.querySelector("textarea");
+  if (!textarea) return;
+  const text = variableLabel(name);
+  const start = textarea.selectionStart ?? textarea.value.length;
+  const end = textarea.selectionEnd ?? start;
+  textarea.value = textarea.value.slice(0, start) + text + textarea.value.slice(end);
+  textarea.dispatchEvent(new Event("input", { bubbles: true }));
+  textarea.focus();
+  textarea.setSelectionRange(start + text.length, start + text.length);
+}
+const preview = computed(() => {
+  if (!email.value) return "";
+  const answers = sampleAnswers(definition.value);
+  return composeEmail(email.value, {
+    form: { name: "Form name", slug: "form-slug", version: 1 },
+    submission: { id: "sub_example", createdAt: (/* @__PURE__ */ new Date()).toISOString(), locale: locale.value },
+    answers: renderAnswers(definition.value, answers, locale.value),
+    files: [],
+    replyTo: "name@example.com"
+  }).text;
+});
+const NONE = "__none__";
+const replyToItems = computed(() => [
+  { value: NONE, label: t("delivery.replyToNone", "None") },
+  ...replyToFields.value.map((value) => ({ value, label: value }))
+]);
+const routeFieldItems = computed(() => [
+  { value: NONE, label: t("delivery.routingNone", "No routing") },
+  ...routable.value.map((field) => ({ value: field.key, label: translate(field.label, locale.value) || field.key }))
+]);
+</script>
+
+<template>
+  <div class="max-w-2xl space-y-8">
+    <section class="space-y-3">
+      <h2 class="font-semibold">
+        {{ t("delivery.storeTitle", "Store submissions") }}
+      </h2>
+      <USwitch
+        :model-value="definition.storage === 'db'"
+        :label="t('delivery.storeTitle', 'Store submissions')"
+        :description="t('delivery.storeHint', 'Keep submissions in the database so they can be reviewed under Submissions.')"
+        @update:model-value="definition = setStorage(definition, $event ? 'db' : 'none')"
+      />
+      <UAlert
+        v-if="warnings.files"
+        color="warning"
+        variant="subtle"
+        :title="t('delivery.filesWarning', 'This form has file upload fields, which need stored submissions. Remove them or keep storing.')"
+      />
+      <UAlert
+        v-if="warnings.lost"
+        color="warning"
+        variant="subtle"
+        :title="t('delivery.lostWarning', 'Submissions are neither stored nor emailed. Add recipients or keep storing, or answers are lost unless something handles forms:submitted.')"
+      />
+    </section>
+
+    <section class="space-y-4">
+      <h2 class="font-semibold">
+        {{ t("delivery.emailTitle", "Email notification") }}
+      </h2>
+      <UFormField
+        :label="t('delivery.recipients', 'Recipients')"
+        :description="t('delivery.recipientsHint', 'Press Enter after each address. Leave empty to turn email off.')"
+      >
+        <UInputTags
+          :model-value="email?.to ?? []"
+          type="email"
+          class="w-full"
+          @update:model-value="definition = setEmailRecipients(definition, $event)"
+        />
+      </UFormField>
+
+      <p
+        v-if="!email"
+        class="text-sm text-muted"
+      >
+        {{ t("delivery.needRecipients", "Add recipients first to set the subject, reply-to and routing.") }}
+      </p>
+
+      <template v-else>
+        <UFormField
+          :label="t('delivery.subject', 'Subject')"
+          :description="t('delivery.subjectHint', 'Variables from the list below work here too.')"
+        >
+          <FormBuilderText
+            :model-value="email.subject"
+            @update:model-value="definition = patchEmailDelivery(definition, { subject: $event })"
+          />
+        </UFormField>
+
+        <UFormField
+          :label="t('delivery.body', 'Email body')"
+          :description="t('delivery.bodyHint', 'Optional. Leave empty to email the list of all answers. Variables are replaced with the submitted values.')"
+        >
+          <div
+            ref="bodyEditor"
+            class="space-y-2"
+            @focusin="rememberTextarea"
+          >
+            <FormBuilderText
+              :model-value="email.body"
+              multiline
+              :preview="false"
+              @update:model-value="definition = patchEmailDelivery(definition, { body: $event })"
+            />
+            <div class="space-y-1">
+              <p class="text-xs text-muted">
+                {{ t("delivery.bodyVariables", "Click a variable to insert it at the cursor. The full list of answers is") }}
+                <code>{{ answersExample }}</code>.
+              </p>
+              <div class="flex max-h-28 flex-wrap gap-1 overflow-y-auto">
+                <UButton
+                  v-for="name in variables"
+                  :key="name"
+                  type="button"
+                  color="neutral"
+                  variant="subtle"
+                  size="xs"
+                  class="font-mono"
+                  :label="variableLabel(name)"
+                  @click="insertVariable(name)"
+                />
+              </div>
+            </div>
+            <UAlert
+              v-if="unknownVariables.length"
+              color="warning"
+              variant="subtle"
+              :title="t('delivery.bodyUnknown', 'Unknown variables are left empty: {names}', { names: unknownVariables.map(variableLabel).join(', ') })"
+            />
+            <div
+              v-if="email.body"
+              class="space-y-1"
+            >
+              <p class="text-xs font-medium text-muted">
+                {{ t("delivery.bodyPreview", "Preview with sample answers") }}
+              </p>
+              <pre class="max-h-48 overflow-auto whitespace-pre-wrap rounded-md border border-default bg-elevated/50 p-2 text-xs">{{ preview }}</pre>
+              <UButton
+                type="button"
+                color="neutral"
+                variant="link"
+                size="xs"
+                icon="i-lucide-rotate-ccw"
+                :label="t('delivery.bodyReset', 'Reset to the default body')"
+                @click="definition = patchEmailDelivery(definition, { body: void 0 })"
+              />
+            </div>
+          </div>
+        </UFormField>
+
+        <UFormField
+          :label="t('delivery.replyTo', 'Reply to')"
+          :description="t('delivery.replyToHint', 'The answer of this email field becomes the Reply-To.')"
+        >
+          <USelect
+            :model-value="email.replyToField ?? NONE"
+            :items="replyToItems"
+            :disabled="!replyToFields.length"
+            class="w-full"
+            @update:model-value="definition = patchEmailDelivery(definition, { replyToField: $event === NONE ? void 0 : String($event) })"
+          />
+        </UFormField>
+
+        <UFormField
+          v-if="routable.length"
+          :label="t('delivery.routing', 'Route by answer')"
+          :description="t('delivery.routingHint', 'Send to other recipients depending on the answer. Others get the default recipients.')"
+        >
+          <USelect
+            :model-value="email.routes?.field ?? NONE"
+            :items="routeFieldItems"
+            class="w-full"
+            @update:model-value="definition = setRouteField(definition, $event === NONE ? void 0 : String($event))"
+          />
+        </UFormField>
+
+        <template v-if="routeField">
+          <UFormField
+            v-for="option in routeField.options"
+            :key="option.value"
+            :label="t('delivery.routeTo', 'Recipients for \u201C{value}\u201D', { value: translate(option.label, locale) || option.value })"
+          >
+            <UInputTags
+              :model-value="email.routes?.to[option.value] ?? []"
+              type="email"
+              class="w-full"
+              @update:model-value="definition = setRoute(definition, option.value, $event)"
+            />
+          </UFormField>
+        </template>
+      </template>
+    </section>
+  </div>
+</template>

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

@@ -0,0 +1,11 @@
+import type { FormDefinition } from '../../../types.js';
+type __VLS_ModelProps = {
+    modelValue: FormDefinition;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: FormDefinition) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: FormDefinition) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,27 @@
+import type { FormStep } from '../../../types.js';
+type __VLS_Props = {
+    step: FormStep;
+    /** Zero-based position; shown one-based. */
+    index: number;
+    isFirst: boolean;
+    isLast: boolean;
+    /** The only step cannot be deleted. */
+    isOnly: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: () => any;
+    dragstart: (event: DragEvent) => any;
+    dragend: () => any;
+    up: () => any;
+    down: () => any;
+    remove: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: (() => any) | undefined;
+    onDragstart?: ((event: DragEvent) => any) | undefined;
+    onDragend?: (() => any) | undefined;
+    onUp?: (() => any) | undefined;
+    onDown?: (() => any) | undefined;
+    onRemove?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,71 @@
+<script setup>
+import { translate } from "../../utils";
+import { useFormsLocale } from "../composables/useForms";
+defineProps({
+  step: { type: Object, required: true },
+  index: { type: Number, required: true },
+  isFirst: { type: Boolean, required: true },
+  isLast: { type: Boolean, required: true },
+  isOnly: { type: Boolean, required: true }
+});
+const emit = defineEmits(["select", "dragstart", "dragend", "up", "down", "remove"]);
+const t = useModuleT("forms");
+const locale = useFormsLocale();
+</script>
+
+<template>
+  <header
+    class="flex cursor-pointer items-center gap-2 border-b border-default px-3 py-2"
+    @click="emit('select')"
+  >
+    <span
+      draggable="true"
+      class="cursor-grab text-muted active:cursor-grabbing"
+      :title="t('builder.dragStep', 'Drag to reorder steps')"
+      @dragstart.stop="emit('dragstart', $event)"
+      @dragend="emit('dragend')"
+    >
+      <UIcon
+        name="i-lucide-grip-vertical"
+        class="size-4"
+      />
+    </span>
+    <span class="flex-1 truncate text-sm font-semibold">
+      {{ index + 1 }}. {{ translate(step.title, locale) || step.id }}
+    </span>
+    <UBadge
+      v-if="step.showIf"
+      color="neutral"
+      variant="subtle"
+      size="sm"
+      :label="t('builder.conditionalBadge', 'Conditional')"
+    />
+    <UButton
+      color="neutral"
+      variant="ghost"
+      size="xs"
+      icon="i-lucide-chevron-up"
+      :disabled="isFirst"
+      :aria-label="t('builder.moveUp', 'Move up')"
+      @click.stop="emit('up')"
+    />
+    <UButton
+      color="neutral"
+      variant="ghost"
+      size="xs"
+      icon="i-lucide-chevron-down"
+      :disabled="isLast"
+      :aria-label="t('builder.moveDown', 'Move down')"
+      @click.stop="emit('down')"
+    />
+    <UButton
+      color="error"
+      variant="ghost"
+      size="xs"
+      icon="i-lucide-trash-2"
+      :disabled="isOnly"
+      :aria-label="t('builder.deleteStep', 'Delete step')"
+      @click.stop="emit('remove')"
+    />
+  </header>
+</template>

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

@@ -0,0 +1,27 @@
+import type { FormStep } from '../../../types.js';
+type __VLS_Props = {
+    step: FormStep;
+    /** Zero-based position; shown one-based. */
+    index: number;
+    isFirst: boolean;
+    isLast: boolean;
+    /** The only step cannot be deleted. */
+    isOnly: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: () => any;
+    dragstart: (event: DragEvent) => any;
+    dragend: () => any;
+    up: () => any;
+    down: () => any;
+    remove: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: (() => any) | undefined;
+    onDragstart?: ((event: DragEvent) => any) | undefined;
+    onDragend?: (() => any) | undefined;
+    onUp?: (() => any) | undefined;
+    onDown?: (() => any) | undefined;
+    onRemove?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;