@nxgt/mail-ui 0.1.0

package/components/card-description.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { twMerge } from '@maizzle/framework';
+import { computed, useAttrs } from 'vue';
+
+/** material-vue's CardDescription, under the title. */
+defineOptions({ inheritAttrs: false });
+
+const attrs = useAttrs();
+const classes = computed(() =>
+	twMerge('m-0 mt-1.5 text-sm text-muted-foreground', attrs.class as string),
+);
+</script>
+
+<template>
+  <p v-bind="{ ...attrs, class: undefined }" :class="classes"><slot /></p>
+</template>

package/components/card-footer.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { twMerge } from '@maizzle/framework';
+import { computed, useAttrs } from 'vue';
+
+/** material-vue's CardFooter: the card's last row, as its actions. */
+defineOptions({ inheritAttrs: false });
+
+const attrs = useAttrs();
+const classes = computed(() => twMerge('px-6 pt-6', attrs.class as string));
+</script>
+
+<template>
+  <tr>
+    <td v-bind="{ ...attrs, class: undefined }" :class="classes"><slot /></td>
+  </tr>
+</template>

package/components/card-header.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { twMerge } from '@maizzle/framework';
+import { computed, useAttrs, useSlots } from 'vue';
+
+/**
+ * material-vue's CardHeader: a title, a description under it, and an
+ * `action` on the right.
+ */
+defineOptions({ inheritAttrs: false });
+
+defineProps<{ title?: string; description?: string }>();
+
+const attrs = useAttrs();
+const slots = useSlots();
+const classes = computed(() => twMerge('px-6 pb-6', attrs.class as string));
+</script>
+
+<template>
+  <tr>
+    <td v-bind="{ ...attrs, class: undefined }" :class="classes">
+      <table class="w-full" role="presentation" cellpadding="0" cellspacing="0">
+        <tr>
+          <td class="align-top">
+            <NxCardTitle v-if="title">{{ title }}</NxCardTitle>
+            <NxCardDescription v-if="description">{{ description }}</NxCardDescription>
+            <slot />
+          </td>
+          <td v-if="slots.action" class="pl-4 text-right align-top"><slot name="action" /></td>
+        </tr>
+      </table>
+    </td>
+  </tr>
+</template>

package/components/card-title.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { twMerge } from '@maizzle/framework';
+import { computed, useAttrs } from 'vue';
+
+/** material-vue's CardTitle. */
+defineOptions({ inheritAttrs: false });
+
+const attrs = useAttrs();
+const classes = computed(() =>
+	twMerge(
+		'm-0 text-base font-semibold leading-none text-card-foreground',
+		attrs.class as string,
+	),
+);
+</script>
+
+<template>
+  <!-- biome-ignore lint/a11y/useHeadingContent: the heading's text is the slot, which Biome cannot see. -->
+  <h3 v-bind="{ ...attrs, class: undefined }" :class="classes"><slot /></h3>
+</template>

package/components/card.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { twMerge } from '@maizzle/framework';
+import { computed, useAttrs } from 'vue';
+
+/**
+ * material-vue's Card: a bordered, rounded box. Its parts —
+ * `NxCardHeader`, `NxCardContent`, `NxCardFooter` — are its rows.
+ */
+defineOptions({ inheritAttrs: false });
+
+const attrs = useAttrs();
+const classes = computed(() =>
+	twMerge(
+		'rounded-xl border border-solid border-border bg-card py-6 text-card-foreground shadow-sm',
+		attrs.class as string,
+	),
+);
+</script>
+
+<template>
+  <table class="mb-4 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">
+          <slot />
+        </table>
+      </td>
+    </tr>
+  </table>
+</template>

package/components/chip.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { twMerge } from '@maizzle/framework';
+import { computed, provide, useAttrs, useSlots } from 'vue';
+import { AVATAR_SIZE, type Color, type ColourVariant, colourVariant } from './ui';
+
+/**
+ * material-vue's Chip, static: a rounded label with `avatar`, `leading` and
+ * `trailing` slots — `avatar` in place of `leading`, as in material-vue. An
+ * e-mail runs no script, so it has no dismiss button; `active` makes it
+ * `filled`, as in material-vue. Unlike material-vue's, the avatar is not
+ * pulled into the padding: Gmail drops a negative margin.
+ */
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(
+	defineProps<{
+		label?: string;
+		variant?: ColourVariant;
+		color?: Color;
+		active?: boolean;
+	}>(),
+	{ variant: 'outlined', color: 'primary', active: false },
+);
+
+// An avatar in a chip is 20px, as material-vue's `size-5`.
+provide(AVATAR_SIZE, 20);
+const attrs = useAttrs();
+const slots = useSlots();
+const classes = computed(() =>
+	twMerge(
+		'inline-block whitespace-nowrap rounded-full px-2.5 py-1 align-middle text-sm font-medium',
+		colourVariant(props.active ? 'filled' : props.variant, props.color),
+		attrs.class as string,
+	),
+);
+</script>
+
+<template>
+  <span v-bind="{ ...attrs, class: undefined }" :class="classes"><span v-if="slots.avatar" class="mr-1.5 inline-block align-middle"><slot name="avatar" /></span><span v-else-if="slots.leading" class="mr-1.5 inline-block align-middle"><slot name="leading" /></span><slot>{{ label }}</slot><span v-if="slots.trailing" class="ml-1.5 inline-block align-middle"><slot name="trailing" /></span></span>
+</template>

package/components/code.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { twMerge } from '@maizzle/framework';
+import { computed, useAttrs } from 'vue';
+
+/**
+ * A code the reader types in, such as a one-time code: large, spaced and in
+ * monospace, on material-vue's muted background.
+ */
+defineOptions({ inheritAttrs: false });
+
+const attrs = useAttrs();
+const classes = computed(() =>
+	twMerge(
+		'rounded-lg bg-muted px-6 py-4 text-center font-mono text-3xl font-semibold tracking-[0.3em] text-foreground',
+		attrs.class as string,
+	),
+);
+</script>
+
+<template>
+  <table class="mb-4 w-full" role="presentation" cellpadding="0" cellspacing="0">
+    <tr>
+      <td v-bind="{ ...attrs, class: undefined }" :class="classes"><slot /></td>
+    </tr>
+  </table>
+</template>

package/components/compare-card.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { computed, getCurrentInstance } from 'vue';
+import { deltaOf, EYEBROW, sharedMessage } from './ui';
+
+/**
+ * material-vue's CompareCard: this period's figure beside the last one's, in
+ * two boxes, and the delta between them, toned.
+ */
+const props = defineProps<{
+	label: string;
+	current: { value: string; label?: string };
+	previous: { value: string; label?: string };
+	delta?: number;
+}>();
+
+const globals: Record<string, unknown> =
+	getCurrentInstance()?.appContext.config.globalProperties ?? {};
+const currentLabel = computed(
+	() =>
+		props.current.label ??
+		sharedMessage(globals, 'common.metrics.thisPeriod', 'This period'),
+);
+const previousLabel = computed(
+	() =>
+		props.previous.label ??
+		sharedMessage(globals, 'common.metrics.lastPeriod', 'Last period'),
+);
+/** The two boxes: this period's, then the last one's, muted. */
+const points = computed(() => [
+	{ label: currentLabel.value, value: props.current.value },
+	{ label: previousLabel.value, value: props.previous.value },
+]);
+const delta = computed(() =>
+	props.delta === undefined ? null : deltaOf(props.delta),
+);
+</script>
+
+<template>
+  <NxCard class="py-4">
+    <NxCardContent class="px-4">
+      <table class="w-full" role="presentation" cellpadding="0" cellspacing="0">
+        <tr>
+          <td class="align-middle"><NxCardDescription class="mt-0">{{ label }}</NxCardDescription></td>
+          <td v-if="delta" :class="`whitespace-nowrap pl-2 text-right align-middle text-xs font-medium ${delta.colour}`"><span aria-hidden="true"><span data-maizzle-html-only>{{ delta.glyph }}</span></span> {{ delta.label }}</td>
+        </tr>
+      </table>
+      <table class="mt-4 w-full" role="presentation" cellpadding="0" cellspacing="0">
+        <tr>
+          <td v-for="(point, side) in points" :key="side" :class="['w-1/2 align-top', side === 0 ? 'pr-1.5' : 'pl-1.5']">
+            <table class="w-full" role="presentation" cellpadding="0" cellspacing="0">
+              <tr>
+                <td class="rounded border border-solid border-border bg-background p-3">
+                  <p :class="EYEBROW">{{ point.label }}</p>
+                  <p :class="['m-0 mt-0.5 text-2xl font-semibold tracking-tight', side === 0 ? 'text-foreground' : 'text-muted-foreground']">{{ point.value }}</p>
+                </td>
+              </tr>
+            </table>
+          </td>
+        </tr>
+      </table>
+    </NxCardContent>
+  </NxCard>
+</template>

package/components/description.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { twMerge } from '@maizzle/framework';
+import { computed, useAttrs } from 'vue';
+
+/**
+ * material-vue's Description: a label over its value. Nothing is rendered
+ * without a value — `0` is one.
+ */
+defineOptions({ inheritAttrs: false });
+
+const props = defineProps<{ label: string; value?: string | number | null }>();
+
+const attrs = useAttrs();
+const shown = computed(() => props.value === 0 || Boolean(props.value));
+const classes = computed(() => twMerge('mb-4', attrs.class as string));
+</script>
+
+<template>
+  <div v-if="shown" v-bind="{ ...attrs, class: undefined }" :class="classes">
+    <p class="m-0 text-base font-semibold text-foreground">{{ label }}</p>
+    <p class="m-0 text-sm text-muted-foreground">{{ value }}</p>
+    <slot />
+  </div>
+</template>

package/components/entity-header.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { twMerge } from '@maizzle/framework';
+import { computed, useAttrs, useSlots } from 'vue';
+
+/**
+ * material-vue's EntityHeader: what an e-mail is about — an icon, a title
+ * with its status, its details on one line, and actions on the right. Its
+ * shadow is a border here.
+ */
+defineOptions({ inheritAttrs: false });
+
+withDefaults(
+	defineProps<{
+		title: string;
+		metadata?: { label: string; value?: string | number | null }[];
+	}>(),
+	{ metadata: () => [] },
+);
+
+const attrs = useAttrs();
+const slots = useSlots();
+const classes = computed(() =>
+	twMerge(
+		'rounded border border-solid border-border bg-background p-4',
+		attrs.class as string,
+	),
+);
+</script>
+
+<template>
+  <table class="mb-4 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 v-if="slots.icon" class="w-1 whitespace-nowrap pr-4 align-middle text-3xl leading-none"><slot name="icon" /></td>
+            <td class="align-middle">
+              <h2 class="m-0 text-lg font-semibold tracking-tight text-foreground">{{ title }} <span v-if="slots.status" class="pl-2 align-middle"><slot name="status" /></span></h2>
+              <NxSummaryData v-if="metadata.length > 0" inline class="mb-0 mt-0.5" :data="metadata" />
+            </td>
+            <td v-if="slots.actions" class="w-1 whitespace-nowrap pl-4 text-right align-middle"><slot name="actions" /></td>
+          </tr>
+        </table>
+        <div v-if="slots.default" class="mt-2"><slot /></div>
+      </td>
+    </tr>
+  </table>
+</template>

package/components/goal-card.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { computed, getCurrentInstance } from 'vue';
+import { sharedMessage } from './ui';
+
+/**
+ * material-vue's GoalCard: a figure against its target, `of {target}`, and a
+ * thin `NxProgress` of the share reached.
+ */
+const props = defineProps<{
+	label: string;
+	value: number;
+	target: number;
+	unit?: string;
+}>();
+
+const globals: Record<string, unknown> =
+	getCurrentInstance()?.appContext.config.globalProperties ?? {};
+const ofTarget = computed(() =>
+	sharedMessage(globals, 'common.metrics.ofTarget', `of ${props.target}`, {
+		target: String(props.target),
+	}),
+);
+</script>
+
+<template>
+  <NxCard class="py-4">
+    <NxCardContent class="px-4">
+      <NxCardDescription class="mt-0">{{ label }}</NxCardDescription>
+      <p class="m-0 mt-3"><span class="text-2xl font-semibold tracking-tight text-foreground">{{ value }}{{ unit }}</span> <span class="text-sm text-muted-foreground">{{ ofTarget }}</span></p>
+      <NxProgress class="mb-0 mt-3" :model-value="value" :max="target" :height="6" />
+    </NxCardContent>
+  </NxCard>
+</template>

package/components/hero.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { twMerge } from '@maizzle/framework';
+import { computed, useAttrs, useSlots } from 'vue';
+
+/**
+ * material-vue's Hero: an eyebrow, a large title, a description and actions,
+ * in a rounded, bordered box. Its gradient and blurred shapes are a plain
+ * `primary-5` ground here: a mail client draws neither reliably.
+ */
+defineOptions({ inheritAttrs: false });
+
+defineProps<{ eyebrow?: string; title: string; description?: string }>();
+
+const attrs = useAttrs();
+const slots = useSlots();
+const classes = computed(() =>
+	twMerge(
+		'rounded-2xl border border-solid border-border bg-primary-5 px-8 py-10',
+		attrs.class as string,
+	),
+);
+</script>
+
+<template>
+  <table class="mb-4 w-full" role="presentation" cellpadding="0" cellspacing="0">
+    <tr>
+      <td v-bind="{ ...attrs, class: undefined }" :class="classes">
+        <p v-if="eyebrow" class="m-0 text-xs font-semibold uppercase tracking-wider text-primary">{{ eyebrow }}</p>
+        <h1 :class="['m-0 text-3xl font-semibold tracking-tight text-foreground', eyebrow && 'mt-3']">{{ title }}</h1>
+        <p v-if="description" class="m-0 mt-4 text-base text-muted-foreground">{{ description }}</p>
+        <div v-if="slots.actions" class="mt-6"><slot name="actions" /></div>
+        <div v-if="slots.default" class="mt-8"><slot /></div>
+      </td>
+    </tr>
+  </table>
+</template>

package/components/layout.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { getCurrentInstance } from 'vue';
+import { useUi } from './ui';
+
+/**
+ * The page of an e-mail: the brand's header, the content on a card, and a
+ * footer. The theme's tokens are in its `<style>`, so every component inside
+ * uses them.
+ */
+const props = withDefaults(
+	defineProps<{
+		/** Default the template's locale from `@nxgt/mail-i18n`, else `en`. */
+		lang?: string;
+		/** The text a client shows beside the subject, before the e-mail is opened. */
+		preheader?: string;
+		/** The width of the card, in pixels. */
+		width?: number;
+	}>(),
+	{ width: 600 },
+);
+
+const { brand, css } = useUi('NxLayout');
+// Read loosely: `t` and `locale` exist only when @nxgt/mail-i18n is listed.
+const globals: Record<string, unknown> =
+	getCurrentInstance()?.appContext.config.globalProperties ?? {};
+const lang =
+	props.lang ?? (typeof globals.locale === 'string' ? globals.locale : 'en');
+const style = `@import "@maizzle/tailwindcss";\n${css}`;
+// With @nxgt/mail-i18n, the footer says why the e-mail came.
+const why =
+	typeof globals.t === 'function'
+		? (globals.t('common.footer.why', { brand: brand.name }) as string)
+		: null;
+</script>
+
+<template>
+  <Html :lang="lang">
+    <Head>
+      <meta name="color-scheme" content="light">
+      <meta name="supported-color-schemes" content="light">
+      <style v-html="style"></style>
+    </Head>
+    <Body class="bg-paper">
+      <Preheader v-if="preheader">{{ preheader }}</Preheader>
+      <table class="w-full bg-paper font-sans" role="presentation" cellpadding="0" cellspacing="0">
+        <tr>
+          <td align="center" class="px-4 py-8">
+            <Container :width="width">
+            <table class="w-full" role="presentation" cellpadding="0" cellspacing="0">
+              <tr>
+                <td class="pb-6 text-center">
+                  <a v-if="brand.url" :href="brand.url" class="text-lg font-semibold text-foreground no-underline">
+                    <img v-if="brand.logo" :src="brand.logo.src" :width="brand.logo.width ?? 120" :alt="brand.logo.alt ?? brand.name" class="max-w-full align-middle">
+                    <template v-else>{{ brand.name }}</template>
+                  </a>
+                  <template v-else>
+                    <img v-if="brand.logo" :src="brand.logo.src" :width="brand.logo.width ?? 120" :alt="brand.logo.alt ?? brand.name" class="max-w-full align-middle">
+                    <span v-else class="text-lg font-semibold text-foreground">{{ brand.name }}</span>
+                  </template>
+                </td>
+              </tr>
+              <tr>
+                <td class="rounded-xl border border-solid border-border bg-card p-8 text-sm text-card-foreground shadow-sm">
+                  <slot />
+                </td>
+              </tr>
+              <tr>
+                <td class="px-6 pt-6 text-center text-xs text-muted-foreground">
+                  <slot name="footer">
+                    <p v-if="why" class="m-0 mb-2">{{ why }}</p>
+                  </slot>
+                  <p class="m-0">
+                    <a v-if="brand.url" :href="brand.url" class="text-muted-foreground underline">{{ brand.name }}</a>
+                    <template v-else>{{ brand.name }}</template>
+                  </p>
+                </td>
+              </tr>
+            </table>
+            </Container>
+          </td>
+        </tr>
+      </table>
+    </Body>
+  </Html>
+</template>

package/components/link.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { twMerge } from '@maizzle/framework';
+import { computed, useAttrs } from 'vue';
+
+/** A link in text, in material-vue's link colour. Underlined: a phone has no hover. */
+defineOptions({ inheritAttrs: false });
+
+defineProps<{ href: string }>();
+
+const attrs = useAttrs();
+const classes = computed(() =>
+	twMerge('text-info underline', attrs.class as string),
+);
+</script>
+
+<template>
+  <!-- biome-ignore lint/a11y/useAnchorContent: the link's text is the slot, which Biome cannot see. -->
+  <a v-bind="{ ...attrs, class: undefined }" :href="href" :class="classes"><slot /></a>
+</template>

package/components/list-tile.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { twMerge } from '@maizzle/framework';
+import { computed, useAttrs, useSlots } from 'vue';
+
+/**
+ * material-vue's ListTile: a title, a subtitle under it, and `leading` and
+ * `trailing` slots on its sides. With `href`, the title is a link. A ring is
+ * a border here: a mail client draws no box-shadow.
+ */
+type Size = 'sm' | 'md';
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(
+	defineProps<{
+		title: string;
+		subtitle?: string;
+		href?: string;
+		selected?: boolean;
+		disabled?: boolean;
+		size?: Size;
+	}>(),
+	{ selected: false, disabled: false, size: 'md' },
+);
+
+const SIZE: Record<Size, { idle: string; selected: string; title: string }> = {
+	md: {
+		idle: 'rounded bg-primary-5 px-4 py-2',
+		selected: 'rounded border border-solid border-primary-40 bg-primary-15 px-4 py-2',
+		title: 'text-sm font-semibold',
+	},
+	sm: {
+		idle: 'rounded px-2 py-1.5',
+		selected: 'rounded border border-solid border-primary-40 bg-primary-10 px-2 py-1.5',
+		title: 'text-[13px] font-medium',
+	},
+};
+
+const attrs = useAttrs();
+const slots = useSlots();
+const size = computed(() => SIZE[props.size]);
+const classes = computed(() =>
+	twMerge(
+		props.selected ? size.value.selected : size.value.idle,
+		attrs.class as string,
+	),
+);
+const titleClass = computed(() =>
+	twMerge(
+		'no-underline',
+		size.value.title,
+		props.disabled ? 'text-muted-foreground' : 'text-foreground',
+	),
+);
+const gap = computed(() =>
+	props.size === 'md'
+		? { leading: 'pr-4', trailing: 'pl-4' }
+		: { leading: 'pr-2', trailing: 'pl-2' },
+);
+</script>
+
+<template>
+  <table class="mb-2 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 v-if="slots.leading" :class="`w-1 whitespace-nowrap align-middle ${gap.leading}`"><slot name="leading" /></td>
+            <td class="align-middle">
+              <a v-if="href && !disabled" :href="href" :class="titleClass">{{ title }}</a>
+              <span v-else :class="titleClass">{{ title }}</span>
+              <p v-if="subtitle" class="m-0 text-sm text-muted-foreground">{{ subtitle }}</p>
+            </td>
+            <td v-if="slots.trailing" :class="`w-1 whitespace-nowrap text-right align-middle ${gap.trailing}`"><slot name="trailing" /></td>
+          </tr>
+        </table>
+      </td>
+    </tr>
+  </table>
+</template>