Skip to content

Commit

Permalink
[UPDATE]
Browse files Browse the repository at this point in the history
  • Loading branch information
@GopherJ
GopherJ committed Sep 16, 2018
1 parent f769cfb commit ace922a
Show file tree
Hide file tree
Showing 9 changed files with 133 additions and 75 deletions.
46 changes: 36 additions & 10 deletions dist/LayoutGrid.js
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions dist/LayoutGrid.min.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/LayoutGrid.min.js.map
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "vue-layout-grid",
"version": "0.2.1",
"version": "0.2.2",
"description": "layout gridster with vue",
"main": "dist/LayoutGrid.min.js",
"scripts": {
Expand Down
127 changes: 67 additions & 60 deletions src/components/LayoutGrid/LayoutGrid.vue
View file
Original file line number Diff line number Diff line change
@@ -1,93 +1,94 @@
<template>
<div class="layout-grid" ref="LayoutGrid">

<grid-layout
:layout="layout"
:row-height="rowHeight"
:margin="margin"
:is-draggable="editable"
:is-resizable="editable"
@layout-updated="(n) => onLayoutUpdated(n)">

<grid-item
v-for="(l, idx) of layout"
:x="l.x"
:y="l.y"
:w="l.w"
:h="l.h"
:i="l.i"
:min-w="minW"
@resize="(i, h, w) => onResize(i, h, w)"
@move="(i, x, y) => onMove(i, x, y)"
@moved="(i, x, y) => onMoved(i, x, y)"
@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"
: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">
<div class="level-item">
<div class="layout-grid-item-header-title">
{{ l.title || null }}
<u-card :label="$t('rtAnalytics.dashboard.label')">
<div class="layout-grid" ref="LayoutGrid">
<grid-layout
:layout="layout"
:row-height="rowHeight"
:margin="margin"
:is-draggable="editable"
:is-resizable="editable"
@layout-updated="(n) => onLayoutUpdated(n)">

<grid-item
v-for="(l, idx) of layout"
:x="l.x"
:y="l.y"
:w="l.w"
:h="l.h"
:i="l.i"
:min-w="minW"
@resize="(i, h, w) => onResize(i, h, w)"
@move="(i, x, y) => onMove(i, x, y)"
@moved="(i, x, y) => onMoved(i, x, y)"
@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"
: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">
<div class="level-item">
<div class="layout-grid-item-header-title">
{{ l.title || null }}
</div>
</div>
</div>
</div>

<div class="level-right" v-if="editable">
<div class="level-item">
<div class="level-right" v-if="editable">
<div class="level-item">
<span v-if="!isExpanded(l.i)"
class="icon">
<i class="mdi mdi-arrow-expand mdi-18px"
@click.stop="EXPAND_LAYOUT_ITEM(idx)"></i>
</span>

<span v-else class="icon">
<span v-else class="icon">
<i class="mdi mdi-arrow-collapse mdi-18px"
@click.stop="COLLAPSE_LAYOUT_ITEM(l.i)"></i>
</span>
</div>
</div>

<div class="level-item">
<div class="level-item">
<span class="icon">
<i class="mdi mdi-pencil mdi-18px" @click.stop="onEdit(l.i)"></i>
</span>
</div>
</div>

<div class="level-item">
<div class="level-item">
<span class="icon">
<i class="mdi mdi-close-outline mdi-18px"
@click.stop="DELETE_LAYOUT_ITEM(idx);"></i>
</span>
</div>
</div>
</div>
</div>
</div>

<div class="layout-grid-item-content" :style="{ height : `${l.h * rowHeight - 30}px` }">
<component
v-show="true"
:ref="`LayoutGridItem${l.i}`"
:is="canRender(l) ? l.is : 'emotion'"
v-bind="canRender(l) ? l.data : null">
</component>
<div class="layout-grid-item-content" :style="{ height : `${l.h * rowHeight - 30}px` }">
<component
v-show="true"
:ref="`LayoutGridItem${l.i}`"
:is="canRender(l) ? l.is : 'emotion'"
v-bind="canRender(l) ? l.data : null">
</component>

<Table v-show="false" :data="l.data.data" v-if="Array.isArray(l.data.data)"></Table>
</div>
<Table v-show="false" :data="l.data.data" v-if="Array.isArray(l.data.data)"></Table>
</div>

<span class="icon" style="position: absolute; left: 0; bottom: 0;"
v-if="Array.isArray(l.data.data)">
<span class="icon" style="position: absolute; left: 0; bottom: 0;"
v-if="Array.isArray(l.data.data)">
<i class="mdi mdi-arrow-up-drop-circle-outline mdi-18px"
@click.stop="(ev) => toggle(ev, l.i)">
@click.stop="(ev) => toggle(ev, l.i)">
</i>
</span>
</div>
</grid-item>
</grid-layout>
</div>
</div>
</grid-item>
</grid-layout>
</div>
</u-card>
</template>

<script>
Expand All @@ -97,6 +98,7 @@
import Table from './Table';
import GridItem from '../GridItem';
import GridLayout from '../GridLayout';
import UCard from '../UCard';
const isObject = o => String(o) === '[object Object]';
const isArrayAndHasLength = arr => Array.isArray(arr) && arr.length > 0;
Expand Down Expand Up @@ -268,7 +270,7 @@
case 'd3-circle':
return !isEmpty(l.data.data);
}
},
}
},
computed: {
...mapState('LayoutGrid', [
Expand All @@ -277,6 +279,7 @@
])
},
components: {
UCard,
GridLayout,
GridItem,
Table,
Expand Down Expand Up @@ -355,6 +358,10 @@
</style>

<style>
.layout-grid {
background-color: #FFFFFF;
}
.vue-grid-item.vue-grid-placeholder {
display: none;
}
Expand Down
22 changes: 22 additions & 0 deletions src/components/UCard/UCard.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<template>
<div class="u-card">
<div class="u-card-heading">
<strong v-text="label"></strong>
</div>

<div class="u-card-body">
<slot></slot>
</div>
</div>
</template>

<script>
export default {
name: 'u-card',
props: {
label: {
type: String
}
}
}
</script>
3 changes: 3 additions & 0 deletions src/components/UCard/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import UCard from './UCard';

export default UCard;
1 change: 1 addition & 0 deletions src/store/LayoutGridStore.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,7 @@ const getters = {
case 'd3-timelion':
case 'd3-multi-line':
case 'd3-grouped-area':
case 'd3-word-cloud':
case 'd3-area':
layoutItem.data.data = [];
break;
Expand Down
1 change: 0 additions & 1 deletion src/utils/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -187,7 +187,6 @@ export function getAllCollisions(layout, layoutItem) {
* @return {Array} Array of static layout items..
*/
export function getStatics(layout) {
//return [];
return layout.filter((l) => l.static);
}

Expand Down

0 comments on commit ace922a

Please sign in to comment.