@pequity/squirrel 8.4.4 → 8.5.0

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

@@ -11,10 +11,18 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   },
   __name: "p-input-search",
   props: {
+    /**
+     * The search query value (v-model).
+     * Controls the input field content and visibility of the clear button.
+     */
     modelValue: {
       type: String,
       default: ""
     },
+    /**
+     * The size of the search input.
+     * Affects the overall dimensions and icon positioning.
+     */
     size: {
       type: String,
       default: "md",
@@ -22,6 +30,10 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         return pBtn_types.SIZES.includes(value);
       }
     },
+    /**
+     * Whether to show the enter key icon when the input is focused.
+     * Provides visual feedback that pressing enter will trigger a search.
+     */
     showEnterIcon: {
       type: Boolean,
       default: false
@@ -115,5 +127,5 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const PInputSearch = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-0e51ff56"]]);
+const PInputSearch = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-ce44730a"]]);
 module.exports = PInputSearch;

package/dist/cjs/p-loading.js

@@ -10,7 +10,7 @@ const _hoisted_1$1 = {
   viewBox: "0 0 24 24"
 };
 function render(_ctx, _cache) {
-  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1, _cache[0] || (_cache[0] = [
+  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1, [..._cache[0] || (_cache[0] = [
     vue.createElementVNode("path", {
       fill: "currentColor",
       d: "M12 1a11 11 0 1 0 11 11A11 11 0 0 0 12 1m0 19a8 8 0 1 1 8-8 8 8 0 0 1-8 8",
@@ -28,7 +28,7 @@ function render(_ctx, _cache) {
         values: "0 12 12;360 12 12"
       })
     ], -1)
-  ]));
+  ])]);
 }
 const PLoadingSpinner = { render };
 const _hoisted_1 = {
@@ -116,5 +116,5 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const pLoading = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-9ad56d4f"]]);
+const pLoading = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-7e116004"]]);
 module.exports = pLoading;

package/dist/cjs/p-modal.js

@@ -26,82 +26,162 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   },
   __name: "p-modal",
   props: {
+    /**
+     * Unique name for the modal when using the modal service.
+     * Used for programmatic control of the modal.
+     */
     name: {
       type: String,
       default: ""
     },
+    /**
+     * Title displayed in the modal header.
+     * Used for accessibility and visual identification.
+     */
     title: {
       type: String,
       default: ""
     },
+    /**
+     * Base z-index for the modal.
+     * Higher values ensure the modal appears above other content.
+     */
     baseZindex: {
       type: Number,
       default: 1051
     },
+    /**
+     * CSS classes for the backdrop element.
+     * Controls the appearance of the modal overlay.
+     */
     bgClass: {
       type: [String, Object, Array],
       default: "fixed bottom-0 left-0 right-0 top-0 bg-black/20"
     },
+    /**
+     * CSS classes for the modal wrapper element.
+     * Controls the positioning and layout of the modal container.
+     */
     wrapperClass: {
       type: [String, Object, Array],
       default: "fixed bottom-0 left-0 right-0 top-0 flex flex-col items-center justify-center overflow-y-auto overflow-x-hidden outline-none"
     },
+    /**
+     * Base CSS classes for the modal content.
+     * Controls the appearance of the modal dialog itself.
+     */
     modalBaseClass: {
       type: [String, Object, Array],
-      default: "pm relative flex flex-col rounded-2xl pb-6 cursor-default bg-surface shadow-xl"
+      default: "pm relative flex flex-col rounded-2xl cursor-default bg-surface shadow-xl"
     },
+    /**
+     * Additional CSS classes for the modal content.
+     * Merged with modalBaseClass for custom styling.
+     */
     modalClass: {
       type: [String, Object, Array],
       default: ""
     },
+    /**
+     * Inline styles for the modal content.
+     * Applied directly to the modal element.
+     */
     modalStyle: {
       type: [String, Object, Array],
       default: ""
     },
+    /**
+     * CSS class for the modal entrance animation.
+     * Controls how the modal appears.
+     */
     inClass: {
       type: String,
       default: "slideInTop"
     },
+    /**
+     * CSS class for the modal exit animation.
+     * Controls how the modal disappears.
+     */
     outClass: {
       type: String,
       default: "slideOutTop"
     },
+    /**
+     * CSS class for the backdrop entrance animation.
+     * Controls how the backdrop appears.
+     */
     bgInClass: {
       type: String,
       default: "fadeIn"
     },
+    /**
+     * CSS class for the backdrop exit animation.
+     * Controls how the backdrop disappears.
+     */
     bgOutClass: {
       type: String,
       default: "fadeOut"
     },
+    /**
+     * Target element to append the modal to.
+     * Usually 'body' for proper z-index stacking.
+     */
     appendTo: {
       type: String,
       default: "body"
     },
+    /**
+     * Whether the modal should be mounted immediately.
+     * Useful for modals that are always present in the DOM.
+     */
     live: {
       type: Boolean,
       default: false
     },
+    /**
+     * Whether the modal can be closed by user interaction.
+     * Controls close button visibility and backdrop click behavior.
+     */
     enableClose: {
       type: Boolean,
       default: true
     },
+    /**
+     * Controls the visibility of the modal (v-model).
+     * Supports two-way binding for modal state.
+     */
     modelValue: {
       type: Boolean,
       default: false
     },
+    /**
+     * Accessibility label for the close button.
+     * Used by screen readers for better accessibility.
+     */
     closeLabel: {
       type: String,
       default: "Close"
     },
+    /**
+     * Whether the modal content is disabled.
+     * Prevents user interaction with modal content.
+     */
     disabled: {
       type: Boolean,
       default: false
     },
+    /**
+     * Error message to display in the modal.
+     * Shows an error alert above the modal content.
+     */
     errorMsg: {
       type: String,
       default: ""
     },
+    /**
+     * Maximum width of the modal.
+     * Controls the responsive behavior of the modal.
+     */
     maxWidth: {
       type: String,
       default: "500px"
@@ -110,7 +190,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   emits: ["before-open", "opening", "opened", "before-close", "closing", "closed", "update:modelValue", "click:overlay"],
   setup(__props, { emit: __emit }) {
     vue.useCssVars((_ctx) => ({
-      "29225c6f": __props.maxWidth
+      "a8364442": __props.maxWidth
     }));
     let animatingZIndex = 0;
     const emit = __emit;
@@ -310,49 +390,51 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
               vue.createElementVNode("div", {
                 ref: "pm",
                 "data-pm-id": id.value,
-                class: vue.normalizeClass([__props.modalBaseClass, __props.modalClass]),
+                class: vue.normalizeClass([__props.modalBaseClass, __props.modalClass, { "pb-6": !_ctx.$slots["modal-wrapper"] }]),
                 style: vue.normalizeStyle(__props.modalStyle)
               }, [
-                vue.renderSlot(_ctx.$slots, "title-wrapper", {}, () => [
-                  vue.createElementVNode("div", _hoisted_4, [
-                    __props.title ? (vue.openBlock(), vue.createElementBlock("h3", {
-                      key: 0,
-                      id: `${id.value}-title`,
-                      class: "mr-auto pt-4 text-xl font-semibold"
-                    }, vue.toDisplayString(__props.title), 9, _hoisted_5)) : vue.createCommentVNode("", true),
-                    vue.createElementVNode("div", _hoisted_6, [
-                      vue.createVNode(pCloseBtn, {
-                        disabled: __props.disabled,
-                        class: vue.normalizeClass({ invisible: !__props.enableClose }),
-                        "aria-label": __props.closeLabel,
-                        onClick: vue.withModifiers(close, ["prevent"])
-                      }, null, 8, ["disabled", "class", "aria-label"])
+                vue.renderSlot(_ctx.$slots, "modal-wrapper", {}, () => [
+                  vue.renderSlot(_ctx.$slots, "title-wrapper", {}, () => [
+                    vue.createElementVNode("div", _hoisted_4, [
+                      __props.title ? (vue.openBlock(), vue.createElementBlock("h3", {
+                        key: 0,
+                        id: `${id.value}-title`,
+                        class: "mr-auto pt-4 text-xl font-semibold"
+                      }, vue.toDisplayString(__props.title), 9, _hoisted_5)) : vue.createCommentVNode("", true),
+                      vue.createElementVNode("div", _hoisted_6, [
+                        vue.createVNode(pCloseBtn, {
+                          disabled: __props.disabled,
+                          class: vue.normalizeClass({ invisible: !__props.enableClose }),
+                          "aria-label": __props.closeLabel,
+                          onClick: vue.withModifiers(close, ["prevent"])
+                        }, null, 8, ["disabled", "class", "aria-label"])
+                      ])
                     ])
-                  ])
-                ], true),
-                __props.errorMsg ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, [
-                  vue.createVNode(pAlert_vue_vue_type_script_setup_true_lang._sfc_main, { type: "error" }, {
-                    default: vue.withCtx(() => [
-                      vue.createTextVNode(vue.toDisplayString(__props.errorMsg), 1)
-                    ]),
-                    _: 1
-                  })
-                ])) : vue.createCommentVNode("", true),
-                vue.renderSlot(_ctx.$slots, "content-wrapper", {}, () => [
-                  vue.createElementVNode("div", {
-                    id: `${id.value}-content`,
-                    class: vue.normalizeClass([
-                      "relative grow overflow-y-auto overflow-x-hidden px-8",
-                      { "pointer-events-none opacity-50": __props.disabled }
-                    ])
-                  }, [
-                    vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
-                  ], 10, _hoisted_8)
-                ], true),
-                vue.renderSlot(_ctx.$slots, "footer-wrapper", {}, () => [
-                  _ctx.$slots.footer ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_9, [
-                    vue.renderSlot(_ctx.$slots, "footer", {}, void 0, true)
-                  ])) : vue.createCommentVNode("", true)
+                  ], true),
+                  __props.errorMsg ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, [
+                    vue.createVNode(pAlert_vue_vue_type_script_setup_true_lang._sfc_main, { type: "error" }, {
+                      default: vue.withCtx(() => [
+                        vue.createTextVNode(vue.toDisplayString(__props.errorMsg), 1)
+                      ]),
+                      _: 1
+                    })
+                  ])) : vue.createCommentVNode("", true),
+                  vue.renderSlot(_ctx.$slots, "content-wrapper", {}, () => [
+                    vue.createElementVNode("div", {
+                      id: `${id.value}-content`,
+                      class: vue.normalizeClass([
+                        "relative grow overflow-y-auto overflow-x-hidden px-8",
+                        { "pointer-events-none opacity-50": __props.disabled }
+                      ])
+                    }, [
+                      vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
+                    ], 10, _hoisted_8)
+                  ], true),
+                  vue.renderSlot(_ctx.$slots, "footer-wrapper", {}, () => [
+                    _ctx.$slots.footer ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_9, [
+                      vue.renderSlot(_ctx.$slots, "footer", {}, void 0, true)
+                    ])) : vue.createCommentVNode("", true)
+                  ], true)
                 ], true)
               ], 14, _hoisted_3)
             ], 46, _hoisted_2), [
@@ -365,5 +447,5 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const pModal = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-a511ac01"]]);
+const pModal = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-5c370dbc"]]);
 module.exports = pModal;

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

@@ -15,26 +15,51 @@ const getOffsetValues = (container) => {
 const _sfc_main = vue.defineComponent({
   name: "PSelectPill",
   props: {
+    /**
+     * The currently selected value (v-model).
+     * Should match one of the item values in the items array.
+     */
     modelValue: {
       type: [String, Number],
       default: ""
     },
+    /**
+     * Array of options to display as pills.
+     * Each option should have text, value, and optional subtext and disabled properties.
+     */
     items: {
       type: Array,
       default: () => []
     },
+    /**
+     * Property name to use as the item display text.
+     * Used for button label content.
+     */
     itemText: {
       type: String,
       default: "text"
     },
+    /**
+     * Property name to use as the item subtext.
+     * Displayed below the main text when provided.
+     */
     itemSubtext: {
       type: String,
       default: "subtext"
     },
+    /**
+     * Property name to use as the item value.
+     * Used for selection comparison and v-model binding.
+     */
     itemValue: {
       type: [String, Number],
       default: "value"
     },
+    /**
+     * The size of the pill buttons.
+     * Valid values: 'sm', 'md', 'lg'
+     * @values sm, md, lg
+     */
     size: {
       type: String,
       default: "md",
@@ -43,7 +68,13 @@ const _sfc_main = vue.defineComponent({
       }
     }
   },
-  emits: ["update:modelValue"],
+  emits: {
+    /**
+     * Emitted when the selected value changes.
+     * @param {string | number} value - The new selected value
+     */
+    "update:modelValue": (value) => true
+  },
   data() {
     return {
       SIZES,
@@ -70,7 +101,10 @@ const _sfc_main = vue.defineComponent({
   methods: {
     click(e, option) {
       if (!option.disabled) {
-        this.$emit("update:modelValue", option[this.itemValue]);
+        const value = option[this.itemValue];
+        if (typeof value === "string" || typeof value === "number") {
+          this.$emit("update:modelValue", value);
+        }
       }
     },
     setPillStyle() {

package/dist/cjs/p-skeleton-loader.js

@@ -18,6 +18,10 @@ const hexToRgb = (hex) => `${hex.match(/\w\w/g)?.map((x) => +`0x${x}`)}`;
 const _sfc_main = vue.defineComponent({
   name: "PSkeletonLoader",
   props: {
+    /**
+     * The shape type of the skeleton loader.
+     * Determines the border radius and overall appearance.
+     */
     type: {
       type: String,
       default: LOADER_TYPES.rectangle,
@@ -25,14 +29,26 @@ const _sfc_main = vue.defineComponent({
         return Object.values(LOADER_TYPES).includes(value);
       }
     },
+    /**
+     * The background CSS class for the skeleton loader.
+     * Controls the base color of the loading placeholder.
+     */
     bgClass: {
       type: String,
       default: "bg-p-gray-30"
     },
+    /**
+     * Additional CSS classes to apply to the loader.
+     * Allows for custom styling beyond the default type-based classes.
+     */
     cssClass: {
       type: String,
       default: ""
     },
+    /**
+     * The color of the shimmer effect in hex format.
+     * Controls the color of the animated shimmer overlay.
+     */
     shimmerColor: {
       type: String,
       default: SHIMMER_COLOR
@@ -66,5 +82,5 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
   ], 2);
 }
-const PSkeletonLoader = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-3d77f34f"]]);
+const PSkeletonLoader = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-1beaf57b"]]);
 module.exports = PSkeletonLoader;

package/dist/cjs/p-table-filter-icon.js

@@ -8,6 +8,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   },
   __name: "p-table-filter-icon",
   props: {
+    /**
+     * Whether the filter icon is active (filtered state).
+     */
     active: {
       type: Boolean,
       default: false
@@ -21,5 +24,5 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const PTableFilterIcon = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-84864117"]]);
+const PTableFilterIcon = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-5c047926"]]);
 module.exports = PTableFilterIcon;

package/dist/cjs/p-table-header-cell.js

@@ -3,7 +3,7 @@ const pInfoIcon_vue_vue_type_script_setup_true_lang = require("./chunks/p-info-i
 const pTableFilterIcon = require("./p-table-filter-icon.js");
 const vue = require("vue");
 const _pluginVue_exportHelper = require("./chunks/_plugin-vue_export-helper.js");
-const DEFAULT_CLASSES = `text-xs leading-5 font-semibold truncate shrink`;
+const DEFAULT_CLASSES = `text-xs leading-5 font-semibold line-clamp-2 break-words hyphens-auto whitespace-normal max-h-10 shrink`;
 const _sfc_main = vue.defineComponent({
   name: "PTableHeaderCell",
   components: {
@@ -11,31 +11,60 @@ const _sfc_main = vue.defineComponent({
     PInfoIcon: pInfoIcon_vue_vue_type_script_setup_true_lang._sfc_main
   },
   props: {
+    /**
+     * The text content to display in the header cell.
+     * Also used as the title attribute for accessibility.
+     */
     text: {
       type: String,
       default: ""
     },
+    /**
+     * CSS classes to apply to the text element.
+     * Can be a string, object, or array for flexible styling.
+     */
     textClass: {
       type: [String, Object, Array],
       default: "text-left"
     },
+    /**
+     * Whether the filter icon is in an active state.
+     * Controls the visual appearance of the filter icon and text color.
+     */
     filterActive: {
       type: Boolean,
       default: false
     },
+    /**
+     * Whether to show the filter icon.
+     * When false, the filter icon is hidden regardless of other states.
+     */
     showFilterIcon: {
       type: Boolean,
       default: false
     },
+    /**
+     * Tooltip text to display when hovering over the info icon.
+     * When provided, shows an info icon with the tooltip content.
+     */
     tooltipText: {
       type: String,
       default: ""
     },
+    /**
+     * Custom text color to apply to the header text.
+     * Overrides the default text color when provided.
+     */
     textColor: {
       type: String,
       default: ""
     }
   },
+  /**
+   * Emitted when the filter icon is clicked.
+   * @param {Event} event - The click event
+   * @param {boolean} filterActive - The current filter active state
+   */
   emits: ["click-filter-icon"],
   data() {
     return {
@@ -69,7 +98,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     vue.createElementVNode("div", {
       class: vue.normalizeClass([_ctx.DEFAULT_CLASSES, _ctx.textClass, _ctx.textColorClass, { "mr-auto": !_ctx.tooltipText }]),
       style: vue.normalizeStyle(_ctx.style),
-      title: _ctx.text
+      title: _ctx.text,
+      "data-p-table-header-text": ""
     }, vue.toDisplayString(_ctx.text), 15, _hoisted_2),
     _ctx.tooltipText ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
       _ctx.tooltipText ? (vue.openBlock(), vue.createBlock(_component_PInfoIcon, {

package/dist/cjs/p-table-td.js

@@ -82,5 +82,5 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const PTableTd = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-c9978e26"]]);
+const PTableTd = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-9a0c95c7"]]);
 module.exports = PTableTd;

package/dist/cjs/p-table.js

@@ -5,6 +5,8 @@ const isFirstColFixedInjectionKey = Symbol("isFirstColFixed");
 const isLastColFixedInjectionKey = Symbol("isLastColFixed");
 const isColsResizableInjectionKey = Symbol("isColsResizable");
 const MIN_WIDTH_COL_RESIZE = 80;
+const HEADER_CELL_ONE_LINE_HEIGHT = 20;
+exports.HEADER_CELL_ONE_LINE_HEIGHT = HEADER_CELL_ONE_LINE_HEIGHT;
 exports.MIN_WIDTH_COL_RESIZE = MIN_WIDTH_COL_RESIZE;
 exports.colsInjectionKey = colsInjectionKey;
 exports.isColsResizableInjectionKey = isColsResizableInjectionKey;

package/dist/cjs/p-toggle.js

@@ -35,22 +35,43 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   },
   __name: "p-toggle",
   props: {
+    /**
+     * The current toggle state (v-model).
+     * Supports two-way binding for form inputs.
+     */
     modelValue: {
       type: Boolean,
       default: false
     },
+    /**
+     * Text label for the toggle switch.
+     * If not provided, you can use the label slot instead.
+     */
     label: {
       type: String,
       default: ""
     },
+    /**
+     * Error message to display below the toggle.
+     * When provided, the toggle will show error styling.
+     */
     errorMsg: {
       type: String,
       default: ""
     },
+    /**
+     * Whether the toggle is required.
+     * Adds required attribute and visual indicator.
+     */
     required: {
       type: Boolean,
       default: false
     },
+    /**
+     * The size of the toggle switch.
+     * Valid values: 'sm', 'md', 'lg'
+     * @values sm, md, lg
+     */
     size: {
       type: String,
       default: "md",
@@ -123,5 +144,5 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const pToggle = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-c544a8a9"]]);
+const pToggle = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-af725f56"]]);
 module.exports = pToggle;

package/dist/cjs/usePTableHeaderWrap.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const pTable = require("./p-table.js");
+const vue = require("vue");
+const usePTableHeaderWrap = (theadRef) => {
+  let headerObserver = null;
+  const hasWrap = vue.ref(false);
+  const setupObserver = () => {
+    if (!theadRef.value) return;
+    headerObserver = new ResizeObserver(() => {
+      if (theadRef.value) {
+        const textDivs = theadRef.value.querySelectorAll("[data-p-table-header-text]");
+        for (const div of textDivs) {
+          if (div.offsetHeight > pTable.HEADER_CELL_ONE_LINE_HEIGHT) {
+            hasWrap.value = true;
+            return;
+          }
+        }
+        hasWrap.value = false;
+      }
+    });
+    headerObserver.observe(theadRef.value);
+  };
+  const cleanupObserver = () => {
+    if (headerObserver) {
+      headerObserver.disconnect();
+      headerObserver = null;
+    }
+  };
+  vue.onMounted(() => {
+    setupObserver();
+  });
+  vue.onBeforeUnmount(() => {
+    cleanupObserver();
+  });
+  return { hasWrap };
+};
+exports.usePTableHeaderWrap = usePTableHeaderWrap;