Backlog

[fritx]

• compatibility note: display:flex is used http://caniuse.com/#search=flex
• bug: insertItem in the middle of @'d name
• remote suggestion request is it possible to get members list from remote request ? #16
• v-model support v-model 的 textarea 不支持吗？ #29, 2.4.0-beta with v-model support #43
• scss error in vueify compile scss file for the vueify(browserify) #37
• dep: insert-text-2
• getCurrentEditor editable/textarea
• customized inserted user id and emit a handler? dist/vue-at-textarea is missing #28
• maybe close panel at blur/esc (hideOnBlur prop with timer handling) is it possible to make the members search look in first letters instead of in the hole word?  #20
• insertAt method 添加一个按钮，点击后往textarea中添加@字符，并触发下拉框 #26
• bug: openPanel index error after "delete"
• IE9~11/Edge compatibility The Member List Can't Be Autocompleted in IE #22
• textarea Use vue-at with textarea #11
• Position bug when browser scrollbar is visible Position bug when browser scrollbar is visible #10
• multiple at chars allow multiple at chars at a time #6
• prop default: () => []
• vue1: data-atwho-attrs
• vue1 standalone npm repo (branch)
• 如果clientX/Y没变 则忽略 修复"鼠标停留在panel上干扰键盘选择" Mouse hover disturbs keyboard select #12
• hoverSelect prop Mouse hover disturbs keyboard select #12
• "Use vue-at with textarea" Use vue-at with textarea #11
• "Insert html instead of text" Insert html instead of text #13, Functionality Request: Allow other autocomplete (emoji with : and Tasks with /) #53, Templated tags #54
• automated testing Templated tags #54 (comment)
• bug: 一个name包含另一个name+空格 如@"all" @"Marshall Yu"
• "Better positioning strategy required" Better positioning strategy required #5
• scrollIntoView in firefox add vue-at back with live-demo ready vuejs/awesome-vue#1028
• "Position bug when browser scrollbar is visible" Position bug when browser scrollbar is visible #10
• compatible with vue 1.x This project is awesome, will you support vue1? #4
• getPrecedingRange bug
• feature: custom item templates with avatars
• improve readme motivation
• bug: keydown like shift/ctrl, etc causes cur reset to 0
• missing .npmignore Cannot resolve module 'vue-at' #1

[huangruichang]

very nice

[fritx]

nice 🍻 @huangruichang

[fritx]

• getPrecedingRange bug

// http://stackoverflow.com/questions/15157435/get-last-character-before-caret-position-in-javascript
export function getPrecedingRange() {
  const r = getRange()
  if (r) {
    const range = r.cloneRange()
    range.collapse(true)
    // 修复 "空格+表情+空格+@" range报错 应设(endContainer, 0)
    // stackoverflow上的这段代码有bug
    // var el = closest(range.endContainer, d => d.contentEditable)
    // range.setStart(el, 0)
    range.setStart(range.endContainer, 0)
    return range
  }
}

error stack was:

Uncaught DOMException: Failed to execute 'setStart' on 'Range':
The offset 3 is larger than or equal to the node's length (2).
    at fn (eval at <anonymous> (http://localhost:8081/dist/demo.js:1010:1), <anonymous>:279:11)

[fritx]

• vue2 => vue1:

• webpack boilerplate

# package.json
   "peerDependencies": {
-    "vue": "2.x"
+    "vue": "1.x"
   },
   "devDependencies": {
     "babel-core": "^6.0.0",
     "babel-loader": "^6.0.0",
+    "babel-plugin-transform-runtime": "^6.0.0",
     "babel-preset-es2015": "^6.0.0",
     "babel-preset-stage-0": "^6.16.0",
     // ...
-    "vue": "^2.1.0",
-    "vue-loader": "^10.3.0",
+    "vue": "^1.0.28",
+    "vue-hot-reload-api": "^1.2.0",
+    "vue-html-loader": "^1.0.0",
+    "vue-loader": "^8.2.1",
     "vue-style-loader": "^1.0.0",
-    "vue-template-compiler": "^2.2.4",
-    "webpack": "^2.1.0-beta.25",
-    "webpack-dev-server": "^2.1.0-beta.9"
+    "webpack": "^1.12.2",
+    "webpack-dev-server": "^1.12.0"
   }

# .babelrc
-  "presets": [
-    "stage-0",
-    ["es2015", { "modules": false }]
-  ]
+  "presets": ["es2015", "stage-0"],
+  "plugins": ["transform-runtime"],
+  "comments": false

# webpack/*.js
# ...

• vue options render: h => h(App) => components: { App }
  as inverse process of: fritx/vue-threejs@7976393

# main.js
 new Vue({
-  el: '#app',
-  render: h => h(App)
+  el: 'body',
+  components: { App }
 })

# index.html
   <body>
-    <div id="app"></div>
+    <app></app>
     <script src="/dist/demo.js"></script>
   </body>

• prop nameKey => name-key

[Vue warn]: Possible usage error for prop `namekey` - did you mean `name-key`?
HTML is case-insensitive, remember to use kebab-case for props in templates. (found in component: <at>)

• ref => v-el, li[v-el] => list[v-el].querySelector
  as inverse process of fritx/vue-threejs@d720451

Error: Cannot read property '0' of undefined -- (this.$refs.xx)

-  <div ref="wrap"
+  <div v-el:wrap

• v-for (item, index) => (index, item)

-  <li v-for="(item, index) in atwho.list"
+  <li v-for="(index, item) in atwho.list"

• drop "scoped slot": slot[scope] => slot, span[v-text] => span[data-text]

[Vue warn]: Error when evaluating expression "s.item.name":
TypeError: Cannot read property 'item' of undefined (found in component: <app>)

-      <template slot="item" scope="s">
-        <img :src="s.item.avatar">
-        <span v-text="s.item.name"></span>
+      <template slot="item">
+        <img data-src="item.avatar">
+        <span data-text="item.name"></span>

• "normal slot" dom manipulation: watch+handleStateChange

handleStateChange (state) {
  forEach.call(els, el => {
    const textNode = el.querySelector('[data-text]')
    textNode.textContent = this.itemExpr(item, textExpr)
    const imgNode = el.querySelector('[data-src]')
    imgNode.src = this.itemExpr(item, imgExpr)
  })
}