@webx-ui/module-inbox 0.1.0

package/README.md

@@ -0,0 +1,54 @@
+# @webx-ui/module-inbox
+
+Forms and submissions as a section of the [WebX UI](https://github.com/webx-ui/webx-ui) admin
+panel: the forms of a site on the left, what came in through one of them on the right.
+
+The other half is `webx-ui/module-inbox` on the server, which holds the forms, takes the
+submissions and sends the notifications. Neither is useful alone.
+
+## Install
+
+```bash
+pnpm add @webx-ui/module-inbox
+```
+
+```ts
+import { createAdmin } from '@webx-ui/module-admin'
+import { inbox } from '@webx-ui/module-inbox'
+import '@webx-ui/module-inbox/style.css'
+
+createAdmin({
+  modules: [inbox()],
+})
+```
+
+The section claims the panel's front page: a panel with an inbox is one somebody opens in the
+morning to see what came in overnight. A panel whose front page is something else says
+`inbox({ landing: false })`.
+
+## What is here
+
+- **The section** — the forms in a column that can be dragged into order, each with what is
+  waiting in it, and the submissions of the chosen one beside them.
+- **The form editor** — what the form is called and where it answers, its questions, who is
+  written to, the antispam, and the one line that puts it on a page.
+- **The questions** — a field is a row with an identity, not a value of the form: it is saved
+  in its own dialog, dragged into its own order, and deleted softly so that answers already
+  given keep reading under the label they were asked with.
+- **The statuses** — the states a submission can be in, as rows with their own words and
+  colours.
+
+## Permissions
+
+`inbox.view` opens the section and the submissions; `inbox.manage` changes what the forms ask
+and what the statuses are. The panel draws only what the reader may do, and the server refuses
+the rest either way.
+
+## Words
+
+The English here is a floor, so nothing shows a key while the dictionary is on its way. The
+translations live in the Composer package — one set of files for both halves.
+
+## Licence
+
+MIT

package/dist/FieldDialog.d.ts

@@ -0,0 +1,16 @@
+import { InboxField, InboxForm } from './types';
+/**
+ * One question, written.
+ *
+ * The settings shown are the ones the chosen type has and no others (§4): a `select` has
+ * choices, a `textarea` has a height, a `file` has a size and a list of extensions. Changing
+ * the type changes what is asked for, and the server keeps only what belongs — a leftover
+ * `choices` array on a text field would be a column of empty strings in an export a year from
+ * now.
+ */
+type __VLS_Props = {
+    field: InboxField | null;
+    form: InboxForm;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/FieldList.d.ts

@@ -0,0 +1,21 @@
+import { InboxField, InboxForm } from './types';
+/**
+ * The questions the form asks, in the order it asks them.
+ *
+ * A list with a grip rather than a table, because the order is the thing being edited here
+ * and a table cannot be dragged. Each question is saved on its own, in its own dialog: a
+ * field is a row with an identity that answers point at (§2.1), not a value of the form.
+ */
+type __VLS_Props = {
+    form: InboxForm;
+    canManage: boolean;
+};
+type __VLS_PublicProps = {
+    modelValue: InboxField[];
+} & __VLS_Props;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: InboxField[]) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: InboxField[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLElement>;
+export default _default;

package/dist/FormAntispam.d.ts

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

package/dist/FormCreateDialog.d.ts

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

package/dist/FormEditorPage.d.ts

@@ -0,0 +1,14 @@
+/**
+ * One form: what it is called, what it asks, who hears about it, and how it is put on a page.
+ *
+ * Five tabs and one save. The fields are the exception — a question is written in its own
+ * dialog and saved on its own, because it is a row with an identity (§2.1) and because a
+ * dragged order that waited for a save button would be an order nobody trusts.
+ */
+type __VLS_Props = {
+    base?: string;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    base: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/FormEmbed.d.ts

@@ -0,0 +1,19 @@
+import { InboxField, InboxForm } from './types';
+/**
+ * How the form gets onto a page.
+ *
+ * Two answers and both are one line, because the module's whole public half is one tag (§10):
+ * a template prints it, and a block type prints the same thing so that an editor never opens
+ * a template at all.
+ *
+ * Under them, the names. A hidden field is filled in by the page it stands on — the address
+ * somebody wrote from, the product they were looking at, the campaign that brought them — and
+ * the only way to fill one in is to know what it is called (§2.6).
+ */
+type __VLS_Props = {
+    form: InboxForm;
+    slug: string;
+    fields: InboxField[];
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/FormGeneral.d.ts

@@ -0,0 +1,36 @@
+import { LocalizedValue } from '@webx-ui/core';
+import { FormOptions } from './types';
+/**
+ * What the form is, and what it says once it has been sent.
+ *
+ * The two halves are on two cards because they are read at two different times: the first is
+ * set up once, the second is the sentence a visitor sees and is rewritten whenever the
+ * marketing does.
+ */
+type __VLS_Props = {
+    errors: Record<string, string[]>;
+};
+type __VLS_PublicProps = {
+    'settings': {
+        slug: string;
+        title: LocalizedValue;
+        is_enabled: boolean;
+    };
+    'options': FormOptions;
+} & __VLS_Props;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:settings": (value: {
+        slug: string;
+        title: LocalizedValue;
+        is_enabled: boolean;
+    }) => any;
+    "update:options": (value: FormOptions) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:settings"?: ((value: {
+        slug: string;
+        title: LocalizedValue;
+        is_enabled: boolean;
+    }) => any) | undefined;
+    "onUpdate:options"?: ((value: FormOptions) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/FormNotifications.d.ts

@@ -0,0 +1,24 @@
+import { FormOptions, InboxField } from './types';
+/**
+ * Who hears that something arrived (§9).
+ *
+ * Two kinds of recipient and they are not interchangeable. An administrator is written to at
+ * the address on their account and in the language they keep the panel in, so changing either
+ * changes it everywhere; a typed address is written to in the language the submission came in.
+ * The list offered is not every administrator but the ones who may open a submission — a
+ * notification is a link, and sending one to somebody who gets a 403 looks like the panel is
+ * broken rather than like the form is.
+ */
+type __VLS_Props = {
+    fields: InboxField[];
+    errors: Record<string, string[]>;
+};
+type __VLS_PublicProps = {
+    modelValue: FormOptions;
+} & __VLS_Props;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: FormOptions) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: FormOptions) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLElement>;
+export default _default;

package/dist/InboxPage.d.ts

@@ -0,0 +1,19 @@
+/**
+ * The section: the forms of the site on the left, what came in through one of them on the
+ * right (§11, §2.12).
+ *
+ * One screen rather than two, and that is the decision this is built around. The columns of
+ * the list are the fields of the chosen form, so a list of everything would have no columns
+ * to speak of; and the two questions somebody opens this section to ask — "what is new" and
+ * "what does this form ask" — are one click apart instead of one screen apart.
+ *
+ * The right-hand side is the submissions, and it arrives with them. What is here is the
+ * column: the forms, in the order somebody dragged them, with what is waiting in each.
+ */
+type __VLS_Props = {
+    base?: string;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    base: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/LocalizedRichText.d.ts

@@ -0,0 +1,17 @@
+import { LocalizedValue } from '@webx-ui/core';
+type __VLS_Props = {
+    placeholder?: string;
+    minHeight?: string;
+};
+type __VLS_PublicProps = {
+    modelValue?: LocalizedValue | string;
+} & __VLS_Props;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string | LocalizedValue) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | LocalizedValue) => any) | undefined;
+}>, {
+    placeholder: string;
+    minHeight: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/StatusDialog.d.ts

@@ -0,0 +1,16 @@
+import { InboxStatus } from './types';
+/**
+ * One state, written.
+ *
+ * The colour is a tone rather than a swatch: the panel has a light theme and a dark one, and
+ * a colour picked in one of them is unreadable in the other.
+ *
+ * Nothing here refuses a second default — the server clears the flag on whoever had it, which
+ * is what somebody moving the default from one status to another means, and refusing the save
+ * would be the other reading of the same click.
+ */
+type __VLS_Props = {
+    status: InboxStatus | null;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/StatusesPage.d.ts

@@ -0,0 +1,17 @@
+/**
+ * The states a submission can be in (§2.11).
+ *
+ * Rows rather than an enum, because every panel ends up wanting its own words — and the flags
+ * are what the section reads, not the keys, so renaming "New" to whatever this client calls
+ * it keeps it the status a new submission gets.
+ *
+ * Their order is the order of the tabs over the list of submissions, which is why it is
+ * dragged rather than typed.
+ */
+type __VLS_Props = {
+    base?: string;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    base: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/SubmissionCreateDialog.d.ts

@@ -0,0 +1,14 @@
+import { InboxForm } from './types';
+/**
+ * A submission typed in by hand — a call that came by telephone, a form filled in on paper.
+ *
+ * The same questions the site asks, drawn from the same fields, and sent to the same intake:
+ * the rules are the form's own, so a required field is required here too and a refusal reads
+ * the same way. The one thing the panel cannot do is attach a visitor's file, because there is
+ * no visitor — the files a submission carries are what was posted with it.
+ */
+type __VLS_Props = {
+    form: InboxForm;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/SubmissionList.d.ts

@@ -0,0 +1,33 @@
+import { InboxForm } from './types';
+/**
+ * What has come in through the chosen form — the right-hand side of the section (§11).
+ *
+ * Its columns are the form's own `in_table` fields and arrive with the rows, so this never has
+ * to fetch the form to know what it is drawing. Which of them survive a narrow pane is decided
+ * here and not by the form: the first answer identifies the row and stays at any width, and
+ * each one after it goes a step earlier than the last. Pairing two of them into one cell — the
+ * e-mail under the name — would mean guessing which fields mean what, and the panel does not
+ * know that about somebody else's form.
+ *
+ * The state of the list lives in the address: coming back from a submission has to land on the
+ * same form, the same tab and the same page, or the screen costs exactly that over the dialog
+ * it was chosen instead of (§11).
+ */
+type __VLS_Props = {
+    form: InboxForm;
+    /** Where the section is mounted. */
+    base?: string;
+    /** Whether the pane is beside the list of forms or is the whole screen. */
+    inline?: boolean;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    back: () => any;
+    changed: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onBack?: (() => any) | undefined;
+    onChanged?: (() => any) | undefined;
+}>, {
+    inline: boolean;
+    base: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/SubmissionPage.d.ts

@@ -0,0 +1,17 @@
+/**
+ * One submission, on a screen of its own (§11).
+ *
+ * A dialog over the list would have kept the filters under the reader's hand, and it was
+ * rejected for one reason: a submission needs an address somebody can send. It goes into the
+ * mail to whoever deals with it, it gets pasted into a chat, an agent links to it. What the
+ * dialog would have given back is paid for here instead — the list's whole state travels in
+ * the address, so the way out lands exactly where the reader was, and the arrows walk the same
+ * filtered pile.
+ */
+type __VLS_Props = {
+    base?: string;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    base: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/api.d.ts

@@ -0,0 +1,54 @@
+import { AdminContext } from '@webx-ui/module-admin';
+import { FieldInput, FormInput, InboxField, InboxForm, InboxRecipient, InboxStatus, InboxSubmission, StatusInput, SubmissionInput, SubmissionMassInput, SubmissionQuery, SubmissionsPage } from './types';
+export interface InboxApi {
+    /** Every form, in the order of the column, with what is waiting in each. */
+    forms(): Promise<InboxForm[]>;
+    /** One form with its fields — what the editor opens. */
+    form(id: number): Promise<InboxForm>;
+    createForm(input: FormInput): Promise<InboxForm>;
+    saveForm(id: number, input: FormInput): Promise<InboxForm>;
+    /** Refused with a 422 when the form has submissions: it is switched off, not deleted. */
+    removeForm(id: number): Promise<void>;
+    /** A copy, switched off, with the questions and none of the answers. */
+    duplicateForm(id: number): Promise<InboxForm>;
+    sortForms(ids: number[]): Promise<void>;
+    fields(formId: number): Promise<InboxField[]>;
+    createField(formId: number, input: FieldInput): Promise<InboxField>;
+    saveField(id: number, input: FieldInput): Promise<InboxField>;
+    /** Softly: the answers already given through it keep reading. */
+    removeField(id: number): Promise<void>;
+    sortFields(formId: number, ids: number[]): Promise<void>;
+    statuses(): Promise<InboxStatus[]>;
+    createStatus(input: StatusInput): Promise<InboxStatus>;
+    saveStatus(id: number, input: StatusInput): Promise<InboxStatus>;
+    /** Refused with a 422 while submissions are still in it. */
+    removeStatus(id: number): Promise<void>;
+    sortStatuses(ids: number[]): Promise<void>;
+    /** The administrators a form can be told to write to: the ones who may read the section. */
+    recipients(): Promise<InboxRecipient[]>;
+    /** One form's submissions, with the columns of the list and the counts of its tabs. */
+    submissions(formId: number, query?: SubmissionQuery): Promise<SubmissionsPage>;
+    /**
+     * One of them, open. Opening it marks it read.
+     *
+     * The filters travel with it so that the neighbours it reports are the ones either side of
+     * it in the list somebody was actually looking at.
+     */
+    submission(id: number, query?: SubmissionQuery): Promise<InboxSubmission>;
+    /** Typed in by hand — a call that came by telephone. `fields` is by machine name. */
+    createSubmission(formId: number, fields: Record<string, unknown>): Promise<InboxSubmission>;
+    saveSubmission(id: number, input: SubmissionInput): Promise<InboxSubmission>;
+    removeSubmission(id: number): Promise<void>;
+    /** A pile moved, marked or thrown away at once. */
+    massSubmissions(input: SubmissionMassInput): Promise<{
+        count: number;
+    }>;
+    /**
+     * Where the spreadsheet is. An address rather than a request: a download is the browser's
+     * own job, and fetching a file into memory to hand it back to the browser is work for
+     * nothing.
+     */
+    exportUrl(formId: number, query?: SubmissionQuery): string;
+}
+/** Everything under `/inbox`, below the panel's API path. */
+export declare function createInboxApi(admin: AdminContext): InboxApi;

package/dist/i18n.d.ts

@@ -0,0 +1,2 @@
+/** Puts this package's English under the panel's dictionary, once per panel. */
+export declare function useInboxMessages(): void;

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+export { inbox, type InboxOptions } from './module';
+export { createInboxApi, type InboxApi } from './api';
+export { inboxMessages } from './messages';
+export { option } from './options';
+export { default as WxInboxPage } from './InboxPage';
+export { default as WxInboxFormEditor } from './FormEditorPage';
+export { default as WxInboxStatusesPage } from './StatusesPage';
+export { default as WxInboxSubmissionList } from './SubmissionList';
+export { default as WxInboxSubmissionPage } from './SubmissionPage';
+export { default as WxInboxFieldList } from './FieldList';
+export { FIELD_TYPES, STATUS_COLORS } from './types';
+export type { FieldChoice, FieldInput, FieldOptions, FieldType, FormInput, FormOptions, InboxField, InboxForm, InboxAdmin, InboxPage, InboxRecipient, InboxStatus, InboxSubmission, Recipient, StatusColor, StatusInput, SubmissionAttachment, SubmissionColumn, SubmissionCounts, SubmissionEvent, SubmissionInput, SubmissionMassInput, SubmissionMeta, SubmissionQuery, SubmissionRow, SubmissionsPage, SubmissionValue, } from './types';