@marianmeres/stuic 2.33.2 → 2.36.0

package/dist/components/Collapsible/Collapsible.svelte

@@ -0,0 +1,103 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+
+	export interface Props {
+		/** Content to display */
+		children: Snippet;
+		/** Number of lines to show when collapsed (default: 1) */
+		lines?: number;
+		/** Expanded state (bindable) */
+		expanded?: boolean;
+		/** Collapsed indicator character (default: "↓") */
+		collapsedIndicator?: string;
+		/** Expanded indicator character (default: "↑") */
+		expandedIndicator?: string;
+		/** Container class */
+		class?: string;
+		/** Content wrapper class */
+		classContent?: string;
+		/** Toggle button class */
+		classToggle?: string;
+		/** Opacity class for toggle button (default: "opacity-70") */
+		toggleOpacity?: string;
+		/** Bind reference to container element */
+		el?: HTMLDivElement;
+	}
+</script>
+
+<script lang="ts">
+	import { twMerge } from "../../utils/tw-merge.js";
+
+	let {
+		children,
+		lines = 1,
+		expanded = $bindable(false),
+		collapsedIndicator = "↓",
+		expandedIndicator = "↑",
+		class: classProp,
+		classContent,
+		classToggle,
+		toggleOpacity = "opacity-75",
+		el = $bindable(),
+	}: Props = $props();
+
+	let contentEl: HTMLDivElement | undefined;
+	let containerWidth = $state(0);
+	let needsCollapse = $state(false);
+
+	$effect(() => {
+		// Only measure when collapsed (line-clamp applied) to detect if truncation is needed
+		// containerWidth dependency ensures re-measurement on resize
+		if (contentEl && !expanded && containerWidth) {
+			needsCollapse = contentEl.scrollHeight > contentEl.clientHeight;
+		}
+	});
+
+	// normalize, range validation
+	let _lines = $derived.by(() => {
+		const l = Math.abs(lines);
+		return l > 10 ? 10 : l;
+	});
+</script>
+
+<div
+	bind:this={el}
+	bind:clientWidth={containerWidth}
+	class={twMerge("stuic-collapsible", classProp)}
+>
+	<div class="flex items-end">
+		<div
+			bind:this={contentEl}
+			class={twMerge("flex-1", !expanded && `line-clamp-${_lines}`, classContent)}
+		>
+			{@render children()}
+		</div>
+		{#if needsCollapse}
+			<button
+				type="button"
+				class={twMerge(
+					toggleOpacity,
+					"hover:opacity-100 cursor-pointer px-2 py-1 -my-1 -mr-2",
+					classToggle
+				)}
+				onclick={() => (expanded = !expanded)}
+			>
+				{expanded ? expandedIndicator : collapsedIndicator}
+			</button>
+		{/if}
+	</div>
+</div>
+
+<!-- 
+DO NOT REMOVE: Food for TW compiler
+line-clamp-1
+line-clamp-2
+line-clamp-3
+line-clamp-4
+line-clamp-5
+line-clamp-6
+line-clamp-7
+line-clamp-8
+line-clamp-9
+line-clamp-10
+-->

package/dist/components/Collapsible/Collapsible.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { Snippet } from "svelte";
+export interface Props {
+    /** Content to display */
+    children: Snippet;
+    /** Number of lines to show when collapsed (default: 1) */
+    lines?: number;
+    /** Expanded state (bindable) */
+    expanded?: boolean;
+    /** Collapsed indicator character (default: "↓") */
+    collapsedIndicator?: string;
+    /** Expanded indicator character (default: "↑") */
+    expandedIndicator?: string;
+    /** Container class */
+    class?: string;
+    /** Content wrapper class */
+    classContent?: string;
+    /** Toggle button class */
+    classToggle?: string;
+    /** Opacity class for toggle button (default: "opacity-70") */
+    toggleOpacity?: string;
+    /** Bind reference to container element */
+    el?: HTMLDivElement;
+}
+declare const Collapsible: import("svelte").Component<Props, {}, "el" | "expanded">;
+type Collapsible = ReturnType<typeof Collapsible>;
+export default Collapsible;

package/dist/components/Collapsible/README.md

@@ -0,0 +1,81 @@
+# Collapsible
+
+A component that truncates content to a specified number of lines with an expand/collapse toggle. Automatically detects if truncation is needed and only shows the toggle when content overflows.
+
+## Props
+
+| Prop                 | Type            | Default       | Description                                      |
+| -------------------- | --------------- | ------------- | ------------------------------------------------ |
+| `children`           | `Snippet`       | -             | Content to display                               |
+| `lines`              | `number`        | `1`           | Number of lines to show when collapsed           |
+| `expanded`           | `boolean`       | `false`       | Expanded state (bindable)                        |
+| `collapsedIndicator` | `string`        | `"↓"`         | Character/text shown when collapsed              |
+| `expandedIndicator`  | `string`        | `"↑"`         | Character/text shown when expanded               |
+| `class`              | `string`        | -             | Container element class                          |
+| `classContent`       | `string`        | -             | Content wrapper class                            |
+| `classToggle`        | `string`        | -             | Toggle button class                              |
+| `toggleOpacity`      | `string`        | `"opacity-70"`| Opacity class for toggle button                  |
+| `el`                 | `HTMLDivElement`| -             | Bind reference to container element              |
+
+## Usage
+
+### Basic Usage
+
+```svelte
+<script>
+  import { Collapsible } from 'stuic';
+</script>
+
+<Collapsible>
+  This is a long text that will be truncated to one line with an ellipsis
+  and a toggle button to expand it.
+</Collapsible>
+```
+
+### Multiple Lines
+
+```svelte
+<Collapsible lines={3}>
+  This content will be truncated to 3 lines before showing the expand toggle.
+  Add more content here to see the effect.
+</Collapsible>
+```
+
+### Custom Indicators
+
+```svelte
+<Collapsible collapsedIndicator="▼" expandedIndicator="▲">
+  Content with custom expand/collapse indicators.
+</Collapsible>
+```
+
+### Controlled State
+
+```svelte
+<script>
+  import { Collapsible } from 'stuic';
+
+  let expanded = $state(false);
+</script>
+
+<button onclick={() => expanded = !expanded}>
+  Toggle externally
+</button>
+
+<Collapsible bind:expanded>
+  This collapsible can be controlled from outside.
+</Collapsible>
+```
+
+### Custom Styling
+
+```svelte
+<Collapsible
+  class="bg-gray-100 p-4 rounded"
+  classContent="text-sm text-gray-600"
+  classToggle="text-blue-500 font-bold"
+  toggleOpacity="opacity-100"
+>
+  Styled collapsible content.
+</Collapsible>
+```

package/dist/components/Collapsible/index.d.ts

@@ -0,0 +1 @@
+export { default as Collapsible, type Props as CollapsibleProps, } from "./Collapsible.svelte";

package/dist/components/Collapsible/index.js

@@ -0,0 +1 @@
+export { default as Collapsible, } from "./Collapsible.svelte";

package/dist/components/Input/_internal/InputWrap.svelte

@@ -3,6 +3,7 @@
 	import { slide } from "svelte/transition";
 	import type { ValidationResult } from "../../../actions/validate.svelte.js";
 	import { twMerge } from "../../../utils/tw-merge.js";
+	import { Collapsible } from "../../Collapsible/index.js";
 	import Thc, { isTHCNotEmpty, type THC } from "../../Thc/Thc.svelte";
 
 	type SnippetWithId = Snippet<[{ id: string }]>;
@@ -33,8 +34,11 @@
 		classInputBoxWrap?: string;
 		classInputBoxWrapInvalid?: string;
 		classDescBox?: string;
+		classDescBoxToggle?: string;
 		classBelowBox?: string;
 		classValidationBox?: string;
+		descriptionCollapsible?: boolean;
+		descriptionDefaultExpanded?: boolean;
 		style?: string;
 	}
 	let {
@@ -64,8 +68,11 @@
 		classInputBoxWrap,
 		classInputBoxWrapInvalid,
 		classDescBox,
+		classDescBoxToggle,
 		classBelowBox,
 		classValidationBox,
+		descriptionCollapsible = true,
+		descriptionDefaultExpanded = false,
 		style,
 	}: Props = $props();
 
@@ -214,7 +221,16 @@
 					classDescBox
 				)}
 			>
-				{@render snippetOrThc({ id, value: description })}
+				{#if descriptionCollapsible}
+					<Collapsible
+						expanded={descriptionDefaultExpanded}
+						classToggle={classDescBoxToggle}
+					>
+						{@render snippetOrThc({ id, value: description })}
+					</Collapsible>
+				{:else}
+					{@render snippetOrThc({ id, value: description })}
+				{/if}
 			</div>
 		{/if}
 

package/dist/components/Input/_internal/InputWrap.svelte.d.ts

@@ -28,8 +28,11 @@ interface Props {
     classInputBoxWrap?: string;
     classInputBoxWrapInvalid?: string;
     classDescBox?: string;
+    classDescBoxToggle?: string;
     classBelowBox?: string;
     classValidationBox?: string;
+    descriptionCollapsible?: boolean;
+    descriptionDefaultExpanded?: boolean;
     style?: string;
 }
 declare const InputWrap: import("svelte").Component<Props, {}, "">;

package/dist/index.d.ts

@@ -28,6 +28,7 @@ export * from "./components/AvatarInitials/index.js";
 export * from "./components/Backdrop/index.js";
 export * from "./components/Button/index.js";
 export * from "./components/ButtonGroupRadio/index.js";
+export * from "./components/Collapsible/index.js";
 export * from "./components/ColorScheme/index.js";
 export * from "./components/CommandMenu/index.js";
 export * from "./components/DismissibleMessage/index.js";

package/dist/index.js

@@ -29,6 +29,7 @@ export * from "./components/AvatarInitials/index.js";
 export * from "./components/Backdrop/index.js";
 export * from "./components/Button/index.js";
 export * from "./components/ButtonGroupRadio/index.js";
+export * from "./components/Collapsible/index.js";
 export * from "./components/ColorScheme/index.js";
 export * from "./components/CommandMenu/index.js";
 export * from "./components/DismissibleMessage/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marianmeres/stuic",
-  "version": "2.33.2",
+  "version": "2.36.0",
   "files": [
     "dist",
     "!dist/**/*.test.*",