refactor(component-library): replace throttle

packages/component-library/src/components/table-and-list/mt-data-table/composables/useScrollPossibilitiesClasses.spec.ts

@@ -3,7 +3,7 @@ import { mount } from "@vue/test-utils";
 import { ref, onMounted } from "vue";
 
 // mock throttle
-vi.mock("lodash-es", () => ({
+vi.mock("@/utils/throttle", () => ({
   throttle: vi.fn((fn) => fn),
 }));
 

packages/component-library/src/components/table-and-list/mt-data-table/composables/useScrollPossibilitiesClasses.ts

@@ -1,6 +1,6 @@
 import type { Ref } from "vue";
 import { onUpdated, nextTick, onBeforeUnmount, onMounted } from "vue";
-import { throttle } from "lodash-es";
+import { throttle } from "@/utils/throttle";
 
 /**
  * This composable expect a Vue reference to an HTML element. It sets

packages/component-library/src/components/table-and-list/mt-data-table/mt-data-table.vue

@@ -589,7 +589,7 @@ import StickyColumn from "../../../directives/stickyColumn.directive";
 import MtDataTableResetFilterButton from "./sub-components/mt-data-table-reset-filter-button/mt-data-table-reset-filter-button.vue";
 import MtDataTableFilter from "./sub-components/mt-data-table-filter/mt-data-table-filter.vue";
 import MtInset from "@/components/layout/mt-inset/mt-inset.vue";
-import { throttle } from "lodash-es";
+import { throttle } from "@/utils/throttle";
 import { reactive } from "vue";
 import type { Filter } from "./mt-data-table.interfaces";
 import { useI18n } from "vue-i18n";

packages/component-library/src/directives/stickyColumn.directive.ts

@@ -1,4 +1,4 @@
-import { throttle } from "lodash-es";
+import { throttle } from "@/utils/throttle";
 import type { Directive } from "vue";
 
 const getPreviousSibling = function (el: Element | undefined, selector: string) {

packages/component-library/src/utils/throttle.spec.ts

@@ -0,0 +1,60 @@
+import { throttle } from "./throttle";
+
+describe("throttle", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("calls the function immediately", () => {
+    // ARRANGE
+    const handler = vi.fn();
+
+    vi.setSystemTime(new Date("December 1, 2025 00:00:00"));
+
+    const subject = throttle(handler, 2_000);
+
+    // ACT
+    subject();
+
+    // ASSERT
+    expect(handler).toHaveBeenCalledOnce();
+  });
+
+  it("does not call the function again within the time frame", () => {
+    // ARRANGE
+    const handler = vi.fn();
+
+    vi.setSystemTime(new Date("December 1, 2025 00:00:00"));
+
+    const subject = throttle(handler, 2_000);
+
+    // ACT
+    subject();
+    vi.setSystemTime(new Date("December 1, 2025 00:00:01"));
+    subject();
+
+    // ASSERT
+    expect(handler).toHaveBeenCalledOnce();
+  });
+
+  it("calls the function again after the time frame", () => {
+    // ARRANGE
+    const handler = vi.fn();
+
+    vi.setSystemTime(new Date("December 1, 2025 00:00:00"));
+
+    const subject = throttle(handler, 2_000);
+
+    // ACT
+    subject();
+    vi.setSystemTime(new Date("December 1, 2025 00:00:02"));
+    subject();
+
+    // ASSERT
+    expect(handler).toHaveBeenCalledTimes(2);
+  });
+});

packages/component-library/src/utils/throttle.ts

@@ -0,0 +1,14 @@
+export function throttle<T extends (...args: any[]) => void>(
+  func: T,
+  timeFrame: number,
+): (...args: Parameters<T>) => void {
+  let lastTime = 0;
+
+  return function (this: any, ...args: Parameters<T>) {
+    const now = new Date();
+    if (now.getTime() - lastTime >= timeFrame) {
+      func.apply(this, args);
+      lastTime = now.getTime();
+    }
+  };
+}