🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

vue-draggable-resizable

Package Overview
Dependencies
Maintainers
1
Versions
38
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-draggable-resizable - npm Package Compare versions

Comparing version

3.0.0-beta.1
to
3.0.0-beta.2

16

package.json
{
"name": "vue-draggable-resizable",
"version": "3.0.0-beta.1",
"version": "3.0.0-beta.2",
"author": "Maurizio Bonani <maurizio.bonani@gmail.com>",

@@ -11,5 +11,5 @@ "private": false,

],
"main": "dist/VueDraggableResizable.umd.cjs",
"module": "dist/VueDraggableResizable.js",
"unpkg": "dist/VueDraggableResizable.umd.cjs",
"main": "dist/vue-draggable-resizable.umd.cjs",
"module": "dist/vue-draggable-resizable.js",
"unpkg": "dist/vue-draggable-resizable.umd.cjs",
"browser": {

@@ -20,4 +20,8 @@ "./sfc": "src/vue-draggable-resizable.vue"

".": {
"import": "./dist/VueDraggableResizable.js",
"require": "./dist/VueDraggableResizable.umd.cjs"
"import": "./dist/vue-draggable-resizable.js",
"require": "./dist/vue-draggable-resizable.umd.cjs"
},
"./style.css": {
"import": "./dist/style.css",
"require": "./dist/style.css"
}

@@ -24,0 +28,0 @@ },

51

README.md

@@ -60,10 +60,9 @@ <p align="center"><img src="https://rawgit.com/mauricius/vue-draggable-resizable/v1/docs/resources/logo.png" alt="logo"></p>

// main.js
import createApp from 'vue'
import { createApp } from 'vue'
import VueDraggableResizable from 'vue-draggable-resizable'
// optionally import default styles
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
import App from '/src/App.vue'
import App from './App.vue'
const app = createApp(App)
app.component('vue-draggable-resizable', VueDraggableResizable)
createApp(App)
.component("vue-draggable-resizable", VueDraggableResizable)
.mount('#app')
```

@@ -74,40 +73,18 @@

```vue
// App.vue
<template>
<div style="height: 500px; width: 500px; border: 1px solid red; position: relative;">
<vue-draggable-resizable :w="100" :h="100" @dragging="onDrag" @resizing="onResize" :parent="true">
<p>Hello! I'm a flexible component. You can drag me around and you can resize me.<br>
X: {{ x }} / Y: {{ y }} - Width: {{ width }} / Height: {{ height }}</p>
<vue-draggable-resizable :w="100" :h="100" :parent="true">
<p>Hello! I'm a flexible component. You can drag me around and you can resize me.</p>
</vue-draggable-resizable>
</div>
</template>
```
<script>
import VueDraggableResizable from 'vue-draggable-resizable'
The component itself does not include any CSS. You'll need to include it separately in your `App.vue`:
export default {
components: {
'vue-draggable-resizable': VueDraggableResizable
},
data: function () {
return {
width: 0,
height: 0,
x: 0,
y: 0
}
},
methods: {
onResize: function (x, y, width, height) {
this.x = x
this.y = y
this.width = width
this.height = height
},
onDrag: function (x, y) {
this.x = x
this.y = y
}
}
}
</script>
```vue
<style>
@import "vue-draggable-resizable/style.css";
</style>
```

@@ -114,0 +91,0 @@