@maizzle/framework 6.0.0-rc.2 → 6.0.0-rc.20

package/dist/components/CodeBlock.vue

@@ -0,0 +1,69 @@
+<script lang="ts">
+import { createStaticVNode, type PropType } from 'vue'
+import { twMerge } from 'tailwind-merge'
+import { codeToHtml, getSingletonHighlighter, type BundledLanguage, type BundledTheme } from 'shiki'
+
+export default {
+  props: {
+    /** The code to highlight. */
+    code: {
+      type: String,
+      default: ''
+    },
+    /** The language for syntax highlighting. @default 'html' */
+    language: {
+      type: String as PropType<BundledLanguage>,
+      default: 'html'
+    },
+    /** The shiki theme to use. @default 'github-light' */
+    theme: {
+      type: String as PropType<BundledTheme>,
+      default: 'github-light'
+    },
+    /** CSS class for the wrapping table cell. @default 'max-w-0 mso-padding-alt-4' */
+    tdClass: {
+      type: String,
+      default: 'max-w-0 mso-padding-alt-4'
+    }
+  },
+  inheritAttrs: false,
+  async setup(props, { slots, attrs }) {
+    // Prefer code prop → slot text
+    let source = props.code
+
+    if (!source) {
+      const slotContent = slots.default?.()
+      source = slotContent
+        ?.map((vnode: any) => (typeof vnode.children === 'string' ? vnode.children : ''))
+        .join('') ?? ''
+    }
+
+    source = source.trim()
+
+    if (!source) {
+      return () => createStaticVNode('', 0)
+    }
+
+    const highlighted = await codeToHtml(source, {
+      lang: props.language,
+      theme: props.theme,
+    })
+
+    const hl = await getSingletonHighlighter({ themes: [props.theme], langs: [] })
+    const bg = hl.getTheme(props.theme).bg
+
+    // Shiki outputs <pre><code>...</code></pre>, extract the inner content
+    const codeContent = highlighted
+      .replace(/^<pre[^>]*><code>/, '')
+      .replace(/<\/code><\/pre>$/, '')
+
+    const classes = twMerge('font-mono', attrs.class as string)
+    const baseStyles = `background-color:${bg};padding:16px;overflow:auto;white-space:pre;word-wrap:normal;word-break:normal;word-spacing:normal`
+    const styles = [baseStyles, attrs.style].filter(Boolean).join(';')
+
+    const html = `<table class="w-full"><tr><td class="${props.tdClass}"><pre class="${classes}" style="${styles}"><code>${codeContent}</code></pre></td></tr></table>`
+
+    return () => createStaticVNode(html, 1)
+  }
+}
+</script>

package/dist/components/CodeInline.vue

@@ -0,0 +1,49 @@
+<script lang="ts">
+import { createStaticVNode } from 'vue'
+
+export default {
+  inheritAttrs: false,
+  props: {
+    /**
+     * The inline code text to render.
+     *
+     * If not provided, the slot content is used instead.
+     * The text is HTML-escaped automatically.
+     */
+    code: {
+      type: String,
+      default: ''
+    }
+  },
+  setup(props, { slots, attrs }) {
+    let source = props.code
+
+    if (!source) {
+      const slotContent = slots.default?.()
+      source = slotContent
+        ?.map((vnode: any) => (typeof vnode.children === 'string' ? vnode.children : ''))
+        .join('') ?? ''
+    }
+
+    source = source.trim()
+
+    if (!source) {
+      return () => createStaticVNode('', 0)
+    }
+
+    const classes = attrs.class ? ` class="${attrs.class}"` : ''
+    const baseStyles = 'white-space:normal;border-radius:6px;border:1px solid #d1d5db;background-color:#f3f4f6;padding:2px 6px;font-size:11px;color:inherit'
+    const styles = [baseStyles, attrs.style].filter(Boolean).join(';')
+
+    const escaped = source
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+
+    const html = `<code${classes} style="${styles}">${escaped}</code>`
+
+    return () => createStaticVNode(html, 1)
+  }
+}
+</script>

package/dist/components/Column.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { computed, createStaticVNode, inject, useAttrs } from 'vue'
+import type { ComputedRef } from 'vue'
+import { twMerge } from 'tailwind-merge'
+import { nextId, normalizeToPixels, outlookFallbackProp } from './utils.ts'
+import { useOutlookFallback } from '../composables/useOutlookFallback'
+
+defineOptions({ inheritAttrs: false })
+
+const attrs = useAttrs()
+
+const props = defineProps({
+  /**
+   * Override the auto-computed column width.
+   *
+   * By default, the width is calculated from the nearest sized
+   * ancestor (`Container`, `Section`, `Row`, or outer `Column`)
+   * divided by the column count detected on the parent `Row`.
+   */
+  width: {
+    type: [String, Number],
+    default: null
+  },
+  /**
+   * Inline CSS applied only to the MSO `<td>` element.
+   *
+   * Use for Outlook-specific styling that shouldn't affect other clients.
+   *
+   * @example 'padding: 10px'
+   */
+  msoStyle: {
+    type: String,
+    default: undefined
+  },
+  /**
+   * Toggle Outlook (MSO) and VML fallback markup for this
+   * component and all descendants.
+   *
+   * When `false`, skips MSO ghost tables, VML shapes,
+   * `xmlns:v`/`xmlns:o` attributes, and mso-specific CSS
+   * in all built-in components.
+   *
+   * @default true
+   */
+  outlookFallback: outlookFallbackProp,
+})
+
+const outlookFallback = useOutlookFallback(props.outlookFallback)
+
+const columnCount = inject<ComputedRef<number> | null>('columnCount', null)
+
+const count = computed(() => columnCount?.value ?? 2)
+
+const useMarker = props.width == null
+const colId = useMarker ? nextId('co') : null
+
+const minWidth = computed(() => {
+  if (props.width != null) return normalizeToPixels(props.width)
+  return `__MAIZZLE_COLW_${colId}__`
+})
+
+const msoWidth = computed(() => {
+  if (props.width != null) return normalizeToPixels(props.width)
+  return `__MAIZZLE_COLW_${colId}__`
+})
+
+/**
+ * Baseline display/typography lives in classes — not inline `:style` —
+ * so the user can override any of them via tailwind utilities. Inline
+ * `display: inline-block` would silently shadow a class like
+ * `inline-table` during CSS inlining; routing both through twMerge lets
+ * the user's utility cleanly replace ours instead of being dropped.
+ */
+const baseClass = 'inline-block align-top text-base'
+const mergedClass = computed(() => twMerge(baseClass, (attrs.class as string) ?? ''))
+
+const styles = computed(() => `min-width: ${minWidth.value};`)
+
+const tdStyle = computed(() => {
+  const parts = [`width: ${msoWidth.value}`, 'vertical-align: top']
+  if (props.msoStyle) parts.push(props.msoStyle)
+  return parts.join('; ')
+})
+
+const MsoBefore = () => createStaticVNode(
+  `<!--[if mso]><td style="${tdStyle.value}"><![endif]-->`,
+  1
+)
+
+const MsoAfter = () => createStaticVNode(
+  '<!--[if mso]></td><![endif]-->',
+  1
+)
+</script>
+
+<template>
+  <MsoBefore v-if="outlookFallback" />
+  <div
+    v-bind="{ ...attrs, class: undefined }"
+    :class="mergedClass"
+    :style="styles"
+    :data-maizzle-cw-id="colId"
+    :data-maizzle-cw-count="useMarker ? count : null"
+  >
+    <slot />
+  </div>
+  <MsoAfter v-if="outlookFallback" />
+</template>

package/dist/components/Container.vue

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { computed, provide, createStaticVNode, useAttrs } from 'vue'
+import { twMerge } from 'tailwind-merge'
+import { hasWidthUtility, nextId, normalizeToPixels, outlookFallbackProp } from './utils.ts'
+import { useOutlookFallback } from '../composables/useOutlookFallback'
+
+defineOptions({ inheritAttrs: false })
+
+const attrs = useAttrs()
+
+const props = defineProps({
+  /**
+   * Max width of the container.
+   *
+   * Applied as `max-width` on the div and as `width` on the MSO table.
+   * Also used as the width source for descendant `Row`/`Column`
+   * components when computing column widths.
+   *
+   * When not set, the div defaults to `max-w-150 mx-auto` (max
+   * 600px, centered, shrinks below) — overridable via Tailwind
+   * classes such as `w-[400px]` or `max-w-xl`. The MSO table
+   * width is auto-derived from the resolved width/max-width after
+   * CSS inlining, falling back to 600px when unresolvable.
+   */
+  width: {
+    type: [String, Number],
+    default: null
+  },
+  /**
+   * Override the Outlook (MSO) table width independently of the
+   * div's width. Highest priority — wins over `width` and any
+   * class-derived value.
+   */
+  msoWidth: {
+    type: [String, Number],
+    default: null
+  },
+  /**
+   * Inline CSS applied only to the MSO `<td>` element.
+   *
+   * Use for Outlook-specific styling that shouldn't affect other clients.
+   * Appended after any padding propagated from the outer div's
+   * inlined style, so msoStyle wins on duplicate properties.
+   *
+   * @example 'padding: 10px 20px'
+   */
+  msoStyle: {
+    type: String,
+    default: undefined
+  },
+  /**
+   * Toggle Outlook (MSO) and VML fallback markup for this
+   * component and all descendants.
+   *
+   * When `false`, skips MSO ghost tables, VML shapes,
+   * `xmlns:v`/`xmlns:o` attributes, and mso-specific CSS
+   * in all built-in components.
+   *
+   * @default true
+   */
+  outlookFallback: outlookFallbackProp,
+})
+
+const outlookFallback = useOutlookFallback(props.outlookFallback)
+
+provide('containerWidth', computed(() => props.width))
+
+const useMarker = outlookFallback && props.width == null && props.msoWidth == null
+const msoId = useMarker ? nextId('c') : null
+const tdId = outlookFallback ? nextId('ct') : null
+
+const styles = computed(() => {
+  if (props.width == null) return undefined
+  return `max-width: ${normalizeToPixels(props.width)}; margin: 0 auto;`
+})
+
+const mergedClass = computed(() => {
+  if (props.width != null) return attrs.class as string | undefined
+  const userClass = (attrs.class as string) ?? ''
+  const defaultClass = hasWidthUtility(userClass)
+    ? 'm-0 mx-auto'
+    : 'max-w-150 m-0 mx-auto'
+  return twMerge(defaultClass, userClass)
+})
+
+const msoWidth = computed(() => {
+  if (props.msoWidth != null) return normalizeToPixels(props.msoWidth)
+  if (props.width != null) return normalizeToPixels(props.width)
+  return `__MAIZZLE_MSOW_${msoId}__`
+})
+
+const colWidthSource = computed(() =>
+  props.width != null ? normalizeToPixels(props.width) : ''
+)
+
+const tdMarker = tdId ? `__MAIZZLE_MSOTDSTYLE_${tdId}__` : ''
+
+const MsoBefore = () => createStaticVNode(
+  `<!--[if mso]><table role="none" cellpadding="0" cellspacing="0" style="width: ${msoWidth.value}" align="center"><tr><td${tdMarker}><![endif]-->`,
+  1
+)
+
+const MsoAfter = () => createStaticVNode(
+  '<!--[if mso]></td></tr></table><![endif]-->',
+  1
+)
+</script>
+
+<template>
+  <MsoBefore v-if="outlookFallback" />
+  <div
+    v-bind="{ ...attrs, class: undefined }"
+    :class="mergedClass"
+    :style="styles"
+    :data-maizzle-msow-id="msoId"
+    :data-maizzle-cw="colWidthSource"
+    :data-maizzle-mso-td-id="tdId"
+    :data-maizzle-mso-style="tdId && props.msoStyle ? props.msoStyle : null"
+  >
+    <slot />
+  </div>
+  <MsoAfter v-if="outlookFallback" />
+</template>

package/dist/components/Font.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { type PropType } from 'vue'
+import { useFont } from '../composables/useFont'
+
+type PopularGoogleFont =
+  // Sans-serif
+  | 'Roboto' | 'Open Sans' | 'Inter' | 'Lato' | 'Montserrat'
+  // Serif
+  | 'Merriweather' | 'Playfair Display' | 'Lora' | 'PT Serif' | 'Noto Serif'
+  // Display
+  | 'Oswald' | 'Bebas Neue' | 'Anton' | 'Lobster' | 'Pacifico'
+  // Handwriting
+  | 'Dancing Script' | 'Caveat' | 'Shadows Into Light' | 'Satisfy' | 'Great Vibes'
+  // Monospace
+  | 'Roboto Mono' | 'Source Code Pro' | 'JetBrains Mono' | 'Fira Code' | 'Inconsolata'
+
+const props = defineProps({
+  /**
+   * A single font family name, e.g. `"Roboto"` or `"Open Sans"`.
+   *
+   * For fallback fonts, use the `fallback` prop instead of a
+   * comma-separated list here. Popular Google Fonts are suggested
+   * in the IDE, but any string is accepted.
+   *
+   * @example "Open Sans"
+   */
+  family: {
+    type: String as PropType<PopularGoogleFont | (string & {})>,
+    required: true,
+    validator: (v: string) => v.trim().length > 0,
+  },
+  /**
+   * CSS fallback list appended to the `font-family` declaration.
+   *
+   * @example "Verdana, sans-serif"
+   */
+  fallback: {
+    type: String,
+    default: '',
+  },
+  /**
+   * Font provider used to build the stylesheet URL when `url` is omitted.
+   * Bunny Fonts is a drop-in, privacy-friendly Google Fonts mirror.
+   */
+  provider: {
+    type: String as PropType<'google' | 'bunny'>,
+    default: 'google',
+    validator: (v: string) => ['google', 'bunny'].includes(v),
+  },
+  /**
+   * Stylesheet URL. When provided, used as-is for the `<link href>`.
+   * When omitted, a Google Fonts URL is built from `family`, `weights`,
+   * `display` and `styles`.
+   */
+  url: {
+    type: String,
+    default: '',
+  },
+  /**
+   * Font weights to load. Ignored when `url` is provided.
+   */
+  weights: {
+    type: Array as () => number[],
+    default: () => [400],
+  },
+  /**
+   * `font-display` value. Ignored when `url` is provided.
+   */
+  display: {
+    type: String as PropType<'auto' | 'block' | 'swap' | 'fallback' | 'optional'>,
+    default: 'swap',
+    validator: (v: string) => ['auto', 'block', 'swap', 'fallback', 'optional'].includes(v),
+  },
+  /**
+   * Font styles to load. Ignored when `url` is provided.
+   *
+   * @example ['normal', 'italic']
+   */
+  styles: {
+    type: Array as () => Array<'normal' | 'italic'>,
+    default: () => ['normal'],
+  },
+})
+
+useFont({
+  family: props.family,
+  fallback: props.fallback || undefined,
+  provider: props.provider,
+  url: props.url || undefined,
+  weights: props.weights,
+  display: props.display,
+  styles: props.styles,
+})
+</script>
+
+<template></template>

package/dist/components/Head.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { createStaticVNode } from 'vue'
+
+const props = defineProps({
+  /**
+   * Render an empty `<head>` before the main head element.
+   *
+   * This is a workaround for Yahoo! Mail on Android, which
+   * strips the first `<head>` element it finds.
+   *
+   * @default false
+   */
+  double: {
+    type: [Boolean, String],
+    default: false
+  }
+})
+
+const EmptyHead = () => createStaticVNode('<head></head>', 1)
+</script>
+
+<template>
+  <EmptyHead v-if="props.double === true || props.double === 'true'" />
+  <head>
+    <meta charset="utf-8">
+    <meta name="x-apple-disable-message-reformatting">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <slot />
+  </head>
+</template>

package/dist/components/Heading.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { computed, useAttrs } from 'vue'
+import { twMerge } from 'tailwind-merge'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps({
+  /**
+   * The heading level (1-6), corresponding to `<h1>` through `<h6>`.
+   * @default 1
+   */
+  level: {
+    type: [String, Number],
+    default: 1,
+    validator: (v: string | number) => [1, 2, 3, 4, 5, 6].includes(Number(v)),
+  },
+})
+
+const attrs = useAttrs()
+const tag = computed(() => `h${props.level}`)
+const mergedClass = computed(() => twMerge('m-0', attrs.class as string))
+</script>
+
+<template>
+  <component :is="tag" v-bind="$attrs" :class="mergedClass">
+    <slot />
+  </component>
+</template>

package/dist/components/Hr.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { computed, useAttrs } from 'vue'
+import { twMerge } from 'tailwind-merge'
+
+defineOptions({ inheritAttrs: false })
+
+const attrs = useAttrs()
+
+const HEIGHT_RE = /(?:^|\s)h-([\w./\-[\]%]+)/g
+const LEADING_RE = /(?:^|\s)leading-/
+
+const mergedClass = computed(() => {
+  const userClass = (attrs.class as string) || ''
+  const heights = [...userClass.matchAll(HEIGHT_RE)]
+  const userHeight = heights.length ? heights[heights.length - 1][1] : null
+  const userHasLeading = LEADING_RE.test(userClass)
+
+  const defaults = ['my-6', 'bg-slate-300']
+  if (!userHeight) defaults.push('h-px')
+  if (!userHasLeading && !userHeight) defaults.push('leading-px')
+
+  const derived = userHeight && !userHasLeading ? `leading-${userHeight}` : ''
+  return twMerge(defaults.join(' '), userClass, derived)
+})
+</script>
+
+<template>
+  <div
+    role="separator"
+    v-bind="{ ...$attrs, class: undefined }"
+    :class="mergedClass"
+  >&zwj;</div>
+</template>

package/dist/components/Html.vue

@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import { createStaticVNode, inject, provide, useAttrs, useSlots } from 'vue'
+import type { PropType } from 'vue'
+import { outlookFallbackProp } from './utils.ts'
+import { useOutlookFallback } from '../composables/useOutlookFallback'
+import { RenderContextKey } from '../composables/renderContext'
+
+defineOptions({ inheritAttrs: false })
+
+const attrs = useAttrs()
+const slots = useSlots()
+
+const props = defineProps({
+  /**
+   * Language code for the `lang` attribute on `<html>`.
+   *
+   * Also provided to the child `Body` component for `xml:lang`.
+   *
+   * @default 'en'
+   */
+  lang: {
+    type: String as PropType<
+      | 'af' | 'ar' | 'az'
+      | 'be' | 'bg' | 'bs'
+      | 'ca' | 'cs' | 'cy'
+      | 'da' | 'de' | 'dv'
+      | 'el' | 'en' | 'es' | 'et' | 'eu'
+      | 'fa' | 'fi' | 'fo' | 'fr'
+      | 'gl' | 'gu'
+      | 'he' | 'hi' | 'hr' | 'hu' | 'hy'
+      | 'id' | 'is' | 'it'
+      | 'ja'
+      | 'ka' | 'kk' | 'kn' | 'ko' | 'ky'
+      | 'lt' | 'lv'
+      | 'mk' | 'mn' | 'mr' | 'ms' | 'mt'
+      | 'nb' | 'nl' | 'nn' | 'no'
+      | 'pa' | 'pl' | 'pt'
+      | 'ro' | 'ru'
+      | 'sa' | 'se' | 'sk' | 'sl' | 'sq' | 'sr' | 'sv' | 'sw'
+      | 'ta' | 'te' | 'th' | 'tr' | 'tt'
+      | 'uk' | 'ur' | 'uz'
+      | 'vi'
+      | 'zh'
+      | (string & {})
+    >,
+    default: 'en'
+  },
+  /**
+   * Text direction of the document.
+   *
+   * - `ltr` — left to right (default)
+   * - `rtl` — right to left
+   *
+   * @default 'ltr'
+   */
+  dir: {
+    type: String as PropType<'ltr' | 'rtl'>,
+    default: 'ltr'
+  },
+  /**
+   * Whether to include VML and Office XML namespace declarations.
+   *
+   * Required for Outlook VML support (background images, etc.).
+   * Set to `false` to omit the `xmlns:v` and `xmlns:o` attributes.
+   *
+   * @default true
+   */
+  xmlns: {
+    type: [Boolean, String],
+    default: true
+  },
+  /**
+   * Toggle Outlook (MSO) and VML fallback markup for this
+   * component and all descendants.
+   *
+   * When `false`, skips MSO ghost tables, VML shapes,
+   * `xmlns:v`/`xmlns:o` attributes, and mso-specific CSS
+   * in all built-in components.
+   *
+   * @default true
+   */
+  outlookFallback: outlookFallbackProp,
+  /**
+   * DOCTYPE declaration prepended to the rendered HTML.
+   *
+   * Overrides `doctype` in the Maizzle config and any value
+   * set via `useDoctype()` in the same template.
+   *
+   * @default '<!DOCTYPE html>'
+   */
+  doctype: {
+    type: String,
+    default: undefined,
+  },
+})
+
+const outlookFallback = useOutlookFallback(props.outlookFallback)
+
+if (props.doctype !== undefined) {
+  const ctx = inject(RenderContextKey, undefined)
+  if (ctx) ctx.doctype = props.doctype
+}
+
+provide('htmlLang', props.lang)
+
+const render = () => {
+  const extraAttrs = Object.entries(attrs)
+    .map(([key, value]) => value === true ? key : `${key}="${value}"`)
+    .join(' ')
+
+  const parts = [
+    `lang="${props.lang}"`,
+    `dir="${props.dir}"`,
+  ]
+
+  if (outlookFallback && props.xmlns !== false && props.xmlns !== 'false') {
+    parts.push(
+      'xmlns:v="urn:schemas-microsoft-com:vml"',
+      'xmlns:o="urn:schemas-microsoft-com:office:office"',
+    )
+  }
+
+  if (extraAttrs) {
+    parts.push(extraAttrs)
+  }
+
+  return [
+    createStaticVNode(`<html ${parts.join(' ')}>`, 1),
+    slots.default?.(),
+    createStaticVNode('</html>', 1),
+  ]
+}
+</script>
+
+<template>
+  <render />
+</template>