@indielayer/ui 2.0.0 → 2.1.0

package/lib/virtual/components/virtualList/VirtualList.vue.d.ts

@@ -1,55 +1,63 @@
-import { type CSSProperties } from 'vue';
+import { type CSSProperties, type PropType } from 'vue';
 import type { Align } from '../../types';
 import type { DynamicRowHeight } from './types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    tag: {
-        type: import("vue").PropType<keyof HTMLElementTagNameMap>;
-        default: string;
-    };
     class: {
-        type: import("vue").PropType<string>;
+        type: StringConstructor;
+        description: string;
     };
-    style: {
-        type: import("vue").PropType<CSSProperties>;
+    defaultHeight: {
+        type: NumberConstructor;
+        default: number;
+        description: string;
     };
     onResize: {
-        type: import("vue").PropType<(size: {
+        type: PropType<(size: {
             height: number;
             width: number;
         }, prevSize: {
             height: number;
             width: number;
         }) => void>;
-    };
-    rowCount: {
-        type: import("vue").PropType<number>;
-        required: true;
+        description: string;
     };
     onRowsRendered: {
-        type: import("vue").PropType<(visibleRows: {
+        type: PropType<(visibleRows: {
             startIndex: number;
             stopIndex: number;
         }, allRows: {
             startIndex: number;
             stopIndex: number;
         }) => void>;
+        description: string;
     };
     overscanCount: {
-        type: import("vue").PropType<number>;
+        type: NumberConstructor;
         default: number;
+        description: string;
     };
-    defaultHeight: {
-        type: import("vue").PropType<number>;
-        default: number;
+    rowCount: {
+        type: NumberConstructor;
+        required: boolean;
+        description: string;
     };
     rowHeight: {
-        type: import("vue").PropType<string | number | DynamicRowHeight | ((index: number, cellProps: Record<string, unknown>) => number)>;
-        required: true;
+        type: PropType<string | number | DynamicRowHeight | ((index: number, cellProps: Record<string, unknown>) => number)>;
+        required: boolean;
+        description: string;
     };
     rowProps: {
-        type: import("vue").PropType<{
-            [x: string]: unknown;
-        }>;
+        type: PropType<Record<string, unknown>>;
+        description: string;
+    };
+    style: {
+        type: PropType<CSSProperties>;
+        description: string;
+    };
+    tag: {
+        type: PropType<keyof HTMLElementTagNameMap>;
+        default: string;
+        description: string;
     };
 }>, {
     element: HTMLDivElement | null;
@@ -59,54 +67,62 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
         index: number;
     }): void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    tag: {
-        type: import("vue").PropType<keyof HTMLElementTagNameMap>;
-        default: string;
-    };
     class: {
-        type: import("vue").PropType<string>;
+        type: StringConstructor;
+        description: string;
     };
-    style: {
-        type: import("vue").PropType<CSSProperties>;
+    defaultHeight: {
+        type: NumberConstructor;
+        default: number;
+        description: string;
     };
     onResize: {
-        type: import("vue").PropType<(size: {
+        type: PropType<(size: {
             height: number;
             width: number;
         }, prevSize: {
             height: number;
             width: number;
         }) => void>;
-    };
-    rowCount: {
-        type: import("vue").PropType<number>;
-        required: true;
+        description: string;
     };
     onRowsRendered: {
-        type: import("vue").PropType<(visibleRows: {
+        type: PropType<(visibleRows: {
             startIndex: number;
             stopIndex: number;
         }, allRows: {
             startIndex: number;
             stopIndex: number;
         }) => void>;
+        description: string;
     };
     overscanCount: {
-        type: import("vue").PropType<number>;
+        type: NumberConstructor;
         default: number;
+        description: string;
     };
-    defaultHeight: {
-        type: import("vue").PropType<number>;
-        default: number;
+    rowCount: {
+        type: NumberConstructor;
+        required: boolean;
+        description: string;
     };
     rowHeight: {
-        type: import("vue").PropType<string | number | DynamicRowHeight | ((index: number, cellProps: Record<string, unknown>) => number)>;
-        required: true;
+        type: PropType<string | number | DynamicRowHeight | ((index: number, cellProps: Record<string, unknown>) => number)>;
+        required: boolean;
+        description: string;
     };
     rowProps: {
-        type: import("vue").PropType<{
-            [x: string]: unknown;
-        }>;
+        type: PropType<Record<string, unknown>>;
+        description: string;
+    };
+    style: {
+        type: PropType<CSSProperties>;
+        description: string;
+    };
+    tag: {
+        type: PropType<keyof HTMLElementTagNameMap>;
+        default: string;
+        description: string;
     };
 }>> & Readonly<{}>, {
     tag: keyof HTMLElementTagNameMap;
@@ -121,9 +137,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
             'aria-setsize': number;
             role: 'listitem';
         };
-        props: {
-            [x: string]: unknown;
-        } & Record<string, unknown>;
+        props: Record<string, unknown>;
     }): any;
     default?(_: {}): any;
 }>;

package/lib/virtual/components/virtualList/VirtualList.vue_vue_type_script_setup_true_lang.js

@@ -2,19 +2,70 @@ import { useVirtualizer as e } from "../../core/useVirtualizer.js";
 import { isDynamicRowHeight as t } from "./isDynamicRowHeight.js";
 import { DATA_ATTRIBUTE_LIST_INDEX as n } from "./useDynamicRowHeight.js";
 import { Fragment as r, computed as i, createBlock as a, createElementBlock as o, createElementVNode as s, defineComponent as c, normalizeClass as l, normalizeStyle as u, openBlock as d, ref as f, renderList as p, renderSlot as m, resolveDynamicComponent as h, unref as g, watch as _, withCtx as v } from "vue";
+//#region src/virtual/components/virtualList/VirtualList.vue?vue&type=script&setup=true&lang.ts
 var y = /* @__PURE__ */ c({
 	name: "XVirtualList",
+	docs: {
+		slots: {
+			row: "Render a single row. Receives index, style, ariaAttributes, and props.",
+			default: "Optional content rendered after the virtualized rows."
+		},
+		methods: {
+			scrollToRow: "Scroll so the given row index is visible.",
+			element: "Root HTML element when mounted, otherwise null."
+		}
+	},
 	props: {
-		class: {},
-		defaultHeight: { default: 0 },
-		onResize: {},
-		onRowsRendered: {},
-		overscanCount: { default: 3 },
-		rowCount: {},
-		rowHeight: {},
-		rowProps: {},
-		style: {},
-		tag: { default: "div" }
+		class: {
+			type: String,
+			description: "CSS class name on the root element."
+		},
+		defaultHeight: {
+			type: Number,
+			default: 0,
+			description: "Initial list height before measure; important for SSR."
+		},
+		onResize: {
+			type: Function,
+			description: "Called when the list root resizes."
+		},
+		onRowsRendered: {
+			type: Function,
+			description: "Called when the visible or overscan row range changes."
+		},
+		overscanCount: {
+			type: Number,
+			default: 3,
+			description: "Extra rows rendered outside the visible area to reduce scroll flicker."
+		},
+		rowCount: {
+			type: Number,
+			required: !0,
+			description: "Total number of rows in the list."
+		},
+		rowHeight: {
+			type: [
+				Number,
+				String,
+				Function,
+				Object
+			],
+			required: !0,
+			description: "Row height as px, percent string, function, or `useDynamicRowHeight` cache."
+		},
+		rowProps: {
+			type: Object,
+			description: "Extra props passed to the row slot as `props`."
+		},
+		style: {
+			type: Object,
+			description: "Inline styles; the list fills the height defined here."
+		},
+		tag: {
+			type: String,
+			default: "div",
+			description: "Root element tag."
+		}
 	},
 	setup(c, { expose: y }) {
 		let b = c, x = f(null), S = i(() => b.rowProps || {}), C = i(() => b.rowCount), w = i(() => t(b.rowHeight)), T = i(() => {
@@ -32,7 +83,7 @@ var y = /* @__PURE__ */ c({
 			itemProps: S,
 			itemSize: T,
 			onResize: b.onResize,
-			overscanCount: b.overscanCount
+			overscanCount: b.overscanCount ?? 3
 		});
 		y({
 			get element() {
@@ -100,7 +151,7 @@ var y = /* @__PURE__ */ c({
 			}
 			return e;
 		});
-		return (e, t) => (d(), a(h(c.tag), {
+		return (e, t) => (d(), a(h(e.tag), {
 			ref_key: "element",
 			ref: x,
 			class: l(e.$props.class),
@@ -109,7 +160,7 @@ var y = /* @__PURE__ */ c({
 				maxHeight: "100%",
 				flexGrow: 1,
 				overflowY: "auto",
-				...c.style
+				...e.style
 			}),
 			role: "list"
 		}, {

package/lib/virtual/components/virtualList/useDynamicRowHeight.js

@@ -21,7 +21,7 @@ function o({ defaultRowHeight: o, key: s }) {
 		if (c.value.get(e) === t) return;
 		let n = new Map(c.value);
 		n.set(e, t), c.value = n, l.value++;
-	}, p = new ResizeObserver((t) => {
+	}, p = typeof ResizeObserver < "u" ? new ResizeObserver((t) => {
 		if (t.length === 0) return;
 		let n = !1, r = [];
 		if (t.forEach((t) => {
@@ -38,15 +38,16 @@ function o({ defaultRowHeight: o, key: s }) {
 				e.set(t, n);
 			}), c.value = e, l.value++;
 		}
-	});
+	}) : null;
 	function m() {
-		p.disconnect();
+		p?.disconnect();
 	}
 	return t() && n(m), {
 		getAverageRowHeight: u,
 		getRowHeight: d,
 		setRowHeight: f,
 		observeRowElements: (e) => {
+			if (!p) return () => {};
 			let t = Array.isArray(e) ? e : Array.from(e);
 			return t.forEach((e) => p.observe(e)), () => {
 				t.forEach((e) => p.unobserve(e));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indielayer/ui",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Indielayer UI Components with Tailwind CSS build for Vue 3",
   "author": {
     "name": "João Teixeira",
@@ -71,8 +71,10 @@
     "rollup-plugin-visualizer": "^5.9.2",
     "shiki": "^4.1.0",
     "tailwindcss": "^4.3.0",
+    "tslib": "^2.8.1",
     "typescript": "^5.2.2",
     "vite": "^8.0.14",
+    "vite-ssg": "^28.3.0",
     "vitest": "^4.1.7",
     "vue": "^3.5.18",
     "vue-router": "^4.2.2",
@@ -98,7 +100,7 @@
   "scripts": {
     "dev": "vite dev --mode docs --open",
     "build": "pnpm generate && vite build",
-    "build:docs": "pnpm build --mode docs",
+    "build:docs": "pnpm generate && vite-ssg build --mode docs",
     "build:prod": "pnpm build && pnpm gen:types",
     "build:watch": "pnpm generate && vite build --watch",
     "build:only": "vite build",
@@ -113,6 +115,6 @@
     "test": "pnpm test:unit",
     "test:ci": "vitest run --environment jsdom",
     "test:unit": "vitest --environment jsdom",
-    "typecheck": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false"
+    "typecheck": "pnpm generate && vue-tsc --noEmit -p tsconfig.vitest.json --composite false"
   }
 }

package/src/common/buttonGroupRadius.ts

@@ -0,0 +1,16 @@
+import type { InputGroupPosition } from './inputGroupRadius'
+
+export type ButtonGroupPosition = InputGroupPosition
+
+export function buttonGroupRadiusClasses(
+  position?: ButtonGroupPosition | null,
+  pill = false,
+) {
+  if (!position) return []
+
+  if (position === 'only') return [pill ? 'rounded-full' : 'rounded-md']
+  if (position === 'first') return [pill ? 'rounded-s-full' : 'rounded-s-md']
+  if (position === 'last') return [pill ? 'rounded-e-full' : 'rounded-e-md']
+
+  return ['rounded-none']
+}

package/src/common/props.ts

@@ -15,20 +15,21 @@ import type { Prop } from 'vue'
  * Plain `Boolean` props are cast to `false` when absent in Vue 3.
  * @see https://vuejs.org/guide/components/props.html#boolean-casting
  */
-export function optionalBooleanProp(): Prop<boolean | undefined> {
+export function optionalBooleanProp(description?: string): Prop<boolean | undefined> {
   return {
     type: Boolean,
     default: undefined,
-  }
+    ...(description ? { description } : {}),
+  } as Prop<boolean | undefined>
 }
 
 /** Shared variant booleans for Button and ButtonGroup. */
 export const variantBooleanProps = () => ({
-  outlined: optionalBooleanProp(),
-  rounded: optionalBooleanProp(),
-  glow: optionalBooleanProp(),
-  ghost: optionalBooleanProp(),
-  light: optionalBooleanProp(),
-  flat: optionalBooleanProp(),
-  block: optionalBooleanProp(),
+  outlined: optionalBooleanProp('Outline style with a transparent fill.'),
+  rounded: optionalBooleanProp('Fully rounded corners (pill shape).'),
+  glow: optionalBooleanProp('Soft colored glow behind the control.'),
+  ghost: optionalBooleanProp('Minimal style with no background until hover.'),
+  light: optionalBooleanProp('Tinted background using the color at low opacity.'),
+  flat: optionalBooleanProp('Removes elevation and border emphasis.'),
+  block: optionalBooleanProp('Stretches to the full width of the parent.'),
 })

package/src/components/accordion/Accordion.vue

@@ -5,15 +5,26 @@ const accordionProps = {
   tag: {
     type: String,
     default: 'div',
+    description: 'Root element tag.',
   },
-  disabled: Boolean,
-  expanded: optionalBooleanProp(),
+  disabled: {
+    type: Boolean,
+    description: 'Disables all accordion items when set.',
+  },
+  expanded: optionalBooleanProp('Default expanded state passed to child items.'),
   showIcon: {
     type: Boolean,
     default: true,
+    description: 'Shows the expand/collapse icon on child items.',
+  },
+  icon: {
+    type: String,
+    description: 'Default expand/collapse icon name for child items.',
+  },
+  iconAlign: {
+    type: String as PropType<AccordionItemAlign>,
+    description: 'Default icon alignment for child items (left or right).',
   },
-  icon: String,
-  iconAlign: String as PropType<AccordionItemAlign>,
 }
 
 export type AccordionProps = ExtractPublicPropTypes<typeof accordionProps>
@@ -28,6 +39,11 @@ export interface AccordionTheme extends ThemeComponent<AccordionProps, InternalC
 export default {
   name: 'XAccordion',
   validators: {},
+  docs: {
+    slots: {
+      default: 'Accordion items (typically x-accordion-item children).',
+    },
+  },
 }
 </script>
 

package/src/components/accordion/AccordionItem.vue

@@ -6,17 +6,26 @@ const accordionItemProps = {
   tag: {
     type: String,
     default: 'div',
+    description: 'Root element tag.',
   },
-  disabled: Boolean,
-  expanded: optionalBooleanProp(),
+  disabled: {
+    type: Boolean,
+    description: 'Prevents expanding and collapsing.',
+  },
+  expanded: optionalBooleanProp('Whether the item content starts expanded.'),
   showIcon: {
     type: Boolean,
     default: true,
+    description: 'Shows the expand/collapse icon.',
+  },
+  icon: {
+    type: String,
+    description: 'Custom expand/collapse icon name. Falls back to a chevron.',
   },
-  icon: String,
   iconAlign: {
     type: String as PropType<AccordionItemAlign>,
     default: 'right',
+    description: 'Icon placement relative to the header (left or right).',
   },
 }
 
@@ -35,6 +44,22 @@ export default {
   validators: {
     iconAlign: accordionItemAlign,
   },
+  docs: {
+    slots: {
+      default: 'Header label. Slot props: expand, collapsed.',
+      summary: 'Optional summary below the header. Slot props: expand, collapsed.',
+      content: 'Collapsible body. Slot props: expand, collapsed.',
+    },
+    emits: {
+      expand: 'Emitted when expand() is called from a slot.',
+      change: 'Emitted when expanded state changes. Payload is the new expanded boolean.',
+    },
+    methods: {
+      toggle: 'Toggle expanded state when not disabled.',
+      open: 'Expand the item. Pass false to skip animation.',
+      close: 'Collapse the item. Pass false to skip animation.',
+    },
+  },
 }
 </script>
 

package/src/components/alert/Alert.vue

@@ -4,12 +4,18 @@ import { optionalBooleanProp } from '../../common/props'
 const alertType = ['info', 'success', 'error', 'warning'] as const
 const alertProps = {
   ...useColors.props(),
-  type: String as PropType<AlertType>,
-  glow: optionalBooleanProp(),
-  light: optionalBooleanProp(),
-  outlined: optionalBooleanProp(),
-  removable: optionalBooleanProp(),
-  closeLabel: String,
+  type: {
+    type: String as PropType<AlertType>,
+    description: 'Semantic alert type (info, success, error, warning). Controls the default icon.',
+  },
+  glow: optionalBooleanProp('Soft colored glow behind the alert.'),
+  light: optionalBooleanProp('Tinted background using the color at low opacity.'),
+  outlined: optionalBooleanProp('Outline style with a transparent fill.'),
+  removable: optionalBooleanProp('Shows a close control that emits `remove`.'),
+  closeLabel: {
+    type: String,
+    description: 'Accessible label for the remove button.',
+  },
 }
 
 export type AlertType = typeof alertType[number]
@@ -23,6 +29,16 @@ export default {
   validators: {
     type: alertType,
   },
+  docs: {
+    slots: {
+      default: 'Alert message content.',
+      icon: 'Custom icon; overrides the type-based icon.',
+      removeIcon: 'Custom icon for the remove button.',
+    },
+    emits: {
+      remove: 'Emitted when the remove button is clicked.',
+    },
+  },
 }
 </script>
 

package/src/components/avatar/Avatar.vue

@@ -7,12 +7,22 @@ const avatarProps = {
   tag: {
     type: String,
     default: 'div',
+    description: 'Root element tag.',
   },
-  name: String,
-  alt: String,
-  image: String,
-  outlined: optionalBooleanProp(),
-  rounded: optionalBooleanProp(),
+  name: {
+    type: String,
+    description: 'Display name used to derive initials when no image is loaded.',
+  },
+  alt: {
+    type: String,
+    description: 'Alt text for the image when `image` is set.',
+  },
+  image: {
+    type: String,
+    description: 'Image URL. Falls back to initials or the avatar icon if unloadable.',
+  },
+  outlined: optionalBooleanProp('Outline style with a transparent fill.'),
+  rounded: optionalBooleanProp('Fully rounded corners (circle).'),
 }
 
 export type AvatarProps = ExtractPublicPropTypes<typeof avatarProps>
@@ -24,6 +34,11 @@ export interface AvatarTheme extends ThemeComponent<AvatarProps, InternalClasses
 export default {
   name: 'XAvatar',
   validators: useCommon.validators(),
+  docs: {
+    slots: {
+      avatarIcon: 'Fallback icon when no name or image is available.',
+    },
+  },
 }
 </script>
 

package/src/components/badge/Badge.vue

@@ -9,23 +9,36 @@ const badgeProps = {
   tag: {
     type: String,
     default: 'div',
+    description: 'Root element tag.',
   },
   position: {
     type: String as PropType<BadgePosition>,
     default: 'top',
+    description: 'Vertical placement of the badge relative to the content (top, bottom).',
   },
   align: {
     type: String as PropType<BadgeAlign>,
     default: 'right',
+    description: 'Horizontal placement of the badge relative to the content (left, right).',
+  },
+  offsetX: {
+    type: [Number, String],
+    description: 'Horizontal offset in pixels from the aligned edge.',
+  },
+  offsetY: {
+    type: [Number, String],
+    description: 'Vertical offset in pixels from the positioned edge.',
+  },
+  animated: optionalBooleanProp('Adds a ping animation around the badge.'),
+  outlined: optionalBooleanProp('Adds a border around the badge.'),
+  icon: {
+    type: String,
+    description: 'Icon name for the badge indicator. Prefer the content slot for custom content.',
   },
-  offsetX: [Number, String],
-  offsetY: [Number, String],
-  animated: optionalBooleanProp(),
-  outlined: optionalBooleanProp(),
-  icon: String,
   show: {
     type: Boolean,
     default: true,
+    description: 'Controls whether the badge indicator is visible.',
   },
 }
 
@@ -43,6 +56,12 @@ export default {
     position: badgePosition,
     align: badgeAlign,
   },
+  docs: {
+    slots: {
+      default: 'Content the badge is attached to.',
+      content: 'Badge label or custom indicator content.',
+    },
+  },
 }
 </script>
 

package/src/components/breadcrumbs/Breadcrumbs.vue

@@ -3,14 +3,21 @@ import { optionalBooleanProp } from '../../common/props'
 
 const breadcrumbsProps = {
   ...useColors.props(),
-  items: Array as PropType<BreadcrumbsItem[]>,
+  items: {
+    type: Array as PropType<BreadcrumbsItem[]>,
+    description: 'Breadcrumb items with label and optional to, href, icon, and style overrides.',
+  },
   separator: {
     type: String,
     default: '/',
+    description: 'Text separator between items when `icon` is not set.',
+  },
+  icon: {
+    type: String,
+    description: 'Icon name used as the separator between items.',
   },
-  icon: String,
-  shadow: optionalBooleanProp(),
-  underline: optionalBooleanProp(),
+  shadow: optionalBooleanProp('Applies the link shadow style to items.'),
+  underline: optionalBooleanProp('Underlines item links.'),
 }
 
 export type BreadcrumbsItem = {
@@ -27,7 +34,10 @@ export type BreadcrumbsProps = ExtractPublicPropTypes<typeof breadcrumbsProps>
 type InternalClasses = 'wrapper' | 'item' | 'separator'
 export interface BreadcrumbsTheme extends ThemeComponent<BreadcrumbsProps, InternalClasses> {}
 
-export default { name: 'XBreadcrumbs' }
+export default {
+  name: 'XBreadcrumbs',
+  docs: {},
+}
 </script>
 
 <script setup lang="ts">