@pequity/squirrel 8.4.3 → 8.4.5

package/squirrel/components/p-table-header-cell/p-table-header-cell.vue

@@ -25,6 +25,13 @@ import { defineComponent } from 'vue';
 
 const DEFAULT_CLASSES = `text-xs leading-5 font-semibold truncate shrink`;
 
+/**
+ * A table header cell component that displays text with optional tooltip and filter icon.
+ * Provides consistent styling for table headers with support for custom text colors,
+ * tooltips, and filter functionality.
+ *
+ * @displayName PTableHeaderCell
+ */
 export default defineComponent({
   name: 'PTableHeaderCell',
   components: {
@@ -32,31 +39,60 @@ export default defineComponent({
     PInfoIcon,
   },
   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 {

package/squirrel/components/p-table-loader/p-table-loader.vue

@@ -25,27 +25,55 @@
 <script setup lang="ts">
 import PSkeletonLoader from '@squirrel/components/p-skeleton-loader/p-skeleton-loader.vue';
 
+/**
+ * A table skeleton loader component that displays a loading placeholder for table data.
+ * Renders a complete table structure with skeleton loaders for headers and data cells.
+ * Supports customizable dimensions, styling, and optional subheaders to match
+ * the expected table layout during loading states.
+ *
+ * @displayName PTableLoader
+ */
 defineOptions({
   name: 'PTableLoader',
 });
 
 defineProps({
+  /**
+   * 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/squirrel/components/p-table-sort/p-table-sort.vue

@@ -59,13 +59,31 @@
 import { SORTING_TYPES, type SortingType } from '@squirrel/components/p-table-sort/p-table-sort.config';
 import { type PropType } from 'vue';
 
+/**
+ * A table sorting component that provides ascending, descending, and no-sorting options.
+ * Displays sort options with visual indicators and allows clearing the sort state.
+ * Used for table column sorting functionality.
+ *
+ * @displayName PTableSort
+ */
 defineOptions({
   name: 'PTableSort',
 });
 
-defineEmits(['update:modelValue']);
+defineEmits<{
+  /**
+   * Emitted when the sorting state changes.
+   * @param {SortingType} value - The new sorting state
+   */
+  'update:modelValue': [value: SortingType];
+}>();
 
 defineProps({
+  /**
+   * The current sorting state (v-model).
+   * Valid values: 'asc', 'desc', 'no-sorting'
+   * Controls which sort option is visually active.
+   */
   modelValue: {
     type: String as PropType<SortingType>,
     default: SORTING_TYPES.NO_SORTING,

package/squirrel/components/p-table-td/p-table-td.vue

@@ -22,11 +22,31 @@ import {
 } from '@squirrel/components/p-table/p-table.types';
 import { computed, inject, type Ref, ref } from 'vue';
 
+/**
+ * A table cell component that provides advanced styling and behavior for table data.
+ * Supports fixed columns, editable cells, selection states, and responsive design.
+ * Integrates with the table system through dependency injection for coordinated
+ * styling and behavior across the entire table structure.
+ *
+ * @displayName PTableTd
+ */
 defineOptions({ name: 'PTableTd', inheritAttrs: false });
 
 type Props = {
+  /**
+   * The index of the column this cell belongs to.
+   * Used for determining positioning and styling based on column position.
+   */
   colIndex: number;
+  /**
+   * Whether the cell is editable.
+   * Adds cursor pointer styling and enables edit functionality.
+   */
   isEditable?: boolean;
+  /**
+   * Whether the cell is part of a selected row.
+   * Applies selection styling and hover effects.
+   */
   isSelected?: boolean;
 };
 

package/squirrel/components/p-tabs/p-tabs.stories.js

@@ -1,4 +1,4 @@
-import PaginateRightIcon from '@squirrel/assets/pagination-right-icon.svg?inline';
+import KeyboardPressEnterIcon from '@squirrel/assets/keyboard-press-enter.svg?inline';
 import PTabs from '@squirrel/components/p-tabs/p-tabs.vue';
 import { action } from 'storybook/actions';
 import { markRaw } from 'vue';
@@ -35,7 +35,7 @@ export const Default = {
       {
         title: 'Tab 2',
         name: 'tab2',
-        icon: markRaw(PaginateRightIcon),
+        icon: markRaw(KeyboardPressEnterIcon),
       },
       {
         title: 'Tab 3',

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

@@ -30,31 +30,63 @@
 import { type ShallowRef } from 'vue';
 import { type RouteLocationRaw } from 'vue-router';
 
+/**
+ * A tabs component for navigation between different sections.
+ * Displays tabs with optional icons and supports router navigation.
+ * Provides hover effects and active state styling.
+ *
+ * @displayName PTabs
+ */
 defineOptions({
   name: 'PTabs',
 });
 
+/**
+ * Represents a single tab in the tabs component.
+ */
 type Tab = {
+  /** Unique identifier for the tab */
   name: string;
+  /** Display text for the tab */
   title: string;
+  /** Optional icon component or icon name */
   icon?: string | ShallowRef<string>;
+  /** Optional router link destination */
   to?: RouteLocationRaw;
 };
 
 defineProps({
+  /**
+   * Array of tab objects to display.
+   * Each tab should have a name, title, and optional icon and route.
+   */
   tabs: {
     type: Array as () => Tab[],
     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,
   },
 });
 
-defineEmits(['click:tab']);
+defineEmits<{
+  /**
+   * Emitted when a tab is clicked.
+   * @param {string} tabName - The name of the clicked tab
+   */
+  'click:tab': [tabName: string];
+}>();
 </script>

package/squirrel/components/p-tabs-pills/p-tabs-pills.vue

@@ -30,20 +30,49 @@
 </template>
 
 <script setup lang="ts">
+/**
+ * A tabs pills component that displays navigation tabs in a pill-style interface.
+ * Provides a compact tab navigation with smooth transitions and accessibility features.
+ * Supports disabled states and custom item text/value properties.
+ *
+ * @displayName PTabsPills
+ */
 defineOptions({
   name: 'PTabsPills',
 });
 
+/**
+ * Valid value types for tab items.
+ */
 type Value = string | number | boolean;
 
+/**
+ * Represents a single tab option in the pills component.
+ */
 type Option = {
   [key: string]: Value;
 };
 
 type Props = {
+  /**
+   * The currently selected tab value (v-model).
+   * Should match one of the item values in the items array.
+   */
   modelValue?: Value;
+  /**
+   * Array of tab items to display as pills.
+   * Each item should have properties matching itemValue and itemText.
+   */
   items?: readonly Option[];
+  /**
+   * Property name to use as the item display text.
+   * Used for button label content.
+   */
   itemText?: string;
+  /**
+   * Property name to use as the item value.
+   * Used for selection comparison and v-model binding.
+   */
   itemValue?: string;
 };
 
@@ -55,6 +84,10 @@ withDefaults(defineProps<Props>(), {
 });
 
 defineEmits<{
+  /**
+   * Emitted when the selected tab value changes.
+   * @param {Value} val - The new selected tab value
+   */
   'update:modelValue': [val: Value];
 }>();
 </script>

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

@@ -15,30 +15,72 @@ import { type Size, SIZES } from '@squirrel/components/p-btn/p-btn.types';
 import { useInputClasses } from '@squirrel/composables/useInputClasses';
 import { computed, type PropType, type StyleValue, useAttrs } from 'vue';
 
+/**
+ * A textarea component for multi-line text input.
+ * Provides consistent styling and behavior with other form components.
+ * Supports custom labels, error states, and various sizes.
+ *
+ * @displayName PTextarea
+ */
 defineOptions({
   name: 'PTextarea',
   inheritAttrs: false,
 });
 
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits<{
+  /**
+   * Emitted when the textarea value changes.
+   * @param {string} value - The new textarea value
+   */
+  'update:modelValue': [value: string];
+}>();
+
+defineSlots<{
+  /**
+   * Custom label content - overrides the label prop.
+   * @param {string} label - The label text
+   * @param {string} label-classes - CSS classes for the label
+   */
+  label?: (props: { label: string; labelClasses: string }) => unknown;
+}>();
 
 const props = defineProps({
+  /**
+   * The current value of the textarea (v-model).
+   * Supports two-way binding for form inputs.
+   */
   modelValue: {
     type: [String, Number, null] as PropType<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 as PropType<Size>,
     default: 'md',

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

@@ -56,30 +56,73 @@ const TOGGLE_CLASSES = [
 </script>
 
 <script setup lang="ts">
+/**
+ * A toggle switch component that provides a modern switch interface.
+ * Supports different sizes, labels, error states, and accessibility features.
+ * Uses a checkbox input with custom styling for the toggle appearance.
+ *
+ * @displayName PToggle
+ */
 defineOptions({
   name: 'PToggle',
   inheritAttrs: false,
 });
 
-const emit = defineEmits(['update:modelValue']);
+defineSlots<{
+  /**
+   * Custom label content - overrides the label prop.
+   * @param {string} label - The label text
+   * @param {string} label-classes - CSS classes for the label
+   */
+  label?: (props: { label: string; labelClasses: string }) => unknown;
+}>();
+
+const emit = defineEmits<{
+  /**
+   * Emitted when the toggle state changes.
+   * @param {boolean} value - The new toggle state
+   */
+  'update:modelValue': [value: boolean];
+}>();
 
 const props = defineProps({
+  /**
+   * 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 as PropType<Size>,
     default: 'md',

package/squirrel/assets/pagination-left-icon.svg

@@ -1,5 +0,0 @@
-<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path
-    d="M0.25 5.99968C0.25 5.64968 0.4 5.34968 0.65 5.14968L6.25 0.249681C6.65 -0.100319 7.2 -0.0503187 7.55 0.349681C7.85 0.749681 7.85 1.29968 7.45 1.59968L2.55 5.89968C2.5 5.94968 2.5 5.99968 2.55 6.04968L7.45 10.3497C7.85 10.6997 7.9 11.2497 7.55 11.6497C7.2 12.0497 6.65 12.0997 6.25 11.7497C6.25 11.7497 6.25 11.7497 6.2 11.6997L0.65 6.84968C0.4 6.64968 0.25 6.29968 0.25 5.99968Z"
-    fill="#918da1" />
-</svg>

package/squirrel/assets/pagination-right-icon.svg

@@ -1,5 +0,0 @@
-<svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path
-    d="M7.75695 6.98136C7.75695 7.33136 7.60695 7.63136 7.35695 7.83136L1.75695 12.7814C1.35695 13.1314 0.756947 13.0814 0.456947 12.6814C0.156947 12.2814 0.156947 11.7314 0.556947 11.3814L5.45695 7.08136C5.50695 7.03136 5.50695 6.98136 5.45695 6.88136L0.556947 2.58136C0.156947 2.23136 0.156947 1.63136 0.506947 1.28136C0.856947 0.931361 1.40695 0.881361 1.80695 1.18136L7.40695 6.08136C7.60695 6.33136 7.75695 6.63136 7.75695 6.98136Z"
-    fill="#918da1" />
-</svg>