@marianmeres/stuic 2.33.1 → 2.34.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -229,10 +229,10 @@
|
|
|
229
229
|
export const DROPDOWN_MENU_ITEM_CLASSES = `
|
|
230
230
|
w-full
|
|
231
231
|
flex items-center gap-2
|
|
232
|
-
px-
|
|
232
|
+
px-3 py-1.5
|
|
233
233
|
min-h-[44px]
|
|
234
234
|
text-left text-sm
|
|
235
|
-
rounded-
|
|
235
|
+
rounded-md
|
|
236
236
|
cursor-pointer
|
|
237
237
|
touch-action-manipulation
|
|
238
238
|
hover:bg-neutral-100 dark:hover:bg-neutral-700
|
|
@@ -145,7 +145,7 @@ export interface Props extends Omit<HTMLButtonAttributes, "children"> {
|
|
|
145
145
|
export declare const DROPDOWN_MENU_BASE_CLASSES = "stuic-dropdown-menu relative inline-block";
|
|
146
146
|
export declare const DROPDOWN_MENU_TRIGGER_CLASSES = "\n\t\tinline-flex items-center justify-center gap-2\n\t\tpx-3 py-2\n\t\trounded-md border\n\t\tbg-white dark:bg-neutral-800\n\t\ttext-neutral-900 dark:text-neutral-100\n\t\tborder-neutral-200 dark:border-neutral-700\n\t\thover:brightness-95 dark:hover:brightness-110\n\t\tfocus-visible:outline-2 focus-visible:outline-offset-2\n\t\tcursor-pointer\n\t";
|
|
147
147
|
export declare const DROPDOWN_MENU_DROPDOWN_CLASSES = "\n\t\tstuic-dropdown-menu-dropdown\n\t\tbg-white dark:bg-neutral-800\n\t\ttext-neutral-900 dark:text-neutral-100\n\t\tborder border-neutral-200 dark:border-neutral-700\n\t\trounded-md shadow-sm\n\t\tp-1\n\t\toverflow-y-auto\n\t\tz-50\n\t\tmin-w-48\n\t";
|
|
148
|
-
export declare const DROPDOWN_MENU_ITEM_CLASSES = "\n\t\tw-full\n\t\tflex items-center gap-2\n\t\tpx-
|
|
148
|
+
export declare const DROPDOWN_MENU_ITEM_CLASSES = "\n\t\tw-full\n\t\tflex items-center gap-2\n\t\tpx-3 py-1.5\n\t\tmin-h-[44px]\n\t\ttext-left text-sm\n\t\trounded-md\n\t\tcursor-pointer\n\t\ttouch-action-manipulation\n\t\thover:bg-neutral-100 dark:hover:bg-neutral-700\n\t\tfocus:outline-none\n\t\tfocus-visible:bg-neutral-200 dark:focus-visible:bg-neutral-600\n\t";
|
|
149
149
|
export declare const DROPDOWN_MENU_DIVIDER_CLASSES = "\n\t\th-px my-1\n\t\tbg-neutral-200 dark:bg-neutral-700\n\t";
|
|
150
150
|
export declare const DROPDOWN_MENU_HEADER_CLASSES = "\n\t\tpx-2 py-1.5\n\t\ttext-xs font-semibold uppercase tracking-wide\n\t\ttext-neutral-500 dark:text-neutral-400\n\t\tselect-none\n\t";
|
|
151
151
|
export declare const DROPDOWN_MENU_BACKDROP_CLASSES = "\n\t\tstuic-dropdown-menu-backdrop\n\t\tfixed inset-0 bg-black/25\n\t\tz-40\n\t";
|
|
@@ -33,8 +33,11 @@
|
|
|
33
33
|
classInputBoxWrap?: string;
|
|
34
34
|
classInputBoxWrapInvalid?: string;
|
|
35
35
|
classDescBox?: string;
|
|
36
|
+
classDescBoxToggle?: string;
|
|
36
37
|
classBelowBox?: string;
|
|
37
38
|
classValidationBox?: string;
|
|
39
|
+
descriptionCollapsible?: boolean;
|
|
40
|
+
descriptionDefaultExpanded?: boolean;
|
|
38
41
|
style?: string;
|
|
39
42
|
}
|
|
40
43
|
let {
|
|
@@ -64,14 +67,20 @@
|
|
|
64
67
|
classInputBoxWrap,
|
|
65
68
|
classInputBoxWrapInvalid,
|
|
66
69
|
classDescBox,
|
|
70
|
+
classDescBoxToggle,
|
|
67
71
|
classBelowBox,
|
|
68
72
|
classValidationBox,
|
|
73
|
+
descriptionCollapsible = true,
|
|
74
|
+
descriptionDefaultExpanded = false,
|
|
69
75
|
style,
|
|
70
76
|
}: Props = $props();
|
|
71
77
|
|
|
72
78
|
let invalid = $derived(validation && !validation?.valid);
|
|
73
79
|
|
|
74
80
|
let width = $state<number>(0);
|
|
81
|
+
let descExpanded = $state(descriptionDefaultExpanded);
|
|
82
|
+
let descContentEl: HTMLDivElement | undefined;
|
|
83
|
+
let descNeedsCollapse = $state(false);
|
|
75
84
|
|
|
76
85
|
$effect(() => {
|
|
77
86
|
// a non-zero breakpoint has priority
|
|
@@ -80,6 +89,14 @@
|
|
|
80
89
|
}
|
|
81
90
|
});
|
|
82
91
|
|
|
92
|
+
$effect(() => {
|
|
93
|
+
// only measure when collapsed (line-clamp applied) to detect if truncation is needed
|
|
94
|
+
// width dependency ensures re-measurement on resize
|
|
95
|
+
if (descContentEl && descriptionCollapsible && !descExpanded && width) {
|
|
96
|
+
descNeedsCollapse = descContentEl.scrollHeight > descContentEl.clientHeight;
|
|
97
|
+
}
|
|
98
|
+
});
|
|
99
|
+
|
|
83
100
|
let _classCommon = $derived(
|
|
84
101
|
[invalid && "invalid", disabled && "disabled", required && "required", size]
|
|
85
102
|
.filter(Boolean)
|
|
@@ -214,7 +231,30 @@
|
|
|
214
231
|
classDescBox
|
|
215
232
|
)}
|
|
216
233
|
>
|
|
217
|
-
{
|
|
234
|
+
{#if descriptionCollapsible}
|
|
235
|
+
<div class="flex items-start">
|
|
236
|
+
<div
|
|
237
|
+
bind:this={descContentEl}
|
|
238
|
+
class={twMerge("flex-1", !descExpanded && "line-clamp-1")}
|
|
239
|
+
>
|
|
240
|
+
{@render snippetOrThc({ id, value: description })}
|
|
241
|
+
</div>
|
|
242
|
+
{#if descNeedsCollapse}
|
|
243
|
+
<button
|
|
244
|
+
type="button"
|
|
245
|
+
class={twMerge(
|
|
246
|
+
"opacity-70 hover:opacity-100 cursor-pointer px-2 py-1 -my-1 -mr-2",
|
|
247
|
+
classDescBoxToggle
|
|
248
|
+
)}
|
|
249
|
+
onclick={() => (descExpanded = !descExpanded)}
|
|
250
|
+
>
|
|
251
|
+
{descExpanded ? "↑" : "↓"}
|
|
252
|
+
</button>
|
|
253
|
+
{/if}
|
|
254
|
+
</div>
|
|
255
|
+
{:else}
|
|
256
|
+
{@render snippetOrThc({ id, value: description })}
|
|
257
|
+
{/if}
|
|
218
258
|
</div>
|
|
219
259
|
{/if}
|
|
220
260
|
|
|
@@ -28,8 +28,11 @@ interface Props {
|
|
|
28
28
|
classInputBoxWrap?: string;
|
|
29
29
|
classInputBoxWrapInvalid?: string;
|
|
30
30
|
classDescBox?: string;
|
|
31
|
+
classDescBoxToggle?: string;
|
|
31
32
|
classBelowBox?: string;
|
|
32
33
|
classValidationBox?: string;
|
|
34
|
+
descriptionCollapsible?: boolean;
|
|
35
|
+
descriptionDefaultExpanded?: boolean;
|
|
33
36
|
style?: string;
|
|
34
37
|
}
|
|
35
38
|
declare const InputWrap: import("svelte").Component<Props, {}, "">;
|