@nxgt/mail-ui 0.1.0

package/components/nx-button.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { twMerge } from '@maizzle/framework';
+import { computed, useAttrs } from 'vue';
+import { type Color, type ColourVariant, colourVariant } from './ui';
+
+/**
+ * material-vue's Button as a link: its variants, colours and sizes, on
+ * Maizzle's `<Button>`, which pads it for Outlook. Named `nx-button.vue`,
+ * not `button.vue`: there, Vue would read `<Button>` as this file itself.
+ */
+type Size = 'xs' | 'sm' | 'default' | 'lg';
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(
+	defineProps<{
+		href: string;
+		variant?: ColourVariant;
+		color?: Color;
+		size?: Size;
+		align?: 'left' | 'center' | 'right';
+	}>(),
+	{ variant: 'filled', color: 'primary', size: 'default' },
+);
+
+/** The chip's colours, plus what a link must reset. */
+const EXTRA: Record<ColourVariant, string> = {
+	filled: '',
+	tonal: '',
+	outlined: 'bg-transparent',
+	ghost: 'bg-transparent',
+	link: 'no-underline',
+};
+
+/** Padding, and the Outlook values Maizzle's Button derives the same padding from. */
+const SIZE: Record<
+	Size,
+	{ class: string; msoPt: string; msoPb: string; msoPx: number }
+> = {
+	xs: {
+		class: 'px-2 py-1 text-xs leading-4',
+		msoPt: '4px',
+		msoPb: '7px',
+		msoPx: 67,
+	},
+	sm: {
+		class: 'px-3 py-2 text-sm leading-4',
+		msoPt: '8px',
+		msoPb: '15px',
+		msoPx: 86,
+	},
+	default: {
+		class: 'px-4 py-2.5 text-sm leading-4',
+		msoPt: '10px',
+		msoPb: '19px',
+		msoPx: 114,
+	},
+	lg: {
+		class: 'px-6 py-3 text-sm leading-4',
+		msoPt: '12px',
+		msoPb: '23px',
+		msoPx: 171,
+	},
+};
+
+const attrs = useAttrs();
+const size = computed(() => SIZE[props.size]);
+const classes = computed(() =>
+	twMerge(
+		props.variant === 'link'
+			? 'font-medium font-sans'
+			: `rounded-full font-medium font-sans ${size.value.class}`,
+		colourVariant(props.variant, props.color),
+		EXTRA[props.variant],
+		attrs.class as string,
+	),
+);
+</script>
+
+<template>
+  <Button
+    v-bind="{ ...attrs, class: undefined }"
+    :href="href"
+    :variant="variant === 'link' ? 'link' : 'solid'"
+    :align="align ?? null"
+    :mso-pt="size.msoPt"
+    :mso-pb="size.msoPb"
+    :mso-px="size.msoPx"
+    :class="classes"
+  ><slot /></Button>
+</template>

package/components/progress.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { twMerge } from '@maizzle/framework';
+import { computed, useAttrs } from 'vue';
+
+/**
+ * material-vue's Progress, still: a bar of `modelValue` out of `max`, on a
+ * track at 20% of the primary colour. The fill is a table cell of that width,
+ * which every client draws; material-vue's transform and pulse are not.
+ *
+ * The share is computed when the e-mail is built: a value that is not a
+ * number — a placeholder, filled only at send time — **throws**, rather than
+ * drawing an empty bar.
+ */
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(
+	defineProps<{ modelValue?: number; max?: number; height?: number }>(),
+	{ modelValue: 0, max: 100, height: 8 },
+);
+
+for (const [name, value] of [
+	['modelValue', props.modelValue],
+	['max', props.max],
+	['height', props.height],
+] as const) {
+	if (
+		typeof value !== 'number' ||
+		!Number.isFinite(value) ||
+		(name === 'height' && value <= 0)
+	) {
+		throw new Error(
+			`NxProgress: ${name} must be a number known when the e-mail is built — a placeholder is filled only when it is sent`,
+		);
+	}
+}
+
+const attrs = useAttrs();
+const percent = computed(() =>
+	props.max > 0
+		? Math.min(
+				100,
+				Math.max(0, Math.round((props.modelValue / props.max) * 100)),
+			)
+		: 0,
+);
+/** Outlook's shape for a thin cell, as `NxSeparator`'s: height, line and font alike. */
+const cell = computed(
+	() =>
+		`height: ${props.height}px; line-height: ${props.height}px; font-size: ${props.height}px; mso-line-height-rule: exactly;`,
+);
+const classes = computed(() =>
+	twMerge('mb-4 w-full rounded-full bg-primary-20', attrs.class as string),
+);
+</script>
+
+<template>
+  <!-- Left out of the plain-text version, where a bar says nothing: Maizzle keeps what is inside in the HTML. -->
+  <div data-maizzle-html-only>
+  <table v-bind="{ ...attrs, class: undefined }" :class="classes" role="progressbar" :aria-valuenow="modelValue" aria-valuemin="0" :aria-valuemax="max" cellpadding="0" cellspacing="0">
+    <tr>
+      <td v-if="percent > 0" class="rounded-full bg-primary" :height="height" :style="`width: ${percent}%; ${cell}`">&zwj;</td>
+      <td v-if="percent < 100" :height="height" :style="cell">&zwj;</td>
+    </tr>
+  </table>
+  </div>
+</template>

package/components/ratio-card.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { EYEBROW } from './ui';
+
+/**
+ * material-vue's RatioCard: two figures side by side, and a bar of the left
+ * one's share, on a track at 15% of the primary. The fill is NxProgress's,
+ * rounded at both ends where material-vue's ends square.
+ */
+defineProps<{
+	label: string;
+	left: { label: string; value: string };
+	right: { label: string; value: string };
+	percent: number;
+}>();
+</script>
+
+<template>
+  <NxCard class="py-4">
+    <NxCardContent class="px-4">
+      <NxCardDescription class="mt-0">{{ label }}</NxCardDescription>
+      <table class="mt-3 w-full" role="presentation" cellpadding="0" cellspacing="0">
+        <tr>
+          <td class="align-top">
+            <p :class="EYEBROW">{{ left.label }}</p>
+            <p class="m-0 mt-0.5 text-lg font-semibold tracking-tight text-foreground">{{ left.value }}</p>
+          </td>
+          <td class="pl-3 text-right align-top">
+            <p :class="EYEBROW">{{ right.label }}</p>
+            <p class="m-0 mt-0.5 text-lg font-semibold tracking-tight text-muted-foreground">{{ right.value }}</p>
+          </td>
+        </tr>
+      </table>
+      <NxProgress class="mb-0 mt-3 rounded bg-primary-15" :model-value="percent" />
+    </NxCardContent>
+  </NxCard>
+</template>

package/components/see-also.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { twMerge } from '@maizzle/framework';
+import { computed, getCurrentInstance, useAttrs } from 'vue';
+import { EYEBROW, type SeeAlsoItem, sharedMessage } from './ui';
+
+/**
+ * material-vue's SeeAlso: a line, a small uppercase label, and links one per
+ * row. Every link of an e-mail opens a browser, so each carries the arrow
+ * material-vue gives an external one, as a character. The line is a cell's
+ * top border, and the space above it padding, which Outlook keeps and a
+ * margin not.
+ */
+defineOptions({ inheritAttrs: false });
+
+const props = defineProps<{ items: readonly SeeAlsoItem[]; label?: string }>();
+
+const globals: Record<string, unknown> =
+	getCurrentInstance()?.appContext.config.globalProperties ?? {};
+const heading = computed(
+	() => props.label ?? sharedMessage(globals, 'common.seeAlso', 'See also'),
+);
+const attrs = useAttrs();
+const classes = computed(() =>
+	twMerge(
+		'mb-4 w-full',
+		attrs.class as string,
+	),
+);
+</script>
+
+<template>
+  <table v-if="items.length > 0" v-bind="{ ...attrs, class: undefined }" :class="classes" role="presentation" cellpadding="0" cellspacing="0">
+    <tr>
+      <td class="pt-10">
+        <table class="w-full" role="presentation" cellpadding="0" cellspacing="0">
+          <tr>
+            <td class="border-t [border-top-style:solid] border-border pt-8">
+              <p :class="`${EYEBROW} mb-3`">{{ heading }}</p>
+              <table class="w-full" role="presentation" cellpadding="0" cellspacing="0">
+                <tr v-for="item in items" :key="item.id ?? item.href">
+                  <td class="px-2 py-2.5">
+                    <a :href="item.href" class="text-sm text-muted-foreground no-underline">{{ item.title }}</a>
+                  </td>
+                  <td class="w-1 px-2 text-right align-middle text-xs text-muted-foreground"><span aria-hidden="true"><span data-maizzle-html-only>&#8599;</span></span></td>
+                </tr>
+              </table>
+            </td>
+          </tr>
+        </table>
+      </td>
+    </tr>
+  </table>
+</template>

package/components/separator.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { twMerge } from '@maizzle/framework';
+import { computed, useAttrs } from 'vue';
+
+/**
+ * material-vue's Separator, horizontal: a 1px line in the border colour.
+ * Its space above and below is padding, which Outlook keeps and a margin not.
+ */
+defineOptions({ inheritAttrs: false });
+
+const attrs = useAttrs();
+const classes = computed(() => twMerge('py-6', attrs.class as string));
+</script>
+
+<template>
+  <table class="w-full" role="presentation" cellpadding="0" cellspacing="0">
+    <tr>
+      <td v-bind="{ ...attrs, class: undefined }" :class="classes">
+        <table class="w-full" role="presentation" cellpadding="0" cellspacing="0">
+          <tr>
+            <td class="bg-border" style="height: 1px; line-height: 1px; font-size: 1px;">&zwj;</td>
+          </tr>
+        </table>
+      </td>
+    </tr>
+  </table>
+</template>

package/components/stat-card.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { computed, useSlots } from 'vue';
+import { type DeltaTone, deltaOf } from './ui';
+
+/**
+ * material-vue's StatCard: a label, a figure, and under it a delta and a
+ * hint, in an `NxCard`. The delta's arrow is a character (an e-mail has no
+ * icon font). There is no loading state: an e-mail does not load. A reader
+ * hears the delta as written, without material-vue's spoken "Up" or "Down".
+ */
+const props = defineProps<{
+	label: string;
+	value?: string | number;
+	hint?: string;
+	delta?: number | string;
+	deltaTone?: DeltaTone;
+}>();
+
+const slots = useSlots();
+const delta = computed(() =>
+	props.delta === undefined || props.delta === ''
+		? null
+		: deltaOf(props.delta, props.deltaTone),
+);
+</script>
+
+<template>
+  <NxCard class="py-4">
+    <NxCardContent class="px-4">
+      <table class="w-full" role="presentation" cellpadding="0" cellspacing="0">
+        <tr>
+          <td class="align-top text-sm text-muted-foreground">{{ label }}</td>
+          <td v-if="slots.icon" class="w-1 whitespace-nowrap pl-3 text-right align-top text-muted-foreground"><slot name="icon" /></td>
+        </tr>
+      </table>
+      <p class="m-0 mt-2 text-2xl font-semibold text-foreground">{{ value }}</p>
+      <p v-if="hint || delta" class="m-0 mt-2 text-xs">
+        <span v-if="delta" :class="`pr-2 font-medium ${delta.colour}`"><span aria-hidden="true"><span data-maizzle-html-only>{{ delta.glyph }}</span></span> {{ delta.label }}</span>
+        <span v-if="hint" class="text-muted-foreground">{{ hint }}</span>
+      </p>
+    </NxCardContent>
+  </NxCard>
+</template>

package/components/status-indicator.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { twMerge } from '@maizzle/framework';
+import { computed, useAttrs } from 'vue';
+
+/**
+ * material-vue's StatusIndicator: a coloured dot before a label. The dot is
+ * a character, which every client sizes, where an empty span is dropped.
+ */
+type Tone = 'neutral' | 'primary' | 'success' | 'info' | 'warning' | 'error';
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<{ tone?: Tone }>(), { tone: 'neutral' });
+
+const DOT: Record<Tone, string> = {
+	neutral: 'text-muted-foreground',
+	primary: 'text-primary',
+	success: 'text-success',
+	info: 'text-info',
+	warning: 'text-warning',
+	error: 'text-error',
+};
+
+const attrs = useAttrs();
+const classes = computed(() =>
+	twMerge(
+		'whitespace-nowrap text-sm font-medium text-foreground',
+		attrs.class as string,
+	),
+);
+</script>
+
+<template>
+  <span v-bind="{ ...attrs, class: undefined }" :class="classes"><span aria-hidden="true" :class="`${DOT[props.tone]} pr-1.5 text-[10px]`">&#9679;</span><slot /></span>
+</template>

package/components/steps-item.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { twMerge } from '@maizzle/framework';
+import { computed, useAttrs, useSlots } from 'vue';
+
+/**
+ * material-vue's StepsItem: a numbered circle, a title and the text under it,
+ * with a line from the circle down to the next step. Placed in `NxSteps`,
+ * which numbers it and says whether it is the `last`.
+ *
+ * Two rows: the circle and the title, then the text beside a cell whose right
+ * border is the line — in the same row, so the line runs as far down as the
+ * text goes, in every client.
+ */
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(
+	defineProps<{ title?: string; index?: number; last?: boolean }>(),
+	{ last: true },
+);
+
+const attrs = useAttrs();
+const slots = useSlots();
+const classes = computed(() =>
+	twMerge(
+		'pl-3 align-top',
+		props.last ? 'pb-0' : 'pb-8',
+		attrs.class as string,
+	),
+);
+</script>
+
+<template>
+  <tr>
+    <td colspan="2" class="w-8 align-top">
+      <span class="block h-8 w-8 rounded-full border border-solid border-primary-25 bg-background text-center text-xs font-semibold leading-[30px] text-primary"><slot name="index">{{ index }}</slot></span>
+    </td>
+    <td class="pl-3 align-top">
+      <p v-if="title" class="m-0 pt-1 text-base font-semibold tracking-tight text-foreground">{{ title }}</p>
+    </td>
+  </tr>
+  <tr>
+    <td :class="['w-4 text-[1px] leading-px', !last && 'border-r [border-right-style:solid] border-border']"><span data-maizzle-html-only>&zwj;</span></td>
+    <td class="w-4 text-[1px] leading-px"><span data-maizzle-html-only>&zwj;</span></td>
+    <td v-bind="{ ...attrs, class: undefined }" :class="classes">
+      <div v-if="slots.default" class="mt-2 text-sm leading-6 text-muted-foreground"><slot /></div>
+    </td>
+  </tr>
+</template>

package/components/steps.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { twMerge } from '@maizzle/framework';
+import { cloneVNode, computed, useAttrs, useSlots } from 'vue';
+import { slotComponents } from './ui';
+
+/**
+ * material-vue's Steps: its `NxStepsItem`s one under the other, numbered in
+ * order unless an item says its `index`, and joined by a line.
+ */
+defineOptions({ inheritAttrs: false });
+
+const attrs = useAttrs();
+const slots = useSlots();
+/** Each item, told its number and whether a line runs on under it. */
+const items = computed(() => {
+	const nodes = slotComponents(slots.default?.());
+	return nodes.map((node, position) =>
+		cloneVNode(node, {
+			index: node.props?.index ?? position + 1,
+			last: position === nodes.length - 1,
+		}),
+	);
+});
+const classes = computed(() => twMerge('mb-4 w-full', attrs.class as string));
+</script>
+
+<template>
+  <table v-bind="{ ...attrs, class: undefined }" :class="classes" role="presentation" cellpadding="0" cellspacing="0">
+    <component :is="item" v-for="(item, position) in items" :key="position" />
+  </table>
+</template>

package/components/summary-data.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { twMerge } from '@maizzle/framework';
+import { computed, useAttrs } from 'vue';
+
+/**
+ * material-vue's SummaryData: labels and their values, a row each, or on
+ * one line with `inline`. A row without a value is left out — `0` is a
+ * value — unless `showEmpty`.
+ */
+interface SummaryDatum {
+	label: string;
+	value?: string | number | null;
+}
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(
+	defineProps<{
+		data?: SummaryDatum[];
+		inline?: boolean;
+		showEmpty?: boolean;
+	}>(),
+	{ data: () => [], inline: false, showEmpty: false },
+);
+
+const attrs = useAttrs();
+const rows = computed(() =>
+	props.showEmpty
+		? props.data
+		: props.data.filter(({ value }) => value === 0 || Boolean(value)),
+);
+const classes = computed(() => twMerge('mb-4 w-full', attrs.class as string));
+</script>
+
+<template>
+  <p v-if="inline" v-bind="{ ...attrs, class: undefined }" :class="twMerge('m-0 mb-4 text-sm', attrs.class as string)">
+    <template v-for="(row, index) in rows" :key="index"><span class="whitespace-nowrap"><span class="font-medium text-muted-foreground">{{ row.label }}:</span> {{ row.value }}</span><template v-if="index < rows.length - 1">&ensp; </template></template>
+  </p>
+  <table v-else v-bind="{ ...attrs, class: undefined }" :class="classes" role="presentation" cellpadding="0" cellspacing="0">
+    <tr v-for="(row, index) in rows" :key="index">
+      <td class="border-b [border-bottom-style:solid] border-primary-40 py-2 pr-2 text-sm text-muted-foreground">{{ row.label }}</td>
+      <td class="border-b [border-bottom-style:solid] border-primary-40 py-2 text-right text-sm text-foreground">{{ row.value }}</td>
+    </tr>
+  </table>
+</template>

package/components/table-body.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { provide } from 'vue';
+import { TABLE_PART } from './ui';
+
+/** material-vue's TableBody: the rows, each with a line under it. */
+provide(TABLE_PART, 'body');
+</script>
+
+<template>
+  <tbody><slot /></tbody>
+</template>

package/components/table-caption.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { twMerge } from '@maizzle/framework';
+import { computed, useAttrs } from 'vue';
+
+/** material-vue's TableCaption: a muted line under the table. */
+defineOptions({ inheritAttrs: false });
+
+const attrs = useAttrs();
+const classes = computed(() =>
+	twMerge('mt-4 text-sm text-muted-foreground', attrs.class as string),
+);
+</script>
+
+<template>
+  <caption v-bind="{ ...attrs, class: undefined }" align="bottom" :class="classes" style="caption-side: bottom"><slot /></caption>
+</template>

package/components/table-cell.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { twMerge } from '@maizzle/framework';
+import { computed, inject, useAttrs } from 'vue';
+import { TABLE_PART, type TablePart } from './ui';
+
+/**
+ * material-vue's TableCell. Unlike material-vue's, its text wraps: a value too
+ * long for one line would widen the e-mail past a phone's screen.
+ */
+defineOptions({ inheritAttrs: false });
+
+const part = inject<TablePart>(TABLE_PART, 'body');
+const attrs = useAttrs();
+const classes = computed(() =>
+	twMerge(
+		'p-2 align-middle',
+		// One side's style only: `border-0 border-solid` would end as `border: 0`.
+		part === 'footer'
+			? 'border-t [border-top-style:solid] border-border bg-muted font-medium'
+			: 'border-b [border-bottom-style:solid] border-border',
+		attrs.class as string,
+	),
+);
+</script>
+
+<template>
+  <td v-bind="{ ...attrs, class: undefined }" :class="classes"><slot /></td>
+</template>

package/components/table-empty.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { twMerge } from '@maizzle/framework';
+import { computed, useAttrs } from 'vue';
+
+/** material-vue's TableEmpty: one row across `colspan` columns, its text centred. */
+defineOptions({ inheritAttrs: false });
+
+withDefaults(defineProps<{ colspan?: number }>(), { colspan: 1 });
+
+const attrs = useAttrs();
+const classes = computed(() =>
+	twMerge(
+		'px-4 py-10 text-center align-middle text-sm text-foreground',
+		attrs.class as string,
+	),
+);
+</script>
+
+<template>
+  <tr>
+    <td v-bind="{ ...attrs, class: undefined }" :colspan="colspan" :class="classes"><slot /></td>
+  </tr>
+</template>

package/components/table-footer.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { provide } from 'vue';
+import { TABLE_PART } from './ui';
+
+/** material-vue's TableFooter: rows on a muted ground, in medium weight, with a line above. */
+provide(TABLE_PART, 'footer');
+</script>
+
+<template>
+  <tfoot><slot /></tfoot>
+</template>

package/components/table-head.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { twMerge } from '@maizzle/framework';
+import { computed, inject, useAttrs } from 'vue';
+import { TABLE_PART, type TablePart } from './ui';
+
+/** material-vue's TableHead: a column's name, left-aligned, in medium weight. */
+defineOptions({ inheritAttrs: false });
+
+const part = inject<TablePart>(TABLE_PART, 'body');
+const attrs = useAttrs();
+const classes = computed(() =>
+	twMerge(
+		'h-10 whitespace-nowrap px-2 text-left align-middle font-medium text-foreground',
+		// One side's style only: `border-0 border-solid` would end as `border: 0`.
+		part === 'footer'
+			? 'border-t [border-top-style:solid] border-border bg-muted'
+			: 'border-b [border-bottom-style:solid] border-border',
+		attrs.class as string,
+	),
+);
+</script>
+
+<template>
+  <th v-bind="{ ...attrs, class: undefined }" :class="classes"><slot /></th>
+</template>

package/components/table-header.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { provide } from 'vue';
+import { TABLE_PART } from './ui';
+
+/** material-vue's TableHeader: its cells are `NxTableHead`s, with a line under them. */
+provide(TABLE_PART, 'header');
+</script>
+
+<template>
+  <thead><slot /></thead>
+</template>

package/components/table-row.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { useAttrs } from 'vue';
+
+/**
+ * material-vue's TableRow. Its line is drawn by its cells: most mail clients
+ * draw no border on a row.
+ */
+defineOptions({ inheritAttrs: false });
+
+const attrs = useAttrs();
+</script>
+
+<template>
+  <tr v-bind="attrs"><slot /></tr>
+</template>

package/components/table.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { twMerge } from '@maizzle/framework';
+import { computed, provide, useAttrs } from 'vue';
+import { TABLE_PART } from './ui';
+
+/**
+ * material-vue's Table: a full-width table of `text-sm` rows. Its parts are
+ * `NxTableHeader`, `NxTableBody`, `NxTableFooter`, `NxTableRow`,
+ * `NxTableHead`, `NxTableCell`, `NxTableCaption` and `NxTableEmpty`.
+ */
+defineOptions({ inheritAttrs: false });
+
+// A table in a footer cell starts again from body cells.
+provide(TABLE_PART, 'body');
+
+const attrs = useAttrs();
+const classes = computed(() =>
+	twMerge('mb-4 w-full text-sm text-foreground', attrs.class as string),
+);
+</script>
+
+<template>
+  <!-- biome-ignore lint/a11y/noRedundantRoles: Maizzle marks a table without a role as role="none", a layout -->
+  <table v-bind="{ ...attrs, class: undefined }" :class="classes" role="table" cellpadding="0" cellspacing="0"><slot /></table>
+</template>