Fastmenu: force it to show when attempting to add items

vispa/static/css/index.css

@@ -162,6 +162,7 @@ body{overflow:hidden}
 .vispa-body .vispa-ui-tabber>.vispa-ui-dropzone,.vispa-body .vispa-ui-tabber>.vispa-ui-wrapper{position:absolute;top:30px;right:0;bottom:0;left:0}
 .vispa-body .vispa-ui-tabber>.vispa-ui-wrapper>.vispa-mainview{position:absolute;top:0;right:0;bottom:0;left:0;background-color:#fff;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:column;-ms-flex-flow:column;flex-flow:column;height:100%}
 .vispa-body .vispa-ui-tabber>.vispa-ui-wrapper>.vispa-mainview>.vispa-fastmenu{-webkit-box-flex:0;-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;padding:2px 6px;border-bottom:1px solid #b8b8b8}
+.vispa-body .vispa-ui-tabber>.vispa-ui-wrapper>.vispa-mainview>.vispa-fastmenu.force{min-height:30px}
 .vispa-body .vispa-ui-tabber>.vispa-ui-wrapper>.vispa-mainview>.vispa-fastmenu>div{margin:2px}
 .vispa-body .vispa-ui-tabber>.vispa-ui-wrapper>.vispa-mainview>.vispa-content{-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;overflow:auto;position:relative}
 .vispa-centerview-content-container{position:absolute;top:30px;right:0;bottom:0;left:0}

vispa/static/css/index.less

@@ -754,6 +754,9 @@ body {
         flex-flow: column;
         height: 100%;
         > .vispa-fastmenu {
+            &.force {
+                min-height: 30px;
+            }
             flex: 0 1 auto;
             padding: 2px 6px;
             border-bottom: 1px solid @tab-color-border;

vispa/static/html/index/vue/fastmenu.html

-<div class="vispa-fastmenu" :id="id">
+<div :class="{
+  'vispa-fastmenu': true,
+  'force': force,
+}" :id="id">
   <fastmenu-entry
     v-for="item in items"
     :item="item"

vispa/static/js/vue/fastmenu.js

@@ -47,7 +47,9 @@ define([
             $(self.root.$els.btn).dropdown("toggle");
           },
           stop: function() {
-            fastmenu.force = false;
+            Vue.nextTick(function() {
+              fastmenu.force = false;
+            });
           }
         });
         this.$watch("inFastMenuBar", function(){
@@ -119,9 +121,9 @@ define([
   });
   var FastMenuBar = Vue.extend({
     template: tFastMenu,
-    props: {
-      enabled: Boolean,
-    },
+    data: function () {return {
+      force: false,
+    };},
     ready: function() {
       var self = this;
       $(this.$el).sortable({
@@ -193,7 +195,7 @@ define([
         return ret;
       },
       enabled: function() {
-        return !!this.item.length || this.forced;
+        return !!this.item.length || this.force;
       },
       id: function() {
         return fastMenuId(this.instance);