Skip to content

Instantly share code, notes, and snippets.

@onefriendaday
Created January 7, 2019 11:53
Show Gist options
  • Save onefriendaday/1390efffdaed6b038db3c21191c538f1 to your computer and use it in GitHub Desktop.
Save onefriendaday/1390efffdaed6b038db3c21191c538f1 to your computer and use it in GitHub Desktop.
Bullet point plugin
const Fieldtype = {
mixins: [window.Storyblok.plugin],
template: `<div class="List">
<ol class="uk-list uk-margin-bottom-remove">
<li
v-for="(item, index) in model.items"
:key="index"
class="uk-flex uk-flex-middle uk-margin-small-bottom">
<input
v-model="model.items[index]"
class="uk-form-small uk-width-1-1">
<a class="assets__item-trash"
@click="removeItem(index)">
<i class="uk-icon-minus-circle"></i>
</a>
</li>
</ol>
<a
v-if="!limitReached"
class="blok__full-btn uk-margin-small-top"
@click="addItem">
<i class="uk-icon-plus-circle uk-margin-small-right"/>
Add item
</a>
</div>`,
computed: {
limitReached() {
return this.options.limit && this.model.items.length >= this.options.limit;
}
},
methods: {
addItem() {
this.model.items.push("");
},
removeItem(index) {
this.model.items = this.model.items.filter(function (_, i) {
return i !== index;
});
},
initWith() {
return {
items: ["Bullet point 1"],
plugin: "list"
};
}
},
watch: {
'model': {
handler: function (value) {
this.$emit('changed-model', value);
},
deep: true
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment