@pequity/squirrel 3.1.1 → 4.0.0

package/dist/cjs/index.js

@@ -75,6 +75,7 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
   },
   __name: "p-action-bar",
   props: {
+    show: { type: Boolean },
     label: {},
     actions: {}
   },
@@ -82,7 +83,8 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
   setup(__props) {
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
-        vue.createElementVNode("div", vue.mergeProps({
+        _ctx.show ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+          key: 0,
           class: "fixed bottom-6 left-1/2 z-[100] -translate-x-2/4",
           role: "alertdialog"
         }, _ctx.$attrs), [
@@ -169,7 +171,7 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
               }), 128))
             ])
           ])
-        ], 16)
+        ], 16)) : vue.createCommentVNode("", true)
       ]);
     };
   }

package/dist/es/index.js

@@ -1,5 +1,5 @@
 import { config } from "./config.js";
-import { defineComponent, openBlock, createBlock, Teleport, createElementVNode, mergeProps, createVNode, toDisplayString, createElementBlock, Fragment, renderList, withCtx, resolveDynamicComponent, createCommentVNode, shallowRef, ref, computed, onMounted, normalizeClass, unref, withModifiers, createTextVNode, withDirectives, vShow, pushScopeId, popScopeId, useAttrs, resolveDirective, normalizeStyle, isRef, renderSlot, provide, onBeforeUnmount, watch, toHandlers } from "vue";
+import { defineComponent, openBlock, createBlock, Teleport, createElementBlock, mergeProps, createElementVNode, createVNode, toDisplayString, Fragment, renderList, withCtx, resolveDynamicComponent, createCommentVNode, shallowRef, ref, computed, onMounted, normalizeClass, unref, withModifiers, createTextVNode, withDirectives, vShow, pushScopeId, popScopeId, useAttrs, resolveDirective, normalizeStyle, isRef, renderSlot, provide, onBeforeUnmount, watch, toHandlers } from "vue";
 import PBtn from "./p-btn.js";
 import PCloseBtn from "./p-close-btn.js";
 import PDropdown from "./p-dropdown.js";
@@ -75,6 +75,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   },
   __name: "p-action-bar",
   props: {
+    show: { type: Boolean },
     label: {},
     actions: {}
   },
@@ -82,7 +83,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   setup(__props) {
     return (_ctx, _cache) => {
       return openBlock(), createBlock(Teleport, { to: "body" }, [
-        createElementVNode("div", mergeProps({
+        _ctx.show ? (openBlock(), createElementBlock("div", mergeProps({
+          key: 0,
           class: "fixed bottom-6 left-1/2 z-[100] -translate-x-2/4",
           role: "alertdialog"
         }, _ctx.$attrs), [
@@ -169,7 +171,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
               }), 128))
             ])
           ])
-        ], 16)
+        ], 16)) : createCommentVNode("", true)
       ]);
     };
   }

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

@@ -1,5 +1,6 @@
 import { type PActionBarAction } from './p-action-bar.types';
 type Props = {
+    show: boolean;
     label: string;
     actions: PActionBarAction[];
 };

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, any>;
+    inputRef: import("vue").Ref<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[], 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>>;
+    internalItems: Ref<AnyObject[]>;
+    internalValue: Ref<AnyValue[]>;
+    search: Ref<string>;
+    rowVirtualizer: Ref<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, boolean>;
-    colResizeHandleLeft: Ref<string, string>;
-    colResizingIndex: Ref<number, number>;
-    colResizingWidth: Ref<number, number>;
+    isColResizing: Ref<boolean>;
+    colResizeHandleLeft: Ref<string>;
+    colResizingIndex: Ref<number>;
+    colResizingWidth: Ref<number>;
     colResize: (e: MouseEvent) => void;
     colResizeStart: (e: MouseEvent, i: number) => void;
     colResizeStop: () => void;

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

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

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "3.1.1",
-  "packageManager": "pnpm@8.9.2",
+  "version": "4.0.0",
+  "packageManager": "pnpm@9.7.1",
   "type": "module",
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -52,63 +52,66 @@
   "devDependencies": {
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.3",
-    "@commitlint/cli": "^19.3.0",
+    "@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.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/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/theming": "^8.2.7",
-    "@storybook/vue3": "^8.2.7",
-    "@storybook/vue3-vite": "^8.2.7",
-    "@tanstack/vue-virtual": "3.8.4",
+    "@storybook/theming": "^8.2.9",
+    "@storybook/vue3": "^8.2.9",
+    "@storybook/vue3-vite": "^8.2.9",
+    "@tanstack/vue-virtual": "3.10.1",
     "@types/jest": "^29.5.12",
     "@types/jsdom": "^21.1.7",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^22.1.0",
+    "@types/node": "^22.4.1",
     "@vitejs/plugin-vue": "^5.1.2",
-    "@vue/compiler-sfc": "3.4.35",
+    "@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.4",
+    "glob": "^11.0.0",
+    "http-server": "^14.1.1",
+    "husky": "^9.1.5",
     "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.40",
+    "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.10",
+    "rimraf": "^6.0.1",
     "sass": "^1.77.8",
-    "semantic-release": "^24.0.0",
-    "storybook": "^8.2.7",
+    "semantic-release": "^24.1.0",
+    "storybook": "^8.2.9",
     "svgo": "^3.3.2",
-    "tailwindcss": "^3.4.7",
+    "tailwindcss": "^3.4.10",
     "ts-jest": "^29.2.4",
     "typescript": "5.5.4",
     "v-calendar": "3.1.2",
-    "vite": "^5.3.5",
-    "vue": "3.4.35",
+    "vite": "^5.4.2",
+    "vue": "3.4.38",
     "vue-currency-input": "3.1.0",
-    "vue-router": "4.4.2",
+    "vue-router": "4.4.3",
     "vue-toastification": "2.0.0-rc.5",
     "vue-tsc": "2.0.29"
   }

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

@@ -48,9 +48,22 @@ const createComponentWrapper = (args = {}) =>
   });
 
 describe('PActionBar.vue', () => {
+  it.each([true, false])('shows/hides when the show prop is %s', async (val) => {
+    const wrapper = createComponentWrapper({
+      props: { show: false, label: 'Hello World', actions: [{ label: 'Say Hi', name: 'greet' }] },
+    });
+
+    await wrapper.setProps({ show: val });
+
+    const mainDiv = wrapper.find('.teleport-stub > .fixed.bottom-6');
+
+    expect(mainDiv.exists()).toBe(val);
+  });
+
   it('renders correctly', async () => {
     const wrapper = createComponentWrapper({
       props: {
+        show: true,
         label: 'Hello World',
         actions: [
           { label: 'Say Hi', name: 'greet' },
@@ -93,6 +106,7 @@ describe('PActionBar.vue', () => {
   it('attrs fall through ', async () => {
     const wrapper = createComponentWrapper({
       props: {
+        show: true,
         label: 'Hello World',
         actions: [
           { label: 'Say Hi', name: 'greet' },
@@ -114,7 +128,7 @@ describe('PActionBar.vue', () => {
 
   it('emits a click:dismiss event', async () => {
     const wrapper = createComponentWrapper({
-      props: { label: 'Hello World', actions: [{ label: 'Say Hi', name: 'greet' }] },
+      props: { show: true, label: 'Hello World', actions: [{ label: 'Say Hi', name: 'greet' }] },
     });
 
     const button = await wrapper.find('button.inline-flex');
@@ -127,6 +141,7 @@ describe('PActionBar.vue', () => {
   it('emits a click:action event with the correct name', async () => {
     const wrapper = createComponentWrapper({
       props: {
+        show: true,
         label: 'Hello World',
         actions: [
           { label: 'Say Hi', name: 'greet' },

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

@@ -5,12 +5,11 @@ 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),
+    icon: FileUploadIcon,
     name: 'upload',
   },
   {
@@ -23,12 +22,12 @@ const actionBarActions = [
       {
         label: 'Subaction 1',
         name: 'subaction1',
-        icon: shallowRef(PaginateLeftIcon),
+        icon: PaginateLeftIcon,
       },
       {
         label: 'Subaction 2',
         name: 'subaction2',
-        icon: shallowRef(PaginateRightIcon),
+        icon: PaginateRightIcon,
       },
     ],
   },
@@ -49,22 +48,29 @@ export default {
 
 export const Default = {
   render: (args) => ({
-    components: { PActionBar },
+    components: { PActionBar, PBtn },
     setup() {
       const onDismiss = action('dismiss');
+
       const onAction = action('action');
 
-      return { args, onAction, onDismiss };
+      const setShow = (val) => {
+        args.show = val;
+      };
+
+      return { args, onAction, onDismiss, setShow };
     },
     template: `
       <div class="h-20">
-        <PActionBar v-bind="args" @click:dismiss="onDismiss" @click:action="onAction" />
+        <PBtn class="mr-2" @click="setShow(!args.show)">Toggle action bar</PBtn>
+        <PActionBar v-bind="args" @click:dismiss="onDismiss(), setShow(false)" @click:action="onAction" />
       </div>
     `,
   }),
   args: {
     label: 'Hello World',
     actions: actionBarActions,
+    show: false,
   },
 };
 
@@ -89,6 +95,7 @@ export const WithAnElementBehind = {
   args: {
     label: 'Hello World',
     actions: actionBarActions,
+    show: true,
     onClick: fn(),
   },
   play: async ({ args, canvasElement }) => {

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

@@ -1,6 +1,6 @@
 <template>
   <Teleport to="body">
-    <div class="fixed bottom-6 left-1/2 z-[100] -translate-x-2/4" role="alertdialog" v-bind="$attrs">
+    <div v-if="show" class="fixed bottom-6 left-1/2 z-[100] -translate-x-2/4" role="alertdialog" v-bind="$attrs">
       <div
         class="flex h-12 w-max select-none items-center rounded-lg bg-p-purple-60 px-2 text-sm font-medium text-white"
       >
@@ -64,6 +64,7 @@ defineOptions({
 });
 
 type Props = {
+  show: boolean;
   label: string;
   actions: PActionBarAction[];
 };