Improve TagList when there are no tags.
authorAlexandre Segura <mex.zktk@gmail.com>
Wed, 22 Feb 2017 15:39:28 +0100
changeset 341 3b49e0484af2
parent 340 4f001f612c24
child 342 ebec1d59dc74
Improve TagList when there are no tags.
src_js/iconolab-bundle/src/components/tagform/TagList.vue
--- a/src_js/iconolab-bundle/src/components/tagform/TagList.vue	Wed Feb 22 15:38:11 2017 +0100
+++ b/src_js/iconolab-bundle/src/components/tagform/TagList.vue	Wed Feb 22 15:39:28 2017 +0100
@@ -1,10 +1,11 @@
 <template>
     <div>
+        <div v-show="tags.length === 0" class="alert alert-info">Pas de mots-clé pour le moment</div>
         <div class="tag-list">
             <tag-list-item ref="items"
                 class="tag-list-item"
                 v-for="(tag, index) in tags"
-                v-if="tags.length > 0"
+                v-show="tags.length > 0"
                 v-bind:label="tag.tag_label"
                 v-bind:index="index"
                 v-bind:accuracy="tag.accuracy"
@@ -25,15 +26,11 @@
         props: {
             originalTags: {
                 type: Array,
-                default: function () {
-                    return [];
-                }
+                default: function() { return []; }
             },
             readonly: {
                 type: Boolean,
-                default: function () {
-                    return false;
-                }
+                default: false
             },
         },
         data() {
@@ -62,6 +59,7 @@
 
         methods: {
             hideAll: function() {
+                if (!this.$refs.items) { return; }
                 this.$refs.items.forEach((item) => item.hide());
             },
             replaceItemAt: function(index, data) {
@@ -80,6 +78,11 @@
 
 <style scoped>
 
+.alert {
+    padding: 10px;
+    font-size: 12px;
+}
+
 .tag-list {
     margin-bottom: 15px;
 }