@pequity/squirrel 8.3.2 → 8.3.4

package/dist/cjs/index.js

@@ -166,7 +166,9 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
         const file = filesToUpload[i];
         const fileName = file.name || file.url;
         if (res.length + files.value.length >= props.maxNumberOfFiles) {
-          toast.error(`You can only upload a maximum of ${props.maxNumberOfFiles} ${fileWord.value}.`);
+          if (!(props.multiple && props.maxNumberOfFiles === 1)) {
+            toast.error(`You can only upload a maximum of ${props.maxNumberOfFiles} ${fileWord.value}.`);
+          }
           break;
         }
         if (!fileName) {
@@ -661,7 +663,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const _hoisted_1$2 = { class: "flex items-center gap-2" };
-const _hoisted_2$2 = ["onClick"];
+const _hoisted_2$2 = ["data-state", "onClick"];
 const _hoisted_3$2 = {
   key: 0,
   class: "flex items-center"
@@ -698,6 +700,7 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
           }, [
             vue.createElementVNode("div", {
               class: vue.normalizeClass(["text-nowrap rounded-full border px-4 py-1 text-sm font-semibold", [stepClasses(step, i), { "cursor-pointer": _ctx.clickable && !step.disabled }]]),
+              "data-state": step.value === _ctx.activeStep ? "active" : "inactive",
               onClick: ($event) => emit("click:step", step, i)
             }, vue.toDisplayString(step.text || vue.unref(lodashEs.startCase)(String(step.value))), 11, _hoisted_2$2),
             i < _ctx.steps.length - 1 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$2, [
@@ -869,7 +872,7 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
                   ref: (el) => updateThsRefs(el, i),
                   key: col.id,
                   "data-col-id": col.id
-                }, col.thAttrs, {
+                }, { ref_for: true }, col.thAttrs, {
                   style: col.style,
                   class: "bg-surface"
                 }), [
@@ -885,9 +888,8 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
                         "show-filter-icon": col.filterable || col.sortable,
                         "tooltip-text": col.tooltip,
                         class: [{ "pl-2": i === 1 && _ctx.isFirstColFixed, "pr-2": i === _ctx.cols.length && _ctx.isLastColFixed }, "grow"],
-                        "text-color": headerCellTextColor(col),
-                        ref_for: true
-                      }, col.headerCellAttrs, {
+                        "text-color": headerCellTextColor(col)
+                      }, { ref_for: true }, col.headerCellAttrs, {
                         onClickFilterIcon: ($event) => _ctx.$emit("click-filter-icon", $event, col)
                       }), null, 16, ["text", "filter-active", "show-filter-icon", "tooltip-text", "class", "text-color", "onClickFilterIcon"])
                     ]),

package/dist/es/index.js

@@ -166,7 +166,9 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         const file = filesToUpload[i2];
         const fileName = file.name || file.url;
         if (res.length + files.value.length >= props.maxNumberOfFiles) {
-          toast.error(`You can only upload a maximum of ${props.maxNumberOfFiles} ${fileWord.value}.`);
+          if (!(props.multiple && props.maxNumberOfFiles === 1)) {
+            toast.error(`You can only upload a maximum of ${props.maxNumberOfFiles} ${fileWord.value}.`);
+          }
           break;
         }
         if (!fileName) {
@@ -661,7 +663,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$2 = { class: "flex items-center gap-2" };
-const _hoisted_2$2 = ["onClick"];
+const _hoisted_2$2 = ["data-state", "onClick"];
 const _hoisted_3$2 = {
   key: 0,
   class: "flex items-center"
@@ -698,6 +700,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
           }, [
             createElementVNode("div", {
               class: normalizeClass(["text-nowrap rounded-full border px-4 py-1 text-sm font-semibold", [stepClasses(step, i2), { "cursor-pointer": _ctx.clickable && !step.disabled }]]),
+              "data-state": step.value === _ctx.activeStep ? "active" : "inactive",
               onClick: ($event) => emit("click:step", step, i2)
             }, toDisplayString(step.text || unref(startCase)(String(step.value))), 11, _hoisted_2$2),
             i2 < _ctx.steps.length - 1 ? (openBlock(), createElementBlock("div", _hoisted_3$2, [
@@ -869,7 +872,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                   ref: (el) => updateThsRefs(el, i2),
                   key: col.id,
                   "data-col-id": col.id
-                }, col.thAttrs, {
+                }, { ref_for: true }, col.thAttrs, {
                   style: col.style,
                   class: "bg-surface"
                 }), [
@@ -885,9 +888,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                         "show-filter-icon": col.filterable || col.sortable,
                         "tooltip-text": col.tooltip,
                         class: [{ "pl-2": i2 === 1 && _ctx.isFirstColFixed, "pr-2": i2 === _ctx.cols.length && _ctx.isLastColFixed }, "grow"],
-                        "text-color": headerCellTextColor(col),
-                        ref_for: true
-                      }, col.headerCellAttrs, {
+                        "text-color": headerCellTextColor(col)
+                      }, { ref_for: true }, col.headerCellAttrs, {
                         onClickFilterIcon: ($event) => _ctx.$emit("click-filter-icon", $event, col)
                       }), null, 16, ["text", "filter-active", "show-filter-icon", "tooltip-text", "class", "text-color", "onClickFilterIcon"])
                     ]),

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "8.3.2",
+  "version": "8.3.4",
   "packageManager": "pnpm@10.6.4",
   "type": "module",
   "scripts": {
@@ -71,7 +71,7 @@
     "@types/node": "^22.15.21",
     "@vitejs/plugin-vue": "^5.2.4",
     "@vitest/coverage-v8": "^3.1.4",
-    "@vue/compiler-sfc": "3.5.14",
+    "@vue/compiler-sfc": "3.5.15",
     "@vue/test-utils": "^2.4.6",
     "@vuepic/vue-datepicker": "11.0.2",
     "autoprefixer": "^10.4.21",
@@ -91,14 +91,14 @@
     "resolve-tspaths": "^0.8.23",
     "rimraf": "^6.0.1",
     "sass": "^1.89.0",
-    "semantic-release": "^24.2.4",
+    "semantic-release": "^24.2.5",
     "storybook": "^8.6.14",
     "svgo": "^3.3.2",
     "tailwindcss": "^3.4.17",
     "typescript": "5.8.3",
     "vite": "^6.3.5",
     "vitest": "^3.1.4",
-    "vue": "3.5.14",
+    "vue": "3.5.15",
     "vue-currency-input": "3.2.1",
     "vue-router": "4.5.1",
     "vue-toastification": "2.0.0-rc.5",

package/squirrel/components/p-file-upload/p-file-upload.spec.js

@@ -1,11 +1,26 @@
 import PFileUpload from '@squirrel/components/p-file-upload/p-file-upload.vue';
+import { expect } from '@storybook/test';
 import { createWrapperFor } from '@tests/vitest.helpers';
+import { vi } from 'vitest';
+
+// Mocking the toastification library
+const toastError = vi.fn();
+
+vi.mock('vue-toastification', () => {
+  return {
+    useToast: () => {
+      return {
+        error: toastError,
+      };
+    },
+  };
+});
 
-const createFile = () => {
-  const file = new File(['filename'], 'filename.txt', {
+const createFile = (fileName = 'filename') => {
+  const file = new File([fileName], `${fileName}.txt`, {
     type: 'text/plain',
-    name: 'filename.txt',
-    url: 'https://www.pequity.com/filename.txt',
+    name: `${fileName}.txt`,
+    url: `https://www.pequity.com/${fileName}.txt`,
   });
 
   return file;
@@ -131,4 +146,46 @@ describe('PFileUpload.vue', () => {
 
     expect(wrapper.findAll('div.truncate').length).toBe(3);
   });
+
+  it('shows a toast when maxNumberOfFiles is exceeded', async () => {
+    const file1 = createFile('file1');
+    const file2 = createFile('file2');
+
+    const wrapper = createWrapperFor({
+      components: { PFileUpload },
+      data() {
+        return {
+          files: [file1, file2],
+        };
+      },
+      template: `
+        <PFileUpload v-model="files" :multiple="true" :max-number-of-files="2" />
+      `,
+    });
+
+    expect(wrapper.find('div[title="file1.txt"]').exists()).toBe(true);
+    expect(wrapper.find('div[title="file2.txt"]').exists()).toBe(true);
+
+    expect(toastError).toHaveBeenCalledWith('You can only upload a maximum of 2 files.');
+  });
+
+  it('does not show a toast when multiple is true and maxNumberOfFiles is 1', async () => {
+    const file1 = createFile('file1');
+
+    const wrapper = createWrapperFor({
+      components: { PFileUpload },
+      data() {
+        return {
+          files: [file1],
+        };
+      },
+      template: `
+        <PFileUpload v-model="files" :multiple="true" :max-number-of-files="1" />
+      `,
+    });
+
+    expect(wrapper.find('div[title="file1.txt"]').exists()).toBe(true);
+
+    expect(toastError).not.toHaveBeenCalled();
+  });
 });

package/squirrel/components/p-file-upload/p-file-upload.vue

@@ -166,7 +166,11 @@ const validateFiles = (filesToUpload: FileUploadFile[]) => {
 
     // Bail if we reached the max number of files
     if (res.length + files.value.length >= props.maxNumberOfFiles) {
-      toast.error(`You can only upload a maximum of ${props.maxNumberOfFiles} ${fileWord.value}.`);
+      // Show a toast - except for the contradictory config (multiple: true with maxNumberOfFiles: 1)
+      if (!(props.multiple && props.maxNumberOfFiles === 1)) {
+        toast.error(`You can only upload a maximum of ${props.maxNumberOfFiles} ${fileWord.value}.`);
+      }
+
       break;
     }
 

package/squirrel/components/p-steps/__snapshots__/p-steps.spec.ts.snap

@@ -2,15 +2,15 @@
 
 exports[`PSteps.vue > render tests > renders correctly 1`] = `
 "<div class="flex items-center gap-2">
-  <div class="text-nowrap rounded-full border px-4 py-1 text-sm font-semibold border-p-gray-30 text-p-gray-30">First</div>
+  <div class="text-nowrap rounded-full border px-4 py-1 text-sm font-semibold border-p-gray-30 text-p-gray-30" data-state="inactive">First</div>
   <div class="flex items-center">
     <iconify-icon icon="material-symbols:arrow-right-alt-rounded" class="text-p-gray-30"></iconify-icon>
   </div>
-  <div class="text-nowrap rounded-full border px-4 py-1 text-sm font-semibold border-p-gray-30 text-p-gray-30">Second</div>
+  <div class="text-nowrap rounded-full border px-4 py-1 text-sm font-semibold border-p-gray-30 text-p-gray-30" data-state="inactive">Second</div>
   <div class="flex items-center">
     <iconify-icon icon="material-symbols:arrow-right-alt-rounded" class="text-p-gray-30"></iconify-icon>
   </div>
-  <div class="text-nowrap rounded-full border px-4 py-1 text-sm font-semibold border-p-gray-30 text-p-gray-30">Third</div>
+  <div class="text-nowrap rounded-full border px-4 py-1 text-sm font-semibold border-p-gray-30 text-p-gray-30" data-state="inactive">Third</div>
   <!--v-if-->
 </div>"
 `;

package/squirrel/components/p-steps/p-steps.spec.ts

@@ -37,7 +37,7 @@ describe('PSteps.vue', () => {
       expect(stepElements.length).toBe(createSteps().length);
     });
 
-    it('applies correct classes for current step', () => {
+    it('applies correct classes and data-state for current step', () => {
       const wrapper = createWrapper({
         activeStep: 'second',
       });
@@ -48,17 +48,20 @@ describe('PSteps.vue', () => {
       expect(stepElements[0].classes()).toContain('text-nowrap');
       expect(stepElements[0].classes()).toContain('text-p-blue-50');
       expect(stepElements[0].classes()).toContain('border-p-blue-50');
+      expect(stepElements[0].attributes('data-state')).toBe('inactive');
 
       // Second step should be current (blue background)
       expect(stepElements[1].classes()).toContain('text-nowrap');
       expect(stepElements[1].classes()).toContain('bg-p-blue-50');
       expect(stepElements[1].classes()).toContain('text-surface');
       expect(stepElements[1].classes()).toContain('border-p-blue-50');
+      expect(stepElements[1].attributes('data-state')).toBe('active');
 
       // Third step should be upcoming (gray)
       expect(stepElements[2].classes()).toContain('text-nowrap');
       expect(stepElements[2].classes()).toContain('text-p-gray-30');
       expect(stepElements[2].classes()).toContain('border-p-gray-30');
+      expect(stepElements[2].attributes('data-state')).toBe('inactive');
     });
 
     it('displays step titles', () => {

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

@@ -4,6 +4,7 @@
       <div
         class="text-nowrap rounded-full border px-4 py-1 text-sm font-semibold"
         :class="[stepClasses(step, i), { 'cursor-pointer': clickable && !step.disabled }]"
+        :data-state="step.value === activeStep ? 'active' : 'inactive'"
         @click="emit('click:step', step, i)"
       >
         {{ step.text || startCase(String(step.value)) }}