@maizzle/framework 6.0.0-rc.8 → 6.0.0

package/dist/components/Outlook.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { computed, createStaticVNode } from 'vue'
+import { computed, createStaticVNode, type PropType } from 'vue'
 
 const VERSION_MAP = {
   2003: 11,
@@ -10,7 +10,10 @@ const VERSION_MAP = {
   2019: 16
 }
 
-const toMso = (v: string) => VERSION_MAP[v]
+type Year = `${keyof typeof VERSION_MAP}`
+type YearList = Year | (string & {})
+
+const toMso = (v: string) => VERSION_MAP[v as unknown as keyof typeof VERSION_MAP]
 
 const parseList = (value: string) =>
   value
@@ -30,7 +33,7 @@ export default {
      * @example '2013'
      * @example '2013,2016'
      */
-    only: String,
+    only: String as PropType<YearList>,
     /**
      * Render content in all Outlook versions except the specified one(s).
      *
@@ -39,31 +42,55 @@ export default {
      * @example '2007'
      * @example '2007,2010'
      */
-    not: String,
+    not: String as PropType<YearList>,
     /**
      * Render content in Outlook versions lower than the specified year.
      *
      * @example '2013'
      */
-    lt: String,
+    lt: String as PropType<Year>,
     /**
      * Render content in Outlook versions lower than or equal to the specified year.
      *
      * @example '2013'
      */
-    lte: String,
+    lte: String as PropType<Year>,
     /**
      * Render content in Outlook versions greater than the specified year.
      *
      * @example '2010'
      */
-    gt: String,
+    gt: String as PropType<Year>,
     /**
      * Render content in Outlook versions greater than or equal to the specified year.
      *
      * @example '2010'
      */
-    gte: String
+    gte: String as PropType<Year>,
+    /**
+     * Raw HTML inserted at the start of the conditional comment, before the slot.
+     *
+     * Bypasses Vue's template parser, so unbalanced tags are preserved — useful
+     * for MSO ghost tables where the opening `<table><tr><td>` must live inside
+     * the conditional comment.
+     *
+     * @example '<table align="center" width="600"><tr><td>'
+     */
+    open: {
+      type: String,
+      default: ''
+    },
+    /**
+     * Raw HTML inserted at the end of the conditional comment, after the slot.
+     *
+     * Pair with `open` to close ghost-table tags inside the conditional.
+     *
+     * @example '</td></tr></table>'
+     */
+    close: {
+      type: String,
+      default: ''
+    }
   },
   setup(props, { slots }) {
     const condition = computed(() => {
@@ -97,13 +124,13 @@ export default {
       return 'mso'
     })
 
-    const start = computed(() => `<!--[if ${condition.value}]>`)
-    const end = `<![endif]-->`
+    const start = computed(() => `<!--[if ${condition.value}]>${props.open}`)
+    const end = computed(() => `${props.close}<![endif]-->`)
 
     return () => [
       createStaticVNode(start.value, 1),
       slots.default?.(),
-      createStaticVNode(end, 1),
+      createStaticVNode(end.value, 1),
     ]
   }
 }

package/dist/components/OutlookBg.vue

@@ -0,0 +1,241 @@
+<script lang="ts">
+import { computed, createStaticVNode } from 'vue'
+import type { PropType } from 'vue'
+import { normalizeToPixels } from './utils.ts'
+
+export default {
+  name: 'OutlookBg',
+  props: {
+    /**
+     * Width of the VML rectangle.
+     *
+     * Accepts a number (treated as pixels) or a string with units.
+     *
+     * @default '600px'
+     */
+    width: {
+      type: [String, Number],
+      default: '600px'
+    },
+    /**
+     * Height of the VML rectangle.
+     *
+     * Accepts a number (treated as pixels) or a string with units.
+     * When not set, the rectangle auto-sizes to fit its content.
+     */
+    height: {
+      type: [String, Number],
+      default: null
+    },
+    /**
+     * VML fill type that controls how the background image is rendered.
+     *
+     * - `frame` — scale to fill the rectangle (default)
+     * - `tile` — repeat the image to fill the rectangle
+     * - `pattern` — tile at original size
+     * - `solid` — solid color fill, no image
+     * - `gradient` — linear gradient fill
+     * - `gradientradial` — radial gradient fill
+     *
+     * @default 'frame'
+     */
+    type: {
+      type: String as PropType<'solid' | 'gradient' | 'gradientradial' | 'tile' | 'pattern' | 'frame'>,
+      default: 'frame'
+    },
+    /**
+     * Comma-separated dimensions for the fill image.
+     *
+     * Controls the rendered size of the background image.
+     *
+     * @example '300px,200px'
+     */
+    sizes: {
+      type: String,
+      validator: (v: string) => /^[\d.]+(px|%|em|rem)?(,[\d.]+(px|%|em|rem)?)+$/.test(v.replace(/\s/g, ''))
+    },
+    /**
+     * Fill origin offset as comma-separated fractional values.
+     *
+     * Controls where the fill image anchors relative to the shape.
+     * Values are fractions of the shape's dimensions, where `0,0` is
+     * center and `-0.5,-0.5` is the top-left corner.
+     *
+     * Overridden by `backgroundPosition` if both are set.
+     *
+     * @example '0,0'
+     * @example '-0.5,-0.5'
+     */
+    origin: {
+      type: String,
+      validator: (v: string) => /^-?[\d.]+(,-?[\d.]+)+$/.test(v.replace(/\s/g, ''))
+    },
+    /**
+     * Fill position offset as comma-separated fractional values.
+     *
+     * Controls where the fill image is positioned within the shape.
+     * Values are fractions of the shape's dimensions, where `0,0` is
+     * center and `0.5,0.5` is the bottom-right corner.
+     *
+     * Overridden by `backgroundPosition` if both are set.
+     *
+     * @example '0,0'
+     * @example '0.5,0.5'
+     */
+    position: {
+      type: String,
+      validator: (v: string) => /^-?[\d.]+(,-?[\d.]+)+$/.test(v.replace(/\s/g, ''))
+    },
+    /**
+     * Background image position as `vertical,horizontal`.
+     *
+     * First value is the vertical axis: `top`, `center`, or `bottom`.
+     * Second value is the horizontal axis: `left`, `center`, or `right`.
+     *
+     * Convenience prop that maps to VML `origin` and `position` attributes.
+     *
+     * @example 'top,left'
+     * @example 'center,center'
+     */
+    backgroundPosition: {
+      type: String as PropType<
+        | 'top,left' | 'top,center' | 'top,right'
+        | 'center,left' | 'center,center' | 'center,right'
+        | 'bottom,left' | 'bottom,center' | 'bottom,right'
+      >,
+      validator: (v: string) => /^(top|center|bottom),(left|center|right)$/.test(v.replace(/\s/g, ''))
+    },
+    /**
+     * Aspect ratio constraint for the fill image.
+     *
+     * - `atleast` — image is at least as large as the shape
+     * - `atmost` — image is at most as large as the shape
+     */
+    aspect: {
+      type: String as PropType<'atleast' | 'atmost'>,
+    },
+    /**
+     * Fill color used for `solid` and `gradient` fill types.
+     *
+     * @example '#ffffff'
+     */
+    color: String,
+    /**
+     * Text box inset (padding) as `top,right,bottom,left`.
+     *
+     * Controls the inner spacing of the `v:textbox` element.
+     *
+     * @default '0,0,0,0'
+     */
+    inset: {
+      type: String,
+      default: '0,0,0,0'
+    },
+    /**
+     * Whether the VML rectangle has a visible border.
+     *
+     * @default false
+     */
+    stroke: {
+      type: [Boolean, String],
+      default: false
+    },
+    /**
+     * Border color for the VML rectangle.
+     *
+     * Setting this also enables `stroke` automatically.
+     *
+     * @example '#000000'
+     */
+    strokecolor: String,
+    /**
+     * Whether the VML rectangle has a fill.
+     *
+     * @default true
+     */
+    fill: {
+      type: [Boolean, String],
+      default: true
+    },
+    /**
+     * Background color of the VML rectangle.
+     *
+     * Used as a fallback when the background image cannot be loaded.
+     *
+     * @default 'none'
+     * @example '#3b82f6'
+     */
+    fillcolor: {
+      type: String,
+      default: 'none'
+    },
+    /**
+     * URL of the background image.
+     *
+     * @default 'https://via.placeholder.com/600x400'
+     */
+    src: {
+      type: String,
+      default: 'https://via.placeholder.com/600x400'
+    }
+  },
+  setup(props, { slots }) {
+    const backgroundPositionMap: Record<string, string> = {
+      'top,left': '-0.5,-0.5',
+      'top,center': '0,-0.5',
+      'top,right': '0.5,-0.5',
+      'center,left': '-0.5,0',
+      'center,center': '0,0',
+      'center,right': '0.5,0',
+      'bottom,left': '-0.5,0.5',
+      'bottom,center': '0,0.5',
+      'bottom,right': '0.5,0.5',
+    }
+
+    const resolvedOrigin = computed(() => props.origin ?? (props.backgroundPosition ? backgroundPositionMap[props.backgroundPosition.replace(/\s/g, '')] : undefined))
+    const resolvedPosition = computed(() => props.position ?? (props.backgroundPosition ? backgroundPositionMap[props.backgroundPosition.replace(/\s/g, '')] : undefined))
+
+    const before = computed(() => {
+      const width = normalizeToPixels(props.width)
+
+      const toBool = (v: boolean | string) => v === true || v === 'true' ? 'true' : 'false'
+
+      const rectAttrs = [
+        `fill="${props.fillcolor ? 'true' : toBool(props.fill)}"`,
+        `stroke="${props.strokecolor ? 'true' : toBool(props.stroke)}"`,
+        `style="width: ${width};${props.height ? ` height: ${normalizeToPixels(props.height)};` : ''}"`,
+        props.strokecolor ? `strokecolor="${props.strokecolor}"` : '',
+        props.fillcolor ? `fillcolor="${props.fillcolor}"` : ''
+      ].filter(Boolean).join(' ')
+
+      const fillAttrs = [
+        `type="${props.type}"`,
+        `src="${props.src}"`,
+        props.sizes ? `sizes="${props.sizes}"` : '',
+        props.aspect ? `aspect="${props.aspect}"` : '',
+        resolvedOrigin.value ? `origin="${resolvedOrigin.value}"` : '',
+        resolvedPosition.value ? `position="${resolvedPosition.value}"` : '',
+        props.color ? `color="${props.color}"` : ''
+      ].filter(Boolean).join(' ')
+
+      return [
+        `<!--[if mso]>`,
+        `<v:rect xmlns:v="urn:schemas-microsoft-com:vml" ${rectAttrs}>`,
+        `<v:fill ${fillAttrs} />`,
+        `<v:textbox inset="${props.inset}" style="mso-fit-shape-to-text: true">`,
+        `<div><![endif]-->`
+      ].join('')
+    })
+
+    const after = computed(() => {
+      return `<!--[if mso]></div></v:textbox></v:rect><![endif]-->`
+    })
+
+    return () => [
+      createStaticVNode(before.value, 1),
+      slots.default?.(),
+      createStaticVNode(after.value, 1)
+    ]
+  }
+}
+</script>

package/dist/components/Plaintext.vue

@@ -0,0 +1,14 @@
+<script lang="ts">
+import { h } from 'vue'
+
+export default {
+  name: 'Plaintext',
+  setup(_, { slots }) {
+    return () => h(
+      'div',
+      { 'data-maizzle-plaintext-only': '' },
+      slots.default?.(),
+    )
+  },
+}
+</script>

package/dist/components/Preheader.vue

@@ -1,20 +1,45 @@
 <script setup lang="ts">
-defineProps({
-  /** Number of `&#8199;&#847;` filler pairs to render. */
-  fillerCount: {
+import { useSlots, computed } from 'vue'
+
+const props = defineProps({
+  /**
+   * Explicit number of filler sequences to render. When omitted, the count
+   * is auto-derived to fill our default 200-char inbox preview budget.
+   */
+  spaces: {
     type: Number,
-    default: 150
+    default: undefined,
   },
-  /** Number of `&shy;` entities to render. */
-  shyCount: {
-    type: Number,
-    default: 150
-  }
 })
+
+const slots = useSlots()
+
+function vnodesToText(nodes: unknown): string {
+  if (nodes == null || nodes === false || nodes === true) return ''
+  if (typeof nodes === 'string' || typeof nodes === 'number') return String(nodes)
+  if (Array.isArray(nodes)) return nodes.map(vnodesToText).join('')
+  if (typeof nodes === 'object' && 'children' in (nodes as Record<string, unknown>)) {
+    return vnodesToText((nodes as { children: unknown }).children)
+  }
+  return ''
+}
+
+/**
+ * Inbox preview budget. Pad with invisible fillers so the client
+ * doesn't pull body content into the snippet.
+ */
+const PREVIEW_LENGTH = 200
+
+const text = computed(() => vnodesToText(slots.default?.()))
+const fillerCount = computed(() =>
+  props.spaces !== undefined
+    ? Math.max(0, props.spaces)
+    : Math.max(0, PREVIEW_LENGTH - text.value.length),
+)
 </script>
 
 <template>
   <Teleport to="body:start">
-    <div style="display: none"><slot /><template v-for="i in fillerCount" :key="'f'+i">&#8199;&#847; </template><template v-for="i in shyCount" :key="'s'+i">&shy; </template>&nbsp;</div>
+    <div style="display: none">{{ text }}<template v-for="i in fillerCount" :key="i">&#8199;&#65279;&#847; </template>&nbsp;</div>
   </Teleport>
 </template>

package/dist/components/QrCode.vue

@@ -0,0 +1,157 @@
+<script lang="ts">
+import { createStaticVNode, type PropType } from 'vue'
+import { twMerge } from 'tailwind-merge'
+import { encode } from 'uqr'
+
+type Ecc = 'L' | 'M' | 'Q' | 'H'
+
+const escapeAttr = (v: string) =>
+  v
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+
+/**
+ * Parse a Tailwind sizing token's pixel equivalent.
+ *
+ * Assumes the default v4 spacing scale (1 unit = 0.25rem),
+ * which resolves to 4px at the standard 16px root font.
+ * Arbitrary values accept `px` and `rem`; other units
+ * fall through to the caller's default.
+ */
+function tokenToPx(token: string): number {
+  const seg = token.slice(token.lastIndexOf(':') + 1)
+  const m = seg.match(/^(?:size|w|h)-(.+)$/)
+  if (!m) return 0
+  const v = m[1]
+  if (v.startsWith('[') && v.endsWith(']')) {
+    const um = v.slice(1, -1).match(/^([\d.]+)(px|rem)?$/)
+    if (!um) return 0
+    const n = Number.parseFloat(um[1])
+    return um[2] === 'rem' ? n * 16 : n
+  }
+  if (/^\d+(?:\.\d+)?$/.test(v)) return Number.parseFloat(v) * 4
+  return 0
+}
+
+/**
+ * Partition a class string into two buckets:
+ *
+ * - `sizing` — width/height/size utilities used for cell px math.
+ * - `neutral` — everything else; lands on the table verbatim.
+ */
+function partition(cls: string): { neutral: string[]; sizing: string[] } {
+  const neutral: string[] = []
+  const sizing: string[] = []
+  for (const t of cls.split(/\s+/).filter(Boolean)) {
+    const last = t.slice(t.lastIndexOf(':') + 1)
+    if (/^(?:size|w|h|min-w|min-h|max-w|max-h)-/.test(last)) sizing.push(t)
+    else neutral.push(t)
+  }
+  return { neutral, sizing }
+}
+
+export default {
+  name: 'QrCode',
+  inheritAttrs: false,
+  props: {
+    /** Data to encode (URL or arbitrary text). */
+    value: {
+      type: String,
+      required: true,
+    },
+    /**
+     * Error correction level: redundancy that keeps the code
+     * scannable when partially obscured (e.g. a logo overlay),
+     * at the cost of a larger matrix.
+     *
+     * - `L` ~7% recovery
+     * - `M` ~15% recovery (default, fine for on-screen display)
+     * - `Q` ~25% recovery
+     * - `H` ~30% recovery
+     */
+    ecc: {
+      type: String as PropType<Ecc>,
+      default: 'M',
+      validator: (v: string) => ['L', 'M', 'Q', 'H'].includes(v),
+    },
+    /**
+     * Width of the light "quiet zone" around the code, in modules.
+     * Spec recommends ≥ 4; 1 is plenty for on-screen scans.
+     */
+    border: {
+      type: Number,
+      default: 1,
+    },
+    /**
+     * Accessible label exposed via `aria-label` on the table.
+     */
+    alt: {
+      type: String,
+      default: '',
+    },
+  },
+  setup(props, { attrs }) {
+    const userClass = String(attrs.class ?? '')
+    const { neutral, sizing } = partition(userClass)
+
+    /**
+     * Effective pixel size from the user's sizing token, else
+     * 120px (= `size-30` on the default v4 spacing scale).
+     */
+    const sizingToken = sizing[0]
+    const effectivePx = sizingToken ? (tokenToPx(sizingToken) || 120) : 120
+
+    const result = encode(props.value, {
+      ecc: props.ecc,
+      border: props.border,
+      boostEcc: true,
+    })
+    const matrix = result.data
+    const dim = matrix.length
+    const cellPx = Math.max(1, Math.floor(effectivePx / dim))
+    const totalPx = cellPx * dim
+
+    /**
+     * Table base classes:
+     *
+     * - `size-[Npx]` matches the outer to cell math (no stripe).
+     * - `[&_td]:*` sizes each cell and zeroes its font-size.
+     * - `bg-*` paints the table; light cells stay transparent.
+     * - `qr:*` paints dark cells via the registered variant.
+     *
+     * Defaults and user tokens share each form, so `twMerge`
+     * resolves overrides cleanly.
+     */
+    const baseTable = [
+      `size-[${totalPx}px]`,
+      `[&_td]:w-[${cellPx}px]`,
+      `[&_td]:h-[${cellPx}px]`,
+      '[&_td]:text-[0px]',
+      'bg-white',
+      'dark:bg-gray-950',
+      'qr:bg-gray-950',
+      'dark:qr:bg-white',
+    ]
+
+    const merged = twMerge([...baseTable, ...neutral].join(' '))
+
+    let rows = ''
+    for (let y = 0; y < dim; y++) {
+      let cells = ''
+      const row = matrix[y]
+      for (let x = 0; x < dim; x++) {
+        cells += row[x] ? '<td class="qd"></td>' : '<td></td>'
+      }
+      rows += `<tr>${cells}</tr>`
+    }
+
+    const altAttr = props.alt ? ` aria-label="${escapeAttr(props.alt)}"` : ''
+    const styleAttr = attrs.style ? ` style="${String(attrs.style)}"` : ''
+    const html = `<table class="${escapeAttr(merged)}" role="img"${altAttr} cellpadding="0" cellspacing="0" border="0"${styleAttr}>${rows}</table>`
+
+    return () => createStaticVNode(html, 1)
+  },
+}
+</script>

package/dist/components/Raw.vue

@@ -0,0 +1,28 @@
+<script lang="ts">
+import { createStaticVNode } from 'vue'
+
+export default {
+  inheritAttrs: false,
+  props: {
+    /**
+     * Raw content to emit verbatim.
+     *
+     * Auto-populated from slot content by
+     * the `maizzle:raw-extract` Vite plugin
+     * before Vue compiles the template,
+     * so `{{ }}` and other Vue/ESP
+     * syntax pass through untouched.
+     */
+    content: {
+      type: String,
+      default: '',
+    },
+  },
+  setup(props) {
+    if (!props.content) {
+      return () => createStaticVNode('', 0)
+    }
+    return () => createStaticVNode(props.content, 1)
+  },
+}
+</script>