@pequity/squirrel 3.1.0 → 3.1.2

package/dist/cjs/index.js

@@ -60,10 +60,10 @@ const dom = require("./dom.js");
 const object = require("./object.js");
 const listKeyboardNavigation = require("./listKeyboardNavigation.js");
 const number = require("./number.js");
-const _hoisted_1$4 = { class: "flex h-12 min-w-fit select-none items-center rounded-lg bg-p-purple-60 px-2 text-sm font-medium text-white" };
+const _hoisted_1$4 = { class: "flex h-12 w-max select-none items-center rounded-lg bg-p-purple-60 px-2 text-sm font-medium text-white" };
 const _hoisted_2$4 = { class: "whitespace-nowrap px-3" };
 const _hoisted_3$4 = /* @__PURE__ */ vue.createElementVNode("div", { class: "mx-4 h-9 w-0.5 shrink-0 rounded bg-p-purple-50" }, null, -1);
-const _hoisted_4$4 = { class: "flex min-w-fit" };
+const _hoisted_4$4 = { class: "flex" };
 const _hoisted_5$4 = { class: "flex items-center gap-2 px-1 py-0.5" };
 const _hoisted_6$4 = { class: "flex items-center gap-2 px-1 py-0.5" };
 const _hoisted_7$3 = { class: "flex flex-col bg-p-purple-60" };
@@ -83,7 +83,7 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
         vue.createElementVNode("div", vue.mergeProps({
-          class: "fixed bottom-6 z-[100] flex w-full justify-center",
+          class: "fixed bottom-6 left-1/2 z-[100] -translate-x-2/4",
           role: "alertdialog"
         }, _ctx.$attrs), [
           vue.createElementVNode("div", _hoisted_1$4, [

package/dist/es/index.js

@@ -60,10 +60,10 @@ import { getNextActiveElement, isElement, isVisible } from "./dom.js";
 import { isObject } from "./object.js";
 import { setupListKeyboardNavigation } from "./listKeyboardNavigation.js";
 import { toNumberOrNull } from "./number.js";
-const _hoisted_1$4 = { class: "flex h-12 min-w-fit select-none items-center rounded-lg bg-p-purple-60 px-2 text-sm font-medium text-white" };
+const _hoisted_1$4 = { class: "flex h-12 w-max select-none items-center rounded-lg bg-p-purple-60 px-2 text-sm font-medium text-white" };
 const _hoisted_2$4 = { class: "whitespace-nowrap px-3" };
 const _hoisted_3$4 = /* @__PURE__ */ createElementVNode("div", { class: "mx-4 h-9 w-0.5 shrink-0 rounded bg-p-purple-50" }, null, -1);
-const _hoisted_4$4 = { class: "flex min-w-fit" };
+const _hoisted_4$4 = { class: "flex" };
 const _hoisted_5$4 = { class: "flex items-center gap-2 px-1 py-0.5" };
 const _hoisted_6$4 = { class: "flex items-center gap-2 px-1 py-0.5" };
 const _hoisted_7$3 = { class: "flex flex-col bg-p-purple-60" };
@@ -83,7 +83,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createBlock(Teleport, { to: "body" }, [
         createElementVNode("div", mergeProps({
-          class: "fixed bottom-6 z-[100] flex w-full justify-center",
+          class: "fixed bottom-6 left-1/2 z-[100] -translate-x-2/4",
           role: "alertdialog"
         }, _ctx.$attrs), [
           createElementVNode("div", _hoisted_1$4, [

package/dist/squirrel/components/p-action-bar/p-action-bar.vue.d.ts

@@ -5,10 +5,10 @@ type Props = {
 };
 declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "click:dismiss": () => void;
-    "click:action": (value: string | undefined) => void;
+    "click:action": (args_0: string | undefined) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<Props>>> & {
     "onClick:dismiss"?: (() => any) | undefined;
-    "onClick:action"?: ((value: string | undefined) => any) | undefined;
+    "onClick:action"?: ((args_0: string | undefined) => any) | undefined;
 }, {}, {}>;
 export default _default;
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "3.1.0",
+  "version": "3.1.2",
   "packageManager": "pnpm@8.9.2",
   "type": "module",
   "scripts": {
@@ -50,67 +50,70 @@
     "vue-toastification": "^2.0.0-rc.5"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.9",
-    "@babel/preset-env": "^7.24.8",
-    "@commitlint/cli": "^19.3.0",
+    "@babel/core": "^7.25.2",
+    "@babel/preset-env": "^7.25.3",
+    "@commitlint/cli": "^19.4.0",
     "@commitlint/config-conventional": "^19.2.2",
     "@pequity/eslint-config": "^0.0.13",
+    "@playwright/test": "^1.46.1",
     "@popperjs/core": "2.11.8",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-a11y": "^8.2.5",
-    "@storybook/addon-actions": "^8.2.5",
-    "@storybook/addon-essentials": "^8.2.5",
-    "@storybook/addon-interactions": "^8.2.5",
-    "@storybook/addon-links": "^8.2.5",
-    "@storybook/blocks": "^8.2.5",
-    "@storybook/jest": "^0.2.3",
-    "@storybook/manager-api": "^8.2.5",
+    "@storybook/addon-a11y": "^8.2.9",
+    "@storybook/addon-actions": "^8.2.9",
+    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-interactions": "^8.2.9",
+    "@storybook/addon-links": "^8.2.9",
+    "@storybook/blocks": "^8.2.9",
+    "@storybook/manager-api": "^8.2.9",
+    "@storybook/test": "^8.2.9",
     "@storybook/test-runner": "^0.19.1",
-    "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "^8.2.5",
-    "@storybook/vue3": "^8.2.5",
-    "@storybook/vue3-vite": "^8.2.5",
-    "@tanstack/vue-virtual": "3.8.3",
+    "@storybook/theming": "^8.2.9",
+    "@storybook/vue3": "^8.2.9",
+    "@storybook/vue3-vite": "^8.2.9",
+    "@tanstack/vue-virtual": "3.9.0",
     "@types/jest": "^29.5.12",
     "@types/jsdom": "^21.1.7",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^20.14.11",
-    "@vitejs/plugin-vue": "^5.0.5",
-    "@vue/compiler-sfc": "3.4.33",
+    "@types/node": "^22.4.1",
+    "@vitejs/plugin-vue": "^5.1.2",
+    "@vue/compiler-sfc": "3.4.38",
     "@vue/test-utils": "^2.4.6",
     "@vue/vue3-jest": "^29.2.6",
-    "autoprefixer": "^10.4.19",
+    "autoprefixer": "^10.4.20",
     "babel-jest": "^29.7.0",
+    "concurrently": "^8.2.2",
     "dayjs": "1.11.12",
     "eslint": "^8.57.0",
     "eslint-plugin-storybook": "^0.8.0",
     "floating-vue": "5.2.2",
     "glob": "^10.4.5",
-    "husky": "^9.1.1",
+    "http-server": "^14.1.1",
+    "husky": "^9.1.4",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "lint-staged": "^15.2.7",
+    "lint-staged": "^15.2.9",
     "lodash-es": "4.17.21",
     "make-coverage-badge": "^1.2.0",
-    "postcss": "^8.4.39",
+    "postcss": "^8.4.41",
     "prettier": "^3.3.3",
-    "prettier-plugin-tailwindcss": "^0.6.5",
+    "prettier-plugin-tailwindcss": "^0.6.6",
     "resolve-tspaths": "^0.8.19",
-    "rimraf": "^5.0.9",
+    "rimraf": "^5.0.10",
     "sass": "^1.77.8",
-    "semantic-release": "^24.0.0",
-    "storybook": "^8.2.5",
+    "semantic-release": "^24.1.0",
+    "storybook": "^8.2.9",
     "svgo": "^3.3.2",
-    "tailwindcss": "^3.4.6",
-    "ts-jest": "^29.2.3",
+    "tailwindcss": "^3.4.10",
+    "ts-jest": "^29.2.4",
     "typescript": "5.5.4",
     "v-calendar": "3.1.2",
-    "vite": "^5.3.4",
-    "vue": "3.4.33",
+    "vite": "^5.4.1",
+    "vue": "3.4.38",
     "vue-currency-input": "3.1.0",
-    "vue-router": "4.4.0",
+    "vue-router": "4.4.3",
     "vue-toastification": "2.0.0-rc.5",
-    "vue-tsc": "2.0.28"
+    "vue-tsc": "2.0.29",
+    "wait-on": "^7.2.0"
   }
 }

package/squirrel/components/p-action-bar/p-action-bar.spec.js

@@ -62,13 +62,13 @@ describe('PActionBar.vue', () => {
     const mainDiv = await wrapper.find('.teleport-stub > .fixed.bottom-6');
     expect(mainDiv.exists()).toBe(true);
 
-    expect(mainDiv.classes()).toEqual(['fixed', 'bottom-6', 'z-[100]', 'flex', 'w-full', 'justify-center']);
+    expect(mainDiv.classes()).toEqual(['fixed', 'bottom-6', 'left-1/2', 'z-[100]', '-translate-x-2/4']);
     const actionBarDiv = mainDiv.find('.bg-p-purple-60');
     expect(actionBarDiv.exists()).toBe(true);
     expect(actionBarDiv.classes()).toEqual([
       'flex',
       'h-12',
-      'min-w-fit',
+      'w-max',
       'select-none',
       'items-center',
       'rounded-lg',

package/squirrel/components/p-action-bar/p-action-bar.stories.js

@@ -1,10 +1,39 @@
 import FileUploadIcon from '@squirrel/assets/file-upload-upload-icon.svg?inline';
 import PActionBar from '@squirrel/components/p-action-bar/p-action-bar.vue';
+import PBtn from '@squirrel/components/p-btn/p-btn.vue';
 import PaginateLeftIcon from '@squirrel/assets/pagination-left-icon.svg?inline';
 import PaginateRightIcon from '@squirrel/assets/pagination-right-icon.svg?inline';
 import { action } from '@storybook/addon-actions';
+import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
 import { shallowRef } from 'vue';
 
+const actionBarActions = [
+  {
+    label: 'Upload',
+    icon: shallowRef(FileUploadIcon),
+    name: 'upload',
+  },
+  {
+    label: 'Say Hi',
+    name: 'greet',
+  },
+  {
+    label: 'Action Menu',
+    subActions: [
+      {
+        label: 'Subaction 1',
+        name: 'subaction1',
+        icon: shallowRef(PaginateLeftIcon),
+      },
+      {
+        label: 'Subaction 2',
+        name: 'subaction2',
+        icon: shallowRef(PaginateRightIcon),
+      },
+    ],
+  },
+];
+
 export default {
   title: 'Components/PActionBar',
   component: PActionBar,
@@ -27,35 +56,53 @@ export const Default = {
 
       return { args, onAction, onDismiss };
     },
-    template: `<div class="h-20"><PActionBar v-bind="args" @click:dismiss="onDismiss" @click:action="onAction" /></div>`,
+    template: `
+      <div class="h-20">
+        <PActionBar v-bind="args" @click:dismiss="onDismiss" @click:action="onAction" />
+      </div>
+    `,
   }),
   args: {
     label: 'Hello World',
-    actions: [
-      {
-        label: 'Upload',
-        icon: shallowRef(FileUploadIcon),
-        name: 'upload',
-      },
-      {
-        label: 'Say Hi',
-        name: 'greet',
-      },
-      {
-        label: 'Action Menu',
-        subActions: [
-          {
-            label: 'Subaction 1',
-            name: 'subaction1',
-            icon: shallowRef(PaginateLeftIcon),
-          },
-          {
-            label: 'Subaction 2',
-            name: 'subaction2',
-            icon: shallowRef(PaginateRightIcon),
-          },
-        ],
+    actions: actionBarActions,
+  },
+};
+
+export const WithAnElementBehind = {
+  render: (args) => ({
+    components: { PActionBar, PBtn },
+    setup() {
+      const onDismiss = action('dismiss');
+      const onAction = action('action');
+
+      return { args, onAction, onDismiss };
+    },
+    template: `
+      <div class="h-20">
+        <div class="flex items-center fixed bottom-0 h-28 w-full z-10 bg-p-gray-30">
+          <PBtn @click="args.onClick">Click me!</PBtn>
+        </div>
+        <PActionBar v-bind="args" @click:dismiss="onDismiss" @click:action="onAction" />
+      </div>
+    `,
+  }),
+  args: {
+    label: 'Hello World',
+    actions: actionBarActions,
+    onClick: fn(),
+  },
+  play: async ({ args, canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await userEvent.click(canvas.getByRole('button', { name: 'Click me!' }));
+
+    await waitFor(() => expect(args.onClick).toHaveBeenCalled());
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Elements behind `PActionBar` should be clickable.',
       },
-    ],
+    },
   },
 };

package/squirrel/components/p-action-bar/p-action-bar.vue

@@ -1,13 +1,13 @@
 <template>
   <Teleport to="body">
-    <div class="fixed bottom-6 z-[100] flex w-full justify-center" role="alertdialog" v-bind="$attrs">
+    <div class="fixed bottom-6 left-1/2 z-[100] -translate-x-2/4" role="alertdialog" v-bind="$attrs">
       <div
-        class="flex h-12 min-w-fit select-none items-center rounded-lg bg-p-purple-60 px-2 text-sm font-medium text-white"
+        class="flex h-12 w-max select-none items-center rounded-lg bg-p-purple-60 px-2 text-sm font-medium text-white"
       >
         <PCloseBtn variant="dark" @click="$emit('click:dismiss')"></PCloseBtn>
         <p class="whitespace-nowrap px-3">{{ label }}</p>
         <div class="mx-4 h-9 w-0.5 shrink-0 rounded bg-p-purple-50"></div>
-        <div class="flex min-w-fit">
+        <div class="flex">
           <template v-for="actionOrMenu in actions" :key="`action-${actionOrMenu.label}`">
             <PBtn
               v-if="!actionOrMenu.subActions"
@@ -69,8 +69,8 @@ type Props = {
 };
 
 defineEmits<{
-  (e: 'click:dismiss'): void;
-  (e: 'click:action', value: PActionBarAction['name']): void;
+  'click:dismiss': [];
+  'click:action': [PActionBarAction['name']];
 }>();
 
 defineProps<Props>();

package/squirrel/components/p-alert/p-alert.stories.js

@@ -1,6 +1,5 @@
 import PAlert from '@squirrel/components/p-alert/p-alert.vue';
-import { expect } from '@storybook/jest';
-import { within } from '@storybook/testing-library';
+import { expect, within } from '@storybook/test';
 
 export default {
   title: 'Components/PAlert',

package/squirrel/components/p-btn/p-btn.stories.js

@@ -1,8 +1,7 @@
 import Icon from '@squirrel/assets/info-circle-icon.svg?inline';
 import PBtn from '@squirrel/components/p-btn/p-btn.vue';
 import { action } from '@storybook/addon-actions';
-import { expect } from '@storybook/jest';
-import { within } from '@storybook/testing-library';
+import { expect, within } from '@storybook/test';
 
 // You can also import an `md` file and use it as a story's description
 // import PBtnReadme from './PBtn.readme.md';

package/squirrel/components/p-close-btn/p-close-btn.stories.js

@@ -1,7 +1,6 @@
 import PCloseBtn from '@squirrel/components/p-close-btn/p-close-btn.vue';
 import { action } from '@storybook/addon-actions';
-import { expect } from '@storybook/jest';
-import { within } from '@storybook/testing-library';
+import { expect, within } from '@storybook/test';
 
 export default {
   title: 'Components/PCloseBtn',

package/squirrel/components/p-select-btn/p-select-btn.stories.js

@@ -1,7 +1,6 @@
 import PSelectBtn from '@squirrel/components/p-select-btn/p-select-btn.vue';
-import { expect } from '@storybook/jest';
+import { expect, userEvent, within } from '@storybook/test';
 import { fieldArgTypes } from '@root/stories/common/field';
-import { userEvent, within } from '@storybook/testing-library';
 
 const selectItems = Object.freeze([
   { value: 1, text: 'Aleksandr Chappel', tooltip: 'lorem ipsum text 1' },

package/squirrel/components/p-select-pill/p-select-pill.stories.js

@@ -1,8 +1,7 @@
 import PSelectPill from '@squirrel/components/p-select-pill/p-select-pill.vue';
-import { expect } from '@storybook/jest';
+import { expect, userEvent, within } from '@storybook/test';
 import { fieldArgTypes } from '@root/stories/common/field';
 import { getCSSTransitionDuration, sleep } from '@root/stories/common/helpers';
-import { userEvent, within } from '@storybook/testing-library';
 
 const ACTIVE_CLASS = 'text-p-purple-60';