@pequity/squirrel 8.4.4 → 8.5.0

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

@@ -1,12 +1,11 @@
 import { defineComponent, createElementBlock, openBlock, normalizeClass, createElementVNode, renderSlot, createVNode } from "vue";
 import { _ as _sfc_main$1 } from "./p-icon.js";
-const _hoisted_1 = { class: "flex" };
-const _hoisted_2 = { class: "pr-2" };
+const _hoisted_1 = { class: "flex items-center gap-4" };
 const ALERT_TYPES = {
-  info: { classes: `bg-info text-on-info`, icon: "streamline:information-circle-solid" },
-  warning: { classes: `bg-warning text-on-warning`, icon: "streamline:warning-triangle-solid" },
-  error: { classes: `bg-error text-on-error`, icon: "streamline:warning-octagon-solid" },
-  success: { classes: `bg-success text-on-success`, icon: "streamline:check-square-solid" }
+  info: { classes: `bg-info text-on-info`, icon: "material-symbols:info-outline" },
+  warning: { classes: `bg-warning text-on-warning`, icon: "warning" },
+  error: { classes: `bg-error text-on-error`, icon: "cancel-circle" },
+  success: { classes: `bg-success text-on-success`, icon: "ok-circle" }
 };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
@@ -14,6 +13,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   __name: "p-alert",
   props: {
+    /**
+     * The type of the alert which determines its appearance and icon
+     */
     type: {
       type: String,
       default: "info",
@@ -26,19 +28,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const props = __props;
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["rounded p-4 text-xs font-semibold", ALERT_TYPES[props.type].classes]),
+        class: normalizeClass(["rounded-lg p-4 text-xs font-semibold", ALERT_TYPES[props.type].classes]),
         role: "alert"
       }, [
         createElementVNode("div", _hoisted_1, [
-          createElementVNode("div", _hoisted_2, [
-            renderSlot(_ctx.$slots, "icon", {}, () => [
-              createVNode(_sfc_main$1, {
-                icon: ALERT_TYPES[props.type].icon,
-                width: "16",
-                class: "-mb-0.5",
-                inline: ""
-              }, null, 8, ["icon"])
-            ])
+          renderSlot(_ctx.$slots, "icon", {}, () => [
+            createVNode(_sfc_main$1, {
+              icon: ALERT_TYPES[props.type].icon,
+              width: "20"
+            }, null, 8, ["icon"])
           ]),
           createElementVNode("div", null, [
             renderSlot(_ctx.$slots, "default")

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

@@ -11,23 +11,39 @@ const _sfc_main = /* @__PURE__ */ 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/es/chunks/p-btn.js

@@ -4,7 +4,7 @@ import { _ as _sfc_main$1 } from "./p-icon.js";
 import { _ as _sfc_main$2 } from "./p-ring-loader.js";
 import { isExternalLink } from "../link.js";
 import { sanitizeUrl } from "../sanitization.js";
-import { c as ce } from "./index.js";
+import { T } from "./index.js";
 const _hoisted_1 = { class: "slot-wrapper empty:hidden" };
 const btnClasses = {
   slots: {
@@ -68,7 +68,7 @@ const btnClasses = {
     size: "md"
   }
 };
-const btn = ce(btnClasses);
+const btn = T(btnClasses);
 const BUTTON_TYPES = Object.keys(btnClasses.variants.type);
 const BUTTON_NATIVE_TYPES = ["button", "submit", "reset"];
 const LOADER_SIZES = { sm: 24, md: 30, lg: 40 };
@@ -137,6 +137,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       type: String,
       default: ""
     },
+    /**
+     * The icon to display on the right side of the button
+     */
     iconRight: {
       type: String,
       default: ""

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

@@ -5,6 +5,10 @@ const _sfc_main = /* @__PURE__ */ 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/es/chunks/p-dropdown-select.js

@@ -48,6 +48,10 @@ const _sfc_main = /* @__PURE__ */ 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
@@ -69,18 +73,30 @@ const _sfc_main = /* @__PURE__ */ 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",
@@ -117,26 +133,44 @@ const _sfc_main = /* @__PURE__ */ 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/es/chunks/p-input-number.js

@@ -16,22 +16,42 @@ const _sfc_main = /* @__PURE__ */ 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",
@@ -39,14 +59,26 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         return 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/es/chunks/p-input-percent.js

@@ -1,5 +1,6 @@
 import { defineComponent, computed, createBlock, openBlock, withCtx, createElementVNode, normalizeClass } from "vue";
 import { _ as _sfc_main$1 } from "./p-input-number.js";
+import { toNumberOrNull } from "../number.js";
 import { isNumber } from "lodash-es";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
@@ -7,10 +8,20 @@ const _sfc_main = /* @__PURE__ */ 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"
@@ -26,8 +37,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emit = __emit;
     const convertedValue = computed({
-      get: () => isNumber(props.modelValue) ? props.modelValue * 100 : props.modelValue,
-      set: (nV) => emit("update:modelValue", isNumber(nV) ? nV / 100 : nV)
+      get: () => isNumber(props.modelValue) ? props.modelValue * 100 : toNumberOrNull(props.modelValue),
+      set: (nV) => emit("update:modelValue", isNumber(nV) ? nV / 100 : toNumberOrNull(nV))
     });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(_sfc_main$1, {
@@ -38,9 +49,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         prefix: withCtx(() => [
           createElementVNode("div", {
             class: normalizeClass(["absolute flex items-center", prefixClasses[__props.size]])
-          }, _cache[1] || (_cache[1] = [
+          }, [..._cache[1] || (_cache[1] = [
             createElementVNode("div", null, "%", -1)
-          ]), 2)
+          ])], 2)
         ]),
         _: 1
       }, 8, ["modelValue", "size"]);

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

@@ -14,10 +14,18 @@ const _sfc_main = /* @__PURE__ */ 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,
@@ -25,18 +33,34 @@ const _sfc_main = /* @__PURE__ */ 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",
@@ -44,6 +68,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         return SIZES.includes(value);
       }
     },
+    /**
+     * Whether the input has rounded corners.
+     * Applies rounded styling to the input field.
+     */
     rounded: {
       type: Boolean,
       default: false

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

@@ -9,28 +9,32 @@ const _sfc_main = /* @__PURE__ */ 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,
@@ -56,7 +60,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         __props.count ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
           createTextVNode("Showing " + toDisplayString(from.value) + " to " + toDisplayString(to.value) + " of " + toDisplayString(__props.count) + " results", 1)
         ], 64)) : renderSlot(_ctx.$slots, "no-results", { key: 1 }, () => [
-          _cache[0] || (_cache[0] = createTextVNode("No results found"))
+          _cache[0] || (_cache[0] = createTextVNode("No results found", -1))
         ])
       ]));
     };

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

@@ -1,8 +1,7 @@
-import { defineComponent, computed, createElementBlock, openBlock, Fragment, createBlock, createCommentVNode, createElementVNode, normalizeClass, renderList, toDisplayString } from "vue";
+import { defineComponent, computed, createElementBlock, openBlock, Fragment, createBlock, createCommentVNode, createElementVNode, normalizeClass, createVNode, renderList, toDisplayString } from "vue";
+import { _ as _sfc_main$1 } from "./p-icon.js";
 import PSkeletonLoader from "../p-skeleton-loader.js";
 import { createPagingRange } from "../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"
@@ -21,35 +20,40 @@ const _sfc_main = /* @__PURE__ */ 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,
@@ -82,9 +86,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             class: 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] = [
-            createElementVNode("img", { src: _imports_0 }, null, -1)
-          ]), 2),
+          }, [
+            createVNode(_sfc_main$1, {
+              icon: "chevron-left",
+              width: "24px"
+            })
+          ], 2),
           (openBlock(true), createElementBlock(Fragment, null, renderList(pages.value, (page, index) => {
             return openBlock(), createElementBlock("div", {
               key: index,
@@ -106,9 +113,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             class: 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] = [
-            createElementVNode("img", { src: _imports_1 }, null, -1)
-          ]), 2)
+          }, [
+            createVNode(_sfc_main$1, {
+              icon: "chevron-right",
+              width: "24px"
+            })
+          ], 2)
         ])) : createCommentVNode("", true)
       ], 64);
     };

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

@@ -7,7 +7,7 @@ const _sfc_main = /* @__PURE__ */ 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" },
@@ -55,6 +55,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           return index !== -1;
         }
       }
+      return false;
     };
     return (_ctx, _cache) => {
       const _directive_tooltip = resolveDirective("tooltip");

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

@@ -12,26 +12,51 @@ const _sfc_main = /* @__PURE__ */ 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",
@@ -39,10 +64,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         return 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/es/chunks/p-table-loader.js

@@ -14,22 +14,42 @@ const _sfc_main = /* @__PURE__ */ 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