@pequity/squirrel 4.0.0 → 4.0.1

package/dist/cjs/p-info-icon.js

@@ -1,7 +1,7 @@
 "use strict";
 const vue = require("vue");
 const _pluginVue_exportHelper = require("./chunks/_plugin-vue_export-helper.js");
-const _withScopeId = (n) => (vue.pushScopeId("data-v-189b159e"), n = n(), vue.popScopeId(), n);
+const _withScopeId = (n) => (vue.pushScopeId("data-v-2662da21"), n = n(), vue.popScopeId(), n);
 const _hoisted_1 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ vue.createElementVNode("i", { class: "bg-info-circle-icon block h-3 w-3" }, null, -1));
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   ...{
@@ -17,7 +17,10 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   setup(__props) {
     return (_ctx, _cache) => {
       const _component_VTooltip = vue.resolveComponent("VTooltip");
-      return vue.openBlock(), vue.createBlock(_component_VTooltip, null, {
+      return vue.openBlock(), vue.createBlock(_component_VTooltip, {
+        "popper-triggers": ["hover"],
+        delay: { show: 750, hide: 0 }
+      }, {
         popper: vue.withCtx(() => [
           vue.renderSlot(_ctx.$slots, "default", {}, () => [
             vue.createTextVNode(vue.toDisplayString(__props.text), 1)
@@ -31,5 +34,5 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const PInfoIcon = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-189b159e"]]);
+const PInfoIcon = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-2662da21"]]);
 module.exports = PInfoIcon;

package/dist/cjs/p-modal.js

@@ -111,7 +111,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   ],
   setup(__props, { emit: __emit }) {
     vue.useCssVars((_ctx) => ({
-      "8a536574": __props.maxWidth
+      "4d751ed2": __props.maxWidth
     }));
     let animatingZIndex = 0;
     const emit = __emit;
@@ -321,12 +321,12 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                       class: "mr-auto pt-4 text-xl font-semibold"
                     }, vue.toDisplayString(__props.title), 9, _hoisted_5)) : vue.createCommentVNode("", true),
                     vue.createElementVNode("div", _hoisted_6, [
-                      __props.enableClose ? (vue.openBlock(), vue.createBlock(pCloseBtn, {
-                        key: 0,
+                      vue.createVNode(pCloseBtn, {
                         disabled: __props.disabled,
+                        class: vue.normalizeClass({ invisible: !__props.enableClose }),
                         "aria-label": __props.closeLabel,
                         onClick: vue.withModifiers(close, ["prevent"])
-                      }, null, 8, ["disabled", "aria-label"])) : vue.createCommentVNode("", true)
+                      }, null, 8, ["disabled", "class", "aria-label"])
                     ])
                   ])
                 ], true),
@@ -365,5 +365,5 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const pModal = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-ee599a02"]]);
+const pModal = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-fb5dbd9f"]]);
 module.exports = pModal;

package/dist/es/p-info-icon.js

@@ -1,6 +1,6 @@
 import { defineComponent, resolveComponent, openBlock, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, pushScopeId, popScopeId, createElementVNode } from "vue";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
-const _withScopeId = (n) => (pushScopeId("data-v-189b159e"), n = n(), popScopeId(), n);
+const _withScopeId = (n) => (pushScopeId("data-v-2662da21"), n = n(), popScopeId(), n);
 const _hoisted_1 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("i", { class: "bg-info-circle-icon block h-3 w-3" }, null, -1));
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
@@ -16,7 +16,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props) {
     return (_ctx, _cache) => {
       const _component_VTooltip = resolveComponent("VTooltip");
-      return openBlock(), createBlock(_component_VTooltip, null, {
+      return openBlock(), createBlock(_component_VTooltip, {
+        "popper-triggers": ["hover"],
+        delay: { show: 750, hide: 0 }
+      }, {
         popper: withCtx(() => [
           renderSlot(_ctx.$slots, "default", {}, () => [
             createTextVNode(toDisplayString(__props.text), 1)
@@ -30,7 +33,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const PInfoIcon = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-189b159e"]]);
+const PInfoIcon = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-2662da21"]]);
 export {
   PInfoIcon as default
 };

package/dist/es/p-modal.js

@@ -110,7 +110,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   ],
   setup(__props, { emit: __emit }) {
     useCssVars((_ctx) => ({
-      "8a536574": __props.maxWidth
+      "4d751ed2": __props.maxWidth
     }));
     let animatingZIndex = 0;
     const emit = __emit;
@@ -320,12 +320,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       class: "mr-auto pt-4 text-xl font-semibold"
                     }, toDisplayString(__props.title), 9, _hoisted_5)) : createCommentVNode("", true),
                     createElementVNode("div", _hoisted_6, [
-                      __props.enableClose ? (openBlock(), createBlock(PCloseBtn, {
-                        key: 0,
+                      createVNode(PCloseBtn, {
                         disabled: __props.disabled,
+                        class: normalizeClass({ invisible: !__props.enableClose }),
                         "aria-label": __props.closeLabel,
                         onClick: withModifiers(close, ["prevent"])
-                      }, null, 8, ["disabled", "aria-label"])) : createCommentVNode("", true)
+                      }, null, 8, ["disabled", "class", "aria-label"])
                     ])
                   ])
                 ], true),
@@ -364,7 +364,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const pModal = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ee599a02"]]);
+const pModal = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-fb5dbd9f"]]);
 export {
   pModal as default
 };

package/dist/style.css

@@ -7,7 +7,7 @@
     transform: translateX(100%);
 }
 }
-.bg-info-circle-icon[data-v-189b159e] {
+.bg-info-circle-icon[data-v-2662da21] {
   background-image: url("data:image/svg+xml,%3csvg%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_4002_33291)'%3e%3cpath%20d='M0.5%206C0.5%207.45869%201.07946%208.85764%202.11091%209.88909C3.14236%2010.9205%204.54131%2011.5%206%2011.5C7.45869%2011.5%208.85764%2010.9205%209.88909%209.88909C10.9205%208.85764%2011.5%207.45869%2011.5%206C11.5%204.54131%2010.9205%203.14236%209.88909%202.11091C8.85764%201.07946%207.45869%200.5%206%200.5C4.54131%200.5%203.14236%201.07946%202.11091%202.11091C1.07946%203.14236%200.5%204.54131%200.5%206Z'%20stroke='%231A123B'%20stroke-miterlimit='10'/%3e%3cpath%20d='M6.5%203.5H5.5V2.5H6.5V3.5Z'%20fill='%231A123B'/%3e%3cpath%20d='M4.5%205H6V9M4.5%208.5H7.5'%20stroke='%231A123B'%20stroke-miterlimit='10'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_4002_33291'%3e%3crect%20width='12'%20height='12'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
 }
 div[id^=popper_].dropdown {
@@ -409,33 +409,33 @@ to {
     opacity: 0;
     transform: translate3d(0, -100%, 0);
 }
-}.pm[data-v-ee599a02] {
+}.pm[data-v-fb5dbd9f] {
   width: calc(100% - 32px);
   min-width: 110px;
-  max-width: var(--8a536574);
+  max-width: var(--4d751ed2);
   max-height: calc(100vh - 32px);
 }
-.fadeIn[data-v-ee599a02] {
+.fadeIn[data-v-fb5dbd9f] {
   animation-duration: 0.4s;
-  animation-name: fadeInFrames-ee599a02;
+  animation-name: fadeInFrames-fb5dbd9f;
   animation-fill-mode: both;
 }
-.fadeOut[data-v-ee599a02] {
+.fadeOut[data-v-fb5dbd9f] {
   animation-duration: 0.2s;
-  animation-name: fadeOutFrames-ee599a02;
+  animation-name: fadeOutFrames-fb5dbd9f;
   animation-fill-mode: both;
 }
-.slideInTop[data-v-ee599a02] {
+.slideInTop[data-v-fb5dbd9f] {
   animation-duration: 0.4s;
-  animation-name: fadeInFrames-ee599a02,slideInTopFrames-ee599a02;
+  animation-name: fadeInFrames-fb5dbd9f,slideInTopFrames-fb5dbd9f;
   animation-fill-mode: both;
 }
-.slideOutTop[data-v-ee599a02] {
+.slideOutTop[data-v-fb5dbd9f] {
   animation-duration: 0.2s;
-  animation-name: fadeOutFrames-ee599a02,slideOutTopFrames-ee599a02;
+  animation-name: fadeOutFrames-fb5dbd9f,slideOutTopFrames-fb5dbd9f;
   animation-fill-mode: both;
 }
-@keyframes slideInTopFrames-ee599a02 {
+@keyframes slideInTopFrames-fb5dbd9f {
 from {
     transform: translate(0, -12px);
     animation-timing-function: cubic-bezier(0, 0, 0, 1);
@@ -444,7 +444,7 @@ to {
     transform: translate(0, 0);
 }
 }
-@keyframes slideOutTopFrames-ee599a02 {
+@keyframes slideOutTopFrames-fb5dbd9f {
 from {
     transform: translate(0, 0);
     animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1);
@@ -453,7 +453,7 @@ to {
     transform: translate(0, -12px);
 }
 }
-@keyframes fadeInFrames-ee599a02 {
+@keyframes fadeInFrames-fb5dbd9f {
 from {
     opacity: 0;
     animation-timing-function: cubic-bezier(0, 0, 1, 1);
@@ -462,7 +462,7 @@ to {
     opacity: 1;
 }
 }
-@keyframes fadeOutFrames-ee599a02 {
+@keyframes fadeOutFrames-fb5dbd9f {
 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": "4.0.0",
+  "version": "4.0.1",
   "packageManager": "pnpm@9.7.1",
   "type": "module",
   "scripts": {
@@ -75,7 +75,7 @@
     "@types/jest": "^29.5.12",
     "@types/jsdom": "^21.1.7",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^22.4.1",
+    "@types/node": "^22.4.2",
     "@vitejs/plugin-vue": "^5.1.2",
     "@vue/compiler-sfc": "3.4.38",
     "@vue/test-utils": "^2.4.6",
@@ -83,7 +83,7 @@
     "autoprefixer": "^10.4.20",
     "babel-jest": "^29.7.0",
     "concurrently": "^8.2.2",
-    "dayjs": "1.11.12",
+    "dayjs": "1.11.13",
     "eslint": "^8.57.0",
     "eslint-plugin-storybook": "^0.8.0",
     "floating-vue": "5.2.2",

package/squirrel/components/p-info-icon/p-info-icon.spec.js

@@ -55,4 +55,25 @@ describe('PInfoIcon.vue', () => {
 
     expect(wrapper.text()).toBe('Lorem ipsum dolor sit amet.');
   });
+
+  it('tooltip should stay visible on hover', async () => {
+    const wrapper = createWrapperFor(PInfoIcon, {
+      props: {
+        text: '',
+      },
+      slots: {
+        default: 'Lorem ipsum dolor sit amet.',
+      },
+      global: {
+        stubs: {
+          VTooltip: true,
+        },
+      },
+    });
+
+    const tooltip = wrapper.findComponent('v-tooltip-stub');
+
+    expect(tooltip.props().popperTriggers).toEqual(['hover']);
+    expect(tooltip.props().delay).toEqual({ show: 750, hide: 0 });
+  });
 });

package/squirrel/components/p-info-icon/p-info-icon.stories.js

@@ -55,3 +55,35 @@ export const DifferentPlacements = {
     },
   },
 };
+
+export const WithBigText = {
+  render: (args) => ({
+    components: { PInfoIcon },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="w-full pt-60 pb-20 flex justify-center">
+        <PInfoIcon v-bind="args" />
+      </div>`,
+  }),
+  args: {
+    text: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed malesuada convallis ultricies.
+    Pellentesque rhoncus felis et neque pellentesque pretium.
+
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed malesuada convallis ultricies.
+    Pellentesque rhoncus felis et neque pellentesque pretium.
+
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed malesuada convallis ultricies.
+    Pellentesque rhoncus felis et neque pellentesque pretium.
+    `,
+    placement: 'top',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: `The info tooltip allows for long text and the ability to scroll.`,
+      },
+    },
+  },
+};

package/squirrel/components/p-info-icon/p-info-icon.vue

@@ -1,5 +1,5 @@
 <template>
-  <VTooltip>
+  <VTooltip :popper-triggers="['hover']" :delay="{ show: 750, hide: 0 }">
     <i class="bg-info-circle-icon block h-3 w-3"></i>
     <template #popper>
       <slot>{{ text }}</slot>

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

@@ -9,7 +9,7 @@ const ModalParent = {
   template: `
   <div>
     <button type="button" class="open-modal-1" @click="showModal1 = true">Open modal 1</button>
-    <Modal1 wrapperClass="modal-1" v-model="showModal1" :title="title" :live="live">
+    <Modal1 wrapperClass="modal-1" v-model="showModal1" :title="title" :live="live" :enable-close="enableClose">
       <div>
         <input v-if="showInput" type="text" value="" autofocus class="text-input" />
         <button type="button" class="open-modal-2" @click="showModal2 = true">Open modal 2</button>
@@ -52,6 +52,7 @@ const createModalsWrapper = (data) => {
           title: 'Test title',
           showModal1: false,
           showModal2: false,
+          enableClose: true,
         },
         ...data,
       };
@@ -321,4 +322,25 @@ describe('Modal features', () => {
 
     wrapper.unmount();
   });
+
+  it('makes the close button invisible instead of hidden, when enableClose is false', async () => {
+    const wrapper = createModalsWrapper({
+      enableClose: false,
+    });
+
+    await waitNT(wrapper.vm);
+
+    await wrapper.find('.open-modal-1').trigger('click');
+
+    await sleep(100);
+
+    const modal1 = wrapper.getComponent('.modal-1');
+
+    const closeBtn = modal1.find('button[aria-label="Close"]');
+
+    expect(closeBtn.isVisible()).toBe(true);
+    expect(closeBtn.classes()).toContain('invisible');
+
+    wrapper.unmount();
+  });
 });

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

@@ -36,7 +36,12 @@
                 {{ title }}
               </h3>
               <div class="ml-auto">
-                <PCloseBtn v-if="enableClose" :disabled="disabled" :aria-label="closeLabel" @click.prevent="close" />
+                <PCloseBtn
+                  :disabled="disabled"
+                  :class="{ invisible: !enableClose }"
+                  :aria-label="closeLabel"
+                  @click.prevent="close"
+                />
               </div>
             </div>
           </slot>

package/squirrel/components/p-table-header-cell/p-table-header-cell.stories.js

@@ -43,10 +43,10 @@ export const Active = {
   },
 };
 
-export const WithToolyip = {
+export const WithTooltip = {
   args: {
     ...Default.args,
-    tooltipText: 'This is a tooltip',
+    tooltipText: `Lorem ipsum dolor sit amet.`,
   },
 };