Small fixes, adds linting

.eslintrc.js

@@ -0,0 +1,24 @@
+module.exports = {
+  root: true,
+  parser: 'vue-eslint-parser',
+  parserOptions: {
+    parser: '@typescript-eslint/parser',
+    ecmaVersion: 2021,
+  },
+  plugins: ['@typescript-eslint'],
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+  },
+  extends: ['plugin:vue/vue3-recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
+  rules: {
+    '@typescript-eslint/ban-ts-comment': 'off',
+  },
+  globals: {
+    defineProps: 'readonly',
+    defineEmits: 'readonly',
+    defineExpose: 'readonly',
+    withDefaults: 'readonly',
+  },
+}

demo/App.vue

@@ -9,14 +9,14 @@
           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"
+          class="inline-block text-black transition-colors hover:text-purple-500 dark:text-gray-300"
           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">
+    <div class="w-full mx-auto mt-4 prose max-w-prose prose-a:text-purple-500 dark:prose-dark">
       <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"
@@ -66,7 +66,7 @@
         </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">
+    <footer class="w-full pt-4 mx-auto mt-8 border-t border-gray-200 max-w-prose dark:border-gray-700 sm:mt-12">
       <p class="text-gray-500">
         &copy; {{ new Date().getFullYear() }}
         <a
@@ -86,9 +86,9 @@ import BasicExample from './BasicExample.vue'
 import TextareaExample from './TextareaExample.vue'
 import ContentEditableExample from './ContentEditableExample.vue'
 
-const installCode = `$ npm install vue-input-autowidth@next --save
+const installCode = `$ npm install vue-tribute@next --save
 # or...
-$ yarn add vue-input-autowidth@next`
+$ yarn add vue-tribute@next`
 
 const addGlobalCode = `import { createApp } from 'vue'
 import App from './App.vue'
@@ -130,26 +130,26 @@ const options = {
 <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;
+  @apply min-w-0 rounded-md border-2 border-gray-300 bg-white px-2 py-2 text-base transition-colors focus:border-purple-500 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 sm:px-3 sm:text-lg;
 }
 
 /* Tribute Styles */
 .tribute-container {
-  @apply absolute top-0 left-0 h-auto overflow-y-auto block z-10 rounded mt-6 shadow-md;
+  @apply absolute top-0 left-0 z-10 mt-6 block h-auto overflow-y-auto rounded shadow-md;
   max-height: 300px;
   max-width: 500px;
 }
 
 .tribute-container ul {
-  @apply p-0 list-none rounded overflow-hidden;
+  @apply list-none overflow-hidden rounded p-0;
 }
 
 .tribute-container li {
-  @apply text-gray-800 pl-2 pr-6 py-2 cursor-pointer text-sm bg-white dark:bg-gray-700 dark:text-gray-100;
+  @apply cursor-pointer bg-white py-2 pl-2 pr-6 text-sm text-gray-800 dark:bg-gray-700 dark:text-gray-100;
 }
 .tribute-container li.highlight,
 .tribute-container li:hover {
-  @apply dark:bg-purple-900 dark:text-purple-300 text-purple-800 bg-purple-100;
+  @apply bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300;
 }
 .tribute-container li span {
   @apply font-bold;

lib/test/vue-tribute.test.ts

@@ -1,11 +1,13 @@
-import { defineComponent, h, onRenderTracked } from 'vue'
+import { defineComponent, h } from 'vue'
 import { render, screen } from '@testing-library/vue'
 import { VueTribute } from '../'
 import type Tribute from 'tributejs'
 import userEvent from '@testing-library/user-event'
 
+/* eslint-disable vue/one-component-per-file */
+
 interface TributeElement extends HTMLElement {
-  tributeInstance?: Tribute<any>
+  tributeInstance?: Tribute<any> // eslint-disable-line @typescript-eslint/no-explicit-any
 }
 
 describe('VueTribute', () => {

lib/vue-tribute.ts

@@ -5,14 +5,14 @@ type Maybe<T> = T | undefined
 type MaybeRef<T> = T | Ref<T>
 
 interface TributeElement extends HTMLElement {
-  tributeInstance?: Tribute<any>
+  tributeInstance?: Tribute<any> // eslint-disable-line @typescript-eslint/no-explicit-any
 }
 
 export const VueTribute = defineComponent({
-  name: 'vue-tribute',
+  name: 'VueTribute',
   props: {
     options: {
-      type: Object as PropType<MaybeRef<TributeOptions<any>>>,
+      type: Object as PropType<MaybeRef<TributeOptions<any>>>, // eslint-disable-line @typescript-eslint/no-explicit-any
       required: true,
     },
   },
@@ -24,18 +24,19 @@ export const VueTribute = defineComponent({
     const root = ref<HTMLElement>()
     const el = ref<TributeElement>()
 
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const attachTribute = (el: Ref<Maybe<TributeElement>>, options: MaybeRef<TributeOptions<any>> = props.options) => {
       if (!el.value) return
 
-      let tribute = new Tribute(unref(options))
+      const tribute = new Tribute(unref(options))
       tribute.attach(el.value)
       el.value.tributeInstance = tribute
     }
 
     onMounted(() => {
       el.value = root.value?.childNodes[0] as TributeElement
 
-      if (!el) {
+      if (!el.value) {
         throw new Error('[vue-tribute] cannot find a suitable element to attach to.')
       }
 

package.json

@@ -22,6 +22,7 @@
     "serve": "vite preview",
     "test": "vitest run",
     "test:watch": "vitest",
+    "lint": "eslint --ext .ts,.vue --ignore-path .gitignore ./lib ./demo --fix",
     "format": "prettier ./lib ./demo  -w -u"
   },
   "dependencies": {},
@@ -32,19 +33,26 @@
     "@testing-library/user-event": "^14.0.0-beta",
     "@testing-library/vue": "^6.4.2",
     "@types/node": "^17.0.10",
+    "@typescript-eslint/eslint-plugin": "^5.10.1",
+    "@typescript-eslint/parser": "^5.10.1",
     "@vitejs/plugin-vue": "^2.0.0",
     "@vue/test-utils": "^2.0.0-rc.18",
     "autoprefixer": "^10.4.2",
+    "eslint": "^8.7.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-vue": "^8.3.0",
     "highlight.js": "^11.4.0",
     "jsdom": "^19.0.0",
     "postcss": "^8.4.5",
     "prettier": "^2.5.1",
+    "prettier-plugin-tailwindcss": "^0.1.4",
     "tailwindcss": "^3.0.15",
     "tributejs": "^5.1.3",
     "typescript": "^4.4.4",
     "vite": "^2.7.2",
     "vitest": "^0.1.27",
     "vue": "^3.2.25",
+    "vue-eslint-parser": "^8.2.0",
     "vue-tsc": "^0.29.8"
   },
   "peerDependencies": {