@opengis/filter 0.0.13 → 0.0.14

package/dist/README.md

@@ -0,0 +1,82 @@
+# Filter Panel
+
+A flexible and extensible filter component system for Vue 3.
+Ideal for building customizable filter UIs with checkbox, radio, or custom slot fields.
+
+---
+
+## 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
+
+### Live Demo & Docs
+
+Check out the documentation and live demo here:
+- [FIlter](https://filter.opengis.info)
+
+
+## Install & Usage
+
+### 1. Install the packag
+```bash
+npm i @opengis/filter
+```
+### 2. Register the component
+```typescript
+// main.ts or main.js
+import { createApp } from 'vue'
+import App from './App.vue'
+import InlineFilter from 'filter'
+
+createApp(App).component('Filter', InlineFilter).mount('#app')
+```
+### 3. Use it in your template
+
+```vue
+
+<template>
+  <filter :schema="schema" @change="filter = $event" @clear="console.log($event.data)">
+    <filter-field :options="options" label="test label" limit=1 name="test" type="checkbox"/>
+  </filter>
+</template>
+
+<script setup lang="ts">
+  import {ref} from 'vue'
+  import {ListItem, Schema} from "./forms.model";
+
+  const options: ListItem[] = [
+    {
+      value: 'is_video',
+      label: 'Video',
+    },
+    {
+      value: 'is_photo',
+      label: 'Photo',
+    },
+  ];
+
+  const schema = ref({
+    name: {type: 'radio', label: 'Наявність фото / відео', options}
+  } as Schema);
+
+  const selectedIcon = ref('')
+  const myIcons = ['home', 'user', 'settings', 'arrow-left', 'check'] // your SVG names
+</script>
+```
+
+---
+
+## Contributions
+We welcome contributions!
+Feel free to open issues, suggest features, or submit pull requests.