Docs and such

.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Collin Henderson
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,11 +1,67 @@
-# Vue 3 + Typescript + Vite
+# vue-tribute ![test](https://github.com/syropian/vue-tribute/workflows/test/badge.svg?branch=next)
 
-This template should help get you started developing with Vue 3 and Typescript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+A tiny Vue.js wrapper around Zurb's Tribute library for ES6 native @mentions.
 
-## Recommended IDE Setup
+> 🚦 Looking for Vue 2 support? Check out the [master branch](https://github.com/syropian/vue-tribute).
 
-- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
+## Install
 
-## Type Support For `.vue` Imports in TS
+```bash
+$ npm install vue-tribute@next --save
+# or...
+$ yarn add vue-tribute@next
+```
 
-Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's `.vue` type support plugin by running `Volar: Switch TS Plugin on/off` from VSCode command palette.
+_or_
+
+Use the UMD build from [Unpkg](https://unpkg.com/vue-tribute), available as `VueTribute` in the global scope.
+
+```html
+<script src="/vendor/vue.js" />
+<script src="https://unpkg.com/vue-tribute@next" />
+```
+
+### Globally
+
+Import and register the module as a plugin.
+
+```javascript
+import { createApp } from 'vue'
+import App from './App.vue'
+import VueTribute from 'vue-tribute'
+
+createApp(App).use(VueTribute).mount('#app')
+```
+
+### Per-component
+
+```javascript
+import { VueTribute } from 'vue-tribute'
+
+export default {
+  components: { VueTribute },
+  setup() {
+    ...
+  },
+}
+```
+
+## Usage
+
+Wrap a single **text input**, **textarea**, or **contenteditable** element within the `VueTribute` component. You should then pass a [valid Tribute collection(s) object](https://github.com/zurb/tribute#initializing) to the component.
+
+## Events
+
+All [custom Tribute events](https://github.com/zurb/tribute#events) will work as expected. Simply attach listeners for them like you would any other event.
+
+```vue
+<template>
+  <vue-tribute :options="options">
+    <input type="text" placeholder="@..." @tribute-replaced="doSomething" />
+  </vue-tribute>
+</template>
+```
+
+## License
+
+MIT © [Collin Henderson](https://github.com/syropian)

demo/App.vue

@@ -1,31 +1,155 @@
 <template>
   <div class="px-8 mt-16 mb-6 sm:mt-32 sm:mb-6 md:px-0">
-    <div class="w-full mx-auto mt-8 max-w-prose">
-      <BasicExample />
+    <div class="flex items-center justify-between w-full mx-auto mt-8 max-w-prose">
+      <h1 class="flex items-center text-3xl font-bold sm:text-4xl">
+        <span class="inline-block text-gray-600 dark:text-gray-300">vue-tribute</span>
+      </h1>
+      <nav class="absolute top-[20px] right-[20px] flex items-center sm:relative sm:top-0 sm:right-0">
+        <a
+          href="https://github.com/syropian/vue-tribute"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="inline-block text-black transition-colors dark:text-gray-300 hover:text-purple-500"
+          aria-label="GitHub"
+        >
+          <GitHubIcon class="w-6 h-6 stroke-current" aria-hidden="true" />
+        </a>
+      </nav>
     </div>
+    <div class="w-full mx-auto mt-4 prose dark:prose-dark max-w-prose prose-a:text-purple-500">
+      <h2 class="pb-6 border-b border-gray-800">
+        A tiny Vue wrapper for
+        <a href="https://github.com/zurb/tribute" target="_blank" rel="noopener noreferrer" class="text-purple-500"
+          >Tribute</a
+        >
+      </h2>
+      <div class="mt-16 space-y-10">
+        <div>
+          <h3>Basic Example</h3>
+          <BasicExample />
+        </div>
+        <div>
+          <h3>With a Textarea</h3>
+          <TextareaExample />
+        </div>
+        <div>
+          <h3>With contenteditable</h3>
+          <ContentEditableExample />
+        </div>
+        <div>
+          <h3>Install</h3>
+          <highlightjs language="bash" :code="installCode" />
+        </div>
+        <div>
+          <h3>Add the Plugin</h3>
+          <div class="mt-4">
+            <h4>Globally</h4>
+            <highlightjs language="javascript" :code="addGlobalCode" />
+          </div>
+          <div class="mt-4">
+            <h4>Per-component</h4>
+            <highlightjs language="javascript" :code="perComponentCode" />
+          </div>
+        </div>
+        <div>
+          <h3>Usage</h3>
+          <p>
+            Wrap a single <strong>text input</strong>, <strong>textarea</strong>, or
+            <strong>contenteditable</strong> element within the <code>VueTribute</code> component. You should then pass
+            a
+            <a href="https://github.com/zurb/tribute#initializing" target="_blank" rel="noopener noreferrer"
+              >valid Tribute collection(s) object</a
+            >
+            to the component.
+          </p>
+          <highlightjs language="xml" :code="usageCode" />
+        </div>
+      </div>
+    </div>
+    <footer class="w-full pt-4 mx-auto mt-8 border-t border-gray-200 dark:border-gray-700 sm:mt-12 max-w-prose">
+      <p class="text-gray-500">
+        &copy; {{ new Date().getFullYear() }}
+        <a
+          href="https://syropia.net"
+          target="blank"
+          rel="noopener noreferrer"
+          class="font-semibold text-purple-500 hover:underline"
+          >Collin Henderson</a
+        >
+      </p>
+    </footer>
   </div>
 </template>
 <script setup lang="ts">
+import GitHubIcon from './GitHubIcon.vue'
 import BasicExample from './BasicExample.vue'
+import TextareaExample from './TextareaExample.vue'
+import ContentEditableExample from './ContentEditableExample.vue'
+
+const installCode = `$ npm install vue-input-autowidth@next --save
+# or...
+$ yarn add vue-input-autowidth@next`
+
+const addGlobalCode = `import { createApp } from 'vue'
+import App from './App.vue'
+import VueTribute from 'vue-tribute'
+
+createApp(App).use(VueTribute).mount("#app")
+`
+
+const perComponentCode = `import { VueTribute } from 'vue-tribute'
+
+export default {
+  components: { VueTribute },
+  setup() {
+    ...
+  },
+}`
+
+const usageCode = `<template>
+  <vue-tribute :options="options">
+    <input type="text" placeholder="@..." />
+  </vue-tribute>
+</template>
+<script setup>
+import { VueTribute } from 'vue-tribute'
+
+const options = {
+  trigger: '@',
+  values: [
+    { key: 'Sarah Drasner', value: 'sarah_edo' },
+    { key: 'Evan You', value: 'youyuxi' },
+    { key: 'Adam Wathan', value: 'adamwathan' },
+    { key: 'Rich Harris', value: 'Rich_Harris' },
+  ],
+}
+\</script\>
+`
 </script>
 
 <style>
+/* Inputs */
+.input {
+  @apply transition-colors min-w-0 px-2 sm:px-3 py-2 rounded-md text-base sm:text-lg focus:outline-none border-2 border-gray-300 dark:border-gray-700 focus:border-purple-500 bg-white dark:bg-gray-800 dark:text-gray-200;
+}
+
+/* Tribute Styles */
 .tribute-container {
-  @apply absolute top-0 left-0 h-auto overflow-y-auto block z-10 rounded shadow;
+  @apply absolute top-0 left-0 h-auto overflow-y-auto block z-10 rounded mt-6 shadow-md;
   max-height: 300px;
   max-width: 500px;
 }
 
 .tribute-container ul {
-  @apply mt-5 p-0 list-none bg-white rounded overflow-hidden;
+  @apply p-0 list-none rounded overflow-hidden;
 }
 
 .tribute-container li {
-  @apply text-blue-600 pl-2 pr-6 py-2 cursor-pointer text-sm;
+  @apply text-gray-800 pl-2 pr-6 py-2 cursor-pointer text-sm bg-white dark:bg-gray-700 dark:text-gray-100;
 }
 .tribute-container li.highlight,
 .tribute-container li:hover {
-  @apply bg-blue-600 text-white;
+  @apply dark:bg-purple-900 dark:text-purple-300 text-purple-800 bg-purple-100;
 }
 .tribute-container li span {
   @apply font-bold;

demo/BasicExample.vue

@@ -1,21 +1,20 @@
 <template>
   <div id="container">
     <vue-tribute :options="options">
-      <input type="text" class="" placeholder="@..." />
+      <input type="text" class="w-3/4 sm:1/2 input" placeholder="@..." />
     </vue-tribute>
   </div>
 </template>
 <script setup lang="ts">
-import VueTribute from '../lib'
+import { VueTribute } from '../lib'
 
 const options = {
   trigger: '@',
   values: [
-    { key: 'Collin Henderson', value: 'syropian' },
     { key: 'Sarah Drasner', value: 'sarah_edo' },
     { key: 'Evan You', value: 'youyuxi' },
     { key: 'Adam Wathan', value: 'adamwathan' },
+    { key: 'Rich Harris', value: 'Rich_Harris' },
   ],
-  positionMenu: true,
 }
 </script>

demo/ContentEditableExample.vue

@@ -0,0 +1,20 @@
+<template>
+  <div id="container">
+    <vue-tribute :options="options">
+      <div class="w-3/4 sm:1/2 input" placeholder="@..." contenteditable>@</div>
+    </vue-tribute>
+  </div>
+</template>
+<script setup lang="ts">
+import { VueTribute } from '../lib'
+
+const options = {
+  trigger: '@',
+  values: [
+    { key: 'Sarah Drasner', value: 'sarah_edo' },
+    { key: 'Evan You', value: 'youyuxi' },
+    { key: 'Adam Wathan', value: 'adamwathan' },
+    { key: 'Rich Harris', value: 'Rich_Harris' },
+  ],
+}
+</script>

demo/TextareaExample.vue

@@ -0,0 +1,20 @@
+<template>
+  <div id="container">
+    <vue-tribute :options="options">
+      <textarea class="w-3/4 sm:1/2 input" placeholder="@..." />
+    </vue-tribute>
+  </div>
+</template>
+<script setup lang="ts">
+import { VueTribute } from '../lib'
+
+const options = {
+  trigger: '@',
+  values: [
+    { key: 'Sarah Drasner', value: 'sarah_edo' },
+    { key: 'Evan You', value: 'youyuxi' },
+    { key: 'Adam Wathan', value: 'adamwathan' },
+    { key: 'Rich Harris', value: 'Rich_Harris' },
+  ],
+}
+</script>

demo/app.ts

@@ -1,8 +1,15 @@
 import { createApp } from 'vue'
 import App from './App.vue'
-import 'highlight.js/lib/common'
+import hljs from 'highlight.js/lib/core'
+import html from 'highlight.js/lib/languages/xml'
+import bash from 'highlight.js/lib/languages/bash'
+import javascript from 'highlight.js/lib/languages/javascript'
 import hljsVuePlugin from '@highlightjs/vue-plugin'
 import 'highlight.js/styles/atom-one-dark.css'
 import './app.css'
 
+hljs.registerLanguage('html', html)
+hljs.registerLanguage('javascript', javascript)
+hljs.registerLanguage('bash', bash)
+
 createApp(App).use(hljsVuePlugin).mount('#app')

tailwind.config.js

@@ -12,13 +12,22 @@ module.exports = {
             h3: {
               color: theme('colors.gray.300'),
             },
+            h4: {
+              color: theme('colors.gray.300'),
+            },
             p: {
               color: theme('colors.gray.400'),
             },
+            strong: {
+              color: theme('colors.gray.300'),
+            },
+            code: {
+              color: theme('colors.gray.100'),
+            },
           },
         },
       }),
     },
   },
-  plugins: [require('@tailwindcss/typography'), require('@tailwindcss/forms')],
+  plugins: [require('@tailwindcss/typography')],
 }