@gilles/poulpinou-vue (0.1.0-dev.25)
Installation
@gilles:registry=npm config set @gilles:registry=npm install @gilles/poulpinou-vue@0.1.0-dev.25"@gilles/poulpinou-vue": "0.1.0-dev.25"About this package
poulpinou-vue
Vue 3 components for poulpinou-django:
a mail-template editor (subject, WYSIWYG body, variable chips,
attachments) talking to poulpinou's own [api] extra -- sandboxed
Jinja2 ({{ var }}, {% if %}, {% for %}), not a hand-rolled
regex substitution.
Installation
npm install poulpinou-vue
import { createPoulpinouClient, MailTemplateEditor } from "poulpinou-vue";
import "poulpinou-vue/style.css"; // Quill's own toolbar/editor styling
const client = createPoulpinouClient({ baseURL: "/poulpinou" });
<MailTemplateEditor :client="client" />
That's the whole integration: the component fetches every mail type poulpinou's registry knows about (key, label, variables) from the API itself, so there's no hardcoded list of keys to keep in sync on the frontend side.
Components
MailTemplateEditor: the full editor -- a tab per registered mail type, subject field, variable chips (amanyvariable inserts a ready-to-edit{% for %}skeleton, not a bare{{ var }}), WYSIWYG body editor, "revert to default" button, attachments (list/upload/ delete).WysiwygEditor: the underlying rich-text editor (Quill), exported on its own too in case a host page wants to build its own layout around just the editing widget.
Theming
Colors are plain CSS custom properties with sensible defaults, not a hard dependency on any specific design system:
| Variable | Default |
|---|---|
--pv-ink |
#111827 |
--pv-slate |
#6b7280 |
--pv-paper |
#f9fafb |
--pv-border |
#d1d5db |
--pv-red |
#dc2626 (active tab, destructive actions) |
Define any of them on an ancestor element to theme the editor; leave them undefined and it still renders legibly.
Development
pnpm install
pnpm run dev # demo page, proxies /poulpinou to a local Django instance on :8000
pnpm run test:unit # vitest + msw, no real backend needed
pnpm run lint
pnpm run build
License
MIT, see LICENSE.
Dependencies
Dependencies
| ID | Version |
|---|---|
| axios | ^1.7.7 |
| quill | 2.0.2 |
Development dependencies
| ID | Version |
|---|---|
| @typescript-eslint/parser | ^8.71.1 |
| @vitejs/plugin-vue | ^6.0.0 |
| @vitest/coverage-v8 | ^5.0.3 |
| @vue/test-utils | ^2.4.0 |
| @vue/tsconfig | ^0.9.0 |
| eslint | ^10.0.0 |
| eslint-plugin-vue | ^10.0.0 |
| jsdom | ^30.0.0 |
| msw | ^3.0.0 |
| typescript | ^6.0.0 |
| vite | ^8.0.0 |
| vitest | ^5.0.0 |
| vue | ^3.5.0 |
| vue-eslint-parser | ^10.4.1 |
| vue-tsc | ^3.0.0 |
Peer dependencies
| ID | Version |
|---|---|
| vue | ^3.5.0 |