1.1.0

.github/workflows/deploy-docs.yml

@@ -0,0 +1,62 @@
+name: Deploy Docs
+
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: pnpm
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build docs
+        run: pnpm docs:build
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: docs/.vitepress/dist
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    needs: build
+    runs-on: ubuntu-latest
+    name: Deploy
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -1,6 +1,8 @@
 node_modules
 dist
-*.log
+.DS_Store
+docs/.vitepress/dist
+docs/.vitepress/cache
 .DS_Store
 coverage
 .vscode

DOCS_SETUP.md

@@ -0,0 +1,217 @@
+# QuickForms Documentation Setup
+
+✅ **Complete VitePress documentation site created!**
+
+## What's Been Set Up
+
+### 1. VitePress Installation & Configuration
+- ✅ VitePress and Vue installed as dev dependencies
+- ✅ Beautiful purple-themed configuration with custom branding
+- ✅ Full-text search enabled
+- ✅ Dark mode support
+- ✅ Mobile responsive design
+- ✅ Automatic sidebar navigation
+
+### 2. Documentation Structure
+
+```
+docs/
+├── .vitepress/
+│   ├── config.mts          # VitePress configuration
+│   └── theme/
+│       ├── index.ts        # Theme setup
+│       └── custom.css      # Custom purple branding
+├── guide/                  # User guides
+│   ├── what-is-quickforms.md    ✅ Complete
+│   ├── getting-started.md       ✅ Complete
+│   ├── comparison.md            ✅ Complete
+│   ├── schema-basics.md         ✅ Complete
+│   ├── field-types.md           ✅ Stub
+│   ├── validation.md            ✅ Stub
+│   ├── complex-types.md         📝 TODO
+│   ├── custom-components.md     📝 TODO
+│   ├── theming.md               📝 TODO
+│   ├── custom-validators.md     📝 TODO
+│   ├── i18n.md                  📝 TODO
+│   └── rbac.md                  📝 TODO
+├── api/                    # API reference
+│   ├── form-options.md          ✅ Complete
+│   ├── components.md            📝 TODO
+│   ├── composables.md           📝 TODO
+│   ├── schema-extensions.md     📝 TODO
+│   └── testers-registry.md      📝 TODO
+├── examples/               # Examples
+│   ├── basic-form.md            ✅ Complete
+│   ├── nested-objects.md        📝 TODO
+│   ├── arrays.md                📝 TODO
+│   ├── conditional-fields.md    📝 TODO
+│   ├── custom-validation.md     📝 TODO
+│   └── theming.md               📝 TODO
+├── packages/               # Package docs
+│   ├── core.md                  📝 TODO
+│   ├── vue.md                   📝 TODO
+│   └── quasar.md                📝 TODO
+├── public/                 # Static assets
+├── index.md                ✅ Homepage complete
+└── README.md               ✅ Setup instructions
+```
+
+### 3. Scripts Added to package.json
+
+```json
+{
+  "docs:dev": "vitepress dev docs",       // Start dev server
+  "docs:build": "vitepress build docs",   // Build for production
+  "docs:preview": "vitepress preview docs" // Preview production build
+}
+```
+
+### 4. GitHub Actions Deployment
+- ✅ Workflow file created: `.github/workflows/deploy-docs.yml`
+- ✅ Automatically deploys to GitHub Pages on push to main
+- ✅ Manual deployment trigger available
+
+### 5. Content Migrated from README
+
+The following content has been extracted and organized from your main README:
+
+- **Homepage** - Hero section with features and quick example
+- **What is QuickForms** - Philosophy and use cases
+- **Getting Started** - Installation and first form tutorial
+- **Comparison** - Detailed comparison with JSONForms
+- **Schema Basics** - JSON Schema fundamentals
+- **Form Options API** - Complete API reference
+- **Basic Example** - Working code example with explanations
+
+## Usage
+
+### Development
+
+```bash
+# Start local dev server (with hot reload)
+pnpm docs:dev
+
+# Opens at http://localhost:5175 (or next available port)
+```
+
+### Build & Preview
+
+```bash
+# Build for production
+pnpm docs:build
+
+# Preview production build
+pnpm docs:preview
+```
+
+### Deploy to GitHub Pages
+
+1. **Enable GitHub Pages** in your repository settings:
+   - Go to Settings → Pages
+   - Source: GitHub Actions
+
+2. **Push to main branch** - The workflow will automatically build and deploy
+
+3. **Your docs will be live at:**
+   - `https://<username>.github.io/<repo-name>/`
+   - Example: `https://quickflo.github.io/quickforms/`
+
+## Next Steps
+
+### Content to Add
+
+The following pages are stubbed out or need to be created:
+
+#### High Priority
+1. **`guide/complex-types.md`** - Nested objects, arrays, oneOf/anyOf/allOf
+2. **`guide/custom-validators.md`** - Sync/async validation examples
+3. **`guide/theming.md`** - CSS variables and styling guide
+4. **`api/schema-extensions.md`** - Document all `x-*` attributes
+
+#### Medium Priority
+5. **`api/components.md`** - DynamicForm, field components reference
+6. **`api/composables.md`** - useFormField, useFormContext docs
+7. **`examples/nested-objects.md`** - Working example
+8. **`examples/arrays.md`** - Working example
+9. **`examples/conditional-fields.md`** - oneOf/anyOf examples
+
+#### Lower Priority
+10. **`guide/custom-components.md`** - Component registry and testers
+11. **`guide/i18n.md`** - Internationalization guide
+12. **`guide/rbac.md`** - Role-based access control
+13. **`api/testers-registry.md`** - Tester system reference
+14. **Package docs** - core.md, vue.md, quasar.md
+
+### Extracting Content from README
+
+Your main README is quite comprehensive. Consider extracting these sections:
+
+- **Validation section** → `guide/validation.md` (partially done)
+- **Complex types examples** → `guide/complex-types.md`
+- **Custom validators section** → `guide/custom-validators.md`
+- **Theming section** → `guide/theming.md`
+- **RBAC section** → `guide/rbac.md`
+- **i18n section** → `guide/i18n.md`
+- **Supported JSON Schema features** → `api/schema-extensions.md`
+
+### Updating the Main README
+
+Once docs are complete, simplify the main README to:
+- Brief introduction
+- Quick install and example
+- Link to full documentation
+- Contributing guidelines
+- License
+
+## Features
+
+### What Works Out of the Box
+
+- ✅ **Beautiful UI** - Purple-themed, modern design
+- ✅ **Search** - Full-text search across all docs
+- ✅ **Code highlighting** - Syntax highlighting for Vue, TypeScript, etc.
+- ✅ **Code groups** - Tab-based code examples (pnpm/npm/yarn)
+- ✅ **Navigation** - Automatic sidebar and page navigation
+- ✅ **Mobile responsive** - Works great on all devices
+- ✅ **Dark mode** - Automatic theme switching
+- ✅ **Fast** - Built with Vite, instant HMR
+
+### Customization Options
+
+The theme is already customized with QuickForms branding:
+- Purple color scheme (`#8b5cf6`)
+- Custom hero gradient
+- QuickForms logo support (add `docs/public/logo.svg`)
+
+To further customize, edit:
+- `docs/.vitepress/config.mts` - Site configuration
+- `docs/.vitepress/theme/custom.css` - Styling
+
+## Assets
+
+Add the following assets to `docs/public/`:
+- `logo.svg` - QuickForms logo for navigation
+- Copy `docs/assets/banner.readme.1280x320.png` to `docs/public/assets/` for homepage
+
+## Tips
+
+1. **Keep README concise** - Now that you have docs, the README can be much shorter
+2. **Link to docs** - Add a prominent "Documentation" link in README
+3. **Use VitePress features**:
+   - `::: warning` / `::: tip` / `::: danger` callouts
+   - Code groups for multi-language examples
+   - Custom components in markdown
+4. **Test examples** - Make sure all code examples actually work
+5. **Internal linking** - Use relative paths: `[Link](/guide/page)`
+
+## Maintenance
+
+- Update VitePress: `pnpm add -D vitepress@latest`
+- Check for broken links: VitePress has built-in dead link checking
+- Review analytics: Consider adding Google Analytics or similar
+
+---
+
+**Your docs are ready to go! 🚀**
+
+Run `pnpm docs:dev` to see them in action.