@pequity/squirrel 8.2.1 → 8.3.0

package/dist/cjs/p-modal.js

@@ -103,18 +103,10 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       default: "500px"
     }
   },
-  emits: [
-    "before-open",
-    "opening",
-    "opened",
-    "before-close",
-    "closing",
-    "closed",
-    "update:modelValue"
-  ],
+  emits: ["before-open", "opening", "opened", "before-close", "closing", "closed", "update:modelValue", "click:overlay"],
   setup(__props, { emit: __emit }) {
     vue.useCssVars((_ctx) => ({
-      "9a05239e": __props.maxWidth
+      "56e8ccbe": __props.maxWidth
     }));
     let animatingZIndex = 0;
     const emit = __emit;
@@ -162,7 +154,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         props.name && modal.hide(props.name);
       }
     };
-    const clickOutside = (e) => {
+    const overlayClick = (e) => {
+      emit("click:overlay", e);
       if (e.target === pmWrapper.value) {
         close();
       }
@@ -310,7 +303,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
               "aria-modal": "true",
               "aria-describedby": `${id.value}-content`,
               "aria-labelledby": `${id.value}-title`,
-              onClick: _cache[0] || (_cache[0] = ($event) => clickOutside($event)),
+              onClick: _cache[0] || (_cache[0] = ($event) => overlayClick($event)),
               onKeydown: _cache[1] || (_cache[1] = ($event) => keydown($event))
             }, [
               vue.createElementVNode("div", {
@@ -371,5 +364,5 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const pModal = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-c3379c94"]]);
+const pModal = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-18201676"]]);
 module.exports = pModal;

package/dist/es/p-modal.js

@@ -102,18 +102,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       default: "500px"
     }
   },
-  emits: [
-    "before-open",
-    "opening",
-    "opened",
-    "before-close",
-    "closing",
-    "closed",
-    "update:modelValue"
-  ],
+  emits: ["before-open", "opening", "opened", "before-close", "closing", "closed", "update:modelValue", "click:overlay"],
   setup(__props, { emit: __emit }) {
     useCssVars((_ctx) => ({
-      "9a05239e": __props.maxWidth
+      "56e8ccbe": __props.maxWidth
     }));
     let animatingZIndex = 0;
     const emit = __emit;
@@ -161,7 +153,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         props.name && modal.hide(props.name);
       }
     };
-    const clickOutside = (e) => {
+    const overlayClick = (e) => {
+      emit("click:overlay", e);
       if (e.target === pmWrapper.value) {
         close();
       }
@@ -309,7 +302,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               "aria-modal": "true",
               "aria-describedby": `${id.value}-content`,
               "aria-labelledby": `${id.value}-title`,
-              onClick: _cache[0] || (_cache[0] = ($event) => clickOutside($event)),
+              onClick: _cache[0] || (_cache[0] = ($event) => overlayClick($event)),
               onKeydown: _cache[1] || (_cache[1] = ($event) => keydown($event))
             }, [
               createElementVNode("div", {
@@ -370,7 +363,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const pModal = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c3379c94"]]);
+const pModal = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-18201676"]]);
 export {
   pModal as default
 };

package/dist/squirrel/components/p-modal/p-modal.vue.d.ts

@@ -89,13 +89,14 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         default: string;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (...args: any[]) => void;
-    closed: (...args: any[]) => void;
-    "before-open": (...args: any[]) => void;
-    opening: (...args: any[]) => void;
-    opened: (...args: any[]) => void;
-    "before-close": (...args: any[]) => void;
-    closing: (...args: any[]) => void;
+    "update:modelValue": (args_0: boolean) => any;
+    closed: () => any;
+    "before-open": () => any;
+    opening: () => any;
+    opened: () => any;
+    "before-close": () => any;
+    closing: () => any;
+    "click:overlay": (args_0: MouseEvent) => any;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     name: {
         type: StringConstructor;
@@ -174,13 +175,14 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         default: string;
     };
 }>> & Readonly<{
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-    onClosed?: ((...args: any[]) => any) | undefined;
-    "onBefore-open"?: ((...args: any[]) => any) | undefined;
-    onOpening?: ((...args: any[]) => any) | undefined;
-    onOpened?: ((...args: any[]) => any) | undefined;
-    "onBefore-close"?: ((...args: any[]) => any) | undefined;
-    onClosing?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((args_0: boolean) => any) | undefined;
+    onClosed?: (() => any) | undefined;
+    "onBefore-open"?: (() => any) | undefined;
+    onOpening?: (() => any) | undefined;
+    onOpened?: (() => any) | undefined;
+    "onBefore-close"?: (() => any) | undefined;
+    onClosing?: (() => any) | undefined;
+    "onClick:overlay"?: ((args_0: MouseEvent) => any) | undefined;
 }>, {
     name: string;
     title: string;

package/dist/squirrel.css

@@ -295,33 +295,33 @@ to {
     opacity: 0;
     transform: translate3d(0, -100%, 0);
 }
-}.pm[data-v-c3379c94] {
+}.pm[data-v-18201676] {
   width: calc(100% - 32px);
   min-width: 110px;
-  max-width: var(--9a05239e);
+  max-width: var(--56e8ccbe);
   max-height: calc(100vh - 32px);
 }
-.fadeIn[data-v-c3379c94] {
+.fadeIn[data-v-18201676] {
   animation-duration: 0.4s;
-  animation-name: fadeInFrames-c3379c94;
+  animation-name: fadeInFrames-18201676;
   animation-fill-mode: both;
 }
-.fadeOut[data-v-c3379c94] {
+.fadeOut[data-v-18201676] {
   animation-duration: 0.2s;
-  animation-name: fadeOutFrames-c3379c94;
+  animation-name: fadeOutFrames-18201676;
   animation-fill-mode: both;
 }
-.slideInTop[data-v-c3379c94] {
+.slideInTop[data-v-18201676] {
   animation-duration: 0.4s;
-  animation-name: fadeInFrames-c3379c94,slideInTopFrames-c3379c94;
+  animation-name: fadeInFrames-18201676,slideInTopFrames-18201676;
   animation-fill-mode: both;
 }
-.slideOutTop[data-v-c3379c94] {
+.slideOutTop[data-v-18201676] {
   animation-duration: 0.2s;
-  animation-name: fadeOutFrames-c3379c94,slideOutTopFrames-c3379c94;
+  animation-name: fadeOutFrames-18201676,slideOutTopFrames-18201676;
   animation-fill-mode: both;
 }
-@keyframes slideInTopFrames-c3379c94 {
+@keyframes slideInTopFrames-18201676 {
 from {
     transform: translate(0, -12px);
     animation-timing-function: cubic-bezier(0, 0, 0, 1);
@@ -330,7 +330,7 @@ to {
     transform: translate(0, 0);
 }
 }
-@keyframes slideOutTopFrames-c3379c94 {
+@keyframes slideOutTopFrames-18201676 {
 from {
     transform: translate(0, 0);
     animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1);
@@ -339,7 +339,7 @@ to {
     transform: translate(0, -12px);
 }
 }
-@keyframes fadeInFrames-c3379c94 {
+@keyframes fadeInFrames-18201676 {
 from {
     opacity: 0;
     animation-timing-function: cubic-bezier(0, 0, 1, 1);
@@ -348,7 +348,7 @@ to {
     opacity: 1;
 }
 }
-@keyframes fadeOutFrames-c3379c94 {
+@keyframes fadeOutFrames-18201676 {
 from {
     opacity: 1;
     animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "8.2.1",
+  "version": "8.3.0",
   "packageManager": "pnpm@10.6.4",
   "type": "module",
   "scripts": {
@@ -53,29 +53,29 @@
     "@playwright/test": "^1.52.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-a11y": "^8.6.12",
-    "@storybook/addon-actions": "^8.6.12",
-    "@storybook/addon-essentials": "^8.6.12",
-    "@storybook/addon-interactions": "^8.6.12",
-    "@storybook/addon-links": "^8.6.12",
-    "@storybook/blocks": "^8.6.12",
-    "@storybook/manager-api": "^8.6.12",
-    "@storybook/test": "^8.6.12",
+    "@storybook/addon-a11y": "^8.6.14",
+    "@storybook/addon-actions": "^8.6.14",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/addon-interactions": "^8.6.14",
+    "@storybook/addon-links": "^8.6.14",
+    "@storybook/blocks": "^8.6.14",
+    "@storybook/manager-api": "^8.6.14",
+    "@storybook/test": "^8.6.14",
     "@storybook/test-runner": "^0.22.0",
-    "@storybook/theming": "^8.6.12",
-    "@storybook/vue3": "^8.6.12",
-    "@storybook/vue3-vite": "^8.6.12",
+    "@storybook/theming": "^8.6.14",
+    "@storybook/vue3": "^8.6.14",
+    "@storybook/vue3-vite": "^8.6.14",
     "@tanstack/vue-virtual": "3.13.8",
     "@types/jsdom": "^21.1.7",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^22.15.18",
+    "@types/node": "^22.15.19",
     "@vitejs/plugin-vue": "^5.2.4",
     "@vitest/coverage-v8": "^3.1.3",
-    "@vue/compiler-sfc": "3.5.13",
+    "@vue/compiler-sfc": "3.5.14",
     "@vue/test-utils": "^2.4.6",
     "@vuepic/vue-datepicker": "11.0.2",
     "autoprefixer": "^10.4.21",
-    "eslint": "^9.26.0",
+    "eslint": "^9.27.0",
     "eslint-plugin-storybook": "^0.12.0",
     "floating-vue": "5.2.2",
     "glob": "^11.0.2",
@@ -90,15 +90,15 @@
     "prettier-plugin-tailwindcss": "^0.6.11",
     "resolve-tspaths": "^0.8.23",
     "rimraf": "^6.0.1",
-    "sass": "^1.88.0",
-    "semantic-release": "^24.2.3",
-    "storybook": "^8.6.12",
+    "sass": "^1.89.0",
+    "semantic-release": "^24.2.4",
+    "storybook": "^8.6.14",
     "svgo": "^3.3.2",
     "tailwindcss": "^3.4.17",
     "typescript": "5.8.3",
     "vite": "^6.3.5",
     "vitest": "^3.1.3",
-    "vue": "3.5.13",
+    "vue": "3.5.14",
     "vue-currency-input": "3.2.1",
     "vue-router": "4.5.1",
     "vue-toastification": "2.0.0-rc.5",

package/squirrel/components/p-modal/p-modal-events.spec.js

@@ -2,17 +2,35 @@ import PModal from '@squirrel/components/p-modal/p-modal.vue';
 import { sleep, waitRAF } from '@tests/vitest.helpers';
 import { mount } from '@vue/test-utils';
 
-const createWrapper = () => {
-  return mount(PModal, {
+const createWrapperContainer = (componentArgs) => {
+  const args = componentArgs || {};
+
+  args.appendTo = '#modal-host';
+
+  const wrapperContainer = {
+    components: {
+      PModal,
+    },
+    data() {
+      return {
+        showModal: false,
+        args,
+      };
+    },
+    template: `
+      <button @click="showModal = !showModal">Toggle modal</button>
+      <div id="modal-host"></div>
+      <PModal v-model="showModal" v-bind="args"><p>Modal content goes here...</p></PModal>
+    `,
+  };
+
+  return mount(wrapperContainer, {
     attachTo: document.body,
     global: {
       stubs: {
         transition: false,
       },
     },
-    slots: {
-      default: '<p>Modal content goes here...</p>',
-    },
   });
 };
 
@@ -22,24 +40,39 @@ describe('Modal events', () => {
   });
 
   it.each(['before-open', 'opening', 'opened'])('emits a %s event when opening', async (eventName) => {
-    const wrapper = createWrapper();
+    const wrapper = createWrapperContainer();
+    const modal = wrapper.findComponent(PModal);
 
-    await wrapper.setProps({ modelValue: true });
+    await wrapper.find('button').trigger('click');
     await waitRAF();
     await sleep(200);
-    expect(wrapper.emitted()[eventName]).toBeTruthy();
+    expect(modal.emitted()[eventName]).toBeTruthy();
     wrapper.unmount();
   });
 
   it.each(['before-close', 'closing', 'closed'])('emits a %s event when closing', async (eventName) => {
-    const wrapper = createWrapper();
+    const wrapper = createWrapperContainer();
+    const modal = wrapper.findComponent(PModal);
 
-    await wrapper.setProps({ modelValue: true });
+    await wrapper.find('button').trigger('click');
     await waitRAF();
-    await wrapper.setProps({ modelValue: false });
+    await wrapper.find('button').trigger('click');
     await waitRAF();
     await sleep(200);
-    expect(wrapper.emitted()[eventName]).toBeTruthy();
+    expect(modal.emitted()[eventName]).toBeTruthy();
+    wrapper.unmount();
+  });
+
+  it('emits a click:overlay event when clicking on the overlay', async () => {
+    const wrapper = createWrapperContainer();
+    const modal = wrapper.findComponent(PModal);
+
+    await wrapper.find('button').trigger('click');
+    await waitRAF();
+
+    await wrapper.find('[role="dialog"]').trigger('click');
+
+    expect(modal.emitted('click:overlay')).toBeTruthy();
     wrapper.unmount();
   });
 });

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

@@ -26,7 +26,7 @@
         aria-modal="true"
         :aria-describedby="`${id}-content`"
         :aria-labelledby="`${id}-title`"
-        @click="clickOutside($event)"
+        @click="overlayClick($event)"
         @keydown="keydown($event)"
       >
         <div ref="pm" :data-pm-id="id" :class="modalClass" :style="modalStyle">
@@ -94,15 +94,16 @@ defineOptions({
   name: 'PModal',
 });
 
-const emit = defineEmits([
-  'before-open',
-  'opening',
-  'opened',
-  'before-close',
-  'closing',
-  'closed',
-  'update:modelValue',
-]);
+const emit = defineEmits<{
+  'before-open': [];
+  opening: [];
+  opened: [];
+  'before-close': [];
+  closing: [];
+  closed: [];
+  'update:modelValue': [boolean];
+  'click:overlay': [MouseEvent];
+}>();
 
 const props = defineProps({
   name: {
@@ -234,7 +235,9 @@ const close = () => {
   }
 };
 
-const clickOutside = (e: MouseEvent) => {
+const overlayClick = (e: MouseEvent) => {
+  emit('click:overlay', e);
+
   if (e.target === pmWrapper.value) {
     close();
   }