{"_id":"@7f51-utilities/css-form-disable","name":"@7f51-utilities/css-form-disable","dist-tags":{"dev":"1.0.0-beta.1","latest":"1.0.0-beta.1"},"versions":{"1.0.0-beta.1":{"name":"@7f51-utilities/css-form-disable","version":"1.0.0-beta.1","description":"Framework-agnostic CSS form validation with automatic submit button disabling. Works with Vanilla JS, Vue, React, or any framework.","main":"dist/index.js","module":"dist/index.esm.js","types":"types/index.d.ts","style":"src/styles/css/form-disable.css","sass":"src/styles/scss/index.scss","exports":{".":{"types":"./types/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.js","style":"./src/styles/css/form-disable.css"},"./css":"./src/styles/css/form-disable.css","./scss":"./src/styles/scss/index.scss","./purge":"./src/build/purge-scanner.js","./vite":"./src/build/vite-plugin.js"},"scripts":{"build":"npm run build:css && npm run build:dist","build:css":"node -e \"const SassBuildTool = require('./src/build/sass-config'); new SassBuildTool().build()\"","build:dist":"node tools/build-dist.js","build:purge":"node tools/purge.js","purge":"node tools/purge.js","watch":"chokidar 'src/styles/scss/**/*.scss' -c 'npm run build:css'","dev":"npm run watch","test":"echo \"Test files available in tests/: vanilla-example.html (any framework), test.html (CSS), vue-test.html (Vue integration)\"","serve":"echo \"Use: python -m http.server 8000 or similar to serve test files from tests/ directory\"","prepublishOnly":"npm run build","publish-check":"npm run build && npm publish --dry-run","release":"semantic-release"},"devDependencies":{"sass":"^1.69.0","glob":"^10.3.0","chokidar-cli":"^3.0.0","@semantic-release/changelog":"^6.0.3","@semantic-release/commit-analyzer":"^12.0.0","@semantic-release/git":"^10.0.1","@semantic-release/github":"^10.0.3","@semantic-release/npm":"^12.0.0","@semantic-release/release-notes-generator":"^12.0.0","semantic-release":"^23.0.8"},"peerDependencies":{"vue":"^3.0.0"},"peerDependenciesMeta":{"vue":{"optional":true}},"keywords":["css","form","validation","vue","react","vanilla-js","framework-agnostic","submit-button","disable","scss","accessibility","ux"],"author":{"name":"7f51-utilities"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/7f51-utilities/css-form-disable.git"},"bugs":{"url":"https://github.com/7f51-utilities/css-form-disable/issues"},"homepage":"https://github.com/7f51-utilities/css-form-disable#readme","publishConfig":{"access":"public"},"_id":"@7f51-utilities/css-form-disable@1.0.0-beta.1","gitHead":"422ad7914eb65e81f58af35626bdedf05223e0ae","_nodeVersion":"20.19.1","_npmVersion":"10.9.2","dist":{"integrity":"sha512-ZXSYneWVdUsTm52JtZJXFOw5hp4TjEBJZekRUO/Yvonxeoxf+rLQKpNen4CaznD93tHq1DnaMYUrD2qqK1hO0g==","shasum":"ffc76ba177dc325d214cd2df9a421449b19a90a1","tarball":"https://registry.npmjs.org/@7f51-utilities/css-form-disable/-/css-form-disable-1.0.0-beta.1.tgz","fileCount":29,"unpackedSize":66899,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDU504F8BGsT7zuAxlKKVJ7R9O198W5PGCHeCtd3zxBqAIhAPpBw3Mxd3xaupaEU4z/AOj5NssHrN3LT4gx2d4dOOLi"}]},"_npmUser":{"name":"7f51-utilities","email":"c.ivanbandilla+7f51-utilities@gmail.com"},"directories":{},"maintainers":[{"name":"7f51-utilities","email":"c.ivanbandilla+7f51-utilities@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/css-form-disable_1.0.0-beta.1_1748238037097_0.1634890842872745"},"_hasShrinkwrap":false}},"time":{"created":"2025-05-26T05:40:37.038Z","1.0.0-beta.1":"2025-05-26T05:40:37.272Z","modified":"2025-05-26T05:40:37.485Z"},"maintainers":[{"name":"7f51-utilities","email":"c.ivanbandilla+7f51-utilities@gmail.com"}],"description":"Framework-agnostic CSS form validation with automatic submit button disabling. Works with Vanilla JS, Vue, React, or any framework.","homepage":"https://github.com/7f51-utilities/css-form-disable#readme","keywords":["css","form","validation","vue","react","vanilla-js","framework-agnostic","submit-button","disable","scss","accessibility","ux"],"repository":{"type":"git","url":"git+https://github.com/7f51-utilities/css-form-disable.git"},"author":{"name":"7f51-utilities"},"bugs":{"url":"https://github.com/7f51-utilities/css-form-disable/issues"},"license":"MIT","readme":"# CSS Form Disable\n\nA lightweight, **framework-agnostic** CSS package for automatically disabling form submit buttons when forms contain invalid fields. Works with **pure CSS** (no JavaScript required) and provides optional Vue.js integration with customizable SCSS and class purging capabilities.\n\n## ✨ Features\n\n- 🚀 **Pure CSS** - Works without JavaScript in any framework\n- 🎯 **Framework Agnostic** - Works with Vanilla JS, Vue, React, Angular, Laravel, etc.\n- 🔧 **Customizable** - Configure which classes to include/exclude\n- 🧹 **Tree Shakable** - Purge unused classes for optimal bundle size\n- 🎨 **Themeable** - Multiple pre-built themes (minimal, modern)\n- ⚡ **Vue Integration** - Optional Vue.js plugin for enhanced features\n- 📱 **Modern CSS** - Uses `:has()` selector for advanced form detection\n- 🛡️ **Exception Handling** - Respects `novalidate` attribute and logout forms\n\n## 🚀 Quick Start\n\n### Installation\n\n```bash\nnpm install @7f51-utilities/css-form-disable\n```\n\n### Usage Options\n\n#### 1. Pure CSS (Any Framework/Vanilla JS)\n\nSimply include the CSS file and it works automatically:\n\n```html\n<link rel=\"stylesheet\" href=\"node_modules/@7f51-utilities/css-form-disable/src/styles/css/form-disable.css\">\n\n<form>\n  <input type=\"email\" required>\n  <input type=\"password\" required minlength=\"8\">\n  <!-- Automatically disabled when form has invalid fields -->\n  <button type=\"submit\">Submit</button>\n</form>\n```\n\n#### 2. CSS Import (Webpack/Vite/Build Tools)\n\n```css\n@import '@7f51-utilities/css-form-disable/css';\n```\n\nOr in JavaScript:\n\n```javascript\nimport '@7f51-utilities/css-form-disable/css'\n```\n\n#### 3. Vue Plugin (Enhanced Features)\n\n```javascript\nimport { createApp } from 'vue'\nimport VueFormDisable from '@7f51-utilities/css-form-disable'\n\nconst app = createApp({})\n\n// Basic usage\napp.use(VueFormDisable)\n\n// With options\napp.use(VueFormDisable, {\n  theme: 'minimal',\n  customSelectors: ['.my-submit-btn', '[data-action=\"save\"]'],\n  respectNoValidate: true\n})\n```\n\n#### 3. SCSS Customization\n\n```scss\n// Configure before importing\n$form-disable-classes: (\n  submit: '.btn-submit',\n  form-submit: '.form-submit-btn'\n  // Only include classes you actually use\n);\n\n$form-disable-include-wire: false; // Disable Livewire support\n$form-disable-include-role: false; // Disable role-button support\n\n@import 'vue-form-disable/src/styles/scss/index';\n```\n\n## 📖 How It Works\n\nThe package uses modern CSS `:has()` selectors to detect invalid form fields and automatically disable submit buttons:\n\n```css\n/* Disables submit buttons when form has invalid fields */\nform:has(*:invalid, *:out-of-range):not([novalidate]) button[type=\"submit\"] {\n  pointer-events: none !important;\n  cursor: not-allowed !important;\n}\n\n/* Global classes (when no novalidate forms exist) */\n:root:not(:has(form[novalidate])):has(*:invalid, *:out-of-range) .submit {\n  pointer-events: none !important;\n  cursor: not-allowed !important;\n}\n```\n\n## 🎯 Supported Selectors\n\n### Default Classes\n- `.submit`\n- `.submit-btn` \n- `.submit-button`\n- `.submit-link`\n- `.form-submit`\n\n### Framework Integration\n- `[wire:click*=\"validate\"]` (Livewire)\n- `[wire:click*=\"submit\"]` (Livewire)\n- `[wire:click*=\"save\"]` (Livewire)\n- `[role=\"button\"][data-submit]` (Accessible buttons)\n- `[data-submit]` (Data attributes)\n\n### Form Elements (Always Included)\n- `button[type=\"submit\"]`\n- `button:not([type])` (buttons without type are submit by default)\n- `input[type=\"submit\"]`\n\n## 🛡️ Exception Handling\n\n### Exception Classes\nAdd these classes to prevent disabling:\n- `.no-disable`\n- `.ndsbl` \n- `.form-disable-ignore`\n\n### Exception Forms\nThese forms are automatically excluded:\n- `form[action*=\"logout\"]`\n- `form[action*=\"signout\"]`\n- `form[action*=\"sign-out\"]`\n- `form[novalidate]`\n\n### Example\n\n```html\n<!-- This submit button will be disabled when email is invalid -->\n<form>\n  <input type=\"email\" required>\n  <button type=\"submit\">Submit</button>\n</form>\n\n<!-- This form is ignored (novalidate) -->\n<form novalidate>\n  <input type=\"email\" required>\n  <button type=\"submit\">Submit</button> <!-- Never disabled -->\n</form>\n\n<!-- This button is ignored (exception class) -->\n<form>\n  <input type=\"email\" required>\n  <button type=\"submit\" class=\"no-disable\">Force Submit</button>\n</form>\n```\n\n## 🔧 Build Scripts\n\n```bash\n# Build all CSS\nnpm run build\n\n# Build with purging\nnpm run build:purge\n\n# Watch for changes\nnpm run watch\n\n# Development mode\nnpm run dev\n```\n\n## 🌐 Browser Support\n\n- ✅ Chrome 105+\n- ✅ Firefox 121+  \n- ✅ Safari 16.4+\n- ✅ Edge 105+\n\n> **Note**: Requires `:has()` selector support. For older browsers, consider using the JavaScript fallback or a polyfill.","readmeFilename":"README.md","_rev":"1-455a9348e9e2d6aeb6eda31fac601e99"}