@humandialog/forms.svelte 1.5.0 → 1.5.1
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.
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
import { breadcrumbParse, breadcrumbStringify } from './breadcrumb_utils';
|
|
4
4
|
|
|
5
5
|
export let path;
|
|
6
|
+
export let collapseLonger = false
|
|
6
7
|
|
|
7
8
|
let segments = []
|
|
8
9
|
let userClass = $$props.class ?? ''
|
|
@@ -34,24 +35,39 @@
|
|
|
34
35
|
{#each segments as segment, idx (segment.href)}
|
|
35
36
|
{@const isFirst = idx == 0}
|
|
36
37
|
{@const isLast = idx == segments.length-1}
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
38
|
+
{@const collapsable = collapseLonger && segments.length > 5}
|
|
39
|
+
{@const isCollapsed = collapsable && idx > 0 && idx < segments.length-3}
|
|
40
|
+
{@const isFirstCollapsed = isCollapsed && idx == 1}
|
|
41
|
+
|
|
42
|
+
{#if isCollapsed}
|
|
43
|
+
{#if isFirstCollapsed}
|
|
44
|
+
<svg class="rtl:rotate-180 w-3 h-3 text-stone-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
|
|
45
|
+
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
|
|
46
|
+
</svg>
|
|
47
|
+
<span class="ms-1 text-sm md:ms-2 font-semibold text-stone-900 dark:text-stone-100 whitespace-nowrap">
|
|
48
|
+
...
|
|
49
|
+
</span>
|
|
50
|
+
{/if}
|
|
51
|
+
{:else}
|
|
52
|
+
<li>
|
|
53
|
+
<div class="flex items-center">
|
|
54
|
+
{#if !isFirst}
|
|
55
|
+
<svg class="rtl:rotate-180 w-3 h-3 text-stone-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
|
|
56
|
+
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
|
|
57
|
+
</svg>
|
|
58
|
+
{/if}
|
|
59
|
+
{#if isLast}
|
|
60
|
+
<span class="ms-1 text-sm md:ms-2 font-semibold text-stone-900 dark:text-stone-100 whitespace-nowrap">
|
|
61
|
+
{segment.name}
|
|
62
|
+
</span>
|
|
63
|
+
{:else}
|
|
64
|
+
<a href={getSegmentHRef(segment.href, idx)} use:link class="ms-1 text-sm font-medium md:ms-2 text-stone-700 hover:text-stone-900 dark:text-stone-400 dark:hover:text-white whitespace-nowrap">
|
|
65
|
+
{segment.name}
|
|
66
|
+
</a>
|
|
67
|
+
{/if}
|
|
68
|
+
</div>
|
|
69
|
+
</li>
|
|
70
|
+
{/if}
|
|
55
71
|
{/each}
|
|
56
72
|
{/if}
|
|
57
73
|
|
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
export default class Breadcrumb extends SvelteComponentTyped<{
|
|
5
5
|
[x: string]: any;
|
|
6
6
|
path: any;
|
|
7
|
+
collapseLonger?: boolean | undefined;
|
|
7
8
|
}, {
|
|
8
9
|
[evt: string]: CustomEvent<any>;
|
|
9
10
|
}, {}> {
|
|
@@ -16,6 +17,7 @@ declare const __propDef: {
|
|
|
16
17
|
props: {
|
|
17
18
|
[x: string]: any;
|
|
18
19
|
path: any;
|
|
20
|
+
collapseLonger?: boolean | undefined;
|
|
19
21
|
};
|
|
20
22
|
events: {
|
|
21
23
|
[evt: string]: CustomEvent<any>;
|