diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..251ce6d --- /dev/null +++ b/.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? diff --git a/README.md b/README.md index d23cfcd..cf0bc5c 100644 --- a/README.md +++ b/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: +``` + +``` + +The event @change will be trigger every time user enter something, you can handle it like this: +``` + +``` + + +# 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. \ No newline at end of file diff --git a/demo/App.vue b/demo/App.vue index ba16eec..c80c7ab 100644 --- a/demo/App.vue +++ b/demo/App.vue @@ -7,7 +7,8 @@
- Github @@ -33,12 +34,15 @@

Try it here: type a name of a framework/programming language. Example: "Vue", then press Tab

- - + + Download +
@@ -53,7 +57,7 @@ - + + diff --git a/demo/img/demo.gif b/demo/img/demo.gif new file mode 100644 index 0000000..bff625e Binary files /dev/null and b/demo/img/demo.gif differ diff --git a/src/TabComplete.vue b/src/NextHint.vue similarity index 100% rename from src/TabComplete.vue rename to src/NextHint.vue diff --git a/src/main.ts b/src/main.ts index bd056a2..ef6219d 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,7 +1,7 @@ import './style.css' -import TabComplete from './TabComplete.vue' +import NextHint from './NextHint.vue' export { - TabComplete + NextHint } \ No newline at end of file diff --git a/src/types/main.d.ts b/src/types/main.d.ts index 4c05d96..9140b7a 100644 --- a/src/types/main.d.ts +++ b/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>; } \ No newline at end of file diff --git a/tailwind.config.cjs b/tailwind.config.cjs index 93fe928..72c6348 100644 --- a/tailwind.config.cjs +++ b/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', }, diff --git a/vite.config.ts b/vite.config.ts index 32b49b1..7aecdbe 100644 --- a/vite.config.ts +++ b/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: {