Vue 3 + TypeScript + Vite

Flexible and reusable way to create forms with validation, different input types, and layouts

Features

• Schema-based filter rendering (radio, checkbox)
• Slot-based extensibility for custom filters
• Built-in clear/reset support
• Emits change and clear events
• Popover support with positioning logic
• Show more / limit options logic
• Written in TypeScript
• Fully styleable with Tailwind CSS
• Mobile-friendly and responsive

Documentation

Check out the documentation and live demo here: Live Demo & Docs

Install & Usage

npm i @opengis/form

<template>
  <VsForm :schema="schema" @change="console.log($event.data)" />    
</template>

<script setup lang="ts">
 
 import {ref} from 'vue'  
 import VsForm from "@opengis/form";
 
 const schema = [    
    { name: 'name', label: 'Name', type: 'text', col: 6, conditions: ['number', '==', 2], },
    { name: 'date', label: 'Date', type: 'date', col: 6, time: true, },
    { name: 'file', label: 'File', type: 'file', multiple: true, },
    { name: 'number', label: 'Number', type: 'number', col: 6, }
  ];
</script>

Style

<script src="https://cdn.tailwindcss.com"></script>

Contributions

We welcome contributions! Feel free to open issues, suggest features, or submit pull requests.