Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

vue-draggable-resizable

Package Overview
Dependencies
Maintainers
1
Versions
38
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-draggable-resizable - npm Package Compare versions

Comparing version 1.2.1 to 1.2.2

3

build/webpack.dist.js

@@ -40,4 +40,7 @@ var path = require('path')

}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: false
})
]
}

914

dist/index.js

@@ -1,913 +0,1 @@

(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
else if(typeof define === 'function' && define.amd)
define([], factory);
else if(typeof exports === 'object')
exports["vue-draggable-resizable"] = factory();
else
root["vue-draggable-resizable"] = factory();
})(this, function() {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // identity function for calling harmony imports with the correct context
/******/ __webpack_require__.i = function(value) { return value; };
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 2);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
/* styles */
__webpack_require__(7)
var Component = __webpack_require__(5)(
/* script */
__webpack_require__(1),
/* template */
__webpack_require__(6),
/* scopeId */
"data-v-1e95fd0f",
/* cssModules */
null
)
Component.options.__file = "/Applications/MAMP/htdocs/vue-draggable-resizable/src/components/vue-draggable-resizable.vue"
if (Component.esModule && Object.keys(Component.esModule).some(function (key) {return key !== "default" && key !== "__esModule"})) {console.error("named exports are not supported in *.vue files.")}
if (Component.options.functional) {console.error("[vue-loader] vue-draggable-resizable.vue: functional components are not supported with templates, they should use render functions.")}
/* hot reload */
if (false) {(function () {
var hotAPI = require("vue-hot-reload-api")
hotAPI.install(require("vue"), false)
if (!hotAPI.compatible) return
module.hot.accept()
if (!module.hot.data) {
hotAPI.createRecord("data-v-1e95fd0f", Component.options)
} else {
hotAPI.reload("data-v-1e95fd0f", Component.options)
}
})()}
module.exports = Component.exports
/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony default export */ __webpack_exports__["default"] = ({
replace: true,
name: 'vue-draggable-resizable',
props: {
draggable: {
type: Boolean, default: true
},
resizable: {
type: Boolean, default: true
},
w: {
type: Number,
default: 200,
validator: function validator(val) {
return val > 0;
}
},
h: {
type: Number,
default: 200,
validator: function validator(val) {
return val > 0;
}
},
minw: {
type: Number,
default: 50,
validator: function validator(val) {
return val > 0;
}
},
minh: {
type: Number,
default: 50,
validator: function validator(val) {
return val > 0;
}
},
x: {
type: Number,
default: 0,
validator: function validator(val) {
return val >= 0;
}
},
y: {
type: Number,
default: 0,
validator: function validator(val) {
return val >= 0;
}
},
handles: {
type: Array,
default: function _default() {
return ['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml'];
}
},
axis: {
type: String,
default: 'both',
validator: function validator(val) {
return ['x', 'y', 'both'].indexOf(val) !== -1;
}
},
grid: {
type: Array,
default: function _default() {
return [1, 1];
}
},
parent: {
type: Boolean, default: false
},
maximize: {
type: Boolean, default: true
}
},
created: function created() {
this.parentX = 0;
this.parentW = 9999;
this.parentY = 0;
this.parentH = 9999;
this.mouseX = 0;
this.mouseY = 0;
this.lastMouseX = 0;
this.lastMouseY = 0;
this.mouseOffX = 0;
this.mouseOffY = 0;
this.elmX = 0;
this.elmY = 0;
this.elmW = 0;
this.elmH = 0;
},
mounted: function mounted() {
document.documentElement.addEventListener('mousemove', this.handleMove, true);
document.documentElement.addEventListener('mousedown', this.deselect, true);
document.documentElement.addEventListener('mouseup', this.handleUp, true);
if (this.minw > this.w) this.width = this.minw;
if (this.minh > this.h) this.height = this.minh;
if (this.parent) {
var style = window.getComputedStyle(this.$el.parentNode, null);
var parentW = parseInt(style.getPropertyValue('width'), 10);
var parentH = parseInt(style.getPropertyValue('height'), 10);
this.parentW = parentW;
this.parentH = parentH;
if (this.w > this.parentW) this.width = parentW;
if (this.h > this.parentH) this.height = parentH;
if (this.x + this.w > this.parentW) this.width = parentW - this.x;
if (this.y + this.h > this.parentH) this.height = parentH - this.y;
}
this.$emit('resizing', this.left, this.top, this.width, this.height);
},
beforeDestroy: function beforeDestroy() {
document.documentElement.removeEventListener('mousemove', this.handleMove, true);
document.documentElement.removeEventListener('mousedown', this.deselect, true);
document.documentElement.removeEventListener('mouseup', this.handleUp, true);
},
data: function data() {
return {
top: this.y,
left: this.x,
width: this.w,
height: this.h,
resizing: false,
dragging: false,
active: false,
opacity: 1,
handle: null,
zIndex: 1
};
},
methods: {
elmDown: function elmDown(e) {
if (!this.active) {
this.zIndex += 1;
this.active = true;
this.$emit('activated');
}
this.elmX = parseInt(this.$el.style.left);
this.elmY = parseInt(this.$el.style.top);
this.elmW = this.$el.offsetWidth || this.$el.clientWidth;
this.elmH = this.$el.offsetHeight || this.$el.clientHeight;
if (this.draggable) {
this.opacity = 0.6;
this.dragging = true;
}
},
deselect: function deselect(e) {
var target = e.target || e.srcElement;
var regex = new RegExp('handle-([trmbl]{2})', '');
if (target !== this.$el && !regex.test(target.className)) {
this.active = false;
this.$emit('deactivated');
}
},
handleDown: function handleDown(handle, e) {
this.handle = handle;
if (e.stopPropagation) e.stopPropagation();
if (e.preventDefault) e.preventDefault();
this.resizing = true;
},
fillParent: function fillParent(e) {
var _this = this;
if (!this.parent || !this.resizable || !this.maximize) return;
var done = false;
var animate = function animate() {
if (!done) {
window.requestAnimationFrame(animate);
}
if (_this.axis === 'x') {
if (_this.width === _this.parentW && _this.left === _this.parentX) done = true;
} else if (_this.axis === 'y') {
if (_this.height === _this.parentH && _this.top === _this.parentY) done = true;
} else if (_this.axis === 'both') {
if (_this.width === _this.parentW && _this.height === _this.parentH && _this.top === _this.parentY && _this.left === _this.parentX) done = true;
}
if (_this.axis === 'x' || _this.axis === 'both') {
if (_this.width < _this.parentW) {
_this.width++;
_this.elmW++;
}
if (_this.left > _this.parentX) {
_this.left--;
_this.elmX--;
}
}
if (_this.axis === 'y' || _this.axis === 'both') {
if (_this.height < _this.parentH) {
_this.height++;
_this.elmH++;
}
if (_this.top > _this.parentY) {
_this.top--;
_this.elmY--;
}
}
_this.$emit('resizing', _this.left, _this.top, _this.width, _this.height);
};
window.requestAnimationFrame(animate);
},
handleMove: function handleMove(e) {
if (e.preventDefault) e.preventDefault();
this.mouseX = e.pageX || e.clientX + document.documentElement.scrollLeft;
this.mouseY = e.pageY || e.clientY + document.documentElement.scrollTop;
var diffX = this.mouseX - this.lastMouseX + this.mouseOffX;
var diffY = this.mouseY - this.lastMouseY + this.mouseOffY;
this.mouseOffX = this.mouseOffY = 0;
this.lastMouseX = this.mouseX;
this.lastMouseY = this.mouseY;
var dX = diffX;
var dY = diffY;
if (this.resizing) {
if (this.handle.indexOf('t') >= 0) {
if (this.elmH - dY < this.minh) this.mouseOffY = dY - (diffY = this.elmH - this.minh);else if (this.elmY + dY < this.parentY) this.mouseOffY = dY - (diffY = this.parentY - this.elmY);
this.elmY += diffY;
this.elmH -= diffY;
}
if (this.handle.indexOf('b') >= 0) {
if (this.elmH + dY < this.minh) this.mouseOffY = dY - (diffY = this.minh - this.elmH);else if (this.elmY + this.elmH + dY > this.parentH) this.mouseOffY = dY - (diffY = this.parentH - this.elmY - this.elmH);
this.elmH += diffY;
}
if (this.handle.indexOf('l') >= 0) {
if (this.elmW - dX < this.minw) this.mouseOffX = dX - (diffX = this.elmW - this.minw);else if (this.elmX + dX < this.parentX) this.mouseOffX = dX - (diffX = this.parentX - this.elmX);
this.elmX += diffX;
this.elmW -= diffX;
}
if (this.handle.indexOf('r') >= 0) {
if (this.elmW + dX < this.minw) this.mouseOffX = dX - (diffX = this.minw - this.elmW);else if (this.elmX + this.elmW + dX > this.parentW) this.mouseOffX = dX - (diffX = this.parentW - this.elmX - this.elmW);
this.elmW += diffX;
}
this.left = Math.round(this.elmX / this.grid[0]) * this.grid[0];
this.top = Math.round(this.elmY / this.grid[1]) * this.grid[1];
this.width = Math.round(this.elmW / this.grid[0]) * this.grid[0];
this.height = Math.round(this.elmH / this.grid[1]) * this.grid[1];
this.$emit('resizing', this.left, this.top, this.width, this.height);
} else if (this.dragging) {
if (this.elmX + dX < this.parentX) this.mouseOffX = dX - (diffX = this.parentX - this.elmX);else if (this.elmX + this.elmW + dX > this.parentW) this.mouseOffX = dX - (diffX = this.parentW - this.elmX - this.elmW);
if (this.elmY + dY < this.parentY) this.mouseOffY = dY - (diffY = this.parentY - this.elmY);else if (this.elmY + this.elmH + dY > this.parentH) this.mouseOffY = dY - (diffY = this.parentH - this.elmY - this.elmH);
this.elmX += diffX;
this.elmY += diffY;
if (this.axis === 'x' || this.axis === 'both') {
this.left = Math.round(this.elmX / this.grid[0]) * this.grid[0];
}
if (this.axis === 'y' || this.axis === 'both') {
this.top = Math.round(this.elmY / this.grid[1]) * this.grid[1];
}
this.$emit('dragging', this.left, this.top);
}
},
handleUp: function handleUp(e) {
this.handle = null;
if (this.resizing) {
this.resizing = false;
this.$emit('resizestop', this.left, this.top, this.width, this.height);
}
if (this.dragging) {
this.dragging = false;
this.$emit('dragstop', this.left, this.top);
}
this.opacity = 1;
this.elmX = this.left;
this.elmY = this.top;
}
},
computed: {
style: function style() {
return {
top: this.top + 'px',
left: this.left + 'px',
width: this.width + 'px',
height: this.height + 'px',
zIndex: this.zIndex,
opacity: this.opacity
};
}
}
});
/***/ }),
/* 2 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__components_vue_draggable_resizable__ = __webpack_require__(0);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__components_vue_draggable_resizable___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__components_vue_draggable_resizable__);
/* harmony reexport (default from non-hamory) */ __webpack_require__.d(__webpack_exports__, "default", function() { return __WEBPACK_IMPORTED_MODULE_0__components_vue_draggable_resizable___default.a; });
/***/ }),
/* 3 */
/***/ (function(module, exports, __webpack_require__) {
exports = module.exports = __webpack_require__(4)();
// imports
// module
exports.push([module.i, "\n.vdr[data-v-1e95fd0f] {\n position: relative;\n box-sizing: border-box;\n}\n.draggable[data-v-1e95fd0f]:hover {\n cursor: move;\n}\n.handle[data-v-1e95fd0f] {\n box-sizing: border-box;\n display: none;\n position: absolute;\n width: 10px;\n height: 10px;\n font-size: 1px;\n background: #EEE;\n border: 1px solid #333;\n}\n.handle-tl[data-v-1e95fd0f] {\n top: -10px;\n left: -10px;\n cursor: nw-resize;\n}\n.handle-tm[data-v-1e95fd0f] {\n top: -10px;\n left: 50%;\n margin-left: -5px;\n cursor: n-resize;\n}\n.handle-tr[data-v-1e95fd0f] {\n top: -10px;\n right: -10px;\n cursor: ne-resize;\n}\n.handle-ml[data-v-1e95fd0f] {\n top: 50%;\n margin-top: -5px;\n left: -10px;\n cursor: w-resize;\n}\n.handle-mr[data-v-1e95fd0f] {\n top: 50%;\n margin-top: -5px;\n right: -10px;\n cursor: e-resize;\n}\n.handle-bl[data-v-1e95fd0f] {\n bottom: -10px;\n left: -10px;\n cursor: sw-resize;\n}\n.handle-bm[data-v-1e95fd0f] {\n bottom: -10px;\n left: 50%;\n margin-left: -5px;\n cursor: s-resize;\n}\n.handle-br[data-v-1e95fd0f] {\n bottom: -10px;\n right: -10px;\n cursor: se-resize;\n}\n", ""]);
// exports
/***/ }),
/* 4 */
/***/ (function(module, exports) {
/*
MIT License http://www.opensource.org/licenses/mit-license.php
Author Tobias Koppers @sokra
*/
// css base code, injected by the css-loader
module.exports = function() {
var list = [];
// return the list of modules as css string
list.toString = function toString() {
var result = [];
for(var i = 0; i < this.length; i++) {
var item = this[i];
if(item[2]) {
result.push("@media " + item[2] + "{" + item[1] + "}");
} else {
result.push(item[1]);
}
}
return result.join("");
};
// import a list of modules into the list
list.i = function(modules, mediaQuery) {
if(typeof modules === "string")
modules = [[null, modules, ""]];
var alreadyImportedModules = {};
for(var i = 0; i < this.length; i++) {
var id = this[i][0];
if(typeof id === "number")
alreadyImportedModules[id] = true;
}
for(i = 0; i < modules.length; i++) {
var item = modules[i];
// skip already imported module
// this implementation is not 100% perfect for weird media query combinations
// when a module is imported multiple times with different media queries.
// I hope this will never occur (Hey this way we have smaller bundles)
if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) {
if(mediaQuery && !item[2]) {
item[2] = mediaQuery;
} else if(mediaQuery) {
item[2] = "(" + item[2] + ") and (" + mediaQuery + ")";
}
list.push(item);
}
}
};
return list;
};
/***/ }),
/* 5 */
/***/ (function(module, exports) {
// this module is a runtime utility for cleaner component module output and will
// be included in the final webpack user bundle
module.exports = function normalizeComponent (
rawScriptExports,
compiledTemplate,
scopeId,
cssModules
) {
var esModule
var scriptExports = rawScriptExports = rawScriptExports || {}
// ES6 modules interop
var type = typeof rawScriptExports.default
if (type === 'object' || type === 'function') {
esModule = rawScriptExports
scriptExports = rawScriptExports.default
}
// Vue.extend constructor export interop
var options = typeof scriptExports === 'function'
? scriptExports.options
: scriptExports
// render functions
if (compiledTemplate) {
options.render = compiledTemplate.render
options.staticRenderFns = compiledTemplate.staticRenderFns
}
// scopedId
if (scopeId) {
options._scopeId = scopeId
}
// inject cssModules
if (cssModules) {
var computed = Object.create(options.computed || null)
Object.keys(cssModules).forEach(function (key) {
var module = cssModules[key]
computed[key] = function () { return module }
})
options.computed = computed
}
return {
esModule: esModule,
exports: scriptExports,
options: options
}
}
/***/ }),
/* 6 */
/***/ (function(module, exports, __webpack_require__) {
module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
return _c('div', {
staticClass: "vdr",
class: {
draggable: _vm.draggable, resizable: _vm.resizable, active: _vm.active
},
style: (_vm.style),
on: {
"mousedown": _vm.elmDown,
"dblclick": _vm.fillParent
}
}, [_vm._l((_vm.handles), function(handle) {
return (_vm.resizable) ? _c('div', {
staticClass: "handle",
class: 'handle-' + handle,
style: ({
display: _vm.active ? 'block' : 'none'
}),
on: {
"mousedown": function($event) {
$event.stopPropagation();
$event.preventDefault();
_vm.handleDown(handle, $event)
}
}
}) : _vm._e()
}), _vm._v(" "), _vm._t("default")], 2)
},staticRenderFns: []}
module.exports.render._withStripped = true
if (false) {
module.hot.accept()
if (module.hot.data) {
require("vue-hot-reload-api").rerender("data-v-1e95fd0f", module.exports)
}
}
/***/ }),
/* 7 */
/***/ (function(module, exports, __webpack_require__) {
// style-loader: Adds some css to the DOM by adding a <style> tag
// load the styles
var content = __webpack_require__(3);
if(typeof content === 'string') content = [[module.i, content, '']];
if(content.locals) module.exports = content.locals;
// add the styles to the DOM
var update = __webpack_require__(8)("2fff53fe", content, false);
// Hot Module Replacement
if(false) {
// When the styles change, update the <style> tags
if(!content.locals) {
module.hot.accept("!!../../node_modules/css-loader/index.js!../../node_modules/vue-loader/lib/style-compiler/index.js?{\"id\":\"data-v-1e95fd0f\",\"scoped\":true,\"hasInlineConfig\":false}!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./vue-draggable-resizable.vue", function() {
var newContent = require("!!../../node_modules/css-loader/index.js!../../node_modules/vue-loader/lib/style-compiler/index.js?{\"id\":\"data-v-1e95fd0f\",\"scoped\":true,\"hasInlineConfig\":false}!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./vue-draggable-resizable.vue");
if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
update(newContent);
});
}
// When the module is disposed, remove the <style> tags
module.hot.dispose(function() { update(); });
}
/***/ }),
/* 8 */
/***/ (function(module, exports, __webpack_require__) {
/*
MIT License http://www.opensource.org/licenses/mit-license.php
Author Tobias Koppers @sokra
Modified by Evan You @yyx990803
*/
var hasDocument = typeof document !== 'undefined'
if (typeof DEBUG !== 'undefined' && DEBUG) {
if (!hasDocument) {
throw new Error(
'vue-style-loader cannot be used in a non-browser environment. ' +
"Use { target: 'node' } in your Webpack config to indicate a server-rendering environment."
) }
}
var listToStyles = __webpack_require__(9)
/*
type StyleObject = {
id: number;
parts: Array<StyleObjectPart>
}
type StyleObjectPart = {
css: string;
media: string;
sourceMap: ?string
}
*/
var stylesInDom = {/*
[id: number]: {
id: number,
refs: number,
parts: Array<(obj?: StyleObjectPart) => void>
}
*/}
var head = hasDocument && (document.head || document.getElementsByTagName('head')[0])
var singletonElement = null
var singletonCounter = 0
var isProduction = false
var noop = function () {}
// Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
// tags it will allow on a page
var isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\b/.test(navigator.userAgent.toLowerCase())
module.exports = function (parentId, list, _isProduction) {
isProduction = _isProduction
var styles = listToStyles(parentId, list)
addStylesToDom(styles)
return function update (newList) {
var mayRemove = []
for (var i = 0; i < styles.length; i++) {
var item = styles[i]
var domStyle = stylesInDom[item.id]
domStyle.refs--
mayRemove.push(domStyle)
}
if (newList) {
styles = listToStyles(parentId, newList)
addStylesToDom(styles)
} else {
styles = []
}
for (var i = 0; i < mayRemove.length; i++) {
var domStyle = mayRemove[i]
if (domStyle.refs === 0) {
for (var j = 0; j < domStyle.parts.length; j++) {
domStyle.parts[j]()
}
delete stylesInDom[domStyle.id]
}
}
}
}
function addStylesToDom (styles /* Array<StyleObject> */) {
for (var i = 0; i < styles.length; i++) {
var item = styles[i]
var domStyle = stylesInDom[item.id]
if (domStyle) {
domStyle.refs++
for (var j = 0; j < domStyle.parts.length; j++) {
domStyle.parts[j](item.parts[j])
}
for (; j < item.parts.length; j++) {
domStyle.parts.push(addStyle(item.parts[j]))
}
if (domStyle.parts.length > item.parts.length) {
domStyle.parts.length = item.parts.length
}
} else {
var parts = []
for (var j = 0; j < item.parts.length; j++) {
parts.push(addStyle(item.parts[j]))
}
stylesInDom[item.id] = { id: item.id, refs: 1, parts: parts }
}
}
}
function createStyleElement () {
var styleElement = document.createElement('style')
styleElement.type = 'text/css'
head.appendChild(styleElement)
return styleElement
}
function addStyle (obj /* StyleObjectPart */) {
var update, remove
var styleElement = document.querySelector('style[data-vue-ssr-id~="' + obj.id + '"]')
if (styleElement) {
if (isProduction) {
// has SSR styles and in production mode.
// simply do nothing.
return noop
} else {
// has SSR styles but in dev mode.
// for some reason Chrome can't handle source map in server-rendered
// style tags - source maps in <style> only works if the style tag is
// created and inserted dynamically. So we remove the server rendered
// styles and inject new ones.
styleElement.parentNode.removeChild(styleElement)
}
}
if (isOldIE) {
// use singleton mode for IE9.
var styleIndex = singletonCounter++
styleElement = singletonElement || (singletonElement = createStyleElement())
update = applyToSingletonTag.bind(null, styleElement, styleIndex, false)
remove = applyToSingletonTag.bind(null, styleElement, styleIndex, true)
} else {
// use multi-style-tag mode in all other cases
styleElement = createStyleElement()
update = applyToTag.bind(null, styleElement)
remove = function () {
styleElement.parentNode.removeChild(styleElement)
}
}
update(obj)
return function updateStyle (newObj /* StyleObjectPart */) {
if (newObj) {
if (newObj.css === obj.css &&
newObj.media === obj.media &&
newObj.sourceMap === obj.sourceMap) {
return
}
update(obj = newObj)
} else {
remove()
}
}
}
var replaceText = (function () {
var textStore = []
return function (index, replacement) {
textStore[index] = replacement
return textStore.filter(Boolean).join('\n')
}
})()
function applyToSingletonTag (styleElement, index, remove, obj) {
var css = remove ? '' : obj.css
if (styleElement.styleSheet) {
styleElement.styleSheet.cssText = replaceText(index, css)
} else {
var cssNode = document.createTextNode(css)
var childNodes = styleElement.childNodes
if (childNodes[index]) styleElement.removeChild(childNodes[index])
if (childNodes.length) {
styleElement.insertBefore(cssNode, childNodes[index])
} else {
styleElement.appendChild(cssNode)
}
}
}
function applyToTag (styleElement, obj) {
var css = obj.css
var media = obj.media
var sourceMap = obj.sourceMap
if (media) {
styleElement.setAttribute('media', media)
}
if (sourceMap) {
// https://developer.chrome.com/devtools/docs/javascript-debugging
// this makes source maps inside style tags work properly in Chrome
css += '\n/*# sourceURL=' + sourceMap.sources[0] + ' */'
// http://stackoverflow.com/a/26603875
css += '\n/*# sourceMappingURL=data:application/json;base64,' + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + ' */'
}
if (styleElement.styleSheet) {
styleElement.styleSheet.cssText = css
} else {
while (styleElement.firstChild) {
styleElement.removeChild(styleElement.firstChild)
}
styleElement.appendChild(document.createTextNode(css))
}
}
/***/ }),
/* 9 */
/***/ (function(module, exports) {
/**
* Translates the list format produced by css-loader into something
* easier to manipulate.
*/
module.exports = function listToStyles (parentId, list) {
var styles = []
var newStyles = {}
for (var i = 0; i < list.length; i++) {
var item = list[i]
var id = item[0]
var css = item[1]
var media = item[2]
var sourceMap = item[3]
var part = {
id: parentId + ':' + i,
css: css,
media: media,
sourceMap: sourceMap
}
if (!newStyles[id]) {
styles.push(newStyles[id] = { id: id, parts: [part] })
} else {
newStyles[id].parts.push(part)
}
}
return styles
}
/***/ })
/******/ ]);
});
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports["vue-draggable-resizable"]=e():t["vue-draggable-resizable"]=e()}(this,function(){return function(t){function e(n){if(i[n])return i[n].exports;var s=i[n]={i:n,l:!1,exports:{}};return t[n].call(s.exports,s,s.exports,e),s.l=!0,s.exports}var i={};return e.m=t,e.c=i,e.i=function(t){return t},e.d=function(t,i,n){e.o(t,i)||Object.defineProperty(t,i,{configurable:!1,enumerable:!0,get:n})},e.n=function(t){var i=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(i,"a",i),i},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=2)}([function(t,e,i){i(7);var n=i(5)(i(1),i(6),"data-v-1e95fd0f",null);n.options.__file="/Applications/MAMP/htdocs/vue-draggable-resizable/src/components/vue-draggable-resizable.vue",n.esModule&&Object.keys(n.esModule).some(function(t){return"default"!==t&&"__esModule"!==t})&&console.error("named exports are not supported in *.vue files."),n.options.functional&&console.error("[vue-loader] vue-draggable-resizable.vue: functional components are not supported with templates, they should use render functions."),t.exports=n.exports},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={replace:!0,name:"vue-draggable-resizable",props:{draggable:{type:Boolean,default:!0},resizable:{type:Boolean,default:!0},w:{type:Number,default:200,validator:function(t){return t>0}},h:{type:Number,default:200,validator:function(t){return t>0}},minw:{type:Number,default:50,validator:function(t){return t>0}},minh:{type:Number,default:50,validator:function(t){return t>0}},x:{type:Number,default:0,validator:function(t){return t>=0}},y:{type:Number,default:0,validator:function(t){return t>=0}},handles:{type:Array,default:function(){return["tl","tm","tr","mr","br","bm","bl","ml"]}},axis:{type:String,default:"both",validator:function(t){return-1!==["x","y","both"].indexOf(t)}},grid:{type:Array,default:function(){return[1,1]}},parent:{type:Boolean,default:!1},maximize:{type:Boolean,default:!0}},created:function(){this.parentX=0,this.parentW=9999,this.parentY=0,this.parentH=9999,this.mouseX=0,this.mouseY=0,this.lastMouseX=0,this.lastMouseY=0,this.mouseOffX=0,this.mouseOffY=0,this.elmX=0,this.elmY=0,this.elmW=0,this.elmH=0},mounted:function(){if(document.documentElement.addEventListener("mousemove",this.handleMove,!0),document.documentElement.addEventListener("mousedown",this.deselect,!0),document.documentElement.addEventListener("mouseup",this.handleUp,!0),this.minw>this.w&&(this.width=this.minw),this.minh>this.h&&(this.height=this.minh),this.parent){var t=window.getComputedStyle(this.$el.parentNode,null),e=parseInt(t.getPropertyValue("width"),10),i=parseInt(t.getPropertyValue("height"),10);this.parentW=e,this.parentH=i,this.w>this.parentW&&(this.width=e),this.h>this.parentH&&(this.height=i),this.x+this.w>this.parentW&&(this.width=e-this.x),this.y+this.h>this.parentH&&(this.height=i-this.y)}this.$emit("resizing",this.left,this.top,this.width,this.height)},beforeDestroy:function(){document.documentElement.removeEventListener("mousemove",this.handleMove,!0),document.documentElement.removeEventListener("mousedown",this.deselect,!0),document.documentElement.removeEventListener("mouseup",this.handleUp,!0)},data:function(){return{top:this.y,left:this.x,width:this.w,height:this.h,resizing:!1,dragging:!1,active:!1,opacity:1,handle:null,zIndex:1}},methods:{elmDown:function(t){this.active||(this.zIndex+=1,this.active=!0,this.$emit("activated")),this.elmX=parseInt(this.$el.style.left),this.elmY=parseInt(this.$el.style.top),this.elmW=this.$el.offsetWidth||this.$el.clientWidth,this.elmH=this.$el.offsetHeight||this.$el.clientHeight,this.draggable&&(this.opacity=.6,this.dragging=!0)},deselect:function(t){var e=t.target||t.srcElement,i=new RegExp("handle-([trmbl]{2})","");e===this.$el||i.test(e.className)||(this.active=!1,this.$emit("deactivated"))},handleDown:function(t,e){this.handle=t,e.stopPropagation&&e.stopPropagation(),e.preventDefault&&e.preventDefault(),this.resizing=!0},fillParent:function(t){var e=this;if(this.parent&&this.resizable&&this.maximize){var i=!1,n=function t(){i||window.requestAnimationFrame(t),"x"===e.axis?e.width===e.parentW&&e.left===e.parentX&&(i=!0):"y"===e.axis?e.height===e.parentH&&e.top===e.parentY&&(i=!0):"both"===e.axis&&e.width===e.parentW&&e.height===e.parentH&&e.top===e.parentY&&e.left===e.parentX&&(i=!0),"x"!==e.axis&&"both"!==e.axis||(e.width<e.parentW&&(e.width++,e.elmW++),e.left>e.parentX&&(e.left--,e.elmX--)),"y"!==e.axis&&"both"!==e.axis||(e.height<e.parentH&&(e.height++,e.elmH++),e.top>e.parentY&&(e.top--,e.elmY--)),e.$emit("resizing",e.left,e.top,e.width,e.height)};window.requestAnimationFrame(n)}},handleMove:function(t){t.preventDefault&&t.preventDefault(),this.mouseX=t.pageX||t.clientX+document.documentElement.scrollLeft,this.mouseY=t.pageY||t.clientY+document.documentElement.scrollTop;var e=this.mouseX-this.lastMouseX+this.mouseOffX,i=this.mouseY-this.lastMouseY+this.mouseOffY;this.mouseOffX=this.mouseOffY=0,this.lastMouseX=this.mouseX,this.lastMouseY=this.mouseY;var n=e,s=i;this.resizing?(this.handle.indexOf("t")>=0&&(this.elmH-s<this.minh?this.mouseOffY=s-(i=this.elmH-this.minh):this.elmY+s<this.parentY&&(this.mouseOffY=s-(i=this.parentY-this.elmY)),this.elmY+=i,this.elmH-=i),this.handle.indexOf("b")>=0&&(this.elmH+s<this.minh?this.mouseOffY=s-(i=this.minh-this.elmH):this.elmY+this.elmH+s>this.parentH&&(this.mouseOffY=s-(i=this.parentH-this.elmY-this.elmH)),this.elmH+=i),this.handle.indexOf("l")>=0&&(this.elmW-n<this.minw?this.mouseOffX=n-(e=this.elmW-this.minw):this.elmX+n<this.parentX&&(this.mouseOffX=n-(e=this.parentX-this.elmX)),this.elmX+=e,this.elmW-=e),this.handle.indexOf("r")>=0&&(this.elmW+n<this.minw?this.mouseOffX=n-(e=this.minw-this.elmW):this.elmX+this.elmW+n>this.parentW&&(this.mouseOffX=n-(e=this.parentW-this.elmX-this.elmW)),this.elmW+=e),this.left=Math.round(this.elmX/this.grid[0])*this.grid[0],this.top=Math.round(this.elmY/this.grid[1])*this.grid[1],this.width=Math.round(this.elmW/this.grid[0])*this.grid[0],this.height=Math.round(this.elmH/this.grid[1])*this.grid[1],this.$emit("resizing",this.left,this.top,this.width,this.height)):this.dragging&&(this.elmX+n<this.parentX?this.mouseOffX=n-(e=this.parentX-this.elmX):this.elmX+this.elmW+n>this.parentW&&(this.mouseOffX=n-(e=this.parentW-this.elmX-this.elmW)),this.elmY+s<this.parentY?this.mouseOffY=s-(i=this.parentY-this.elmY):this.elmY+this.elmH+s>this.parentH&&(this.mouseOffY=s-(i=this.parentH-this.elmY-this.elmH)),this.elmX+=e,this.elmY+=i,"x"!==this.axis&&"both"!==this.axis||(this.left=Math.round(this.elmX/this.grid[0])*this.grid[0]),"y"!==this.axis&&"both"!==this.axis||(this.top=Math.round(this.elmY/this.grid[1])*this.grid[1]),this.$emit("dragging",this.left,this.top))},handleUp:function(t){this.handle=null,this.resizing&&(this.resizing=!1,this.$emit("resizestop",this.left,this.top,this.width,this.height)),this.dragging&&(this.dragging=!1,this.$emit("dragstop",this.left,this.top)),this.opacity=1,this.elmX=this.left,this.elmY=this.top}},computed:{style:function(){return{top:this.top+"px",left:this.left+"px",width:this.width+"px",height:this.height+"px",zIndex:this.zIndex,opacity:this.opacity}}}}},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=i(0),s=i.n(n);i.d(e,"default",function(){return s.a})},function(t,e,i){e=t.exports=i(4)(),e.push([t.i,"\n.vdr[data-v-1e95fd0f] {\n position: relative;\n box-sizing: border-box;\n}\n.draggable[data-v-1e95fd0f]:hover {\n cursor: move;\n}\n.handle[data-v-1e95fd0f] {\n box-sizing: border-box;\n display: none;\n position: absolute;\n width: 10px;\n height: 10px;\n font-size: 1px;\n background: #EEE;\n border: 1px solid #333;\n}\n.handle-tl[data-v-1e95fd0f] {\n top: -10px;\n left: -10px;\n cursor: nw-resize;\n}\n.handle-tm[data-v-1e95fd0f] {\n top: -10px;\n left: 50%;\n margin-left: -5px;\n cursor: n-resize;\n}\n.handle-tr[data-v-1e95fd0f] {\n top: -10px;\n right: -10px;\n cursor: ne-resize;\n}\n.handle-ml[data-v-1e95fd0f] {\n top: 50%;\n margin-top: -5px;\n left: -10px;\n cursor: w-resize;\n}\n.handle-mr[data-v-1e95fd0f] {\n top: 50%;\n margin-top: -5px;\n right: -10px;\n cursor: e-resize;\n}\n.handle-bl[data-v-1e95fd0f] {\n bottom: -10px;\n left: -10px;\n cursor: sw-resize;\n}\n.handle-bm[data-v-1e95fd0f] {\n bottom: -10px;\n left: 50%;\n margin-left: -5px;\n cursor: s-resize;\n}\n.handle-br[data-v-1e95fd0f] {\n bottom: -10px;\n right: -10px;\n cursor: se-resize;\n}\n",""])},function(t,e){t.exports=function(){var t=[];return t.toString=function(){for(var t=[],e=0;e<this.length;e++){var i=this[e];i[2]?t.push("@media "+i[2]+"{"+i[1]+"}"):t.push(i[1])}return t.join("")},t.i=function(e,i){"string"==typeof e&&(e=[[null,e,""]]);for(var n={},s=0;s<this.length;s++){var r=this[s][0];"number"==typeof r&&(n[r]=!0)}for(s=0;s<e.length;s++){var o=e[s];"number"==typeof o[0]&&n[o[0]]||(i&&!o[2]?o[2]=i:i&&(o[2]="("+o[2]+") and ("+i+")"),t.push(o))}},t}},function(t,e){t.exports=function(t,e,i,n){var s,r=t=t||{},o=typeof t.default;"object"!==o&&"function"!==o||(s=t,r=t.default);var h="function"==typeof r?r.options:r;if(e&&(h.render=e.render,h.staticRenderFns=e.staticRenderFns),i&&(h._scopeId=i),n){var a=Object.create(h.computed||null);Object.keys(n).forEach(function(t){var e=n[t];a[t]=function(){return e}}),h.computed=a}return{esModule:s,exports:r,options:h}}},function(t,e,i){t.exports={render:function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"vdr",class:{draggable:t.draggable,resizable:t.resizable,active:t.active},style:t.style,on:{mousedown:t.elmDown,dblclick:t.fillParent}},[t._l(t.handles,function(e){return t.resizable?i("div",{staticClass:"handle",class:"handle-"+e,style:{display:t.active?"block":"none"},on:{mousedown:function(i){i.stopPropagation(),i.preventDefault(),t.handleDown(e,i)}}}):t._e()}),t._v(" "),t._t("default")],2)},staticRenderFns:[]},t.exports.render._withStripped=!0},function(t,e,i){var n=i(3);"string"==typeof n&&(n=[[t.i,n,""]]),n.locals&&(t.exports=n.locals);i(8)("2fff53fe",n,!1)},function(t,e,i){function n(t){for(var e=0;e<t.length;e++){var i=t[e],n=d[i.id];if(n){n.refs++;for(var s=0;s<n.parts.length;s++)n.parts[s](i.parts[s]);for(;s<i.parts.length;s++)n.parts.push(r(i.parts[s]));n.parts.length>i.parts.length&&(n.parts.length=i.parts.length)}else{for(var o=[],s=0;s<i.parts.length;s++)o.push(r(i.parts[s]));d[i.id]={id:i.id,refs:1,parts:o}}}}function s(){var t=document.createElement("style");return t.type="text/css",u.appendChild(t),t}function r(t){var e,i,n=document.querySelector('style[data-vue-ssr-id~="'+t.id+'"]');if(n){if(m)return c;n.parentNode.removeChild(n)}if(g){var r=p++;n=f||(f=s()),e=o.bind(null,n,r,!1),i=o.bind(null,n,r,!0)}else n=s(),e=h.bind(null,n),i=function(){n.parentNode.removeChild(n)};return e(t),function(n){if(n){if(n.css===t.css&&n.media===t.media&&n.sourceMap===t.sourceMap)return;e(t=n)}else i()}}function o(t,e,i,n){var s=i?"":n.css;if(t.styleSheet)t.styleSheet.cssText=v(e,s);else{var r=document.createTextNode(s),o=t.childNodes;o[e]&&t.removeChild(o[e]),o.length?t.insertBefore(r,o[e]):t.appendChild(r)}}function h(t,e){var i=e.css,n=e.media,s=e.sourceMap;if(n&&t.setAttribute("media",n),s&&(i+="\n/*# sourceURL="+s.sources[0]+" */",i+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(s))))+" */"),t.styleSheet)t.styleSheet.cssText=i;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(i))}}var a="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!a)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var l=i(9),d={},u=a&&(document.head||document.getElementsByTagName("head")[0]),f=null,p=0,m=!1,c=function(){},g="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());t.exports=function(t,e,i){m=i;var s=l(t,e);return n(s),function(e){for(var i=[],r=0;r<s.length;r++){var o=s[r],h=d[o.id];h.refs--,i.push(h)}e?(s=l(t,e),n(s)):s=[];for(var r=0;r<i.length;r++){var h=i[r];if(0===h.refs){for(var a=0;a<h.parts.length;a++)h.parts[a]();delete d[h.id]}}}};var v=function(){var t=[];return function(e,i){return t[e]=i,t.filter(Boolean).join("\n")}}()},function(t,e){t.exports=function(t,e){for(var i=[],n={},s=0;s<e.length;s++){var r=e[s],o=r[0],h=r[1],a=r[2],l=r[3],d={id:t+":"+s,css:h,media:a,sourceMap:l};n[o]?n[o].parts.push(d):i.push(n[o]={id:o,parts:[d]})}return i}}])});
{
"name": "vue-draggable-resizable",
"version": "1.2.1",
"version": "1.2.2",
"description": "Vue2 Component for resizable and draggable elements",

@@ -5,0 +5,0 @@ "author": "Maurizio Bonani <maurizio.bonani@gmail.com>",

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc