@frigear-nu/forms 0.0.0-stage → 0.0.2

package/dist/runtime/app/pages/admin-submissions.vue

@@ -0,0 +1,71 @@
+<script setup>
+const t = useModuleT("forms");
+const route = useRoute();
+const paths = useFormsPaths();
+const id = computed(() => String(route.params.id));
+const { data: submissions, error } = await useFetch(() => `/api/forms/admin/forms/${id.value}/submissions`);
+const color = { none: "neutral", pending: "warning", delivered: "success", failed: "error" };
+const format = (iso) => new Date(iso).toLocaleString();
+</script>
+
+<template>
+  <UContainer class="space-y-6 py-10">
+    <div>
+      <NuxtLink
+        :to="paths('adminForm', { id })"
+        class="text-sm text-muted hover:underline"
+      >
+        ← {{ t("admin.edit", "Edit") }}
+      </NuxtLink>
+      <h1 class="text-3xl font-bold">
+        {{ t("admin.submissionsTitle", "Submissions") }}
+      </h1>
+    </div>
+
+    <UAlert
+      v-if="error"
+      color="error"
+      variant="subtle"
+      :title="t('admin.forbidden', 'You are not allowed to manage forms.')"
+    />
+    <UEmpty
+      v-else-if="!submissions?.length"
+      icon="i-lucide-inbox"
+      :title="t('admin.noSubmissions', 'No submissions yet.')"
+    />
+
+    <div
+      v-else
+      class="divide-y divide-default rounded-lg border border-default"
+    >
+      <NuxtLink
+        v-for="submission in submissions"
+        :key="submission.id"
+        :to="paths('adminSubmission', { id, submissionId: submission.id })"
+        class="flex flex-wrap items-center justify-between gap-3 p-4 hover:bg-elevated"
+      >
+        <div class="min-w-0 space-y-1">
+          <p class="text-sm text-muted">
+            {{ format(submission.createdAt) }}
+          </p>
+          <p class="truncate">
+            <span
+              v-for="(answer, index) in submission.preview"
+              :key="answer.label"
+            >
+              <span
+                v-if="index"
+                class="text-muted"
+              > · </span>{{ answer.value }}
+            </span>
+          </p>
+        </div>
+        <UBadge
+          :color="color[submission.deliveryStatus]"
+          variant="subtle"
+          :label="t(`delivery.${submission.deliveryStatus}`, submission.deliveryStatus)"
+        />
+      </NuxtLink>
+    </div>
+  </UContainer>
+</template>

package/dist/runtime/app/pages/admin-submissions.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/pages/admin.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/pages/admin.vue

@@ -0,0 +1,194 @@
+<script setup>
+import { defineForm } from "../../utils";
+const t = useModuleT("forms");
+const paths = useFormsPaths();
+const toast = useToast();
+const { data: forms, error, refresh } = await useFetch("/api/forms/admin/forms");
+const starter = defineForm({
+  mode: "single",
+  storage: "db",
+  steps: [{
+    id: "main",
+    fields: [
+      { key: "name", type: "text", label: "Name", required: true },
+      { key: "message", type: "textarea", label: "Message", required: true }
+    ]
+  }]
+});
+const creating = ref(false);
+const draft = reactive({ name: "", slug: "" });
+const importing = ref(false);
+const importJson = ref("");
+const slugify = (value) => value.toLowerCase().normalize("NFKD").replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+watch(() => draft.name, (name, previous) => {
+  if (draft.slug === slugify(previous)) draft.slug = slugify(name);
+});
+async function create() {
+  try {
+    const created = await $fetch("/api/forms/admin/forms", { method: "POST", body: { ...draft, definition: starter } });
+    await navigateTo(paths("adminForm", { id: created.id }));
+  } catch (cause) {
+    toast.add({ title: cause.statusMessage ?? t("error.generic", "Something went wrong. Please try again."), color: "error" });
+  }
+}
+async function runImport() {
+  try {
+    const parsed = JSON.parse(importJson.value);
+    const result = await $fetch("/api/forms/admin/import", {
+      method: "POST",
+      body: { forms: Array.isArray(parsed) ? parsed : [parsed] }
+    });
+    toast.add({ title: t("admin.imported", "Imported {inserted}, skipped {skipped} existing.", { inserted: result.inserted.length, skipped: result.skipped.length }), color: "success" });
+    importing.value = false;
+    importJson.value = "";
+    await refresh();
+  } catch (cause) {
+    toast.add({ title: cause.statusMessage ?? t("admin.invalidJson", "The JSON is not valid."), color: "error" });
+  }
+}
+const statusColor = { draft: "neutral", published: "success", archived: "warning" };
+</script>
+
+<template>
+  <UContainer class="space-y-6 py-10">
+    <div class="flex items-center justify-between gap-2">
+      <h1 class="text-3xl font-bold">
+        {{ t("admin.title", "Forms") }}
+      </h1>
+      <div class="flex gap-2">
+        <UButton
+          color="neutral"
+          variant="outline"
+          icon="i-lucide-upload"
+          :label="t('admin.import', 'Import')"
+          @click="importing = true"
+        />
+        <UButton
+          icon="i-lucide-plus"
+          :label="t('admin.new', 'New form')"
+          @click="creating = true"
+        />
+      </div>
+    </div>
+
+    <UAlert
+      v-if="error"
+      color="error"
+      variant="subtle"
+      :title="t('admin.forbidden', 'You are not allowed to manage forms.')"
+    />
+
+    <UEmpty
+      v-else-if="!forms?.length"
+      icon="i-lucide-clipboard-list"
+      :title="t('admin.empty', 'No forms yet.')"
+    />
+
+    <div
+      v-else
+      class="divide-y divide-default rounded-lg border border-default"
+    >
+      <div
+        v-for="form in forms"
+        :key="form.id"
+        class="flex flex-wrap items-center justify-between gap-3 p-4"
+      >
+        <div class="space-y-1">
+          <NuxtLink
+            :to="paths('adminForm', { id: form.id })"
+            class="font-medium hover:underline"
+          >
+            {{ form.name }}
+          </NuxtLink>
+          <p class="text-sm text-muted">
+            /{{ form.slug }} · {{ form.mode === "stepped" ? t("admin.stepped", "Stepped") : t("admin.single", "Single page") }}
+            · v{{ form.version }}
+            <template v-if="form.storage === 'none'">
+              · {{ t("admin.notStored", "Not stored") }}
+            </template>
+          </p>
+        </div>
+        <div class="flex items-center gap-3">
+          <UBadge
+            :color="statusColor[form.status]"
+            variant="subtle"
+            :label="t(`status.${form.status}`, form.status)"
+          />
+          <UButton
+            v-if="form.storage === 'db'"
+            color="neutral"
+            variant="outline"
+            size="sm"
+            :to="paths('adminSubmissions', { id: form.id })"
+            :label="t('admin.submissions', 'Submissions ({count})', { count: form.submissionCount })"
+          />
+          <UButton
+            color="neutral"
+            variant="ghost"
+            size="sm"
+            icon="i-lucide-pencil"
+            :to="paths('adminForm', { id: form.id })"
+            :aria-label="t('admin.edit', 'Edit')"
+          />
+        </div>
+      </div>
+    </div>
+
+    <UModal
+      v-model:open="creating"
+      :title="t('admin.new', 'New form')"
+    >
+      <template #body>
+        <form
+          class="space-y-4"
+          @submit.prevent="create"
+        >
+          <UFormField :label="t('admin.name', 'Name')">
+            <UInput
+              v-model="draft.name"
+              class="w-full"
+              autofocus
+            />
+          </UFormField>
+          <UFormField
+            :label="t('admin.slug', 'Slug')"
+            :description="t('admin.slugHint', 'Used in the public address.')"
+          >
+            <UInput
+              v-model="draft.slug"
+              class="w-full"
+            />
+          </UFormField>
+          <UButton
+            type="submit"
+            :label="t('admin.create', 'Create')"
+            :disabled="!draft.name || !draft.slug"
+          />
+        </form>
+      </template>
+    </UModal>
+
+    <UModal
+      v-model:open="importing"
+      :title="t('admin.import', 'Import')"
+    >
+      <template #body>
+        <div class="space-y-4">
+          <p class="text-sm text-muted">
+            {{ t("admin.importHint", "Paste one form or a list of forms (each with slug, name and definition). Forms whose slug already exists are skipped.") }}
+          </p>
+          <UTextarea
+            v-model="importJson"
+            :rows="12"
+            class="w-full font-mono text-xs"
+          />
+          <UButton
+            :label="t('admin.import', 'Import')"
+            :disabled="!importJson.trim()"
+            @click="runImport"
+          />
+        </div>
+      </template>
+    </UModal>
+  </UContainer>
+</template>

package/dist/runtime/app/pages/admin.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/pages/form.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/pages/form.vue

@@ -0,0 +1,18 @@
+<script setup>
+const route = useRoute();
+const slug = computed(() => String(route.params.slug));
+const { data: form } = await useForm(slug);
+useHead({ title: computed(() => form.value?.name ?? "") });
+</script>
+
+<template>
+  <UContainer class="max-w-2xl py-10">
+    <h1
+      v-if="form"
+      class="mb-6 text-3xl font-bold"
+    >
+      {{ form.name }}
+    </h1>
+    <FormRenderer :slug="slug" />
+  </UContainer>
+</template>

package/dist/runtime/app/pages/form.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/i18n/lang/da.json

@@ -0,0 +1,84 @@
+{
+  "forms": {
+    "actions": {
+      "next": "Næste",
+      "back": "Tilbage",
+      "submit": "Send",
+      "sendAnother": "Send en ny"
+    },
+    "step": {
+      "progress": "Trin {current} af {total}"
+    },
+    "success": {
+      "title": "Tak!",
+      "description": "Dine svar er sendt."
+    },
+    "error": {
+      "generic": "Noget gik galt. Prøv igen.",
+      "invalid": "Tjek de markerede felter.",
+      "notFound": "Formularen blev ikke fundet."
+    },
+    "preview": {
+      "notSent": "Forhåndsvisning: intet blev sendt."
+    },
+    "value": {
+      "yes": "Ja",
+      "no": "Nej"
+    },
+    "status": {
+      "draft": "Kladde",
+      "published": "Udgivet",
+      "archived": "Arkiveret"
+    },
+    "delivery": {
+      "none": "Ikke leveret",
+      "pending": "Afventer",
+      "delivered": "Leveret",
+      "failed": "Levering fejlede"
+    },
+    "validation": {
+      "required": "Feltet er påkrævet.",
+      "email": "Indtast en gyldig e-mailadresse.",
+      "tel": "Indtast et gyldigt telefonnummer.",
+      "date": "Indtast en gyldig dato.",
+      "option": "Vælg en af mulighederne.",
+      "min": "Skal være mindst {min}.",
+      "max": "Må højst være {max}.",
+      "minLength": "Indtast mindst {min} tegn.",
+      "maxLength": "Indtast højst {max} tegn.",
+      "pattern": "Værdien har et ugyldigt format.",
+      "maxFiles": "Upload højst {max} fil(er).",
+      "maxSize": "{name} er større end {max} MB.",
+      "accept": "{name} er ikke en tilladt filtype."
+    },
+    "admin": {
+      "title": "Formularer",
+      "new": "Ny formular",
+      "import": "Importér",
+      "edit": "Rediger",
+      "create": "Opret",
+      "save": "Gem",
+      "saved": "Gemt.",
+      "name": "Navn",
+      "slug": "Slug",
+      "slugHint": "Bruges i den offentlige adresse.",
+      "status": "Status",
+      "empty": "Ingen formularer endnu.",
+      "stepped": "Flere trin",
+      "single": "Én side",
+      "notStored": "Gemmes ikke",
+      "submissions": "Besvarelser ({count})",
+      "submissionsTitle": "Besvarelser",
+      "noSubmissions": "Ingen besvarelser endnu.",
+      "redeliver": "Lever igen",
+      "forbidden": "Du har ikke adgang til at administrere formularer.",
+      "imported": "Importerede {inserted}, sprang {skipped} eksisterende over.",
+      "invalidJson": "JSON er ugyldig.",
+      "importHint": "Indsæt én formular eller en liste af formularer (hver med slug, name og definition). Formularer med et eksisterende slug springes over.",
+      "definition": "Definition (JSON)",
+      "invalidDefinition": "Definitionen har fejl",
+      "preview": "Forhåndsvisning",
+      "previewUnavailable": "Ret definitionen for at se en forhåndsvisning."
+    }
+  }
+}

package/dist/runtime/i18n/lang/en.json

@@ -0,0 +1,84 @@
+{
+  "forms": {
+    "actions": {
+      "next": "Next",
+      "back": "Back",
+      "submit": "Submit",
+      "sendAnother": "Send another"
+    },
+    "step": {
+      "progress": "Step {current} of {total}"
+    },
+    "success": {
+      "title": "Thank you!",
+      "description": "Your answers have been sent."
+    },
+    "error": {
+      "generic": "Something went wrong. Please try again.",
+      "invalid": "Please check the highlighted fields.",
+      "notFound": "This form could not be found."
+    },
+    "preview": {
+      "notSent": "Preview: nothing was sent."
+    },
+    "value": {
+      "yes": "Yes",
+      "no": "No"
+    },
+    "status": {
+      "draft": "Draft",
+      "published": "Published",
+      "archived": "Archived"
+    },
+    "delivery": {
+      "none": "Not delivered",
+      "pending": "Pending",
+      "delivered": "Delivered",
+      "failed": "Delivery failed"
+    },
+    "validation": {
+      "required": "This field is required.",
+      "email": "Enter a valid email address.",
+      "tel": "Enter a valid phone number.",
+      "date": "Enter a valid date.",
+      "option": "Choose one of the available options.",
+      "min": "Must be at least {min}.",
+      "max": "Must be at most {max}.",
+      "minLength": "Enter at least {min} characters.",
+      "maxLength": "Enter at most {max} characters.",
+      "pattern": "The value has an invalid format.",
+      "maxFiles": "Upload at most {max} file(s).",
+      "maxSize": "{name} is larger than {max} MB.",
+      "accept": "{name} is not an accepted file type."
+    },
+    "admin": {
+      "title": "Forms",
+      "new": "New form",
+      "import": "Import",
+      "edit": "Edit",
+      "create": "Create",
+      "save": "Save",
+      "saved": "Saved.",
+      "name": "Name",
+      "slug": "Slug",
+      "slugHint": "Used in the public address.",
+      "status": "Status",
+      "empty": "No forms yet.",
+      "stepped": "Stepped",
+      "single": "Single page",
+      "notStored": "Not stored",
+      "submissions": "Submissions ({count})",
+      "submissionsTitle": "Submissions",
+      "noSubmissions": "No submissions yet.",
+      "redeliver": "Deliver again",
+      "forbidden": "You are not allowed to manage forms.",
+      "imported": "Imported {inserted}, skipped {skipped} existing.",
+      "invalidJson": "The JSON is not valid.",
+      "importHint": "Paste one form or a list of forms (each with slug, name and definition). Forms whose slug already exists are skipped.",
+      "definition": "Definition (JSON)",
+      "invalidDefinition": "The definition has problems",
+      "preview": "Preview",
+      "previewUnavailable": "Fix the definition to see a preview."
+    }
+  }
+}

package/dist/runtime/menus.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("@frigear-nu/menu/types").MenuSource;
+export default _default;

package/dist/runtime/menus.js

@@ -0,0 +1,15 @@
+import { defineMenuItem, defineMenuSource, extendMenuItem } from "@frigear-nu/menu/utils";
+export default defineMenuSource(() => {
+  const config = useRuntimeConfig().public.forms;
+  if (config?.pages?.admin) {
+    extendMenuItem("dashboard.account", defineMenuItem({
+      id: "forms-admin",
+      label: "Forms",
+      description: "Manage forms and their submissions.",
+      icon: "i-lucide-clipboard-list",
+      to: config.pages.admin,
+      tags: ["admin"],
+      order: 90
+    }));
+  }
+});