fix bug: At.vue insertHtml 'suffix' is not defined !! also other esli…

…nt warnings -- #137

bug regression commit: 725d7a1#diff-11090ff0a927c36112fd70be4c32aa3841151637c37309ea0f8c429f00c9ed61L335

.eslintrc.js

@@ -0,0 +1,23 @@
+module.exports = {
+  root: true,
+  extends: [
+    'plugin:vue/vue3-recommended',
+    '@vue/standard'
+  ],
+  rules: {
+    'vue/multiline-html-element-content-newline': 'off',
+    'vue/first-attribute-linebreak': 'off',
+    'vue/max-attributes-per-line': 'off',
+    'vue/order-in-components': 'off',
+    'vue/attributes-order': 'off',
+    'vue/html-indent': 'off',
+    'no-irregular-whitespace': 'off',
+    'no-mixed-operators': 'off',
+    'no-unused-vars': 'off',
+    'prefer-const': 'off',
+    'comma-dangle': 'off',
+    'max-len': 'off',
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+  }
+}

package.json

@@ -5,6 +5,8 @@
   "author": "Fritz Lin <[email protected]>",
   "repository": "https://github.com/fritx/vue-at",
   "scripts": {
+    "lint:fix": "vue-cli-service lint",
+    "lint": "vue-cli-service lint --no-fix",
     "dev": "vue-cli-service serve",
     "demo": "vue-cli-service build",
     "build:at": "vue-cli-service build ./src/At.vue --target lib --name vue-at",
@@ -24,9 +26,13 @@
   },
   "devDependencies": {
     "@babel/core": "^7.18.9",
+    "@vue/cli-plugin-eslint": "^5.0.8",
     "@vue/cli-service": "^5.0.8",
     "@vue/compat": "^3.1.0",
     "@vue/compiler-sfc": "^3.1.0",
+    "@vue/eslint-config-standard": "^8.0.1",
+    "eslint": "^8.21.0",
+    "eslint-plugin-vue": "^9.3.0",
     "npm-run-all": "^4.1.5",
     "rimraf": "^3.0.2",
     "sass": "^1.53.0",

src/App.vue

@@ -13,9 +13,9 @@
       </template> -->
 
       <!-- custom: with avatars -->
-      <template v-slot:item="s">
+      <template #item="s">
         <img :src="s.item.avatar">
-        <span v-text="s.item.name"></span>
+        <span v-text="s.item.name" />
       </template>
 
       <!--
@@ -24,33 +24,33 @@
           configureCompat({ ATTR_ENUMERATED_COERCION: false })
         Details: https://v3-migration.vuejs.org/breaking-changes/attribute-coercion.html
       -->
-      <div class="editor" :contenteditable="true"></div>
+      <div class="editor" :contenteditable="true" />
     </at>
 
     <at :members="members" name-key="name" v-model:value="html2">
-      <template v-slot:embeddedItem="s">
+      <template #embeddedItem="s">
         <span><span class="tag"><img class="avatar" :src="s.current.avatar">{{ s.current.name }}</span></span>
       </template>
 
       <!-- custom: with avatars -->
-      <template v-slot:item="s">
+      <template #item="s">
         <img :src="s.item.avatar">
-        <span v-text="s.item.name"></span>
+        <span v-text="s.item.name" />
       </template>
 
-      <div class="editor" :contenteditable="true"></div>
+      <div class="editor" :contenteditable="true" />
     </at>
 
-    <br />
+    <br>
 
     <at-ta :members="members" name-key="name" v-model:value="text">
       <!-- custom: with avatars -->
-      <template v-slot:item="s">
+      <template #item="s">
         <img :src="s.item.avatar">
-        <span v-text="s.item.name"></span>
+        <span v-text="s.item.name" />
       </template>
 
-      <textarea class="editor"></textarea>
+      <textarea class="editor" />
     </at-ta>
 
     <!-- <at-ta :members="members" name-key="name">
@@ -104,13 +104,13 @@ members = members.map((v, i) => {
 
 export default {
   components: { At, AtTa },
-  name: 'app',
+  name: 'App',
   data () {
     const data = {
       members,
       text: `
 <<< Textarea >>>
-Awesome Electron 
+Awesome Electron
 Useful resources for creating apps with Electron
 Inspired by the awesome list thing. You might also like awesome-nodejs.
 Example apps
@@ -119,7 +119,7 @@ Open Source
 Atom - Code editor.
 Nuclide - Unified IDE.
 Playback - Video player.
-Awesome Electron 
+Awesome Electron
 Useful resources for creating apps with Electron
 Inspired by the awesome list thing. You might also like awesome-nodejs.
 Example apps

src/At.vue

@@ -7,8 +7,9 @@ import {
 import AtTemplate from './AtTemplate.vue'
 
 export default {
-  name: 'At',
+  name: 'VueAt',
   mixins: [AtTemplate],
+  emits: ['input', 'at', 'insert'],
   props: {
     value: {
       type: String, // value not required
@@ -95,9 +96,9 @@ export default {
 
     currentItem () {
       if (this.atwho) {
-        return this.atwho.list[this.atwho.cur];
+        return this.atwho.list[this.atwho.cur]
       }
-      return '';
+      return ''
     },
 
     style () {
@@ -180,8 +181,8 @@ export default {
       if (range) {
         // fixme: Very bad code from me
         if (this.customsEmbedded && range.endOffset >= 1) {
-          let a = range.endContainer.childNodes[range.endOffset]
-            || range.endContainer.childNodes[range.endOffset - 1]
+          let a = range.endContainer.childNodes[range.endOffset] ||
+            range.endContainer.childNodes[range.endOffset - 1]
           if (!a || a.nodeType === Node.TEXT_NODE && !/^\s?$/.test(a.data)) {
             return
           } else if (a.nodeType === Node.TEXT_NODE) {
@@ -431,23 +432,23 @@ export default {
     insertHtml (html, r) {
       r.deleteContents()
       const node = r.endContainer
-      var newElement = document.createElement('span')
+      const newElement = document.createElement('span')
 
       // Seems `contentediable=false` should includes spaces,
       // otherwise, caret can't be placed well across them
       newElement.appendChild(document.createTextNode(' '))
       newElement.appendChild(this.htmlToElement(html))
       newElement.appendChild(document.createTextNode(' '))
       newElement.setAttribute('data-at-embedded', '')
-      newElement.setAttribute("contenteditable", false)
+      newElement.setAttribute('contenteditable', false)
 
       if (node.nodeType === Node.TEXT_NODE) {
         const cut = r.endOffset
-        var secondPart = node.splitText(cut);
-        node.parentNode.insertBefore(newElement, secondPart);
+        let secondPart = node.splitText(cut)
+        node.parentNode.insertBefore(newElement, secondPart)
         r.setEndBefore(secondPart)
       } else {
-        const t = document.createTextNode(suffix)
+        const t = document.createTextNode(this.suffix)
         r.insertNode(newElement)
         r.setEndAfter(newElement)
         r.insertNode(t)
@@ -488,17 +489,17 @@ export default {
         this.insertHtml(html, r)
       } else {
         const t = itemName(curItem) + suffix
-        this.insertText(t, r);
+        this.insertText(t, r)
       }
 
       this.$emit('insert', curItem)
       this.handleInput()
     },
     htmlToElement (html) {
-        var template = document.createElement('template');
-        html = html.trim(); // Never return a text node of whitespace as the result
-        template.innerHTML = html;
-        return template.content.firstChild;
+      const template = document.createElement('template')
+      html = html.trim() // Never return a text node of whitespace as the result
+      template.innerHTML = html
+      return template.content.firstChild
     }
   }
 }

src/AtTemplate.vue

@@ -1,39 +1,51 @@
-<style lang="scss" src="./At.scss"></style>
-
 <template>
-  <div ref="wrap"
+  <div
+    ref="wrap"
     class="atwho-wrap"
     @compositionstart="handleCompositionStart"
     @compositionend="handleCompositionEnd"
     @input="handleInput()"
     @keydown.capture="handleKeyDown"
   >
-    <div v-if="atwho"
+    <div
+      v-if="atwho"
       class="atwho-panel"
       :style="style"
     >
       <div class="atwho-inner">
         <div class="atwho-view">
           <ul class="atwho-ul">
-            <li v-for="(item, index) in atwho.list"
+            <li
+              v-for="(item, index) in atwho.list"
               class="atwho-li"
               :key="index"
               :class="isCur(index) && 'atwho-cur'"
               :data-index="index"
               @mouseenter="handleItemHover"
               @click="handleItemClick"
             >
-              <slot name="item" :item="item">
-                <span v-text="itemName(item)"></span>
+              <slot
+                name="item"
+                :item="item"
+              >
+                <span v-text="itemName(item)" />
               </slot>
             </li>
           </ul>
         </div>
       </div>
     </div>
-    <span v-show="false" ref="embeddedItem">
-      <slot name="embeddedItem" :current="currentItem"></slot>
+    <span
+      v-show="false"
+      ref="embeddedItem"
+    >
+      <slot
+        name="embeddedItem"
+        :current="currentItem"
+      />
     </span>
-    <slot></slot>
+    <slot />
   </div>
 </template>
+
+<style lang="scss" src="./At.scss"></style>

src/AtTextarea.vue

@@ -6,6 +6,7 @@ import { getAtAndIndex } from './util'
 export default {
   extends: At,
   name: 'AtTextarea',
+  emits: ['input', 'at', 'insert'],
   computed: {
     style () {
       if (this.atwho) {

src/util.js

@@ -1,6 +1,6 @@
 // bug report: https://github.com/vuejs/awesome-vue/pull/1028
 // https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded
-export function scrollIntoView(el, scrollParent) {
+export function scrollIntoView (el, scrollParent) {
   if (el.scrollIntoViewIfNeeded) {
     el.scrollIntoViewIfNeeded(false) // alignToCenter=false
   } else {
@@ -14,21 +14,21 @@ export function scrollIntoView(el, scrollParent) {
   }
 }
 
-export function applyRange(range) {
+export function applyRange (range) {
   const selection = window.getSelection()
   if (selection) { // 容错
     selection.removeAllRanges()
     selection.addRange(range)
   }
 }
-export function getRange() {
+export function getRange () {
   const selection = window.getSelection()
   if (selection && selection.rangeCount > 0) {
     return selection.getRangeAt(0)
   }
 }
 
-export function getAtAndIndex(text, ats) {
+export function getAtAndIndex (text, ats) {
   return ats.map((at) => {
     return { at, index: text.lastIndexOf(at) }
   }).reduce((a, b) => {