@pequity/squirrel 3.1.0 → 3.1.1

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/dist/squirrel/components/p-input-number/p-input-number.vue.d.ts

@@ -25,7 +25,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
 }, {
-    inputRef: import("vue").Ref<any>;
+    inputRef: import("vue").Ref<any, any>;
     computedAttrs: import("vue").ComputedRef<{
         [x: string]: unknown;
     }>;

package/dist/squirrel/components/p-select-list/useSelectList.d.ts

@@ -31,10 +31,10 @@ export declare const useSelectList: (props: Props, inputSearch: InputSearch, vir
     computedItems: import("vue").ComputedRef<AnyObject[]>;
     computedItemSize: import("vue").ComputedRef<number>;
     computedInsideSelected: import("vue").ComputedRef<boolean>;
-    internalItems: Ref<AnyObject[]>;
-    internalValue: Ref<AnyValue[]>;
-    search: Ref<string>;
-    rowVirtualizer: Ref<import("@tanstack/vue-virtual").Virtualizer<HTMLElement, Element>>;
+    internalItems: Ref<AnyObject[], AnyObject[]>;
+    internalValue: Ref<AnyValue[], AnyValue[]>;
+    search: Ref<string, string>;
+    rowVirtualizer: Ref<import("@tanstack/vue-virtual").Virtualizer<HTMLElement, Element>, import("@tanstack/vue-virtual").Virtualizer<HTMLElement, Element>>;
     getValue: (index: number) => AnyValue;
     getText: (index: number) => AnyValue;
     isSelected: (val: AnyValue) => boolean;

package/dist/squirrel/components/p-table/usePTableColResize.d.ts

@@ -4,10 +4,10 @@ type Options = {
     ths: Ref<HTMLElement[]>;
 };
 export declare const usePTableColResize: (options: Options) => {
-    isColResizing: Ref<boolean>;
-    colResizeHandleLeft: Ref<string>;
-    colResizingIndex: Ref<number>;
-    colResizingWidth: Ref<number>;
+    isColResizing: Ref<boolean, boolean>;
+    colResizeHandleLeft: Ref<string, string>;
+    colResizingIndex: Ref<number, number>;
+    colResizingWidth: Ref<number, number>;
     colResize: (e: MouseEvent) => void;
     colResizeStart: (e: MouseEvent, i: number) => void;
     colResizeStop: () => void;

package/dist/squirrel/components/p-table/usePTableRowVirtualizer.d.ts

@@ -11,12 +11,18 @@ export declare const usePTableRowVirtualizer: (options: Options) => {
     virtualRows: Ref<{
         key: number;
         index: number;
+    }[], {
+        key: number;
+        index: number;
+    }[] | {
+        key: number;
+        index: number;
     }[]>;
-    paddingTop: Ref<number>;
-    paddingBottom: Ref<number>;
-    measureElement: () => Ref<undefined>;
+    paddingTop: Ref<number, number>;
+    paddingBottom: Ref<number, number>;
+    measureElement: () => Ref<undefined, undefined>;
 } | {
-    virtualizer: Ref<import("@tanstack/vue-virtual").Virtualizer<HTMLElement, Element>>;
+    virtualizer: Ref<import("@tanstack/vue-virtual").Virtualizer<HTMLElement, Element>, import("@tanstack/vue-virtual").Virtualizer<HTMLElement, Element>>;
     virtualRows: ComputedRef<import("@tanstack/vue-virtual").VirtualItem<Element>[]>;
     paddingTop: ComputedRef<number>;
     paddingBottom: ComputedRef<number>;

package/dist/squirrel/composables/useInputClasses.d.ts

@@ -12,6 +12,6 @@ export declare function useInputClasses(props: Partial<Props>): {
     labelClasses: import("vue").ComputedRef<string>;
     selectClasses: import("vue").ComputedRef<string>;
     textareaClasses: import("vue").ComputedRef<string>;
-    errorMsgClasses: import("vue").Ref<string>;
+    errorMsgClasses: import("vue").Ref<string, string>;
 };
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "packageManager": "pnpm@8.9.2",
   "type": "module",
   "scripts": {
@@ -50,34 +50,33 @@
     "vue-toastification": "^2.0.0-rc.5"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.9",
-    "@babel/preset-env": "^7.24.8",
+    "@babel/core": "^7.25.2",
+    "@babel/preset-env": "^7.25.3",
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
     "@pequity/eslint-config": "^0.0.13",
     "@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.7",
+    "@storybook/addon-actions": "^8.2.7",
+    "@storybook/addon-essentials": "^8.2.7",
+    "@storybook/addon-interactions": "^8.2.7",
+    "@storybook/addon-links": "^8.2.7",
+    "@storybook/blocks": "^8.2.7",
+    "@storybook/manager-api": "^8.2.7",
+    "@storybook/test": "^8.2.7",
     "@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.7",
+    "@storybook/vue3": "^8.2.7",
+    "@storybook/vue3-vite": "^8.2.7",
+    "@tanstack/vue-virtual": "3.8.4",
     "@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.1.0",
+    "@vitejs/plugin-vue": "^5.1.2",
+    "@vue/compiler-sfc": "3.4.35",
     "@vue/test-utils": "^2.4.6",
     "@vue/vue3-jest": "^29.2.6",
     "autoprefixer": "^10.4.19",
@@ -87,30 +86,30 @@
     "eslint-plugin-storybook": "^0.8.0",
     "floating-vue": "5.2.2",
     "glob": "^10.4.5",
-    "husky": "^9.1.1",
+    "husky": "^9.1.4",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^15.2.7",
     "lodash-es": "4.17.21",
     "make-coverage-badge": "^1.2.0",
-    "postcss": "^8.4.39",
+    "postcss": "^8.4.40",
     "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.5",
     "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",
+    "storybook": "^8.2.7",
     "svgo": "^3.3.2",
-    "tailwindcss": "^3.4.6",
-    "ts-jest": "^29.2.3",
+    "tailwindcss": "^3.4.7",
+    "ts-jest": "^29.2.4",
     "typescript": "5.5.4",
     "v-calendar": "3.1.2",
-    "vite": "^5.3.4",
-    "vue": "3.4.33",
+    "vite": "^5.3.5",
+    "vue": "3.4.35",
     "vue-currency-input": "3.1.0",
-    "vue-router": "4.4.0",
+    "vue-router": "4.4.2",
     "vue-toastification": "2.0.0-rc.5",
-    "vue-tsc": "2.0.28"
+    "vue-tsc": "2.0.29"
   }
 }

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