Install with npm or yarn
npm install todovue-searchyarn add todovue-searchImport
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");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>| Name | Type | Default | Description |
|---|---|---|---|
| placeholder | String | "" |
Placeholder input |
| titleButton | String | "" |
Title button |
| results | Array | [] |
Array of results |
| customStyles | Object | See below | Custom styles |
| 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 |
| Name | Description |
|---|---|
| search | Event when the search is executed |
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>Clone the repository and install the dependencies
git clone https://github.com/TODOvue/todovue-search.gitcd todovue-searchInstall the dependencies
yarn installRun the project
yarn demoRun the tests
yarn test:unitRun the linter
yarn lintRun the build It is not necessary to generate build, since it is generated when you do PR to the master branch
yarn build