@opengis/filter 0.0.17 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +32 -40
- package/filter.js +407 -407
- package/filter.umd.cjs +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -18,65 +18,57 @@ Ideal for building customizable filter UIs with checkbox, radio, or custom slot
|
|
|
18
18
|
- Mobile-friendly and responsive
|
|
19
19
|
|
|
20
20
|
---
|
|
21
|
-
## Documentation
|
|
22
|
-
|
|
23
|
-
### Live Demo & Docs
|
|
24
21
|
|
|
25
|
-
|
|
26
|
-
- [FIlter](https://filter.opengis.info)
|
|
22
|
+
## Documentation
|
|
27
23
|
|
|
24
|
+
Check out the documentation and live demo here: [Live Demo & Docs](https://filter.opengis.info)
|
|
28
25
|
|
|
29
26
|
## Install & Usage
|
|
30
27
|
|
|
31
|
-
###
|
|
28
|
+
### Install
|
|
29
|
+
|
|
32
30
|
```bash
|
|
33
31
|
npm i @opengis/filter
|
|
34
32
|
```
|
|
35
|
-
### 2. Register the component
|
|
36
|
-
```typescript
|
|
37
|
-
// main.ts or main.js
|
|
38
|
-
import { createApp } from 'vue'
|
|
39
|
-
import App from './App.vue'
|
|
40
|
-
import InlineFilter from 'filter'
|
|
41
|
-
|
|
42
|
-
createApp(App).component('Filter', InlineFilter).mount('#app')
|
|
43
|
-
```
|
|
44
|
-
### 3. Use it in your template
|
|
45
33
|
|
|
46
|
-
|
|
34
|
+
### Usage
|
|
47
35
|
|
|
36
|
+
```vue
|
|
48
37
|
<template>
|
|
49
|
-
<
|
|
50
|
-
<filter-field :options="options" label="test label" limit=1 name="test" type="checkbox"/>
|
|
51
|
-
</filter>
|
|
38
|
+
<VsFilter :schema="schema" @change="console.log($event.data)" />
|
|
52
39
|
</template>
|
|
53
40
|
|
|
54
41
|
<script setup lang="ts">
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
label: 'Photo',
|
|
66
|
-
},
|
|
67
|
-
];
|
|
68
|
-
|
|
69
|
-
const schema = ref({
|
|
70
|
-
name: {type: 'radio', label: 'Наявність фото / відео', options}
|
|
71
|
-
} as Schema);
|
|
72
|
-
|
|
73
|
-
const selectedIcon = ref('')
|
|
74
|
-
const myIcons = ['home', 'user', 'settings', 'arrow-left', 'check'] // your SVG names
|
|
42
|
+
|
|
43
|
+
import {ref} from 'vue'
|
|
44
|
+
import VsFilter from "@opengis/filter";
|
|
45
|
+
|
|
46
|
+
// import { Filter, FilterField } from '@opengis/filter'; // component import
|
|
47
|
+
|
|
48
|
+
const schema = ref([
|
|
49
|
+
{name: 'media', type: 'checkbox', label: 'Media type', options: [...] },
|
|
50
|
+
{name: 'source', type: 'radio', label: 'Source', options: [...] }
|
|
51
|
+
]);
|
|
75
52
|
</script>
|
|
76
53
|
```
|
|
77
54
|
|
|
55
|
+
### Register
|
|
56
|
+
|
|
57
|
+
```ts
|
|
58
|
+
// main.ts
|
|
59
|
+
import VsFilter from '@opengis/filter';
|
|
60
|
+
app.use(VsFilter); // Register: Filter, VsFilter, FilterField
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
### Style
|
|
64
|
+
|
|
65
|
+
```html
|
|
66
|
+
<script src="https://cdn.tailwindcss.com"></script>
|
|
67
|
+
```
|
|
68
|
+
|
|
78
69
|
---
|
|
79
70
|
|
|
80
71
|
## Contributions
|
|
72
|
+
|
|
81
73
|
We welcome contributions!
|
|
82
74
|
Feel free to open issues, suggest features, or submit pull requests.
|