@marianmeres/stuic 2.36.0 → 2.38.1

package/dist/components/Collapsible/Collapsible.svelte

@@ -1,5 +1,10 @@
 <script lang="ts" module>
 	import type { Snippet } from "svelte";
+	import { twMerge } from "../../utils/tw-merge.js";
+	import { tooltip } from "../../actions/index.js";
+	import { isPlainObject } from "../../utils/is-plain-object.js";
+	import { replaceMap } from "../../utils/replace-map.js";
+	import type { TranslateFn } from "../../types.js";
 
 	export interface Props {
 		/** Content to display */
@@ -22,12 +27,28 @@
 		toggleOpacity?: string;
 		/** Bind reference to container element */
 		el?: HTMLDivElement;
+		/** Optional translate function */
+		t?: TranslateFn;
+	}
+
+	// i18n ready
+	function t_default(
+		k: string,
+		values: false | null | undefined | Record<string, string | number> = null,
+		fallback: string | boolean = "",
+		i18nSpanWrap: boolean = true
+	) {
+		const m: Record<string, string> = {
+			more: "Show more...",
+			less: "Show less...",
+		};
+		let out = m[k] ?? fallback ?? k;
+
+		return isPlainObject(values) ? replaceMap(out, values as any) : out;
 	}
 </script>
 
 <script lang="ts">
-	import { twMerge } from "../../utils/tw-merge.js";
-
 	let {
 		children,
 		lines = 1,
@@ -39,6 +60,7 @@
 		classToggle,
 		toggleOpacity = "opacity-75",
 		el = $bindable(),
+		t = t_default,
 	}: Props = $props();
 
 	let contentEl: HTMLDivElement | undefined;
@@ -81,6 +103,9 @@
 					classToggle
 				)}
 				onclick={() => (expanded = !expanded)}
+				use:tooltip={() => ({
+					content: expanded ? t("less") : t("more"),
+				})}
 			>
 				{expanded ? expandedIndicator : collapsedIndicator}
 			</button>

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

@@ -1,4 +1,5 @@
 import type { Snippet } from "svelte";
+import type { TranslateFn } from "../../types.js";
 export interface Props {
     /** Content to display */
     children: Snippet;
@@ -20,6 +21,8 @@ export interface Props {
     toggleOpacity?: string;
     /** Bind reference to container element */
     el?: HTMLDivElement;
+    /** Optional translate function */
+    t?: TranslateFn;
 }
 declare const Collapsible: import("svelte").Component<Props, {}, "el" | "expanded">;
 type Collapsible = ReturnType<typeof Collapsible>;

package/dist/components/Input/FieldCheckbox.svelte

@@ -36,6 +36,7 @@
 	import { getId } from "../../utils/get-id.js";
 	import { twMerge } from "../../utils/tw-merge.js";
 	import { Thc, isTHCNotEmpty } from "../Thc/index.js";
+	import { Collapsible } from "../Collapsible/index.js";
 	type THC = import("../Thc/index.js").THC;
 
 	let {
@@ -183,7 +184,18 @@
 			</div>
 		{/if}
 		{#if description}
-			<div
+			<Collapsible
+				class={twMerge(
+					"desc-box",
+					_classCommon,
+					"text-sm opacity-50 cursor-pointer font-normal",
+					disabled && "cursor-not-allowed",
+					classDescBox
+				)}
+			>
+				{@render snippetOrThc({ id, value: description })}
+			</Collapsible>
+			<!-- <div
 				id={idDesc}
 				class={twMerge(
 					"desc-box",
@@ -194,7 +206,7 @@
 				)}
 			>
 				{@render snippetOrThc({ id, value: description })}
-			</div>
+			</div> -->
 		{/if}
 	</div>
 </label>

package/package.json

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