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

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/Overlap.vue

@@ -0,0 +1,156 @@
+<script setup lang="ts">
+import { computed, useAttrs, createStaticVNode } from 'vue'
+import {
+  hasHeightInStyle,
+  hasHeightUtility,
+  hasWidthInStyle,
+  hasWidthUtility,
+  nextId,
+  normalizeToPixels,
+  outlookFallbackProp
+} from './utils.ts'
+import { useOutlookFallback } from '../composables/useOutlookFallback'
+
+defineOptions({ inheritAttrs: false })
+
+const attrs = useAttrs()
+
+const props = defineProps({
+  /**
+   * Max height of the background (default slot) content.
+   *
+   * Applied as `max-height` on the background div and as `height`
+   * on the VML rectangle. When not set, the height is taken from
+   * a Tailwind utility (e.g. `h-50`, `max-h-[200px]`) or inline
+   * `height`/`max-height` style on the component, after CSS inlining.
+   */
+  height: {
+    type: [String, Number],
+    default: null
+  },
+  /**
+   * Width of the overlay table and VML rectangle.
+   *
+   * When not set, derived from a width utility class or inline
+   * style on the component itself, otherwise from the nearest
+   * sized ancestor (`Container`, `Section`, outer `Column`).
+   * Falls back to `100%` when no source is found.
+   */
+  width: {
+    type: [String, Number],
+    default: null
+  },
+  /**
+   * Height of the VML rectangle in Outlook.
+   *
+   * Defaults to the resolved `height`. Use this to fine-tune the
+   * overlay height specifically for Outlook rendering.
+   */
+  msoHeight: {
+    type: [String, Number],
+    default: null
+  },
+  /**
+   * 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'
+  },
+  /**
+   * 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 userClass = computed(() => (attrs.class as string) ?? '')
+
+const userHasWidth = computed(() =>
+  hasWidthUtility(userClass.value) || hasWidthInStyle(userStyle.value)
+)
+const userHasHeight = computed(() =>
+  hasHeightUtility(userClass.value) || hasHeightInStyle(userStyle.value)
+)
+
+const useWidthMarker = props.width == null
+const useHeightMarker = props.height == null && props.msoHeight == null
+const id = (useWidthMarker || useHeightMarker) ? nextId('o') : null
+
+const widthValue = computed(() =>
+  useWidthMarker ? `__MAIZZLE_COLW_${id}__` : normalizeToPixels(props.width)
+)
+
+const heightValue = computed(() => {
+  if (props.msoHeight != null) return normalizeToPixels(props.msoHeight)
+  if (props.height != null) return normalizeToPixels(props.height)
+  return `__MAIZZLE_OH_${id}__`
+})
+
+const backgroundStyles = computed(() => {
+  const parts: string[] = []
+  if (props.height != null) parts.push(`max-height: ${normalizeToPixels(props.height)}`)
+  parts.push('margin: 0 auto', 'text-align: center')
+  if (userStyle.value) parts.push(userStyle.value)
+  return parts.join('; ') + ';'
+})
+
+const tdStyle = computed(() =>
+  `width: ${widthValue.value}; max-width: 100%; vertical-align: top;`
+)
+
+const vmlOpen = computed(() =>
+  `<!--[if mso]><v:rect xmlns:v="urn:schemas-microsoft-com:vml" stroked="f" filled="f" style="width: ${widthValue.value}; height: ${heightValue.value};"><v:textbox inset="${props.msoInset}"><![endif]-->`
+)
+
+const restAttrs = computed(() => {
+  const { style: _, ...rest } = attrs
+  return rest
+})
+
+const VmlBefore = () => createStaticVNode(vmlOpen.value, 1)
+const VmlAfter = () => createStaticVNode('<!--[if mso]></v:textbox></v:rect><![endif]-->', 1)
+</script>
+
+<template>
+  <div
+    v-bind="restAttrs"
+    :style="backgroundStyles"
+    :data-maizzle-cw-id="useWidthMarker ? id : null"
+    :data-maizzle-cw-count="useWidthMarker ? 1 : null"
+    :data-maizzle-cw-self="useWidthMarker && userHasWidth ? '' : null"
+    :data-maizzle-oh-id="useHeightMarker && userHasHeight ? id : null"
+  >
+    <slot />
+  </div>
+  <table style="max-height: 0; position: relative; opacity: 0.999;">
+    <tr>
+      <td :style="tdStyle">
+        <VmlBefore v-if="outlookFallback" />
+        <slot name="overlay" />
+        <VmlAfter v-if="outlookFallback" />
+      </td>
+    </tr>
+  </table>
+</template>

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

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+defineProps({
+  /** Number of `&#8199;&#65279;&#847;` filler sequences to render after the preview text. */
+  spaces: {
+    type: Number,
+    default: 150
+  }
+})
+</script>
+
+<template>
+  <Teleport to="body:start">
+    <div style="display: none"><slot /><template v-for="i in spaces" :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.split(':').at(-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.split(':').at(-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>