From af90e3a56cff138db408a698d1a5a21b69072263 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Fri, 15 Mar 2024 16:30:23 +0530
Subject: [PATCH] feat: add resize directive

---
 .../dashboard/helper/directives/resize.js     | 41 +++++++++++++++++++
 app/javascript/packs/application.js           |  3 ++
 2 files changed, 44 insertions(+)
 create mode 100644 app/javascript/dashboard/helper/directives/resize.js

diff --git a/app/javascript/dashboard/helper/directives/resize.js b/app/javascript/dashboard/helper/directives/resize.js
new file mode 100644
index 000000000..35e5315b0
--- /dev/null
+++ b/app/javascript/dashboard/helper/directives/resize.js
@@ -0,0 +1,41 @@
+import { debounce } from '@chatwoot/utils';
+
+const RESIZE_OBSERVER_DEBOUNCE_TIME = 100;
+
+function createResizeObserver(el, binding) {
+  const { value } = binding;
+  const observer = new ResizeObserver(
+    debounce(entries => {
+      const entry = entries[0];
+      if (entry && value && typeof value === 'function') {
+        value(entry);
+      }
+    }, RESIZE_OBSERVER_DEBOUNCE_TIME)
+  );
+
+  el.cwResizeObserver = observer;
+  observer.observe(el);
+}
+
+function destroyResizeObserver(el) {
+  if (el.cwResizeObserver) {
+    el.cwResizeObserver.unobserve(el);
+    el.cwResizeObserver.disconnect();
+    delete el.cwResizeObserver;
+  }
+}
+
+export default {
+  bind(el, binding) {
+    createResizeObserver(el, binding);
+  },
+  update(el, binding) {
+    if (binding.oldValue !== binding.value) {
+      destroyResizeObserver(el);
+      createResizeObserver(el, binding);
+    }
+  },
+  unbind(el) {
+    destroyResizeObserver(el);
+  },
+};
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index 18354bc62..0540696c5 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -30,6 +30,7 @@ import FluentIcon from 'shared/components/FluentIcon/DashboardIcon';
 import VueDOMPurifyHTML from 'vue-dompurify-html';
 import { domPurifyConfig } from '../shared/helpers/HTMLSanitizer';
 import AnalyticsPlugin from '../dashboard/helper/AnalyticsHelper/plugin';
+import resizeDirective from '../dashboard/helper/directives/resize.js';
 
 Vue.config.env = process.env;
 
@@ -78,6 +79,8 @@ Vue.component('woot-switch', WootSwitch);
 Vue.component('woot-wizard', WootWizard);
 Vue.component('fluent-icon', FluentIcon);
 
+Vue.directive('resize', resizeDirective);
+
 const i18nConfig = new VueI18n({
   locale: 'en',
   messages: i18n,