akryum / vue-resize

A generic component to detect DOM elements resizing

vue-resize

See the package README.

vue-resize's Issues

IE11 renders inset border for <object> element, possible fix included

When using vue-resize in Internet Explorer (tested with 11), a border that is not removable by CSS is rendered within the element. I fixed this in our project by adding the following CSS to render the object transparent:

.resize-observer > object {
	opacity: 0;
}

typescript support

HI, good work.

Just a request, would it be possible to add the types to be able to use it with typescript?

What is the meaning of ">>>"

What is the meaning of ">>>"?

.resize-observer >>> object {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}

code here, and also fix: style object with CSS, closes #4

Does not work with ie11 anymore (v1.0.0)

Hello!

I've been using your package for a couple of years now but since version v1.0.0 it stopped working with IE11.

I've reproduced the bug here but not entirely sure what has happened

https://github.com/aulonm/vue-resize-ie11-bug

<object> elements must have alternate text

Reported in Lighhouse (using vue-virtual-scroller): https://dequeuniversity.com/rules/axe/2.2/object-alt

Setting aria-hidden="true" should work: object.setAttribute('aria-hidden', 'true') after

vue-resize/src/components/ResizeObserver.vue

Line 48 in ca7618d

const object = document.createElement('object')

Set CSS class instead of inline style

The component causes a CSP error if unsafe-inline is not declared in a defined style-src directive, moving the inline style applied to the object into a CSS class would solve the issue.

Occasional redundant resize notifications

At this line in ResizeObserver.vue, the notify event is being emitted for every detected "resize" of the _resizeObject.

However, in some situations, if you debug the values of this.$el.offsetWidth and this.$el.offsetHeight, they are the same across all the occurrences of the resize event (which leads me to think that they're likely caused by sub-pixel varations in the height of the object).

This is related to this issue in vue-virtual-scroller where the redundant notifications generate an infinite loop of height recalculations in the DynamicScroller component.

I think the correct behaviour should be to only trigger the resize notification if the calculated dimensions of the wrapper element have also changed.

---

EDIT: Opened PR #8 for this

Demo link akryum.github.io/vue-resize is dead

Problem : https://akryum.github.io/vue-resize/ is not available from the README https://github.com/Akryum/vue-resize/blob/v1.0.0/packages/vue-resize/README.md

inline css or set object css property would be better than css class

Import "vue-resize/dist/vue-resize.css" break the ease-of-use.

Can we use DOM api instead of inline style in case of CSP warning #4 ?

PopoverResize seems not to respect Page-Size

Hey Akryum,

we use your popover-library meanwhile on Nextcloud-vue-lib. Through this, we use a popover as a menu on nextcloud-forms-app.
We now recognized a strange behaviour where the popover is not aligned, where it should be. I'm not completely sure, but to me this seems, as beeing a bug in the PopoverResize-position-calculation - or then down here on vue-resize? Unfortunately i didn't find the exact place. The values applied by translate3d just seem not to respect the page-size, but only the current window-size.
Do you know where to look into here or where to fix this?

Greets :)
Jonas

Cannot import the module

I wanted to try this plugin but unfortunately I couldn't import the module in my project.

If I run:

import Vue from 'vue'
import app from './app.vue'
import VueResize from 'vue-resize'

Vue.use(VueResize)

new Vue({
  el: '#app',
  render: h => h(app)
})

I get:

Module parse failed: /Users/ts/Work/vue-resize-test/node_modules/vue-resize/index.js Unexpected token (1:20)
You may need an appropriate loader to handle this file type.
| export default from './dist/vue-resize'
| export * from './dist/vue-resize'
| import './dist/vue-resize.css'

 @ ./index.js 3:0-35
 @ multi (webpack)-hot-middleware/client.js?reload=true index.js

> Open http://localhost:4000

Limit size direction.

It would be nice to be able to limit the sizing direction. Horizontal and/or Vertical for example.

Event on mount

Thank you for your component! I've implemented an automatic size switch with it. However, I had to manually add a mounted() hook to determine the initial size.

mounted(): void {
   this.handleResize({
      width: (this.$el as HTMLElement).offsetWidth,
      height: (this.$el as HTMLElement).offsetHeight
   });
},

Would you be interested in me submitting a PR to add a property to also fire an event on mount? I'm thinking about appear, just like Vue's <transition />.

Base on native ResizeObserver

In the future, this package could be directly based on https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver.

Browser support?

Hi,

If its using ResizeObserver, I wonder whats the browser support? Does it work in IE11?

Stylus dependency causes warning on node 14

The stylus dependency referenced by the demo app in this package causes these warnings with node 14:

(node:16968) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency
(Use `node --trace-warnings ...` to show where the warning was created)
(node:16968) Warning: Accessing non-existent property 'column' of module exports inside circular dependency
(node:16968) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency
(node:16968) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency
(node:16968) Warning: Accessing non-existent property 'column' of module exports inside circular dependency
(node:16968) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency

New width and height in event

Hello, couldn't it be useful to have the new width/height as parameters of the notify event ?

handleResize: function(evt) {
    console.log("new size is " + evt.width + "x" + evt.height);
}

(even if these dimensions can be retrieved with a call to offsetWidth or similar property).

Feature request : make it compatible with SVG components

Currently, the root element is a <div> which doesn't make sense when inserted in a <svg> block.
Would it be possible to instead use a <svg> root tag instead that will work everywhere ?

object element onload event not working on iOS Wechat

Env: iphone
AppName: Wechat

when use Wechat access the page, object element onload event do not trigger

GET "http://hostname/null" vue-resize.esm.js:73

Hi.
Sometimes i see this error in console:

GET "http://mysitehostname/null" 404 (Not Found) vue-resize.esm.js:73

var object = document.createElement('object');
this._resizeObject = object;
object.setAttribute('aria-hidden', 'true'); // <---- line 73
object.setAttribute('tabindex', -1);
object.onload = this.addResizeHandlers;
object.type = 'text/html';

Chrome 75.0.3770.80 (x64, Linux)

Allow debouncing the event

Currently it can send a whole bunch of events while resizing when really all you need is the last one. How about giving an optional debounce time where the event will only throw after that trigger?

ie: https://codeburst.io/throttling-and-debouncing-in-javascript-b01cad5c8edf

How to install in vue 3

I m upgrading my version 2 Vue project to Vue 3, and this plugin does not work in Vue 3.
How can I fix it