@opengis/form/README.md

A flexible and extensible Vue form library

# Vue 3 + TypeScript + Vite

This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).

## 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](https://form.opengis.info)

## Install & Usage

### Install

```bash
npm i @opengis/form
```

### Usage

```vue
<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>
```

### Register

```ts
// main.ts
import VsFilter from '@opengis/form'; 
app.use(VsForm); // Register: VsForm, TextInput, ...
```

### Style

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

---


## Contributions

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