Publish 0.2.0 & Rebuild docs & Minor fixes

Author: 7PH

README.md

@@ -1,77 +1,61 @@
 <img src="./assets/intro.gif" alt="">
 
-Discover `vue-smart-suggest`, a compact (<3KB) vue library offering dynamic, context-sensitive suggestions for your text areas.
+Vue Smart Suggest is a lightweight vue library offering dynamic, context-sensitive suggestions for your text areas. It can be fully customized with custom components and weights less than `3kb` minified and gzipped.
 
-## Features
+Check out the [documentation website](https://7ph.github.io/vue-smart-suggest/#/) to try it out 😊
 
--   Lightweight
--   Easy to integrate
--   Context-sensitive suggestions based on user input
--   Customizable triggers (e.g., "@", ":")
+<p align="right">
+    Like this project? Give a star 🌟
+</p>
 
-## Installation
+## Getting started
 
-```bash
-npm install --save vue-smart-suggest
-```
+1. Install using a package manager
 
-## Usage
+    ```bash
+    npm i --save vue-smart-suggest
+    # or
+    yarn add vue-smart-suggest
+    ```
 
-Here's a quick example on how to use `vue-smart-suggest` in your project:
+2. Import `SmartSuggest` and define suggestion trigger(s)
 
-```vue
-<script setup lang="ts">
-import { SmartSuggest, Trigger } from 'vue-smart-suggest';
+    ```ts
+    import { SmartSuggest, Trigger } from 'vue-smart-suggest';
 
-const userTrigger: Trigger = {
-    char: '@',
-    items: [
-        { value: 'joe', searchText: 'joe' },
-        { value: 'jane', searchText: 'jane' },
-    ],
-};
-</script>
+    const userMentionTrigger: Trigger = {
+        char: '@',
+        items: [{ value: 'Joe' }, { value: 'Jane' }],
+    };
+    ```
 
-<template>
-    <SmartSuggest :trigger="userTrigger">
-        <textarea />
-    </SmartSuggest>
-</template>
-```
-
-For detailed usage and options, please refer to [Documentation Link].
-
-## Contributing
+    \*minimal example, check Trigger type definition to see all options
 
-We welcome contributions to `vue-smart-suggest`! If you're interested in helping improve this project, here's how you can contribute:
+3. Enhance a text area with `<SmartSuggest />`
 
-### Reporting Issues
-
--   Ensure the issue has not already been reported.
--   Use the GitHub Issues tab to report the issue. Provide detailed steps to reproduce, what you expected to happen, and what actually happened.
+    ```html
+    <SmartSuggest :triggers="[userMentionTrigger]">
+        <textarea />
+    </SmartSuggest>
+    ```
 
-### Submitting Pull Requests
+4. That's it, your textarea will show up suggestions as you type `@`!
+5. Check-out the [customization guide](https://7ph.github.io/vue-smart-suggest/#/customize) or the [API](https://7ph.github.io/vue-smart-suggest/api-docs/) to get the most of this library
 
-1. Fork the repository on GitHub.
-2. Clone your fork to your local machine.
-3. Create a new branch for your feature or fix.
-4. Make your changes, ensuring you adhere to the existing code style.
-5. Write or adapt tests as needed.
-6. Commit your changes with a clear and descriptive message.
-7. Push your branch to your GitHub fork.
-8. Submit a pull request to the main repository.
-9. Ensure your pull request description clearly describes the problem and solution. Include the relevant issue number if applicable.
+## Dependencies
 
-### Coding Guidelines
+-   This library requires `vue 3.x`.
+-   This library has a single dependency, `textarea-caret` which helps finding the position of the cursor inside a text area.
 
--   Write code in TypeScript.
--   Follow existing coding style for consistency.
--   Ensure your code passes all existing tests and write new tests as needed.
+## Useful links
 
-### Community
+Documentation
 
-Join our [Community Forum or Slack/Discord Channel] to discuss development, features, and ideas.
+-   Try out a simple [demo](https://7ph.github.io/vue-smart-suggest/) on the documentation website.
+-   For styling tips, check the [customization guide](https://7ph.github.io/vue-smart-suggest/#/customize).
+-   Check out the [api documentation](https://7ph.github.io/vue-smart-suggest/api-docs/) for reference.
+-   Admire the [>98% coverage report](https://7ph.github.io/vue-smart-suggest/coverage/)
 
-## License
+## Contributing
 
-`vue-smart-suggest` is open-sourced software licensed under the [MIT license](LICENSE.md).
+Having trouble? Found a bug? Want to contribute? Any kind of contribution is welcome. If you have any questions, please open an issue or create a pull request.

assets/intro.gif

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+      "outDir": "lib",
+      "target": "ESNext",
+      "declaration": true,
+      "useDefineForClassFields": true,
+      "module": "ESNext",
+      "moduleResolution": "Node",
+      "strict": true,
+      "jsx": "preserve",
+      "sourceMap": true,
+      "resolveJsonModule": true,
+      "isolatedModules": true,
+      "esModuleInterop": true,
+      "lib": ["ESNext", "DOM"],
+      "skipLibCheck": true
+  },
+}

assets/tsconfig.json

@@ -7,24 +7,26 @@
     --dark-hl-2: #CE9178;
     --light-hl-3: #0000FF;
     --dark-hl-3: #569CD6;
-    --light-hl-4: #800000;
-    --dark-hl-4: #808080;
-    --light-hl-5: #800000;
-    --dark-hl-5: #569CD6;
-    --light-hl-6: #E50000;
+    --light-hl-4: #008000;
+    --dark-hl-4: #6A9955;
+    --light-hl-5: #AF00DB;
+    --dark-hl-5: #C586C0;
+    --light-hl-6: #001080;
     --dark-hl-6: #9CDCFE;
-    --light-hl-7: #0000FF;
-    --dark-hl-7: #CE9178;
-    --light-hl-8: #AF00DB;
-    --dark-hl-8: #C586C0;
-    --light-hl-9: #001080;
-    --dark-hl-9: #9CDCFE;
-    --light-hl-10: #0070C1;
-    --dark-hl-10: #4FC1FF;
-    --light-hl-11: #267F99;
-    --dark-hl-11: #4EC9B0;
-    --light-hl-12: #CD3131;
-    --dark-hl-12: #F44747;
+    --light-hl-7: #0070C1;
+    --dark-hl-7: #4FC1FF;
+    --light-hl-8: #267F99;
+    --dark-hl-8: #4EC9B0;
+    --light-hl-9: #800000;
+    --dark-hl-9: #808080;
+    --light-hl-10: #CD3131;
+    --dark-hl-10: #F44747;
+    --light-hl-11: #E50000;
+    --dark-hl-11: #9CDCFE;
+    --light-hl-12: #0000FF;
+    --dark-hl-12: #CE9178;
+    --light-hl-13: #800000;
+    --dark-hl-13: #569CD6;
     --light-code-background: #FFFFFF;
     --dark-code-background: #1E1E1E;
 }
@@ -43,6 +45,7 @@
     --hl-10: var(--light-hl-10);
     --hl-11: var(--light-hl-11);
     --hl-12: var(--light-hl-12);
+    --hl-13: var(--light-hl-13);
     --code-background: var(--light-code-background);
 } }
 
@@ -60,6 +63,7 @@
     --hl-10: var(--dark-hl-10);
     --hl-11: var(--dark-hl-11);
     --hl-12: var(--dark-hl-12);
+    --hl-13: var(--dark-hl-13);
     --code-background: var(--dark-code-background);
 } }
 
@@ -77,6 +81,7 @@
     --hl-10: var(--light-hl-10);
     --hl-11: var(--light-hl-11);
     --hl-12: var(--light-hl-12);
+    --hl-13: var(--light-hl-13);
     --code-background: var(--light-code-background);
 }
 
@@ -94,6 +99,7 @@
     --hl-10: var(--dark-hl-10);
     --hl-11: var(--dark-hl-11);
     --hl-12: var(--dark-hl-12);
+    --hl-13: var(--dark-hl-13);
     --code-background: var(--dark-code-background);
 }
 
@@ -110,4 +116,5 @@
 .hl-10 { color: var(--hl-10); }
 .hl-11 { color: var(--hl-11); }
 .hl-12 { color: var(--hl-12); }
+.hl-13 { color: var(--hl-13); }
 pre, code { background: var(--code-background); }