@pequity/squirrel 8.4.3 → 8.4.5

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "8.4.3",
-  "packageManager": "pnpm@10.12.4",
+  "version": "8.4.5",
+  "packageManager": "pnpm@10.13.1",
   "type": "module",
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -50,28 +50,27 @@
     "@commitlint/cli": "^19.8.1",
     "@commitlint/config-conventional": "^19.8.1",
     "@pequity/eslint-config": "^2.0.2",
-    "@playwright/test": "^1.53.2",
+    "@playwright/test": "^1.54.1",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-a11y": "^9.0.15",
-    "@storybook/addon-docs": "^9.0.15",
-    "@storybook/addon-links": "^9.0.15",
-    "@storybook/addon-vitest": "^9.0.15",
-    "@storybook/vue3": "^9.0.15",
-    "@storybook/vue3-vite": "^9.0.15",
+    "@storybook/addon-a11y": "^9.0.18",
+    "@storybook/addon-docs": "^9.0.18",
+    "@storybook/addon-links": "^9.0.18",
+    "@storybook/addon-vitest": "^9.0.18",
+    "@storybook/vue3-vite": "^9.0.18",
     "@tanstack/vue-virtual": "3.13.12",
     "@types/jsdom": "^21.1.7",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^24.0.10",
-    "@vitejs/plugin-vue": "^6.0.0",
+    "@types/node": "^24.1.0",
+    "@vitejs/plugin-vue": "^6.0.1",
     "@vitest/browser": "3.2.4",
     "@vitest/coverage-v8": "^3.2.4",
-    "@vue/compiler-sfc": "3.5.17",
+    "@vue/compiler-sfc": "3.5.18",
     "@vue/test-utils": "^2.4.6",
     "@vuepic/vue-datepicker": "11.0.2",
     "autoprefixer": "^10.4.21",
-    "eslint": "^9.30.1",
-    "eslint-plugin-storybook": "^9.0.15",
+    "eslint": "^9.32.0",
+    "eslint-plugin-storybook": "^9.0.18",
     "floating-vue": "5.2.2",
     "glob": "^11.0.3",
     "husky": "^9.1.7",
@@ -80,25 +79,25 @@
     "lint-staged": "^16.1.2",
     "lodash-es": "4.17.21",
     "make-coverage-badge": "^1.2.0",
-    "playwright": "^1.53.2",
+    "playwright": "^1.54.1",
     "postcss": "^8.5.6",
     "prettier": "^3.6.2",
-    "prettier-plugin-tailwindcss": "^0.6.13",
+    "prettier-plugin-tailwindcss": "^0.6.14",
     "resolve-tspaths": "^0.8.23",
     "rimraf": "^6.0.1",
     "sass": "^1.89.2",
-    "semantic-release": "^24.2.6",
-    "storybook": "^9.0.15",
+    "semantic-release": "^24.2.7",
+    "storybook": "^9.0.18",
     "svgo": "^4.0.0",
     "tailwindcss": "^3.4.17",
     "typescript": "5.8.3",
-    "vite": "^7.0.0",
+    "vite": "^7.0.6",
     "vitest": "^3.2.4",
-    "vue": "3.5.17",
+    "vue": "3.5.18",
     "vue-currency-input": "3.2.1",
     "vue-router": "4.5.1",
     "vue-toastification": "2.0.0-rc.5",
-    "vue-tsc": "3.0.1"
+    "vue-tsc": "3.0.4"
   },
   "dependencies": {
     "tailwind-variants": "^1.0.0"

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

@@ -1,5 +1,5 @@
-import PaginateLeftIcon from '@squirrel/assets/pagination-left-icon.svg?inline';
-import PaginateRightIcon from '@squirrel/assets/pagination-right-icon.svg?inline';
+import KeyboardPressEnterIcon from '@squirrel/assets/keyboard-press-enter.svg?inline';
+import XIconWhite from '@squirrel/assets/x-icon-white.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/actions';
@@ -9,7 +9,7 @@ import { markRaw } from 'vue';
 const actionBarActions = [
   {
     label: 'Upload',
-    icon: markRaw(PaginateRightIcon),
+    icon: markRaw(KeyboardPressEnterIcon),
     name: 'upload',
   },
   {
@@ -23,12 +23,12 @@ const actionBarActions = [
       {
         label: 'Subaction 1',
         name: 'subaction1',
-        icon: markRaw(PaginateLeftIcon),
+        icon: markRaw(XIconWhite),
       },
       {
         label: 'Subaction 2',
         name: 'subaction2',
-        icon: markRaw(PaginateRightIcon),
+        icon: markRaw(KeyboardPressEnterIcon),
       },
       {
         label: 'Subaction 3',

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

@@ -68,21 +68,48 @@ import PIcon from '@squirrel/components/p-icon/p-icon.vue';
 import { isComponent } from '@squirrel/utils/component';
 import { isString } from '@squirrel/utils/string';
 
+/**
+ * A floating action bar component that displays at the bottom of the screen.
+ * Provides a teleported action bar with dismiss functionality and customizable actions.
+ * Supports both simple action buttons and dropdown menus with sub-actions.
+ *
+ * @displayName PActionBar
+ */
 defineOptions({
   name: 'PActionBar',
   inheritAttrs: false,
 });
 
 type Props = {
+  /**
+   * Controls visibility of the action bar.
+   * When true, the action bar is displayed at the bottom of the screen.
+   */
   show: boolean;
+  /**
+   * The main text displayed in the action bar.
+   * Provides context for the available actions.
+   */
   label: string;
+  /**
+   * Array of action objects to be rendered as buttons or dropdowns.
+   * Each action can have an icon, label, and optional sub-actions.
+   */
   actions: PActionBarAction[];
 };
 
+defineProps<Props>();
+
 defineEmits<{
+  /**
+   * Emitted when the "Clear All" button is clicked.
+   * Used to dismiss the action bar and clear selections.
+   */
   'click:dismiss': [];
-  'click:action': [PActionBarAction['name']];
+  /**
+   * Emitted when an action or sub-action is clicked.
+   * @param {string} name - The name of the clicked action
+   */
+  'click:action': [name: PActionBarAction['name']];
 }>();
-
-defineProps<Props>();
 </script>

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

@@ -26,11 +26,35 @@ const ALERT_TYPES = {
 </script>
 
 <script setup lang="ts">
+/**
+ * An alert component that displays informational, warning, error, or success messages.
+ * Supports different alert types with appropriate styling and icons.
+ * Provides customizable content through slots.
+ *
+ * @displayName PAlert
+ */
 defineOptions({
   name: 'PAlert',
 });
 
+defineSlots<{
+  /**
+   * Custom icon slot - use this to override the default alert type icon.
+   * If not provided, a default icon will be shown based on the alert type.
+   */
+  icon?: () => unknown;
+
+  /**
+   * Default slot - the main content of the alert message.
+   * This should contain the text or HTML to display in the alert.
+   */
+  default?: () => unknown;
+}>();
+
 const props = defineProps({
+  /**
+   * The type of the alert which determines its appearance and icon
+   */
   type: {
     type: String as PropType<keyof typeof ALERT_TYPES>,
     default: 'info',

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

@@ -17,10 +17,16 @@
 <script lang="ts">
 import { computed, type PropType, ref, watch } from 'vue';
 
+/**
+ * Available avatar shapes
+ */
 const SHAPES = ['rectangle', 'circle'] as const;
 
 type Shape = (typeof SHAPES)[number];
 
+/**
+ * CSS classes for each avatar shape
+ */
 const SHAPE_CLASSES = {
   rectangle: 'rounded-lg',
   circle: 'rounded-full',
@@ -28,28 +34,50 @@ const SHAPE_CLASSES = {
 </script>
 
 <script setup lang="ts">
+/**
+ * An avatar component that displays user images or fallback text.
+ * Supports different shapes and handles image loading errors gracefully.
+ *
+ * @displayName PAvatar
+ */
 defineOptions({
   name: 'PAvatar',
 });
 
 const props = defineProps({
+  /**
+   * The shape of the avatar
+   */
   shape: {
     type: String as PropType<Shape>,
     default: 'circle',
     validator: (value: Shape) => SHAPES.includes(value),
   },
+  /**
+   * URL of the image to display
+   */
   imageSrc: {
     type: String,
     default: '',
   },
+  /**
+   * Text to display when image is not available
+   * Also used as the alt text for the image
+   */
   label: {
     type: String,
     required: true,
   },
+  /**
+   * Additional CSS classes to apply to the image
+   */
   imageClass: {
     type: String,
     default: '',
   },
+  /**
+   * Additional CSS classes to apply to the label container
+   */
   labelClass: {
     type: String,
     default: '',

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

@@ -21,8 +21,14 @@ import { tv, type VariantProps } from 'tailwind-variants';
 import { computed, type PropType, useAttrs } from 'vue';
 import { type RouteLocationRaw } from 'vue-router';
 
+/**
+ * Type for the icon prop
+ */
 type Icon = InstanceType<typeof PIcon>['$props']['icon'];
 
+/**
+ * Button styles configuration using tailwind-variants
+ */
 const btnClasses = {
   slots: {
     button:
@@ -91,8 +97,19 @@ const btnClasses = {
 
 const btn = tv(btnClasses);
 
+/**
+ * Available button types
+ */
 const BUTTON_TYPES = Object.keys(btnClasses.variants.type);
+
+/**
+ * Native button types (HTML attribute values)
+ */
 const BUTTON_NATIVE_TYPES = ['button', 'submit', 'reset'] as const;
+
+/**
+ * Loader sizes mapped to button sizes
+ */
 const LOADER_SIZES = { sm: 24, md: 30, lg: 40 } as const satisfies { [key in Size]: number };
 
 type ButtonNativeType = (typeof BUTTON_NATIVE_TYPES)[number];
@@ -100,10 +117,25 @@ type ButtonType = NonNullable<VariantProps<typeof btn>['type']>;
 </script>
 
 <script setup lang="ts">
+/**
+ * A versatile button component with multiple variants, sizes, and states.
+ * Supports different button types, loading states, icons, and link functionality.
+ * Built with tailwind-variants for consistent styling and theming.
+ *
+ * @displayName PBtn
+ */
 defineOptions({
   name: 'PBtn',
 });
 
+defineSlots<{
+  /**
+   * Default slot - the content of the button.
+   * This should contain the text or HTML to display inside the button.
+   */
+  default?: () => void;
+}>();
+
 const attrs = useAttrs();
 
 const props = defineProps({
@@ -166,6 +198,9 @@ const props = defineProps({
     type: String as PropType<Icon>,
     default: '',
   },
+  /**
+   * The icon to display on the right side of the button
+   */
   iconRight: {
     type: String as PropType<Icon>,
     default: '',

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

@@ -5,14 +5,37 @@
         {{ title }}
       </div>
     </slot>
-    <slot />
+    <slot></slot>
   </div>
 </template>
 
 <script setup lang="ts">
+/**
+ * A card component that provides a container for content with optional header and footer.
+ * Supports different variants and customizable styling.
+ *
+ * @displayName PCard
+ */
 defineOptions({ name: 'PCard' });
 
+defineSlots<{
+  /**
+   * Title slot - custom content for the card title.
+   * Receives the titleClass prop for consistent styling.
+   */
+  title?: (props: { titleClass: string }) => void;
+
+  /**
+   * Default slot - the main content of the card.
+   */
+  default?: () => void;
+}>();
+
 defineProps({
+  /**
+   * The title of the card - displayed at the top
+   * If not provided, you can use the title slot instead
+   */
   title: {
     type: String,
     default: '',

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

@@ -32,13 +32,35 @@ defineOptions({
   inheritAttrs: false,
 });
 
-defineEmits(['update:modelValue']);
+defineSlots<{
+  /**
+   * Content displayed before the checkbox
+   */
+  'label-before'?: () => void;
+
+  /**
+   * Custom label content - overrides the label prop
+   */
+  label?: () => void;
+}>();
+
+defineEmits<{
+  /** Emitted when the checkbox value changes */
+  'update:modelValue': [val: boolean];
+}>();
 
 defineProps({
+  /**
+   * The checked state of the checkbox (v-model)
+   */
   modelValue: {
     type: Boolean,
     default: false,
   },
+  /**
+   * Text label for the checkbox
+   * Ignored if using the label slot
+   */
   label: {
     type: String,
     default: '',

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

@@ -31,18 +31,42 @@
 import { isObject } from 'lodash-es';
 import { defineComponent } from 'vue';
 
+/**
+ * A chips component that displays a horizontal list of items with overflow handling.
+ * Automatically calculates how many chips can fit in the available space and shows
+ * an overflow indicator when there are more items than can be displayed.
+ * Supports custom item text properties and before/after slot content.
+ *
+ * @displayName PChips
+ */
 export default defineComponent({
   name: 'PChips',
   props: {
+    /**
+     * Array of items to display as chips.
+     * Can be strings or objects with a text property.
+     */
     items: {
       type: Array,
       default: () => [],
     },
+    /**
+     * Property name to use as the item display text.
+     * Used when items are objects to extract the text value.
+     */
     itemText: {
       type: String,
       default: 'text',
     },
   },
+  /**
+   * Emitted when a chip is clicked.
+   * @param {any} item - The clicked item
+   */
+  /**
+   * Emitted when the overflow indicator is clicked.
+   * Indicates that there are more chips than can be displayed.
+   */
   emits: ['click:chip', 'click:overflow'],
   data() {
     return {

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

@@ -11,13 +11,28 @@
 <script setup lang="ts">
 import { type PropType } from 'vue';
 
+/**
+ * A close button component with different visual variants.
+ * Provides a consistent close button interface with hover effects and accessibility features.
+ * Supports different styling variants for various UI contexts.
+ *
+ * @displayName PCloseBtn
+ */
 defineOptions({
   name: 'PCloseBtn',
 });
 
+/**
+ * Available visual variants for the close button.
+ */
 type Variant = 'transparent' | 'gray' | 'dark';
 
 defineProps({
+  /**
+   * The visual variant of the close button.
+   * Controls the background color and hover effects.
+   * Valid values: 'transparent', 'gray', 'dark'
+   */
   variant: {
     type: String as PropType<Variant>,
     default: 'transparent',

package/squirrel/components/p-date-picker/p-date-picker.vue

@@ -19,14 +19,33 @@ import PInput from '@squirrel/components/p-input/p-input.vue';
 import VueDatePicker, { type VueDatePickerProps } from '@vuepic/vue-datepicker';
 import { computed, useAttrs } from 'vue';
 
+/**
+ * A date picker component that displays a dropdown calendar for date selection.
+ * Wraps VueDatePicker with a custom input field using PInput component.
+ * Supports custom labels, error states, and inherits all VueDatePicker props.
+ *
+ * @displayName PDatePicker
+ */
 defineOptions({
   name: 'PDatePicker',
   inheritAttrs: false,
 });
 
 type Props = {
+  /**
+   * Text label for the date picker field.
+   * Passed to the underlying PInput component.
+   */
   label?: string;
+  /**
+   * Error message to display below the date picker.
+   * Passed to the underlying PInput component and shows error styling.
+   */
   errorMsg?: string;
+  /**
+   * Whether the date picker is required.
+   * Passed to the underlying PInput component and adds visual indicator.
+   */
   required?: boolean;
 } & VueDatePickerProps;
 
@@ -44,6 +63,10 @@ const props = withDefaults(defineProps<Props>(), {
   format: 'dd-MMM-yyyy',
 });
 
+/**
+ * The selected date value (v-model).
+ * Supports two-way binding for form inputs.
+ */
 const model = defineModel<Date | string | null>({ default: '' });
 
 // Data
@@ -70,7 +93,6 @@ const inputPropsAndAttrs = computed(() => {
   return res;
 });
 
-// Methods
 const handleInput = (e: Event, onInputFn: (e: Event) => void, onClearFn: (e: Event) => void) => {
   if (e.target instanceof HTMLInputElement && e.target.value === '') {
     onClearFn(e);