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

package/dist/components/Row.vue

@@ -0,0 +1,184 @@
+<script lang="ts">
+const warnedLocations = new Set<string>()
+</script>
+
+<script setup lang="ts">
+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 })
+
+const attrs = useAttrs()
+
+const props = defineProps({
+  /**
+   * Explicit row width.
+   *
+   * 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],
+    default: null
+  },
+  /**
+   * 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
+  },
+  /**
+   * 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 {
+  let count = 0
+
+  for (const vnode of vnodes) {
+    if (vnode.type === Fragment && Array.isArray(vnode.children)) {
+      count += countChildren(vnode.children as VNode[])
+    } else if (vnode.type !== Comment && typeof vnode.type !== 'symbol') {
+      count++
+    }
+  }
+
+  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
+
+  const children = slots.default?.() ?? []
+  return countChildren(children) || 1
+})
+
+provide('columnCount', columnCount)
+
+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 userHasWidth = computed(() => {
+  const cls = (attrs.class as string) ?? ''
+  return hasWidthUtility(cls) || hasWidthInStyle(userStyle.value)
+})
+
+const colWidthSource = computed(() => {
+  if (props.width != null) return normalizeToPixels(props.width)
+  if (userHasWidth.value) return ''
+  return null
+})
+
+const restAttrs = computed(() => {
+  const { style: _, class: __, 'data-maizzle-loc': ___, ...rest } = attrs
+  return rest
+})
+
+/**
+ * `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" style="width: 100%"><tr><![endif]-->',
+  1
+)
+
+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 v-if="outlookFallback" />
+  <div
+    v-bind="restAttrs"
+    :class="mergedClass"
+    :style="divStyle"
+    :data-maizzle-cw="colWidthSource"
+  >
+    <slot />
+  </div>
+  <MsoAfter v-if="outlookFallback" />
+</template>

package/dist/components/Section.vue

@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import { computed, createStaticVNode, useAttrs } from 'vue'
+import { hasWidthInStyle, hasWidthUtility, nextId, normalizeToPixels, outlookFallbackProp } from './utils.ts'
+import { useOutlookFallback } from '../composables/useOutlookFallback'
+
+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.
+   *
+   * 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: null
+  },
+  /**
+   * 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
+  },
+  /**
+   * 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 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 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 divStyle = computed(() => {
+  const parts: string[] = []
+  if (props.width != null) 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 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: ${msoWidth.value}"><tr><td${tdStyle}><![endif]-->`,
+    1
+  )
+}
+
+const MsoAfter = () => createStaticVNode(
+  '<!--[if mso]></td></tr></table><![endif]-->',
+  1
+)
+</script>
+
+<template>
+  <MsoBefore v-if="outlookFallback" />
+  <div
+    v-bind="restAttrs"
+    :style="divStyle"
+    :data-maizzle-msow-id="msoId"
+    :data-maizzle-msow-fallback="useMarker ? '100%' : null"
+    :data-maizzle-cw="colWidthSource"
+  >
+    <slot />
+  </div>
+  <MsoAfter v-if="outlookFallback" />
+</template>

package/dist/components/Spacer.vue

@@ -1,36 +1,85 @@
 <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 height of the spacer. */
-  size: {
-    type: [String, Number],
-    default: null
+  /** The type of spacer. */
+  type: {
+    type: String as () => 'vertical' | 'horizontal',
+    default: 'vertical'
   },
-  /** The alternative height to use in Outlook. */
-  msoHeight: {
+  /** The width of the spacer (horizontal). */
+  width: {
     type: [String, Number],
-    default: null
-  }
+    default: 16
+  },
+  outlookFallback: outlookFallbackProp,
 })
 
-const styles = computed(() => {
-  const s = []
+const attrs = useAttrs()
+const outlookFallback = useOutlookFallback(props.outlookFallback)
+
+const HEIGHT_RE = /(?:^|\s)h-([\w./\-[\]%]+)/g
+const LEADING_RE = /(?:^|\s)leading-/
 
-  if (props.size) {
-    s.push(`line-height: ${normalizeToPixels(props.size)};`)
-  }
+const verticalClass = computed(() => {
+  const userClass = (attrs.class as string) || ''
+  if (!userClass) return ''
+
+  const heights = [...userClass.matchAll(HEIGHT_RE)]
+  const stripped = userClass.replace(HEIGHT_RE, ' ').replace(/\s+/g, ' ').trim()
+
+  if (!heights.length) return stripped
+  if (LEADING_RE.test(stripped)) return stripped
+
+  return `${stripped} leading-${heights[heights.length - 1][1]}`.trim()
+})
 
-  if (props.msoHeight) {
-    s.push(`mso-line-height-alt: ${normalizeToPixels(props.msoHeight)};`)
-  }
+function parsePixelValue(value: string | number): number {
+  if (typeof value === 'number') return value
+  return Number.parseFloat(value) || 0
+}
 
-  return s.join('')
+const horizontalStyles = computed(() => {
+  const mso = outlookFallback ? msoFontWidth.value : ''
+  return `display:inline-block; width: ${normalizeToPixels(props.width)}; font-size: 16px;${mso}`
 })
+
+const msoFontWidth = computed(() => {
+  const widthPx = parsePixelValue(props.width)
+  const emspBase = 16
+  const maxPercent = 500
+  const maxPerEmsp = emspBase * (maxPercent / 100)
+  const numEmsps = Math.ceil(widthPx / maxPerEmsp)
+  const percent = Math.round((widthPx / (numEmsps * emspBase)) * 100)
+
+  return ` mso-font-width:${percent}%;`
+})
+
+const emspCount = computed(() => {
+  const widthPx = parsePixelValue(props.width)
+  const maxPerEmsp = 16 * 5
+  return Math.ceil(widthPx / maxPerEmsp)
+})
+
+const emsps = computed(() => '\u2003'.repeat(emspCount.value))
+
+const HorizontalSpacer = () =>
+  h('i', { ...attrs, style: horizontalStyles.value }, emsps.value)
 </script>
 
 <template>
-  <div v-if="size" role="separator" :style="styles">&zwj;</div>
-  <div v-else role="separator">&zwj;</div>
+  <template v-if="type === 'horizontal'">
+    <HorizontalSpacer />
+  </template>
+  <template v-else>
+    <div
+      role="separator"
+      v-bind="{ ...$attrs, class: undefined }"
+      :class="verticalClass"
+    >&zwj;</div>
+  </template>
 </template>

package/dist/components/Tailwind.vue

@@ -0,0 +1,43 @@
+<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

@@ -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/utils.d.ts

@@ -0,0 +1,28 @@
+//#region src/components/utils.d.ts
+declare function normalizeToPixels(value: string | number): string;
+/**
+ * Module-scoped sequential ID generator. Used by components to mint
+ * unique marker ids (e.g. `c1`, `c2`) for the post-render transformer.
+ *
+ * Must live here (not inside `<script setup>`) because Vue compiles
+ * `<script setup>` into the component's `setup()` function — any
+ * `let counter = 0` there resets per instance, causing id collisions.
+ */
+declare function nextId(prefix: string): string;
+declare function hasWidthUtility(classStr: string): boolean;
+declare function hasWidthInStyle(styleStr: string): boolean;
+declare function hasHeightUtility(classStr: string): boolean;
+declare function hasHeightInStyle(styleStr: string): boolean;
+/**
+ * Shared prop for components that emit MSO/VML fallback markup. The
+ * `null` default acts as the "unset" sentinel — `useOutlookFallback`
+ * treats `null` as inherit-from-ancestor (root default `true`),
+ * letting users override per-component without losing inheritance.
+ */
+declare const outlookFallbackProp: {
+  readonly type: BooleanConstructor;
+  readonly default: null;
+};
+//#endregion
+export { hasHeightInStyle, hasHeightUtility, hasWidthInStyle, hasWidthUtility, nextId, normalizeToPixels, outlookFallbackProp };
+//# sourceMappingURL=utils.d.ts.map

package/dist/components/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","names":[],"sources":["../../src/components/utils.ts"],"mappings":";iBAAgB,iBAAA,CAAkB,KAAA;AAAlC;;;;;AAiBA;;;AAjBA,iBAiBgB,MAAA,CAAO,MAAA;AAAA,iBAKP,eAAA,CAAgB,QAAA;AAAA,iBAQhB,eAAA,CAAgB,QAAA;AAAA,iBAIhB,gBAAA,CAAiB,QAAA;AAAA,iBAQjB,gBAAA,CAAiB,QAAA;;;AAZjC;;;;cAsBa,mBAAA;EAAA,eAGH,kBAAA;EAAA"}

package/dist/components/utils.js

@@ -0,0 +1,50 @@
+//#region src/components/utils.ts
+function normalizeToPixels(value) {
+	if (typeof value === "number" || Number.isFinite(Number(value))) return `${value}px`;
+	return value;
+}
+const counters = {};
+/**
+* Module-scoped sequential ID generator. Used by components to mint
+* unique marker ids (e.g. `c1`, `c2`) for the post-render transformer.
+*
+* Must live here (not inside `<script setup>`) because Vue compiles
+* `<script setup>` into the component's `setup()` function — any
+* `let counter = 0` there resets per instance, causing id collisions.
+*/
+function nextId(prefix) {
+	counters[prefix] = (counters[prefix] ?? 0) + 1;
+	return `${prefix}${counters[prefix]}`;
+}
+function hasWidthUtility(classStr) {
+	return classStr.split(/\s+/).some((c) => {
+		const clean = (c.split(":").pop() ?? "").replace(/^!/, "");
+		return /^(w-|max-w-|min-w-)/.test(clean);
+	});
+}
+function hasWidthInStyle(styleStr) {
+	return /(?:^|;\s*)(?:max-width|width)\s*:/i.test(styleStr);
+}
+function hasHeightUtility(classStr) {
+	return classStr.split(/\s+/).some((c) => {
+		const clean = (c.split(":").pop() ?? "").replace(/^!/, "");
+		return /^(h-|max-h-|min-h-)/.test(clean);
+	});
+}
+function hasHeightInStyle(styleStr) {
+	return /(?:^|;\s*)(?:max-height|height)\s*:/i.test(styleStr);
+}
+/**
+* Shared prop for components that emit MSO/VML fallback markup. The
+* `null` default acts as the "unset" sentinel — `useOutlookFallback`
+* treats `null` as inherit-from-ancestor (root default `true`),
+* letting users override per-component without losing inheritance.
+*/
+const outlookFallbackProp = {
+	type: Boolean,
+	default: null
+};
+//#endregion
+export { hasHeightInStyle, hasHeightUtility, hasWidthInStyle, hasWidthUtility, nextId, normalizeToPixels, outlookFallbackProp };
+
+//# sourceMappingURL=utils.js.map

package/dist/components/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":[],"sources":["../../src/components/utils.ts"],"sourcesContent":["export function normalizeToPixels(value: string | number): string {\n  if (typeof value === 'number' || Number.isFinite(Number(value))) {\n    return `${value}px`\n  }\n  return value\n}\n\nconst counters: Record<string, number> = {}\n\n/**\n * Module-scoped sequential ID generator. Used by components to mint\n * unique marker ids (e.g. `c1`, `c2`) for the post-render transformer.\n *\n * Must live here (not inside `<script setup>`) because Vue compiles\n * `<script setup>` into the component's `setup()` function — any\n * `let counter = 0` there resets per instance, causing id collisions.\n */\nexport function nextId(prefix: string): string {\n  counters[prefix] = (counters[prefix] ?? 0) + 1\n  return `${prefix}${counters[prefix]}`\n}\n\nexport function hasWidthUtility(classStr: string): boolean {\n  return classStr.split(/\\s+/).some((c) => {\n    const utility = c.split(':').pop() ?? ''\n    const clean = utility.replace(/^!/, '')\n    return /^(w-|max-w-|min-w-)/.test(clean)\n  })\n}\n\nexport function hasWidthInStyle(styleStr: string): boolean {\n  return /(?:^|;\\s*)(?:max-width|width)\\s*:/i.test(styleStr)\n}\n\nexport function hasHeightUtility(classStr: string): boolean {\n  return classStr.split(/\\s+/).some((c) => {\n    const utility = c.split(':').pop() ?? ''\n    const clean = utility.replace(/^!/, '')\n    return /^(h-|max-h-|min-h-)/.test(clean)\n  })\n}\n\nexport function hasHeightInStyle(styleStr: string): boolean {\n  return /(?:^|;\\s*)(?:max-height|height)\\s*:/i.test(styleStr)\n}\n\n/**\n * Shared prop for components that emit MSO/VML fallback markup. The\n * `null` default acts as the \"unset\" sentinel — `useOutlookFallback`\n * treats `null` as inherit-from-ancestor (root default `true`),\n * letting users override per-component without losing inheritance.\n */\nexport const outlookFallbackProp = {\n  type: Boolean,\n  default: null,\n} as const\n\n"],"mappings":";AAAA,SAAgB,kBAAkB,OAAgC;CAChE,IAAI,OAAO,UAAU,YAAY,OAAO,SAAS,OAAO,MAAM,CAAC,EAC7D,OAAO,GAAG,MAAM;CAElB,OAAO;;AAGT,MAAM,WAAmC,EAAE;;;;;;;;;AAU3C,SAAgB,OAAO,QAAwB;CAC7C,SAAS,WAAW,SAAS,WAAW,KAAK;CAC7C,OAAO,GAAG,SAAS,SAAS;;AAG9B,SAAgB,gBAAgB,UAA2B;CACzD,OAAO,SAAS,MAAM,MAAM,CAAC,MAAM,MAAM;EAEvC,MAAM,SADU,EAAE,MAAM,IAAI,CAAC,KAAK,IAAI,IAChB,QAAQ,MAAM,GAAG;EACvC,OAAO,sBAAsB,KAAK,MAAM;GACxC;;AAGJ,SAAgB,gBAAgB,UAA2B;CACzD,OAAO,qCAAqC,KAAK,SAAS;;AAG5D,SAAgB,iBAAiB,UAA2B;CAC1D,OAAO,SAAS,MAAM,MAAM,CAAC,MAAM,MAAM;EAEvC,MAAM,SADU,EAAE,MAAM,IAAI,CAAC,KAAK,IAAI,IAChB,QAAQ,MAAM,GAAG;EACvC,OAAO,sBAAsB,KAAK,MAAM;GACxC;;AAGJ,SAAgB,iBAAiB,UAA2B;CAC1D,OAAO,uCAAuC,KAAK,SAAS;;;;;;;;AAS9D,MAAa,sBAAsB;CACjC,MAAM;CACN,SAAS;CACV"}

package/dist/components/utils.ts

@@ -4,3 +4,54 @@ export function normalizeToPixels(value: string | number): string {
   }
   return value
 }
+
+const counters: Record<string, number> = {}
+
+/**
+ * Module-scoped sequential ID generator. Used by components to mint
+ * unique marker ids (e.g. `c1`, `c2`) for the post-render transformer.
+ *
+ * Must live here (not inside `<script setup>`) because Vue compiles
+ * `<script setup>` into the component's `setup()` function — any
+ * `let counter = 0` there resets per instance, causing id collisions.
+ */
+export function nextId(prefix: string): string {
+  counters[prefix] = (counters[prefix] ?? 0) + 1
+  return `${prefix}${counters[prefix]}`
+}
+
+export function hasWidthUtility(classStr: string): boolean {
+  return classStr.split(/\s+/).some((c) => {
+    const utility = c.split(':').pop() ?? ''
+    const clean = utility.replace(/^!/, '')
+    return /^(w-|max-w-|min-w-)/.test(clean)
+  })
+}
+
+export function hasWidthInStyle(styleStr: string): boolean {
+  return /(?:^|;\s*)(?:max-width|width)\s*:/i.test(styleStr)
+}
+
+export function hasHeightUtility(classStr: string): boolean {
+  return classStr.split(/\s+/).some((c) => {
+    const utility = c.split(':').pop() ?? ''
+    const clean = utility.replace(/^!/, '')
+    return /^(h-|max-h-|min-h-)/.test(clean)
+  })
+}
+
+export function hasHeightInStyle(styleStr: string): boolean {
+  return /(?:^|;\s*)(?:max-height|height)\s*:/i.test(styleStr)
+}
+
+/**
+ * Shared prop for components that emit MSO/VML fallback markup. The
+ * `null` default acts as the "unset" sentinel — `useOutlookFallback`
+ * treats `null` as inherit-from-ancestor (root default `true`),
+ * letting users override per-component without losing inheritance.
+ */
+export const outlookFallbackProp = {
+  type: Boolean,
+  default: null,
+} as const
+

package/dist/composables/{defineConfig.d.mts → defineConfig.d.ts}

@@ -1,4 +1,4 @@
-import { MaizzleConfig } from "../types/config.mjs";
+import { MaizzleConfig } from "../types/config.js";
 //#region src/composables/defineConfig.d.ts
 /**
  * Define Maizzle config.
@@ -11,4 +11,4 @@ import { MaizzleConfig } from "../types/config.mjs";
 declare function defineConfig(data?: Partial<MaizzleConfig>): MaizzleConfig;
 //#endregion
 export { defineConfig };
-//# sourceMappingURL=defineConfig.d.mts.map
+//# sourceMappingURL=defineConfig.d.ts.map

package/dist/composables/defineConfig.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defineConfig.d.ts","names":[],"sources":["../../src/composables/defineConfig.ts"],"mappings":";;;;;AAqBA;;;;;iBAAgB,YAAA,CAAa,IAAA,GAAM,OAAA,CAAQ,aAAA,IAAsB,aAAA"}

package/dist/composables/{defineConfig.mjs → defineConfig.js}

@@ -1,8 +1,7 @@
-import { MaizzleConfigKey } from "./useConfig.mjs";
-import { RenderContextKey } from "./renderContext.mjs";
+import { MaizzleConfigKey } from "./useConfig.js";
+import { RenderContextKey } from "./renderContext.js";
 import { createDefu } from "defu";
 import { getCurrentInstance, inject, provide } from "vue";
-
 //#region src/composables/defineConfig.ts
 const merge = createDefu((obj, key, value) => {
 	if (Array.isArray(obj[key])) {
@@ -28,7 +27,7 @@ function defineConfig(data = {}) {
 	}
 	return data;
 }
-
 //#endregion
 export { defineConfig };
-//# sourceMappingURL=defineConfig.mjs.map
+
+//# sourceMappingURL=defineConfig.js.map

package/dist/composables/defineConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"defineConfig.js","names":[],"sources":["../../src/composables/defineConfig.ts"],"sourcesContent":["import { getCurrentInstance, inject, provide } from 'vue'\nimport { createDefu } from 'defu'\nimport { MaizzleConfigKey } from './useConfig.ts'\nimport { RenderContextKey } from './renderContext.ts'\nimport type { MaizzleConfig } from '../types/index.ts'\n\nconst merge = createDefu((obj, key, value) => {\n  if (Array.isArray(obj[key])) {\n    obj[key] = value\n    return true\n  }\n})\n\n/**\n * Define Maizzle config.\n *\n * Works in both contexts:\n * - In maizzle.config.ts: typed identity function, returns the config as-is\n * - In Vue SFC <script setup>: merges with the global config and provides\n *   the result to child components via useConfig()\n */\nexport function defineConfig(data: Partial<MaizzleConfig> = {}): MaizzleConfig {\n  // Inside a Vue SFC — merge with global config and provide to children\n  if (getCurrentInstance()) {\n    const globalConfig = inject(MaizzleConfigKey, {} as MaizzleConfig)\n    const merged = merge(data, globalConfig) as MaizzleConfig\n\n    const ctx = inject(RenderContextKey)\n    if (ctx) ctx.sfcConfig = merged\n\n    provide(MaizzleConfigKey, merged)\n\n    return merged\n  }\n\n  // Outside Vue (maizzle.config.ts) — just return the config\n  return data as MaizzleConfig\n}\n"],"mappings":";;;;;AAMA,MAAM,QAAQ,YAAY,KAAK,KAAK,UAAU;CAC5C,IAAI,MAAM,QAAQ,IAAI,KAAK,EAAE;EAC3B,IAAI,OAAO;EACX,OAAO;;EAET;;;;;;;;;AAUF,SAAgB,aAAa,OAA+B,EAAE,EAAiB;CAE7E,IAAI,oBAAoB,EAAE;EAExB,MAAM,SAAS,MAAM,MADA,OAAO,kBAAkB,EAAE,CACT,CAAC;EAExC,MAAM,MAAM,OAAO,iBAAiB;EACpC,IAAI,KAAK,IAAI,YAAY;EAEzB,QAAQ,kBAAkB,OAAO;EAEjC,OAAO;;CAIT,OAAO"}