{"_id":"@amiriel/vue","_rev":"3-b4d3e64d31db13cae0c202ad73ee7e27","name":"@amiriel/vue","dist-tags":{"latest":"0.0.1","beta":"0.0.1-beta.8"},"versions":{"0.0.1-beta.6":{"name":"@amiriel/vue","version":"0.0.1-beta.6","keywords":["amiriel","vue","vue3","vue-component","editor","letter-editor","rich-text","typescript","vite"],"license":"MIT","_id":"@amiriel/vue@0.0.1-beta.6","maintainers":[{"name":"dingdangdog","email":"dingdangdogx@outlook.com"}],"homepage":"https://amiriel.com","bugs":{"url":"https://github.com/Amirieljs/Amiriel-Vue/issues"},"dist":{"shasum":"96277e771941dd335ba5a8065f128a6a4f9da017","tarball":"https://registry.npmjs.org/@amiriel/vue/-/vue-0.0.1-beta.6.tgz","fileCount":3,"integrity":"sha512-guE3On7O8/kCMadFzNo8MXLDi7h+fWBqzGgKuWkY40fQxDdVOrXdb6EM/j4BzWM6ozGWgKmV/ewC47aZS/4JWQ==","signatures":[{"sig":"MEQCIDSD48UDmEGjmuxtZeL46Dmuj2fs+JvPCKca/jjQ2eCBAiAVn3+BeVYRRw3nEl+5zJbvmHlIWLi4MU+uO80Jk3gx+Q==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":8889},"main":"./dist/amiriel-vue.umd.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/amiriel-vue.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/amiriel-vue.js","require":"./dist/amiriel-vue.umd.cjs"},"./style.css":"./dist/style.css"},"gitHead":"6da3b7f2604abdb0a990b4614bde44c555bf3c06","scripts":{"build":"vite build && vue-tsc -p tsconfig.json --declaration --emitDeclarationOnly","typecheck":"vue-tsc -p tsconfig.json --noEmit"},"_npmUser":{"name":"dingdangdog","email":"dingdangdogx@outlook.com"},"repository":{"url":"git+https://github.com/Amirieljs/Amiriel-Vue.git","type":"git"},"_npmVersion":"11.12.1","description":"Vue 3 components for Amiriel letter documents.","directories":{},"_nodeVersion":"22.22.0","dependencies":{"amiriel":"^0.0.1-beta.6","@heroicons/vue":"2.2.0"},"_hasShrinkwrap":false,"packageManager":"pnpm@11.7.0","devDependencies":{"vue":"^3.5.34","vite":"^7.2.7","vue-tsc":"^3.1.8","typescript":"^5.9.3","@vitejs/plugin-vue":"^6.0.3"},"peerDependencies":{"vue":">=3.5.0"},"_npmOperationalInternal":{"tmp":"tmp/vue_0.0.1-beta.6_1783005529937_0.05977045583770679","host":"s3://npm-registry-packages-npm-production"}},"0.0.1-beta.8":{"name":"@amiriel/vue","version":"0.0.1-beta.8","keywords":["amiriel","vue","vue3","vue-component","editor","letter-editor","rich-text","typescript","vite"],"license":"MIT","_id":"@amiriel/vue@0.0.1-beta.8","maintainers":[{"name":"dingdangdog","email":"dingdangdogx@outlook.com"}],"homepage":"https://amiriel.com","bugs":{"url":"https://github.com/Amirieljs/Amiriel-Vue/issues"},"dist":{"shasum":"6ffd81bbd835ef4f369c747adf6d1dd6f2f6127f","tarball":"https://registry.npmjs.org/@amiriel/vue/-/vue-0.0.1-beta.8.tgz","fileCount":17,"integrity":"sha512-8WLp9y68ZkQXS0Rr65Bp0QILcBG5FRKw2xve6N4tGbeQI8xwl2eYsa0alocPlFQm8g5uyYwAPra7yRaVmv9MMg==","signatures":[{"sig":"MEUCIDvK6mXobJpyoUy6RVzc5u0f0sIl2cJtK2BvKm3Y/hmHAiEAtxpqkXrgUXOukPk4CoeQk011kE07laMyduhimfmQ5iI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@amiriel%2fvue@0.0.1-beta.8","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":180854},"main":"./dist/amiriel-vue.umd.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/amiriel-vue.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/amiriel-vue.js","require":"./dist/amiriel-vue.umd.cjs"},"./style.css":"./dist/style.css"},"gitHead":"60f71244de2e81793accf8f77d7523d47caab71f","scripts":{"build":"vite build && vue-tsc -p tsconfig.json --declaration --emitDeclarationOnly","typecheck":"vue-tsc -p tsconfig.json --noEmit"},"_npmUser":{"name":"dingdangdog","email":"dingdangdogx@outlook.com"},"repository":{"url":"git+https://github.com/Amirieljs/Amiriel-Vue.git","type":"git"},"_npmVersion":"10.9.8","description":"Vue 3 components for Amiriel letter documents.","directories":{},"_nodeVersion":"22.23.1","dependencies":{"@amiriel/core":"^0.0.1-beta.7","@heroicons/vue":"2.2.0"},"_hasShrinkwrap":false,"packageManager":"pnpm@11.7.0","readmeFilename":"README.md","devDependencies":{"vue":"^3.5.34","vite":"^7.2.7","vue-tsc":"^3.1.8","typescript":"^5.9.3","@vitejs/plugin-vue":"^6.0.3"},"peerDependencies":{"vue":">=3.5.0"},"_npmOperationalInternal":{"tmp":"tmp/vue_0.0.1-beta.8_1783049002442_0.9114810439932206","host":"s3://npm-registry-packages-npm-production"}},"0.0.1":{"name":"@amiriel/vue","version":"0.0.1","description":"Vue 3 components for Amiriel letter documents.","type":"module","license":"MIT","homepage":"https://amiriel.com","packageManager":"pnpm@11.7.0","repository":{"type":"git","url":"git+https://github.com/Amirieljs/Amiriel-Vue.git"},"bugs":{"url":"https://github.com/Amirieljs/Amiriel-Vue/issues"},"keywords":["amiriel","vue","vue3","vue-component","editor","letter-editor","rich-text","typescript","vite"],"main":"./dist/amiriel-vue.umd.cjs","module":"./dist/amiriel-vue.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/amiriel-vue.js","require":"./dist/amiriel-vue.umd.cjs"},"./style.css":"./dist/style.css"},"scripts":{"build":"vite build && vue-tsc -p tsconfig.json --declaration --emitDeclarationOnly","typecheck":"vue-tsc -p tsconfig.json --noEmit"},"peerDependencies":{"vue":">=3.5.0"},"dependencies":{"@amiriel/core":"^0.0.1","@heroicons/vue":"2.2.0"},"devDependencies":{"@vitejs/plugin-vue":"^6.0.3","typescript":"^5.9.3","vite":"^7.2.7","vue":"^3.5.34","vue-tsc":"^3.1.8"},"_id":"@amiriel/vue@0.0.1","gitHead":"ad43976729cbd513e6ee93893f516b9507da7dd1","_nodeVersion":"22.23.1","_npmVersion":"10.9.8","dist":{"integrity":"sha512-AJhU/hVZc+p0V22KvfNQgrTujOsVdd2bhau1i9yzoO2/vV+gohvWOqkKR6v4mwbsCfx4/WXOIuJdnHrrG3zCVQ==","shasum":"e42c25527ef2bc888e2e584d367815cff19ef63b","tarball":"https://registry.npmjs.org/@amiriel/vue/-/vue-0.0.1.tgz","fileCount":17,"unpackedSize":184885,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@amiriel%2fvue@0.0.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDoWYnmL6PzhQTieZmRB2jZ/0U4JJbeVpNg9VLrz+5QBwIhAN7ag0HoNsNuFrtyC2eZWSRo+7TtmOV019qzUaxuU/Af"}]},"_npmUser":{"name":"dingdangdog","email":"dingdangdogx@outlook.com"},"directories":{},"maintainers":[{"name":"dingdangdog","email":"dingdangdogx@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue_0.0.1_1785989357208_0.18084944218691135"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-02T15:18:49.719Z","modified":"2026-08-06T04:09:17.751Z","0.0.1-beta.6":"2026-07-02T15:18:50.082Z","0.0.1-beta.8":"2026-07-03T03:23:22.574Z","0.0.1":"2026-08-06T04:09:17.381Z"},"bugs":{"url":"https://github.com/Amirieljs/Amiriel-Vue/issues"},"license":"MIT","homepage":"https://amiriel.com","keywords":["amiriel","vue","vue3","vue-component","editor","letter-editor","rich-text","typescript","vite"],"repository":{"type":"git","url":"git+https://github.com/Amirieljs/Amiriel-Vue.git"},"description":"Vue 3 components for Amiriel letter documents.","maintainers":[{"name":"dingdangdog","email":"dingdangdogx@outlook.com"}],"readme":"<p align=\"center\">\n  <img src=\"https://amiriel.com/logo/amiriel_256x256.webp\" alt=\"Amiriel logo\" width=\"96\" height=\"96\" />\n</p>\n\n<h1 align=\"center\">Amiriel Vue</h1>\n\n<p align=\"center\">\n  Vue 3 components for Amiriel letter documents.\n</p>\n\n`@amiriel/vue` provides a Vue implementation of the Amiriel document renderer\nand editor. It is built on `@amiriel/core`, so the document model, themes, labels, and\nnormalization rules stay aligned with the React package.\n\n[![npm version (beta)](https://img.shields.io/npm/v/@amiriel/vue/beta?style=flat-square)](https://www.npmjs.com/package/@amiriel/vue)\n[![license](https://img.shields.io/npm/l/@amiriel/vue?style=flat-square)](https://www.npmjs.com/package/@amiriel/vue)\n[![Vue](https://img.shields.io/badge/vue-3.5+-4FC08D?style=flat-square&logo=vue.js&logoColor=white)](https://vuejs.org/)\n[![TypeScript](https://img.shields.io/badge/typescript-ready-3178C6?style=flat-square&logo=typescript&logoColor=white)]()\n\nThe full hosted product lives at [amiriel.com](https://amiriel.com).\n\n## Features\n\n- Page-by-page letter editor with themes, fonts, paper sizing, and text blocks\n- Drag-and-drop media placement on each page\n- Matching read-only renderer for preview and delivery flows\n- Image/video lightbox and inline video helpers\n- Host-controlled media upload via `media-request` events\n- Shared model and document helpers from `@amiriel/core`\n- TypeScript declarations\n\nThe package does not include storage, authentication, routing, database, or\ndelivery workflows. Host applications own those concerns.\n\n## Install\n\n```bash\nnpm install @amiriel/vue@beta vue\npnpm add @amiriel/vue@beta vue\nyarn add @amiriel/vue@beta vue\nbun add @amiriel/vue@beta vue\n```\n\nImport the stylesheet once:\n\n```vue\n<script setup lang=\"ts\">\nimport \"@amiriel/vue/style.css\";\n</script>\n```\n\nThe package depends on `@amiriel/core` for the shared document model and declares\n`vue` as a peer dependency.\n\n## Usage\n\n```vue\n<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport {\n  AmirielBodyEditor,\n  AmirielBodyRenderer,\n  type AmirielDocument,\n  type AmirielMediaRequest,\n} from \"@amiriel/vue\";\nimport \"@amiriel/vue/style.css\";\n\nconst document = ref<AmirielDocument>({\n  theme: \"midnight\",\n  media: [],\n  pages: [],\n});\n\nasync function onMediaRequest(request: AmirielMediaRequest) {\n  request.handled = true;\n  try {\n    const media = await uploadMediaSomewhere(request.file);\n    request.resolve(media);\n  } catch (error) {\n    request.reject(error instanceof Error ? error.message : \"Upload failed\");\n  }\n}\n</script>\n\n<template>\n  <AmirielBodyEditor\n    v-model=\"document\"\n    locale=\"en\"\n    :show-github-link=\"true\"\n    @media-request=\"onMediaRequest\"\n  />\n\n  <AmirielBodyRenderer :document=\"document\" locale=\"en\" />\n</template>\n```\n\nHost applications own media upload and pass the resulting media object back\nthrough `request.resolve(media)`.\n\n## Main Exports\n\n| Export | Description |\n| --- | --- |\n| `AmirielBodyEditor` | Controlled Vue editor shell |\n| `AmirielBodyRenderer` | Read-only Vue renderer |\n| `AmirielMediaLightbox` | Image/video lightbox |\n| `AmirielMediaVideo` | Inline video component |\n| `AmirielMediaVideoThumbnail` | Video thumbnail helper |\n| Core types and helpers | Re-exported from `@amiriel/core` |\n\n## Editor Props\n\n| Prop | Default | Description |\n| --- | --- | --- |\n| `locale` | `\"en\"` | Built-in label locale: `en` or `zh` |\n| `labels` | none | Partial override for UI labels |\n| `themes` | none | Override built-in themes or register custom paper themes |\n| `showGithubLink` | `true` | Show GitHub link on the text-block toolbar |\n| `githubUrl` | `https://github.com/Amirieljs/Amiriel-Vue` | Target URL for the GitHub button |\n| `defaultPaperSize` | `{ width: 720, height: 520 }` | Fallback paper size |\n| `paperSizeLimits` | `{ minWidth: 320, maxWidth: 1600, minHeight: 240, maxHeight: 2200 }` | Paper resizing bounds |\n| `paperResizable` | `true` | Allow users to edit paper width and height |\n\n`AmirielBodyRenderer` accepts the same theme, label, and paper-size props so\nread-only rendering can match the editor.\n\n## Themes\n\nBuilt-in themes: `midnight`, `paper`, `memorial`.\n\n```vue\n<script setup lang=\"ts\">\nimport {\n  AmirielBodyEditor,\n  type AmirielThemeDefinition,\n} from \"@amiriel/vue\";\n\nconst customThemes: AmirielThemeDefinition[] = [\n  {\n    id: \"ocean\",\n    label: \"Ocean dusk\",\n    swatch: \"linear-gradient(135deg, #1e3a5f, #0a1628)\",\n    defaultTextColor: \"white\",\n    vars: {\n      paperBorder: \"rgba(96, 165, 250, 0.28)\",\n      paperBg: \"linear-gradient(180deg, #1a2f4a 0%, #0d1824 100%)\",\n      paperText: \"#dbeafe\",\n      paperDivider: \"rgba(96, 165, 250, 0.2)\",\n      paperAccent: \"rgba(147, 197, 253, 0.88)\",\n    },\n  },\n];\n</script>\n\n<template>\n  <AmirielBodyEditor v-model=\"document\" :themes=\"customThemes\" />\n</template>\n```\n\n## Package Architecture\n\nThis repository is the Vue implementation. The shared framework-agnostic core\nlives in [`@amiriel/core`](https://github.com/Amirieljs/Amiriel-Core), the meta package\n[`amiriel`](https://github.com/Amirieljs/Amiriel) re-exports it, and the React\nimplementation lives in [`@amiriel/react`](https://github.com/Amirieljs/Amiriel-React).\n\n## License\n\nMIT. The Vue editor package is open source and can be used commercially. The\nofficial hosted Amiriel product at [amiriel.com](https://amiriel.com) may still\nprovide paid services around storage, accounts, delivery, hosting, collaboration,\nor other product workflows.\n","readmeFilename":"README.md"}