@dnncommunity/dnn-elements 0.14.0 → 0.14.1-beta.1

package/dist/cjs/dnn-button_16.cjs.entry.js

@@ -1699,26 +1699,32 @@ let DnnVerticalSplitview = class {
   }
   componentDidLoad() {
     requestAnimationFrame(() => {
-      const fullWidth = this.element.getBoundingClientRect().width;
-      this.leftWidth = fullWidth * this.splitWidthPercentage / 100;
-      this.rightWidth = fullWidth - this.leftWidth;
-      this.widthChanged.emit(this.splitWidthPercentage);
+      this.resizeObserver = new ResizeObserver(() => {
+        const fullWidth = this.element.getBoundingClientRect().width;
+        this.leftWidth = fullWidth * this.splitWidthPercentage / 100;
+        this.rightWidth = fullWidth - this.leftWidth;
+        this.widthChanged.emit(this.splitWidthPercentage);
+      });
+      this.resizeObserver.observe(this.element);
     });
   }
   handleMouseDown(event) {
     event.preventDefault();
     const handleDrag = (ev) => {
-      let { movementX } = getMovementFromEvent(ev, this.previousTouch);
-      let fullWidth = this.element.getBoundingClientRect().width;
-      let newLeft = this.leftWidth + movementX;
-      if (newLeft < 0) {
-        newLeft = 0;
-      }
-      if (newLeft > fullWidth) {
-        newLeft = fullWidth;
-      }
-      this.leftWidth = newLeft;
-      this.rightWidth = fullWidth - newLeft;
+      requestAnimationFrame(() => {
+        let fullWidth = this.element.getBoundingClientRect().width;
+        let { movementX } = getMovementFromEvent(ev, this.previousTouch);
+        let newLeft = this.leftWidth + movementX;
+        if (newLeft < 0) {
+          newLeft = 0;
+        }
+        if (newLeft > fullWidth) {
+          newLeft = fullWidth;
+        }
+        this.leftWidth = newLeft;
+        this.rightWidth = fullWidth - newLeft;
+        this.splitWidthPercentage = this.leftWidth / fullWidth * 100;
+      });
     };
     const handleDragFinished = () => {
       document.removeEventListener("mousemove", handleDrag);