@pequity/squirrel 1.2.11 → 2.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "1.2.11",
+  "version": "2.0.0",
   "packageManager": "pnpm@8.9.2",
   "type": "module",
   "scripts": {
@@ -58,26 +58,26 @@
     "@popperjs/core": "2.11.8",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-a11y": "^8.1.10",
-    "@storybook/addon-actions": "^8.1.10",
-    "@storybook/addon-essentials": "^8.1.10",
-    "@storybook/addon-interactions": "^8.1.10",
-    "@storybook/addon-links": "^8.1.10",
-    "@storybook/blocks": "^8.1.10",
+    "@storybook/addon-a11y": "^8.1.11",
+    "@storybook/addon-actions": "^8.1.11",
+    "@storybook/addon-essentials": "^8.1.11",
+    "@storybook/addon-interactions": "^8.1.11",
+    "@storybook/addon-links": "^8.1.11",
+    "@storybook/blocks": "^8.1.11",
     "@storybook/jest": "^0.2.3",
-    "@storybook/manager-api": "^8.1.10",
+    "@storybook/manager-api": "^8.1.11",
     "@storybook/test-runner": "^0.19.0",
     "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "^8.1.10",
-    "@storybook/vue3": "^8.1.10",
-    "@storybook/vue3-vite": "^8.1.10",
-    "@tanstack/vue-virtual": "3.7.0",
+    "@storybook/theming": "^8.1.11",
+    "@storybook/vue3": "^8.1.11",
+    "@storybook/vue3-vite": "^8.1.11",
+    "@tanstack/vue-virtual": "3.8.1",
     "@types/jest": "^29.5.12",
     "@types/jsdom": "^21.1.7",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^20.14.8",
+    "@types/node": "^20.14.10",
     "@vitejs/plugin-vue": "^5.0.5",
-    "@vue/compiler-sfc": "3.4.30",
+    "@vue/compiler-sfc": "3.4.31",
     "@vue/test-utils": "^2.4.6",
     "@vue/vue3-jest": "^29.2.6",
     "autoprefixer": "^10.4.19",
@@ -86,31 +86,31 @@
     "eslint": "^8.57.0",
     "eslint-plugin-storybook": "^0.8.0",
     "floating-vue": "5.2.2",
-    "glob": "^10.4.2",
+    "glob": "^10.4.3",
     "husky": "^9.0.11",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^15.2.7",
     "lodash-es": "4.17.21",
     "make-coverage-badge": "^1.2.0",
-    "postcss": "^8.4.38",
+    "postcss": "^8.4.39",
     "prettier": "^3.3.2",
     "prettier-plugin-tailwindcss": "^0.6.5",
     "resolve-tspaths": "^0.8.19",
-    "rimraf": "^5.0.7",
+    "rimraf": "^5.0.8",
     "sass": "^1.77.6",
     "semantic-release": "^24.0.0",
-    "storybook": "^8.1.10",
+    "storybook": "^8.1.11",
     "svgo": "^3.3.2",
     "tailwindcss": "^3.4.4",
     "ts-jest": "^29.1.5",
-    "typescript": "5.4.5",
+    "typescript": "5.5.3",
     "v-calendar": "3.1.2",
-    "vite": "^5.3.1",
-    "vue": "3.4.30",
+    "vite": "^5.3.3",
+    "vue": "3.4.31",
     "vue-currency-input": "3.1.0",
     "vue-router": "4.4.0",
     "vue-toastification": "2.0.0-rc.5",
-    "vue-tsc": "2.0.22"
+    "vue-tsc": "2.0.26"
   }
 }

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

@@ -1,11 +1,11 @@
 <template>
-  <label class="inline-flex items-center">
+  <label class="inline-flex items-center" :class="[{ hidden: $attrs.hidden }, $attrs.class]" :style="style">
     <slot name="label-before"></slot>
     <input
       type="checkbox"
       class="h-4 w-4 shrink-0 appearance-none rounded border border-p-gray-30 bg-surface duration-100 ease-in-out checked:border-none checked:bg-primary disabled:opacity-50"
+      v-bind="attrs"
       :checked="modelValue"
-      v-bind="$attrs"
       @change="$emit('update:modelValue', ($event.target as HTMLInputElement).checked)"
     />
     <slot name="label">
@@ -17,6 +17,8 @@
 </template>
 
 <script setup lang="ts">
+import { type StyleValue, computed, useAttrs } from 'vue';
+
 defineOptions({
   name: 'PCheckbox',
   inheritAttrs: false,
@@ -34,6 +36,18 @@ defineProps({
     default: '',
   },
 });
+
+const allAttrs = useAttrs();
+
+const attrs = computed(() => {
+  const { class: classes, style, ...rest } = allAttrs;
+
+  return rest;
+});
+
+const style = computed(() => {
+  return allAttrs.style as StyleValue;
+});
 </script>
 
 <style lang="css" scoped>

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

@@ -1,4 +1,5 @@
 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 { usePLoading } from '@squirrel/components/p-loading/usePLoading';
 
@@ -9,25 +10,43 @@ const createAppWrapper = () =>
   });
 
 const createWrapper = (options) => {
-  return createWrapperFor({
-    template: `
+  return createWrapperFor(
+    {
+      template: `
       <button class="show" @click="loadingShow"></button>
       <button class="hide" @click="loadingHide"></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-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, text) => {
+          const hide = loadingShow(text);
+          await sleep(time);
+          hide();
+        };
+
+        const fireRequestComponent = async (time) => {
+          const hide = loadingShow(PSkeletonLoader);
+          await new Promise((resolve) => setTimeout(resolve, time));
+          hide();
+        };
+
+        return { loadingShow, loadingHide, fireRequest, fireRequestComponent };
+      },
     },
-  });
+    {
+      global: {
+        stubs: {
+          PSkeletonLoader: true,
+        },
+      },
+    }
+  );
 };
 
 describe('PLoading.vue', () => {
@@ -117,4 +136,43 @@ 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);
+  });
 });

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';
@@ -23,15 +24,15 @@ export const Default = {
   render: (args) => ({
     components: { PLoading, PBtn },
     setup() {
-      const { loadingShow, loadingHide } = usePLoading();
+      const { loadingShow } = usePLoading();
 
       const fireRequest = async (time) => {
-        loadingShow();
+        const hide = loadingShow();
         await new Promise((resolve) => setTimeout(resolve, time));
-        loadingHide();
+        hide();
       };
 
-      return { args, loadingShow, loadingHide, fireRequest };
+      return { args, loadingShow, fireRequest };
     },
     template: `
     <PLoading />
@@ -47,3 +48,59 @@ export const Default = {
     `,
   }),
 };
+
+export const WithVariableText = {
+  render: (args) => ({
+    components: { PLoading, PBtn },
+    setup() {
+      const { loadingShow } = usePLoading();
+
+      const fireRequestText = async (time, text) => {
+        const hide = loadingShow(text);
+        await new Promise((resolve) => setTimeout(resolve, time));
+        hide();
+      };
+
+      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 } = usePLoading();
+
+      const fireRequestComponent = async (time) => {
+        const hide = loadingShow(ComputationStatus);
+        await new Promise((resolve) => setTimeout(resolve, time));
+        hide();
+      };
+
+      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,40 @@
-import { getCurrentScope, onScopeDispose, ref } from 'vue';
+import { type Component, type Ref, computed, getCurrentScope, markRaw, onScopeDispose, ref } from 'vue';
 import { uniqueId } from 'lodash-es';
 
 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;
+};
+
+const LOADING_TEXT = 'Loading...';
 const show = ref(false);
-const loadingIds: string[] = [];
+const loadingItems = ref<LoadingItem[]>([]);
+const content = computed(() => {
+  return 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 = (content?: Content) => {
+    const loadingId = uniqueId();
+
+    if (loadingItems.value.length === 0 && delay > 0) {
       timer = setTimeout(() => {
         show.value = true;
       }, delay);
@@ -22,23 +42,36 @@ export const usePLoading = (options?: Options) => {
       show.value = true;
     }
 
-    loadingIds.push(uniqueId());
+    loadingItems.value.push({
+      id: loadingId,
+      content: content && typeof content === 'object' ? markRaw(content) : 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 = () => {
-    if (loadingIds.length === 1) {
-      show.value = false;
-    }
-
+    loadingItems.value = [];
+    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;
     }
   }