0.1.3 • Published 2 years ago
tag-search-view v0.1.3
Tag-Search-View
Vue Component to filter tags for Smartphones.
Demo

Installation
npm install --save tag-search-viewUsage
Use in Vue Single-File Components.
<script setup lang="ts">
import { ref } from "vue";
import { TagSearchView } from "tag-search-view";
import "tag-search-view/dist/tag-search-view.css";
const value = ref([
{
label: "apple",
value: "1"
}
]);
const options = ref([
{
label: "apple",
value: "1"
},
{
label: "apricot",
value: "2"
},
{
label: "avocado",
value: "3"
}
]);
</script>
<temlpates>
<TagSearchView :options="options" v-model="value" placeholder="Search..." />
</templates>Props
| Name | Type | Default | Description |
|---|---|---|---|
| v-model (required) | Item[] | - | two-way binding value. |
| options | Item[] | - | choices in this component. |
| placeholder | string | placeholder of text field. |
Interface
Item
| Property | Type |
|---|---|
| label | string |
| value | string |
Dependencies
| Module | Version |
|---|---|
| vue | 3.3.4 |
| material-symbols | 0.11.0 |
Setup
Development
Lint
npm run lintUnit Test
npm run test
npm run test:watchLaunch Demo
npm run devBuld
Bundle the js and css to the dist directory.
npm run buildIcons
- download svg files by Material Symbols and Icons
- convert to webfont by IcoMoon
Settings (Material Symbols)
| Name | Fill | Weight | Grade | Optical Size |
|---|---|---|---|---|
| add | 0 | 400 | 0 | 24 |
| check_circle | 1 | 400 | 0 | 24 |
| circle | 0 | 200 | 0 | 24 |
| close | 0 | 400 | 0 | 24 |
| search | 0 | 400 | 0 | 24 |