eoss-ui 0.4.78 → 0.4.79

package/packages/layout/src/item.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="es-layout-item" ref="move" :style="defaultaStyle">
+    <es-card> </es-card>
+    <div class="es-layout-resizable-width"></div>
+    <div class="es-layout-resizable-height"></div>
+    <div class="es-layout-resizable"></div>
+  </div>
+</template>
+<script>
+// import '@interactjs/auto-start';
+// import '@interactjs/auto-scroll';
+// import '@interactjs/actions/drag';
+// import '@interactjs/actions/resize';
+// import '@interactjs/modifiers';
+// import '@interactjs/dev-tools';
+import interact from 'interactjs';
+export default {
+  name: 'LayoutItem',
+  components: {},
+  props: {
+    redact: {
+      type: Boolean,
+      default: true
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '100px'
+    },
+    left: String,
+    top: String
+  },
+  computed: {
+    defaultaStyle() {
+      return {
+        width: this.width,
+        height: this.height,
+        left: this.left,
+        top: this.top
+      };
+    },
+    cardStyle() {
+      return {
+        width: this.width,
+        height: this.height
+      };
+    }
+  },
+  watch: {},
+  data() {
+    return {
+      position: { x: 0, y: 0 },
+      move: null
+    };
+  },
+  created() {
+    this.position = {
+      x: parseInt(this.left) || 0,
+      y: parseInt(this.top) || 0
+    };
+    console.log(this.position);
+  },
+  mounted() {
+    console.log(interact, this.$refs.move);
+    this.move = interact(this.$refs.move);
+    this.move.draggable({
+      listeners: {
+        start: (event) => {
+          console.log(event.type, event.target);
+        },
+        move: (event) => {
+          this.position.x += event.dx;
+          this.position.y += event.dy;
+          event.target.style.transform = `translate(${this.position.x}px, ${this.position.y}px)`;
+        }
+      }
+    });
+    this.move.resizable({
+      edges: { top: true, left: true, bottom: true, right: true },
+      listeners: {
+        move: function (event) {
+          let { x, y } = event.target.dataset;
+
+          x = (parseFloat(x) || 0) + event.deltaRect.left;
+          y = (parseFloat(y) || 0) + event.deltaRect.top;
+
+          Object.assign(event.target.style, {
+            width: `${event.rect.width}px`,
+            height: `${event.rect.height}px`,
+            transform: `translate(${x}px, ${y}px)`
+          });
+
+          Object.assign(event.target.dataset, { x, y });
+        }
+      }
+    });
+  },
+  methods: {},
+  beforeDestroy() {}
+};
+</script>

package/packages/layout/src/main.vue

@@ -1,8 +1,13 @@
-<template></template>
+<template>
+  <div class="es-layout">
+    <layout-item></layout-item>
+  </div>
+</template>
 <script>
+import layoutItem from './item.vue';
 export default {
   name: 'EsLayout',
-  components: {},
+  components: { layoutItem },
   props: {},
   computed: {},
   watch: {},