mirrors/vue-tribute
2
0
Fork 0
mirror of https://github.com/tenrok/vue-tribute.git synced 2026-06-08 01:22:26 +03:00
Code Activity

Merge pull request #2 from deckardai/master

Browse Source 
Support reactive items. Separate options from items.
This commit is contained in:
Collin Henderson
2016-12-07 14:40:11 -05:00
committed by GitHub
parent a22d2827dc 62aa6aa6cd
commit 6ee239d9b4
6 changed files with 87 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+22 -12
View File
@@ -23,25 +23,35 @@ $ npm install vue-tribute --save
import Vue from "vue";
import VueTribute from "vue-tribute";
Vue.use(VueTribute, options);
Vue.use(VueTribute, globalOptions);
```
> The `options` parameter is optional.
> The `globalOptions` parameter is optional.
...and inside your template, bind a dynamic `values` parameter to some data:
`<input type='text' :values='items' v-tribute />`
The `values` array should be an array of objects that contain a key and value like so:
```
[
{key: "Phil Heartman", value: "pheartman"},
{key: "Gordon Ramsey", value: "gramsey"}
]
<input type='text'
v-tribute='tributeUsers'
:tributeoptions='{ trigger:"#" }' />
```
You can modify this structure using the built-in [Tribute options](https://github.com/zurb/tribute#a-collection).
The value of `v-tribute` should be an array of objects that contain a `key` to search and a `value` to be inserted. We recommend using a Vue computed property to format your data like so:
```
computed: {
tributeUsers: function() {
return [
{key: "Phil Heartman", value: "pheartman"},
{key: "Gordon Ramsey", value: "gramsey"}
]
},
},
```
The `tributeoptions` attribute is optional. It is merged with `globalOptions` and takes precendence.
See the available options [here](https://github.com/zurb/tribute#a-collection).
## Events
@@ -49,4 +59,4 @@ Tribute broadcasts two events — a `tribute-replaced` event, and a `tribute-no-
## License
MIT © [Collin Henderson](https://github.com/syropian)
MIT © [Collin Henderson](https://github.com/syropian), [Aurélien Nicolas](https://github.com/deckardai)
index.js
+16 -26
View File
@@ -8,44 +8,34 @@ if (!Tribute) {
throw new Error("[vue-tribute] cannot locate tributejs");
}
exports.install = function (Vue, options) {
exports.install = function (Vue, globalOptions) {
Vue.directive("tribute", {
params: ["values"],
params: ["tributeoptions"],
tribute: null,
paramWatchers: {
values: function values(val, oldVal) {
this.setValues(val);
}
},
/** Create a Tribute instance for this element */
bind: function bind() {
var _this = this;
// If it has a "values" property, it's actually a collection
if (this.params.values.hasOwnProperty("values")) {
this.tribute = new Tribute({
collection: this.params.values
});
} else {
this.tribute = new Tribute(Object.assign({
values: this.params.values
}, options));
}
this.tribute = new Tribute(Object.assign({
values: []
}, globalOptions, this.params.tributeoptions));
this.tribute.attach(this.el);
this.el.addEventListener("tribute-replaced", function (e) {
_this.vm.$emit("tribute-replaced");
_this.vm.$emit("tribute-replaced", e);
});
this.el.addEventListener("tribute-no-match", function (e) {
_this.vm.$emit("tribute-no-match");
_this.vm.$emit("tribute-no-match", e);
});
},
setValues: function setValues(values) {
// If it has a "values" property, it's actually a collection
if (values.hasOwnProperty("values")) {
this.tribute.collection = values;
} else {
this.tribute.collection[0].values = values;
}
/** Set the initial or updated items */
update: function update(values) {
this.tribute.append(0, values, /* replace= */true);
}
});
};
index.umd.js
+16 -26
View File
@@ -10,44 +10,34 @@
throw new Error("[vue-tribute] cannot locate tributejs");
}
exports.install = function (Vue, options) {
exports.install = function (Vue, globalOptions) {
Vue.directive("tribute", {
params: ["values"],
params: ["tributeoptions"],
tribute: null,
paramWatchers: {
values: function values(val, oldVal) {
this.setValues(val);
}
},
/** Create a Tribute instance for this element */
bind: function bind() {
var _this = this;
// If it has a "values" property, it's actually a collection
if (this.params.values.hasOwnProperty("values")) {
this.tribute = new Tribute({
collection: this.params.values
});
} else {
this.tribute = new Tribute(Object.assign({
values: this.params.values
}, options));
}
this.tribute = new Tribute(Object.assign({
values: []
}, globalOptions, this.params.tributeoptions));
this.tribute.attach(this.el);
this.el.addEventListener("tribute-replaced", function (e) {
_this.vm.$emit("tribute-replaced");
_this.vm.$emit("tribute-replaced", e);
});
this.el.addEventListener("tribute-no-match", function (e) {
_this.vm.$emit("tribute-no-match");
_this.vm.$emit("tribute-no-match", e);
});
},
setValues: function setValues(values) {
// If it has a "values" property, it's actually a collection
if (values.hasOwnProperty("values")) {
this.tribute.collection = values;
} else {
this.tribute.collection[0].values = values;
}
/** Set the initial or updated items */
update: function update(values) {
this.tribute.append(0, values, /* replace= */true);
}
});
};
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "vue-tribute",
"version": "0.1.3",
"version": "0.2.0",
"description": "A Vue.js wrapper for Zurb's Tribute library for native @mentions",
"license": "MIT",
"repository": "syropian/vue-tribute",
src/index.js
+17 -28
View File
@@ -4,42 +4,31 @@ if (!Tribute) {
throw new Error("[vue-tribute] cannot locate tributejs")
}
exports.install = function (Vue, options) {
exports.install = function (Vue, globalOptions) {
Vue.directive("tribute", {
params: ["values"],
params: ["tributeoptions"],
tribute: null,
paramWatchers: {
values (val, oldVal) {
this.setValues(val)
}
},
bind () {
// If it has a "values" property, it's actually a collection
if (this.params.values.hasOwnProperty("values")) {
this.tribute = new Tribute({
collection: this.params.values
})
} else {
this.tribute = new Tribute(Object.assign({
values: this.params.values
}, options))
}
/** Create a Tribute instance for this element */
bind() {
this.tribute = new Tribute(Object.assign({
values: [],
}, globalOptions, this.params.tributeoptions))
this.tribute.attach(this.el)
this.el.addEventListener("tribute-replaced", e => {
this.vm.$emit("tribute-replaced")
this.vm.$emit("tribute-replaced", e)
})
this.el.addEventListener("tribute-no-match", e => {
this.vm.$emit("tribute-no-match")
this.vm.$emit("tribute-no-match", e)
})
},
setValues (values) {
// If it has a "values" property, it's actually a collection
if (values.hasOwnProperty("values")) {
this.tribute.collection = values
} else {
this.tribute.collection[0].values = values
}
}
/** Set the initial or updated items */
update(values) {
this.tribute.append(0, values, /* replace= */ true)
},
})
}
test/VueTribute.spec.js
+15 -6
View File
@@ -7,7 +7,10 @@ beforeEach(() => {
vm = new Vue({
el: document.body,
replace: false,
template: "<input type='text' :values='items' v-tribute />",
template: `<input type='text'
v-tribute='items'
:tributeoptions='{trigger: "#"}'
/>`,
data(){
return {
items: [
@@ -27,8 +30,14 @@ describe("vue-tribute", () => {
expect(typeof vm.$options.directives["tribute"]).toEqual("object")
})
it("triggers the param watcher when the underlying model changes", (done) => {
spyOn(vm.$options.directives["tribute"].paramWatchers, "values").and.callThrough()
it("supports tribute options", () => {
expect(vm._directives[0].tribute.collection[0].trigger).toEqual("#")
})
it("updates the items when the underlying model changes", (done) => {
const directive = vm._directives[0]
expect(directive.tribute.collection[0].values).toEqual(vm.items)
const newItems = [
{key: "Kerem Suer", value: "kerem"},
@@ -36,9 +45,9 @@ describe("vue-tribute", () => {
]
vm.$set("items", newItems)
setTimeout(() => {
expect(vm.$options.directives["tribute"].paramWatchers.values).toHaveBeenCalled()
Vue.nextTick(() => {
expect(directive.tribute.collection[0].values).toEqual(newItems)
done()
}, 0)
})
})
})