# tag-search-view

> Vue Component to filter tags for Smartphones.

Latest version **0.1.3** (published 2023-09-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install tag-search-view
pnpm add tag-search-view
yarn add tag-search-view
bun add tag-search-view
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2023-09-23 |
| First published | 2023-09-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 72.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | cyclehits |
| Keywords | component, component library, ui library, vue |

## Links

- npm: https://www.npmjs.com/package/tag-search-view
- Repository: https://github.com/cyclehits/tag-search-view
- Homepage: https://github.com/cyclehits/tag-search-view#readme
- Issues: https://github.com/cyclehits/tag-search-view/issues
- npm.io page: https://npm.io/package/tag-search-view

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^3.3.4

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 0.1.3 (latest) — 2023-09-23
- 0.1.2 — 2023-09-20

## README

# Tag-Search-View

Vue Component to filter tags for Smartphones.

## Demo

![](./demo/demo.gif)

## Installation

```bash
npm install --save tag-search-view
```

## Usage

Use in Vue Single-File Components.

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

```bash
npm run lint
```

### Unit Test

```bash
npm run test
npm run test:watch
```

### Launch Demo

```bash
npm run dev
```

### Buld

Bundle the js and css to the `dist` directory.

```bash
npm run build
```

### Icons

- download svg files by [Material Symbols and Icons](https://fonts.google.com/icons)
- convert to webfont by [IcoMoon](https://icomoon.io/)

#### 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           |

## License

[The MIT License](http://opensource.org/licenses/MIT)

---
_Source: https://npm.io/package/tag-search-view · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._