@pequity/squirrel 1.0.23 → 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:
@@ -56,11 +56,62 @@ If you are using Jest for unit testing, you will need to add the following to yo
 ```js
 {
   moduleNameMapper: {
-    '^@pequity/squirrel$': '<rootDir>/node_modules/@pequity/squirrel/dist/squirrel.cjs.js'
+    '^@pequity/squirrel$': '<rootDir>/node_modules/@pequity/squirrel/dist/cjs',
   }
 }
 ```
 
+## 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-btn.js

@@ -2,196 +2,8 @@
 const pRingLoader_vue_vue_type_script_setup_true_lang = require("./chunks/p-ring-loader.js");
 const tailwind = require("./tailwind.js");
 const vue = require("vue");
+const vueRouter = require("vue-router");
 const _pluginVue_exportHelper = require("./chunks/_plugin-vue_export-helper.js");
-/*!
-  * vue-router v4.3.0
-  * (c) 2024 Eduardo San Martin Morote
-  * @license MIT
-  */
-const isBrowser = typeof document !== "undefined";
-const noop = () => {
-};
-const isArray = Array.isArray;
-function isSameRouteRecord(a, b) {
-  return (a.aliasOf || a) === (b.aliasOf || b);
-}
-function isSameRouteLocationParams(a, b) {
-  if (Object.keys(a).length !== Object.keys(b).length)
-    return false;
-  for (const key in a) {
-    if (!isSameRouteLocationParamsValue(a[key], b[key]))
-      return false;
-  }
-  return true;
-}
-function isSameRouteLocationParamsValue(a, b) {
-  return isArray(a) ? isEquivalentArray(a, b) : isArray(b) ? isEquivalentArray(b, a) : a === b;
-}
-function isEquivalentArray(a, b) {
-  return isArray(b) ? a.length === b.length && a.every((value, i) => value === b[i]) : a.length === 1 && a[0] === b;
-}
-var NavigationType;
-(function(NavigationType2) {
-  NavigationType2["pop"] = "pop";
-  NavigationType2["push"] = "push";
-})(NavigationType || (NavigationType = {}));
-var NavigationDirection;
-(function(NavigationDirection2) {
-  NavigationDirection2["back"] = "back";
-  NavigationDirection2["forward"] = "forward";
-  NavigationDirection2["unknown"] = "";
-})(NavigationDirection || (NavigationDirection = {}));
-Symbol(process.env.NODE_ENV !== "production" ? "navigation failure" : "");
-var NavigationFailureType;
-(function(NavigationFailureType2) {
-  NavigationFailureType2[NavigationFailureType2["aborted"] = 4] = "aborted";
-  NavigationFailureType2[NavigationFailureType2["cancelled"] = 8] = "cancelled";
-  NavigationFailureType2[NavigationFailureType2["duplicated"] = 16] = "duplicated";
-})(NavigationFailureType || (NavigationFailureType = {}));
-Symbol(process.env.NODE_ENV !== "production" ? "router view location matched" : "");
-Symbol(process.env.NODE_ENV !== "production" ? "router view depth" : "");
-const routerKey = Symbol(process.env.NODE_ENV !== "production" ? "router" : "");
-const routeLocationKey = Symbol(process.env.NODE_ENV !== "production" ? "route location" : "");
-Symbol(process.env.NODE_ENV !== "production" ? "router view location" : "");
-function useLink(props) {
-  const router = vue.inject(routerKey);
-  const currentRoute = vue.inject(routeLocationKey);
-  const route = vue.computed(() => router.resolve(vue.unref(props.to)));
-  const activeRecordIndex = vue.computed(() => {
-    const { matched } = route.value;
-    const { length } = matched;
-    const routeMatched = matched[length - 1];
-    const currentMatched = currentRoute.matched;
-    if (!routeMatched || !currentMatched.length)
-      return -1;
-    const index = currentMatched.findIndex(isSameRouteRecord.bind(null, routeMatched));
-    if (index > -1)
-      return index;
-    const parentRecordPath = getOriginalPath(matched[length - 2]);
-    return (
-      // we are dealing with nested routes
-      length > 1 && // if the parent and matched route have the same path, this link is
-      // referring to the empty child. Or we currently are on a different
-      // child of the same parent
-      getOriginalPath(routeMatched) === parentRecordPath && // avoid comparing the child with its parent
-      currentMatched[currentMatched.length - 1].path !== parentRecordPath ? currentMatched.findIndex(isSameRouteRecord.bind(null, matched[length - 2])) : index
-    );
-  });
-  const isActive = vue.computed(() => activeRecordIndex.value > -1 && includesParams(currentRoute.params, route.value.params));
-  const isExactActive = vue.computed(() => activeRecordIndex.value > -1 && activeRecordIndex.value === currentRoute.matched.length - 1 && isSameRouteLocationParams(currentRoute.params, route.value.params));
-  function navigate(e = {}) {
-    if (guardEvent(e)) {
-      return router[vue.unref(props.replace) ? "replace" : "push"](
-        vue.unref(props.to)
-        // avoid uncaught errors are they are logged anyway
-      ).catch(noop);
-    }
-    return Promise.resolve();
-  }
-  if ((process.env.NODE_ENV !== "production" || false) && isBrowser) {
-    const instance = vue.getCurrentInstance();
-    if (instance) {
-      const linkContextDevtools = {
-        route: route.value,
-        isActive: isActive.value,
-        isExactActive: isExactActive.value
-      };
-      instance.__vrl_devtools = instance.__vrl_devtools || [];
-      instance.__vrl_devtools.push(linkContextDevtools);
-      vue.watchEffect(() => {
-        linkContextDevtools.route = route.value;
-        linkContextDevtools.isActive = isActive.value;
-        linkContextDevtools.isExactActive = isExactActive.value;
-      }, { flush: "post" });
-    }
-  }
-  return {
-    route,
-    href: vue.computed(() => route.value.href),
-    isActive,
-    isExactActive,
-    navigate
-  };
-}
-const RouterLinkImpl = /* @__PURE__ */ vue.defineComponent({
-  name: "RouterLink",
-  compatConfig: { MODE: 3 },
-  props: {
-    to: {
-      type: [String, Object],
-      required: true
-    },
-    replace: Boolean,
-    activeClass: String,
-    // inactiveClass: String,
-    exactActiveClass: String,
-    custom: Boolean,
-    ariaCurrentValue: {
-      type: String,
-      default: "page"
-    }
-  },
-  useLink,
-  setup(props, { slots }) {
-    const link = vue.reactive(useLink(props));
-    const { options } = vue.inject(routerKey);
-    const elClass = vue.computed(() => ({
-      [getLinkClass(props.activeClass, options.linkActiveClass, "router-link-active")]: link.isActive,
-      // [getLinkClass(
-      //   props.inactiveClass,
-      //   options.linkInactiveClass,
-      //   'router-link-inactive'
-      // )]: !link.isExactActive,
-      [getLinkClass(props.exactActiveClass, options.linkExactActiveClass, "router-link-exact-active")]: link.isExactActive
-    }));
-    return () => {
-      const children = slots.default && slots.default(link);
-      return props.custom ? children : vue.h("a", {
-        "aria-current": link.isExactActive ? props.ariaCurrentValue : null,
-        href: link.href,
-        // this would override user added attrs but Vue will still add
-        // the listener, so we end up triggering both
-        onClick: link.navigate,
-        class: elClass.value
-      }, children);
-    };
-  }
-});
-const RouterLink = RouterLinkImpl;
-function guardEvent(e) {
-  if (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey)
-    return;
-  if (e.defaultPrevented)
-    return;
-  if (e.button !== void 0 && e.button !== 0)
-    return;
-  if (e.currentTarget && e.currentTarget.getAttribute) {
-    const target = e.currentTarget.getAttribute("target");
-    if (/\b_blank\b/i.test(target))
-      return;
-  }
-  if (e.preventDefault)
-    e.preventDefault();
-  return true;
-}
-function includesParams(outer, inner) {
-  for (const key in inner) {
-    const innerValue = inner[key];
-    const outerValue = outer[key];
-    if (typeof innerValue === "string") {
-      if (innerValue !== outerValue)
-        return false;
-    } else {
-      if (!isArray(outerValue) || outerValue.length !== innerValue.length || innerValue.some((value, i) => value !== outerValue[i]))
-        return false;
-    }
-  }
-  return true;
-}
-function getOriginalPath(record) {
-  return record ? record.aliasOf ? record.aliasOf.path : record.path : "";
-}
-const getLinkClass = (propClass, globalClass, defaultClass) => propClass != null ? propClass : globalClass != null ? globalClass : defaultClass;
 const BUTTON_TYPES = {
   PRIMARY: "primary",
   SECONDARY: "secondary",
@@ -244,7 +56,7 @@ const _sfc_main = vue.defineComponent({
   name: "PBtn",
   components: {
     PRingLoader: pRingLoader_vue_vue_type_script_setup_true_lang._sfc_main,
-    RouterLink
+    RouterLink: vueRouter.RouterLink
   },
   inheritAttrs: false,
   props: {

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-btn.js

@@ -1,196 +1,8 @@
 import { _ as _sfc_main$1 } from "./chunks/p-ring-loader.js";
 import { getColorDeep } from "./tailwind.js";
-import { defineComponent, reactive, inject, computed, h, unref, getCurrentInstance, watchEffect, resolveComponent, openBlock, createElementBlock, mergeProps, renderSlot, createBlock, resolveDynamicComponent, withCtx, createElementVNode, normalizeClass, normalizeStyle, createCommentVNode } from "vue";
+import { defineComponent, resolveComponent, openBlock, createElementBlock, mergeProps, renderSlot, createBlock, resolveDynamicComponent, withCtx, createElementVNode, normalizeClass, normalizeStyle, createCommentVNode } from "vue";
+import { RouterLink } from "vue-router";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
-/*!
-  * vue-router v4.3.0
-  * (c) 2024 Eduardo San Martin Morote
-  * @license MIT
-  */
-const isBrowser = typeof document !== "undefined";
-const noop = () => {
-};
-const isArray = Array.isArray;
-function isSameRouteRecord(a, b) {
-  return (a.aliasOf || a) === (b.aliasOf || b);
-}
-function isSameRouteLocationParams(a, b) {
-  if (Object.keys(a).length !== Object.keys(b).length)
-    return false;
-  for (const key in a) {
-    if (!isSameRouteLocationParamsValue(a[key], b[key]))
-      return false;
-  }
-  return true;
-}
-function isSameRouteLocationParamsValue(a, b) {
-  return isArray(a) ? isEquivalentArray(a, b) : isArray(b) ? isEquivalentArray(b, a) : a === b;
-}
-function isEquivalentArray(a, b) {
-  return isArray(b) ? a.length === b.length && a.every((value, i) => value === b[i]) : a.length === 1 && a[0] === b;
-}
-var NavigationType;
-(function(NavigationType2) {
-  NavigationType2["pop"] = "pop";
-  NavigationType2["push"] = "push";
-})(NavigationType || (NavigationType = {}));
-var NavigationDirection;
-(function(NavigationDirection2) {
-  NavigationDirection2["back"] = "back";
-  NavigationDirection2["forward"] = "forward";
-  NavigationDirection2["unknown"] = "";
-})(NavigationDirection || (NavigationDirection = {}));
-Symbol(process.env.NODE_ENV !== "production" ? "navigation failure" : "");
-var NavigationFailureType;
-(function(NavigationFailureType2) {
-  NavigationFailureType2[NavigationFailureType2["aborted"] = 4] = "aborted";
-  NavigationFailureType2[NavigationFailureType2["cancelled"] = 8] = "cancelled";
-  NavigationFailureType2[NavigationFailureType2["duplicated"] = 16] = "duplicated";
-})(NavigationFailureType || (NavigationFailureType = {}));
-Symbol(process.env.NODE_ENV !== "production" ? "router view location matched" : "");
-Symbol(process.env.NODE_ENV !== "production" ? "router view depth" : "");
-const routerKey = Symbol(process.env.NODE_ENV !== "production" ? "router" : "");
-const routeLocationKey = Symbol(process.env.NODE_ENV !== "production" ? "route location" : "");
-Symbol(process.env.NODE_ENV !== "production" ? "router view location" : "");
-function useLink(props) {
-  const router = inject(routerKey);
-  const currentRoute = inject(routeLocationKey);
-  const route = computed(() => router.resolve(unref(props.to)));
-  const activeRecordIndex = computed(() => {
-    const { matched } = route.value;
-    const { length } = matched;
-    const routeMatched = matched[length - 1];
-    const currentMatched = currentRoute.matched;
-    if (!routeMatched || !currentMatched.length)
-      return -1;
-    const index = currentMatched.findIndex(isSameRouteRecord.bind(null, routeMatched));
-    if (index > -1)
-      return index;
-    const parentRecordPath = getOriginalPath(matched[length - 2]);
-    return (
-      // we are dealing with nested routes
-      length > 1 && // if the parent and matched route have the same path, this link is
-      // referring to the empty child. Or we currently are on a different
-      // child of the same parent
-      getOriginalPath(routeMatched) === parentRecordPath && // avoid comparing the child with its parent
-      currentMatched[currentMatched.length - 1].path !== parentRecordPath ? currentMatched.findIndex(isSameRouteRecord.bind(null, matched[length - 2])) : index
-    );
-  });
-  const isActive = computed(() => activeRecordIndex.value > -1 && includesParams(currentRoute.params, route.value.params));
-  const isExactActive = computed(() => activeRecordIndex.value > -1 && activeRecordIndex.value === currentRoute.matched.length - 1 && isSameRouteLocationParams(currentRoute.params, route.value.params));
-  function navigate(e = {}) {
-    if (guardEvent(e)) {
-      return router[unref(props.replace) ? "replace" : "push"](
-        unref(props.to)
-        // avoid uncaught errors are they are logged anyway
-      ).catch(noop);
-    }
-    return Promise.resolve();
-  }
-  if ((process.env.NODE_ENV !== "production" || false) && isBrowser) {
-    const instance = getCurrentInstance();
-    if (instance) {
-      const linkContextDevtools = {
-        route: route.value,
-        isActive: isActive.value,
-        isExactActive: isExactActive.value
-      };
-      instance.__vrl_devtools = instance.__vrl_devtools || [];
-      instance.__vrl_devtools.push(linkContextDevtools);
-      watchEffect(() => {
-        linkContextDevtools.route = route.value;
-        linkContextDevtools.isActive = isActive.value;
-        linkContextDevtools.isExactActive = isExactActive.value;
-      }, { flush: "post" });
-    }
-  }
-  return {
-    route,
-    href: computed(() => route.value.href),
-    isActive,
-    isExactActive,
-    navigate
-  };
-}
-const RouterLinkImpl = /* @__PURE__ */ defineComponent({
-  name: "RouterLink",
-  compatConfig: { MODE: 3 },
-  props: {
-    to: {
-      type: [String, Object],
-      required: true
-    },
-    replace: Boolean,
-    activeClass: String,
-    // inactiveClass: String,
-    exactActiveClass: String,
-    custom: Boolean,
-    ariaCurrentValue: {
-      type: String,
-      default: "page"
-    }
-  },
-  useLink,
-  setup(props, { slots }) {
-    const link = reactive(useLink(props));
-    const { options } = inject(routerKey);
-    const elClass = computed(() => ({
-      [getLinkClass(props.activeClass, options.linkActiveClass, "router-link-active")]: link.isActive,
-      // [getLinkClass(
-      //   props.inactiveClass,
-      //   options.linkInactiveClass,
-      //   'router-link-inactive'
-      // )]: !link.isExactActive,
-      [getLinkClass(props.exactActiveClass, options.linkExactActiveClass, "router-link-exact-active")]: link.isExactActive
-    }));
-    return () => {
-      const children = slots.default && slots.default(link);
-      return props.custom ? children : h("a", {
-        "aria-current": link.isExactActive ? props.ariaCurrentValue : null,
-        href: link.href,
-        // this would override user added attrs but Vue will still add
-        // the listener, so we end up triggering both
-        onClick: link.navigate,
-        class: elClass.value
-      }, children);
-    };
-  }
-});
-const RouterLink = RouterLinkImpl;
-function guardEvent(e) {
-  if (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey)
-    return;
-  if (e.defaultPrevented)
-    return;
-  if (e.button !== void 0 && e.button !== 0)
-    return;
-  if (e.currentTarget && e.currentTarget.getAttribute) {
-    const target = e.currentTarget.getAttribute("target");
-    if (/\b_blank\b/i.test(target))
-      return;
-  }
-  if (e.preventDefault)
-    e.preventDefault();
-  return true;
-}
-function includesParams(outer, inner) {
-  for (const key in inner) {
-    const innerValue = inner[key];
-    const outerValue = outer[key];
-    if (typeof innerValue === "string") {
-      if (innerValue !== outerValue)
-        return false;
-    } else {
-      if (!isArray(outerValue) || outerValue.length !== innerValue.length || innerValue.some((value, i) => value !== outerValue[i]))
-        return false;
-    }
-  }
-  return true;
-}
-function getOriginalPath(record) {
-  return record ? record.aliasOf ? record.aliasOf.path : record.path : "";
-}
-const getLinkClass = (propClass, globalClass, defaultClass) => propClass != null ? propClass : globalClass != null ? globalClass : defaultClass;
 const BUTTON_TYPES = {
   PRIMARY: "primary",
   SECONDARY: "secondary",

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.23",
+  "version": "1.0.25",
   "packageManager": "pnpm@8.9.2",
   "type": "module",
   "scripts": {
@@ -39,13 +39,14 @@
   "module": "./dist/es/index.js",
   "dependencies": {
     "@popperjs/core": "2.11.8",
-    "@tanstack/vue-virtual": "3.2.1",
+    "@tanstack/vue-virtual": "3.3.0",
     "dayjs": "1.11.10",
     "floating-vue": "5.2.2",
     "lodash-es": "4.17.21",
     "v-calendar": "3.1.2",
-    "vue": "3.4.21",
+    "vue": "3.4.23",
     "vue-currency-input": "3.1.0",
+    "vue-router": "4.3.0",
     "vue-toastification": "2.0.0-rc.5"
   },
   "peerDependencies": {
@@ -57,13 +58,14 @@
     "v-calendar": "^3.1.2",
     "vue": "^3.4.21",
     "vue-currency-input": "^3.1.0",
+    "vue-router": "^4.3.0",
     "vue-toastification": "^2.0.0-rc.5"
   },
   "devDependencies": {
     "@babel/core": "^7.24.4",
     "@babel/preset-env": "^7.24.4",
-    "@commitlint/cli": "^19.2.1",
-    "@commitlint/config-conventional": "^19.1.0",
+    "@commitlint/cli": "^19.2.2",
+    "@commitlint/config-conventional": "^19.2.2",
     "@pequity/eslint-config": "^0.0.12",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
@@ -85,7 +87,7 @@
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^20.12.7",
     "@vitejs/plugin-vue": "^5.0.4",
-    "@vue/compiler-sfc": "3.4.21",
+    "@vue/compiler-sfc": "3.4.23",
     "@vue/test-utils": "^2.4.5",
     "@vue/vue3-jest": "^29.2.6",
     "autoprefixer": "^10.4.19",
@@ -100,7 +102,7 @@
     "make-coverage-badge": "^1.2.0",
     "postcss": "^8.4.38",
     "prettier": "^3.2.5",
-    "prettier-plugin-tailwindcss": "^0.5.13",
+    "prettier-plugin-tailwindcss": "^0.5.14",
     "resolve-tspaths": "^0.8.18",
     "rimraf": "^5.0.5",
     "sass": "^1.75.0",
@@ -110,7 +112,7 @@
     "tailwindcss": "^3.4.3",
     "ts-jest": "^29.1.2",
     "typescript": "5.4.5",
-    "vite": "^5.2.8",
+    "vite": "^5.2.9",
     "vue-router": "^4.3.0",
     "vue-tsc": "2.0.13"
   }

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);
+  });
+});