todovue-search
v1.2.0
Published
Component search created for the TodoVue blog
Downloads
14
Maintainers
Readme
TODOvue Search
Table of Contents
Installation
Install with npm or yarn
npm install todovue-search
yarn add todovue-search
Import
import { TvSearch } from 'todovue-search'
You can also import it directly in the main.js file, so you don't have to import it in the pages
import { createApp } from "vue";
import App from "./App.vue";
import TvSearch from "todovue-search";
const app = createApp(App);
app.component("TvSearch", TvSearch);
app.mount("#app");
Usage
You can open the search component with Ctrl + f or Command + f
<template>
<tv-search
placeholder="Search blog..."
titleButton="Search"
:results="results"
/>
</template>
<script>
import TvSearch from "tv-search";
export default {
components: {
TvSearch,
},
setup() {
const results = [
{
id: 1,
title: "Blogs one",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
},
...
];
return {
results,
};
}
}
</script>
Props
| Name | Type | Default | Description |
|--------------|--------|----------------------------|-------------------|
| placeholder | String | ""
| Placeholder input |
| titleButton | String | ""
| Title button |
| results | Array | []
| Array of results |
| customStyles | Object | See below | Custom styles |
customStyles
| Name | Type | Default | Description |
|-------------|--------|-------------|-------------------------|
| bgBody | String | "#0E131F"
| Background color body |
| bgInput | String | "#B9C4DF"
| Background color input |
| bgButton | String | "#Ef233C"
| Background color button |
| colorButton | String | "#F4FAFF"
| Color button |
Events
| Name | Description | |--------|-----------------------------------| | search | Event when the search is executed |
Customize
You can customize the component by customStyles, you can see the props section to see the available options
const customStyles = {
bgBody: "#0A4539",
bgInput: "#284780",
bgButton: "#80286E",
colorButton: "#D5B7B7",
};
<template>
<tv-search
placeholder="Search blog..."
titleButton="Search"
:results="results"
:customStyles="customStyles"
/>
</template>
<script>
import { ref } from "vue";
import TvSearch from "tv-search";
export default {
components: {
TvSearch,
},
setup() {
const results = [
{
id: 1,
title: "Blogs one",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
},
...
];
const customStyles = ref({
bgBody: "#0A4539",
bgInput: "#284780",
bgButton: "#80286E",
colorButton: "#D5B7B7",
});
return {
results,
customStyles,
};
}
}
</script>
Development
Clone the repository and install the dependencies
git clone https://github.com/TODOvue/todovue-search.git
cd todovue-search
Install the dependencies
yarn install
Run the project
yarn demo
Run the tests
yarn test:unit
Run the linter
yarn lint
Run the build It is not necessary to generate build, since it is generated when you do PR to the master branch
yarn build