@maizzle/framework 6.0.0-rc.8 → 6.0.0

package/dist/components/Row.vue

@@ -1,6 +1,14 @@
+<script lang="ts">
+const warnedLocations = new Set<string>()
+</script>
+
 <script setup lang="ts">
-import { Comment, computed, createStaticVNode, inject, provide, useAttrs, useSlots, Fragment } from 'vue'
-import type { ComputedRef, VNode } from 'vue'
+import { Comment, Text, computed, createStaticVNode, provide, useAttrs, useSlots, Fragment } from 'vue'
+import type { VNode } from 'vue'
+import { twMerge } from 'tailwind-merge'
+import Column from './Column.vue'
+import { hasWidthInStyle, hasWidthUtility, normalizeToPixels, outlookFallbackProp } from './utils.ts'
+import { useOutlookFallback } from '../composables/useOutlookFallback'
 
 defineOptions({ inheritAttrs: false })
 
@@ -8,10 +16,12 @@ const attrs = useAttrs()
 
 const props = defineProps({
   /**
-   * Override the inherited container width.
+   * Explicit row width.
    *
-   * Used to calculate column widths. Inherited from the
-   * parent `Container` by default.
+   * Used as the width source for column min-width calculation.
+   * When not set, the nearest sized ancestor (`Container`, `Section`,
+   * outer `Column`, or this row's own width class/inline style) is
+   * used instead.
    */
   width: {
     type: [String, Number],
@@ -27,9 +37,22 @@ const props = defineProps({
   cols: {
     type: Number,
     default: null
-  }
+  },
+  /**
+   * 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 slots = useSlots()
 
 function countChildren(vnodes: VNode[]): number {
@@ -46,6 +69,41 @@ function countChildren(vnodes: VNode[]): number {
   return count
 }
 
+function hasColumnChild(vnodes: VNode[]): boolean {
+  for (const vnode of vnodes) {
+    if (vnode.type === Fragment && Array.isArray(vnode.children)) {
+      if (hasColumnChild(vnode.children as VNode[])) return true
+    } else if (vnode.type === Column) {
+      return true
+    } else if (
+      typeof vnode.type === 'object'
+      && vnode.type !== null
+      && '__name' in vnode.type
+      && (vnode.type as { __name?: string }).__name === 'Column'
+    ) {
+      return true
+    }
+  }
+  return false
+}
+
+function hasMeaningfulContent(vnodes: VNode[]): boolean {
+  for (const vnode of vnodes) {
+    if (vnode.type === Comment) continue
+    if (vnode.type === Fragment && Array.isArray(vnode.children)) {
+      if (hasMeaningfulContent(vnode.children as VNode[])) return true
+      continue
+    }
+    if (vnode.type === Text) {
+      if (typeof vnode.children === 'string' && vnode.children.trim()) return true
+      continue
+    }
+    if (typeof vnode.type === 'symbol') continue
+    return true
+  }
+  return false
+}
+
 const columnCount = computed(() => {
   if (props.cols) return props.cols
 
@@ -53,26 +111,45 @@ const columnCount = computed(() => {
   return countChildren(children) || 1
 })
 
-const containerWidth = inject<ComputedRef<string | number> | null>('containerWidth', null)
+provide('columnCount', columnCount)
 
-const rowWidth = computed(() => props.width ?? containerWidth?.value ?? '37.5em')
+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)
+})
 
-function divideValue(value: string | number, divisor: number): string {
-  if (typeof value === 'number') {
-    return `${parseFloat((value / divisor).toFixed(2))}px`
-  }
+const userHasWidth = computed(() => {
+  const cls = (attrs.class as string) ?? ''
+  return hasWidthUtility(cls) || hasWidthInStyle(userStyle.value)
+})
 
-  const num = Number.parseFloat(value)
-  const unit = value.replace(String(num), '') || 'px'
+const colWidthSource = computed(() => {
+  if (props.width != null) return normalizeToPixels(props.width)
+  if (userHasWidth.value) return ''
+  return null
+})
 
-  return `${parseFloat((num / divisor).toFixed(2))}${unit}`
-}
+const restAttrs = computed(() => {
+  const { style: _, class: __, 'data-maizzle-loc': ___, ...rest } = attrs
+  return rest
+})
 
-provide('columnMinWidth', computed(() => divideValue(rowWidth.value, columnCount.value)))
-provide('columnMsoWidth', computed(() => `${Math.round(100 / columnCount.value)}%`))
+/**
+ * `font-size: 0;` removes the whitespace gap between inline-block
+ * children. Lives in a class so users can override (e.g. via a custom
+ * `text-*`) and twMerge resolves the conflict cleanly instead of the
+ * inline declaration silently shadowing the user's class.
+ */
+const baseClass = 'text-0'
+const mergedClass = computed(() => twMerge(baseClass, (attrs.class as string) ?? ''))
+
+const divStyle = computed(() => userStyle.value || undefined)
 
 const MsoBefore = () => createStaticVNode(
-  '<!--[if mso]><table role="none" cellpadding="0" cellspacing="0" width="100%"><tr><![endif]-->',
+  '<!--[if mso]><table role="none" cellpadding="0" cellspacing="0" style="width: 100%"><tr><![endif]-->',
   1
 )
 
@@ -80,12 +157,28 @@ const MsoAfter = () => createStaticVNode(
   '<!--[if mso]></tr></table><![endif]-->',
   1
 )
+
+const initialChildren = slots.default?.() ?? []
+if (hasMeaningfulContent(initialChildren) && !hasColumnChild(initialChildren)) {
+  const loc = (attrs['data-maizzle-loc'] as string | undefined) ?? '<unknown location>'
+  if (!warnedLocations.has(loc)) {
+    warnedLocations.add(loc)
+    const display = loc.split('/').pop() ?? loc
+    const suffix = outlookFallback ? ' Layout will break in Outlook.' : ''
+    console.warn(`[maizzle] <Row> in ${display} has no <Column> inside it.${suffix}`)
+  }
+}
 </script>
 
 <template>
-  <MsoBefore />
-  <div v-bind="attrs" style="font-size: 0;">
+  <MsoBefore v-if="outlookFallback" />
+  <div
+    v-bind="restAttrs"
+    :class="mergedClass"
+    :style="divStyle"
+    :data-maizzle-cw="colWidthSource"
+  >
     <slot />
   </div>
-  <MsoAfter />
+  <MsoAfter v-if="outlookFallback" />
 </template>

package/dist/components/Section.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { computed, createStaticVNode, useAttrs } from 'vue'
-import { normalizeToPixels } from './utils.ts'
+import { twMerge } from 'tailwind-merge'
+import { hasWidthInStyle, hasWidthUtility, nextId, normalizeToPixels, outlookFallbackProp } from './utils.ts'
+import { useOutlookFallback } from '../composables/useOutlookFallback'
 
 defineOptions({ inheritAttrs: false })
 
@@ -12,11 +14,14 @@ const props = defineProps({
    *
    * Applied as `max-width` on the div and as `width` on the MSO table.
    *
-   * @default '100%'
+   * When not set, the MSO table width is auto-derived from a width
+   * utility class (e.g. `max-w-md`) or inline style (`max-width`/
+   * `width`) on the component, after CSS inlining. Falls back to
+   * `100%` when no width source is provided.
    */
   width: {
     type: [String, Number],
-    default: '100%'
+    default: null
   },
   /**
    * Inline CSS applied only to the MSO `<td>` element.
@@ -28,10 +33,21 @@ const props = defineProps({
   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 hasCustomWidth = computed(() => props.width !== '100%')
+const outlookFallback = useOutlookFallback(props.outlookFallback)
 
 const userStyle = computed(() => {
   const s = attrs.style
@@ -41,32 +57,46 @@ const userStyle = computed(() => {
     : 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 userHasWidth = computed(() => {
+  const cls = (attrs.class as string) ?? ''
+  return hasWidthUtility(cls) || hasWidthInStyle(userStyle.value)
+})
+
+const useMarker = outlookFallback && props.width == null && userHasWidth.value
+const msoId = useMarker ? nextId('s') : null
+const tdId = outlookFallback ? nextId('st') : null
+
+const mergedClass = computed(() => {
+  const userClass = (attrs.class as string) ?? ''
+  if (props.width == null) return userClass || undefined
+  return twMerge(`max-w-[${normalizeToPixels(props.width)}]`, userClass)
 })
 
+const divStyle = computed(() => userStyle.value || undefined)
+
 const restAttrs = computed(() => {
-  const { style: _, ...rest } = attrs
+  const { style: _, class: __, ...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 msoWidth = computed(() => {
+  if (props.width != null) return normalizeToPixels(props.width)
+  if (useMarker) return `__MAIZZLE_MSOW_${msoId}__`
+  return '100%'
+})
+
+const colWidthSource = computed(() => {
+  if (props.width != null) return normalizeToPixels(props.width)
+  if (userHasWidth.value) return ''
+  return null
 })
 
-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 tdMarker = tdId ? `__MAIZZLE_MSOTDSTYLE_${tdId}__` : ''
+
+const MsoBefore = () => createStaticVNode(
+  `<!--[if mso]><table role="none" cellpadding="0" cellspacing="0" style="width: ${msoWidth.value}"><tr><td${tdMarker}><![endif]-->`,
+  1
+)
 
 const MsoAfter = () => createStaticVNode(
   '<!--[if mso]></td></tr></table><![endif]-->',
@@ -75,9 +105,18 @@ const MsoAfter = () => createStaticVNode(
 </script>
 
 <template>
-  <MsoBefore />
-  <div v-bind="restAttrs" :style="divStyle">
+  <MsoBefore v-if="outlookFallback" />
+  <div
+    v-bind="restAttrs"
+    :class="mergedClass"
+    :style="divStyle"
+    :data-maizzle-msow-id="msoId"
+    :data-maizzle-msow-fallback="useMarker ? '100%' : null"
+    :data-maizzle-cw="colWidthSource"
+    :data-maizzle-mso-td-id="tdId"
+    :data-maizzle-mso-style="tdId && props.msoStyle ? props.msoStyle : null"
+  >
     <slot />
   </div>
-  <MsoAfter />
+  <MsoAfter v-if="outlookFallback" />
 </template>

package/dist/components/Spacer.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import { normalizeToPixels } from './utils.ts'
+import { computed, h, useAttrs } from 'vue'
+import { normalizeToPixels, outlookFallbackProp } from './utils.ts'
+import { useOutlookFallback } from '../composables/useOutlookFallback'
+
+defineOptions({ inheritAttrs: false })
 
 const props = defineProps({
   /** The type of spacer. */
@@ -8,44 +11,41 @@ const props = defineProps({
     type: String as () => 'vertical' | 'horizontal',
     default: 'vertical'
   },
-  /** The height of the spacer (vertical). */
-  height: {
-    type: [String, Number],
-    default: null
-  },
   /** The width of the spacer (horizontal). */
   width: {
     type: [String, Number],
     default: 16
   },
-  /** The alternative height to use in Outlook. */
-  msoHeight: {
-    type: [String, Number],
-    default: null
-  }
+  outlookFallback: outlookFallbackProp,
 })
 
-function parsePixelValue(value: string | number): number {
-  if (typeof value === 'number') return value
-  return Number.parseFloat(value) || 0
-}
+const attrs = useAttrs()
+const outlookFallback = useOutlookFallback(props.outlookFallback)
 
-const verticalStyles = computed(() => {
-  const s = []
+const HEIGHT_RE = /(?:^|\s)h-([\w./\-[\]%]+)/g
+const LEADING_RE = /(?:^|\s)leading-/
 
-  if (props.height) {
-    s.push(`line-height: ${normalizeToPixels(props.height)};`)
-  }
+const verticalClass = computed(() => {
+  const userClass = (attrs.class as string) || ''
+  if (!userClass) return ''
 
-  if (props.msoHeight) {
-    s.push(`mso-line-height-alt: ${normalizeToPixels(props.msoHeight)};`)
-  }
+  const heights = [...userClass.matchAll(HEIGHT_RE)]
+  const stripped = userClass.replace(HEIGHT_RE, ' ').replace(/\s+/g, ' ').trim()
 
-  return s.join('')
+  if (!heights.length) return stripped
+  if (LEADING_RE.test(stripped)) return stripped
+
+  return `${stripped} leading-${heights[heights.length - 1][1]}`.trim()
 })
 
+function parsePixelValue(value: string | number): number {
+  if (typeof value === 'number') return value
+  return Number.parseFloat(value) || 0
+}
+
 const horizontalStyles = computed(() => {
-  return `display:inline-block; width: ${normalizeToPixels(props.width)}; font-size: 16px;${msoFontWidth.value}`
+  const mso = outlookFallback ? msoFontWidth.value : ''
+  return `display:inline-block; width: ${normalizeToPixels(props.width)}; font-size: 16px;${mso}`
 })
 
 const msoFontWidth = computed(() => {
@@ -66,14 +66,20 @@ const emspCount = computed(() => {
 })
 
 const emsps = computed(() => '\u2003'.repeat(emspCount.value))
+
+const HorizontalSpacer = () =>
+  h('i', { ...attrs, style: horizontalStyles.value }, emsps.value)
 </script>
 
 <template>
   <template v-if="type === 'horizontal'">
-    <i :style="horizontalStyles">{{ emsps }}</i>
+    <HorizontalSpacer />
   </template>
   <template v-else>
-    <div v-if="height" role="separator" :style="verticalStyles">&zwj;</div>
-    <div v-else role="separator">&zwj;</div>
+    <div
+      role="separator"
+      v-bind="{ ...$attrs, class: undefined }"
+      :class="verticalClass"
+    >&zwj;</div>
   </template>
 </template>

package/dist/components/Tailwind.vue

@@ -0,0 +1,45 @@
+<script lang="ts">
+import { defineComponent, createCommentVNode, inject, h, Fragment, type VNode } from 'vue'
+import { RenderContextKey } from '../composables/renderContext'
+
+/**
+ * Walk a slot's vnode tree and concatenate its text content.
+ * Handles plain text children, arrays, and Comment vnodes.
+ * Static text in <template #config>...</template> compiles into
+ * text vnodes whose `children` is a string — that's our path.
+ */
+function vnodeText(input: unknown): string {
+  if (input == null || input === false) return ''
+  if (typeof input === 'string') return input
+  if (typeof input === 'number') return String(input)
+  if (Array.isArray(input)) return input.map(vnodeText).join('')
+
+  const v = input as VNode
+  if (typeof v.children === 'string') return v.children
+  if (Array.isArray(v.children)) return vnodeText(v.children)
+  return ''
+}
+
+export default defineComponent({
+  name: 'Tailwind',
+  setup(_, { slots }) {
+    const ctx = inject(RenderContextKey)!
+    if (!ctx.tailwindBlocks) ctx.tailwindBlocks = []
+    const id = `tw${ctx.tailwindBlocks.length}`
+
+    /**
+     * Extract optional `#config` slot content as raw CSS. Evaluated at setup
+     * time; the slot is NOT rendered into the document.
+     */
+    const css = slots.config ? vnodeText(slots.config()).trim() : undefined
+
+    ctx.tailwindBlocks.push({ id, css: css || undefined })
+
+    return () => h(Fragment, null, [
+      createCommentVNode(`mz-tw:${id}`),
+      slots.default?.(),
+      createCommentVNode(`/mz-tw:${id}`),
+    ])
+  },
+})
+</script>

package/dist/components/Text.vue

@@ -18,12 +18,12 @@ const props = defineProps({
 
 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))
+const defaultClass = computed(() => props.as === 'span' ? '' : 'mt-4 text-base')
+const mergedClass = computed(() => twMerge(defaultClass.value, attrs.class as string) || undefined)
 </script>
 
 <template>
-  <component :is="props.as" v-bind="$attrs" :class="mergedClass">
+  <component :is="props.as" v-bind="{ ...$attrs, class: mergedClass }">
     <slot />
   </component>
 </template>