Wip

Author: mauricius

.github/workflows/cypress.yml

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

.github/workflows/ci.yml renamed to .github/workflows/test.yml

@@ -1,24 +1,32 @@
-name: CI
+name: Continuous tests
 
 on:
   push:
     branches:
-      - 'master'
+      - v3
     pull_request:
     workflow_dispatch:
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
 jobs:
-  build:
-    runs-on: ubuntu-22.04
+  build-and-test:
+    runs-on: ubuntu-latest
+    name: Build and test
     steps:
       - name: Checkout
         uses: actions/checkout@v3
+
       - name: Setup node
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
           cache: 'npm'
+
       - name: Install
         run: npm install
+
       - name: Run Tests
         run: npm run test

.gitignore

@@ -3,7 +3,7 @@ node_modules
 /dist
 /tests/feature/coverage/*
 /docs
-
+.histoire
 # local env files
 .env.local
 .env.*.local

.storybook/main.js

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

.storybook/preview-head.html

@@ -619,7 +619,7 @@ Called whenever the component stops getting dragged.
 
 You can style the component using appropriate class names passed as props to the component. Moreover you can replace the default styles for the handles, provided in the source file `vue-draggable-resizable.css`, but you should take care to define position and size for them. The default classes for handles are `handle` and `handle-tl`, `handle-br` and so on.
 
-The component also provides [named slots](https://vuejs.org/v2/guide/components-slots.html#Named-Slots) for each handle, so you can use your markup inside each one.
+The component also provides [named slots](https://vuejs.org/guide/components/slots.html#named-slots) for each handle, so you can use your markup inside each one.
 
 ## Thanks
 

.storybook/preview.js

@@ -1,6 +1,6 @@
-const { defineConfig } = require("cypress");
+import { defineConfig } from 'cypress';
 
-module.exports = defineConfig({
+export default defineConfig({
   component: {
     devServer: {
       framework: "vue",