Skip to content

Commit d00f62b

Browse files
basarozcanbasarozcan
committed
initial commit
0 parents  commit d00f62b

17 files changed

+29192
-0
lines changed

‎.browserslistrc‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
current node
2+
last 2 versions and > 2%
3+
ie > 10

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules/

‎README.md‎

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
2+
<!-- PROJECT LOGO -->
3+
<br />
4+
<p align="center">
5+
<a href="https://github.com/basarozcan/vue-tailwindcss-typeahead">
6+
<img src="images/logo.png" alt="Logo" width="80" height="80">
7+
</a>
8+
9+
<h3 align="center">vue-tailwindcss-typeahead</h3>
10+
11+
<p align="center">
12+
Just another vue&tailwind component that present you complete typeahead/autocomplete input.
13+
<br />
14+
<a href="https://github.com/basarozcan/vue-tailwindcss-typeahead"><strong>Explore the docs »</strong></a>
15+
<br />
16+
<br />
17+
<a href="https://github.com/basarozcan/vue-tailwindcss-typeahead">View Demo</a>
18+
·
19+
<a href="https://github.com/basarozcan/vue-tailwindcss-typeahead/issues">Report Bug</a>
20+
·
21+
<a href="https://github.com/basarozcan/vue-tailwindcss-typeahead/issues">Request Feature</a>
22+
</p>
23+
</p>
24+
25+
26+
27+
<!-- TABLE OF CONTENTS -->
28+
## Table of Contents
29+
30+
* [About the Project](#about-the-project)
31+
* [Built With](#built-with)
32+
* [Getting Started](#getting-started)
33+
* [Prerequisites](#prerequisites)
34+
* [Installation](#installation)
35+
* [Usage](#usage)
36+
* [Roadmap](#roadmap)
37+
* [Contributing](#contributing)
38+
* [License](#license)
39+
* [Contact](#contact)
40+
41+
42+
43+
<!-- ABOUT THE PROJECT -->
44+
## About The Project
45+
<p align="center">
46+
<img src="images/component.png" alt="component" >
47+
</p>
48+
I can't find any independent typeahead/autocomplete input component. All of them comes with UI libraries.
49+
50+
51+
### Built With
52+
53+
* Vue
54+
* Tailwindcss
55+
56+
<!-- GETTING STARTED -->
57+
## Getting Started
58+
59+
To get a local copy up and running follow these simple steps.
60+
61+
### Installation
62+
63+
1. Get package from npm
64+
```sh
65+
npm install vue-tailwindcss-typeahead
66+
```
67+
68+
69+
70+
<!-- USAGE EXAMPLES -->
71+
## Usage
72+
73+
74+
### Call the component on parent
75+
```javascript
76+
<vue-tailwindcsscss-typeahead
77+
:lists="list"
78+
@selected="selectedData"
79+
:ignoredList="selectedItemIds"
80+
:clearInputWhenClicked="false"
81+
:inputClass="['w-full','px-3','py-2','border','border-gray-400','rounded-lg','outline-none','focus:shadow-outline']"
82+
placeholder="Please write a city name">
83+
</vue-tailwindcsscss-typeahead>
84+
```
85+
86+
### Code on parent component
87+
```javascript
88+
<script>
89+
import Vue from 'vue';
90+
import VueTailwindcssTypeahead from '@/vue-tailwindcsscss-typeahead.vue';
91+
92+
export default Vue.extend({
93+
name: 'ParentComponent',
94+
components: {
95+
VueTailwindcssTypeahead
96+
},
97+
data() {
98+
return {
99+
list: [
100+
{
101+
id: 1,
102+
name: "Amsterdam",
103+
},
104+
{
105+
id: 2,
106+
name: "Berlin",
107+
},
108+
{
109+
id: 3,
110+
name: "Istanbul",
111+
},
112+
],
113+
selectedItemIds: [],
114+
selectedItem: null
115+
};
116+
},
117+
methods: {
118+
selectedData(value) {
119+
this.selectedItem = value
120+
},
121+
},
122+
});
123+
</script>
124+
```
125+
126+
### Properties
127+
| props | description | Type |
128+
|-----------------------|---------------------------------------------------------------------------------------------------------------|---------|
129+
| lists | pass an array of data. id and name attribute must be passed | Array |
130+
| ignoredList | selected item's id will be passed to this variable and this item will not be showed if user want to change it | Array |
131+
| clearInoutWhenClicked | If this is set to true, input will be cleared after selection. Best for multiple selections | Boolean |
132+
| inputClass | Tailwindcss classes can be passed to change input's class | Array |
133+
| placeholder | placeholder text for input | String |
134+
| @selected | point method on parent component for custom operations | |
135+
136+
137+
<!-- ROADMAP -->
138+
## Roadmap
139+
140+
See the [open issues](https://github.com/basarozcan/vue-tailwindcss-typeahead/issues) for a list of proposed features (and known issues).
141+
142+
143+
144+
<!-- CONTRIBUTING -->
145+
## Contributing
146+
147+
Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**.
148+
149+
1. Fork the Project
150+
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
151+
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
152+
4. Push to the Branch (`git push origin feature/AmazingFeature`)
153+
5. Open a Pull Request
154+
155+
156+
157+
<!-- LICENSE -->
158+
## License
159+
160+
Distributed under the MIT License. See `LICENSE` for more information.
161+
162+
163+
164+
<!-- CONTACT -->
165+
## Contact
166+
167+
Twitter - [@basarozcan](https://twitter.com/basarozcan)
168+

‎babel.config.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
const devPresets = ['@vue/babel-preset-app'];
2+
const buildPresets = ['@babel/preset-env'];
3+
module.exports = {
4+
presets: (process.env.NODE_ENV === 'development' ? devPresets : buildPresets),
5+
};

‎build/rollup.config.js‎

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
// rollup.config.js
2+
import fs from 'fs';
3+
import path from 'path';
4+
import vue from 'rollup-plugin-vue';
5+
import alias from '@rollup/plugin-alias';
6+
import commonjs from '@rollup/plugin-commonjs';
7+
import replace from '@rollup/plugin-replace';
8+
import babel from 'rollup-plugin-babel';
9+
import { terser } from 'rollup-plugin-terser';
10+
import minimist from 'minimist';
11+
12+
// Get browserslist config and remove ie from es build targets
13+
const esbrowserslist = fs.readFileSync('./.browserslistrc')
14+
.toString()
15+
.split('\n')
16+
.filter((entry) => entry && entry.substring(0, 2) !== 'ie');
17+
18+
const argv = minimist(process.argv.slice(2));
19+
20+
const projectRoot = path.resolve(__dirname, '..');
21+
22+
const baseConfig = {
23+
input: 'src/entry.js',
24+
plugins: {
25+
preVue: [
26+
alias({
27+
resolve: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
28+
entries: {
29+
'@': path.resolve(projectRoot, 'src'),
30+
},
31+
}),
32+
],
33+
replace: {
34+
'process.env.NODE_ENV': JSON.stringify('production'),
35+
'process.env.ES_BUILD': JSON.stringify('false'),
36+
},
37+
vue: {
38+
css: true,
39+
template: {
40+
isProduction: true,
41+
},
42+
},
43+
babel: {
44+
exclude: 'node_modules/**',
45+
extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
46+
},
47+
},
48+
};
49+
50+
// ESM/UMD/IIFE shared settings: externals
51+
// Refer to https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
52+
const external = [
53+
// list external dependencies, exactly the way it is written in the import statement.
54+
// eg. 'jquery'
55+
'vue',
56+
];
57+
58+
// UMD/IIFE shared settings: output.globals
59+
// Refer to https://rollupjs.org/guide/en#output-globals for details
60+
const globals = {
61+
// Provide global variable names to replace your external imports
62+
// eg. jquery: '$'
63+
vue: 'Vue',
64+
};
65+
66+
// Customize configs for individual targets
67+
const buildFormats = [];
68+
if (!argv.format || argv.format === 'es') {
69+
const esConfig = {
70+
...baseConfig,
71+
external,
72+
output: {
73+
file: 'dist/vue-tailwindcss-typeahead.esm.js',
74+
format: 'esm',
75+
exports: 'named',
76+
},
77+
plugins: [
78+
replace({
79+
...baseConfig.plugins.replace,
80+
'process.env.ES_BUILD': JSON.stringify('true'),
81+
}),
82+
...baseConfig.plugins.preVue,
83+
vue(baseConfig.plugins.vue),
84+
babel({
85+
...baseConfig.plugins.babel,
86+
presets: [
87+
[
88+
'@babel/preset-env',
89+
{
90+
targets: esbrowserslist,
91+
},
92+
],
93+
],
94+
}),
95+
commonjs(),
96+
],
97+
};
98+
buildFormats.push(esConfig);
99+
}
100+
101+
if (!argv.format || argv.format === 'cjs') {
102+
const umdConfig = {
103+
...baseConfig,
104+
external,
105+
output: {
106+
compact: true,
107+
file: 'dist/vue-tailwindcss-typeahead.ssr.js',
108+
format: 'cjs',
109+
name: 'VueTailwindcssTypeahead',
110+
exports: 'named',
111+
globals,
112+
},
113+
plugins: [
114+
replace(baseConfig.plugins.replace),
115+
...baseConfig.plugins.preVue,
116+
vue({
117+
...baseConfig.plugins.vue,
118+
template: {
119+
...baseConfig.plugins.vue.template,
120+
optimizeSSR: true,
121+
},
122+
}),
123+
babel(baseConfig.plugins.babel),
124+
commonjs(),
125+
],
126+
};
127+
buildFormats.push(umdConfig);
128+
}
129+
130+
if (!argv.format || argv.format === 'iife') {
131+
const unpkgConfig = {
132+
...baseConfig,
133+
external,
134+
output: {
135+
compact: true,
136+
file: 'dist/vue-tailwindcss-typeahead.min.js',
137+
format: 'iife',
138+
name: 'VueTailwindcssTypeahead',
139+
exports: 'named',
140+
globals,
141+
},
142+
plugins: [
143+
replace(baseConfig.plugins.replace),
144+
...baseConfig.plugins.preVue,
145+
vue(baseConfig.plugins.vue),
146+
babel(baseConfig.plugins.babel),
147+
commonjs(),
148+
terser({
149+
output: {
150+
ecma: 5,
151+
},
152+
}),
153+
],
154+
};
155+
buildFormats.push(unpkgConfig);
156+
}
157+
158+
// Export config
159+
export default buildFormats;

‎dev/serve.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import Vue from 'vue';
2+
import Dev from './serve.vue';
3+
4+
Vue.config.productionTip = false;
5+
6+
new Vue({
7+
render: (h) => h(Dev),
8+
}).$mount('#app');

0 commit comments

Comments
 (0)