@pequity/squirrel 1.0.24 → 1.0.25

package/README.md

@@ -12,10 +12,10 @@ Install the package and its dependencies using pnpm:
 pnpm i @pequity/squirrel @popperjs/core @tanstack/vue-virtual dayjs floating-vue lodash-es v-calendar vue-currency-input ue-toastification@2.0.0-rc.5
 ```
 
-Add the Squirrel CSS to your project's `main.ts` file:
+Import the Squirrel CSS to your project's `main.css` file:
 
-```ts
-import '@pequity/squirrel/assets/squirrel.css';
+```css
+@import '@pequity/squirrel/assets/squirrel.css';
 ```
 
 Add the "Inter" font to your project's `index.html` file:
@@ -61,6 +61,57 @@ If you are using Jest for unit testing, you will need to add the following to yo
 }
 ```
 
+## Developing Squirrel components while working on a consumer project
+
+When working on a consumer project that relies on Squirrel components and requires experimentation and adjustments, our goal is to promptly test changes without the need to edit the library directly within the `node_modules` folder or publish a new version of it. To facilitate this process, we can utilize [Vite aliases](https://vitejs.dev/config/shared-options.html#resolve-alias) and point the entry point of the library to the _source code_ of the library that resides inside the `squirrel` directory within the Squirrel repo.
+
+After we're happy with the changes, we can then commit them to the Squirrel repository and publish a new version.
+
+### Setting up Vite aliases for local development
+
+First you'll need to have the Squirrel repository cloned to your local machine.
+
+Then, in your consumer project's `.env.local` file, add an `VUE_APP_SQUIRREL_LOCAL_PATH` variable that points to the `squirrel` folder inside the Squirrel repository:
+
+> Make sure to replace `/home/user/development/pequity/squirrel/squirrel` with the actual path to the `squirrel` folder in your local Squirrel repository.
+
+```bash
+# Map squirrel path for local development - uncomment when you need to work on Squirrel components locally
+# VUE_APP_SQUIRREL_LOCAL_PATH=/home/user/development/pequity/squirrel/squirrel
+```
+
+Finally, in your project's `vite.config` file, add the following:
+
+> Heads up! The `vite.config.mts` file of the `pequity/frontendv2` already includes the following configuration.
+
+```js
+import { defineConfig, searchForWorkspaceRoot } from 'vite';
+
+const squirrelLocalPath = process.env.VUE_APP_SQUIRREL_LOCAL_PATH;
+
+export default defineConfig({
+  // Other Vite config options...
+  resolve: {
+    alias: {
+      ...(squirrelLocalPath && {
+        '@squirrel': squirrelLocalPath,
+        '@pequity/squirrel': squirrelLocalPath,
+      }),
+    },
+  },
+  ...(squirrelLocalPath && {
+    server: {
+      fs: {
+        allow: [searchForWorkspaceRoot(process.cwd()), squirrelLocalPath],
+      },
+    },
+  }),
+});
+```
+
+Now, when you want to work on Squirrel components, you can uncomment the `VUE_APP_SQUIRREL_LOCAL_PATH` in your `.env.local` file and restart the dev server.  
+The Squirrel components will be loaded from the local `<squirrel_repo_path>/squirrel` folder instead of the `node_modules` folder and HMR will work as expected.
+
 ## Contributing
 
 ---

package/dist/cjs/p-dropdown.js

@@ -22,21 +22,6 @@ const _sfc_main = vue.defineComponent({
       type: Boolean,
       default: true
     },
-    /**
-     * The selector that the arrow navigation function will use to
-     * match the items in the list.
-     */
-    itemSelector: {
-      type: String,
-      default: ".dropdown-item:not(.disabled), .dropdown-item:not(:disabled)"
-    },
-    /**
-     * The CSS class of the "focused" dropdown item
-     */
-    itemFocusClass: {
-      type: String,
-      default: "focus"
-    },
     /**
      * v-tooltip wraps the popper trigger with a div that has `display: inline-block` set by default.
      * This prop is used to override the CSS style of that wrapper div

package/dist/es/p-dropdown.js

@@ -21,21 +21,6 @@ const _sfc_main = defineComponent({
       type: Boolean,
       default: true
     },
-    /**
-     * The selector that the arrow navigation function will use to
-     * match the items in the list.
-     */
-    itemSelector: {
-      type: String,
-      default: ".dropdown-item:not(.disabled), .dropdown-item:not(:disabled)"
-    },
-    /**
-     * The CSS class of the "focused" dropdown item
-     */
-    itemFocusClass: {
-      type: String,
-      default: "focus"
-    },
     /**
      * v-tooltip wraps the popper trigger with a div that has `display: inline-block` set by default.
      * This prop is used to override the CSS style of that wrapper div

package/dist/squirrel/components/p-dropdown/p-dropdown.vue.d.ts

@@ -16,21 +16,6 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    /**
-     * The selector that the arrow navigation function will use to
-     * match the items in the list.
-     */
-    itemSelector: {
-        type: StringConstructor;
-        default: string;
-    };
-    /**
-     * The CSS class of the "focused" dropdown item
-     */
-    itemFocusClass: {
-        type: StringConstructor;
-        default: string;
-    };
     /**
      * v-tooltip wraps the popper trigger with a div that has `display: inline-block` set by default.
      * This prop is used to override the CSS style of that wrapper div
@@ -81,21 +66,6 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    /**
-     * The selector that the arrow navigation function will use to
-     * match the items in the list.
-     */
-    itemSelector: {
-        type: StringConstructor;
-        default: string;
-    };
-    /**
-     * The CSS class of the "focused" dropdown item
-     */
-    itemFocusClass: {
-        type: StringConstructor;
-        default: string;
-    };
     /**
      * v-tooltip wraps the popper trigger with a div that has `display: inline-block` set by default.
      * This prop is used to override the CSS style of that wrapper div
@@ -115,8 +85,6 @@ declare const _default: import("vue").DefineComponent<{
         default: null;
     };
 }>>, {
-    itemSelector: string;
-    itemFocusClass: string;
     reference: HTMLElement | null | undefined;
     enableArrowNavigation: boolean;
     enableCloseOnEsc: boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "1.0.24",
+  "version": "1.0.25",
   "packageManager": "pnpm@8.9.2",
   "type": "module",
   "scripts": {

package/squirrel/components/p-chips/p-chips.spec.js

@@ -0,0 +1,95 @@
+import PChips from '@squirrel/components/p-chips/p-chips.vue';
+import { createWrapperFor } from '@tests/jest.helpers';
+
+const createItems = (itemText) => {
+  itemText = itemText || 'text';
+
+  return [
+    { [itemText]: 'item 1', value: 1 },
+    { [itemText]: 'item 2', value: 2 },
+    { [itemText]: 'item 3', value: 3 },
+    { [itemText]: 'item 4', value: 4 },
+  ];
+};
+
+describe('PChips.vue', () => {
+  it('renders correctly', async () => {
+    const items = createItems();
+
+    const wrapper = createWrapperFor(PChips, {
+      props: { items },
+      slots: { before: 'before slot', after: 'after slot' },
+    });
+
+    await wrapper.setData({ maxChipsDisplayed: 4 });
+
+    const container = wrapper.find('.flex.divide-x');
+    const beforeEl = container.element.previousElementSibling;
+    const afterEl = container.element.nextElementSibling;
+    const beforeSlot = wrapper.findByText('before slot');
+    const afterSlot = wrapper.findByText('after slot');
+
+    const chips = container.findAll('.flex.cursor-pointer');
+
+    chips.forEach((chip, i) => {
+      expect(chip.text()).toBe(items[i].text);
+    });
+
+    const additional = wrapper.findByText('+0');
+    expect(additional.attributes('style')).toEqual(`display: none;`);
+    expect(beforeSlot.element).toBe(beforeEl);
+    expect(afterSlot.element).toBe(afterEl);
+  });
+
+  it('displays additional chips number', async () => {
+    const items = createItems();
+
+    const wrapper = createWrapperFor(PChips, {
+      props: { items },
+    });
+
+    await wrapper.setData({ maxChipsDisplayed: 2 });
+
+    const chips = wrapper.findAll('.flex.cursor-pointer');
+    const additional = wrapper.findByText('+2');
+
+    expect(chips.length).toBe(2);
+    expect(additional.attributes('style')).toBe(undefined);
+  });
+
+  it('displays chips with custom item text', async () => {
+    const items = createItems('name');
+
+    const wrapper = createWrapperFor(PChips, {
+      props: { items, itemText: 'name' },
+    });
+
+    await wrapper.setData({ maxChipsDisplayed: 4 });
+
+    const chips = wrapper.findAll('.flex.cursor-pointer');
+
+    chips.forEach((chip, i) => {
+      expect(chip.text()).toBe(items[i].name);
+    });
+  });
+
+  it('emits events when clicking on chips', async () => {
+    const items = createItems();
+
+    const wrapper = createWrapperFor(PChips, {
+      props: { items },
+    });
+
+    await wrapper.setData({ maxChipsDisplayed: 2 });
+
+    const chips = wrapper.findAll('.flex.cursor-pointer');
+    const chip = chips[0];
+    const additional = wrapper.findByText('+2');
+
+    await chip.trigger('click');
+    await additional.trigger('click');
+
+    expect(wrapper.emitted()['click:chip'][0][0]).toEqual(items[0]);
+    expect(wrapper.emitted()['click:overflow']).toBeTruthy();
+  });
+});

package/squirrel/components/p-dropdown/p-dropdown.spec.js

@@ -0,0 +1,164 @@
+import PDropdown from '@squirrel/components/p-dropdown/p-dropdown.vue';
+import { createWrapperFor } from '@tests/jest.helpers';
+import { setupListKeyboardNavigation } from '@squirrel/utils/listKeyboardNavigation';
+
+jest.mock('@squirrel/utils/listKeyboardNavigation', () => {
+  return {
+    setupListKeyboardNavigation: jest.fn(),
+  };
+});
+
+const destroyFn = jest.fn();
+const initFn = jest.fn();
+
+const createMockedKbdNavigationSvc = () => {
+  return {
+    destroy: destroyFn,
+    init: initFn,
+  };
+};
+
+const Popper = {
+  template: `<div class="popper"><slot /></div>`,
+};
+
+const PopperContent = {
+  template: `<div class="popper-content"><slot /></div>`,
+};
+
+const createVDropdownStub = () => {
+  return {
+    template: `
+      <div ref="vPopper">
+        <Popper ref="popper">
+          <slot />
+        </Popper>
+        <PopperContent ref="popperContent">
+          <slot name="popper" />
+        </PopperContent>
+      </div>
+    `,
+    components: {
+      Popper,
+      PopperContent,
+    },
+    mounted() {
+      this.$emit('show');
+    },
+    beforeUnmount() {
+      this.$emit('hide');
+    },
+  };
+};
+
+describe('PDropdown.vue', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders correctly', async () => {
+    const wrapper = createWrapperFor(PDropdown, {
+      props: {
+        enableArrowNavigation: false,
+        enableCloseOnEsc: false,
+        triggerStyle: {
+          width: '200px',
+          display: 'flex',
+        },
+      },
+      slots: {
+        default: `<button>Open popper</button>`,
+        popper: `<div>Dropdown content</div>`,
+      },
+      global: {
+        stubs: {
+          VDropdown: createVDropdownStub(),
+        },
+      },
+    });
+
+    const popper = wrapper.find('.popper');
+    const popperContent = wrapper.find('.popper-content');
+
+    expect(popper.attributes().style).toBe('width: 200px; display: flex;');
+    expect(popper.text()).toBe('Open popper');
+    expect(popperContent.text()).toBe('Dropdown content');
+  });
+
+  it(`sets the correct defaults`, async () => {
+    const wrapper = createWrapperFor(PDropdown, {
+      props: {
+        enableArrowNavigation: false,
+        enableCloseOnEsc: false,
+      },
+      slots: {
+        default: `<button>Open popper</button>`,
+        popper: `<div>Dropdown content</div>`,
+      },
+      global: {
+        stubs: {
+          VDropdown: createVDropdownStub(),
+        },
+      },
+    });
+
+    const res = {
+      triggers: 'click',
+      'auto-hide': 'true',
+      theme: 'p-dropdown-theme',
+      'popper-class': 'dropdown',
+      placement: 'bottom-start',
+      distance: '4',
+      delay: '0',
+      handleresize: 'true',
+    };
+
+    expect(wrapper.attributes()).toEqual(res);
+  });
+
+  it('initializes the keyboard navigation svc', async () => {
+    setupListKeyboardNavigation.mockImplementation(() => createMockedKbdNavigationSvc());
+
+    createWrapperFor(PDropdown, {
+      props: {
+        enableArrowNavigation: true,
+        enableCloseOnEsc: false,
+      },
+      slots: {
+        default: `<button>Open popper</button>`,
+        popper: `<div>Dropdown content</div>`,
+      },
+      global: {
+        stubs: {
+          VDropdown: createVDropdownStub(),
+        },
+      },
+    });
+
+    expect(setupListKeyboardNavigation).toHaveBeenCalledTimes(1);
+  });
+
+  it('destroys the keyboard navigation svc', async () => {
+    setupListKeyboardNavigation.mockImplementation(() => createMockedKbdNavigationSvc());
+
+    const wrapper = createWrapperFor(PDropdown, {
+      props: {
+        enableArrowNavigation: true,
+        enableCloseOnEsc: false,
+      },
+      slots: {
+        default: `<button>Open popper</button>`,
+        popper: `<div>Dropdown content</div>`,
+      },
+      global: {
+        stubs: {
+          VDropdown: createVDropdownStub(),
+        },
+      },
+    });
+
+    wrapper.unmount();
+
+    expect(destroyFn).toHaveBeenCalled();
+  });
+});

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

@@ -128,21 +128,6 @@ export default defineComponent({
       type: Boolean,
       default: true,
     },
-    /**
-     * The selector that the arrow navigation function will use to
-     * match the items in the list.
-     */
-    itemSelector: {
-      type: String,
-      default: '.dropdown-item:not(.disabled), .dropdown-item:not(:disabled)',
-    },
-    /**
-     * The CSS class of the "focused" dropdown item
-     */
-    itemFocusClass: {
-      type: String,
-      default: 'focus',
-    },
     /**
      * v-tooltip wraps the popper trigger with a div that has `display: inline-block` set by default.
      * This prop is used to override the CSS style of that wrapper div

package/squirrel/components/p-table/usePTableColResize.spec.js

@@ -0,0 +1,89 @@
+import { createApp, nextTick, ref } from 'vue';
+import { usePTableColResize } from '@squirrel/components/p-table/usePTableColResize';
+
+const withSetup = (composable) => {
+  let result;
+
+  const app = createApp({
+    setup() {
+      result = composable();
+      return () => {};
+    },
+  });
+
+  app.mount(document.createElement('div'));
+
+  return result;
+};
+
+describe('usePTableColResize', () => {
+  it('should resize the column when colResize is called', () => {
+    const options = {
+      enabled: ref(true),
+      ths: ref([{ offsetWidth: 100, getBoundingClientRect: () => ({ width: 100 }) }]),
+    };
+
+    const { isColResizing, colResizingIndex, colResizeHandleLeft, colResizingWidth, colResize } = withSetup(() =>
+      usePTableColResize(options)
+    );
+
+    isColResizing.value = true;
+    colResizingIndex.value = 0;
+
+    const event = new MouseEvent('mousemove', { clientX: 150 });
+    colResize(event);
+
+    expect(colResizeHandleLeft.value).toBe('150px');
+    expect(colResizingWidth.value).toBe(80);
+  });
+
+  it('should start column resizing when colResizeStart is called', () => {
+    const options = {
+      enabled: ref(true),
+      ths: ref([{ offsetWidth: 100 }, { offsetWidth: 200 }]),
+    };
+    const { colResizeStart, isColResizing, colResizingWidth, colResizingIndex } = withSetup(() =>
+      usePTableColResize(options)
+    );
+
+    const event = new MouseEvent('mousedown', { detail: 1 });
+    colResizeStart(event, 1);
+
+    expect(isColResizing.value).toBe(true);
+    expect(colResizingWidth.value).toBe(200);
+    expect(colResizingIndex.value).toBe(1);
+  });
+
+  it('should stop column resizing when colResizeStop is called', () => {
+    const options = {
+      enabled: ref(true),
+      ths: ref([{ offsetWidth: 100 }]),
+    };
+    const { colResizeStop, isColResizing } = withSetup(() => usePTableColResize(options));
+
+    colResizeStop();
+
+    expect(isColResizing.value).toBe(false);
+  });
+
+  it('should fit column width to data when colResizeFitToData is called', async () => {
+    const options = {
+      enabled: ref(true),
+      ths: ref([
+        {
+          closest: () => ({
+            querySelectorAll: () => [{ offsetWidth: 100, getBoundingClientRect: () => ({ width: 150 }) }],
+          }),
+        },
+      ]),
+    };
+    const { colResizeFitToData, isColResizing, colResizingWidth } = withSetup(() => usePTableColResize(options));
+
+    colResizeFitToData(0);
+
+    await nextTick();
+
+    expect(isColResizing.value).toBe(false);
+    expect(colResizingWidth.value).toBe(150);
+  });
+});