@frigear-nu/forms 0.1.2 → 0.1.4

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

@@ -67,167 +67,169 @@ const routeFieldItems = computed(() => [
 </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)"
+  <div class="flex flex-col gap-4">
+    <SectionCard :title="t('delivery.storageTitle', 'Storage')">
+      <div class="flex flex-col gap-4">
+        <FormRow
+          :label="t('delivery.storeTitle', 'Store submissions')"
+          :description="t('delivery.storeHint', 'Keep submissions in the database so they can be reviewed under Submissions.')"
+        >
+          <USwitch
+            :model-value="definition.storage === 'db'"
+            @update:model-value="definition = setStorage(definition, $event ? 'db' : 'none')"
+          />
+        </FormRow>
+        <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.')"
         />
-      </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>
+        <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.')"
+        />
+      </div>
+    </SectionCard>
 
-      <template v-else>
-        <UFormField
-          :label="t('delivery.subject', 'Subject')"
-          :description="t('delivery.subjectHint', 'Variables from the list below work here too.')"
+    <SectionCard :title="t('delivery.emailTitle', 'Email notification')">
+      <div class="flex flex-col divide-y divide-default">
+        <FormRow
+          :label="t('delivery.recipients', 'Recipients')"
+          :description="t('delivery.recipientsHint', 'Press Enter after each address. Leave empty to turn email off.')"
         >
-          <FormBuilderText
-            :model-value="email.subject"
-            @update:model-value="definition = patchEmailDelivery(definition, { subject: $event })"
+          <UInputTags
+            :model-value="email?.to ?? []"
+            type="email"
+            class="w-full sm:max-w-sm"
+            @update:model-value="definition = setEmailRecipients(definition, $event)"
           />
-        </UFormField>
+        </FormRow>
 
-        <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.')"
+        <p
+          v-if="!email"
+          class="pt-4 text-sm text-muted"
         >
-          <div
-            ref="bodyEditor"
-            class="space-y-2"
-            @focusin="rememberTextarea"
+          {{ t("delivery.needRecipients", "Add recipients first to set the subject, reply-to and routing.") }}
+        </p>
+
+        <template v-else>
+          <FormRow
+            :label="t('delivery.subject', 'Subject')"
+            :description="t('delivery.subjectHint', 'Variables from the list below work here too.')"
           >
             <FormBuilderText
-              :model-value="email.body"
-              multiline
-              :preview="false"
-              @update:model-value="definition = patchEmailDelivery(definition, { body: $event })"
+              :model-value="email.subject"
+              class="sm:max-w-sm"
+              @update:model-value="definition = patchEmailDelivery(definition, { subject: $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">
+          </FormRow>
+
+          <FormRow
+            :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
-                  v-for="name in variables"
-                  :key="name"
                   type="button"
                   color="neutral"
-                  variant="subtle"
+                  variant="link"
                   size="xs"
-                  class="font-mono"
-                  :label="variableLabel(name)"
-                  @click="insertVariable(name)"
+                  icon="i-lucide-rotate-ccw"
+                  :label="t('delivery.bodyReset', 'Reset to the default body')"
+                  @click="definition = patchEmailDelivery(definition, { body: void 0 })"
                 />
               </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>
+          </FormRow>
 
-        <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>
+          <FormRow
+            :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 sm:max-w-sm"
+              @update:model-value="definition = patchEmailDelivery(definition, { replyToField: $event === NONE ? void 0 : String($event) })"
+            />
+          </FormRow>
 
-        <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 })"
+          <FormRow
+            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.')"
           >
-            <UInputTags
-              :model-value="email.routes?.to[option.value] ?? []"
-              type="email"
-              class="w-full"
-              @update:model-value="definition = setRoute(definition, option.value, $event)"
+            <USelect
+              :model-value="email.routes?.field ?? NONE"
+              :items="routeFieldItems"
+              class="w-full sm:max-w-sm"
+              @update:model-value="definition = setRouteField(definition, $event === NONE ? void 0 : String($event))"
             />
-          </UFormField>
+          </FormRow>
+
+          <template v-if="routeField">
+            <FormRow
+              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 sm:max-w-sm"
+                @update:model-value="definition = setRoute(definition, option.value, $event)"
+              />
+            </FormRow>
+          </template>
         </template>
-      </template>
-    </section>
+      </div>
+    </SectionCard>
   </div>
 </template>

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

@@ -1,6 +1,6 @@
 <script setup>
 import { z } from "zod";
-import { defineForm } from "../../utils";
+import { defineForm, formsApi } from "../../utils";
 const emit = defineEmits(["close"]);
 const t = useModuleT("forms");
 const { busy, run } = useAction();
@@ -26,7 +26,7 @@ watch(() => state.name, (name, previous) => {
 });
 async function save() {
   const created = await run(
-    () => $fetch("/api/forms/admin/forms", { method: "POST", body: { ...state, definition: starter } }),
+    () => $fetch(formsApi.admin.forms, { method: "POST", body: { ...state, definition: starter } }),
     { success: t("admin.created", "Form created") }
   );
   if (created) emit("close", created);

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

@@ -1,5 +1,5 @@
 <script setup>
-import { embedMode } from "../../utils";
+import { embedMode, formsApi } from "../../utils";
 const props = defineProps({
   slug: { type: String, required: true },
   title: { type: Boolean, required: false, default: false },
@@ -25,7 +25,7 @@ async function unlock() {
   checking.value = true;
   wrong.value = false;
   try {
-    await $fetch(`/api/forms/${props.slug}`, { headers: { [FORM_PASSWORD_HEADER]: password.value } });
+    await $fetch(formsApi.form(props.slug), { headers: { [FORM_PASSWORD_HEADER]: password.value } });
     unlocked.value = password.value;
   } catch {
     wrong.value = true;

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

@@ -25,7 +25,6 @@ const isCheckbox = computed(() => props.field.type === "checkbox");
     class="prose prose-sm max-w-none text-muted"
     v-html="html"
   />
-  <!-- eslint-enable vue/no-v-html -->
 
   <UFormField
     v-else-if="field.type === 'captcha'"
@@ -109,4 +108,5 @@ const isCheckbox = computed(() => props.field.type === "checkbox");
       class="w-full"
     />
   </UFormField>
+  <!-- eslint-enable vue/no-v-html -->
 </template>

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

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

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

@@ -0,0 +1,57 @@
+<script setup>
+import { z } from "zod";
+import { formsApi } from "../../utils";
+const emit = defineEmits(["close"]);
+const t = useModuleT("forms");
+const { busy, run } = useAction();
+function parse(text) {
+  try {
+    return JSON.parse(text);
+  } catch {
+    return void 0;
+  }
+}
+const state = reactive({ text: "" });
+const schema = z.object({
+  text: z.string().trim().min(1, t("admin.importEmpty", "Paste the JSON to import.")).refine((text) => parse(text) !== void 0, t("admin.invalidJson", "The JSON is not valid."))
+});
+async function save() {
+  const parsed = parse(state.text);
+  const result = await run(() => $fetch(formsApi.admin.import, {
+    method: "POST",
+    body: { forms: Array.isArray(parsed) ? parsed : [parsed] }
+  }));
+  if (result) emit("close", result);
+}
+</script>
+
+<template>
+  <FormSlideover
+    form-id="forms-import"
+    :title="t('admin.import', 'Import JSON')"
+    :description="t('admin.importHint', 'Paste one form or a list of forms (each with slug, name and definition). Forms whose slug already exists are skipped.')"
+    :submit-label="t('admin.importSubmit', 'Import forms')"
+    :loading="busy"
+    @close="emit('close', false)"
+  >
+    <UForm
+      id="forms-import"
+      :state="state"
+      :schema="schema"
+      class="flex flex-col gap-4"
+      @submit="save"
+    >
+      <UFormField
+        name="text"
+        :label="t('admin.importLabel', 'Forms as JSON')"
+      >
+        <UTextarea
+          v-model="state.text"
+          :rows="16"
+          class="w-full font-mono text-xs"
+          autofocus
+        />
+      </UFormField>
+    </UForm>
+  </FormSlideover>
+</template>

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

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

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

@@ -1,6 +1,6 @@
 <script setup>
 import { previewPayload, translate } from "../../utils";
-import { emptyAnswers, submitAnswers, useFormsLocale } from "../composables/useForms";
+import { emptyAnswers, submissionIssues, submitAnswers, useFormsLocale } from "../composables/useForms";
 import { useFormStepper } from "../composables/useFormStepper";
 const props = defineProps({
   slug: { type: String, required: false },
@@ -45,8 +45,8 @@ async function onSubmit() {
     const redirect = submitSettings.value?.redirect;
     if (redirect) await navigateTo(redirect);
   } catch (error) {
-    const issues = error.data?.data?.issues;
-    if (issues?.length) {
+    const issues = submissionIssues(error);
+    if (issues.length) {
       formRef.value?.setErrors(issues.map((issue) => ({ name: String(issue.path[0] ?? ""), message: issue.message })));
       toast.add({ title: t("error.invalid", "Please check the highlighted fields."), color: "error" });
     } else {

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

@@ -1,5 +1,5 @@
 <script setup>
-import { isAnswerField, resolveVisibility, translate } from "../../utils";
+import { formsApi, isAnswerField, resolveVisibility, translate } from "../../utils";
 const props = defineProps({
   submission: { type: Object, required: true }
 });
@@ -20,7 +20,7 @@ const sections = computed(() => resolveVisibility(props.submission.definition, p
     };
   })
 })));
-const fileUrl = (fileId) => `/api/forms/admin/submissions/${props.submission.id}/files/${fileId}`;
+const fileUrl = (fileId) => formsApi.admin.submissionFile(props.submission.id, fileId);
 </script>
 
 <template>

package/dist/runtime/app/composables/useCaptchaSecrets.js

@@ -1,4 +1,4 @@
-import { resolveCaptcha } from "../../utils/index.js";
+import { formsApi, resolveCaptcha } from "../../utils/index.js";
 import { captchaDefaultProvider } from "./useCaptcha.js";
 export function useCaptchaSecrets(formId, field) {
   const t = useModuleT("forms");
@@ -8,7 +8,9 @@ export function useCaptchaSecrets(formId, field) {
     return selected?.type === "captcha" ? resolveCaptcha(selected, captchaDefaultProvider()) : void 0;
   });
   const secrets = ref();
-  const url = computed(() => toValue(formId) ? `/api/forms/admin/forms/${toValue(formId)}/secrets` : void 0);
+  const id = computed(() => toValue(formId));
+  const url = computed(() => id.value ? formsApi.admin.secrets(id.value) : void 0);
+  const secretKey = () => `captcha.${captcha.value.provider}.secretKey`;
   const value = ref("");
   const saving = ref(false);
   const loading = ref(Boolean(toValue(formId)));
@@ -36,10 +38,10 @@ export function useCaptchaSecrets(formId, field) {
     value.value = "";
   });
   async function save() {
-    if (!url.value || !captcha.value || !value.value.trim()) return;
+    if (!id.value || !captcha.value || !value.value.trim()) return;
     saving.value = true;
     try {
-      secrets.value = await $fetch(url.value, { method: "PUT", body: { key: `captcha.${captcha.value.provider}.secretKey`, value: value.value.trim() } });
+      secrets.value = await $fetch(formsApi.admin.secret(id.value, secretKey()), { method: "PUT", body: { value: value.value.trim() } });
       value.value = "";
       toast.add({ title: t("captcha.secretSaved", "Secret key saved."), color: "success" });
     } catch {
@@ -49,9 +51,10 @@ export function useCaptchaSecrets(formId, field) {
     }
   }
   async function remove() {
-    if (!url.value || !captcha.value) return;
+    if (!id.value || !captcha.value) return;
     try {
-      secrets.value = await $fetch(`${url.value}/captcha.${captcha.value.provider}.secretKey`, { method: "DELETE" });
+      await $fetch(formsApi.admin.secret(id.value, secretKey()), { method: "DELETE" });
+      await load();
       toast.add({ title: t("captcha.secretRemoved", "Secret key removed."), color: "success" });
     } catch {
       toast.add({ title: t("captcha.secretFailed", "The secret key could not be saved."), color: "error" });

package/dist/runtime/app/composables/useFormActions.d.ts

@@ -1,5 +1,5 @@
 import type { DropdownMenuItem } from '@nuxt/ui';
-import type { FormAdminDto, FormStatus, FormStorage } from '../../../types.js';
+import type { FormAdminDto, FormImportResultDto, FormStatus, FormStorage } from '../../../types.js';
 /** What the actions need to know about a form: a list row or the loaded form fits. */
 export interface FormActionTarget {
     id: string;
@@ -9,6 +9,13 @@ export interface FormActionTarget {
     storage?: FormStorage;
     submissionCount?: number;
 }
+/** What the submission actions need: the id and the form it belongs to (a list row has no `formId`, so pages add it). */
+export interface SubmissionActionTarget {
+    id: string;
+    formId: string;
+}
+/** What importing reports back: slugs that were created and slugs that already existed. */
+export type FormImportResult = FormImportResultDto;
 /** The cache key of the admin form list, so every action can refresh it. */
 export declare const FORMS_LIST_KEY = "forms:admin:forms";
 /** Create, duplicate, archive, import and redeliver for forms, plus the `⋯` menu every list and detail page uses. */
@@ -17,10 +24,15 @@ export declare function useFormActions(): {
     create: () => Promise<FormAdminDto | false>;
     clone: (form: Pick<FormActionTarget, "id">) => Promise<boolean>;
     remove: (form: Pick<FormActionTarget, "id" | "name">) => Promise<boolean>;
-    importJson: (text: string) => Promise<boolean>;
+    importJson: () => Promise<boolean>;
     redeliver: (submissionId: string) => Promise<boolean>;
     menu: (form: FormActionTarget, options?: {
+        open?: boolean;
         extra?: DropdownMenuItem[];
         onRemoved?: () => void | Promise<void>;
     }) => DropdownMenuItem[][];
+    submissionMenu: (submission: SubmissionActionTarget, options?: {
+        open?: boolean;
+        onRedelivered?: () => void | Promise<void>;
+    }) => DropdownMenuItem[][];
 };