@webx-ui/module-inbox 0.1.0

package/dist/options.d.ts

@@ -0,0 +1,15 @@
+import { Ref, WritableComputedRef } from 'vue';
+import { FormOptions } from './types';
+/**
+ * One setting of a form, as something a control can be bound to.
+ *
+ * The keys are literal and several of them have dots in them — `thank-you.heading` is one key
+ * (§5) — so nothing here splits on a dot, and a whole new object is written on every change
+ * rather than a property being set in place: the editor holds the options as one value, and a
+ * mutation underneath it is a change nothing is told about.
+ *
+ * An empty value is not written as an empty value: it is taken out. The server does the same
+ * when it saves, and a form whose settings are twelve blank strings reads as configured when
+ * it is not.
+ */
+export declare function option<T>(options: Ref<FormOptions>, key: string, fallback: T): WritableComputedRef<T>;

package/dist/style.css

@@ -0,0 +1 @@
+.wx-inbox-field-form[data-v-cd153059]{display:flex;flex-direction:column;gap:var(--wx-space-12)}.wx-inbox-field-form__row[data-v-cd153059]{display:flex;flex-wrap:wrap;gap:var(--wx-space-12)}.wx-inbox-field-form__row[data-v-cd153059]>*{flex:1 1 200px;min-width:0}.wx-inbox-field-form__row[data-v-cd153059]:empty{display:none}.wx-inbox-field-form__checks[data-v-cd153059]{display:flex;flex-wrap:wrap;gap:var(--wx-space-16)}.wx-inbox-choices[data-v-cd153059]{display:flex;flex-direction:column;gap:var(--wx-space-8);align-items:flex-start}.wx-inbox-choices__row[data-v-cd153059]{display:flex;align-items:center;gap:var(--wx-space-8);width:100%}.wx-inbox-choices__row[data-v-cd153059]>:first-child{flex:0 1 180px;min-width:0}.wx-inbox-choices__row[data-v-cd153059]>:nth-child(2){flex:1 1 auto;min-width:0}.wx-inbox-field[data-v-3b684f07]{display:flex;flex-direction:column;gap:var(--wx-space-2);flex:1 1 auto;min-width:0}.wx-inbox-field__name[data-v-3b684f07]{display:flex;align-items:center;gap:var(--wx-space-6);min-width:0}.wx-inbox-embed[data-v-fdabb537]{display:flex;flex-direction:column;gap:var(--wx-space-16)}.wx-inbox-embed__snippet[data-v-fdabb537]{display:flex;align-items:center;gap:var(--wx-space-8);margin-top:var(--wx-space-12);padding:var(--wx-space-10) var(--wx-space-12);border:1px solid var(--wx-border-default);border-radius:var(--wx-radius-md);background:var(--wx-bg-subtle)}.wx-inbox-embed__snippet code[data-v-fdabb537]{flex:1 1 auto;min-width:0;overflow-x:auto;white-space:pre;font-family:var(--wx-font-family-mono);font-size:var(--wx-font-size-sm)}.wx-inbox-general[data-v-35e56e3d]{display:flex;flex-direction:column;gap:var(--wx-space-16)}.wx-inbox-recipients[data-v-48ebf651]{display:flex;flex-direction:column;gap:var(--wx-space-8);margin-block:var(--wx-space-12)}.wx-inbox-recipients__row[data-v-48ebf651]{display:flex;align-items:center;gap:var(--wx-space-8)}.wx-inbox-recipients__row[data-v-48ebf651]>:first-child{flex:1 1 auto;min-width:0}.wx-inbox-editor[data-v-194b4a47]{display:flex;flex-direction:column;gap:var(--wx-space-16);min-height:0}.wx-inbox-editor__head[data-v-194b4a47]{display:flex;align-items:center;gap:var(--wx-space-12);flex-wrap:wrap}.wx-inbox-editor__id[data-v-194b4a47]{min-width:0}.wx-inbox-editor__title[data-v-194b4a47]{margin:0;font-size:var(--wx-font-size-xl);font-weight:var(--wx-font-weight-semibold);line-height:var(--wx-font-line-height-tight)}.wx-inbox-editor__tabs[data-v-194b4a47]{flex:1 1 auto;min-height:0}.wx-inbox-create[data-v-55fb40d8],.wx-inbox-by-hand[data-v-72006299]{display:flex;flex-direction:column;gap:var(--wx-space-12)}.wx-submissions[data-v-7ef0e131]{display:flex;flex-direction:column;gap:var(--wx-space-12);padding:var(--wx-space-16);min-width:0;height:100%;min-height:0}.wx-submissions__head[data-v-7ef0e131]{display:flex;align-items:center;gap:var(--wx-space-8);flex-wrap:wrap}.wx-submissions__who[data-v-7ef0e131]{flex:1 1 auto;min-width:0}.wx-submissions__views[data-v-7ef0e131]{flex:1 1 auto;min-height:0}.wx-submissions__mass[data-v-7ef0e131]{display:flex;align-items:center;gap:var(--wx-space-8);flex-wrap:wrap}.wx-submissions[data-v-7ef0e131] .wx-submissions__when{white-space:nowrap}.wx-submissions__state[data-v-7ef0e131]{display:flex;align-items:center;flex-wrap:wrap;gap:var(--wx-space-6);min-width:0}.wx-submissions[data-v-7ef0e131] .is-unread{font-weight:var(--wx-font-weight-medium)}.wx-submissions[data-v-7ef0e131] .is-unread td:first-child{box-shadow:inset 2px 0 0 0 var(--wx-color-primary)}.wx-inbox{height:100%;min-height:0}.wx-inbox>.wx-card__body{height:100%;min-height:0;display:flex;flex-direction:column}.wx-inbox__panes{flex:1 1 auto;min-height:0}.wx-inbox__loading{padding:var(--wx-space-16)}.wx-inbox__forms{padding:var(--wx-space-8)}.wx-inbox-form{display:flex;flex-direction:column;gap:var(--wx-space-2);align-items:flex-start;flex:1 1 auto;min-width:0;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:start;cursor:pointer}.wx-inbox-form__name{display:flex;align-items:center;gap:var(--wx-space-6);min-width:0;max-width:100%}.wx-inbox__forms .wx-sortable-list__row:has(.wx-inbox-form.is-current){background:var(--wx-bg-subtle);border-radius:var(--wx-radius-sm)}.wx-inbox-form.is-current{color:var(--wx-color-primary)}.wx-inbox-form__count{flex:0 0 auto}.wx-inbox-status-form[data-v-b520b53b]{display:flex;flex-direction:column;gap:var(--wx-space-12)}.wx-inbox-status-form__checks[data-v-b520b53b]{display:flex;flex-wrap:wrap;gap:var(--wx-space-16)}.wx-inbox-statuses[data-v-8c5d0882]{display:flex;flex-direction:column;align-items:flex-start;gap:var(--wx-space-12)}.wx-inbox-statuses>.wx-list-screen[data-v-8c5d0882]{align-self:stretch}.wx-inbox-status[data-v-8c5d0882]{display:flex;align-items:center;gap:var(--wx-space-8);flex:1 1 auto;min-width:0;flex-wrap:wrap}.wx-submission[data-v-6b6abbf9]{display:flex;flex-direction:column;gap:var(--wx-space-16);min-width:0;container-type:inline-size}.wx-submission__head[data-v-6b6abbf9]{display:flex;align-items:center;gap:var(--wx-space-8);flex-wrap:wrap}.wx-submission__who[data-v-6b6abbf9]{flex:1 1 auto;min-width:0}.wx-submission__panes[data-v-6b6abbf9],.wx-submission__main[data-v-6b6abbf9],.wx-submission__aside[data-v-6b6abbf9]{display:flex;flex-direction:column;gap:var(--wx-space-16);min-width:0}@container (min-width: 900px){.wx-submission__panes[data-v-6b6abbf9]{flex-direction:row;align-items:flex-start}.wx-submission__main[data-v-6b6abbf9]{flex:1 1 auto}.wx-submission__aside[data-v-6b6abbf9]{flex:0 0 320px;max-width:320px}}.wx-submission__value[data-v-6b6abbf9]{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}.wx-submission__detail[data-v-6b6abbf9]{overflow-wrap:anywhere}.wx-submission__event[data-v-6b6abbf9]{margin:0}.wx-submission__by[data-v-6b6abbf9]{display:flex;align-items:baseline;gap:var(--wx-space-6);flex-wrap:wrap;margin:0}.wx-submission__files[data-v-6b6abbf9]{display:flex;flex-wrap:wrap;gap:var(--wx-space-8)}.wx-submission__fields[data-v-6b6abbf9]{display:flex;flex-direction:column;gap:var(--wx-space-12)}.wx-submission__field[data-v-6b6abbf9]{display:flex;flex-direction:column;gap:var(--wx-space-4)}

package/dist/types.d.ts

@@ -0,0 +1,266 @@
+import { LocalizedValue } from '@webx-ui/core';
+/** The kinds of question a form can ask (§4). Mirrors `WebxUi\Inbox\Fields\FieldType`. */
+export declare const FIELD_TYPES: readonly ["text", "email", "tel", "textarea", "select", "radio", "checkbox", "consent", "date", "file", "hidden"];
+export type FieldType = (typeof FIELD_TYPES)[number];
+/** Tones of `WxBadge`, which is what a status is coloured with — never a hex value. */
+export declare const STATUS_COLORS: readonly ["default", "primary", "success", "warning", "info", "danger"];
+export type StatusColor = (typeof STATUS_COLORS)[number];
+/** One written-down answer of a `select`, `radio` or `checkbox`. */
+export interface FieldChoice {
+    value: string;
+    label: LocalizedValue | string;
+}
+/**
+ * What a field may be configured with. Which keys mean anything depends on the type (§4), and
+ * the server keeps only the ones that do.
+ */
+export interface FieldOptions {
+    maxlength?: number;
+    rows?: number;
+    pattern?: string;
+    min?: number | string;
+    max?: number | string;
+    choices?: FieldChoice[];
+    text?: LocalizedValue | string;
+    max_size?: number;
+    extensions?: string[];
+    multiple?: boolean;
+    [key: string]: unknown;
+}
+export interface InboxField {
+    id: number;
+    form_id: number;
+    /** What somebody typed, or null. */
+    name: string | null;
+    /** What the HTML will actually say — `f17` for a field nobody named. */
+    key: string;
+    type: FieldType;
+    title: LocalizedValue;
+    placeholder: LocalizedValue;
+    help: LocalizedValue;
+    options: FieldOptions;
+    is_enabled: boolean;
+    is_required: boolean;
+    is_fullsize: boolean;
+    in_table: boolean;
+    position: number;
+    [key: string]: unknown;
+}
+/** A field as the dialog saves it. */
+export interface FieldInput {
+    name: string | null;
+    type: FieldType;
+    title: LocalizedValue;
+    placeholder?: LocalizedValue;
+    help?: LocalizedValue;
+    options?: FieldOptions;
+    is_enabled: boolean;
+    is_required: boolean;
+    is_fullsize: boolean;
+    in_table: boolean;
+}
+/** Who a notification goes to: somebody with an account, or an address typed in. */
+export type Recipient = {
+    admin_id: number;
+} | {
+    email: string;
+};
+/** The settings of a form (§5). Every key is literal, dots included. */
+export interface FormOptions {
+    'thank-you.heading'?: LocalizedValue;
+    'thank-you.text'?: LocalizedValue;
+    'design.submit-text'?: LocalizedValue;
+    redirect?: string;
+    recipients?: Recipient[];
+    email_field?: string;
+    'antispam.honeypot'?: boolean;
+    'antispam.min_seconds'?: number;
+    'antispam.throttle'?: number;
+    'antispam.captcha'?: 'off' | 'recaptcha' | 'turnstile';
+    [key: string]: unknown;
+}
+export interface InboxForm {
+    id: number;
+    slug: string;
+    title: LocalizedValue;
+    is_enabled: boolean;
+    options: FormOptions;
+    position: number;
+    /** Only where the query counted them — null on a form loaded on its own. */
+    submissions_count: number | null;
+    /** Unread and not spam. */
+    unread_count: number | null;
+    /** Only on a form asked for by id, or one just written. */
+    fields?: InboxField[];
+    created_at: string | null;
+    updated_at: string | null;
+}
+/** A form as its editor saves it. */
+export interface FormInput {
+    slug: string;
+    title: LocalizedValue;
+    is_enabled: boolean;
+    options: FormOptions;
+}
+export interface InboxStatus {
+    id: number;
+    key: string;
+    title: LocalizedValue;
+    color: StatusColor;
+    is_default: boolean;
+    is_spam: boolean;
+    is_closed: boolean;
+    position: number;
+    submissions_count: number | null;
+}
+export interface StatusInput {
+    key: string;
+    title: LocalizedValue;
+    color: StatusColor;
+    is_default: boolean;
+    is_spam: boolean;
+    is_closed: boolean;
+}
+/** Somebody with an account who may read the section, for the recipients list. */
+export interface InboxRecipient {
+    id: number;
+    name: string;
+    email: string;
+}
+/** An administrator as a name beside something else — an assignee, the author of a log line. */
+export interface InboxAdmin {
+    id: number;
+    name: string;
+    email: string;
+}
+/** One column of the list: a field of the form that was marked `in_table`. */
+export interface SubmissionColumn {
+    key: string;
+    label: string;
+    type: FieldType;
+}
+/** What each tab above the list would hold, under the filters that are on. */
+export interface SubmissionCounts {
+    all: number;
+    unread: number;
+    /** By the status's key, spam included — its own tab has to say how much is in it. */
+    statuses: Record<string, number>;
+}
+/** A page as Laravel's `->paginate()` serialises it, which is what `WxTable` reads. */
+export interface InboxPage<T> {
+    data: T[];
+    current_page: number;
+    last_page: number;
+    per_page: number;
+    total: number;
+    from: number | null;
+    to: number | null;
+}
+/** One line of the list. The answers are keyed by the field's machine name. */
+export interface SubmissionRow {
+    id: number;
+    values: Record<string, string | null>;
+    status: InboxStatus | null;
+    assignee: InboxAdmin | null;
+    is_read: boolean;
+    source: string;
+    files_count: number;
+    created_at: string | null;
+    [key: string]: unknown;
+}
+/**
+ * The list, and the two things that travel with it: what its columns are, and what each tab
+ * above it would hold.
+ */
+export interface SubmissionsPage extends InboxPage<SubmissionRow> {
+    columns: SubmissionColumn[];
+    counts: SubmissionCounts;
+}
+/** One answer, with the question as it was asked at the time (§2.2). */
+export interface SubmissionValue {
+    id: number;
+    field_id: number | null;
+    name: string;
+    label: string | null;
+    type: string;
+    value: string | null;
+    payload: unknown;
+}
+export interface SubmissionAttachment {
+    id: number;
+    field_id: number | null;
+    name: string;
+    size: number;
+    mime: string | null;
+    /** Through the panel, behind the same permission as the submission (§8). */
+    url: string;
+}
+/** One line of what has happened to a submission. Never edited, never deleted. */
+export interface SubmissionEvent {
+    id: number;
+    type: 'created' | 'status' | 'assignee' | 'note' | 'notified' | string;
+    from: string | null;
+    to: string | null;
+    /** Null is the system — the submission arriving, the notification going out. */
+    author: {
+        id: number;
+        name: string | null;
+    } | null;
+    created_at: string | null;
+}
+/** What the intake saw around the submission: the page, the language, the campaign. */
+export interface SubmissionMeta {
+    ip?: string;
+    user_agent?: string;
+    page?: string;
+    referrer?: string;
+    utm?: Record<string, string>;
+    locale?: string;
+    [key: string]: unknown;
+}
+export interface InboxSubmission {
+    id: number;
+    form: {
+        id: number;
+        slug: string | null;
+        title: LocalizedValue | null;
+    };
+    status: InboxStatus | null;
+    assignee: InboxAdmin | null;
+    values: SubmissionValue[];
+    files: SubmissionAttachment[];
+    meta: SubmissionMeta;
+    events: SubmissionEvent[];
+    is_read: boolean;
+    source: string;
+    notified_at: string | null;
+    notify_error: string | null;
+    /** The neighbours in the list this was opened from, so the arrows walk the same pile. */
+    previous_id: number | null;
+    next_id: number | null;
+    created_at: string | null;
+    updated_at: string | null;
+}
+/** Everything the list asks the server for. The tab is `view`, the rest are filters. */
+export interface SubmissionQuery {
+    view?: string;
+    search?: string;
+    /** An administrator's id, or `none` — the pile nobody has picked up. */
+    assignee?: string | null;
+    sort?: string | null;
+    page?: number;
+    per_page?: number;
+}
+/** A submission changed by hand: the status, the assignee, a typo in an answer. */
+export interface SubmissionInput {
+    status_id?: number;
+    assignee_id?: number | null;
+    /** Machine name → the corrected text. The snapshot beside it is never rewritten. */
+    values?: Record<string, string | null>;
+}
+/** A pile dealt with at once. */
+export interface SubmissionMassInput {
+    ids: number[];
+    action: 'status' | 'read' | 'unread' | 'delete';
+    status_id?: number;
+}

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@webx-ui/module-inbox",
+  "version": "0.1.0",
+  "description": "Forms and submissions for the WebX UI admin panel: the forms of a site, their fields, their statuses, and what has come in through them.",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "keywords": [
+    "webx-ui",
+    "vue",
+    "admin",
+    "cms",
+    "forms",
+    "inbox"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/webx-ui/webx-ui.git",
+    "directory": "packages/module-inbox"
+  },
+  "homepage": "https://webx-ui.github.io/webx-ui/guide/inbox.html",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./style.css": "./dist/style.css",
+    "./dist/style.css": "./dist/style.css",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "typecheck": "vue-tsc -p tsconfig.json --noEmit"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0",
+    "vue-router": "^4.5.0"
+  },
+  "dependencies": {
+    "@webx-ui/core": "^0.22.0",
+    "@webx-ui/module-admin": "^0.7.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.10.1",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "typescript": "^5.9.3",
+    "vite": "^7.1.14",
+    "vite-plugin-dts": "^4.5.4",
+    "vue": "^3.5.24",
+    "vue-router": "^4.5.1",
+    "vue-tsc": "^3.1.3"
+  }
+}