@pequity/squirrel 6.0.9 → 6.0.11

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "6.0.9",
-  "packageManager": "pnpm@9.15.4",
+  "version": "6.0.11",
+  "packageManager": "pnpm@9.15.5",
   "type": "module",
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -47,58 +47,58 @@
     "vue-toastification": "^2.0.0-rc.5"
   },
   "devDependencies": {
-    "@commitlint/cli": "^19.6.1",
-    "@commitlint/config-conventional": "^19.6.0",
-    "@pequity/eslint-config": "^1.0.4",
-    "@playwright/test": "^1.49.1",
+    "@commitlint/cli": "^19.7.1",
+    "@commitlint/config-conventional": "^19.7.1",
+    "@pequity/eslint-config": "^1.1.1",
+    "@playwright/test": "^1.50.1",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-a11y": "^8.5.0",
-    "@storybook/addon-actions": "^8.5.0",
-    "@storybook/addon-essentials": "^8.5.0",
-    "@storybook/addon-interactions": "^8.5.0",
-    "@storybook/addon-links": "^8.5.0",
-    "@storybook/blocks": "^8.5.0",
-    "@storybook/manager-api": "^8.5.0",
-    "@storybook/test": "^8.5.0",
+    "@storybook/addon-a11y": "^8.5.4",
+    "@storybook/addon-actions": "^8.5.4",
+    "@storybook/addon-essentials": "^8.5.4",
+    "@storybook/addon-interactions": "^8.5.4",
+    "@storybook/addon-links": "^8.5.4",
+    "@storybook/blocks": "^8.5.4",
+    "@storybook/manager-api": "^8.5.4",
+    "@storybook/test": "^8.5.4",
     "@storybook/test-runner": "^0.21.0",
-    "@storybook/theming": "^8.5.0",
-    "@storybook/vue3": "^8.5.0",
-    "@storybook/vue3-vite": "^8.5.0",
-    "@tanstack/vue-virtual": "3.11.2",
+    "@storybook/theming": "^8.5.4",
+    "@storybook/vue3": "^8.5.4",
+    "@storybook/vue3-vite": "^8.5.4",
+    "@tanstack/vue-virtual": "3.13.0",
     "@types/jsdom": "^21.1.7",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^22.10.7",
+    "@types/node": "^22.13.1",
     "@vitejs/plugin-vue": "^5.2.1",
-    "@vitest/coverage-v8": "^3.0.3",
+    "@vitest/coverage-v8": "^3.0.5",
     "@vue/compiler-sfc": "3.5.13",
     "@vue/test-utils": "^2.4.6",
     "@vuepic/vue-datepicker": "11.0.1",
     "autoprefixer": "^10.4.20",
     "dayjs": "1.11.13",
-    "eslint": "^9.18.0",
+    "eslint": "^9.20.1",
     "eslint-plugin-storybook": "^0.11.2",
     "floating-vue": "5.2.2",
     "glob": "^11.0.1",
     "husky": "^9.1.7",
     "iconify-icon": "^2.3.0",
     "jsdom": "^26.0.0",
-    "lint-staged": "^15.4.1",
+    "lint-staged": "^15.4.3",
     "lodash-es": "4.17.21",
     "make-coverage-badge": "^1.2.0",
-    "postcss": "^8.5.1",
+    "postcss": "^8.5.2",
     "prettier": "^3.4.2",
-    "prettier-plugin-tailwindcss": "^0.6.10",
+    "prettier-plugin-tailwindcss": "^0.6.11",
     "resolve-tspaths": "^0.8.23",
     "rimraf": "^6.0.1",
-    "sass": "^1.83.4",
-    "semantic-release": "^24.2.1",
-    "storybook": "^8.5.0",
+    "sass": "^1.84.0",
+    "semantic-release": "^24.2.2",
+    "storybook": "^8.5.4",
     "svgo": "^3.3.2",
     "tailwindcss": "^3.4.17",
     "typescript": "5.7.3",
-    "vite": "^6.0.11",
-    "vitest": "^3.0.3",
+    "vite": "^6.1.0",
+    "vitest": "^3.0.5",
     "vue": "3.5.13",
     "vue-currency-input": "3.2.1",
     "vue-router": "4.5.0",

package/squirrel/assets/p-loading-spinner.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24">
+  <path fill="currentColor" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
+    opacity="0.25" />
+  <path fill="currentColor"
+    d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z">
+    <animateTransform attributeName="transform" dur="0.75s" repeatCount="indefinite" type="rotate"
+      values="0 12 12;360 12 12" />
+  </path>
+</svg>

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

@@ -24,10 +24,9 @@
     <div :class="{ invisible: loading }"><slot></slot></div>
     <PRingLoader
       v-if="loading"
-      :style="loaderStyle"
       :color="loaderColor"
       :size="loaderSize"
-      class="left-0 right-0 top-0 ml-auto mr-auto pt-1"
+      class="absolute bottom-0 left-0 right-0 top-0 flex items-center justify-center"
     />
   </Component>
 </template>
@@ -37,7 +36,6 @@ import { type Size } from '@squirrel/components/p-btn/p-btn.types';
 import PRingLoader from '@squirrel/components/p-ring-loader/p-ring-loader.vue';
 import { isExternalLink } from '@squirrel/utils/link';
 import { sanitizeUrl } from '@squirrel/utils/sanitization';
-import { type Color, getColorDeep } from '@squirrel/utils/tailwind';
 import { defineComponent, type PropType } from 'vue';
 import { type RouteLocationRaw, RouterLink } from 'vue-router';
 
@@ -94,16 +92,16 @@ const LOADER_SIZES = {
 } as const satisfies { [key in Size]: number };
 
 const LOADER_COLORS = {
-  [BUTTON_TYPES.PRIMARY]: 'p-blue-15',
-  [BUTTON_TYPES.SECONDARY]: 'p-purple-60',
-  [BUTTON_TYPES.PRIMARY_OUTLINE]: 'p-blue-60',
-  [BUTTON_TYPES.SECONDARY_OUTLINE]: 'p-purple-60',
-  [BUTTON_TYPES.SECONDARY_OUTLINE_BLUE]: 'p-purple-60',
-  [BUTTON_TYPES.ERROR]: 'p-blue-15',
-  [BUTTON_TYPES.SUCCESS]: 'p-blue-15',
-  [BUTTON_TYPES.PRIMARY_LINK]: 'p-blue-60',
-  [BUTTON_TYPES.SECONDARY_GHOST]: 'p-purple-60',
-  [BUTTON_TYPES.SECONDARY_GHOST_DARK]: 'p-blue-15',
+  [BUTTON_TYPES.PRIMARY]: 'var(--color-p-blue-15)',
+  [BUTTON_TYPES.SECONDARY]: 'var(--color-p-purple-60)',
+  [BUTTON_TYPES.PRIMARY_OUTLINE]: 'var(--color-p-blue-60)',
+  [BUTTON_TYPES.SECONDARY_OUTLINE]: 'var(--color-p-purple-60)',
+  [BUTTON_TYPES.SECONDARY_OUTLINE_BLUE]: 'var(--color-p-purple-60)',
+  [BUTTON_TYPES.ERROR]: 'var(--color-p-blue-15)',
+  [BUTTON_TYPES.SUCCESS]: 'var(--color-p-blue-15)',
+  [BUTTON_TYPES.PRIMARY_LINK]: 'var(--color-p-blue-60)',
+  [BUTTON_TYPES.SECONDARY_GHOST]: 'var(--color-p-purple-60)',
+  [BUTTON_TYPES.SECONDARY_GHOST_DARK]: 'var(--color-p-blue-15)',
 } as const;
 
 export default defineComponent({
@@ -167,11 +165,6 @@ export default defineComponent({
       default: '',
     },
   },
-  data() {
-    return {
-      loaderStyle: { position: 'absolute' },
-    };
-  },
   computed: {
     classes() {
       return `${DEFAULT_CLASSES} ${BUTTON_SIZES[this.size]} ${BUTTON_CLASSES[this.type]}`;
@@ -180,9 +173,7 @@ export default defineComponent({
       return Number(`${LOADER_SIZES[this.size]}`);
     },
     loaderColor() {
-      const type = LOADER_COLORS[this.type] as Color;
-
-      return getColorDeep(type);
+      return LOADER_COLORS[this.type];
     },
   },
   methods: {

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

@@ -13,7 +13,7 @@
         >
           <Transition enter-from-class="opacity-0" enter-active-class="transition duration-500">
             <Component :is="content" v-if="isComponent(content)" v-bind="componentProps" />
-            <div v-else :class="textDivClass">{{ content }}</div>
+            <div v-else :class="textDivClass"><PLoadingSpinner class="pt-0.5" /> {{ content }}</div>
           </Transition>
         </div>
       </div>
@@ -21,18 +21,19 @@
     <div v-if="content" class="invisible fixed">
       <div ref="dimsReference">
         <Component :is="content" v-if="isComponent(content)" v-bind="componentProps" />
-        <div v-else :class="textDivClass">{{ content }}</div>
+        <div v-else :class="textDivClass"><PLoadingSpinner class="pt-0.5" /> {{ content }}</div>
       </div>
     </div>
   </Teleport>
 </template>
 
 <script setup lang="ts">
+import PLoadingSpinner from '@squirrel/assets//p-loading-spinner.svg?inline';
 import { usePLoading } from '@squirrel/components/p-loading/usePLoading';
 import { isComponent } from '@squirrel/utils/component';
 import { onBeforeUnmount, ref, toValue, watch } from 'vue';
 
-const textDivClass = `overflow-hidden whitespace-nowrap px-4 pt-1 h-8 text-center text-sm font-semibold text-p-purple-60`;
+const textDivClass = `flex h-8 justify-center gap-x-1.5 overflow-hidden whitespace-nowrap px-6 pt-1 text-sm font-semibold text-p-purple-60`;
 
 defineOptions({
   name: 'PLoading',

package/squirrel/components/p-ring-loader/p-ring-loader.spec.js

@@ -1,4 +1,5 @@
 import PRingLoader from '@squirrel/components/p-ring-loader/p-ring-loader.vue';
+import { expect } from '@storybook/test';
 import { createWrapperFor } from '@tests/vitest.helpers';
 
 describe('PRingLoader.vue', () => {
@@ -9,35 +10,20 @@ describe('PRingLoader.vue', () => {
         color: '#ccc',
         duration: '1s',
       },
+      global: { stubs: { PIcon: true } },
     });
 
-    const loader = await wrapper.find('.relative.inline-block');
-
-    const innerDivs = await loader.findAll('div');
-
-    innerDivs.forEach((innerDiv, i) => {
-      expect(innerDiv.attributes().style).toContain(
-        'border-width: 7px; border-color: #ccc transparent transparent transparent; animation-duration: 1s; animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);'
-      );
-      if (i === 0) {
-        expect(innerDiv.attributes().style).toContain('animation-delay: -0.375s;');
-      }
-      if (i === 1) {
-        expect(innerDiv.attributes().style).toContain('animation-delay: -0.25s;');
-      }
-      if (i === 2) {
-        expect(innerDiv.attributes().style).toContain('animation-delay: -0.125s;');
-      }
-      if (i === 3) {
-        expect(innerDiv.attributes().style).not.toContain('animation-delay');
-      }
-      expect(innerDiv.attributes().class).toBe(
-        'block animate-spin absolute box-border rounded-full w-4/5 h-4/5 m-[10%]'
-      );
-    });
+    const loader = wrapper.findComponent({ name: 'PIcon' });
 
     expect(loader.exists()).toBe(true);
-    expect(innerDivs.length).toBe(4);
+    expect(loader.props()).toEqual({ icon: 'svg-spinners:90-ring-with-bg' });
+    expect(loader.attributes()).toEqual({
+      duration: '1s',
+      icon: 'svg-spinners:90-ring-with-bg',
+      style: 'color: rgb(204, 204, 204);',
+      width: '62.44',
+      class: 'text-p-blue-60',
+    });
   });
 
   it('changes the color dynamically', async () => {
@@ -45,20 +31,15 @@ describe('PRingLoader.vue', () => {
       props: {
         color: '#ccc',
       },
+      global: { stubs: { PIcon: true } },
     });
 
-    const loader = await wrapper.find('.relative.inline-block');
+    const loader = wrapper.findComponent({ name: 'PIcon' });
 
-    const innerDivs = await loader.findAll('div');
-
-    innerDivs.forEach((innerDiv, i) => {
-      expect(innerDiv.element.style['border-color']).toBe('#ccc transparent transparent transparent');
-    });
+    expect(loader.attributes().style).toBe('color: rgb(204, 204, 204);');
 
     await wrapper.setProps({ color: '#ddd' });
 
-    innerDivs.forEach((innerDiv, i) => {
-      expect(innerDiv.element.style['border-color']).toBe('#ddd transparent transparent transparent');
-    });
+    expect(loader.attributes().style).toBe('color: rgb(221, 221, 221);');
   });
 });

package/squirrel/components/p-ring-loader/p-ring-loader.stories.js

@@ -13,12 +13,7 @@ export default {
       control: { type: 'color' },
       description: 'color of the loader',
     },
-    duration: {
-      control: { type: 'text' },
-      description: 'duration of the animation in seconds e.g. 1.2s, 2s',
-    },
   },
-
   parameters: {
     docs: {
       description: {
@@ -39,6 +34,5 @@ export const Default = {
   args: {
     size: 100,
     color: '#333393',
-    duration: '1.8s',
   },
 };

package/squirrel/components/p-ring-loader/p-ring-loader.vue

@@ -1,71 +1,28 @@
 <template>
-  <div class="relative inline-block" :style="{ width: `${size}px`, height: `${size}px` }">
-    <div :class="INNER_DIV_CLASS" :style="[spinnerStyle, animDiv1]"></div>
-    <div :class="INNER_DIV_CLASS" :style="[spinnerStyle, animDiv2]"></div>
-    <div :class="INNER_DIV_CLASS" :style="[spinnerStyle, animDiv3]"></div>
-    <div :class="INNER_DIV_CLASS" :style="[spinnerStyle]"></div>
-  </div>
+  <PIcon icon="svg-spinners:90-ring-with-bg" :width="spinnerSize" class="text-p-blue-60" :style="style" />
 </template>
 
 <script setup lang="ts">
-import { type Color, getColor } from '@squirrel/utils/tailwind';
+import PIcon from '@squirrel/components/p-icon/p-icon.vue';
 import { computed } from 'vue';
 
-const calcPropertyValue = (propName: string, originalValue: string, modificator: number) => {
-  const computedStyle: Record<string, string> = {};
-  const timeQuantityOuter = originalValue.match(/^\d*\.?\d+/)?.[0];
-  const timeUnit = originalValue.match(/s|(ms)$/)?.[0] || 's';
-  const timeQuantityInner = Math.round(Number(timeQuantityOuter) * 1000 * modificator) / 1000;
-
-  computedStyle[propName] = timeQuantityInner + timeUnit;
-
-  return computedStyle;
-};
-
-const INNER_DIV_CLASS = 'block animate-spin absolute box-border rounded-full w-4/5 h-4/5 m-[10%]';
-
 defineOptions({
   name: 'PRingLoader',
 });
 
-const props = defineProps({
-  size: {
-    type: Number,
-    default: 80,
-  },
-  color: {
-    type: String,
-    default: getColor('primary' as Color),
-  },
-  duration: {
-    type: String,
-    default: '1.2s',
-    validator(value: string) {
-      const res = /^\d*\.?\d+(s|ms)$/;
-
-      return res.test(value);
-    },
-  },
-});
-
-const spinnerStyle = computed(() => {
-  return {
-    borderWidth: `${props.size * 0.1}px`,
-    borderColor: `${props.color} transparent transparent transparent`,
-    animationDuration: props.duration,
-    animationTimingFunction: 'cubic-bezier(0.5, 0, 0.5, 1)',
-  };
-});
+type Props = {
+  size?: number;
+  color?: string;
+};
 
-const animDiv1 = computed(() => {
-  return calcPropertyValue('animationDelay', props.duration, -0.375);
+const props = withDefaults(defineProps<Props>(), {
+  size: 80,
+  color: '',
 });
 
-const animDiv2 = computed(() => {
-  return calcPropertyValue('animationDelay', props.duration, -0.25);
-});
+const spinnerSize = computed(() => props.size * 0.892);
 
-const animDiv3 = computed(() => {
-  return calcPropertyValue('animationDelay', props.duration, -0.125);
-});
+const style = computed(() => ({
+  color: props.color,
+}));
 </script>