@pequity/squirrel 1.2.12 → 3.0.0

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

@@ -1,5 +1,6 @@
 import PLoading from '@squirrel/components/p-loading/p-loading.vue';
-import { createWrapperFor, sleep, waitNT } from '@tests/jest.helpers';
+import PSkeletonLoader from '@squirrel/components/p-skeleton-loader/p-skeleton-loader.vue';
+import { createWrapperFor, waitNT } from '@tests/jest.helpers';
 import { usePLoading } from '@squirrel/components/p-loading/usePLoading';
 
 const createAppWrapper = () =>
@@ -9,25 +10,53 @@ const createAppWrapper = () =>
   });
 
 const createWrapper = (options) => {
-  return createWrapperFor({
-    template: `
-      <button class="show" @click="loadingShow"></button>
-      <button class="hide" @click="loadingHide"></button>
+  return createWrapperFor(
+    {
+      template: `
+      <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="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) => {
-        loadingShow();
-        await sleep(time);
-        loadingHide();
-      };
-
-      return { loadingShow, loadingHide, fireRequest };
+      setup() {
+        const { loadingShow, loadingHide } = usePLoading(options);
+
+        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 id = `component-${time}`;
+          loadingShow({ id, content: PSkeletonLoader });
+          await new Promise((resolve) => setTimeout(resolve, time));
+          loadingHide(id);
+        };
+
+        return { loadingShow, loadingHide, fireRequest, fireRequestText, fireRequestComponent };
+      },
     },
-  });
+    {
+      global: {
+        stubs: {
+          PSkeletonLoader: true,
+        },
+      },
+    }
+  );
 };
 
 describe('PLoading.vue', () => {
@@ -82,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 });
 
@@ -117,4 +164,58 @@ describe('PLoading.vue', () => {
     await waitNT(appWrapper.vm);
     expect(appWrapper.find('[aria-busy]').exists()).toBe(true);
   });
+
+  it(`shows the loading indicator with variable text`, async () => {
+    const wrapper = createWrapper({ delay: 200 });
+
+    await wrapper.find('.request-3-secs-text').trigger('click');
+
+    jest.advanceTimersByTime(300);
+    await waitNT(appWrapper.vm);
+    expect(appWrapper.find('[aria-busy]').text()).toBe('3 secs');
+
+    await wrapper.find('.request-1-sec-text').trigger('click');
+
+    jest.advanceTimersByTime(300);
+    await waitNT(appWrapper.vm);
+    expect(appWrapper.find('[aria-busy]').text()).toBe('1 sec');
+
+    jest.advanceTimersByTime(1200);
+    await waitNT(appWrapper.vm);
+    expect(appWrapper.find('[aria-busy]').text()).toBe('3 secs');
+
+    jest.advanceTimersByTime(1200);
+    await waitNT(appWrapper.vm);
+    expect(appWrapper.find('[aria-busy]').exists()).toBe(false);
+  });
+
+  it(`accepts a component as the content`, async () => {
+    const wrapper = createWrapper({ delay: 200 });
+
+    await wrapper.find('.request-1-sec-component').trigger('click');
+
+    jest.advanceTimersByTime(300);
+    await waitNT(appWrapper.vm);
+    expect(appWrapper.find('[aria-busy]').exists()).toBe(true);
+    expect(appWrapper.findComponent(PSkeletonLoader).exists()).toBe(true);
+
+    jest.advanceTimersByTime(800);
+    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

@@ -1,3 +1,4 @@
+import ComputationStatus from '@/playground/components/ComputationStatus.vue';
 import PBtn from '@squirrel/components/p-btn/p-btn.vue';
 import PLoading from '@squirrel/components/p-loading/p-loading.vue';
 import { usePLoading } from '@squirrel/components/p-loading/usePLoading';
@@ -26,12 +27,13 @@ export const Default = {
       const { loadingShow, loadingHide } = usePLoading();
 
       const fireRequest = async (time) => {
-        loadingShow();
+        const id = `default-${time}`;
+        loadingShow({ id });
         await new Promise((resolve) => setTimeout(resolve, time));
-        loadingHide();
+        loadingHide(id);
       };
 
-      return { args, loadingShow, loadingHide, fireRequest };
+      return { args, loadingShow, fireRequest };
     },
     template: `
     <PLoading />
@@ -47,3 +49,61 @@ export const Default = {
     `,
   }),
 };
+
+export const WithVariableText = {
+  render: (args) => ({
+    components: { PLoading, PBtn },
+    setup() {
+      const { loadingShow, loadingHide } = usePLoading();
+
+      const fireRequestText = async (time, message) => {
+        const id = `text-${time}`;
+        loadingShow({ id, content: message });
+        await new Promise((resolve) => setTimeout(resolve, time));
+        loadingHide(id);
+      };
+
+      return { args, loadingShow, fireRequestText };
+    },
+    template: `
+    <PLoading />
+    <div class="mt-10">
+      <div>Demo with variable loading text</div>
+      <div class="flex gap-4 mt-2">
+        <PBtn @click="fireRequestText(1000, '1 sec')">Fire request 1 sec</PBtn>
+        <PBtn @click="fireRequestText(3000, '3 secs')">Fire request 3 secs</PBtn>
+        <PBtn @click="fireRequestText(5000, '5 secs')">Fire request 5 secs</PBtn>
+      </div>
+    </div>
+    `,
+  }),
+};
+
+export const WithComponentAsContent = {
+  render: (args) => ({
+    components: { PLoading, PBtn },
+    setup() {
+      const { loadingShow, loadingHide } = usePLoading();
+
+      const fireRequestComponent = async (time) => {
+        const id = `component-${time}`;
+        loadingShow({ id, content: ComputationStatus });
+        await new Promise((resolve) => setTimeout(resolve, time));
+        loadingHide(id);
+      };
+
+      return { args, loadingShow, fireRequestComponent };
+    },
+    template: `
+    <PLoading />
+    <div class="mt-10">
+      <div>Demo with a component as content</div>
+      <div class="flex gap-4 mt-2">
+        <PBtn @click="fireRequestComponent(1000)">Fire request 1 sec</PBtn>
+        <PBtn @click="fireRequestComponent(3000)">Fire request 3 secs</PBtn>
+        <PBtn @click="fireRequestComponent(5000)">Fire request 5 secs</PBtn>
+      </div>
+    </div>
+    `,
+  }),
+};

package/squirrel/components/p-loading/p-loading.vue

@@ -2,22 +2,46 @@
   <Transition name="pm-backdrop-transition" enter-active-class="fadeInDown" leave-active-class="fadeOutUp">
     <div v-if="show" class="fixed left-0 top-0 z-[120] flex w-full justify-center" aria-live="polite" aria-busy="true">
       <div
-        class="h-8 rounded-b border-x border-b border-p-gray-30 bg-p-blue-10 px-4 pt-2 text-sm font-semibold leading-none text-p-purple-60 shadow-sm"
+        :style="{ width: `${width}px` }"
+        class="h-8 overflow-hidden whitespace-nowrap rounded-b border-x border-b border-p-gray-30 bg-p-blue-10 px-4 pt-2 text-center text-sm font-semibold leading-none text-p-purple-60 shadow-sm transition-all duration-500"
       >
-        Loading...
+        <Component :is="content" v-if="isComponent(content)" />
+        <template v-else>{{ content }}</template>
       </div>
     </div>
   </Transition>
+  <div v-if="content" class="invisible fixed">
+    <div ref="widthReference" class="inline-flex px-4">
+      <Component :is="content" v-if="isComponent(content)" />
+      <template v-else>{{ content }}</template>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
+import { type Component, ref, toValue, watch } from 'vue';
 import { usePLoading } from '@squirrel/components/p-loading/usePLoading';
 
 defineOptions({
   name: 'PLoading',
 });
 
-const { show } = usePLoading();
+const { show, content } = usePLoading();
+const widthReference = ref<HTMLElement | null>(null);
+const width = ref(0);
+
+watch(
+  () => toValue(content),
+  () => {
+    if (widthReference.value) {
+      width.value = widthReference.value.offsetWidth;
+    }
+  },
+  { flush: 'post' }
+);
+
+const isComponent = (content: unknown): content is Component =>
+  typeof content === 'object' && content !== null && 'render' in content && typeof content.render === 'function';
 </script>
 
 <style scoped lang="scss">

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

@@ -1,20 +1,39 @@
-import { getCurrentScope, onScopeDispose, ref } from 'vue';
-import { uniqueId } from 'lodash-es';
+import { type Component, type Ref, computed, getCurrentScope, markRaw, onScopeDispose, ref } from 'vue';
 
 type Options = {
   delay?: number;
 };
 
+type Content = string | Component;
+
+type LoadingItem = {
+  id: string;
+  content?: Content;
+};
+
+type UsePLoading = {
+  show: Ref<boolean>;
+  content: Content;
+  loadingShow: (loadingItem: LoadingItem) => void;
+  loadingHide: (id: LoadingItem['id']) => void;
+};
+
+const LOADING_TEXT = 'Loading...';
 const show = ref(false);
-const loadingIds: string[] = [];
+const loadingItems = ref<LoadingItem[]>([]);
+const content = computed(() => loadingItems.value[loadingItems.value.length - 1]?.content);
 let timer: ReturnType<typeof setTimeout>;
 
-export const usePLoading = (options?: Options) => {
+export const usePLoading = (options?: Options): UsePLoading => {
   const { delay } = { delay: 200, ...options };
   const scope = getCurrentScope();
 
-  const loadingShow = () => {
-    if (loadingIds.length === 0 && delay > 0) {
+  const loadingShow = (loadingItem: LoadingItem) => {
+    if (!loadingItem.id) {
+      throw new Error('id is required');
+    }
+
+    if (loadingItems.value.length === 0 && delay > 0) {
       timer = setTimeout(() => {
         show.value = true;
       }, delay);
@@ -22,23 +41,30 @@ export const usePLoading = (options?: Options) => {
       show.value = true;
     }
 
-    loadingIds.push(uniqueId());
+    loadingItems.value.push({
+      id: loadingItem.id,
+      content:
+        loadingItem.content && typeof loadingItem.content === 'object'
+          ? markRaw(loadingItem.content)
+          : loadingItem.content || LOADING_TEXT,
+    });
   };
 
-  const loadingHide = () => {
-    if (loadingIds.length === 1) {
+  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);
-    loadingIds.pop();
   };
 
   if (scope) {
     onScopeDispose(() => {
-      loadingHide();
+      loadingItems.value = [];
+      show.value = false;
+      clearTimeout(timer);
     });
   }
 
-  return { show, loadingShow, loadingHide };
+  return { show, content, loadingShow, loadingHide };
 };

package/squirrel/components/p-select-list/p-select-list.utils.ts

@@ -27,7 +27,7 @@ export const createInternalValue = (
     if (multiple) {
       val = (modelValue as AnyObject[]).map((v) => v[itemValue as keyof typeof modelValue]) as AnyValue[];
     } else {
-      val = modelValue ? modelValue[itemValue as keyof typeof modelValue] : modelValue;
+      val = modelValue ? (modelValue as AnyObject)[itemValue as keyof typeof modelValue] : modelValue;
     }
   }