@maizzle/framework 6.0.0-rc.7 → 6.0.0-rc.8

package/dist/components/Markdown.vue

@@ -20,10 +20,10 @@ export default {
       type: String as PropType<BundledTheme>,
       default: 'github-dark-high-contrast'
     },
-    /** Wrap output in a div element. @default true */
+    /** Wrap output in a div element. @default false */
     wrapper: {
       type: Boolean,
-      default: true
+      default: false
     },
   },
   inheritAttrs: false,
@@ -56,6 +56,19 @@ export default {
       },
     })
 
+    const wrapPre = (html: string) =>
+      `<table class="w-full"><tr><td class="max-w-0 mso-padding-alt-4">${html}</td></tr></table>\n`
+
+    const defaultFence = md.renderer.rules.fence!
+    md.renderer.rules.fence = (...args) => {
+      const result = defaultFence(...args)
+      if (typeof result === 'string') return wrapPre(result)
+      return result.then(wrapPre)
+    }
+
+    const defaultCodeBlock = md.renderer.rules.code_block!
+    md.renderer.rules.code_block = (...args) => wrapPre(defaultCodeBlock(...args) as string)
+
     let html = await md.renderAsync(source)
 
     if (props.wrapper) {

package/dist/components/Outlook.vue

@@ -22,11 +22,47 @@ const parseList = (value: string) =>
 export default {
   name: 'Outlook',
   props: {
+    /**
+     * Render content only in the specified Outlook version(s).
+     *
+     * Comma-separated list of years.
+     *
+     * @example '2013'
+     * @example '2013,2016'
+     */
     only: String,
+    /**
+     * Render content in all Outlook versions except the specified one(s).
+     *
+     * Comma-separated list of years.
+     *
+     * @example '2007'
+     * @example '2007,2010'
+     */
     not: String,
+    /**
+     * Render content in Outlook versions lower than the specified year.
+     *
+     * @example '2013'
+     */
     lt: String,
+    /**
+     * Render content in Outlook versions lower than or equal to the specified year.
+     *
+     * @example '2013'
+     */
     lte: String,
+    /**
+     * Render content in Outlook versions greater than the specified year.
+     *
+     * @example '2010'
+     */
     gt: String,
+    /**
+     * Render content in Outlook versions greater than or equal to the specified year.
+     *
+     * @example '2010'
+     */
     gte: String
   },
   setup(props, { slots }) {

package/dist/components/Overlap.vue

@@ -7,22 +7,42 @@ defineOptions({ inheritAttrs: false })
 const attrs = useAttrs()
 
 const props = defineProps({
-  /** Max height of the overlapped (background) content. */
+  /**
+   * Max height of the background (default slot) content.
+   *
+   * This constrains the visible area of the background layer.
+   */
   height: {
     type: [String, Number],
     required: true
   },
-  /** Width of the overlay table and VML rect. */
+  /**
+   * Width of the overlay table and VML rectangle.
+   *
+   * Should match the width of the content being overlapped.
+   */
   width: {
     type: [String, Number],
     required: true
   },
-  /** Height of the VML rect for Outlook. Defaults to height. */
+  /**
+   * Height of the VML rectangle in Outlook.
+   *
+   * Defaults to the `height` prop value. Use this to fine-tune
+   * the overlay height specifically for Outlook rendering.
+   */
   msoHeight: {
     type: [String, Number],
     default: null
   },
-  /** VML textbox inset value for Outlook positioning. */
+  /**
+   * VML textbox inset for Outlook positioning.
+   *
+   * Controls the offset of the overlay content as `top,right,bottom,left`.
+   * Use negative values to shift content upward into the background area.
+   *
+   * @default '0,-60px,0,0'
+   */
   msoInset: {
     type: String,
     default: '0,-60px,0,0'
@@ -37,7 +57,7 @@ const vmlOpen = computed(() => {
   const w = normalizeToPixels(props.width)
   const h = normalizeToPixels(props.msoHeight ?? props.height)
 
-  return `<!--[if mso]><v:rect xmlns:v="urn:schemas-microsoft-com:vml" stroked="f" filled="f" style="width:${w};height:${h};"><v:textbox inset="${props.msoInset}"><![endif]-->`
+  return `<!--[if mso]><v:rect xmlns:v="urn:schemas-microsoft-com:vml" stroked="f" filled="f" style="width: ${w}; height: ${h};"><v:textbox inset="${props.msoInset}"><![endif]-->`
 })
 
 const VmlBefore = () => createStaticVNode(vmlOpen.value, 1)

package/dist/components/Preheader.vue

@@ -15,6 +15,6 @@ defineProps({
 
 <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"><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>
   </Teleport>
 </template>

package/dist/components/Row.vue

@@ -7,12 +7,23 @@ defineOptions({ inheritAttrs: false })
 const attrs = useAttrs()
 
 const props = defineProps({
-  /** Override the inherited container width. */
+  /**
+   * Override the inherited container width.
+   *
+   * Used to calculate column widths. Inherited from the
+   * parent `Container` by default.
+   */
   width: {
     type: [String, Number],
     default: null
   },
-  /** Override the auto-detected column count. */
+  /**
+   * Override the auto-detected column count.
+   *
+   * By default, the number of direct child elements is used.
+   * Set this when the auto-detection doesn't match your layout
+   * (e.g. when using `v-if` or `v-for`).
+   */
   cols: {
     type: Number,
     default: null
@@ -48,13 +59,13 @@ const rowWidth = computed(() => props.width ?? containerWidth?.value ?? '37.5em'
 
 function divideValue(value: string | number, divisor: number): string {
   if (typeof value === 'number') {
-    return `${value / divisor}px`
+    return `${parseFloat((value / divisor).toFixed(2))}px`
   }
 
   const num = Number.parseFloat(value)
   const unit = value.replace(String(num), '') || 'px'
 
-  return `${num / divisor}${unit}`
+  return `${parseFloat((num / divisor).toFixed(2))}${unit}`
 }
 
 provide('columnMinWidth', computed(() => divideValue(rowWidth.value, columnCount.value)))
@@ -73,7 +84,7 @@ const MsoAfter = () => createStaticVNode(
 
 <template>
   <MsoBefore />
-  <div v-bind="attrs" style="width: 100%; font-size: 0;">
+  <div v-bind="attrs" style="font-size: 0;">
     <slot />
   </div>
   <MsoAfter />

package/dist/components/Section.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { computed, createStaticVNode, useAttrs } from 'vue'
+import { normalizeToPixels } from './utils.ts'
+
+defineOptions({ inheritAttrs: false })
+
+const attrs = useAttrs()
+
+const props = defineProps({
+  /**
+   * Width of the section.
+   *
+   * Applied as `max-width` on the div and as `width` on the MSO table.
+   *
+   * @default '100%'
+   */
+  width: {
+    type: [String, Number],
+    default: '100%'
+  },
+  /**
+   * Inline CSS applied only to the MSO `<td>` element.
+   *
+   * Use for Outlook-specific styling that shouldn't affect other clients.
+   *
+   * @example 'padding: 10px 20px'
+   */
+  msoStyle: {
+    type: String,
+    default: undefined
+  }
+})
+
+const hasCustomWidth = computed(() => props.width !== '100%')
+
+const userStyle = computed(() => {
+  const s = attrs.style
+  if (!s) return ''
+  return typeof s === 'object'
+    ? Object.entries(s).map(([k, v]) => `${k.replace(/([A-Z])/g, '-$1').toLowerCase()}: ${v}`).join('; ')
+    : String(s)
+})
+
+const divStyle = computed(() => {
+  const parts: string[] = []
+  if (hasCustomWidth.value) parts.push(`max-width: ${normalizeToPixels(props.width)}`)
+  if (userStyle.value) parts.push(userStyle.value)
+  return parts.length ? parts.join('; ') : undefined
+})
+
+const restAttrs = computed(() => {
+  const { style: _, ...rest } = attrs
+  return rest
+})
+
+const tdStyles = computed(() => {
+  const parts: string[] = []
+  if (userStyle.value) parts.push(userStyle.value)
+  if (props.msoStyle) parts.push(props.msoStyle)
+  return parts.length ? parts.join('; ') : ''
+})
+
+const MsoBefore = () => {
+  const tdStyle = tdStyles.value ? ` style="${tdStyles.value}"` : ''
+  return createStaticVNode(
+    `<!--[if mso]><table role="none" cellpadding="0" cellspacing="0" style="width: ${normalizeToPixels(props.width)}"><tr><td${tdStyle}><![endif]-->`,
+    1
+  )
+}
+
+const MsoAfter = () => createStaticVNode(
+  '<!--[if mso]></td></tr></table><![endif]-->',
+  1
+)
+</script>
+
+<template>
+  <MsoBefore />
+  <div v-bind="restAttrs" :style="divStyle">
+    <slot />
+  </div>
+  <MsoAfter />
+</template>

package/dist/components/Text.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { type PropType, computed, useAttrs } from 'vue'
+import { twMerge } from 'tailwind-merge'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps({
+  /**
+   * The HTML element to render.
+   * @default 'p'
+   */
+  as: {
+    type: String as PropType<'p' | 'span'>,
+    default: 'p',
+    validator: (v: string) => ['p', 'span'].includes(v),
+  },
+})
+
+const attrs = useAttrs()
+
+const defaultClass = computed(() => props.as === 'span' ? 'text-base' : 'm-0 my-4 text-base')
+const mergedClass = computed(() => twMerge(defaultClass.value, attrs.class as string))
+</script>
+
+<template>
+  <component :is="props.as" v-bind="$attrs" :class="mergedClass">
+    <slot />
+  </component>
+</template>

package/dist/components/Vml.vue

@@ -1,56 +1,208 @@
 <script lang="ts">
 import { computed, createStaticVNode } from 'vue'
+import type { PropType } from 'vue'
 import { normalizeToPixels } from './utils.ts'
 
 export default {
   name: 'Vml',
   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,
+      type: String as PropType<'solid' | 'gradient' | 'gradientradial' | 'tile' | 'pattern' | 'frame'>,
       default: 'frame'
     },
-    sizes: String,
-    origin: String,
-    position: String,
-    aspect: String,
+    /**
+     * 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: String,
-      default: 'f'
+      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: String,
-      default: 't'
+      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 ? 't' : props.fill}"`,
-        `stroke="${props.strokecolor ? 't' : props.stroke}"`,
+        `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}"` : ''
@@ -61,8 +213,8 @@ export default {
         `src="${props.src}"`,
         props.sizes ? `sizes="${props.sizes}"` : '',
         props.aspect ? `aspect="${props.aspect}"` : '',
-        props.origin ? `origin="${props.origin}"` : '',
-        props.position ? `position="${props.position}"` : '',
+        resolvedOrigin.value ? `origin="${resolvedOrigin.value}"` : '',
+        resolvedPosition.value ? `position="${resolvedPosition.value}"` : '',
         props.color ? `color="${props.color}"` : ''
       ].filter(Boolean).join(' ')
 

package/dist/render/createRenderer.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"createRenderer.d.mts","names":[],"sources":["../../src/render/createRenderer.ts"],"mappings":";;;;;UAwJiB,gBAAA;EACf,IAAA;EACA,OAAA;EACA,cAAA,EAAgB,aAAA;EAChB,gBAAA,EAAkB,aAAA;EAClB,SAAA,GAAY,aAAA;AAAA;AAAA,UAGG,QAAA;EACf,MAAA,CAAO,KAAA,WAAgB,SAAA,EAAW,MAAA,EAAQ,aAAA,GAAgB,OAAA,CAAQ,gBAAA;EAClE,UAAA,CAAW,QAAA,WAAmB,OAAA;EAC9B,aAAA,IAAiB,OAAA;EACjB,KAAA,IAAS,OAAA;AAAA;AAAA,UAGM,qBAAA;EAZC;EAchB,GAAA;EAbkB;EAelB,QAAA,GAAW,cAAA;EAdC;EAgBZ,IAAA;EAhByB;EAkBzB,aAAA;AAAA;;;;;;;iBASoB,cAAA,CACpB,OAAA,GAAS,qBAAA,GACR,OAAA,CAAQ,QAAA"}
+{"version":3,"file":"createRenderer.d.mts","names":[],"sources":["../../src/render/createRenderer.ts"],"mappings":";;;;;UAyJiB,gBAAA;EACf,IAAA;EACA,OAAA;EACA,cAAA,EAAgB,aAAA;EAChB,gBAAA,EAAkB,aAAA;EAClB,SAAA,GAAY,aAAA;AAAA;AAAA,UAGG,QAAA;EACf,MAAA,CAAO,KAAA,WAAgB,SAAA,EAAW,MAAA,EAAQ,aAAA,GAAgB,OAAA,CAAQ,gBAAA;EAClE,UAAA,CAAW,QAAA,WAAmB,OAAA;EAC9B,aAAA,IAAiB,OAAA;EACjB,KAAA,IAAS,OAAA;AAAA;AAAA,UAGM,qBAAA;EAZC;EAchB,GAAA;EAbkB;EAelB,QAAA,GAAW,cAAA;EAdC;EAgBZ,IAAA;EAhByB;EAkBzB,aAAA;AAAA;;;;;;;iBASoB,cAAA,CACpB,OAAA,GAAS,qBAAA,GACR,OAAA,CAAQ,QAAA"}

package/dist/render/createRenderer.mjs

@@ -125,13 +125,25 @@ async function createRenderer(options = {}) {
 			Markdown(defu(markdownOptions ?? {}, {
 				headEnabled: true,
 				wrapperDiv: false,
+				wrapperClasses: "prose",
 				markdownOptions: { async highlight(code, lang) {
 					const { codeToHtml } = await import("shiki");
 					return codeToHtml(code, {
 						lang,
 						theme: shikiTheme
 					});
-				} }
+				} },
+				markdownSetup(md) {
+					const wrapPre = (html) => `<table class="w-full"><tr><td class="max-w-0 mso-padding-alt-4">${html}</td></tr></table>\n`;
+					const defaultFence = md.renderer.rules.fence;
+					md.renderer.rules.fence = (...args) => {
+						const result = defaultFence(...args);
+						if (typeof result === "string") return wrapPre(result);
+						return result.then(wrapPre);
+					};
+					const defaultCodeBlock = md.renderer.rules.code_block;
+					md.renderer.rules.code_block = (...args) => wrapPre(defaultCodeBlock(...args));
+				}
 			})),
 			AutoImport({
 				dirs: [resolve(__dirname, "../composables"), resolve(__dirname, "../filters")],