feat(chore): update readme

.gitignore

@@ -0,0 +1,23 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -1,14 +1,39 @@
 # Vue NextHint
 
-A lightweight javascript library to create some amazing effects for the mouse (cursor) on your website - MagicMouse.js : [https://magicmousejs.web.app/](https://magicmousejs.web.app)
+A Vue component that creates autocomplete functionality for your input fields, but works as tab suggestions instead of dropdown. : [https://vue-nexthint.vercel.app/](https://vue-nexthint.vercel.app)
 
-![One of magic-mouse effects](https://user-images.githubusercontent.com/19908411/77246772-03384880-6c5d-11ea-8074-6975bc8e3632.gif)
-There's more than 4 effects and I'm keep updating now, you can try other effect on https://magicmousejs.web.app/ by changing the example and click to "Try it" button.
+![Demo NextHint](https://gist.github.com/assets/19908411/26d09a14-646b-4812-9c7e-a78b7a42aec8)
 
 # Installation
-MagicMouse.js is a vanilla javascript library so you DON'T need to include any other library like jQuery. There are two options to install it:
+Currently, this package only works with Vue 3.
 
 ## NPM
-If you want to install it to your project via npm: `npm i magicmouse.js`
+Install it using npm: `npm i vue-nexthint`
 
-After that, import to your project by: `import { magicMouse } from 'magicmouse.js'`
+After that, import to your component: `import { NextHint } from 'vue-nexthint'`
+
+## Usage
+In your template:
+```
+<NextHint
+  placeholder="Type 'Vue'"
+  @change="onChangeHandler"
+  :suggestions="['Vue.js', 'React', "Hello world"]"
+/>
+```
+
+The event @change will be trigger every time user enter something, you can handle it like this:
+```
+<script setup>
+  const onChangeHandler = (text) => {
+    // do something with the new text here
+    console.log(text)
+  }
+</script>
+```
+
+
+# License ❤️
+This package is totally free to use. However, if you want to use Magicmouse.js in your commercial projects, I required you to do a good thing for the poor people in your place. You can do whatever you think it's "a good thing", like buy them some food, give them some money,..etc... 
+I'm not requiring you to take a photo or do anything to prove it, just do it and you will feel great about yourself :)
+Let's make the world better place. 

demo/App.vue

@@ -7,7 +7,8 @@
               </a>
 
               <div class="flex items-center mt-2 -mx-2 sm:mt-0">
-                  <a href="#" 
+                  <a href="https://github.com/dshongphuc/vue-nexthint" 
+                    target="_blank"
                   class="px-3 py-1 text-sm font-semibold text-white transition-colors duration-300 transform border-2 rounded-md hover:bg-gray-700">
                     Github
                   </a>
@@ -33,12 +34,15 @@
                   <p class="text-center mt-4">Try it here: type a name of a framework/programming language. Example: "Vue", then press Tab</p>
 
                   <div class="flex flex-col mt-8 space-y-3 sm:-mx-2 sm:flex-row sm:justify-center sm:space-y-0">
-                      <TabComplete
+                      <NextHint
                         placeholder="Type 'Vue'"
                        :suggestions="suggestions" />
-                      <button class="px-6 py-3 text-sm font-medium tracking-wide text-white capitalize transition-colors duration-300 transform bg-blue-500 rounded-md hover:bg-blue-600 focus:bg-blue-600 focus:outline-none sm:mx-2">
-                         Submit
-                      </button>
+                      <a
+                        href="https://github.com/dshongphuc/vue-nexthint" 
+                        target="_blank"
+                        class="px-6 py-3 text-sm font-medium tracking-wide text-white capitalize transition-colors duration-300 transform bg-blue-500 rounded-md hover:bg-blue-600 focus:bg-blue-600 focus:outline-none sm:mx-2">
+                         Download
+                      </a>
                   </div>
 
               </div>
@@ -53,7 +57,7 @@
  </template>
 
 <script setup lang="ts">
-import TabComplete from '../src/TabComplete.vue'
+import NextHint from '../src/NextHint.vue'
 
 const suggestions = [
     "JavaScript", "Python", "Java", "C++", "C#", "Ruby", "PHP", "Swift", "Kotlin", "TypeScript",

demo/dist/index.html

@@ -6,8 +6,8 @@
     <link rel="icon" href="/favicon.jpg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vue Tab Complete</title>
-  <script type="module" crossorigin src="/assets/index-af32c86b.js"></script>
-  <link rel="stylesheet" href="/assets/index-8d57d69f.css">
+  <script type="module" crossorigin src="/assets/index-4d71a3e1.js"></script>
+  <link rel="stylesheet" href="/assets/index-9285e695.css">
 </head>
 
 <body>

src/main.ts

@@ -1,7 +1,7 @@
 import './style.css'
 
-import TabComplete from './TabComplete.vue'
+import NextHint from './NextHint.vue'
 
 export {
-  TabComplete
+  NextHint
 }

src/types/main.d.ts

@@ -4,5 +4,5 @@ declare module "vue-tab-complete" {
   const component: any;
   export default component;
 
-  export const TabComplete: DefineComponent<{}, {}, any>;
+  export const NextHint: DefineComponent<{}, {}, any>;
 }

tailwind.config.cjs

@@ -16,22 +16,6 @@ module.exports = {
       logo: ['Montserrat', 'sans-serif'],
     },
     extend: {
-      colors: {
-        miro: {
-          primary: 'var(--color-primary)',
-          blue: '#336CFB',
-          purple: '#0B63F8',
-          green: '#33B959',
-          'gray-light': '#D9D9D9',
-          gray: '#D8D8D8',
-          'gray-lighter': '#F8F8F8',
-          'green-landing': '#007360',
-          yellow: '#DBBE71',
-          mint: '#F8FEFF',
-          orangeskin: '#FB8E67',
-          orange: '#FF6D4A',
-        },
-      },
       backdropBlur: {
         xs: '2px',
       },

vite.config.ts

@@ -22,7 +22,7 @@ export default defineConfig(() => {
       minify: true,
       lib: {
         entry: path.resolve(__dirname, "src/main.ts"),
-        name: "VueTabComplete",
+        name: "VueNextHint",
         fileName: format => `main.${format}.js`,
       },
       rollupOptions: {