Vue 3 components for poulpinou-django: a mail-template editor
- Vue 49.5%
- TypeScript 36.4%
- JavaScript 13.4%
- HTML 0.7%
| Filename | Latest commit message | Latest commit date |
|---|---|---|
renovate-bot
e1c0875948
This PR contains the following updates: | Update | Change | |---|---| | lockFileMaintenance | All locks refreshed | 🔧 This Pull Request updates lock files to use the latest dependency versions. --- ### Configuration 📅 **Schedule**: (UTC) - Branch creation - "before 6am on monday" - Automerge - At any time (no schedule defined) 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 👻 **Immortal**: This PR will be recreated if closed unmerged. Get [config help](https://github.com/renovatebot/renovate/discussions) if that's undesired. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0NC4xOTguMyIsInVwZGF0ZWRJblZlciI6IjQ0LjE5OC4zIiwidGFyZ2V0QnJhbmNoIjoibWFzdGVyIiwibGFiZWxzIjpbImRlcGVuZGVuY2llcyJdfQ==--> Reviewed-on: #8 |
||
| .forgejo | ||
| dev | ||
| src | ||
| .gitignore | ||
| eslint.config.js | ||
| index.html | ||
| LICENSE | ||
| package.json | ||
| pnpm-lock.yaml | ||
| pnpm-workspace.yaml | ||
| README.md | ||
| renovate.json | ||
| tsconfig.json | ||
| vite.config.ts | ||
| vitest.config.ts | ||
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.