@likable-hair/svelte 3.3.21 → 3.3.22
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/dist/components/composed/buttons/ActivableButton.svelte +6 -2
- package/dist/components/composed/buttons/ActivableButton.svelte.d.ts +36 -32
- package/dist/components/composed/common/MenuOrDrawer.svelte +21 -5
- package/dist/components/composed/common/MenuOrDrawer.svelte.d.ts +50 -36
- package/dist/components/composed/common/MenuOrDrawerOptions.svelte +29 -13
- package/dist/components/composed/common/MenuOrDrawerOptions.svelte.d.ts +34 -30
- package/dist/components/composed/common/QuickActions.svelte +52 -20
- package/dist/components/composed/common/QuickActions.svelte.d.ts +24 -20
- package/dist/components/composed/common/ToolTip.svelte +31 -22
- package/dist/components/composed/common/ToolTip.svelte.d.ts +32 -43
- package/dist/components/composed/forms/AsyncAutocomplete.svelte +44 -23
- package/dist/components/composed/forms/AsyncAutocomplete.svelte.d.ts +44 -39
- package/dist/components/composed/forms/AvatarDropdown.svelte +57 -27
- package/dist/components/composed/forms/AvatarDropdown.svelte.d.ts +45 -41
- package/dist/components/composed/forms/ConfirmOrCancelButtons.svelte +35 -17
- package/dist/components/composed/forms/ConfirmOrCancelButtons.svelte.d.ts +41 -37
- package/dist/components/composed/forms/CountriesAutocomplete.svelte +16 -7
- package/dist/components/composed/forms/CountriesAutocomplete.svelte.d.ts +31 -60
- package/dist/components/composed/forms/DatePickerTextField.svelte +166 -114
- package/dist/components/composed/forms/DatePickerTextField.svelte.d.ts +67 -63
- package/dist/components/composed/forms/Dropdown.svelte +51 -21
- package/dist/components/composed/forms/Dropdown.svelte.d.ts +48 -43
- package/dist/components/composed/forms/IconsDropdown.svelte +61 -33
- package/dist/components/composed/forms/IconsDropdown.svelte.d.ts +30 -26
- package/dist/components/composed/forms/LabelAndSelect.svelte +32 -7
- package/dist/components/composed/forms/LabelAndSelect.svelte.d.ts +35 -31
- package/dist/components/composed/forms/LabelAndTextField.svelte +30 -5
- package/dist/components/composed/forms/LabelAndTextField.svelte.d.ts +46 -42
- package/dist/components/composed/forms/ToggleList.svelte +59 -33
- package/dist/components/composed/forms/ToggleList.svelte.d.ts +21 -17
- package/dist/components/composed/forms/YearPickerTextField.svelte +114 -74
- package/dist/components/composed/forms/YearPickerTextField.svelte.d.ts +53 -49
- package/dist/components/composed/list/DynamicTable.svelte +1102 -707
- package/dist/components/composed/list/DynamicTable.svelte.d.ts +369 -365
- package/dist/components/composed/list/PaginatedTable.svelte +139 -76
- package/dist/components/composed/list/PaginatedTable.svelte.d.ts +108 -108
- package/dist/components/composed/progress/HorizontalStackedProgress.svelte +58 -30
- package/dist/components/composed/progress/HorizontalStackedProgress.svelte.d.ts +25 -21
- package/dist/components/composed/search/DynamicFilters.svelte +103 -82
- package/dist/components/composed/search/DynamicFilters.svelte.d.ts +31 -27
- package/dist/components/composed/search/FilterEditor.svelte +106 -77
- package/dist/components/composed/search/FilterEditor.svelte.d.ts +37 -33
- package/dist/components/composed/search/Filters.svelte +361 -292
- package/dist/components/composed/search/Filters.svelte.d.ts +55 -51
- package/dist/components/composed/search/GlobalSearchTextField.svelte +79 -41
- package/dist/components/composed/search/GlobalSearchTextField.svelte.d.ts +43 -39
- package/dist/components/composed/search/MobileFilterEditor.svelte +135 -93
- package/dist/components/composed/search/MobileFilterEditor.svelte.d.ts +39 -35
- package/dist/components/composed/search/SearchBar.svelte +28 -5
- package/dist/components/composed/search/SearchBar.svelte.d.ts +34 -30
- package/dist/components/composed/search/SearchResults.svelte +42 -7
- package/dist/components/composed/search/SearchResults.svelte.d.ts +40 -36
- package/dist/components/composed/shop/ProductCard.svelte +18 -4
- package/dist/components/composed/shop/ProductCard.svelte.d.ts +32 -28
- package/dist/components/composed/shop/ProductsGrid.svelte +22 -2
- package/dist/components/composed/shop/ProductsGrid.svelte.d.ts +44 -40
- package/dist/components/layouts/CollapsibleSideBarLayout.svelte +77 -38
- package/dist/components/layouts/CollapsibleSideBarLayout.svelte.d.ts +109 -69
- package/dist/components/layouts/StableDividedSideBarLayout.svelte +47 -17
- package/dist/components/layouts/StableDividedSideBarLayout.svelte.d.ts +50 -32
- package/dist/components/layouts/UnstableDividedSideBarLayout.svelte +53 -30
- package/dist/components/layouts/UnstableDividedSideBarLayout.svelte.d.ts +103 -63
- package/dist/components/simple/buttons/Button.svelte +78 -32
- package/dist/components/simple/buttons/Button.svelte.d.ts +47 -35
- package/dist/components/simple/buttons/LinkButton.svelte +54 -22
- package/dist/components/simple/buttons/LinkButton.svelte.d.ts +50 -33
- package/dist/components/simple/charts/GanymedeBarChart.svelte +172 -134
- package/dist/components/simple/charts/GanymedeBarChart.svelte.d.ts +50 -46
- package/dist/components/simple/charts/GanymedeLineChart.svelte +157 -115
- package/dist/components/simple/charts/GanymedeLineChart.svelte.d.ts +51 -47
- package/dist/components/simple/charts/GanymedePieChart.svelte +62 -39
- package/dist/components/simple/charts/GanymedePieChart.svelte.d.ts +37 -33
- package/dist/components/simple/common/Card.svelte +20 -1
- package/dist/components/simple/common/Card.svelte.d.ts +51 -38
- package/dist/components/simple/common/CollapsibleDivider.svelte +23 -11
- package/dist/components/simple/common/CollapsibleDivider.svelte.d.ts +29 -25
- package/dist/components/simple/common/Divider.svelte +8 -2
- package/dist/components/simple/common/Divider.svelte.d.ts +23 -19
- package/dist/components/simple/common/Gesture.svelte +64 -46
- package/dist/components/simple/common/Gesture.svelte.d.ts +21 -17
- package/dist/components/simple/common/InfiniteScroll.svelte +52 -29
- package/dist/components/simple/common/InfiniteScroll.svelte.d.ts +24 -20
- package/dist/components/simple/common/IntersectionObserver.svelte +45 -32
- package/dist/components/simple/common/IntersectionObserver.svelte.d.ts +34 -21
- package/dist/components/simple/common/MediaQuery.svelte +30 -21
- package/dist/components/simple/common/MediaQuery.svelte.d.ts +34 -30
- package/dist/components/simple/common/Menu.svelte +290 -201
- package/dist/components/simple/common/Menu.svelte.d.ts +51 -40
- package/dist/components/simple/common/Playground.svelte +18 -17
- package/dist/components/simple/common/Playground.svelte.d.ts +19 -15
- package/dist/components/simple/common/VerticalDraggableList.svelte +35 -16
- package/dist/components/simple/common/VerticalDraggableList.svelte.d.ts +33 -29
- package/dist/components/simple/dashboards/DashboardGridShaper.svelte +32 -26
- package/dist/components/simple/dashboards/DashboardGridShaper.svelte.d.ts +16 -12
- package/dist/components/simple/dates/Calendar.svelte +52 -28
- package/dist/components/simple/dates/Calendar.svelte.d.ts +45 -41
- package/dist/components/simple/dates/DatePicker.svelte +90 -60
- package/dist/components/simple/dates/DatePicker.svelte.d.ts +44 -40
- package/dist/components/simple/dates/MonthSelector.svelte +37 -15
- package/dist/components/simple/dates/MonthSelector.svelte.d.ts +35 -31
- package/dist/components/simple/dates/TimePicker.svelte +45 -31
- package/dist/components/simple/dates/TimePicker.svelte.d.ts +24 -20
- package/dist/components/simple/dates/TimePickerTextField.svelte +56 -35
- package/dist/components/simple/dates/TimePickerTextField.svelte.d.ts +28 -24
- package/dist/components/simple/dates/YearSelector.svelte +54 -29
- package/dist/components/simple/dates/YearSelector.svelte.d.ts +35 -31
- package/dist/components/simple/dialogs/Dialog.svelte +92 -62
- package/dist/components/simple/dialogs/Dialog.svelte.d.ts +42 -28
- package/dist/components/simple/forms/Autocomplete.svelte +201 -142
- package/dist/components/simple/forms/Autocomplete.svelte.d.ts +83 -79
- package/dist/components/simple/forms/Checkbox.svelte +40 -24
- package/dist/components/simple/forms/Checkbox.svelte.d.ts +25 -21
- package/dist/components/simple/forms/FileInput.svelte +88 -48
- package/dist/components/simple/forms/FileInput.svelte.d.ts +37 -33
- package/dist/components/simple/forms/FileInputList.svelte +52 -34
- package/dist/components/simple/forms/FileInputList.svelte.d.ts +43 -39
- package/dist/components/simple/forms/RadioButton.svelte +11 -3
- package/dist/components/simple/forms/RadioButton.svelte.d.ts +31 -27
- package/dist/components/simple/forms/Select.svelte +16 -3
- package/dist/components/simple/forms/Select.svelte.d.ts +24 -20
- package/dist/components/simple/forms/SimpleTextField.svelte +53 -6
- package/dist/components/simple/forms/SimpleTextField.svelte.d.ts +64 -60
- package/dist/components/simple/forms/Switch.svelte +30 -16
- package/dist/components/simple/forms/Switch.svelte.d.ts +25 -21
- package/dist/components/simple/forms/Textarea.svelte +27 -2
- package/dist/components/simple/forms/Textarea.svelte.d.ts +41 -37
- package/dist/components/simple/forms/Textfield.svelte +56 -18
- package/dist/components/simple/forms/Textfield.svelte.d.ts +55 -51
- package/dist/components/simple/forms/TreeEditor.svelte +141 -95
- package/dist/components/simple/forms/TreeEditor.svelte.d.ts +42 -38
- package/dist/components/simple/forms/TreeEditorItem.svelte +77 -42
- package/dist/components/simple/forms/TreeEditorItem.svelte.d.ts +54 -50
- package/dist/components/simple/forms/VerticalSwitch.svelte +11 -1
- package/dist/components/simple/forms/VerticalSwitch.svelte.d.ts +32 -28
- package/dist/components/simple/forms/VerticalTextSwitch.svelte +15 -3
- package/dist/components/simple/forms/VerticalTextSwitch.svelte.d.ts +30 -26
- package/dist/components/simple/lists/ColorInvertedSelector.svelte +53 -23
- package/dist/components/simple/lists/ColorInvertedSelector.svelte.d.ts +46 -42
- package/dist/components/simple/lists/HierarchyMenu.svelte +38 -19
- package/dist/components/simple/lists/HierarchyMenu.svelte.d.ts +34 -30
- package/dist/components/simple/lists/Paginator.svelte +50 -41
- package/dist/components/simple/lists/Paginator.svelte.d.ts +23 -19
- package/dist/components/simple/lists/SelectableMenuList.svelte +43 -15
- package/dist/components/simple/lists/SelectableMenuList.svelte.d.ts +24 -20
- package/dist/components/simple/lists/SelectableVerticalList.svelte +99 -57
- package/dist/components/simple/lists/SelectableVerticalList.svelte.d.ts +51 -47
- package/dist/components/simple/lists/SidebarMenuList.svelte +115 -70
- package/dist/components/simple/lists/SidebarMenuList.svelte.d.ts +26 -22
- package/dist/components/simple/lists/SimpleTable.svelte +264 -154
- package/dist/components/simple/lists/SimpleTable.svelte.d.ts +70 -66
- package/dist/components/simple/loaders/CircularLoader.svelte +16 -5
- package/dist/components/simple/loaders/CircularLoader.svelte.d.ts +19 -15
- package/dist/components/simple/loaders/Skeleton.svelte +3 -2
- package/dist/components/simple/loaders/Skeleton.svelte.d.ts +16 -12
- package/dist/components/simple/media/AttachmentDownloader.svelte +17 -3
- package/dist/components/simple/media/AttachmentDownloader.svelte.d.ts +32 -28
- package/dist/components/simple/media/Avatar.svelte +18 -12
- package/dist/components/simple/media/Avatar.svelte.d.ts +31 -20
- package/dist/components/simple/media/Carousel.svelte +29 -11
- package/dist/components/simple/media/Carousel.svelte.d.ts +28 -24
- package/dist/components/simple/media/DescriptiveAvatar.svelte +12 -4
- package/dist/components/simple/media/DescriptiveAvatar.svelte.d.ts +44 -28
- package/dist/components/simple/media/FlagIcon.svelte +8 -5
- package/dist/components/simple/media/FlagIcon.svelte.d.ts +19 -15
- package/dist/components/simple/media/Gallery.svelte +49 -29
- package/dist/components/simple/media/Gallery.svelte.d.ts +27 -23
- package/dist/components/simple/media/Icon.svelte +9 -4
- package/dist/components/simple/media/Icon.svelte.d.ts +24 -20
- package/dist/components/simple/media/Image.svelte +42 -20
- package/dist/components/simple/media/Image.svelte.d.ts +44 -33
- package/dist/components/simple/media/ImageGrid.svelte +37 -12
- package/dist/components/simple/media/ImageGrid.svelte.d.ts +32 -28
- package/dist/components/simple/navigation/Breadcrumb.svelte +28 -10
- package/dist/components/simple/navigation/Breadcrumb.svelte.d.ts +26 -22
- package/dist/components/simple/navigation/Chip.svelte +44 -23
- package/dist/components/simple/navigation/Chip.svelte.d.ts +42 -31
- package/dist/components/simple/navigation/Drawer.svelte +107 -65
- package/dist/components/simple/navigation/Drawer.svelte.d.ts +50 -37
- package/dist/components/simple/navigation/HeaderMenu.svelte +40 -23
- package/dist/components/simple/navigation/HeaderMenu.svelte.d.ts +39 -35
- package/dist/components/simple/navigation/Navigator.svelte +30 -8
- package/dist/components/simple/navigation/Navigator.svelte.d.ts +28 -24
- package/dist/components/simple/navigation/TabSwitcher.svelte +83 -47
- package/dist/components/simple/navigation/TabSwitcher.svelte.d.ts +38 -34
- package/dist/components/simple/notifiers/AlertBanner.svelte +43 -15
- package/dist/components/simple/notifiers/AlertBanner.svelte.d.ts +41 -37
- package/dist/components/simple/progress/ProgressBar.svelte +20 -13
- package/dist/components/simple/progress/ProgressBar.svelte.d.ts +21 -17
- package/dist/components/simple/timeline/SimpleTimeLine.svelte +19 -5
- package/dist/components/simple/timeline/SimpleTimeLine.svelte.d.ts +39 -35
- package/dist/components/simple/typography/Code.svelte +27 -12
- package/dist/components/simple/typography/Code.svelte.d.ts +28 -24
- package/dist/stores/debounce.d.ts +0 -1
- package/dist/stores/layouts/unstableSidebarOpened.d.ts +0 -1
- package/dist/stores/mediaQuery.d.ts +0 -1
- package/dist/stores/theme.d.ts +0 -1
- package/dist/utils/filters/builder.d.ts +2 -0
- package/dist/utils/filters/builder.js +20 -0
- package/dist/utils/filters/modifiers/where.d.ts +10 -3
- package/package.json +1 -1
|
@@ -1,269 +1,358 @@
|
|
|
1
|
-
<script
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
let
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { createId } from '@paralleldrive/cuid2';
|
|
3
|
+
|
|
4
|
+
import {
|
|
5
|
+
fly,
|
|
6
|
+
type FadeParams,
|
|
7
|
+
type FlyParams,
|
|
8
|
+
type SlideParams,
|
|
9
|
+
type TransitionConfig,
|
|
10
|
+
} from "svelte/transition";
|
|
11
|
+
|
|
12
|
+
import { sidebarOpened } from '../../../stores/layouts/unstableSidebarOpened';
|
|
13
|
+
|
|
14
|
+
export let _top: number | undefined = undefined,
|
|
15
|
+
_left: number | undefined = undefined,
|
|
16
|
+
_width: string = 'auto',
|
|
17
|
+
_height: string = 'auto',
|
|
18
|
+
_maxHeight: string | undefined = undefined,
|
|
19
|
+
_minWidth: string | undefined = undefined,
|
|
20
|
+
_overflow = "auto",
|
|
21
|
+
_boxShadow: string | undefined = undefined,
|
|
22
|
+
_borderRadius: string | undefined = undefined,
|
|
23
|
+
_activatorGap: number = 5
|
|
24
|
+
|
|
25
|
+
export let open = false,
|
|
26
|
+
refreshPosition = false,
|
|
27
|
+
activator: HTMLElement | undefined = undefined,
|
|
28
|
+
anchor: "bottom" | "bottom-center" | "right-center" = "bottom",
|
|
29
|
+
closeOnClickOutside = false,
|
|
30
|
+
inAnimation: (
|
|
31
|
+
node: Element,
|
|
32
|
+
params?: SlideParams | FlyParams | FadeParams
|
|
33
|
+
) => TransitionConfig = fly,
|
|
34
|
+
inAnimationConfig: SlideParams | FlyParams | FadeParams = {
|
|
35
|
+
duration: 100,
|
|
36
|
+
y: 10,
|
|
37
|
+
},
|
|
38
|
+
outAnimation: (
|
|
39
|
+
node: Element,
|
|
40
|
+
params?: SlideParams | FlyParams | FadeParams
|
|
41
|
+
) => TransitionConfig = fly,
|
|
42
|
+
outAnimationConfig: SlideParams | FlyParams | FadeParams = {
|
|
43
|
+
duration: 100,
|
|
44
|
+
y: 10,
|
|
45
|
+
},
|
|
46
|
+
menuElement: HTMLElement | undefined = undefined,
|
|
47
|
+
flipOnOverflow: boolean = false,
|
|
48
|
+
stayInViewport: boolean = false,
|
|
49
|
+
openingId: string | undefined = undefined;
|
|
50
|
+
|
|
51
|
+
let zIndex = 50,
|
|
52
|
+
currentUid: string = createId(),
|
|
53
|
+
closeController: HTMLElement;
|
|
54
|
+
|
|
55
|
+
function calculateMenuPosition(params: {
|
|
56
|
+
activator: HTMLElement;
|
|
57
|
+
menuElement: HTMLElement;
|
|
58
|
+
}) {
|
|
59
|
+
if (params.menuElement) {
|
|
60
|
+
if (params.activator) {
|
|
61
|
+
if (anchor == "bottom") {
|
|
62
|
+
let { left: activatorLeft, top: activatorTop } =
|
|
63
|
+
params.activator.getBoundingClientRect();
|
|
64
|
+
let activatorHeight = params.activator.offsetHeight;
|
|
65
|
+
_top = activatorTop + activatorHeight + _activatorGap;
|
|
66
|
+
_left = activatorLeft;
|
|
67
|
+
|
|
68
|
+
let { top: fixedParentTop, left: fixedParentLeft, fixedParent, validStickyParent } = getParentInstanceFromViewport(activator?.parentElement);
|
|
69
|
+
if(!!fixedParent) {
|
|
70
|
+
_top = _top - fixedParentTop
|
|
71
|
+
_left = _left - fixedParentLeft
|
|
72
|
+
} else if(!validStickyParent && !fixedParent) {
|
|
73
|
+
_top = _top + window.scrollY
|
|
74
|
+
_left = _left + window.scrollX
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
} else if (anchor == "bottom-center") {
|
|
78
|
+
let { left: activatorLeft, top: activatorTop } =
|
|
79
|
+
params.activator.getBoundingClientRect();
|
|
80
|
+
let activatorHeight = params.activator.offsetHeight;
|
|
81
|
+
let activatorWidth = params.activator.offsetWidth;
|
|
82
|
+
let menuWidth = params.menuElement.offsetWidth;
|
|
83
|
+
_top = activatorTop + activatorHeight + _activatorGap;
|
|
84
|
+
_left = activatorLeft;
|
|
85
|
+
|
|
86
|
+
let { top: fixedParentTop, left: fixedParentLeft, fixedParent, validStickyParent } = getParentInstanceFromViewport(activator?.parentElement);
|
|
87
|
+
if(!!fixedParent) {
|
|
88
|
+
_top = _top - fixedParentTop
|
|
89
|
+
_left = _left - fixedParentLeft
|
|
90
|
+
} else if(!validStickyParent && !fixedParent) {
|
|
91
|
+
_top = _top + window.scrollY
|
|
92
|
+
_left = _left + window.scrollX
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
if (menuWidth > activatorWidth) {
|
|
96
|
+
_left = _left - (menuWidth - activatorWidth) / 2;
|
|
97
|
+
} else {
|
|
98
|
+
_left = _left + (activatorWidth - menuWidth) / 2;
|
|
99
|
+
}
|
|
100
|
+
} else if (anchor == 'right-center') {
|
|
101
|
+
let { left: activatorLeft, top: activatorTop } =
|
|
102
|
+
params.activator.getBoundingClientRect();
|
|
103
|
+
let activatorHeight = params.activator.offsetHeight;
|
|
104
|
+
let activatorWidth = params.activator.offsetWidth;
|
|
105
|
+
let menuHeight = params.menuElement.offsetHeight;
|
|
106
|
+
let { top: fixedParentTop, left: fixedParentLeft } = getParentInstanceFromViewport(activator?.parentElement);
|
|
107
|
+
|
|
108
|
+
_top = activatorTop + window.scrollY + (activatorHeight / 2) - (menuHeight / 2) - fixedParentTop;
|
|
109
|
+
_left = activatorLeft + window.scrollX + activatorWidth + _activatorGap - fixedParentLeft;
|
|
30
110
|
}
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
let
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
_left = activatorLeft;
|
|
38
|
-
let { top: fixedParentTop, left: fixedParentLeft, fixedParent, validStickyParent } = getParentInstanceFromViewport(activator?.parentElement);
|
|
39
|
-
if (!!fixedParent) {
|
|
40
|
-
_top = _top - fixedParentTop;
|
|
41
|
-
_left = _left - fixedParentLeft;
|
|
42
|
-
} else if (!validStickyParent && !fixedParent) {
|
|
43
|
-
_top = _top + window.scrollY;
|
|
44
|
-
_left = _left + window.scrollX;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
if(flipOnOverflow && !!params.activator) {
|
|
114
|
+
let { top: activatorTopDistance } = params.activator.getBoundingClientRect()
|
|
115
|
+
if (window.innerHeight < activatorTopDistance + (menuElement?.offsetHeight || 0) + ((menuElement?.offsetHeight || 0) * 0.1)) {
|
|
116
|
+
_top = getTopDistance(params.activator) - _activatorGap - (menuElement?.offsetHeight || 0)
|
|
45
117
|
}
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
118
|
+
|
|
119
|
+
if (
|
|
120
|
+
anchor == 'right-center' &&
|
|
121
|
+
window.innerWidth + window.scrollX <
|
|
122
|
+
(_left || 0) + (menuElement?.offsetWidth || 0)
|
|
123
|
+
) {
|
|
124
|
+
let { left: activatorLeft } = params.activator.getBoundingClientRect();
|
|
125
|
+
_left = activatorLeft + window.scrollX - _activatorGap - (menuElement?.offsetWidth || 0)
|
|
50
126
|
}
|
|
51
|
-
} else if (anchor == "right-center") {
|
|
52
|
-
let { left: activatorLeft, top: activatorTop } = params.activator.getBoundingClientRect();
|
|
53
|
-
let activatorHeight = params.activator.offsetHeight;
|
|
54
|
-
let activatorWidth = params.activator.offsetWidth;
|
|
55
|
-
let menuHeight = params.menuElement.offsetHeight;
|
|
56
|
-
let { top: fixedParentTop, left: fixedParentLeft } = getParentInstanceFromViewport(activator?.parentElement);
|
|
57
|
-
_top = activatorTop + window.scrollY + activatorHeight / 2 - menuHeight / 2 - fixedParentTop;
|
|
58
|
-
_left = activatorLeft + window.scrollX + activatorWidth + _activatorGap - fixedParentLeft;
|
|
59
127
|
}
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
if (stayInViewport) {
|
|
72
|
-
if (window.innerWidth + window.scrollX < (_left || 0) + (menuElement?.offsetWidth || 0)) {
|
|
73
|
-
_left = Math.max(
|
|
74
|
-
window.innerWidth + window.scrollX - (menuElement?.offsetWidth || 0),
|
|
75
|
-
0
|
|
76
|
-
);
|
|
128
|
+
|
|
129
|
+
if(stayInViewport) {
|
|
130
|
+
if (
|
|
131
|
+
window.innerWidth + window.scrollX <
|
|
132
|
+
(_left || 0) + (menuElement?.offsetWidth || 0)
|
|
133
|
+
) {
|
|
134
|
+
_left = Math.max(
|
|
135
|
+
window.innerWidth + window.scrollX - (menuElement?.offsetWidth || 0),
|
|
136
|
+
0
|
|
137
|
+
);
|
|
138
|
+
}
|
|
77
139
|
}
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
_left = 0
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
140
|
+
|
|
141
|
+
if(!!positionedAncestor) {
|
|
142
|
+
let { left: positionedAncestorLeft, top: positionedAncestorTop } = positionedAncestor.getBoundingClientRect();
|
|
143
|
+
|
|
144
|
+
if(!_left) _left = 0
|
|
145
|
+
if(!_top) _top = 0
|
|
146
|
+
|
|
147
|
+
_left = _left - (positionedAncestorLeft + window.scrollX)
|
|
148
|
+
_top = _top - (positionedAncestorTop + window.scrollY)
|
|
149
|
+
|
|
150
|
+
if(!!activator) {
|
|
151
|
+
let { validStickyParent, fixedParent } = getParentInstanceFromViewport(activator?.parentElement)
|
|
152
|
+
if(!!validStickyParent || !!fixedParent) {
|
|
153
|
+
_left = _left + window.scrollX
|
|
154
|
+
_top = _top + window.scrollY
|
|
155
|
+
}
|
|
92
156
|
}
|
|
93
157
|
}
|
|
94
158
|
}
|
|
95
159
|
}
|
|
96
|
-
|
|
97
|
-
function getTopDistance(elem) {
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
160
|
+
|
|
161
|
+
function getTopDistance(elem: HTMLElement): number {
|
|
162
|
+
let positionedAncestor = getPositionedAncestor(elem)
|
|
163
|
+
if(!!positionedAncestor) {
|
|
164
|
+
let top: number = parseInt(getComputedStyle(positionedAncestor).top)
|
|
165
|
+
return (isNaN(top) ? 0 : top) + elem.offsetTop - calcScrollY(elem)
|
|
166
|
+
}
|
|
167
|
+
return window.scrollY + elem.getBoundingClientRect().top
|
|
102
168
|
}
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
169
|
+
|
|
170
|
+
function calcScrollY(elem: HTMLElement): number {
|
|
171
|
+
let parent = elem.parentElement
|
|
172
|
+
let scroll = 0
|
|
173
|
+
while(!!parent) {
|
|
174
|
+
scroll += parent.scrollTop
|
|
175
|
+
let parentPosition = getComputedStyle(parent).position
|
|
176
|
+
if(parentPosition === 'absolute' || parentPosition === 'fixed' || parentPosition === 'relative') break
|
|
177
|
+
parent = parent.parentElement
|
|
178
|
+
}
|
|
179
|
+
return scroll
|
|
114
180
|
}
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
$:
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
break;
|
|
126
|
-
parent = parent.parentElement;
|
|
181
|
+
|
|
182
|
+
|
|
183
|
+
$: if (open) {
|
|
184
|
+
if(!!activator) {
|
|
185
|
+
let parent = activator.parentElement
|
|
186
|
+
while(!!parent) {
|
|
187
|
+
let parentPosition = getComputedStyle(parent).position
|
|
188
|
+
parent.addEventListener('scroll', refreshMenuPosition)
|
|
189
|
+
if(parentPosition == 'absolute' || parentPosition == 'fixed' || parentPosition === 'relative') break
|
|
190
|
+
parent = parent.parentElement
|
|
127
191
|
}
|
|
128
192
|
}
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
193
|
+
|
|
194
|
+
if(!!openingId) {
|
|
195
|
+
const controllers = document.querySelectorAll(`[data-operation="close"][data-opening-id="${openingId}"]`)
|
|
196
|
+
for(let k = 0; k < controllers.length; k += 1) {
|
|
197
|
+
if(controllers[k] !== closeController) {
|
|
198
|
+
const clickEvent = new MouseEvent('click', {
|
|
134
199
|
bubbles: true,
|
|
135
200
|
cancelable: true,
|
|
136
201
|
view: window
|
|
137
|
-
})
|
|
138
|
-
|
|
202
|
+
})
|
|
203
|
+
|
|
204
|
+
controllers[k].dispatchEvent(clickEvent)
|
|
139
205
|
}
|
|
140
206
|
}
|
|
141
207
|
}
|
|
142
|
-
|
|
143
|
-
let
|
|
144
|
-
|
|
208
|
+
|
|
209
|
+
let otherMenus: NodeListOf<HTMLElement> =
|
|
210
|
+
document.querySelectorAll("[data-menu]");
|
|
211
|
+
let otherDialogs: NodeListOf<HTMLElement> =
|
|
212
|
+
document.querySelectorAll("[data-dialog]");
|
|
213
|
+
|
|
214
|
+
let maxZIndex: number | undefined = undefined;
|
|
145
215
|
if (otherDialogs.length > 0) {
|
|
146
216
|
otherDialogs.forEach((dialog) => {
|
|
147
217
|
if (!maxZIndex || maxZIndex < Number(dialog.style.zIndex))
|
|
148
218
|
maxZIndex = Number(dialog.style.zIndex);
|
|
149
219
|
});
|
|
150
220
|
}
|
|
221
|
+
|
|
151
222
|
if (otherMenus.length > 0) {
|
|
152
223
|
otherMenus.forEach((menu) => {
|
|
153
224
|
if (!maxZIndex || maxZIndex < Number(menu.style.zIndex))
|
|
154
225
|
maxZIndex = Number(menu.style.zIndex);
|
|
155
226
|
});
|
|
156
227
|
}
|
|
228
|
+
|
|
157
229
|
if (!!activator && !!menuElement)
|
|
158
230
|
calculateMenuPosition({ activator, menuElement });
|
|
159
|
-
|
|
160
|
-
|
|
231
|
+
|
|
232
|
+
if (maxZIndex) zIndex = maxZIndex + 2;
|
|
161
233
|
}
|
|
162
|
-
$:
|
|
163
|
-
if (!!_width && !!activator && !!menuElement) {
|
|
234
|
+
$: if (!!_width && !!activator && !!menuElement) {
|
|
164
235
|
setTimeout(() => {
|
|
165
|
-
if
|
|
236
|
+
if(!!activator && !!menuElement)
|
|
166
237
|
calculateMenuPosition({ activator, menuElement });
|
|
167
|
-
}, 1)
|
|
238
|
+
}, 1)
|
|
168
239
|
}
|
|
169
|
-
$:
|
|
170
|
-
if (refreshPosition && !!activator && !!menuElement) {
|
|
240
|
+
$: if (refreshPosition && !!activator && !!menuElement) {
|
|
171
241
|
calculateMenuPosition({ activator, menuElement });
|
|
172
242
|
refreshPosition = false;
|
|
173
243
|
}
|
|
174
|
-
$:
|
|
175
|
-
if (closeOnClickOutside && !!menuElement) {
|
|
244
|
+
$: if (closeOnClickOutside && !!menuElement) {
|
|
176
245
|
window.addEventListener("mousedown", () => {
|
|
177
246
|
open = false;
|
|
178
247
|
});
|
|
248
|
+
|
|
179
249
|
window.addEventListener("touchstart", () => {
|
|
180
250
|
open = false;
|
|
181
251
|
});
|
|
252
|
+
|
|
182
253
|
if (activator) {
|
|
183
254
|
activator.addEventListener("mousedown", (event) => {
|
|
184
255
|
event.stopPropagation();
|
|
185
256
|
});
|
|
257
|
+
|
|
186
258
|
activator.addEventListener("touchstart", (event) => {
|
|
187
259
|
event.stopPropagation();
|
|
188
260
|
});
|
|
189
261
|
}
|
|
262
|
+
|
|
190
263
|
menuElement.addEventListener("mousedown", (event) => {
|
|
191
264
|
event.stopPropagation();
|
|
192
265
|
});
|
|
266
|
+
|
|
193
267
|
menuElement.addEventListener("touchstart", (event) => {
|
|
194
268
|
event.stopPropagation();
|
|
195
269
|
});
|
|
196
270
|
}
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
271
|
+
|
|
272
|
+
|
|
273
|
+
let positionedAncestor: HTMLElement | undefined = undefined
|
|
274
|
+
|
|
275
|
+
$: if(!!menuElement && !!activator) {
|
|
276
|
+
let elem = getPositionedAncestor(menuElement.parentElement)
|
|
277
|
+
positionedAncestor = elem == null ? undefined : elem
|
|
278
|
+
calculateMenuPosition({menuElement, activator})
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
function getPositionedAncestor(elem: HTMLElement | null): HTMLElement | null {
|
|
282
|
+
if (!elem) return null
|
|
283
|
+
if (['fixed', 'absolute', 'sticky', 'relative'].includes(getComputedStyle(elem).position)) return elem
|
|
284
|
+
return getPositionedAncestor(elem.parentElement)
|
|
203
285
|
}
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
if (["fixed", "absolute", "sticky", "relative"].includes(getComputedStyle(elem).position))
|
|
208
|
-
return elem;
|
|
209
|
-
return getPositionedAncestor(elem.parentElement);
|
|
210
|
-
}
|
|
211
|
-
function handleCloseControllerClick() {
|
|
212
|
-
open = false;
|
|
213
|
-
}
|
|
214
|
-
function getParentInstanceFromViewport(activatorParent) {
|
|
215
|
-
let top = 0;
|
|
216
|
-
let left = 0;
|
|
217
|
-
let fixedParent = void 0;
|
|
218
|
-
let stickyParent = !!activatorParent && getComputedStyle(activatorParent).position === "sticky" ? activatorParent : void 0;
|
|
219
|
-
let isStickyValid = false;
|
|
220
|
-
while (!!activatorParent && activatorParent.nodeName.toLowerCase() !== "html" && activatorParent.nodeName.toLowerCase() !== "body") {
|
|
221
|
-
const currentParent = activatorParent.parentElement;
|
|
222
|
-
if (!currentParent)
|
|
223
|
-
break;
|
|
224
|
-
const computedStyle = getComputedStyle(currentParent);
|
|
225
|
-
const position = computedStyle.position;
|
|
226
|
-
const display = computedStyle.display;
|
|
227
|
-
if ((position === "fixed" || position === "absolute" || position === "relative") && display === "flex") {
|
|
228
|
-
const boundingClientRect = activatorParent.getBoundingClientRect();
|
|
229
|
-
top = top + boundingClientRect.top;
|
|
230
|
-
left = left + boundingClientRect.left;
|
|
231
|
-
fixedParent = activatorParent;
|
|
232
|
-
}
|
|
233
|
-
if (position === "sticky") {
|
|
234
|
-
stickyParent = activatorParent;
|
|
235
|
-
}
|
|
236
|
-
if (position === "relative" && !!stickyParent) {
|
|
237
|
-
isStickyValid = true;
|
|
238
|
-
}
|
|
239
|
-
activatorParent = activatorParent.parentElement;
|
|
286
|
+
|
|
287
|
+
function handleCloseControllerClick() {
|
|
288
|
+
open = false
|
|
240
289
|
}
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
let
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
290
|
+
|
|
291
|
+
function getParentInstanceFromViewport(activatorParent: HTMLElement | undefined | null): {
|
|
292
|
+
top: number
|
|
293
|
+
left: number
|
|
294
|
+
fixedParent?: HTMLElement,
|
|
295
|
+
validStickyParent?: HTMLElement
|
|
296
|
+
} {
|
|
297
|
+
let top = 0
|
|
298
|
+
let left = 0
|
|
299
|
+
let fixedParent: HTMLElement | undefined = undefined
|
|
300
|
+
let stickyParent: HTMLElement | undefined = !!activatorParent && getComputedStyle(activatorParent).position === 'sticky' ? activatorParent : undefined
|
|
301
|
+
let isStickyValid: boolean = false
|
|
302
|
+
|
|
303
|
+
while(!!activatorParent && activatorParent.nodeName.toLowerCase() !== 'html' && activatorParent.nodeName.toLowerCase() !== 'body') {
|
|
304
|
+
const currentParent = activatorParent.parentElement
|
|
305
|
+
if(!currentParent) break
|
|
306
|
+
|
|
307
|
+
const computedStyle = getComputedStyle(currentParent)
|
|
308
|
+
const position = computedStyle.position;
|
|
309
|
+
const display = computedStyle.display;
|
|
310
|
+
|
|
311
|
+
if((position === 'fixed' || position === 'absolute' || position === 'relative') && display === "flex") {
|
|
312
|
+
const boundingClientRect = activatorParent.getBoundingClientRect();
|
|
313
|
+
top = top + boundingClientRect.top
|
|
314
|
+
left = left + boundingClientRect.left
|
|
315
|
+
fixedParent = activatorParent
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
if(position === 'sticky') {
|
|
319
|
+
stickyParent = activatorParent
|
|
260
320
|
}
|
|
321
|
+
|
|
322
|
+
if(position === 'relative' && !!stickyParent) {
|
|
323
|
+
isStickyValid = true
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
activatorParent = activatorParent.parentElement
|
|
327
|
+
|
|
261
328
|
}
|
|
262
|
-
|
|
263
|
-
}
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
329
|
+
return { top, left, fixedParent, validStickyParent: isStickyValid ? stickyParent : undefined }
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
function refreshMenuPosition() {
|
|
333
|
+
if(open && !!menuElement && !!activator) calculateMenuPosition({ menuElement, activator })
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
function handleMenuClick(e: MouseEvent, zIndex: number) {
|
|
337
|
+
let otherMenus: NodeListOf<HTMLElement> = document.querySelectorAll(`[data-menu]`)
|
|
338
|
+
otherMenus.forEach(m => {
|
|
339
|
+
let uid = m.getAttribute('data-uid')
|
|
340
|
+
if(uid !== currentUid && Number(m.style.zIndex) > zIndex) {
|
|
341
|
+
let controller = document.querySelector(`[data-operation="close"][data-uid="${uid}"]`)
|
|
342
|
+
if(!!controller) {
|
|
343
|
+
const clickEvent = new MouseEvent('click', {
|
|
344
|
+
bubbles: false,
|
|
345
|
+
cancelable: true,
|
|
346
|
+
view: window
|
|
347
|
+
})
|
|
348
|
+
controller.dispatchEvent(clickEvent)
|
|
349
|
+
}
|
|
350
|
+
}
|
|
351
|
+
})
|
|
352
|
+
}
|
|
353
|
+
|
|
354
|
+
// TODO find a better way to update menu positions with animations
|
|
355
|
+
$: if($sidebarOpened !== undefined) setTimeout(refreshMenuPosition, 300)
|
|
267
356
|
</script>
|
|
268
357
|
|
|
269
358
|
<svelte:window on:scroll={refreshMenuPosition} on:resize={refreshMenuPosition} ></svelte:window>
|
|
@@ -1,43 +1,54 @@
|
|
|
1
|
-
import { SvelteComponent } from "svelte";
|
|
2
1
|
import { type FadeParams, type FlyParams, type SlideParams, type TransitionConfig } from "svelte/transition";
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
_borderRadius?: string | undefined;
|
|
14
|
-
_activatorGap?: number | undefined;
|
|
15
|
-
open?: boolean | undefined;
|
|
16
|
-
refreshPosition?: boolean | undefined;
|
|
17
|
-
activator?: HTMLElement | undefined;
|
|
18
|
-
anchor?: "bottom" | "bottom-center" | "right-center" | undefined;
|
|
19
|
-
closeOnClickOutside?: boolean | undefined;
|
|
20
|
-
inAnimation?: ((node: Element, params?: SlideParams | FlyParams | FadeParams) => TransitionConfig) | undefined;
|
|
21
|
-
inAnimationConfig?: SlideParams | FlyParams | FadeParams | undefined;
|
|
22
|
-
outAnimation?: ((node: Element, params?: SlideParams | FlyParams | FadeParams) => TransitionConfig) | undefined;
|
|
23
|
-
outAnimationConfig?: SlideParams | FlyParams | FadeParams | undefined;
|
|
24
|
-
menuElement?: HTMLElement | undefined;
|
|
25
|
-
flipOnOverflow?: boolean | undefined;
|
|
26
|
-
stayInViewport?: boolean | undefined;
|
|
27
|
-
openingId?: string | undefined;
|
|
2
|
+
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
3
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
4
|
+
$$bindings?: Bindings;
|
|
5
|
+
} & Exports;
|
|
6
|
+
(internal: unknown, props: Props & {
|
|
7
|
+
$$events?: Events;
|
|
8
|
+
$$slots?: Slots;
|
|
9
|
+
}): Exports & {
|
|
10
|
+
$set?: any;
|
|
11
|
+
$on?: any;
|
|
28
12
|
};
|
|
29
|
-
|
|
30
|
-
keydown: KeyboardEvent;
|
|
31
|
-
} & {
|
|
32
|
-
[evt: string]: CustomEvent<any>;
|
|
33
|
-
};
|
|
34
|
-
slots: {
|
|
35
|
-
default: {};
|
|
36
|
-
};
|
|
37
|
-
};
|
|
38
|
-
export type MenuProps = typeof __propDef.props;
|
|
39
|
-
export type MenuEvents = typeof __propDef.events;
|
|
40
|
-
export type MenuSlots = typeof __propDef.slots;
|
|
41
|
-
export default class Menu extends SvelteComponent<MenuProps, MenuEvents, MenuSlots> {
|
|
13
|
+
z_$$bindings?: Bindings;
|
|
42
14
|
}
|
|
43
|
-
|
|
15
|
+
type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
|
|
16
|
+
default: any;
|
|
17
|
+
} ? Props extends Record<string, never> ? any : {
|
|
18
|
+
children?: any;
|
|
19
|
+
} : {});
|
|
20
|
+
declare const Menu: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
|
|
21
|
+
_top?: number | undefined;
|
|
22
|
+
_left?: number | undefined;
|
|
23
|
+
_width?: string;
|
|
24
|
+
_height?: string;
|
|
25
|
+
_maxHeight?: string | undefined;
|
|
26
|
+
_minWidth?: string | undefined;
|
|
27
|
+
_overflow?: string;
|
|
28
|
+
_boxShadow?: string | undefined;
|
|
29
|
+
_borderRadius?: string | undefined;
|
|
30
|
+
_activatorGap?: number;
|
|
31
|
+
open?: boolean;
|
|
32
|
+
refreshPosition?: boolean;
|
|
33
|
+
activator?: HTMLElement | undefined;
|
|
34
|
+
anchor?: "bottom" | "bottom-center" | "right-center";
|
|
35
|
+
closeOnClickOutside?: boolean;
|
|
36
|
+
inAnimation?: (node: Element, params?: SlideParams | FlyParams | FadeParams) => TransitionConfig;
|
|
37
|
+
inAnimationConfig?: SlideParams | FlyParams | FadeParams;
|
|
38
|
+
outAnimation?: (node: Element, params?: SlideParams | FlyParams | FadeParams) => TransitionConfig;
|
|
39
|
+
outAnimationConfig?: SlideParams | FlyParams | FadeParams;
|
|
40
|
+
menuElement?: HTMLElement | undefined;
|
|
41
|
+
flipOnOverflow?: boolean;
|
|
42
|
+
stayInViewport?: boolean;
|
|
43
|
+
openingId?: string | undefined;
|
|
44
|
+
}, {
|
|
45
|
+
default: {};
|
|
46
|
+
}>, {
|
|
47
|
+
keydown: KeyboardEvent;
|
|
48
|
+
} & {
|
|
49
|
+
[evt: string]: CustomEvent<any>;
|
|
50
|
+
}, {
|
|
51
|
+
default: {};
|
|
52
|
+
}, {}, string>;
|
|
53
|
+
type Menu = InstanceType<typeof Menu>;
|
|
54
|
+
export default Menu;
|