feat: resize and drag component

package-lock.json

@@ -14726,6 +14726,90 @@
         }
       }
     },
+    "postcss-html": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/postcss-html/-/postcss-html-1.3.0.tgz",
+      "integrity": "sha512-ewbwd7OGW4dLsErtvZH9HpVMEcXnlhYSzKsr7MepGlOT8imHTIZ/+pdfEruLS+hTYapLTQAWDnoQcJpsYU4uRw==",
+      "dev": true,
+      "requires": {
+        "htmlparser2": "^7.1.2",
+        "postcss": "^8.4.0",
+        "postcss-safe-parser": "^6.0.0"
+      },
+      "dependencies": {
+        "dom-serializer": {
+          "version": "1.3.2",
+          "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
+          "integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==",
+          "dev": true,
+          "requires": {
+            "domelementtype": "^2.0.1",
+            "domhandler": "^4.2.0",
+            "entities": "^2.0.0"
+          },
+          "dependencies": {
+            "entities": {
+              "version": "2.2.0",
+              "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+              "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+              "dev": true
+            }
+          }
+        },
+        "domelementtype": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
+          "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==",
+          "dev": true
+        },
+        "domutils": {
+          "version": "2.8.0",
+          "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
+          "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
+          "dev": true,
+          "requires": {
+            "dom-serializer": "^1.0.1",
+            "domelementtype": "^2.2.0",
+            "domhandler": "^4.2.0"
+          }
+        },
+        "entities": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz",
+          "integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==",
+          "dev": true
+        },
+        "htmlparser2": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-7.2.0.tgz",
+          "integrity": "sha512-H7MImA4MS6cw7nbyURtLPO1Tms7C5H602LRETv95z1MxO/7CP7rDVROehUYeYBUYEON94NXXDEPmZuq+hX4sog==",
+          "dev": true,
+          "requires": {
+            "domelementtype": "^2.0.1",
+            "domhandler": "^4.2.2",
+            "domutils": "^2.8.0",
+            "entities": "^3.0.1"
+          }
+        },
+        "postcss": {
+          "version": "8.4.5",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.5.tgz",
+          "integrity": "sha512-jBDboWM8qpaqwkMwItqTQTiFikhs/67OYVvblFFTM7MrZjt6yMKd6r2kgXizEbTTljacm4NldIlZnhbjr84QYg==",
+          "dev": true,
+          "requires": {
+            "nanoid": "^3.1.30",
+            "picocolors": "^1.0.0",
+            "source-map-js": "^1.0.1"
+          }
+        },
+        "source-map-js": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.1.tgz",
+          "integrity": "sha512-4+TN2b3tqOCd/kaGRJ/sTYA0tR0mdXx26ipdolxcwtJVqEnqNYvlCAt1q3ypy4QMlYus+Zh34RNtYLoq2oQ4IA==",
+          "dev": true
+        }
+      }
+    },
     "postcss-load-config": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-2.1.2.tgz",

package.json

@@ -45,6 +45,7 @@
     "husky": "^7.0.4",
     "lint-staged": "^12.1.3",
     "node-sass": "^6.0.1",
+    "postcss-html": "^1.3.0",
     "postcss-scss": "^4.0.2",
     "prettier": "^2.2.1",
     "sass-loader": "^10.2.0",
@@ -111,7 +112,7 @@
     "*.vue": [
       "eslint --fix",
       "prettier --write",
-      "stylelint --fix --custom-syntax postcss-scss"
+      "stylelint --fix --custom-syntax postcss-html"
     ],
     "{!(package)*.json,*.code-snippets,.!(browserslist)*rc}": [
       "prettier --write--parser json"

src/views/dashboard/Edit.vue

@@ -20,84 +20,60 @@ limitations under the License. -->
   </div>
   <div class="flex-h ds-main">
     <div class="ds-layout">
-      <GridLayout
+      <VueDragResize
-        v-model="layout"
+        :isActive="item.static"
-        :col-num="12"
+        :w="item.w"
-        :row-height="30"
+        :h="item.h"
-        :is-draggable="draggable"
+        :x="item.x"
-        :is-resizable="resizable"
+        :y="item.y"
-        :vertical-compact="true"
+        @resizing="resize"
-        :use-css-transforms="true"
+        @dragging="resize"
+        v-for="item in layout"
+        :key="item.i"
       >
-        <GridItem
+        <h3>Hello World {{ item.i }}</h3>
-          v-for="item in layout"
+      </VueDragResize>
-          :static="item.static"
-          :x="item.x"
-          :y="item.y"
-          :w="item.w"
-          :h="item.h"
-          :i="item.i"
-          :key="item.i"
-        >
-          <span class="text">{{ itemTitle(item) }}</span>
-        </GridItem>
-      </GridLayout>
     </div>
     <div class="ds-config">Configurations</div>
   </div>
 </template>
 <script lang="ts">
-import { ref, reactive, defineComponent } from "vue";
+import { toRefs, defineComponent, reactive, ref } from "vue";
 import { ElButton } from "element-plus";
-import VueGridLayout, { GridItemData } from "vue-grid-layout";
+import VueDragResize from "vue-drag-resize";
-interface CustomData extends GridItemData {
+
+export interface GridItemData {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  i: number;
   static: boolean;
 }
 
-console.log(VueGridLayout.GridLayout);
 export default defineComponent({
   name: "dashboardEdit",
   components: {
     ElButton,
-    GridLayout: VueGridLayout.GridLayout,
+    VueDragResize,
-    GridItem: VueGridLayout.GridItem,
   },
   setup() {
-    const layout = reactive<CustomData[]>([
+    const layout = ref<GridItemData[]>([
-      { x: 0, y: 0, w: 2, h: 2, i: "0", static: false },
+      { x: 300, y: 100, w: 200, h: 200, i: 0, static: true },
-      { x: 2, y: 0, w: 2, h: 4, i: "1", static: true },
+      { x: 500, y: 100, w: 200, h: 200, i: 1, static: true },
-      { x: 4, y: 0, w: 2, h: 5, i: "2", static: false },
+      { x: 700, y: 100, w: 200, h: 200, i: 2, static: true },
-      { x: 6, y: 0, w: 2, h: 3, i: "3", static: false },
+      { x: 900, y: 100, w: 200, h: 200, i: 3, static: true },
-      { x: 8, y: 0, w: 2, h: 3, i: "4", static: false },
-      { x: 10, y: 0, w: 2, h: 3, i: "5", static: false },
-      { x: 0, y: 5, w: 2, h: 5, i: "6", static: false },
-      { x: 2, y: 5, w: 2, h: 5, i: "7", static: false },
-      { x: 4, y: 5, w: 2, h: 5, i: "8", static: false },
-      { x: 6, y: 3, w: 2, h: 4, i: "9", static: true },
-      { x: 8, y: 4, w: 2, h: 4, i: "10", static: false },
-      { x: 10, y: 4, w: 2, h: 4, i: "11", static: false },
-      { x: 0, y: 10, w: 2, h: 5, i: "12", static: false },
-      { x: 2, y: 10, w: 2, h: 5, i: "13", static: false },
-      { x: 4, y: 8, w: 2, h: 4, i: "14", static: false },
-      { x: 6, y: 8, w: 2, h: 4, i: "15", static: false },
-      { x: 8, y: 10, w: 2, h: 5, i: "16", static: false },
-      { x: 10, y: 4, w: 2, h: 2, i: "17", static: false },
-      { x: 0, y: 9, w: 2, h: 3, i: "18", static: false },
-      { x: 2, y: 6, w: 2, h: 2, i: "19", static: false },
     ]);
-    console.log(layout);
 
-    const draggable = ref(true);
+    function resize(newRect: {
-    const resizable = ref(true);
+      width: number;
-    const index = ref(0);
+      height: number;
-    function itemTitle(item: any) {
+      top: number;
-      let result = item.i;
+      left: number;
-      if (item.static) {
+    }) {
-        result += " - Static";
+      console.log(newRect);
-      }
-      return result;
     }
-    return { draggable, resizable, index, layout, itemTitle };
+    return { resize, layout };
   },
 });
 </script>
@@ -108,9 +84,11 @@ export default defineComponent({
   background: rgb(240, 242, 245);
   // border-bottom: 1px solid rgb(240, 242, 245);
 }
+
 .ds-main {
   background: rgb(240, 242, 245);
 }
+
 .ds-layout {
   // background: rgb(240, 242, 245);
   // background-color: #fafbfc;
@@ -119,6 +97,7 @@ export default defineComponent({
   overflow: auto;
   // padding: 0 5px;
 }
+
 .ds-config {
   width: 360px;
   margin: 5px 0;
@@ -126,6 +105,7 @@ export default defineComponent({
   box-shadow: 5px 5px 5px #fff;
   text-align: center;
 }
+
 .panel {
   width: 300px;
   height: 300px;
@@ -133,19 +113,24 @@ export default defineComponent({
   margin: 5px;
   text-align: center;
 }
+
 .vue-grid-layout {
   background: #eee;
 }
+
 .vue-grid-item:not(.vue-grid-placeholder) {
   background: #ccc;
   border: 1px solid black;
 }
+
 .vue-grid-item .resizing {
   opacity: 0.9;
 }
+
 .vue-grid-item .static {
   background: #cce;
 }
+
 .vue-grid-item .text {
   font-size: 24px;
   text-align: center;
@@ -158,16 +143,20 @@ export default defineComponent({
   height: 100%;
   width: 100%;
 }
+
 .vue-grid-item .no-drag {
   height: 100%;
   width: 100%;
 }
+
 .vue-grid-item .minMax {
   font-size: 12px;
 }
+
 .vue-grid-item .add {
   cursor: pointer;
 }
+
 .vue-draggable-handle {
   position: absolute;
   width: 20px;