@humandialog/forms.svelte 1.7.4 → 1.7.6
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.
- package/components/breadcrumb.svelte +72 -19
- package/index.d.ts +1 -1
- package/index.js +1 -1
- package/package.json +1 -1
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import {location, link, querystring} from 'svelte-spa-router'
|
|
3
3
|
import {randomString, isDeviceSmallerThan} from '../utils'
|
|
4
4
|
import { ext } from '../i18n.js';
|
|
5
|
+
import { afterUpdate } from 'svelte';
|
|
5
6
|
|
|
6
7
|
export let path;
|
|
7
8
|
export let collapseLonger = false
|
|
@@ -42,15 +43,68 @@
|
|
|
42
43
|
return idx < entriesNo-maxEntriesNo
|
|
43
44
|
}
|
|
44
45
|
|
|
46
|
+
let containerElement
|
|
47
|
+
let scrollableElement
|
|
48
|
+
/*let isScrolling = false
|
|
49
|
+
let startScrollLeft = 0
|
|
50
|
+
let startDragX = 0
|
|
51
|
+
let startDragY = 0
|
|
52
|
+
function mouseDown(e)
|
|
53
|
+
{
|
|
54
|
+
|
|
55
|
+
isScrolling = true
|
|
56
|
+
startDragX = e.offsetX
|
|
57
|
+
startDragY = e.offsetY
|
|
58
|
+
startScrollLeft = scrollableElement.scrollLeft
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
function mouseMove(e)
|
|
62
|
+
{
|
|
63
|
+
if(isScrolling)
|
|
64
|
+
{
|
|
65
|
+
const deltaX = startDragX - e.offsetX
|
|
66
|
+
//console.log('mouseMove', deltaX)
|
|
67
|
+
|
|
68
|
+
scrollableElement.scrollLeft = startScrollLeft + deltaX
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
function mouseUp(e)
|
|
73
|
+
{
|
|
74
|
+
console.log('mouseUp', e)
|
|
75
|
+
isScrolling = false
|
|
76
|
+
startDragX = 0
|
|
77
|
+
startDragY = 0
|
|
78
|
+
startScrollLeft = 0
|
|
79
|
+
}
|
|
80
|
+
*/
|
|
81
|
+
|
|
82
|
+
let pathElements = []
|
|
83
|
+
afterUpdate( () =>
|
|
84
|
+
{
|
|
85
|
+
const elementsNo = pathElements.length
|
|
86
|
+
if(elementsNo > 0)
|
|
87
|
+
{
|
|
88
|
+
// container: "nearest" not supported on iOS and mobile FF
|
|
89
|
+
//const lastElement = pathElements[elementsNo-1]
|
|
90
|
+
//lastElement.scrollIntoView({ container: "nearest"})
|
|
91
|
+
|
|
92
|
+
const containerRect = containerElement.getBoundingClientRect()
|
|
93
|
+
const wholeWidth = containerElement.scrollWidth
|
|
94
|
+
const visibleWidth = containerRect.width
|
|
95
|
+
containerElement.scrollLeft = wholeWidth - visibleWidth
|
|
96
|
+
|
|
97
|
+
}
|
|
98
|
+
})
|
|
99
|
+
|
|
45
100
|
</script>
|
|
46
101
|
|
|
47
|
-
<nav class="
|
|
48
|
-
<ol class="
|
|
102
|
+
<nav class="{userClass} w-full sm:w-fit sm:max-w-full overflow-x-auto sm:overflow-x-hidden" aria-label="Breadcrumb" bind:this={containerElement}>
|
|
103
|
+
<ol class="flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse flex-nowrap min-h-[1.25rem]" bind:this={scrollableElement}>
|
|
49
104
|
|
|
50
|
-
{#if (segments && segments.length >
|
|
105
|
+
{#if (segments && segments.length > 0)}
|
|
51
106
|
{#each segments as segment, idx (segment.uniqueKey)}
|
|
52
107
|
{@const isFirst = idx == 0}
|
|
53
|
-
{@const isLast = idx == segments.length-1}
|
|
54
108
|
{@const isCollapsed = shouldBeCollapsed(idx)}
|
|
55
109
|
{@const isFirstCollapsed = isCollapsed && idx == 0}
|
|
56
110
|
|
|
@@ -64,28 +118,27 @@
|
|
|
64
118
|
</span>
|
|
65
119
|
{/if}
|
|
66
120
|
{:else}
|
|
67
|
-
<li>
|
|
121
|
+
<li bind:this={pathElements[idx]}>
|
|
68
122
|
<div class="flex items-center">
|
|
69
123
|
{#if !isFirst}
|
|
70
|
-
|
|
124
|
+
<!--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">
|
|
71
125
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
|
|
72
|
-
</svg
|
|
126
|
+
</svg-->
|
|
127
|
+
<span class="text-sm font-medium text-stone-700 dark:text-stone-400 ">
|
|
128
|
+
/
|
|
129
|
+
</span>
|
|
73
130
|
{/if}
|
|
74
|
-
|
|
75
|
-
|
|
131
|
+
|
|
132
|
+
{#if segment.href}
|
|
133
|
+
<a href={segment.href} 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">
|
|
76
134
|
{ext(segment.name)}
|
|
77
|
-
</
|
|
135
|
+
</a>
|
|
78
136
|
{:else}
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
</a>
|
|
83
|
-
{:else}
|
|
84
|
-
<span class="ms-1 text-sm font-medium md:ms-2 text-stone-700 dark:text-stone-400 whitespace-nowrap">
|
|
85
|
-
{ext(segment.name)}
|
|
86
|
-
</span>
|
|
87
|
-
{/if}
|
|
137
|
+
<span class="ms-1 text-sm font-medium md:ms-2 text-stone-700 dark:text-stone-400 whitespace-nowrap">
|
|
138
|
+
{ext(segment.name)}
|
|
139
|
+
</span>
|
|
88
140
|
{/if}
|
|
141
|
+
|
|
89
142
|
</div>
|
|
90
143
|
</li>
|
|
91
144
|
{/if}
|
package/index.d.ts
CHANGED
|
@@ -60,7 +60,7 @@ export { KanbanColumnTop, KanbanColumnBottom } from './components/kanban/Kanban'
|
|
|
60
60
|
export { default as Paginator } from './components/paginator.svelte';
|
|
61
61
|
export { default as Breadcrumb } from './components/breadcrumb.svelte';
|
|
62
62
|
export { breadcrumbAdd, breadcrumbParse, breadcrumbStringify, breadcrumbClipName } from './components/breadcrumb_utils';
|
|
63
|
-
export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, getActiveItems, getActiveCount, addActiveItem, removeActiveItem, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, reloadPageToolbarOperations, isOnScreenKeyboardVisible, randomString, UI, NAV_MODE_SIDEBAR, NAV_MODE_FULL_PAGE, navGetMode, navIsVisible, navGetKey, navShow, navHide, navToggle, navPrevVisibleKey, navAutoHide, } from './utils';
|
|
63
|
+
export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, getActiveItems, getActiveCount, addActiveItem, removeActiveItem, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, reloadPageToolbarOperations, isOnScreenKeyboardVisible, randomString, UI, NAV_MODE_SIDEBAR, NAV_MODE_FULL_PAGE, navGetMode, navIsVisible, navGetKey, navShow, navHide, navToggle, navPrevVisibleKey, navAutoHide, insertAt, insertAfter, getPrev, getNext, getFirst, getLast, removeAt, remove, swapElements } from './utils';
|
|
64
64
|
export { getNiceStringDateTime, getFormattedStringDate, getNiceStringDate, dayName, monthName } from './components/date_utils';
|
|
65
65
|
export { mainContentPageReloader, reloadMainContentPage, reloadWholeApp, wholeAppReloader, alerts, addAlert, onErrorShowAlert, main_sidebar_visible_store, navKey, tagsReloader, reloadVisibleTags, dark_mode_store, showFABAlways } from './stores.js';
|
|
66
66
|
export { data_tick_store, // tmp
|
package/index.js
CHANGED
|
@@ -66,7 +66,7 @@ export { KanbanColumnTop, KanbanColumnBottom } from './components/kanban/Kanban'
|
|
|
66
66
|
export { default as Paginator } from './components/paginator.svelte';
|
|
67
67
|
export { default as Breadcrumb } from './components/breadcrumb.svelte';
|
|
68
68
|
export { breadcrumbAdd, breadcrumbParse, breadcrumbStringify, breadcrumbClipName } from './components/breadcrumb_utils';
|
|
69
|
-
export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, getActiveItems, getActiveCount, addActiveItem, removeActiveItem, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, reloadPageToolbarOperations, isOnScreenKeyboardVisible, randomString, UI, NAV_MODE_SIDEBAR, NAV_MODE_FULL_PAGE, navGetMode, navIsVisible, navGetKey, navShow, navHide, navToggle, navPrevVisibleKey, navAutoHide, } from './utils';
|
|
69
|
+
export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, getActiveItems, getActiveCount, addActiveItem, removeActiveItem, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, reloadPageToolbarOperations, isOnScreenKeyboardVisible, randomString, UI, NAV_MODE_SIDEBAR, NAV_MODE_FULL_PAGE, navGetMode, navIsVisible, navGetKey, navShow, navHide, navToggle, navPrevVisibleKey, navAutoHide, insertAt, insertAfter, getPrev, getNext, getFirst, getLast, removeAt, remove, swapElements } from './utils';
|
|
70
70
|
export { getNiceStringDateTime, getFormattedStringDate, getNiceStringDate, dayName, monthName } from './components/date_utils';
|
|
71
71
|
export { mainContentPageReloader, reloadMainContentPage, reloadWholeApp, wholeAppReloader, alerts, addAlert, onErrorShowAlert, main_sidebar_visible_store, navKey, tagsReloader, reloadVisibleTags, dark_mode_store, showFABAlways } from './stores.js';
|
|
72
72
|
export { data_tick_store, // tmp
|