@pequity/squirrel 2.0.0 → 3.0.0

package/dist/cjs/usePLoading.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const vue = require("vue");
-const lodashEs = require("lodash-es");
 const LOADING_TEXT = "Loading...";
 const show = vue.ref(false);
 const loadingItems = vue.ref([]);
@@ -13,8 +12,10 @@ let timer;
 const usePLoading = (options) => {
   const { delay } = { delay: 200, ...options };
   const scope = vue.getCurrentScope();
-  const loadingShow = (content2) => {
-    const loadingId = lodashEs.uniqueId();
+  const loadingShow = (loadingItem) => {
+    if (!loadingItem.id) {
+      throw new Error("id is required");
+    }
     if (loadingItems.value.length === 0 && delay > 0) {
       timer = setTimeout(() => {
         show.value = true;
@@ -23,21 +24,15 @@ const usePLoading = (options) => {
       show.value = true;
     }
     loadingItems.value.push({
-      id: loadingId,
-      content: content2 && typeof content2 === "object" ? vue.markRaw(content2) : content2 || LOADING_TEXT
+      id: loadingItem.id,
+      content: loadingItem.content && typeof loadingItem.content === "object" ? vue.markRaw(loadingItem.content) : loadingItem.content || LOADING_TEXT
     });
-    const hide = () => {
-      loadingItems.value = loadingItems.value.filter((item) => item.id !== loadingId);
-      clearTimeout(timer);
-      if (loadingItems.value.length === 0) {
-        show.value = false;
-      }
-    };
-    return hide;
   };
-  const loadingHide = () => {
-    loadingItems.value = [];
-    show.value = false;
+  const loadingHide = (id) => {
+    loadingItems.value = id && typeof id === "string" ? loadingItems.value.filter((item) => item.id !== id) : [];
+    if (loadingItems.value.length === 0) {
+      show.value = false;
+    }
     clearTimeout(timer);
   };
   if (scope) {

package/dist/es/usePLoading.js

@@ -1,5 +1,4 @@
 import { ref, computed, getCurrentScope, onScopeDispose, markRaw } from "vue";
-import { uniqueId } from "lodash-es";
 const LOADING_TEXT = "Loading...";
 const show = ref(false);
 const loadingItems = ref([]);
@@ -11,8 +10,10 @@ let timer;
 const usePLoading = (options) => {
   const { delay } = { delay: 200, ...options };
   const scope = getCurrentScope();
-  const loadingShow = (content2) => {
-    const loadingId = uniqueId();
+  const loadingShow = (loadingItem) => {
+    if (!loadingItem.id) {
+      throw new Error("id is required");
+    }
     if (loadingItems.value.length === 0 && delay > 0) {
       timer = setTimeout(() => {
         show.value = true;
@@ -21,21 +22,15 @@ const usePLoading = (options) => {
       show.value = true;
     }
     loadingItems.value.push({
-      id: loadingId,
-      content: content2 && typeof content2 === "object" ? markRaw(content2) : content2 || LOADING_TEXT
+      id: loadingItem.id,
+      content: loadingItem.content && typeof loadingItem.content === "object" ? markRaw(loadingItem.content) : loadingItem.content || LOADING_TEXT
     });
-    const hide = () => {
-      loadingItems.value = loadingItems.value.filter((item) => item.id !== loadingId);
-      clearTimeout(timer);
-      if (loadingItems.value.length === 0) {
-        show.value = false;
-      }
-    };
-    return hide;
   };
-  const loadingHide = () => {
-    loadingItems.value = [];
-    show.value = false;
+  const loadingHide = (id) => {
+    loadingItems.value = id && typeof id === "string" ? loadingItems.value.filter((item) => item.id !== id) : [];
+    if (loadingItems.value.length === 0) {
+      show.value = false;
+    }
     clearTimeout(timer);
   };
   if (scope) {

package/dist/squirrel/components/p-loading/usePLoading.d.ts

@@ -3,11 +3,15 @@ type Options = {
     delay?: number;
 };
 type Content = string | Component;
+type LoadingItem = {
+    id: string;
+    content?: Content;
+};
 type UsePLoading = {
     show: Ref<boolean>;
     content: Content;
-    loadingShow: (content?: Content) => () => void;
-    loadingHide: () => void;
+    loadingShow: (loadingItem: LoadingItem) => void;
+    loadingHide: (id: LoadingItem['id']) => void;
 };
 export declare const usePLoading: (options?: Options) => UsePLoading;
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "packageManager": "pnpm@8.9.2",
   "type": "module",
   "scripts": {

package/squirrel/components/p-loading/p-loading.spec.js

@@ -1,6 +1,6 @@
 import PLoading from '@squirrel/components/p-loading/p-loading.vue';
 import PSkeletonLoader from '@squirrel/components/p-skeleton-loader/p-skeleton-loader.vue';
-import { createWrapperFor, sleep, waitNT } from '@tests/jest.helpers';
+import { createWrapperFor, waitNT } from '@tests/jest.helpers';
 import { usePLoading } from '@squirrel/components/p-loading/usePLoading';
 
 const createAppWrapper = () =>
@@ -13,30 +13,40 @@ const createWrapper = (options) => {
   return createWrapperFor(
     {
       template: `
-      <button class="show" @click="loadingShow"></button>
-      <button class="hide" @click="loadingHide"></button>
+      <button class="show-without-id-should-error" @click="loadingShow({content: 'test'})"></button>
+      <button class="show" @click="loadingShow({id: 'default'})"></button>
+      <button class="hide" @click="loadingHide({id: 'default'})"></button>
       <button class="request-1-sec" @click="fireRequest(1000)"></button>
       <button class="request-3-secs" @click="fireRequest(3000)"></button>
-      <button class="request-1-sec-text" @click="fireRequest(1000, '1 sec')"></button>
-      <button class="request-3-secs-text" @click="fireRequest(3000, '3 secs')"></button>
+      <button class="request-1-sec-text" @click="fireRequestText(1000, '1 sec')"></button>
+      <button class="request-3-secs-text" @click="fireRequestText(3000, '3 secs')"></button>
       <button class="request-1-sec-component" @click="fireRequestComponent(1000)"></button>
     `,
       setup() {
         const { loadingShow, loadingHide } = usePLoading(options);
 
-        const fireRequest = async (time, text) => {
-          const hide = loadingShow(text);
-          await sleep(time);
-          hide();
+        const fireRequest = async (time) => {
+          const id = `default-${time}`;
+          loadingShow({ id });
+          await new Promise((resolve) => setTimeout(resolve, time));
+          loadingHide(id);
+        };
+
+        const fireRequestText = async (time, message) => {
+          const id = `text-${time}`;
+          loadingShow({ id, content: message });
+          await new Promise((resolve) => setTimeout(resolve, time));
+          loadingHide(id);
         };
 
         const fireRequestComponent = async (time) => {
-          const hide = loadingShow(PSkeletonLoader);
+          const id = `component-${time}`;
+          loadingShow({ id, content: PSkeletonLoader });
           await new Promise((resolve) => setTimeout(resolve, time));
-          hide();
+          loadingHide(id);
         };
 
-        return { loadingShow, loadingHide, fireRequest, fireRequestComponent };
+        return { loadingShow, loadingHide, fireRequest, fireRequestText, fireRequestComponent };
       },
     },
     {
@@ -101,6 +111,24 @@ describe('PLoading.vue', () => {
     expect(appWrapper.find('[aria-busy]').exists()).toBe(false);
   });
 
+  it(`hides all loading indicators when loadingHide gets called without an id`, async () => {
+    const wrapper = createWrapper({ delay: 200 });
+
+    await wrapper.find('.request-1-sec').trigger('click');
+
+    jest.advanceTimersByTime(500);
+    await waitNT(appWrapper.vm);
+    expect(appWrapper.find('[aria-busy]').exists()).toBe(true);
+
+    await wrapper.find('.request-3-secs').trigger('click');
+
+    jest.advanceTimersByTime(500);
+    await waitNT(appWrapper.vm);
+
+    await wrapper.find('.hide').trigger('click');
+    expect(appWrapper.find('[aria-busy]').exists()).toBe(false);
+  });
+
   it(`it waits for the queue to clear in order to hide the loading indicator`, async () => {
     const wrapper = createWrapper({ delay: 200 });
 
@@ -175,4 +203,19 @@ describe('PLoading.vue', () => {
     await waitNT(appWrapper.vm);
     expect(appWrapper.find('[aria-busy]').exists()).toBe(false);
   });
+
+  it(`throws an error when loadingShow gets called without an id`, async () => {
+    expect(() => {
+      createWrapperFor({
+        template: `<div></div>`,
+        setup() {
+          const { loadingShow } = usePLoading({ delay: 200 });
+
+          loadingShow({ content: 'test' });
+
+          return { loadingShow };
+        },
+      });
+    }).toThrowError('id is required');
+  });
 });

package/squirrel/components/p-loading/p-loading.stories.js

@@ -24,12 +24,13 @@ export const Default = {
   render: (args) => ({
     components: { PLoading, PBtn },
     setup() {
-      const { loadingShow } = usePLoading();
+      const { loadingShow, loadingHide } = usePLoading();
 
       const fireRequest = async (time) => {
-        const hide = loadingShow();
+        const id = `default-${time}`;
+        loadingShow({ id });
         await new Promise((resolve) => setTimeout(resolve, time));
-        hide();
+        loadingHide(id);
       };
 
       return { args, loadingShow, fireRequest };
@@ -53,12 +54,13 @@ export const WithVariableText = {
   render: (args) => ({
     components: { PLoading, PBtn },
     setup() {
-      const { loadingShow } = usePLoading();
+      const { loadingShow, loadingHide } = usePLoading();
 
-      const fireRequestText = async (time, text) => {
-        const hide = loadingShow(text);
+      const fireRequestText = async (time, message) => {
+        const id = `text-${time}`;
+        loadingShow({ id, content: message });
         await new Promise((resolve) => setTimeout(resolve, time));
-        hide();
+        loadingHide(id);
       };
 
       return { args, loadingShow, fireRequestText };
@@ -81,12 +83,13 @@ export const WithComponentAsContent = {
   render: (args) => ({
     components: { PLoading, PBtn },
     setup() {
-      const { loadingShow } = usePLoading();
+      const { loadingShow, loadingHide } = usePLoading();
 
       const fireRequestComponent = async (time) => {
-        const hide = loadingShow(ComputationStatus);
+        const id = `component-${time}`;
+        loadingShow({ id, content: ComputationStatus });
         await new Promise((resolve) => setTimeout(resolve, time));
-        hide();
+        loadingHide(id);
       };
 
       return { args, loadingShow, fireRequestComponent };

package/squirrel/components/p-loading/usePLoading.ts

@@ -1,5 +1,4 @@
 import { type Component, type Ref, computed, getCurrentScope, markRaw, onScopeDispose, ref } from 'vue';
-import { uniqueId } from 'lodash-es';
 
 type Options = {
   delay?: number;
@@ -9,30 +8,30 @@ type Content = string | Component;
 
 type LoadingItem = {
   id: string;
-  content: Content;
+  content?: Content;
 };
 
 type UsePLoading = {
   show: Ref<boolean>;
   content: Content;
-  loadingShow: (content?: Content) => () => void;
-  loadingHide: () => void;
+  loadingShow: (loadingItem: LoadingItem) => void;
+  loadingHide: (id: LoadingItem['id']) => void;
 };
 
 const LOADING_TEXT = 'Loading...';
 const show = ref(false);
 const loadingItems = ref<LoadingItem[]>([]);
-const content = computed(() => {
-  return loadingItems.value[loadingItems.value.length - 1]?.content;
-});
+const content = computed(() => loadingItems.value[loadingItems.value.length - 1]?.content);
 let timer: ReturnType<typeof setTimeout>;
 
 export const usePLoading = (options?: Options): UsePLoading => {
   const { delay } = { delay: 200, ...options };
   const scope = getCurrentScope();
 
-  const loadingShow = (content?: Content) => {
-    const loadingId = uniqueId();
+  const loadingShow = (loadingItem: LoadingItem) => {
+    if (!loadingItem.id) {
+      throw new Error('id is required');
+    }
 
     if (loadingItems.value.length === 0 && delay > 0) {
       timer = setTimeout(() => {
@@ -43,25 +42,19 @@ export const usePLoading = (options?: Options): UsePLoading => {
     }
 
     loadingItems.value.push({
-      id: loadingId,
-      content: content && typeof content === 'object' ? markRaw(content) : content || LOADING_TEXT,
+      id: loadingItem.id,
+      content:
+        loadingItem.content && typeof loadingItem.content === 'object'
+          ? markRaw(loadingItem.content)
+          : loadingItem.content || LOADING_TEXT,
     });
-
-    const hide = () => {
-      loadingItems.value = loadingItems.value.filter((item) => item.id !== loadingId);
-      clearTimeout(timer);
-
-      if (loadingItems.value.length === 0) {
-        show.value = false;
-      }
-    };
-
-    return hide;
   };
 
-  const loadingHide = () => {
-    loadingItems.value = [];
-    show.value = false;
+  const loadingHide = (id?: LoadingItem['id']) => {
+    loadingItems.value = id && typeof id === 'string' ? loadingItems.value.filter((item) => item.id !== id) : [];
+    if (loadingItems.value.length === 0) {
+      show.value = false;
+    }
     clearTimeout(timer);
   };