@pequity/squirrel 8.4.4 → 8.4.5

package/README.md

@@ -151,7 +151,8 @@ Commit messages have to follow the commit message format when contributing.
 ---
 
 When adding a new component to the library, please make sure to add unit tests and Storybook stories for it.  
-We strive to maintain a high level of code quality and test coverage in this project.
+All components must be documented with comprehensive JSDoc comments following the `vue-component-meta` standards.
+We strive to maintain a high level of code quality, test coverage, and documentation in this project.
 
 ## Project setup for development
 

package/dist/cjs/chunks/p-alert.js

@@ -15,6 +15,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   },
   __name: "p-alert",
   props: {
+    /**
+     * The type of the alert which determines its appearance and icon
+     */
     type: {
       type: String,
       default: "info",

package/dist/cjs/chunks/p-avatar.js

@@ -12,23 +12,39 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   },
   __name: "p-avatar",
   props: {
+    /**
+     * The shape of the avatar
+     */
     shape: {
       type: String,
       default: "circle",
       validator: (value) => 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/dist/cjs/chunks/p-btn.js

@@ -138,6 +138,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       type: String,
       default: ""
     },
+    /**
+     * The icon to display on the right side of the button
+     */
     iconRight: {
       type: String,
       default: ""

package/dist/cjs/chunks/p-card.js

@@ -6,6 +6,10 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   ...{ name: "PCard" },
   __name: "p-card",
   props: {
+    /**
+     * The title of the card - displayed at the top
+     * If not provided, you can use the title slot instead
+     */
     title: {
       type: String,
       default: ""

package/dist/cjs/chunks/p-dropdown-select.js

@@ -49,6 +49,10 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   },
   __name: "p-dropdown-select",
   props: {
+    /**
+     * The selected value(s) for the dropdown (v-model).
+     * Can be a single value or array of values depending on multiple prop.
+     */
     modelValue: {
       type: [String, Number, Boolean, Array, Object],
       default: null
@@ -70,18 +74,30 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       type: Array,
       default: () => []
     },
+    /**
+     * Label text displayed above the dropdown.
+     */
     label: {
       type: String,
       default: ""
     },
+    /**
+     * Error message to display below the dropdown.
+     */
     errorMsg: {
       type: String,
       default: ""
     },
+    /**
+     * Whether the field is required.
+     */
     required: {
       type: Boolean,
       default: false
     },
+    /**
+     * The size of the dropdown component.
+     */
     size: {
       type: String,
       default: "md",
@@ -118,26 +134,44 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       type: Number,
       default: 7
     },
+    /**
+     * Additional attributes to apply to the dropdown menu.
+     */
     dropdownMenuAttrs: {
       type: Object,
       default: () => ({})
     },
+    /**
+     * CSS classes to apply to the dropdown menu.
+     */
     dropdownMenuClass: {
       type: String,
       default: "overflow-x-hidden"
     },
+    /**
+     * Inline styles to apply to the dropdown menu.
+     */
     dropdownMenuStyle: {
       type: Object,
       default: () => ({})
     },
+    /**
+     * Props to pass to the underlying PDropdown component.
+     */
     pDropdownProps: {
       type: Object,
       default: () => ({})
     },
+    /**
+     * Whether to enable search functionality within the dropdown.
+     */
     searchable: {
       type: Boolean,
       default: false
     },
+    /**
+     * Whether to show a clear button when items are selected.
+     */
     clearable: {
       type: Boolean,
       default: false

package/dist/cjs/chunks/p-input-number.js

@@ -17,22 +17,42 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   },
   __name: "p-input-number",
   props: {
+    /**
+     * The current numeric value of the input (v-model).
+     * Supports two-way binding for form inputs.
+     */
     modelValue: {
       type: [Number, String],
       default: null
     },
+    /**
+     * Text label for the input field.
+     * If not provided, you can use the label slot instead.
+     */
     label: {
       type: String,
       default: ""
     },
+    /**
+     * Error message to display below the input.
+     * When provided, the input will show error styling.
+     */
     errorMsg: {
       type: String,
       default: ""
     },
+    /**
+     * Whether the input is required.
+     * Adds required attribute and visual indicator.
+     */
     required: {
       type: Boolean,
       default: false
     },
+    /**
+     * The size of the input - affects padding, font size, and spacing.
+     * Valid values: 'sm', 'md', 'lg'
+     */
     size: {
       type: String,
       default: "md",
@@ -40,14 +60,26 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         return pBtn_types.SIZES.includes(value);
       }
     },
+    /**
+     * Whether to select all text when the input receives focus.
+     * Provides better UX for number input fields.
+     */
     selectOnClick: {
       type: Boolean,
       default: true
     },
+    /**
+     * Text for the info tooltip displayed next to the label.
+     * Uses PInfoIcon component for consistent tooltip styling.
+     */
     tooltipText: {
       type: String,
       default: ""
     },
+    /**
+     * String to display as prefix in the input field.
+     * Can be overridden by the prefix slot for custom content.
+     */
     prefixString: {
       type: String,
       default: ""

package/dist/cjs/chunks/p-input-percent.js

@@ -1,6 +1,7 @@
 "use strict";
 const vue = require("vue");
 const pInputNumber_vue_vue_type_script_setup_true_lang = require("./p-input-number.js");
+const number = require("../number.js");
 const lodashEs = require("lodash-es");
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   ...{
@@ -8,10 +9,20 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   },
   __name: "p-input-percent",
   props: {
+    /**
+     * The current value (v-model).
+     * Stored as a decimal (0.5 = 50%) but displayed as a percentage.
+     * Supports two-way binding for form inputs.
+     */
     modelValue: {
       type: [Number, String],
       default: null
     },
+    /**
+     * The size of the input field.
+     * Valid values: 'sm', 'md', 'lg'
+     * @values sm, md, lg
+     */
     size: {
       type: String,
       default: "md"
@@ -27,8 +38,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const props = __props;
     const emit = __emit;
     const convertedValue = vue.computed({
-      get: () => lodashEs.isNumber(props.modelValue) ? props.modelValue * 100 : props.modelValue,
-      set: (nV) => emit("update:modelValue", lodashEs.isNumber(nV) ? nV / 100 : nV)
+      get: () => lodashEs.isNumber(props.modelValue) ? props.modelValue * 100 : number.toNumberOrNull(props.modelValue),
+      set: (nV) => emit("update:modelValue", lodashEs.isNumber(nV) ? nV / 100 : number.toNumberOrNull(nV))
     });
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createBlock(pInputNumber_vue_vue_type_script_setup_true_lang._sfc_main, {

package/dist/cjs/chunks/p-input.js

@@ -15,10 +15,18 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   },
   __name: "p-input",
   props: {
+    /**
+     * The current value of the input (v-model).
+     * Supports two-way binding for form inputs.
+     */
     modelValue: {
       type: [String, Number, Boolean, null],
       default: ""
     },
+    /**
+     * The type of the input field.
+     * Valid values: 'text', 'password'
+     */
     type: {
       type: String,
       default: INPUT_TYPES.TEXT,
@@ -26,18 +34,34 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         return Object.values(INPUT_TYPES).includes(value);
       }
     },
+    /**
+     * Text label for the input field.
+     * If not provided, you can use the label slot instead.
+     */
     label: {
       type: String,
       default: ""
     },
+    /**
+     * Error message to display below the input.
+     * When provided, the input will show error styling.
+     */
     errorMsg: {
       type: String,
       default: ""
     },
+    /**
+     * Whether the input is required.
+     * Adds required attribute and visual indicator.
+     */
     required: {
       type: Boolean,
       default: false
     },
+    /**
+     * The size of the input - affects padding, font size, and spacing.
+     * Valid values: 'sm', 'md', 'lg'
+     */
     size: {
       type: String,
       default: "md",
@@ -45,6 +69,10 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         return pBtn_types.SIZES.includes(value);
       }
     },
+    /**
+     * Whether the input has rounded corners.
+     * Applies rounded styling to the input field.
+     */
     rounded: {
       type: Boolean,
       default: false

package/dist/cjs/chunks/p-pagination-info.js

@@ -10,28 +10,32 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "p-pagination-info",
   props: {
     /**
-     * The current page.
+     * The current page number (1-based).
+     * Used to calculate the starting item number in the display range.
      */
     currentPage: {
       type: Number,
       default: 0
     },
     /**
-     * The amount of data pagination iterates through.
+     * The total number of items across all pages.
+     * Used to calculate the total count and ending item number.
      */
     count: {
       type: Number,
       default: 0
     },
     /**
-     * The amount of data to be displayed at 1 page. Used to calculate the `from` and `to` limits.
+     * The number of items displayed per page.
+     * Used to calculate the `from` and `to` limits for the current page.
      */
     pageSize: {
       type: Number,
       default: 0
     },
     /**
-     * Whether the pagination is loading.
+     * Whether the pagination data is loading.
+     * When true, shows a skeleton loader instead of the info text.
      */
     loading: {
       type: Boolean,
@@ -57,7 +61,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         __props.count ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
           vue.createTextVNode("Showing " + vue.toDisplayString(from.value) + " to " + vue.toDisplayString(to.value) + " of " + vue.toDisplayString(__props.count) + " results", 1)
         ], 64)) : vue.renderSlot(_ctx.$slots, "no-results", { key: 1 }, () => [
-          _cache[0] || (_cache[0] = vue.createTextVNode("No results found"))
+          _cache[0] || (_cache[0] = vue.createTextVNode("No results found", -1))
         ])
       ]));
     };

package/dist/cjs/chunks/p-pagination.js

@@ -1,9 +1,8 @@
 "use strict";
 const vue = require("vue");
+const pIcon_vue_vue_type_script_setup_true_lang = require("./p-icon.js");
 const pSkeletonLoader = require("../p-skeleton-loader.js");
 const pagination = require("../pagination.js");
-const _imports_0 = "data:image/svg+xml,%3csvg%20width='8'%20height='12'%20viewBox='0%200%208%2012'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M0.25%205.99968C0.25%205.64968%200.4%205.34968%200.65%205.14968L6.25%200.249681C6.65%20-0.100319%207.2%20-0.0503187%207.55%200.349681C7.85%200.749681%207.85%201.29968%207.45%201.59968L2.55%205.89968C2.5%205.94968%202.5%205.99968%202.55%206.04968L7.45%2010.3497C7.85%2010.6997%207.9%2011.2497%207.55%2011.6497C7.2%2012.0497%206.65%2012.0997%206.25%2011.7497C6.25%2011.7497%206.25%2011.7497%206.2%2011.6997L0.65%206.84968C0.4%206.64968%200.25%206.29968%200.25%205.99968Z'%20fill='%23918da1'%20/%3e%3c/svg%3e";
-const _imports_1 = "data:image/svg+xml,%3csvg%20width='8'%20height='14'%20viewBox='0%200%208%2014'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M7.75695%206.98136C7.75695%207.33136%207.60695%207.63136%207.35695%207.83136L1.75695%2012.7814C1.35695%2013.1314%200.756947%2013.0814%200.456947%2012.6814C0.156947%2012.2814%200.156947%2011.7314%200.556947%2011.3814L5.45695%207.08136C5.50695%207.03136%205.50695%206.98136%205.45695%206.88136L0.556947%202.58136C0.156947%202.23136%200.156947%201.63136%200.506947%201.28136C0.856947%200.931361%201.40695%200.881361%201.80695%201.18136L7.40695%206.08136C7.60695%206.33136%207.75695%206.63136%207.75695%206.98136Z'%20fill='%23918da1'%20/%3e%3c/svg%3e";
 const _hoisted_1 = {
   key: 1,
   class: "flex text-p-gray-40"
@@ -22,35 +21,40 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "p-pagination",
   props: {
     /**
-     * The current page.
+     * The current page number (v-model).
+     * Controls which page is visually active and navigable.
      */
     modelValue: {
       type: Number,
       default: null
     },
     /**
-     * The amount of data pagination should iterate through.
+     * The total amount of items to paginate through.
+     * Used to calculate the total number of pages.
      */
     count: {
       type: Number,
       default: 0
     },
     /**
-     * The amount of data to be displayed at 1 page. Used to calculate the length of pagination.
+     * The number of items to display per page.
+     * Used to calculate the total number of pages.
      */
     pageSize: {
       type: Number,
       default: 10
     },
     /**
-     * The amount of pages to be displayed before and after the current page.
+     * The number of pages to show before and after the current page.
+     * Controls the range of page numbers displayed around the current page.
      */
     pageOffset: {
       type: Number,
       default: 2
     },
     /**
-     * Whether the pagination is loading.
+     * Whether the pagination is in a loading state.
+     * When true, shows a skeleton loader instead of the pagination controls.
      */
     loading: {
       type: Boolean,
@@ -83,9 +87,12 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             class: vue.normalizeClass([BTN_CLASS, Number(__props.modelValue) <= 1 ? ARROW_INACTIVE_CLASS : ARROW_ACTIVE_CLASS]),
             "aria-label": "go to the previous page",
             onClick: _cache[0] || (_cache[0] = ($event) => setPage(Number(__props.modelValue) - 1))
-          }, _cache[2] || (_cache[2] = [
-            vue.createElementVNode("img", { src: _imports_0 }, null, -1)
-          ]), 2),
+          }, [
+            vue.createVNode(pIcon_vue_vue_type_script_setup_true_lang._sfc_main, {
+              icon: "chevron-left",
+              width: "24px"
+            })
+          ], 2),
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(pages.value, (page, index) => {
             return vue.openBlock(), vue.createElementBlock("div", {
               key: index,
@@ -107,9 +114,12 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             class: vue.normalizeClass([BTN_CLASS, __props.modelValue === pageCount.value ? ARROW_INACTIVE_CLASS : ARROW_ACTIVE_CLASS]),
             "aria-label": "go to the next page",
             onClick: _cache[1] || (_cache[1] = ($event) => setPage(Number(__props.modelValue) + 1))
-          }, _cache[3] || (_cache[3] = [
-            vue.createElementVNode("img", { src: _imports_1 }, null, -1)
-          ]), 2)
+          }, [
+            vue.createVNode(pIcon_vue_vue_type_script_setup_true_lang._sfc_main, {
+              icon: "chevron-right",
+              width: "24px"
+            })
+          ], 2)
         ])) : vue.createCommentVNode("", true)
       ], 64);
     };

package/dist/cjs/chunks/p-select-btn.js

@@ -8,7 +8,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   },
   __name: "p-select-btn",
   props: {
-    modelValue: { default: null },
+    modelValue: { type: [String, Number, Boolean, null, Array], default: null },
     items: { default: () => [] },
     itemValue: { default: "value" },
     itemText: { default: "text" },
@@ -56,6 +56,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           return index !== -1;
         }
       }
+      return false;
     };
     return (_ctx, _cache) => {
       const _directive_tooltip = vue.resolveDirective("tooltip");

package/dist/cjs/chunks/p-select.js

@@ -13,26 +13,51 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   },
   __name: "p-select",
   props: {
+    /**
+     * The current selected value (v-model).
+     * Supports two-way binding for form inputs.
+     */
     modelValue: {
       type: [String, Number, Boolean, null],
       default: ""
     },
+    /**
+     * Array of objects representing the select options.
+     * Each object should have properties specified by itemText and itemValue.
+     * @example [{ text: 'Option 1', value: 1 }, { text: 'Option 2', value: 2 }]
+     */
     items: {
       type: Array,
       default: () => []
     },
+    /**
+     * Text label for the select field.
+     * If not provided, you can use the label slot instead.
+     */
     label: {
       type: String,
       default: ""
     },
+    /**
+     * Error message to display below the select.
+     * When provided, the select will show error styling.
+     */
     errorMsg: {
       type: String,
       default: ""
     },
+    /**
+     * Whether the select is required.
+     * Adds required attribute and visual indicator.
+     */
     required: {
       type: Boolean,
       default: false
     },
+    /**
+     * The size of the select - affects padding, font size, and spacing.
+     * Valid values: 'sm', 'md', 'lg'
+     */
     size: {
       type: String,
       default: "md",
@@ -40,10 +65,18 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         return pBtn_types.SIZES.includes(value);
       }
     },
+    /**
+     * Property name to use as the display text for each option.
+     * Defaults to 'text' - each item should have this property.
+     */
     itemText: {
       type: String,
       default: "text"
     },
+    /**
+     * Property name to use as the value for each option.
+     * Defaults to 'value' - each item should have this property.
+     */
     itemValue: {
       type: [String, Number, Boolean, null],
       default: "value"

package/dist/cjs/chunks/p-table-loader.js

@@ -15,22 +15,42 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   },
   __name: "p-table-loader",
   props: {
+    /**
+     * The number of rows to display in the skeleton table.
+     * Controls the vertical size of the loading placeholder.
+     */
     rows: {
       type: [Number, String],
       default: 4
     },
+    /**
+     * The number of columns to display in the skeleton table.
+     * Controls the horizontal size of the loading placeholder.
+     */
     columns: {
       type: [Number, String],
       default: 6
     },
+    /**
+     * CSS classes to apply to each table cell.
+     * Allows customization of cell padding and styling.
+     */
     tdClasses: {
       type: String,
       default: "px-4 py-5"
     },
+    /**
+     * CSS classes to apply to the skeleton loader within each cell.
+     * Controls the height and appearance of individual skeleton elements.
+     */
     tdSkeletonClasses: {
       type: String,
       default: "h-5"
     },
+    /**
+     * Whether to display subheaders in the table header.
+     * Adds an additional row below the main header for more complex table structures.
+     */
     withSubheader: {
       type: Boolean,
       default: false

package/dist/cjs/chunks/p-tabs.js

@@ -8,14 +8,26 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   },
   __name: "p-tabs",
   props: {
+    /**
+     * Array of tab objects to display.
+     * Each tab should have a name, title, and optional icon and route.
+     */
     tabs: {
       type: Array,
       required: true
     },
+    /**
+     * The currently active tab name.
+     * Controls which tab is visually highlighted.
+     */
     activeTab: {
       type: String,
       required: true
     },
+    /**
+     * Left padding for the tabs container in pixels.
+     * Useful for aligning tabs with other content.
+     */
     tabsLeftPadding: {
       type: Number,
       default: 0

package/dist/cjs/chunks/p-textarea.js

@@ -11,22 +11,42 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   },
   __name: "p-textarea",
   props: {
+    /**
+     * The current value of the textarea (v-model).
+     * Supports two-way binding for form inputs.
+     */
     modelValue: {
       type: [String, Number, null],
       default: ""
     },
+    /**
+     * Text label for the textarea field.
+     * If not provided, you can use the label slot instead.
+     */
     label: {
       type: String,
       default: ""
     },
+    /**
+     * Error message to display below the textarea.
+     * When provided, the textarea will show error styling.
+     */
     errorMsg: {
       type: String,
       default: ""
     },
+    /**
+     * Whether the textarea is required.
+     * Adds required attribute and visual indicator.
+     */
     required: {
       type: Boolean,
       default: false
     },
+    /**
+     * The size of the textarea - affects padding, font size, and spacing.
+     * Valid values: 'sm', 'md', 'lg'
+     */
     size: {
       type: String,
       default: "md",