sazmail-vue 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025-PRESENT Mazlum Ozdogan <https://github.com/mergehez>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,98 @@
+# Meyro
+
+This is a Vue component that lets you use the [Sazmail](https://github.com/mergehez/sazmail) right inside your Vue 3 applications.
+
+It's pretty straightforward to set up and use. The only dependency is Vue itself.
+
+If you're working with React, there's a version for that too: [sazmail-react](https://github.com/mergehez/sazmail-react)
+
+## Installation
+
+```bash
+bun install sazmail-vue
+```
+
+```bash
+npm install sazmail-vue
+```
+
+## Basic Usage
+
+```vue
+<script setup lang="ts">
+import {ref} from "vue";
+import MailBuilder from 'sazmail-vue';
+
+const form = ref({
+    doc: '{}', // Your email template JSON string, or an object.
+    // '{}' is a good starting point for a new template.
+    html: ''   // This will hold the generated HTML output.
+});
+</script>
+
+<template>
+    <div class="w-full h-full">
+        <MailBuilder
+            id="my-builder"
+            v-model:json="form.doc"
+            v-model:html="form.html"
+        />
+    </div>
+</template>
+```
+
+> Make sure the container for <MailBuilder /> has a defined height, as the builder will try to fill it.
+
+## Props
+
+| Prop | Type                                                                   | Description                                                                                                                                                                 |
+|------|------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| id   | string                                                                 | An optional unique ID for the builder instance. Useful if you have multiple builders on a page.                                                                             |
+| json | object (see structure below) or string (JSON stringified) or undefined | The core data for the email template. You can pass a JSON string or a JavaScript object directly. Use with `v-model:json`. An empty object or `'{}'` starts a new template. |
+| html | string or undefined                                                    | Holds the generated HTML of the email template. Use with `v-model:html`.                                                                                                    |
+
+
+### `json` Prop Structure
+
+The `json` prop (whether as an object or a string) should conform to this structure:
+
+```typescript
+type BlockId = string;
+
+// This is the expected type for the 'json' prop when passed as an object
+export type MailBuilderDocument = {
+    version: string;
+    structure: Record<BlockId, {
+        customName?: string;
+        blockId: BlockId;
+        parentId: BlockId;
+        type: string;
+        condition?: string; // A liquid.js expression for conditional rendering
+        childrenIds?: BlockId[];
+    }>;
+    data: Record<BlockId, Record<string, any>>;
+    testJson?: Record<string, any>; // Sample data for template rendering/testing
+};
+```
+
+> Providing an empty object `{}` or an empty JSON string `'{}'` will initialize a new, blank template.
+
+## Emits
+The component emits the following events:
+- `update:json`: Emits the updated JSON data whenever it changes. This is useful for two-way binding with the `json` prop.
+- `update:html`: Emits the generated HTML whenever it changes. This is useful for two-way binding with the `html` prop.
+
+## A Little More Detail
+
+This component is essentially a bridge to the main [Sazmail](https://github.com/mergehez/sazmail). The builder itself is a self-contained HTML file. sazmail-vue takes that file, puts it into an iframe, and then uses Vue's reactivity system to pass data back and forth. This way, you get the full builder experience without a
+complicated setup.
+
+## License
+
+This project is shared under the MIT License. You can find the details in the [LICENSE](LICENSE) file.
+
+Feel free to use it in both personal and commercial projects.
+
+## Contributing
+
+Got ideas or improvements? Contributions are definitely welcome! Please read the [CONTRIBUTING.md](CONTRIBUTING.md) file for details on how to contribute.

package/dist/MailBuilder.vue.d.ts

@@ -0,0 +1,15 @@
+import { MailBuilderDocument, MailBuilderProps } from './types';
+type __VLS_Props = MailBuilderProps<string | MailBuilderDocument>;
+declare const _default: import('vue').DefineComponent<__VLS_Props, {
+    requestDataFromBuilder: any;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:json": (args_0: any) => any;
+    "update:html": (args_0: string | undefined) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:json"?: ((args_0: any) => any) | undefined;
+    "onUpdate:html"?: ((args_0: string | undefined) => any) | undefined;
+}>, {
+    displayMode: "preview" | "edit";
+    autoSave: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+import { default as MailBuilder } from './MailBuilder.vue';
+export default MailBuilder;
+export type { MailBuilderProps, MailBuilderDocument } from './types';