mirrors/vue-tribute
2
0
Fork 0
mirror of https://github.com/tenrok/vue-tribute.git synced 2026-06-10 10:02:27 +03:00
Code Activity

Support reactive items. Separate options from items.

Browse Source
This commit is contained in:
Aurel
2016-12-05 22:40:08 +01:00
parent a22d2827dc
commit 7034282bed
5 changed files with 72 additions and 93 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)
},
})
}