Wip

Author: mauricius

.github/workflows/ci.yml

@@ -2,19 +2,23 @@ name: CI
 
 on:
   push:
-    branches: [ master ]
-  pull_request:
-    branches: [ master ]
+    branches:
+      - 'master'
+    pull_request:
+    workflow_dispatch:
 
 jobs:
   build:
-
-    runs-on: ubuntu-latest
-
+    runs-on: ubuntu-22.04
     steps:
-    - uses: actions/checkout@v2
-    - uses: actions/setup-node@v1
-      with:
-        node-version: '10.x'
-    - run: npm install
-    - run: npm run test
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: 'npm'
+      - name: Install
+        run: npm install
+      - name: Run Tests
+        run: npm run test

.github/workflows/cypress.yml

@@ -0,0 +1,20 @@
+name: Cypress Tests
+
+on:
+  push:
+    branches:
+      - 'master'
+    pull_request:
+    workflow_dispatch:
+
+jobs:
+  cypress-run:
+    runs-on: ubuntu-22.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Cypress run
+        uses: cypress-io/github-action@v5
+        with:
+          component: true
+          browser: chrome

.storybook/addons.js

@@ -0,0 +1,32 @@
+import path from 'path'
+
+module.exports = {
+  stories: ['../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [{
+    name: '@storybook/addon-essentials',
+    options: {
+      backgrounds: false
+    }
+  }, '@storybook/addon-links', '@storybook/addon-controls'],
+  resolve: {
+    alias: [
+      {
+          find: "@",
+          replacement: path.resolve(__dirname, "./src"),
+      },
+    ]
+  },
+  framework: {
+    name: '@storybook/vue3-vite',
+    options: {}
+  },
+  core: {
+    disableTelemetry: true
+  },
+  features: {
+    storyStoreV7: true
+  },
+  docs: {
+    autodocs: false
+  }
+};

.storybook/config.js

@@ -0,0 +1,5 @@
+<script>
+  window.global = window;
+</script>
+<link rel="stylesheet" href="./stories/styles.css" />
+<link rel="stylesheet" href="./src/components/vue-draggable-resizable.css" />

.storybook/main.js

@@ -0,0 +1,92 @@
+export default {
+  argTypes: {
+    axis: {
+      options: ['x', 'y', 'both'],
+      control: { type: 'radio' },
+      description: 'Define the axis on which the element is draggable'
+    },
+    w: {
+      control: {
+        type: 'number',
+        min: 0,
+        description: 'Define the width of the element'
+      }
+    },
+    h: {
+      control: {
+        type: 'number',
+        min: 0,
+        description: 'Define the height of the element'
+      }
+    },
+    z: {
+      control: {
+        type: 'number',
+        description: 'Define the z-index of the element'
+      }
+    },
+    active: {
+      control: 'boolean',
+      description: 'Determines if the component should be active or not'
+    },
+    draggable: {
+      control: 'boolean',
+      description: 'Defines it the component should be draggable or not'
+    },
+    resizable: {
+      control: 'boolean',
+      description: 'Defines it the component should be resizable or not'
+    },
+    preventDeactivation: {
+      control: 'boolean',
+      description: 'Determines if the component should be deactivated when the user clicks/taps outside it'
+    },
+    handles: {
+      control: 'inline-check',
+      options: ['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml'],
+      description: 'Define the array of handles to restrict the element resizing'
+    },
+    lockAspectRatio: {
+      control: 'boolean',
+      description: 'Locks the aspect ratio of the component'
+    },
+    parent: {
+      control: 'boolean',
+      description: 'Force the component to stay in the parent element'
+    },
+    minWidth: {
+      control: 'number',
+      description: 'The minimum width of the component'
+    },
+    minHeight: {
+      control: 'number',
+      description: 'The minimum height of the component'
+    },
+    maxWidth: {
+      control: 'number',
+      description: 'The maximum width of the component'
+    },
+    maxHeight: {
+      control: 'number',
+      description: 'The maximum height of the component'
+    },
+    grid: {
+      description: 'The definition of the grid'
+    }
+  },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    }
+  },
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: { expanded: true },
+    options: {
+      storySort: {
+        order: ['Basic', '*'],
+      },
+    }
+  }
+};

.storybook/preview-head.html

@@ -0,0 +1,147 @@
+html, body, #root, #root > div {
+  height: 100%;
+  margin: 0;
+  box-sizing: border-box;
+  font-family: Arial;
+}
+
+#root > div {
+  position: relative;
+  padding: 0px;
+}
+
+#toolbar {
+  position: fixed;
+  bottom: 0;
+  height: 24px;
+  padding: 12px 0;
+  width: 100%;
+  border-top: 1px solid #999;
+  background-color: #CCC;
+  z-index: 999;
+}
+
+.drag-handle,
+.drag-cancel {
+  padding: 6px;
+  margin: 6px;
+  background-color: #CCC;
+  border: 2px solid;
+}
+
+.drag-handle:hover {
+  cursor: move;
+}
+
+.drag-cancel:hover {
+  cursor: not-allowed;
+}
+
+.my-class {
+    background-color: green;
+    border: 1px solid red;
+    -webkit-transition: background-color 200ms linear;
+    -ms-transition: background-color 200ms linear;
+    transition: background-color 200ms linear;
+}
+
+.my-dragging-class {
+    background-color: red;
+    border: 1px solid black;
+}
+
+.my-resizing-class {
+    background-color: blue;
+    border: 1px solid black;
+    color: white;
+}
+
+.my-active-class {
+    border: 1px solid black;
+    -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
+    -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
+    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
+}
+
+.my-handle-class {
+    position: absolute;
+    border: 1px solid black;
+    border-radius: 50%;
+    height: 14px;
+    width: 14px;
+    font-size: 1em;
+    line-height: 1em;
+    box-sizing: border-box;
+    -webkit-transition: all 300ms linear;
+    -ms-transition: all 300ms linear;
+    transition: all 300ms linear;
+}
+
+.my-handle-class-tl {
+    top: -14px;
+    left: -14px;
+    cursor: nw-resize;
+}
+.my-handle-class-tm {
+    top: -14px;
+    left: 50%;
+    margin-left: -7px;
+    cursor: n-resize;
+}
+.my-handle-class-tr {
+  top: -14px;
+  right: -14px;
+  cursor: ne-resize;
+}
+.my-handle-class-ml {
+  top: 50%;
+  margin-top: -7px;
+  left: -14px;
+  cursor: w-resize;
+}
+.my-handle-class-mr {
+  top: 50%;
+  margin-top: -7px;
+  right: -14px;
+  cursor: e-resize;
+}
+.my-handle-class-bl {
+  bottom: -14px;
+  left: -14px;
+  cursor: sw-resize;
+}
+.my-handle-class-bm {
+  bottom: -14px;
+  left: 50%;
+  margin-left: -7px;
+  cursor: s-resize;
+}
+.my-handle-class-br {
+  bottom: -14px;
+  right: -14px;
+  cursor: se-resize;
+}
+.my-handle-class-tl:hover,
+.my-handle-class-tm:hover,
+.my-handle-class-tr:hover,
+.my-handle-class-ml:hover,
+.my-handle-class-mr:hover,
+.my-handle-class-bl:hover,
+.my-handle-class-bm:hover,
+.my-handle-class-br:hover {
+    transform: scale(1.4);
+}
+.select-box-dashed{
+  position: absolute;
+  width: 0px;
+  height: 0px;
+  padding: 0px;
+  margin: 0px;
+  border: 1px dashed #0099ff;
+  z-index:9999;
+  background-color: #c3d5ed;
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+  font-size: 0px;
+}
+

.storybook/preview.js

@@ -7,6 +7,8 @@ All notable changes to `vue-draggable-resizable` will be documented in this file
 - Updates all packages
 - Adds vitest instead of mocha and karma for testing
 - Adds vite instead of raw webpack
+- Adds Cypress to component-test the package in real browsers
+- Fix `drag-stop` and `resize-stop` events
 - And minor changes
 
 ## 2.3.0 - 2020-12-17

.storybook/styles.css

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2018 Maurizio Bonani
+Copyright (c) 2023 Maurizio Bonani
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal