{"_id":"@bpleffken/enchanter","_rev":"2-e62d70b449563fab6620ef6af9932fb0","name":"@bpleffken/enchanter","dist-tags":{"latest":"1.4.1"},"versions":{"1.4.0":{"name":"@bpleffken/enchanter","version":"1.4.0","author":{"url":"https://github.com/brunnopleffken","name":"Brunno Pleffken Hosti","email":"brunno.pleffken@outlook.com"},"license":"MIT","_id":"@bpleffken/enchanter@1.4.0","maintainers":[{"name":"brunnopleffken","email":"brunno.pleffken@outlook.com"}],"homepage":"https://github.com/brunnopleffken/enchanter#readme","bugs":{"url":"https://github.com/brunnopleffken/enchanter/issues"},"dist":{"shasum":"ff8339007dbdbea7d37bc1731c79bb41405df8fd","tarball":"https://registry.npmjs.org/@bpleffken/enchanter/-/enchanter-1.4.0.tgz","fileCount":6,"integrity":"sha512-MLSnPNg7U923ylUHugdXREF39arAdxZtpG1Wk8erEwu3GlIo2RE4UqSFtI+s9pv6oxamrRPesdNYIPHpxzqxRA==","signatures":[{"sig":"MEQCIFpA4W+2irme8kGyE0Pf7GGglVZVXYX8SLJ1t5+XsA7MAiAXPGt6DR72DPOe6324G9TTBIbX/lRy9gRjhFTWNz45WQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":11690},"gitHead":"4d48f01af9a2c0a7d4919f4183214ae08864f1f6","_npmUser":{"name":"brunnopleffken","email":"brunno.pleffken@outlook.com"},"repository":{"url":"git+https://github.com/brunnopleffken/enchanter.git","type":"git"},"_npmVersion":"11.7.0","description":"Native JS form wizard plugin for Bootstrap 5","directories":{},"_nodeVersion":"24.9.0","dependencies":{},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/enchanter_1.4.0_1769443672118_0.8783030265627483","host":"s3://npm-registry-packages-npm-production"}},"1.4.1":{"name":"@bpleffken/enchanter","version":"1.4.1","description":"Native JS form wizard plugin for Bootstrap 5","author":{"name":"Brunno Pleffken Hosti","email":"brunno.pleffken@outlook.com","url":"https://github.com/brunnopleffken"},"license":"MIT","dependencies":{},"repository":{"type":"git","url":"git+https://github.com/brunnopleffken/enchanter.git"},"bugs":{"url":"https://github.com/brunnopleffken/enchanter/issues"},"homepage":"https://github.com/brunnopleffken/enchanter#readme","gitHead":"53205c12301a044a334dbdfe19416d95b69d38a9","_id":"@bpleffken/enchanter@1.4.1","_nodeVersion":"24.9.0","_npmVersion":"11.7.0","dist":{"integrity":"sha512-QkG7r341cQ9PvmRZRaXerrMi6CsiJl6lWN9HQjfpCO95giw2onBRkidQL3qmDTj4+DrQKXXHzcT3EyRjWiVTGg==","shasum":"f34a4266222c6a34e6112fa5700702d7e6cd137a","tarball":"https://registry.npmjs.org/@bpleffken/enchanter/-/enchanter-1.4.1.tgz","fileCount":6,"unpackedSize":15934,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCv3kaPATNyBU4Log+HaA0j7lYmiPQq7RNGeE55Z6+ExwIhAMyOiGOkTpaC5JlOmqUsATCbTn/h8ceBAKMsi8RMTab4"}]},"_npmUser":{"name":"brunnopleffken","email":"brunno.pleffken@outlook.com"},"directories":{},"maintainers":[{"name":"brunnopleffken","email":"brunno.pleffken@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/enchanter_1.4.1_1769444154372_0.29824817566928563"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-26T16:07:52.039Z","modified":"2026-01-26T16:15:54.733Z","1.4.0":"2026-01-26T16:07:52.251Z","1.4.1":"2026-01-26T16:15:54.541Z"},"bugs":{"url":"https://github.com/brunnopleffken/enchanter/issues"},"author":{"name":"Brunno Pleffken Hosti","email":"brunno.pleffken@outlook.com","url":"https://github.com/brunnopleffken"},"license":"MIT","homepage":"https://github.com/brunnopleffken/enchanter#readme","repository":{"type":"git","url":"git+https://github.com/brunnopleffken/enchanter.git"},"description":"Native JS form wizard plugin for Bootstrap 5","maintainers":[{"name":"brunnopleffken","email":"brunno.pleffken@outlook.com"}],"readme":"# Enchanter\n\nEnchanter is a lightweight vanilla JS form wizard plugin for Bootstrap 5 — with no dependencies!\n\n![Screenshot 2022-12-02 at 10-41-46 Enchanter](https://user-images.githubusercontent.com/3427344/205306100-7f3c0212-ff7e-495b-9824-01626d69bc69.png)\n\n## Quick Start\n\n### 1. Installation\n\nAdd Enchanter to your `package.json`:\n\n```\nnpm install @bpleffken/enchanter\n```\n\n### 2. Basic Setup\n\nCreate your form with three main components:\n\n**Step 1: Create the navigation tabs**\n```html\n<nav class=\"nav nav-pills nav-fill\" id=\"nav-tab\">\n  <a class=\"nav-link active\" id=\"step1-tab\" data-bs-toggle=\"tab\" href=\"#step1\">Step 1</a>\n  <a class=\"nav-link\" id=\"step2-tab\" data-bs-toggle=\"tab\" href=\"#step2\">Step 2</a>\n  <a class=\"nav-link\" id=\"step3-tab\" data-bs-toggle=\"tab\" href=\"#step3\">Step 3</a>\n</nav>\n```\n\n**Step 2: Add your form content using the `tab-pane` classes**\n```html\n<div class=\"tab-content\" id=\"nav-tabContent\">\n  <div class=\"tab-pane fade show active\" id=\"step1\">\n    <!-- Step 1 content here -->\n  </div>\n  <div class=\"tab-pane fade\" id=\"step2\">\n    <!-- Step 2 content here -->\n  </div>\n  <div class=\"tab-pane fade\" id=\"step3\">\n    <!-- Step 3 content here -->\n  </div>\n</div>\n```\n\n**Step 3: Add navigation buttons**\n```html\n<button type=\"button\" class=\"btn btn-secondary\" data-enchanter=\"previous\">Previous</button>\n<button type=\"button\" class=\"btn btn-primary\" data-enchanter=\"next\">Next</button>\n<button type=\"submit\" class=\"btn btn-primary\" data-enchanter=\"finish\">Finish</button>\n```\n\n**Complete Example:**\n```html\n<form action=\"\" method=\"post\" id=\"registration\">\n  <!-- Navigation tabs -->\n  <nav class=\"nav nav-pills nav-fill\" id=\"nav-tab\">\n    <a class=\"nav-link active\" id=\"step1-tab\" data-bs-toggle=\"tab\" href=\"#step1\">Step 1</a>\n    <a class=\"nav-link\" id=\"step2-tab\" data-bs-toggle=\"tab\" href=\"#step2\">Step 2</a>\n    <a class=\"nav-link\" id=\"step3-tab\" data-bs-toggle=\"tab\" href=\"#step3\">Step 3</a>\n  </nav>\n\n  <!-- Form content -->\n  <div class=\"tab-content\" id=\"nav-tabContent\">\n    <div class=\"tab-pane fade show active\" id=\"step1\">Page 1</div>\n    <div class=\"tab-pane fade\" id=\"step2\">Page 2</div>\n    <div class=\"tab-pane fade\" id=\"step3\">Page 3</div>\n  </div>\n\n  <!-- Navigation buttons -->\n  <button type=\"button\" class=\"btn btn-secondary\" data-enchanter=\"previous\">Previous</button>\n  <button type=\"button\" class=\"btn btn-primary\" data-enchanter=\"next\">Next</button>\n  <button type=\"submit\" class=\"btn btn-primary\" data-enchanter=\"finish\">Finish</button>\n</form>\n```\n\n### 3. Initialize Enchanter\n\nAdd this to your JavaScript file:\n\n```js\n// Pass the form's ID attribute as a parameter\nconst enchanter = new Enchanter('registration');\n```\n\nThat's it! Your form wizard is now ready to use.\n\n## Advanced Features\n\n### Add form validation\n\nValidate form data before moving to the next step using the `onNext` callback:\n\n```js\nconst wizard = new Enchanter('registration', {}, {\n  onNext: () => {\n    // Perform validation here\n    if (!formIsValid()) {\n      return false; // Stay on current step\n    }\n    return true; // Proceed to next step\n  }\n});\n```\n\n**Example with jQuery Validation Plugin:**\n\n> ⚠️ This example requires [jQuery](https://jquery.com/) and [jQuery Validation](https://jqueryvalidation.org/) plugin to be installed.\n\n```js\nconst wizard = new Enchanter('registration', {}, {\n  onNext: () => {\n    if (!$('#registration').valid()) {\n      return false;\n    }\n  }\n});\n```\n\n### Hide the Navigation Bar\n\nHide the step tabs to prevent direct navigation between steps:\n\n```js\n// Pass the form ID as the first parameter\nconst wizard = new Enchanter('registration', {\n  hideNav: true\n});\n```\n\nUse this if you want to:\n- Enforce sequential step navigation\n- Implement a custom progress bar\n- Create a custom title display\n\n## Project status\n\nEnchanter is **battle-tested and production-ready**. It has been actively used in production for **4+ years** across mission-critical applications:\n\n- **[Sinaxys](https://sinaxys.com)** — A healthcare platform handling sensitive data and medical workflows;\n- **[ContaExpert](https://www.contaexpert.com.br)** — An accounting software managing financial records, employees and payrolls for thousands of businesses.\n\nThe codebase is stable, well-maintained, and trusted by companies processing real, mission-critical business data every single day.\n\n## Roadmap\n\nI'm planning these improvements:\n\n- [ ] Merge default options with user options: `new Enchanter('form_id', { option1: 'value', option2: 'value' })`\n- [ ] Built-in form validation without external plugins\n- [ ] Option to disable direct clicks on `.nav-link` (enforce Next/Prev buttons)\n\n## Contributing\n\nFound a bug? Have a suggestion? I'd love to hear from you! Feel free to open an issue or contribute to the project.\n\nAre you using Enchanter? Let me know on GitHub!\n","readmeFilename":"README.md"}