eoss-ui 0.7.18 → 0.7.20

package/packages/layout/index.js

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

package/packages/layout/src/item.vue

@@ -1,152 +1,152 @@
-<template>
-  <div
-    ref="move"
-    class="es-layout-item"
-    :class="defaultClasss"
-    :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,
-    index: Number
-  },
-  computed: {
-    defaultClasss() {
-      return {
-        'es-dragging': this.dragging
-      };
-    },
-    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 },
-      interaction: null,
-      dragging: false
-    };
-  },
-  created() {
-    this.position = {
-      x: parseInt(this.left) || 0,
-      y: parseInt(this.top) || 0
-    };
-    console.log(this.position);
-  },
-  mounted() {
-    console.log(interact.feedback);
-    this.interaction = interact(this.$refs.move);
-    this.interaction.draggable({
-      // modifiers: [
-      //   interact.modifiers.restrictRect({
-      //     restriction: 'parent',
-      //     endOnly: false
-      //   })
-      // ],
-      // listeners: {
-      //   start: (event) => {
-      //     this.dragging = true;
-      //     console.log(event.type, event.target, 111);
-      //   },
-      //   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)`;
-      //   },
-      //   end: (event) => {
-      //     this.dragging = false;
-      //     console.log(event.type, event.target, 222);
-      //   }
-      // }
-      inertia: true,
-      //autoScroll: { container: '.container' },
-      listeners: [interact.feedback.pointers()],
-      modifiers: [
-        interact.modifiers.restrict({
-          restriction: 'html',
-          elementRect: { left: 0, top: 0, right: 1, bottom: 1 }
-        }),
-        interact.modifiers.transform(),
-        interact.modifiers.spring()
-      ]
-    });
-    this.interaction.resizable({
-      modifiers: [
-        // keep the edges inside the parent
-        interact.modifiers.restrictEdges({
-          outer: 'parent'
-        }),
-
-        // minimum size
-        interact.modifiers.restrictSize({
-          min: { width: 100, height: 100 }
-        })
-      ],
-
-      //inertia: true,
-      edges: { top: true, left: true, bottom: true, right: true },
-      listeners: {
-        move: function (event) {
-          console.log(1212);
-          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>
+<template>
+  <div
+    ref="move"
+    class="es-layout-item"
+    :class="defaultClasss"
+    :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,
+    index: Number
+  },
+  computed: {
+    defaultClasss() {
+      return {
+        'es-dragging': this.dragging
+      };
+    },
+    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 },
+      interaction: null,
+      dragging: false
+    };
+  },
+  created() {
+    this.position = {
+      x: parseInt(this.left) || 0,
+      y: parseInt(this.top) || 0
+    };
+    console.log(this.position);
+  },
+  mounted() {
+    console.log(interact.feedback);
+    this.interaction = interact(this.$refs.move);
+    this.interaction.draggable({
+      // modifiers: [
+      //   interact.modifiers.restrictRect({
+      //     restriction: 'parent',
+      //     endOnly: false
+      //   })
+      // ],
+      // listeners: {
+      //   start: (event) => {
+      //     this.dragging = true;
+      //     console.log(event.type, event.target, 111);
+      //   },
+      //   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)`;
+      //   },
+      //   end: (event) => {
+      //     this.dragging = false;
+      //     console.log(event.type, event.target, 222);
+      //   }
+      // }
+      inertia: true,
+      //autoScroll: { container: '.container' },
+      listeners: [interact.feedback.pointers()],
+      modifiers: [
+        interact.modifiers.restrict({
+          restriction: 'html',
+          elementRect: { left: 0, top: 0, right: 1, bottom: 1 }
+        }),
+        interact.modifiers.transform(),
+        interact.modifiers.spring()
+      ]
+    });
+    this.interaction.resizable({
+      modifiers: [
+        // keep the edges inside the parent
+        interact.modifiers.restrictEdges({
+          outer: 'parent'
+        }),
+
+        // minimum size
+        interact.modifiers.restrictSize({
+          min: { width: 100, height: 100 }
+        })
+      ],
+
+      //inertia: true,
+      edges: { top: true, left: true, bottom: true, right: true },
+      listeners: {
+        move: function (event) {
+          console.log(1212);
+          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,31 +1,31 @@
-<template>
-  <div class="es-layout">
-    <layout-item></layout-item>
-    <layout-item top="100px"></layout-item>
-    <layout-item
-      v-for="(item, index) in contents"
-      :key="item.id || index"
-      v-bind="{ ...item, disabled: disabled }"
-    ></layout-item>
-  </div>
-</template>
-<script>
-import layoutItem from './item.vue';
-export default {
-  name: 'EsLayout',
-  components: { layoutItem },
-  props: {
-    contents: Array,
-    disabled: Boolean
-  },
-  computed: {},
-  watch: {},
-  data() {
-    return {};
-  },
-  created() {},
-  mounted() {},
-  methods: {},
-  beforeDestroy() {}
-};
-</script>
+<template>
+  <div class="es-layout">
+    <layout-item></layout-item>
+    <layout-item top="100px"></layout-item>
+    <layout-item
+      v-for="(item, index) in contents"
+      :key="item.id || index"
+      v-bind="{ ...item, disabled: disabled }"
+    ></layout-item>
+  </div>
+</template>
+<script>
+import layoutItem from './item.vue';
+export default {
+  name: 'EsLayout',
+  components: { layoutItem },
+  props: {
+    contents: Array,
+    disabled: Boolean
+  },
+  computed: {},
+  watch: {},
+  data() {
+    return {};
+  },
+  created() {},
+  mounted() {},
+  methods: {},
+  beforeDestroy() {}
+};
+</script>

package/packages/login/index.js

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