https://www.autopartner24.de/js-static/de/frontend/resources/js/de…/widgetSizeWrapper.js?v=4.26.40.2&p=8

1const WidgetSizeWrapper = {
2    name: 'WidgetSizeWrapper',
3    props: {
4      // Die tatsächliche Widget-Komponente, die gerendert werden soll
5      widgetComponent: { type: Object, required: true },
6      // Props, die an die Widget-Komponente übergeben werden
7      widgetProps: { type: Object, default: () => ({}) },
8      grid: { type: Object, required: false }
9    },
10    data() {
11      return {
12        width: 0,
13        height: 0,
14        ro: null
15      };
16    },
17    mounted() {
18      // Versuche das übergeordnete Element mit der Klasse 'grid-stack-item-content' zu ermitteln.
19      // Falls es nicht gefunden wird, wird der direkte Parent verwendet.
20      const contentEl = this.$el.closest('.grid-stack-item-content') || this.$el.parentElement;
21      if (contentEl) {
22        this.ro = new ResizeObserver(entries => {
23          for (let entry of entries) {
24            // Hier wird die Größe des beobachteten Elements (grid-stack-item-content) erfasst
25            this.width = entry.contentRect.width;
26            this.height = entry.contentRect.height;
27          }
28        });
29        this.ro.observe(contentEl);
30      } else {
31        console.warn("Kein übergeordnetes Element 'grid-stack-item-content' gefunden. Beobachte stattdessen das eigene Element.");
32        this.ro = new ResizeObserver(entries => {
33          for (let entry of entries) {
34            this.width = entry.contentRect.width;
35            this.height = entry.contentRect.height;
36          }
37        });
38        this.ro.observe(this.$el);
39      }
40    },
41    beforeUnmount() {
42      if (this.ro) {
43        this.ro.disconnect();
44      }
45    },
46    render() {
47      // Der Wrapper rendert:
48      // 1. Die Widget-Komponente, die in der Gridstack-Instanz angezeigt wird
49      // 2. Ein Overlay-Div, das die Größe (Breite x Höhe) anzeigt
50      return Vue.h(
51        'div',
52        { style: {
53          position: 'relative',
54          height: '100%'
55        }
56      },
57        [
58          Vue.h(this.widgetComponent, this.widgetProps),
59          Vue.h(
60            'div',
61            {
62              style: {
63                zIndex: '1',
64                position: 'absolute',
65                top: '0',
66                left: '0',
67                backgroundColor: 'rgba(0, 0, 0, 0.5)',
68                color: '#fff',
69                padding: '2px 5px',
70                fontSize: '12px'
71              }
72            },
73            `${Math.round(this.width)} x ${Math.round(this.height)}`
74          )
75        ]
76      );
77    }
78  };