@pequity/squirrel 3.1.2 → 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/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "3.1.2",
-  "packageManager": "pnpm@8.9.2",
+  "version": "4.0.0",
+  "packageManager": "pnpm@9.7.1",
   "type": "module",
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -71,7 +71,7 @@
     "@storybook/theming": "^8.2.9",
     "@storybook/vue3": "^8.2.9",
     "@storybook/vue3-vite": "^8.2.9",
-    "@tanstack/vue-virtual": "3.9.0",
+    "@tanstack/vue-virtual": "3.10.1",
     "@types/jest": "^29.5.12",
     "@types/jsdom": "^21.1.7",
     "@types/lodash-es": "^4.17.12",
@@ -87,9 +87,9 @@
     "eslint": "^8.57.0",
     "eslint-plugin-storybook": "^0.8.0",
     "floating-vue": "5.2.2",
-    "glob": "^10.4.5",
+    "glob": "^11.0.0",
     "http-server": "^14.1.1",
-    "husky": "^9.1.4",
+    "husky": "^9.1.5",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^15.2.9",
@@ -99,7 +99,7 @@
     "prettier": "^3.3.3",
     "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.1.0",
     "storybook": "^8.2.9",
@@ -108,12 +108,11 @@
     "ts-jest": "^29.2.4",
     "typescript": "5.5.4",
     "v-calendar": "3.1.2",
-    "vite": "^5.4.1",
+    "vite": "^5.4.2",
     "vue": "3.4.38",
     "vue-currency-input": "3.1.0",
     "vue-router": "4.4.3",
     "vue-toastification": "2.0.0-rc.5",
-    "vue-tsc": "2.0.29",
-    "wait-on": "^7.2.0"
+    "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[];
 };