@frigear-nu/forms 0.0.8 → 0.1.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@frigear-nu/forms",
   "configKey": "forms",
-  "version": "0.0.8",
+  "version": "0.1.0",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -23,10 +23,10 @@ const module$1 = defineNuxtModule({
     "@frigear-nu/notify": { version: ">=0.0.1" },
     "@frigear-nu/ui": { version: ">=0.0.1" },
     "@frigear-nu/menu": { version: ">=0.0.1", optional: true },
-    // Provides the shared page components of the admin pages (`AdminPage`, `AdminTable`, ...).
+    // The admin pages only exist with the admin shell; its page components come from `@frigear-nu/ui`.
     "@frigear-nu/admin": { version: ">=0.0.0", optional: true }
   },
-  async setup(options, nuxt) {
+  setup(options, nuxt) {
     registerModule(MODULE_NAME, nuxt);
     addAuthScope(
       nuxt,
@@ -71,7 +71,7 @@ const module$1 = defineNuxtModule({
         defaultProvider: options.captcha?.defaultProvider ?? "turnstile"
       }
     };
-    await registerDatabaseTable(nuxt, {
+    registerDatabaseTable(nuxt, {
       resolver,
       schema: (dialect) => `./runtime/server/db/schema.${dialect}`
     });
@@ -114,7 +114,9 @@ const module$1 = defineNuxtModule({
       { name: "useFormsLocales", from: resolver.resolve("./runtime/app/composables/useForms") },
       { name: "useFormsPaths", from: resolver.resolve("./runtime/app/composables/useForms") },
       { name: "useFormLink", from: resolver.resolve("./runtime/app/composables/useForms") },
-      { name: "useFormStepper", from: resolver.resolve("./runtime/app/composables/useFormStepper") }
+      { name: "useFormStepper", from: resolver.resolve("./runtime/app/composables/useFormStepper") },
+      { name: "useFormActions", from: resolver.resolve("./runtime/app/composables/useFormActions") },
+      { name: "FORMS_LIST_KEY", from: resolver.resolve("./runtime/app/composables/useFormActions") }
     ]);
     addComponentsDir({ path: resolver.resolve("./runtime/app/components") });
     addComponent({ name: "FormEmbed", filePath: resolver.resolve("./runtime/app/components/FormEmbed.vue"), global: true });
@@ -125,7 +127,7 @@ const module$1 = defineNuxtModule({
       { name: "forms-admin-submissions", path: adminSubmissionsPath, file: "./runtime/app/pages/admin-submissions.vue" },
       { name: "forms-admin-submission", path: adminSubmissionPath, file: "./runtime/app/pages/admin-submission.vue" }
     ]);
-    addOptionalMenuSource(nuxt, { file: resolver.resolve("./runtime/menus"), menu: "dashboard.account" });
+    addOptionalMenuSource(nuxt, { file: resolver.resolve("./runtime/menus"), menu: "admin.nav" });
   }
 });
 

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

@@ -7,6 +7,9 @@ const props = defineProps({
 });
 const t = useModuleT("forms");
 const toast = useToast();
+const showError = useErrorToast();
+const { copy: copyText } = useCopyToClipboard();
+const format = useFormat();
 const base = computed(() => `/api/forms/admin/forms/${props.formId}`);
 const access = computed(() => resolveAccess(definition.value));
 const availabilities = computed(() => [
@@ -46,10 +49,7 @@ const fromLocalInput = (value) => value ? new Date(value).toISOString() : void 0
 function patchMoment(side, patch) {
   if (schedule.value.type === "yearly") setSchedule({ ...schedule.value, [side]: { ...schedule.value[side], ...patch } });
 }
-const fail = (cause) => toast.add({
-  title: cause.statusMessage ?? t("error.generic", "Something went wrong. Please try again."),
-  color: "error"
-});
+const fail = (cause) => showError(cause, t("error.generic", "Something went wrong. Please try again."));
 const { data: tokens, refresh: refreshTokens } = await useFetch(() => `${base.value}/tokens`, { default: () => [] });
 const tokenName = ref("");
 const creating = ref(false);
@@ -74,14 +74,7 @@ async function revoke(token) {
     fail(cause);
   }
 }
-async function copy(text) {
-  try {
-    await navigator.clipboard.writeText(text);
-    toast.add({ title: t("preview.copied", "Copied to clipboard."), color: "success" });
-  } catch (cause) {
-    fail(cause);
-  }
-}
+const copy = (text) => copyText(text, t("preview.copied", "Copied to clipboard."));
 const { data: passwordStatus, refresh: refreshPassword } = await useFetch(() => `${base.value}/password`, { default: () => ({ set: false }) });
 const password = ref("");
 const savingPassword = ref(false);
@@ -315,7 +308,7 @@ ${headers}  -H 'content-type: application/json' \\
             <p class="text-xs text-muted">
               <code>{{ token.prefix }}…</code>
               ·
-              {{ token.lastUsedAt ? t("access.lastUsed", "Last used {date}", { date: new Date(token.lastUsedAt).toLocaleString() }) : t("access.neverUsed", "Never used") }}
+              {{ token.lastUsedAt ? t("access.lastUsed", "Last used {date}", { date: format.dateTime(token.lastUsedAt) }) : t("access.neverUsed", "Never used") }}
             </p>
           </div>
           <UButton

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

@@ -6,18 +6,18 @@ type __VLS_Props = {
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: () => any;
+    dragend: () => 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;
+    onDragend?: (() => any) | undefined;
     onDragover?: ((event: DragEvent) => any) | undefined;
     onDragstart?: ((event: DragEvent) => any) | undefined;
-    onDragend?: (() => any) | undefined;
     onUp?: (() => any) | undefined;
     onDown?: (() => any) | undefined;
     onRemove?: (() => any) | undefined;

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

@@ -6,18 +6,18 @@ type __VLS_Props = {
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: () => any;
+    dragend: () => 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;
+    onDragend?: (() => any) | undefined;
     onDragover?: ((event: DragEvent) => any) | undefined;
     onDragstart?: ((event: DragEvent) => any) | undefined;
-    onDragend?: (() => any) | undefined;
     onUp?: (() => any) | undefined;
     onDown?: (() => any) | undefined;
     onRemove?: (() => any) | undefined;

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

@@ -10,15 +10,15 @@ type __VLS_Props = {
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: () => any;
-    dragstart: (event: DragEvent) => any;
     dragend: () => any;
+    dragstart: (event: DragEvent) => 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;
+    onDragstart?: ((event: DragEvent) => any) | undefined;
     onUp?: (() => any) | undefined;
     onDown?: (() => any) | undefined;
     onRemove?: (() => any) | undefined;

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

@@ -10,15 +10,15 @@ type __VLS_Props = {
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: () => any;
-    dragstart: (event: DragEvent) => any;
     dragend: () => any;
+    dragstart: (event: DragEvent) => 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;
+    onDragstart?: ((event: DragEvent) => any) | undefined;
     onUp?: (() => any) | undefined;
     onDown?: (() => any) | undefined;
     onRemove?: (() => any) | undefined;

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

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

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

@@ -0,0 +1,73 @@
+<script setup>
+import { z } from "zod";
+import { defineForm } from "../../utils";
+const emit = defineEmits(["close"]);
+const t = useModuleT("forms");
+const { busy, run } = useAction();
+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 state = reactive({ name: "", slug: "" });
+const schema = z.object({
+  name: z.string().trim().min(1, t("error.invalid", "Please check the highlighted fields.")),
+  slug: z.string().trim().min(1, t("error.invalid", "Please check the highlighted fields."))
+});
+const slugify = (value) => value.toLowerCase().normalize("NFKD").replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+watch(() => state.name, (name, previous) => {
+  if (state.slug === slugify(previous)) state.slug = slugify(name);
+});
+async function save() {
+  const created = await run(
+    () => $fetch("/api/forms/admin/forms", { method: "POST", body: { ...state, definition: starter } }),
+    { success: t("admin.created", "Form created") }
+  );
+  if (created) emit("close", created);
+}
+</script>
+
+<template>
+  <FormSlideover
+    form-id="forms-create"
+    :title="t('admin.new', 'New form')"
+    :submit-label="t('admin.createForm', 'Create form')"
+    :loading="busy"
+    @close="emit('close', false)"
+  >
+    <UForm
+      id="forms-create"
+      :state="state"
+      :schema="schema"
+      class="flex flex-col gap-4"
+      @submit="save"
+    >
+      <UFormField
+        name="name"
+        :label="t('admin.name', 'Name')"
+      >
+        <UInput
+          v-model="state.name"
+          class="w-full"
+          autofocus
+        />
+      </UFormField>
+      <UFormField
+        name="slug"
+        :label="t('admin.slug', 'Slug')"
+        :description="t('admin.slugHint', 'Used in the public address.')"
+      >
+        <UInput
+          v-model="state.slug"
+          class="w-full"
+        />
+      </UFormField>
+    </UForm>
+  </FormSlideover>
+</template>

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

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

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

@@ -7,7 +7,7 @@ const props = defineProps({
   contentKey: { type: [String, Number], required: false }
 });
 const t = useModuleT("forms");
-const toast = useToast();
+const { copy: copyText } = useCopyToClipboard();
 const paths = useFormsPaths();
 const path = computed(() => paths("form", { slug: props.slug }));
 const STORAGE_KEY = "forms:preview-device";
@@ -58,13 +58,7 @@ function tryAgain() {
 watch(open, (value) => {
   if (value) tryAgain();
 });
-async function copy() {
-  try {
-    await navigator.clipboard.writeText(json.value);
-    toast.add({ title: t("preview.copied", "Copied to clipboard."), color: "success" });
-  } catch {
-  }
-}
+const copy = () => copyText(json.value, t("preview.copied", "Copied to clipboard."));
 </script>
 
 <template>

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

@@ -1,4 +1,5 @@
 export { useForm, useFormAccess, useFormsLocale, useFormsLocales, useFormsPaths, emptyAnswers, submitAnswers, fieldLabel } from './useForms.js';
+export { useFormActions, FORMS_LIST_KEY } from './useFormActions.js';
 export { useFormStepper } from './useFormStepper.js';
 export { useFormBuilderEditor } from './useFormBuilderEditor.js';
 export { useFormBuilderLabels, fieldTypeIcons } from './useFormBuilderLabels.js';

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

@@ -1,4 +1,5 @@
 export { useForm, useFormAccess, useFormsLocale, useFormsLocales, useFormsPaths, emptyAnswers, submitAnswers, fieldLabel } from "./useForms.js";
+export { useFormActions, FORMS_LIST_KEY } from "./useFormActions.js";
 export { useFormStepper } from "./useFormStepper.js";
 export { useFormBuilderEditor } from "./useFormBuilderEditor.js";
 export { useFormBuilderLabels, fieldTypeIcons } from "./useFormBuilderLabels.js";

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

@@ -0,0 +1,26 @@
+import type { DropdownMenuItem } from '@nuxt/ui';
+import type { FormAdminDto, 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;
+    name: string;
+    slug: string;
+    status: FormStatus;
+    storage?: FormStorage;
+    submissionCount?: number;
+}
+/** 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. */
+export declare function useFormActions(): {
+    busy: any;
+    create: () => Promise<FormAdminDto | false>;
+    clone: (form: Pick<FormActionTarget, "id">) => Promise<boolean>;
+    remove: (form: Pick<FormActionTarget, "id" | "name">) => Promise<boolean>;
+    importJson: (text: string) => Promise<boolean>;
+    redeliver: (submissionId: string) => Promise<boolean>;
+    menu: (form: FormActionTarget, options?: {
+        extra?: DropdownMenuItem[];
+        onRemoved?: () => void | Promise<void>;
+    }) => DropdownMenuItem[][];
+};

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

@@ -0,0 +1,103 @@
+import { LazyFormCreateSlideover } from "#components";
+export const FORMS_LIST_KEY = "forms:admin:forms";
+export function useFormActions() {
+  const t = useModuleT("forms");
+  const paths = useFormsPaths();
+  const link = useFormLink();
+  const overlay = useOverlay();
+  const confirm = useConfirmDialog();
+  const toast = useToast();
+  const showError = useErrorToast();
+  const { busy, run } = useAction();
+  const creator = overlay.create(LazyFormCreateSlideover, { destroyOnClose: true });
+  async function create() {
+    const created = await creator.open().result;
+    if (created) await navigateTo(paths("adminForm", { id: created.id }));
+    return created;
+  }
+  async function clone(form) {
+    const copy = await run(
+      () => $fetch(`/api/forms/admin/forms/${form.id}/clone`, { method: "POST" }),
+      { success: t("admin.cloned", "Form duplicated") }
+    );
+    if (!copy) return false;
+    await navigateTo(paths("adminForm", { id: copy.id }));
+    return true;
+  }
+  async function remove(form) {
+    const confirmed = await confirm({
+      title: t("admin.archiveTitle", "Archive {name}?", { name: form.name }),
+      description: t("admin.archiveBody", "It stops accepting submissions and disappears from the public site. Its submissions are kept."),
+      confirmText: t("admin.archive", "Archive form"),
+      destructive: true
+    });
+    if (!confirmed) return false;
+    const archived = await run(
+      () => $fetch(`/api/forms/admin/forms/${form.id}`, { method: "DELETE" }),
+      { success: t("admin.archived", "Form archived") }
+    );
+    if (!archived) return false;
+    await refreshNuxtData(FORMS_LIST_KEY);
+    return true;
+  }
+  async function importJson(text) {
+    let parsed;
+    try {
+      parsed = JSON.parse(text);
+    } catch {
+      toast.add({ title: t("admin.invalidJson", "The JSON is not valid."), color: "error" });
+      return false;
+    }
+    const result = await run(() => $fetch("/api/forms/admin/import", {
+      method: "POST",
+      body: { forms: Array.isArray(parsed) ? parsed : [parsed] }
+    }));
+    if (!result) return false;
+    toast.add({
+      title: t("admin.imported", "Imported {inserted}, skipped {skipped} existing.", { inserted: result.inserted.length, skipped: result.skipped.length }),
+      color: "success"
+    });
+    await refreshNuxtData(FORMS_LIST_KEY);
+    return true;
+  }
+  async function redeliver(submissionId) {
+    const result = await run(() => $fetch(
+      `/api/forms/admin/submissions/${submissionId}/redeliver`,
+      { method: "POST" }
+    ));
+    if (!result) return false;
+    if (result.deliveryStatus === "failed") {
+      showError(new Error(result.deliveryError ?? ""), t("delivery.failed", "Delivery failed"));
+      return false;
+    }
+    toast.add({ title: t("admin.redelivered", "Delivered again"), color: "success", icon: "i-lucide-check" });
+    return true;
+  }
+  function menu(form, options = {}) {
+    const items = [...options.extra ?? []];
+    if (form.storage === "db" || (form.submissionCount ?? 0) > 0) {
+      items.push({
+        label: t("admin.submissionsTitle", "Submissions"),
+        icon: "i-lucide-inbox",
+        to: paths("adminSubmissions", { id: form.id })
+      });
+    }
+    if (form.status === "published" && link.enabled.value) {
+      items.push({ label: t("admin.copyLink", "Copy link"), icon: "i-lucide-link", onSelect: () => link.copy(form.slug) });
+    }
+    items.push({ label: t("admin.clone", "Duplicate form"), icon: "i-lucide-copy", onSelect: () => clone(form) });
+    const groups = [items];
+    if (form.status !== "archived") {
+      groups.push([{
+        label: t("admin.archive", "Archive form"),
+        icon: "i-lucide-archive",
+        color: "error",
+        onSelect: async () => {
+          if (await remove(form)) await options.onRemoved?.();
+        }
+      }]);
+    }
+    return groups;
+  }
+  return { busy, create, clone, remove, importJson, redeliver, menu };
+}

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

@@ -29,7 +29,7 @@ export declare function useFormsPaths(): (name: keyof typeof DEFAULT_PATHS, para
 export declare function useFormLink(): {
     enabled: any;
     url: (slug: string) => string;
-    copy: (slug: string) => Promise<void>;
+    copy: (slug: string) => any;
 };
 /** Label of a field in the given locale, falling back to its key. */
 export declare const fieldLabel: (field: FormField, locale: string) => string;

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

@@ -67,19 +67,12 @@ export function useFormsPaths() {
 export function useFormLink() {
   const paths = useFormsPaths();
   const origin = useRequestURL().origin;
-  const toast = useToast();
+  const { copy: copyText } = useCopyToClipboard();
   const t = useModuleT("forms");
   const pages = useRuntimeConfig().public.forms?.pages;
   const enabled = computed(() => !!pages?.form);
   const url = (slug) => `${origin}${paths("form", { slug })}`;
-  async function copy(slug) {
-    try {
-      await navigator.clipboard.writeText(url(slug));
-      toast.add({ title: t("admin.linkCopied", "Link copied."), color: "success" });
-    } catch {
-      toast.add({ title: t("error.generic", "Something went wrong. Please try again."), color: "error" });
-    }
-  }
+  const copy = (slug) => copyText(url(slug), t("admin.linkCopied", "Link copied."));
   return { enabled, url, copy };
 }
 export const fieldLabel = (field, locale) => translate(field.label, locale) || field.key;