@pequity/squirrel 8.3.3 → 8.3.5

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) {
@@ -870,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"
                 }), [
@@ -886,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/cjs/p-checkbox.js

@@ -32,15 +32,22 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const style = vue.computed(() => {
       return allAttrs.style;
     });
+    const isDisabled = vue.computed(() => {
+      return "disabled" in allAttrs && allAttrs.disabled !== false;
+    });
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("label", {
-        class: vue.normalizeClass(["inline-flex items-center", [{ hidden: _ctx.$attrs.hidden }, _ctx.$attrs.class]]),
+        class: vue.normalizeClass(["inline-flex items-center", [
+          { hidden: _ctx.$attrs.hidden },
+          _ctx.$attrs.class,
+          { "cursor-not-allowed opacity-50": isDisabled.value, "cursor-pointer": !isDisabled.value }
+        ]]),
         style: vue.normalizeStyle(style.value)
       }, [
         vue.renderSlot(_ctx.$slots, "label-before", {}, void 0, true),
         vue.createElementVNode("input", vue.mergeProps({
           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"
+          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"
         }, attrs.value, {
           checked: __props.modelValue,
           onChange: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", $event.target.checked))
@@ -52,5 +59,5 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const pCheckbox = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-81cd6154"]]);
+const pCheckbox = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-b394a2f0"]]);
 module.exports = pCheckbox;

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) {
@@ -870,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"
                 }), [
@@ -886,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/dist/es/p-checkbox.js

@@ -31,15 +31,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const style = computed(() => {
       return allAttrs.style;
     });
+    const isDisabled = computed(() => {
+      return "disabled" in allAttrs && allAttrs.disabled !== false;
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("label", {
-        class: normalizeClass(["inline-flex items-center", [{ hidden: _ctx.$attrs.hidden }, _ctx.$attrs.class]]),
+        class: normalizeClass(["inline-flex items-center", [
+          { hidden: _ctx.$attrs.hidden },
+          _ctx.$attrs.class,
+          { "cursor-not-allowed opacity-50": isDisabled.value, "cursor-pointer": !isDisabled.value }
+        ]]),
         style: normalizeStyle(style.value)
       }, [
         renderSlot(_ctx.$slots, "label-before", {}, void 0, true),
         createElementVNode("input", mergeProps({
           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"
+          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"
         }, attrs.value, {
           checked: __props.modelValue,
           onChange: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", $event.target.checked))
@@ -51,7 +58,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const pCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-81cd6154"]]);
+const pCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b394a2f0"]]);
 export {
   pCheckbox as default
 };

package/dist/squirrel.css

@@ -191,7 +191,7 @@ div[id^=popper_].dropdown .v-popper__inner .dropdown-menu .dropdown-divider {
   --tw-content: "";
   content: var(--tw-content);
 }
-input[type='checkbox'][data-v-81cd6154]:checked {
+input[type='checkbox'][data-v-b394a2f0]:checked {
   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "8.3.3",
+  "version": "8.3.5",
   "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-checkbox/p-checkbox.spec.js

@@ -14,7 +14,6 @@ const checkboxClasses = [
   'ease-in-out',
   'checked:border-none',
   'checked:bg-primary',
-  'disabled:opacity-50',
 ];
 
 describe('PCheckbox.vue', () => {
@@ -39,4 +38,20 @@ describe('PCheckbox.vue', () => {
     expect(input.classes()).toEqual(checkboxClasses);
     expect(input.attributes().disabled).toBeDefined();
   });
+
+  it('applies correct styling to label based on disabled state', async () => {
+    const enabledWrapper = createWrapperFor(PCheckbox, { props: { checked: true } });
+    const disabledWrapper = createWrapperFor(PCheckbox, { props: { checked: true, disabled: true } });
+
+    const enabledLabel = await enabledWrapper.find('label');
+    const disabledLabel = await disabledWrapper.find('label');
+
+    expect(enabledLabel.classes()).toContain('cursor-pointer');
+    expect(enabledLabel.classes()).not.toContain('cursor-not-allowed');
+    expect(enabledLabel.classes()).not.toContain('opacity-50');
+
+    expect(disabledLabel.classes()).toContain('cursor-not-allowed');
+    expect(disabledLabel.classes()).toContain('opacity-50');
+    expect(disabledLabel.classes()).not.toContain('cursor-pointer');
+  });
 });

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

@@ -1,9 +1,17 @@
 <template>
-  <label class="inline-flex items-center" :class="[{ hidden: $attrs.hidden }, $attrs.class]" :style="style">
+  <label
+    class="inline-flex items-center"
+    :class="[
+      { hidden: $attrs.hidden },
+      $attrs.class,
+      { 'cursor-not-allowed opacity-50': isDisabled, 'cursor-pointer': !isDisabled },
+    ]"
+    :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"
+      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"
       v-bind="attrs"
       :checked="modelValue"
       @change="$emit('update:modelValue', ($event.target as HTMLInputElement).checked)"
@@ -48,6 +56,10 @@ const attrs = computed(() => {
 const style = computed(() => {
   return allAttrs.style as StyleValue;
 });
+
+const isDisabled = computed(() => {
+  return 'disabled' in allAttrs && allAttrs.disabled !== false;
+});
 </script>
 
 <style lang="css" scoped>

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;
     }