npm - @maizzle/framework - Versions diffs - 6.0.0-rc.7 → 6.0.0-rc.8 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (42) hide show

package/dist/components/Body.vue +105 -36
package/dist/components/Button.vue +4 -1
package/dist/components/CodeBlock.vue +1 -1
package/dist/components/CodeInline.vue +6 -1
package/dist/components/Column.vue +30 -5
package/dist/components/Container.vue +10 -2
package/dist/components/Divider.vue +28 -0
package/dist/components/Head.vue +22 -0
package/dist/components/Heading.vue +28 -0
package/dist/components/Html.vue +98 -47
package/dist/components/Layout.vue +93 -0
package/dist/components/Link.vue +26 -0
package/dist/components/Markdown.vue +15 -2
package/dist/components/Outlook.vue +36 -0
package/dist/components/Overlap.vue +25 -5
package/dist/components/Preheader.vue +1 -1
package/dist/components/Row.vue +16 -5
package/dist/components/Section.vue +83 -0
package/dist/components/Text.vue +29 -0
package/dist/components/Vml.vue +165 -13
package/dist/render/createRenderer.d.mts.map +1 -1
package/dist/render/createRenderer.mjs +13 -1
package/dist/render/createRenderer.mjs.map +1 -1
package/dist/serve.mjs +1 -1
package/dist/serve.mjs.map +1 -1
package/dist/server/compatibility.mjs +15 -1
package/dist/server/compatibility.mjs.map +1 -1
package/dist/server/email.mjs +2 -1
package/dist/server/email.mjs.map +1 -1
package/dist/server/linter.d.mts +1 -2
package/dist/server/linter.d.mts.map +1 -1
package/dist/server/linter.mjs +60 -71
package/dist/server/linter.mjs.map +1 -1
package/dist/server/ui/App.vue +9 -9
package/dist/server/ui/pages/Preview.vue +215 -150
package/dist/transformers/inlineCSS.d.mts +1 -14
package/dist/transformers/inlineCSS.d.mts.map +1 -1
package/dist/transformers/inlineCSS.mjs +16 -34
package/dist/transformers/inlineCSS.mjs.map +1 -1
package/dist/types/config.d.mts +11 -27
package/dist/types/config.d.mts.map +1 -1
package/package.json +1 -1

package/dist/components/Body.vue CHANGED Viewed

@@ -1,42 +1,111 @@
-<script lang="ts">
-import { createStaticVNode } from 'vue'
+<script setup lang="ts">
+import { createStaticVNode, inject, useAttrs, useSlots } from 'vue'
 import type { PropType } from 'vue'
-export default {
-  name: 'Body',
-  inheritAttrs: false,
-  props: {
-    xmlLang: {
-      type: String,
-      default: 'en'
-    },
-    dir: {
-      type: String as PropType<'ltr' | 'rtl'>,
-      default: 'ltr'
-    }
+defineOptions({ inheritAttrs: false })
+const attrs = useAttrs()
+const slots = useSlots()
+const props = defineProps({
+  /**
+   * Language code for the `xml:lang` attribute on `<body>`.
+   *
+   * Inherited from the parent `Html` component's `lang` prop by default.
+   *
+   * @example 'fr'
+   */
+  xmlLang: {
+    type: String as PropType<
+      | 'af' | 'ar' | 'az'
+      | 'be' | 'bg' | 'bs'
+      | 'ca' | 'cs' | 'cy'
+      | 'da' | 'de' | 'dv'
+      | 'el' | 'en' | 'es' | 'et' | 'eu'
+      | 'fa' | 'fi' | 'fo' | 'fr'
+      | 'gl' | 'gu'
+      | 'he' | 'hi' | 'hr' | 'hu' | 'hy'
+      | 'id' | 'is' | 'it'
+      | 'ja'
+      | 'ka' | 'kk' | 'kn' | 'ko' | 'ky'
+      | 'lt' | 'lv'
+      | 'mk' | 'mn' | 'mr' | 'ms' | 'mt'
+      | 'nb' | 'nl' | 'nn' | 'no'
+      | 'pa' | 'pl' | 'pt'
+      | 'ro' | 'ru'
+      | 'sa' | 'se' | 'sk' | 'sl' | 'sq' | 'sr' | 'sv' | 'sw'
+      | 'ta' | 'te' | 'th' | 'tr' | 'tt'
+      | 'uk' | 'ur' | 'uz'
+      | 'vi'
+      | 'zh'
+      | (string & {})
+    >,
+    default: undefined
+  },
+  /**
+   * Text direction of the body.
+   *
+   * - `ltr` — left to right (default)
+   * - `rtl` — right to left
+   *
+   * @default 'ltr'
+   */
+  dir: {
+    type: String as PropType<'ltr' | 'rtl'>,
+    default: 'ltr'
   },
-  setup(props, { slots, attrs }) {
-    return () => {
-      const extraAttrs = Object.entries(attrs)
-        .map(([key, value]) => value === true ? key : `${key}="${value}"`)
-        .join(' ')
-      const parts = [
-        `xml:lang="${props.xmlLang}"`,
-        `dir="${props.dir}"`,
-        'style="margin: 0; padding: 0; width: 100%; word-break: break-word;"',
-      ]
-      if (extraAttrs) {
-        parts.push(extraAttrs)
-      }
-      return [
-        createStaticVNode(`<body ${parts.join(' ')}>`, 1),
-        slots.default?.(),
-        createStaticVNode('</body>', 1),
-      ]
-    }
+  /**
+   * Accessible label for the email article wrapper.
+   *
+   * Used as the `aria-label` on the inner `<div role="article">`.
+   * Helps screen readers identify the email content.
+   *
+   * @example 'Order confirmation'
+   */
+  ariaLabel: {
+    type: String,
+    default: undefined
+  }
+})
+const htmlLang = inject<string>('htmlLang', 'en')
+const render = () => {
+  const extraAttrs = Object.entries(attrs)
+    .map(([key, value]) => value === true ? key : `${key}="${value}"`)
+    .join(' ')
+  const lang = props.xmlLang ?? htmlLang
+  const parts = [
+    `xml:lang="${lang}"`,
+    `dir="${props.dir}"`,
+    'style="margin: 0; padding: 0; width: 100%; word-break: break-word;"',
+  ]
+  if (extraAttrs) {
+    parts.push(extraAttrs)
   }
+  const articleParts = [
+    'role="article"',
+    'aria-roledescription="email"',
+    props.ariaLabel ? `aria-label="${props.ariaLabel}"` : '',
+    `lang="${lang}"`,
+    `dir="${props.dir}"`,
+    'style="font-size: medium; font-size: max(16px, 1rem)"',
+  ].filter(Boolean).join(' ')
+  return [
+    createStaticVNode(`<body ${parts.join(' ')}>`, 1),
+    createStaticVNode(`<div ${articleParts}>`, 1),
+    slots.default?.(),
+    createStaticVNode('</div>', 1),
+    createStaticVNode('</body>', 1),
+  ]
 }
 </script>
+<template>
+  <render />
+</template>

package/dist/components/Button.vue CHANGED Viewed

@@ -10,7 +10,10 @@ const attrs = useAttrs()
 const props = defineProps({
   /** The URL the button links to. */
-  href: String,
+  href: {
+    type: String,
+    required: true
+  },
   /**
    * The button style variant.
    * - `solid` — filled background (default)

package/dist/components/CodeBlock.vue CHANGED Viewed

@@ -9,7 +9,7 @@ export default {
       type: String,
       default: ''
     },
-/** The language for syntax highlighting. @default 'html' */
+    /** The language for syntax highlighting. @default 'html' */
     language: {
       type: String as PropType<BundledLanguage>,
       default: 'html'

package/dist/components/CodeInline.vue CHANGED Viewed

@@ -4,7 +4,12 @@ import { createStaticVNode } from 'vue'
 export default {
   inheritAttrs: false,
   props: {
-    /** The inline code text. */
+    /**
+     * The inline code text to render.
+     *
+     * If not provided, the slot content is used instead.
+     * The text is HTML-escaped automatically.
+     */
     code: {
       type: String,
       default: ''

package/dist/components/Column.vue CHANGED Viewed

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, createStaticVNode, inject, useAttrs } from 'vue'
+import { computed, createStaticVNode, inject, provide, useAttrs } from 'vue'
 import type { ComputedRef } from 'vue'
 import { normalizeToPixels } from './utils.ts'
@@ -8,10 +8,26 @@ defineOptions({ inheritAttrs: false })
 const attrs = useAttrs()
 const props = defineProps({
-  /** Override the auto-computed min-width. */
+  /**
+   * Override the auto-computed column width.
+   *
+   * By default, the width is calculated from the parent `Row`
+   * by dividing its width by the column count.
+   */
   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'
+   */
+  msoStyle: {
+    type: String,
+    default: undefined
   }
 })
@@ -26,10 +42,10 @@ const minWidth = computed(() => {
   // Fallback: divide container width by 2 if available
   if (containerWidth?.value) {
     const val = containerWidth.value
-    if (typeof val === 'number') return `${val / 2}px`
+    if (typeof val === 'number') return `${parseFloat((val / 2).toFixed(2))}px`
     const num = Number.parseFloat(val)
     const unit = val.replace(String(num), '') || 'px'
-    return `${num / 2}${unit}`
+    return `${parseFloat((num / 2).toFixed(2))}${unit}`
   }
   return '18.75em'
@@ -37,12 +53,21 @@ const minWidth = computed(() => {
 const msoWidth = computed(() => injectedMsoWidth?.value ?? '50%')
+// Provide column width as containerWidth for nested Rows
+provide('containerWidth', minWidth)
 const styles = computed(() => {
   return `display: inline-block; min-width: ${minWidth.value}; font-size: 16px; vertical-align: top;`
 })
+const tdStyle = computed(() => {
+  const parts = ['vertical-align: top']
+  if (props.msoStyle) parts.push(props.msoStyle)
+  return parts.join('; ')
+})
 const MsoBefore = () => createStaticVNode(
-  `<!--[if mso]><td width="${msoWidth.value}" style="vertical-align:top"><![endif]-->`,
+  `<!--[if mso]><td width="${msoWidth.value}" style="${tdStyle.value}"><![endif]-->`,
   1
 )

package/dist/components/Container.vue CHANGED Viewed

@@ -7,7 +7,15 @@ defineOptions({ inheritAttrs: false })
 const attrs = useAttrs()
 const props = defineProps({
-  /** Max width of the container. */
+  /**
+   * Max width of the container.
+   *
+   * Applied as `max-width` on the div and as `width` on the MSO table.
+   * Also provided to child `Row` and `Column` components for
+   * automatic column width calculation.
+   *
+   * @default '37.5em'
+   */
   width: {
     type: [String, Number],
     default: '37.5em'
@@ -21,7 +29,7 @@ const styles = computed(() => {
 })
 const MsoBefore = () => createStaticVNode(
-  `<!--[if mso]><table role="none" cellpadding="0" cellspacing="0" style="width:${normalizeToPixels(props.width)}" align="center"><tr><td><![endif]-->`,
+  `<!--[if mso]><table role="none" cellpadding="0" cellspacing="0" style="width: ${normalizeToPixels(props.width)}" align="center"><tr><td><![endif]-->`,
   1
 )

package/dist/components/Divider.vue CHANGED Viewed

@@ -5,34 +5,62 @@ import { normalizeToPixels } from './utils.ts'
 const attrs = useAttrs()
 const props = defineProps({
+  /**
+   * Height (thickness) of the divider line.
+   *
+   * @default '1px'
+   */
   height: {
     type: [String, Number],
     default: '1px'
   },
+  /**
+   * Background color of the divider line.
+   *
+   * Defaults to `#cbd5e1` when no Tailwind `bg-*` class is used.
+   *
+   * @example '#e2e8f0'
+   */
   color: {
     type: String,
     default: null
   },
+  /**
+   * Vertical spacing (margin) above and below the divider.
+   *
+   * Overridden by `top` and `bottom` if set.
+   *
+   * @default '24px'
+   */
   spaceY: {
     type: [String, Number],
     default: '24px'
   },
+  /**
+   * Horizontal spacing (margin) on both sides of the divider.
+   *
+   * Overridden by `left` and `right` if set.
+   */
   spaceX: {
     type: [String, Number],
     default: null
   },
+  /** Margin above the divider. Overrides `spaceY` for the top side. */
   top: {
     type: [String, Number],
     default: null
   },
+  /** Margin below the divider. Overrides `spaceY` for the bottom side. */
   bottom: {
     type: [String, Number],
     default: null
   },
+  /** Margin to the left of the divider. Overrides `spaceX` for the left side. */
   left: {
     type: [String, Number],
     default: null
   },
+  /** Margin to the right of the divider. Overrides `spaceX` for the right side. */
   right: {
     type: [String, Number],
     default: null

package/dist/components/Head.vue CHANGED Viewed

@@ -1,4 +1,26 @@
+<script setup lang="ts">
+import { createStaticVNode } from 'vue'
+const props = defineProps({
+  /**
+   * Render an empty `<head>` before the main head element.
+   *
+   * This is a workaround for Yahoo! Mail on Android, which
+   * strips styles from the first `<head>` element.
+   *
+   * @default false
+   */
+  double: {
+    type: [Boolean, String],
+    default: false
+  }
+})
+const EmptyHead = () => createStaticVNode('<head></head>', 1)
+</script>
 <template>
+  <EmptyHead v-if="props.double === true || props.double === 'true'" />
   <head>
     <meta charset="utf-8">
     <meta name="x-apple-disable-message-reformatting">

package/dist/components/Heading.vue ADDED Viewed

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { computed, useAttrs } from 'vue'
+import { twMerge } from 'tailwind-merge'
+defineOptions({ inheritAttrs: false })
+const props = defineProps({
+  /**
+   * The heading level (1-6), corresponding to `<h1>` through `<h6>`.
+   * @default 1
+   */
+  level: {
+    type: [String, Number],
+    default: 1,
+    validator: (v: string | number) => [1, 2, 3, 4, 5, 6].includes(Number(v)),
+  },
+})
+const attrs = useAttrs()
+const tag = computed(() => `h${props.level}`)
+const mergedClass = computed(() => twMerge('m-0', attrs.class as string))
+</script>
+<template>
+  <component :is="tag" v-bind="$attrs" :class="mergedClass">
+    <slot />
+  </component>
+</template>

package/dist/components/Html.vue CHANGED Viewed

@@ -1,53 +1,104 @@
-<script lang="ts">
-import { createStaticVNode } from 'vue'
+<script setup lang="ts">
+import { createStaticVNode, provide, useAttrs, useSlots } from 'vue'
 import type { PropType } from 'vue'
-export default {
-  name: 'Html',
-  inheritAttrs: false,
-  props: {
-    lang: {
-      type: String,
-      default: 'en'
-    },
-    dir: {
-      type: String as PropType<'ltr' | 'rtl'>,
-      default: 'ltr'
-    },
-    xmlns: {
-      type: String,
-      default: null
-    }
+defineOptions({ inheritAttrs: false })
+const attrs = useAttrs()
+const slots = useSlots()
+const props = defineProps({
+  /**
+   * Language code for the `lang` attribute on `<html>`.
+   *
+   * Also provided to the child `Body` component for `xml:lang`.
+   *
+   * @default 'en'
+   */
+  lang: {
+    type: String as PropType<
+      | 'af' | 'ar' | 'az'
+      | 'be' | 'bg' | 'bs'
+      | 'ca' | 'cs' | 'cy'
+      | 'da' | 'de' | 'dv'
+      | 'el' | 'en' | 'es' | 'et' | 'eu'
+      | 'fa' | 'fi' | 'fo' | 'fr'
+      | 'gl' | 'gu'
+      | 'he' | 'hi' | 'hr' | 'hu' | 'hy'
+      | 'id' | 'is' | 'it'
+      | 'ja'
+      | 'ka' | 'kk' | 'kn' | 'ko' | 'ky'
+      | 'lt' | 'lv'
+      | 'mk' | 'mn' | 'mr' | 'ms' | 'mt'
+      | 'nb' | 'nl' | 'nn' | 'no'
+      | 'pa' | 'pl' | 'pt'
+      | 'ro' | 'ru'
+      | 'sa' | 'se' | 'sk' | 'sl' | 'sq' | 'sr' | 'sv' | 'sw'
+      | 'ta' | 'te' | 'th' | 'tr' | 'tt'
+      | 'uk' | 'ur' | 'uz'
+      | 'vi'
+      | 'zh'
+      | (string & {})
+    >,
+    default: 'en'
+  },
+  /**
+   * Text direction of the document.
+   *
+   * - `ltr` — left to right (default)
+   * - `rtl` — right to left
+   *
+   * @default 'ltr'
+   */
+  dir: {
+    type: String as PropType<'ltr' | 'rtl'>,
+    default: 'ltr'
   },
-  setup(props, { slots, attrs }) {
-    return () => {
-      const extraAttrs = Object.entries(attrs)
-        .map(([key, value]) => value === true ? key : `${key}="${value}"`)
-        .join(' ')
-      const parts = [
-        `lang="${props.lang}"`,
-        `dir="${props.dir}"`,
-      ]
-      if (props.xmlns) {
-        parts.push(
-          `xmlns="${props.xmlns}"`,
-          'xmlns:v="urn:schemas-microsoft-com:vml"',
-          'xmlns:o="urn:schemas-microsoft-com:office:office"',
-        )
-      }
-      if (extraAttrs) {
-        parts.push(extraAttrs)
-      }
-      return [
-        createStaticVNode(`<html ${parts.join(' ')}>`, 1),
-        slots.default?.(),
-        createStaticVNode('</html>', 1),
-      ]
-    }
+  /**
+   * Whether to include VML and Office XML namespace declarations.
+   *
+   * Required for Outlook VML support (background images, etc.).
+   * Set to `false` to omit the `xmlns:v` and `xmlns:o` attributes.
+   *
+   * @default true
+   */
+  xmlns: {
+    type: [Boolean, String],
+    default: true
+  }
+})
+provide('htmlLang', props.lang)
+const render = () => {
+  const extraAttrs = Object.entries(attrs)
+    .map(([key, value]) => value === true ? key : `${key}="${value}"`)
+    .join(' ')
+  const parts = [
+    `lang="${props.lang}"`,
+    `dir="${props.dir}"`,
+  ]
+  if (props.xmlns !== false && props.xmlns !== 'false') {
+    parts.push(
+      'xmlns:v="urn:schemas-microsoft-com:vml"',
+      'xmlns:o="urn:schemas-microsoft-com:office:office"',
+    )
+  }
+  if (extraAttrs) {
+    parts.push(extraAttrs)
   }
+  return [
+    createStaticVNode(`<html ${parts.join(' ')}>`, 1),
+    slots.default?.(),
+    createStaticVNode('</html>', 1),
+  ]
 }
 </script>
+<template>
+  <render />
+</template>

package/dist/components/Layout.vue ADDED Viewed

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+defineOptions({ inheritAttrs: false })
+defineProps({
+  /**
+   * Classes to add to the `<body>` tag.
+   */
+  bodyClass: {
+    type: String,
+    default: ''
+  },
+  /**
+   * Language code for the `lang` and `xml:lang` attributes.
+   *
+   * @default 'en'
+   */
+  lang: {
+    type: String,
+    default: 'en'
+  },
+  /**
+   * Text direction.
+   *
+   * @default 'ltr'
+   */
+  dir: {
+    type: String as PropType<'ltr' | 'rtl'>,
+    default: 'ltr'
+  },
+  /**
+   * Accessible label for the email article wrapper.
+   *
+   * Used as the `aria-label` on the inner `<div role="article">`.
+   *
+   * @example 'Order confirmation'
+   */
+  ariaLabel: {
+    type: String,
+    default: undefined
+  }
+})
+</script>
+<template>
+  <html :lang="lang" :dir="dir" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
+  <head>
+    <meta charset="utf-8">
+    <meta name="x-apple-disable-message-reformatting">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no">
+    <meta name="color-scheme" content="light dark">
+    <meta name="supported-color-schemes" content="light dark">
+    <!--[if mso]>
+      <noscript>
+        <xml>
+          <o:OfficeDocumentSettings xmlns:o="urn:schemas-microsoft-com:office:office">
+            <o:PixelsPerInch>96</o:PixelsPerInch>
+          </o:OfficeDocumentSettings>
+        </xml>
+      </noscript>
+      <style>
+        td,th,div,p,a,h1,h2,h3,h4,h5,h6 {font-family: "Segoe UI", sans-serif; mso-line-height-rule: exactly;}
+        .mso-break-all {word-break: break-all;}
+      </style>
+      <![endif]-->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet" media="screen">
+    <style>
+      @import "@maizzle/tailwindcss";
+      img {
+        @apply max-w-full align-middle;
+      }
+    </style>
+  </head>
+  <body :xml:lang="lang" :class="['m-0 p-0 size-full [word-break:break-word]', bodyClass]">
+    <div
+      role="article"
+      aria-roledescription="email"
+      :aria-label="ariaLabel"
+      :lang="lang"
+      :dir="dir"
+      style="font-size: medium;"
+      :class="['[font-size:max(16px,1rem)]', $attrs.class]">
+      <slot />
+    </div>
+  </body>
+  </html>
+</template>

package/dist/components/Link.vue ADDED Viewed

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { computed, useAttrs } from 'vue'
+import { twMerge } from 'tailwind-merge'
+defineOptions({ inheritAttrs: false })
+defineProps({
+  /**
+   * The URL the link points to.
+   */
+  href: {
+    type: String,
+    required: true,
+    validator: (v: string) => v.trim().length > 0,
+  },
+})
+const attrs = useAttrs()
+const mergedClass = computed(() => twMerge('no-underline', attrs.class as string))
+</script>
+<template>
+  <a :href="href" v-bind="$attrs" :class="mergedClass">
+    <slot />
+  </a>
+</template>