@opengis/filter 0.0.1 → 0.0.2

package/README.md

@@ -1,148 +1,82 @@
-# 📊 TableCRM
+# Filter Panel
 
-A reusable Vue 3 component for rendering data tables with external `<table>` markup. Supports automatic data loading, pagination, sorting, and column formatting (`text`, `badge`, `date`, `number`, `custom`).
+A flexible and extensible filter component system for Vue 3.
+Ideal for building customizable filter UIs with checkbox, radio, or custom slot fields.
 
 ---
 
-## 🚀 Features
+## Features
 
-- Uses external HTML `<table>` structure
-- Automatically loads data from API
-- Supports sorting and pagination
-- Column formatting: `text`, `number`, `date`, `badge`, `custom`
-- Syncs with URL-like query params: `page`, `limit`, `sort`, `filter`
-- Handles loading, empty, and error states
-- Built with TypeScript + Composition API
+- 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
 
-## 💾 Installation
+### Live Demo & Docs
 
+Check out the documentation and live demo here:
+- [FIlter](https://filter.opengis.info)
+
+
+## Install & Usage
+
+### 1. Install the packag
 ```bash
-npm install @your-org/table-crm
+npm i @opengis/filter
 ```
-
-```ts
-// main.ts
+### 2. Register the component
+```typescript
+// main.ts or main.js
 import { createApp } from 'vue'
 import App from './App.vue'
-import TableCRM from '@your-org/table-crm'
+import InlineFilter from 'filter'
 
-createApp(App).component('TableCRM', TableCRM).mount('#app')
+createApp(App).component('Filter', InlineFilter).mount('#app')
 ```
-
----
-
-## ✅ Example Usage
+### 3. Use it in your template
 
 ```vue
+
 <template>
-  <TableCRM
-    url="/api/products"
-    :columns="columns"
-    v-model:page="page"
-    v-model:limit="limit"
-    v-model:sort="sort"
-    :filters="filters"
-  >
-    <table class="w-full text-sm">
-      <thead>
-        <tr>
-          <th>ID</th>
-          <th>Name</th>
-          <th>Price</th>
-          <th>Status</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="row in rows" :key="row.id">
-          <td>{{ row.id }}</td>
-          <td>{{ row.name }}</td>
-          <td>{{ row.price }}</td>
-          <td>
-            <span :class="badgeClass(row.status)">
-              {{ row.status }}
-            </span>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </TableCRM>
+  <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 type { Column } from '@your-org/table-crm'
-
-const page = ref(1)
-const limit = ref(10)
-const sort = ref({ field: 'name', direction: 'asc' })
-const filters = ref({})
-
-const columns: Column[] = [
-  { name: 'id', label: 'ID', type: 'text' },
-  { name: 'name', label: 'Name', type: 'text', sortable: true },
-  { name: 'price', label: 'Price', type: 'number', sortable: true },
-  { name: 'status', label: 'Status', type: 'badge' },
-]
-
-function badgeClass(status: string) {
-  return status === 'active' ? 'text-green-600' : 'text-gray-400'
-}
+  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>
 ```
 
 ---
 
-## ⚙️ Props
-
-| Prop         | Type                        | Description                              |
-|--------------|-----------------------------|------------------------------------------|
-| `url`        | `string`                    | API endpoint for fetching table data     |
-| `columns`    | `Column[]`                  | List of column definitions               |
-| `filters`    | `Record<string, any>`       | Active filters to apply to the request   |
-| `page`       | `number` (v-model)          | Current page                             |
-| `limit`      | `number` (v-model)          | Items per page                           |
-| `sort`       | `{ field, direction }` (v-model) | Current sort field and direction   |
-
----
-
-## 📐 Column Format
-
-```ts
-type Column = {
-  name: string              // field name from the API response
-  label: string             // column header label
-  type?: 'text' | 'number' | 'date' | 'badge' | 'custom'
-  sortable?: boolean        // whether this column is sortable
-}
-```
-
----
-
-## 📡 API Response Format
-
-The component expects the API to return:
-
-```json
-{
-  "data": [ /* array of row objects */ ],
-  "total": 100
-}
-```
-
----
-
-## 📤 Events
-
-| Event             | Triggered When                     |
-|------------------|-------------------------------------|
-| `update:page`     | Page number changes                |
-| `update:limit`    | Page size (limit) changes          |
-| `update:sort`     | Sorting field or direction changes |
-
----
-
-## 🧩 Use Cases
-
-Perfect for admin panels, CRM systems, product catalogs, user/order tables, etc.
+## Contributions
+We welcome contributions!
+Feel free to open issues, suggest features, or submit pull requests.