@pequity/squirrel 5.4.7 → 5.4.9

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "5.4.7",
-  "packageManager": "pnpm@9.12.2",
+  "version": "5.4.9",
+  "packageManager": "pnpm@9.12.3",
   "type": "module",
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -38,12 +38,11 @@
   "main": "./dist/cjs/index.js",
   "module": "./dist/es/index.js",
   "peerDependencies": {
-    "@popperjs/core": "^2.11.8",
     "@tanstack/vue-virtual": "^3.8.3",
+    "@vuepic/vue-datepicker": "^9.0.3",
     "dayjs": "^1.11.12",
     "floating-vue": "^5.2.2",
     "lodash-es": "^4.17.21",
-    "v-calendar": "^3.1.2",
     "vue": "^3.4.33",
     "vue-currency-input": "^3.1.0",
     "vue-router": "^4.4.0",
@@ -52,35 +51,35 @@
   "devDependencies": {
     "@commitlint/cli": "^19.5.0",
     "@commitlint/config-conventional": "^19.5.0",
-    "@pequity/eslint-config": "^0.0.13",
-    "@playwright/test": "^1.48.1",
-    "@popperjs/core": "2.11.8",
+    "@pequity/eslint-config": "^1.0.1",
+    "@playwright/test": "^1.48.2",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-a11y": "^8.3.6",
-    "@storybook/addon-actions": "^8.3.6",
-    "@storybook/addon-essentials": "^8.3.6",
-    "@storybook/addon-interactions": "^8.3.6",
-    "@storybook/addon-links": "^8.3.6",
-    "@storybook/blocks": "^8.3.6",
-    "@storybook/manager-api": "^8.3.6",
-    "@storybook/test": "^8.3.6",
+    "@storybook/addon-a11y": "^8.4.2",
+    "@storybook/addon-actions": "^8.4.2",
+    "@storybook/addon-essentials": "^8.4.2",
+    "@storybook/addon-interactions": "^8.4.2",
+    "@storybook/addon-links": "^8.4.2",
+    "@storybook/blocks": "^8.4.2",
+    "@storybook/manager-api": "^8.4.2",
+    "@storybook/test": "^8.4.2",
     "@storybook/test-runner": "^0.19.1",
-    "@storybook/theming": "^8.3.6",
-    "@storybook/vue3": "^8.3.6",
-    "@storybook/vue3-vite": "^8.3.6",
-    "@tanstack/vue-virtual": "3.10.8",
+    "@storybook/theming": "^8.4.2",
+    "@storybook/vue3": "^8.4.2",
+    "@storybook/vue3-vite": "^8.4.2",
+    "@tanstack/vue-virtual": "3.10.9",
     "@types/jsdom": "^21.1.7",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^22.7.6",
-    "@vitejs/plugin-vue": "^5.1.4",
-    "@vitest/coverage-v8": "^2.1.3",
+    "@types/node": "^22.9.0",
+    "@vitejs/plugin-vue": "^5.1.5",
+    "@vitest/coverage-v8": "^2.1.4",
     "@vue/compiler-sfc": "3.5.12",
     "@vue/test-utils": "^2.4.6",
+    "@vuepic/vue-datepicker": "^10.0.0",
     "autoprefixer": "^10.4.20",
     "dayjs": "1.11.13",
-    "eslint": "^8.57.1",
-    "eslint-plugin-storybook": "^0.9.0",
+    "eslint": "^9.14.0",
+    "eslint-plugin-storybook": "^0.11.0",
     "floating-vue": "5.2.2",
     "glob": "^11.0.0",
     "husky": "^9.1.6",
@@ -89,24 +88,23 @@
     "lint-staged": "^15.2.10",
     "lodash-es": "4.17.21",
     "make-coverage-badge": "^1.2.0",
-    "postcss": "^8.4.47",
+    "postcss": "^8.4.49",
     "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.8",
     "resolve-tspaths": "^0.8.22",
     "rimraf": "^6.0.1",
-    "sass": "^1.80.2",
-    "semantic-release": "^24.1.3",
-    "storybook": "^8.3.6",
+    "sass": "^1.80.6",
+    "semantic-release": "^24.2.0",
+    "storybook": "^8.4.2",
     "svgo": "^3.3.2",
     "tailwindcss": "^3.4.14",
     "typescript": "5.6.3",
-    "v-calendar": "3.1.2",
-    "vite": "^5.4.9",
-    "vitest": "^2.1.3",
+    "vite": "^5.4.11",
+    "vitest": "^2.1.4",
     "vue": "3.5.12",
     "vue-currency-input": "3.1.0",
     "vue-router": "4.4.5",
     "vue-toastification": "2.0.0-rc.5",
-    "vue-tsc": "2.1.6"
+    "vue-tsc": "2.1.10"
   }
 }

package/squirrel/assets/squirrel.css

@@ -1,6 +1,6 @@
 @import 'floating-vue/dist/style.css';
 @import 'vue-toastification/dist/index.css';
-@import 'v-calendar/style.css';
+@import '@vuepic/vue-datepicker/dist/main.css';
 
 :root {
   /* Design system colors */
@@ -76,16 +76,55 @@
   overflow-wrap: break-word;
 }
 
-/* Datepicker - v-calendar */
-.vc-container.vc-blue {
-  font-family: Inter;
-}
-
 /* Skeleton fade */
 .skeleton-fade {
   mask-image: linear-gradient(rgba(0, 0, 0, 1), transparent);
 }
 
+/* Date picker - Vue datepicker */
+:root {
+  --dp-font-family: 'Inter', 'Helvetica', 'Arial', 'sans-serif';
+  --dp-cell-border-radius: 50%;
+}
+
+.dp__theme_light {
+  --dp-background-color: rgb(var(--color-surface));
+  --dp-text-color: rgb(var(--color-on-surface));
+  --dp-hover-color: rgb(var(--color-p-blue-10));
+  --dp-hover-text-color: rgb(var(--color-p-gray-100));
+  --dp-hover-icon-color: rgb(var(--color-p-gray-40));
+  --dp-primary-color: rgb(var(--color-primary));
+  --dp-primary-disabled-color: rgb(var(--color-p-blue-40));
+  --dp-primary-text-color: rgb(var(--color-surface));
+  --dp-secondary-color: rgb(var(--color-p-gray-30));
+  --dp-border-color: rgb(var(--color-p-gray-30));
+  --dp-menu-border-color: rgb(var(--color-p-gray-30));
+  --dp-border-color-hover: rgb(var(--color-p-gray-30));
+  --dp-border-color-focus: rgb(var(--color-p-gray-30));
+  --dp-disabled-color: rgb(var(--color-p-blue-10));
+  --dp-scroll-bar-background: rgb(var(--color-p-blue-10));
+  --dp-scroll-bar-color: rgb(var(--color-p-gray-40));
+  --dp-success-color: rgb(var(--color-on-success));
+  --dp-success-color-disabled: rgb(var(--color-p-green-40));
+  --dp-icon-color: rgb(var(--color-p-gray-40));
+  --dp-danger-color: rgb(var(--color-on-error));
+  --dp-marker-color: rgb(var(--color-on-error));
+  --dp-tooltip-color: rgb(var(--color-p-blue-10));
+  --dp-disabled-color-text: rgb(var(--color-p-gray-40));
+  --dp-highlight-color: rgb(var(--color-p-blue-15));
+  --dp-range-between-dates-background-color: var(--dp-hover-color, rgb(var(--color-p-blue-10)));
+  --dp-range-between-dates-text-color: var(--dp-hover-text-color, rgb(var(--color-p-gray-100)));
+  --dp-range-between-border-color: var(--dp-hover-color, rgb(var(--color-p-blue-10)));
+}
+
+.dp__theme_light .dp__today {
+  border: 1px solid rgb(var(--color-p-blue-40));
+}
+
+[data-has-error='true'] .dp__theme_light {
+  border-color: var(--dp-danger-color, rgb(var(--color-on-error)));
+}
+
 /* Toasts - vue-toastification */
 .Vue-Toastification__toast {
   font-family: Inter;

package/squirrel/components/index.ts

@@ -1,6 +1,8 @@
+import { type PActionBarAction } from '@squirrel/components/p-action-bar/p-action-bar.types';
 import PActionBar from '@squirrel/components/p-action-bar/p-action-bar.vue';
 import PAlert from '@squirrel/components/p-alert/p-alert.vue';
 import PAvatar from '@squirrel/components/p-avatar/p-avatar.vue';
+import { type Size } from '@squirrel/components/p-btn/p-btn.types';
 import PBtn from '@squirrel/components/p-btn/p-btn.vue';
 import PCard from '@squirrel/components/p-card/p-card.vue';
 import PCheckbox from '@squirrel/components/p-checkbox/p-checkbox.vue';
@@ -10,8 +12,9 @@ import PDatePicker from '@squirrel/components/p-date-picker/p-date-picker.vue';
 import PDrawer from '@squirrel/components/p-drawer/p-drawer.vue';
 import PDropdown from '@squirrel/components/p-dropdown/p-dropdown.vue';
 import PDropdownSelect from '@squirrel/components/p-dropdown-select/p-dropdown-select.vue';
+import { type FileUploadFile } from '@squirrel/components/p-file-upload/p-file-upload.types';
 import PFileUpload from '@squirrel/components/p-file-upload/p-file-upload.vue';
-import PFilterIcon from '@squirrel/components/p-table-header-cell/p-table-filter-icon.vue';
+import { P_ICON_ALIASES, type PIconAlias } from '@squirrel/components/p-icon/p-icon.types';
 import PIcon from '@squirrel/components/p-icon/p-icon.vue';
 import PInfoIcon from '@squirrel/components/p-info-icon/p-info-icon.vue';
 import PInlineDatePicker from '@squirrel/components/p-inline-date-picker/p-inline-date-picker.vue';
@@ -21,7 +24,9 @@ import PInputPercent from '@squirrel/components/p-input-percent/p-input-percent.
 import PInputSearch from '@squirrel/components/p-input-search/p-input-search.vue';
 import PLink from '@squirrel/components/p-link/p-link.vue';
 import PLoading from '@squirrel/components/p-loading/p-loading.vue';
+import { usePLoading } from '@squirrel/components/p-loading/usePLoading';
 import PModal from '@squirrel/components/p-modal/p-modal.vue';
+import { usePModal } from '@squirrel/components/p-modal/usePModal';
 import PPagination from '@squirrel/components/p-pagination/p-pagination.vue';
 import PPaginationInfo from '@squirrel/components/p-pagination-info/p-pagination-info.vue';
 import PProgressBar from '@squirrel/components/p-progress-bar/p-progress-bar.vue';
@@ -29,42 +34,45 @@ import PRingLoader from '@squirrel/components/p-ring-loader/p-ring-loader.vue';
 import PSelect from '@squirrel/components/p-select/p-select.vue';
 import PSelectBtn from '@squirrel/components/p-select-btn/p-select-btn.vue';
 import PSelectList from '@squirrel/components/p-select-list/p-select-list.vue';
+import { useSelectList } from '@squirrel/components/p-select-list/useSelectList';
 import PSelectPill from '@squirrel/components/p-select-pill/p-select-pill.vue';
 import PSkeletonLoader from '@squirrel/components/p-skeleton-loader/p-skeleton-loader.vue';
-import PTable from '@squirrel/components/p-table/p-table.vue';
-import PTableHeaderCell from '@squirrel/components/p-table-header-cell/p-table-header-cell.vue';
-import PTableLoader from '@squirrel/components/p-table-loader/p-table-loader.vue';
-import PTableSort from '@squirrel/components/p-table-sort/p-table-sort.vue';
-import PTableTd from '@squirrel/components/p-table-td/p-table-td.vue';
-import PTabs from '@squirrel/components/p-tabs/p-tabs.vue';
-import PTextarea from '@squirrel/components/p-textarea/p-textarea.vue';
-import PToggle from '@squirrel/components/p-toggle/p-toggle.vue';
-import { type FileUploadFile } from '@squirrel/components/p-file-upload/p-file-upload.types';
 import {
-  type HeaderCellAttrs,
-  MIN_WIDTH_COL_RESIZE,
-  type TableCol,
-  type ThAttrs,
   colsInjectionKey,
+  type HeaderCellAttrs,
   isColsResizableInjectionKey,
   isFirstColFixedInjectionKey,
   isLastColFixedInjectionKey,
+  MIN_WIDTH_COL_RESIZE,
+  type TableCol,
+  type ThAttrs,
 } from '@squirrel/components/p-table/p-table.types';
-import { type PActionBarAction } from '@squirrel/components/p-action-bar/p-action-bar.types';
-import { type PIconAlias, P_ICON_ALIASES } from '@squirrel/components/p-icon/p-icon.types';
+import PTable from '@squirrel/components/p-table/p-table.vue';
+import { usePTableColResize } from '@squirrel/components/p-table/usePTableColResize';
+import { usePTableRowVirtualizer } from '@squirrel/components/p-table/usePTableRowVirtualizer';
+import PFilterIcon from '@squirrel/components/p-table-header-cell/p-table-filter-icon.vue';
+import PTableHeaderCell from '@squirrel/components/p-table-header-cell/p-table-header-cell.vue';
+import PTableLoader from '@squirrel/components/p-table-loader/p-table-loader.vue';
 import {
   SORTING_TYPES,
   type SortingType,
   type SortingTypeWithoutNoSorting,
 } from '@squirrel/components/p-table-sort/p-table-sort.config';
-import { type Size } from '@squirrel/components/p-btn/p-btn.types';
-import { usePLoading } from '@squirrel/components/p-loading/usePLoading';
-import { usePModal } from '@squirrel/components/p-modal/usePModal';
-import { usePTableColResize } from '@squirrel/components/p-table/usePTableColResize';
-import { usePTableRowVirtualizer } from '@squirrel/components/p-table/usePTableRowVirtualizer';
-import { useSelectList } from '@squirrel/components/p-select-list/useSelectList';
+import PTableSort from '@squirrel/components/p-table-sort/p-table-sort.vue';
+import PTableTd from '@squirrel/components/p-table-td/p-table-td.vue';
+import PTabs from '@squirrel/components/p-tabs/p-tabs.vue';
+import PTextarea from '@squirrel/components/p-textarea/p-textarea.vue';
+import PToggle from '@squirrel/components/p-toggle/p-toggle.vue';
 
 export {
+  colsInjectionKey,
+  FileUploadFile,
+  HeaderCellAttrs,
+  isColsResizableInjectionKey,
+  isFirstColFixedInjectionKey,
+  isLastColFixedInjectionKey,
+  MIN_WIDTH_COL_RESIZE,
+  P_ICON_ALIASES,
   PActionBar,
   PActionBarAction,
   PAlert,
@@ -81,6 +89,7 @@ export {
   PFileUpload,
   PFilterIcon,
   PIcon,
+  PIconAlias,
   PInfoIcon,
   PInlineDatePicker,
   PInput,
@@ -107,24 +116,15 @@ export {
   PTabs,
   PTextarea,
   PToggle,
+  Size,
   SORTING_TYPES,
-  MIN_WIDTH_COL_RESIZE,
-  P_ICON_ALIASES,
-  colsInjectionKey,
-  isColsResizableInjectionKey,
-  isFirstColFixedInjectionKey,
-  isLastColFixedInjectionKey,
-  usePModal,
-  usePTableColResize,
-  usePTableRowVirtualizer,
-  useSelectList,
-  usePLoading,
   SortingType,
   SortingTypeWithoutNoSorting,
-  Size,
-  FileUploadFile,
-  HeaderCellAttrs,
   TableCol,
   ThAttrs,
-  PIconAlias,
+  usePLoading,
+  usePModal,
+  usePTableColResize,
+  usePTableRowVirtualizer,
+  useSelectList,
 };

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

@@ -135,7 +135,7 @@ describe('PActionBar.vue', () => {
     expect(icons[2].attributes().icon).toBe('test-icon-3');
   });
 
-  it('attrs fall through ', async () => {
+  it('attrs fall through', async () => {
     const wrapper = createComponentWrapper({
       props: {
         show: true,

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

@@ -1,8 +1,8 @@
 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 PActionBar from '@squirrel/components/p-action-bar/p-action-bar.vue';
+import PBtn from '@squirrel/components/p-btn/p-btn.vue';
 import { action } from '@storybook/addon-actions';
 import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
 

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

@@ -56,11 +56,11 @@
 </template>
 
 <script setup lang="ts">
+import { type PActionBarAction } from '@squirrel/components/p-action-bar/p-action-bar.types';
 import PBtn from '@squirrel/components/p-btn/p-btn.vue';
 import PCloseBtn from '@squirrel/components/p-close-btn/p-close-btn.vue';
 import PDropdown from '@squirrel/components/p-dropdown/p-dropdown.vue';
 import PIcon from '@squirrel/components/p-icon/p-icon.vue';
-import { type PActionBarAction } from '@squirrel/components/p-action-bar/p-action-bar.types';
 import { isComponent } from '@squirrel/utils/component';
 import { isString } from '@squirrel/utils/string';
 

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

@@ -20,7 +20,7 @@
 
 <script lang="ts">
 import { type Color, getColor } from '@squirrel/utils/tailwind';
-import { type PropType, defineComponent } from 'vue';
+import { defineComponent, type PropType } from 'vue';
 
 const ALERT_TYPES = {
   info: `bg-info text-on-info`,

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

@@ -1,6 +1,6 @@
 import PBtn from '@squirrel/components/p-btn/p-btn.vue';
-import { createWrapperFor } from '@tests/vitest.helpers';
 import { sanitizeUrl } from '@squirrel/utils/sanitization';
+import { createWrapperFor } from '@tests/vitest.helpers';
 
 vi.mock('@squirrel/utils/sanitization', () => {
   return {
@@ -223,7 +223,7 @@ describe('PBtn.vue', () => {
     expect(button.attributes()['aria-selected']).toBe('true');
   });
 
-  it('it sanitizes an invalid link', async () => {
+  it('sanitizes an invalid link', async () => {
     const wrapper = createWrapperFor(PBtn, {
       props: {
         to: 'javascript:evil()',

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

@@ -33,13 +33,13 @@
 </template>
 
 <script lang="ts">
-import PRingLoader from '@squirrel/components/p-ring-loader/p-ring-loader.vue';
-import { type Color, getColorDeep } from '@squirrel/utils/tailwind';
-import { type PropType, defineComponent } from 'vue';
-import { type RouteLocationRaw, RouterLink } from 'vue-router';
 import { type Size } from '@squirrel/components/p-btn/p-btn.types';
+import PRingLoader from '@squirrel/components/p-ring-loader/p-ring-loader.vue';
 import { isExternalLink } from '@squirrel/utils/link';
 import { sanitizeUrl } from '@squirrel/utils/sanitization';
+import { type Color, getColorDeep } from '@squirrel/utils/tailwind';
+import { defineComponent, type PropType } from 'vue';
+import { type RouteLocationRaw, RouterLink } from 'vue-router';
 
 const BUTTON_TYPES = {
   PRIMARY: 'primary',

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

@@ -17,7 +17,7 @@
 </template>
 
 <script setup lang="ts">
-import { type StyleValue, computed, useAttrs } from 'vue';
+import { computed, type StyleValue, useAttrs } from 'vue';
 
 defineOptions({
   name: 'PCheckbox',

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

@@ -28,8 +28,8 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
 import { isObject } from 'lodash-es';
+import { defineComponent } from 'vue';
 
 export default defineComponent({
   name: 'PChips',