vue-at
vue-at copied to clipboard
fritx
Backlog
- [ ] compatibility note: display:flex is used http://caniuse.com/#search=flex
- [ ] bug: insertItem in the middle of @'d name
- [x] remote suggestion request #16
- [x] v-model support #29, #43
- [x] scss error in vueify #37
- [ ] dep: insert-text-2
- [ ] getCurrentEditor editable/textarea
- [ ] customized inserted user id and emit a handler? #28
- [ ] maybe close panel at blur/esc (hideOnBlur prop with timer handling) #20
- [ ] insertAt method #26
- [ ] bug: openPanel index error after "delete"
- [x] IE9~11/Edge compatibility #22
- [x] textarea #11
- [x] Position bug when browser scrollbar is visible #10
- [x] multiple at chars #6
- [x] prop
default: () => [] - [ ] vue1: data-atwho-attrs
- [ ] ~~vue1 standalone npm repo~~ (branch)
- [ ] 如果clientX/Y没变 则忽略 修复"鼠标停留在panel上干扰键盘选择" #12
- [x] hoverSelect prop #12
- [x] "Use vue-at with textarea" #11
- [ ] "Insert html instead of text" #13, #53, #54
- [ ] automated testing https://github.com/fritx/vue-at/pull/54#issuecomment-377775608
- [ ] bug: 一个name包含另一个name+空格 如@"all" @"Marshall Yu"
- [ ] "Better positioning strategy required" #5
- [x] scrollIntoView in firefox https://github.com/vuejs/awesome-vue/pull/1028
- [x] "Position bug when browser scrollbar is visible" #10
- [x] compatible with vue 1.x #4
- [x] getPrecedingRange bug
- [x] feature: custom item templates with avatars
- [x] improve readme motivation
- [x] bug: keydown like shift/ctrl, etc causes cur reset to 0
- [x] missing .npmignore #1
- [x] 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)
-
[x] vue2 => vue1:
-
[x] 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
# ...
- [x] vue options
render: h => h(App)=>components: { App }as inverse process of: https://github.com/fritx/vue-threejs/commit/797639387d6021230e0fe9fcb1601c72aaedd4a1
# 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>
- [x] 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>)
- [x]
ref=>v-el,li[v-el]=>list[v-el].querySelectoras inverse process of https://github.com/fritx/vue-threejs/commit/d7204516a3ce3d4b6273cd4627c059ccbf5d0272
Error: Cannot read property '0' of undefined -- (this.$refs.xx)
- <div ref="wrap"
+ <div v-el:wrap
- [x] v-for
(item, index)=>(index, item)
- <li v-for="(item, index) in atwho.list"
+ <li v-for="(index, item) in atwho.list"
- [x] 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>
- [x] "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)
})
}