new Release

GopherJ · May 9, 2018 · 2fd0a7c · 2fd0a7c
1 parent 8a9cbf9
commit 2fd0a7c
Show file tree

Hide file tree

Showing 8 changed files with 111 additions and 18 deletions.
diff --git a/README.md b/README.md
@@ -1,2 +1,5 @@
-# LayoutGrid
+# VueLayoutGrid
 Vue Layout Gridster
+
+## Attention
+This is a project that is designed for working with http://github.com/GopherJ/Vs
diff --git a/dist/LayoutGrid.js b/dist/LayoutGrid.js
diff --git a/dist/LayoutGrid.min.js b/dist/LayoutGrid.min.js
diff --git a/dist/LayoutGrid.min.js.map b/dist/LayoutGrid.min.js.map
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-layout-grid",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "layout gridster with vue",
   "main": "dist/LayoutGrid.min.js",
   "scripts": {

diff --git a/src/components/LayoutGrid/Emotion.vue b/src/components/LayoutGrid/Emotion.vue
@@ -13,5 +13,4 @@
 </script>
 
 <style scoped>
-
 </style>
diff --git a/src/components/LayoutGrid/LayoutGrid.vue b/src/components/LayoutGrid/LayoutGrid.vue
@@ -23,14 +23,15 @@
                 @resized="(i, h, w, hpx, wpx) => onResized(i, h, w, hpx, wpx)"
                 drag-allow-from=".layout-grid-item-header-title"
                 drag-ignore-from=".layout-grid-item-content"
+                v-if="l.show"
                 :key="l.i">
 
                 <div class="layout-grid-item" :class="{ 'layout-grid-item-border': editable }">
 
                     <div class="layout-grid-item-header">
                         <div class="level is-mobile">
 
-                            <div class="level-left" style="margin: 0 auto;">
+                            <div class="level-left">
                                 <div class="level-item">
                                     <span class="layout-grid-item-header-title">
                                         {{ l.title || l.is }}
@@ -76,7 +77,7 @@
 
                         <component
                             :ref="GetRef(l.i)"
-                            :is="l.is && l.data ? l.is : 'emotion'"
+                            :is="canRender(l) ? l.is : 'emotion'"
                             v-bind="l.data || null">
                         </component>
                     </div>
@@ -132,13 +133,15 @@
             onResize(i, h, w) {
                 this.$emit('resize', i, h, w);
 
+                // dynamic component
                 if (this.$refs[this.GetRef(i)][0].safeDraw) {
                     this.$refs[this.GetRef(i)][0].safeDraw();
                 }
             },
             onResized(i, h, w, hpx, wpx) {
                 this.$emit('resized', i, h, w, hpx, wpx);
 
+                // dynamic component
                 if (this.$refs[this.GetRef(i)][0].safeDraw) {
                     this.$refs[this.GetRef(i)][0].safeDraw();
                 }
@@ -155,7 +158,29 @@
                         payload: null
                     });
                 }
-            }
+            },
+            canRender(l) {
+                // design for https://github.com/GopherJ/LayoutGrid
+                switch (l.is) {
+                    case 'd3-pie':
+                    case 'd3-bar':
+                    case 'd3-line':
+                    case 'd3-timeline':
+                    case 'd3-timelion':
+                    case 'd3-multi-line':
+                        return l.data.data.length > 0;
+                        break;
+                    case 'd3-sankey-circular':
+                        return l.data.nodes.length > 0 && l.data.links.length > 0;
+                        break;
+                    case 'd3-metric':
+                        return typeof l.data.data === 'number' || typeof l.data.data === 'string';
+                        break;
+                    default:
+                        return l.is && l.data;
+                        break;
+                }
+            },
         },
         computed: {
             ...mapState('LayoutGrid', [
@@ -186,7 +211,8 @@
         /*https://codepen.io/Hawkun/pen/rsIEp*/
         box-shadow: 2px 0 0 0 #e4e4e4,
         0 2px 0 0 #e4e4e4,
-        2px 2px 0 0 #e4e4e4, /* Just to fix the corner */ 2px 0 0 0 #e4e4e4 inset,
+        2px 2px 0 0 #e4e4e4,
+        2px 0 0 0 #e4e4e4 inset,
         0 2px 0 0 #e4e4e4 inset;
     }
 
@@ -203,6 +229,9 @@
 
         word-break: break-all;
         word-wrap: break-word;
+
+        position: relative;
+        left: 2px;
     }
 
     .layout-grid-item-content {

diff --git a/src/store/LayoutGridStore.js b/src/store/LayoutGridStore.js
@@ -19,6 +19,11 @@ const mutations = {
     ADD_LAYOUT_ITEM({layout}, payload) {
         layout.push(Object.assign(payload, calculateXYI(layout, payload)));
     },
+    UPDATE_LAYOUT_ITEM({layout}, payload) {
+        const {index, layoutItem} = payload;
+
+        Object.assign(layout[index], layoutItem);
+    },
     EDIT_LAYOUT_ITEM({layout}, layoutItem) {
         const index = findLayoutItemIndex(layout, layoutItem.i);
 
@@ -42,6 +47,24 @@ const mutations = {
     },
     SET_LAYOUT(state, layout) {
         state.layout = _.cloneDeep(layout);
+    },
+    SEARCH_LAYOUT_ITEM(state, searchString) {
+        const re = new RegExp(searchString, 'i');
+        const layout = state.layout;
+
+        for (let i = 0, l = layout.length; i < l; i += 1) {
+            const layoutItem = layout[i];
+
+            if (re.test(layoutItem.title) || re.test(layoutItem.is) || re.test(layoutItem.i)) {
+                Object.assign(layoutItem, {
+                    show: true
+                });
+            } else {
+                Object.assign(layoutItem, {
+                    show: false
+                });
+            }
+        }
     }
 };
 
@@ -50,7 +73,46 @@ const getters = {
         return state.layout.length > 0;
     },
     GET_LAYOUT(state) {
-        return _.cloneDeep(state.layout);
+        return state.layout;
+    },
+    GET_LAYOUT_CONFIG(state) {
+        const layout = state.layout,
+            layoutConfig = [];
+
+        for (let i = 0, l = layout.length; i < l; i += 1) {
+            const layoutItem = cloneLayoutItem(layout, i);
+
+            switch (layoutItem.is) {
+                case 'd3-pie':
+                case 'd3-bar':
+                case 'd3-line':
+                case 'd3-timeline':
+                case 'd3-timelion':
+                case 'd3-multi-line':
+                    layoutItem.data.data = [];
+
+                    layoutConfig.push(layoutItem);
+                    break;
+                case 'd3-sankey-circular':
+                    layoutItem.data.nodes = [];
+                    layoutItem.data.links = [];
+
+                    layoutConfig.push(layoutItem);
+                    break;
+                case 'd3-metric':
+                    layoutItem.data.data = null;
+
+                    layoutConfig.push(layoutItem);
+                    break;
+                default:
+                    layoutItem.data = null;
+
+                    layoutConfig.push(layoutItem);
+                    break;
+            }
+        }
+
+        return layoutConfig;
     }
 };