eoss-ui 0.4.77 → 0.4.79-beta.0

package/packages/form/src/table.vue

@@ -495,9 +495,10 @@
                             v-bind="
                               handleExclAttribute({
                                 data: inline,
-                                attrs: ['disabled']
+                                attrs: ['disabled', 'type']
                               })
                             "
+                            @click="handleClick(inline)"
                           ></es-button>
                           <div
                             v-else-if="!inline.hide"
@@ -1298,7 +1299,7 @@ export default {
       this.cols = widths;
     },
     handleClick(res) {
-      this.$emit('click', res, this.models);
+      this.$emit('btnClick', res, this.models);
     },
     handleChange(res, value, data) {
       if (res.events && res.events.change) {

package/packages/layout/index.js

@@ -1,5 +1,5 @@
-import EsLogin from './src/main';
+import EsLayout from './src/main';
 
-EsLogin.install = Vue => Vue.component(EsLogin.name, EsLogin);
+EsLayout.install = Vue => Vue.component(EsLayout.name, EsLayout);
 
-export default EsLogin;
+export default EsLayout;

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>