@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.
Files changed (200) hide show
  1. package/dist/components/composed/buttons/ActivableButton.svelte +6 -2
  2. package/dist/components/composed/buttons/ActivableButton.svelte.d.ts +36 -32
  3. package/dist/components/composed/common/MenuOrDrawer.svelte +21 -5
  4. package/dist/components/composed/common/MenuOrDrawer.svelte.d.ts +50 -36
  5. package/dist/components/composed/common/MenuOrDrawerOptions.svelte +29 -13
  6. package/dist/components/composed/common/MenuOrDrawerOptions.svelte.d.ts +34 -30
  7. package/dist/components/composed/common/QuickActions.svelte +52 -20
  8. package/dist/components/composed/common/QuickActions.svelte.d.ts +24 -20
  9. package/dist/components/composed/common/ToolTip.svelte +31 -22
  10. package/dist/components/composed/common/ToolTip.svelte.d.ts +32 -43
  11. package/dist/components/composed/forms/AsyncAutocomplete.svelte +44 -23
  12. package/dist/components/composed/forms/AsyncAutocomplete.svelte.d.ts +44 -39
  13. package/dist/components/composed/forms/AvatarDropdown.svelte +57 -27
  14. package/dist/components/composed/forms/AvatarDropdown.svelte.d.ts +45 -41
  15. package/dist/components/composed/forms/ConfirmOrCancelButtons.svelte +35 -17
  16. package/dist/components/composed/forms/ConfirmOrCancelButtons.svelte.d.ts +41 -37
  17. package/dist/components/composed/forms/CountriesAutocomplete.svelte +16 -7
  18. package/dist/components/composed/forms/CountriesAutocomplete.svelte.d.ts +31 -60
  19. package/dist/components/composed/forms/DatePickerTextField.svelte +166 -114
  20. package/dist/components/composed/forms/DatePickerTextField.svelte.d.ts +67 -63
  21. package/dist/components/composed/forms/Dropdown.svelte +51 -21
  22. package/dist/components/composed/forms/Dropdown.svelte.d.ts +48 -43
  23. package/dist/components/composed/forms/IconsDropdown.svelte +61 -33
  24. package/dist/components/composed/forms/IconsDropdown.svelte.d.ts +30 -26
  25. package/dist/components/composed/forms/LabelAndSelect.svelte +32 -7
  26. package/dist/components/composed/forms/LabelAndSelect.svelte.d.ts +35 -31
  27. package/dist/components/composed/forms/LabelAndTextField.svelte +30 -5
  28. package/dist/components/composed/forms/LabelAndTextField.svelte.d.ts +46 -42
  29. package/dist/components/composed/forms/ToggleList.svelte +59 -33
  30. package/dist/components/composed/forms/ToggleList.svelte.d.ts +21 -17
  31. package/dist/components/composed/forms/YearPickerTextField.svelte +114 -74
  32. package/dist/components/composed/forms/YearPickerTextField.svelte.d.ts +53 -49
  33. package/dist/components/composed/list/DynamicTable.svelte +1102 -707
  34. package/dist/components/composed/list/DynamicTable.svelte.d.ts +369 -365
  35. package/dist/components/composed/list/PaginatedTable.svelte +139 -76
  36. package/dist/components/composed/list/PaginatedTable.svelte.d.ts +108 -108
  37. package/dist/components/composed/progress/HorizontalStackedProgress.svelte +58 -30
  38. package/dist/components/composed/progress/HorizontalStackedProgress.svelte.d.ts +25 -21
  39. package/dist/components/composed/search/DynamicFilters.svelte +103 -82
  40. package/dist/components/composed/search/DynamicFilters.svelte.d.ts +31 -27
  41. package/dist/components/composed/search/FilterEditor.svelte +106 -77
  42. package/dist/components/composed/search/FilterEditor.svelte.d.ts +37 -33
  43. package/dist/components/composed/search/Filters.svelte +361 -292
  44. package/dist/components/composed/search/Filters.svelte.d.ts +55 -51
  45. package/dist/components/composed/search/GlobalSearchTextField.svelte +79 -41
  46. package/dist/components/composed/search/GlobalSearchTextField.svelte.d.ts +43 -39
  47. package/dist/components/composed/search/MobileFilterEditor.svelte +135 -93
  48. package/dist/components/composed/search/MobileFilterEditor.svelte.d.ts +39 -35
  49. package/dist/components/composed/search/SearchBar.svelte +28 -5
  50. package/dist/components/composed/search/SearchBar.svelte.d.ts +34 -30
  51. package/dist/components/composed/search/SearchResults.svelte +42 -7
  52. package/dist/components/composed/search/SearchResults.svelte.d.ts +40 -36
  53. package/dist/components/composed/shop/ProductCard.svelte +18 -4
  54. package/dist/components/composed/shop/ProductCard.svelte.d.ts +32 -28
  55. package/dist/components/composed/shop/ProductsGrid.svelte +22 -2
  56. package/dist/components/composed/shop/ProductsGrid.svelte.d.ts +44 -40
  57. package/dist/components/layouts/CollapsibleSideBarLayout.svelte +77 -38
  58. package/dist/components/layouts/CollapsibleSideBarLayout.svelte.d.ts +109 -69
  59. package/dist/components/layouts/StableDividedSideBarLayout.svelte +47 -17
  60. package/dist/components/layouts/StableDividedSideBarLayout.svelte.d.ts +50 -32
  61. package/dist/components/layouts/UnstableDividedSideBarLayout.svelte +53 -30
  62. package/dist/components/layouts/UnstableDividedSideBarLayout.svelte.d.ts +103 -63
  63. package/dist/components/simple/buttons/Button.svelte +78 -32
  64. package/dist/components/simple/buttons/Button.svelte.d.ts +47 -35
  65. package/dist/components/simple/buttons/LinkButton.svelte +54 -22
  66. package/dist/components/simple/buttons/LinkButton.svelte.d.ts +50 -33
  67. package/dist/components/simple/charts/GanymedeBarChart.svelte +172 -134
  68. package/dist/components/simple/charts/GanymedeBarChart.svelte.d.ts +50 -46
  69. package/dist/components/simple/charts/GanymedeLineChart.svelte +157 -115
  70. package/dist/components/simple/charts/GanymedeLineChart.svelte.d.ts +51 -47
  71. package/dist/components/simple/charts/GanymedePieChart.svelte +62 -39
  72. package/dist/components/simple/charts/GanymedePieChart.svelte.d.ts +37 -33
  73. package/dist/components/simple/common/Card.svelte +20 -1
  74. package/dist/components/simple/common/Card.svelte.d.ts +51 -38
  75. package/dist/components/simple/common/CollapsibleDivider.svelte +23 -11
  76. package/dist/components/simple/common/CollapsibleDivider.svelte.d.ts +29 -25
  77. package/dist/components/simple/common/Divider.svelte +8 -2
  78. package/dist/components/simple/common/Divider.svelte.d.ts +23 -19
  79. package/dist/components/simple/common/Gesture.svelte +64 -46
  80. package/dist/components/simple/common/Gesture.svelte.d.ts +21 -17
  81. package/dist/components/simple/common/InfiniteScroll.svelte +52 -29
  82. package/dist/components/simple/common/InfiniteScroll.svelte.d.ts +24 -20
  83. package/dist/components/simple/common/IntersectionObserver.svelte +45 -32
  84. package/dist/components/simple/common/IntersectionObserver.svelte.d.ts +34 -21
  85. package/dist/components/simple/common/MediaQuery.svelte +30 -21
  86. package/dist/components/simple/common/MediaQuery.svelte.d.ts +34 -30
  87. package/dist/components/simple/common/Menu.svelte +290 -201
  88. package/dist/components/simple/common/Menu.svelte.d.ts +51 -40
  89. package/dist/components/simple/common/Playground.svelte +18 -17
  90. package/dist/components/simple/common/Playground.svelte.d.ts +19 -15
  91. package/dist/components/simple/common/VerticalDraggableList.svelte +35 -16
  92. package/dist/components/simple/common/VerticalDraggableList.svelte.d.ts +33 -29
  93. package/dist/components/simple/dashboards/DashboardGridShaper.svelte +32 -26
  94. package/dist/components/simple/dashboards/DashboardGridShaper.svelte.d.ts +16 -12
  95. package/dist/components/simple/dates/Calendar.svelte +52 -28
  96. package/dist/components/simple/dates/Calendar.svelte.d.ts +45 -41
  97. package/dist/components/simple/dates/DatePicker.svelte +90 -60
  98. package/dist/components/simple/dates/DatePicker.svelte.d.ts +44 -40
  99. package/dist/components/simple/dates/MonthSelector.svelte +37 -15
  100. package/dist/components/simple/dates/MonthSelector.svelte.d.ts +35 -31
  101. package/dist/components/simple/dates/TimePicker.svelte +45 -31
  102. package/dist/components/simple/dates/TimePicker.svelte.d.ts +24 -20
  103. package/dist/components/simple/dates/TimePickerTextField.svelte +56 -35
  104. package/dist/components/simple/dates/TimePickerTextField.svelte.d.ts +28 -24
  105. package/dist/components/simple/dates/YearSelector.svelte +54 -29
  106. package/dist/components/simple/dates/YearSelector.svelte.d.ts +35 -31
  107. package/dist/components/simple/dialogs/Dialog.svelte +92 -62
  108. package/dist/components/simple/dialogs/Dialog.svelte.d.ts +42 -28
  109. package/dist/components/simple/forms/Autocomplete.svelte +201 -142
  110. package/dist/components/simple/forms/Autocomplete.svelte.d.ts +83 -79
  111. package/dist/components/simple/forms/Checkbox.svelte +40 -24
  112. package/dist/components/simple/forms/Checkbox.svelte.d.ts +25 -21
  113. package/dist/components/simple/forms/FileInput.svelte +88 -48
  114. package/dist/components/simple/forms/FileInput.svelte.d.ts +37 -33
  115. package/dist/components/simple/forms/FileInputList.svelte +52 -34
  116. package/dist/components/simple/forms/FileInputList.svelte.d.ts +43 -39
  117. package/dist/components/simple/forms/RadioButton.svelte +11 -3
  118. package/dist/components/simple/forms/RadioButton.svelte.d.ts +31 -27
  119. package/dist/components/simple/forms/Select.svelte +16 -3
  120. package/dist/components/simple/forms/Select.svelte.d.ts +24 -20
  121. package/dist/components/simple/forms/SimpleTextField.svelte +53 -6
  122. package/dist/components/simple/forms/SimpleTextField.svelte.d.ts +64 -60
  123. package/dist/components/simple/forms/Switch.svelte +30 -16
  124. package/dist/components/simple/forms/Switch.svelte.d.ts +25 -21
  125. package/dist/components/simple/forms/Textarea.svelte +27 -2
  126. package/dist/components/simple/forms/Textarea.svelte.d.ts +41 -37
  127. package/dist/components/simple/forms/Textfield.svelte +56 -18
  128. package/dist/components/simple/forms/Textfield.svelte.d.ts +55 -51
  129. package/dist/components/simple/forms/TreeEditor.svelte +141 -95
  130. package/dist/components/simple/forms/TreeEditor.svelte.d.ts +42 -38
  131. package/dist/components/simple/forms/TreeEditorItem.svelte +77 -42
  132. package/dist/components/simple/forms/TreeEditorItem.svelte.d.ts +54 -50
  133. package/dist/components/simple/forms/VerticalSwitch.svelte +11 -1
  134. package/dist/components/simple/forms/VerticalSwitch.svelte.d.ts +32 -28
  135. package/dist/components/simple/forms/VerticalTextSwitch.svelte +15 -3
  136. package/dist/components/simple/forms/VerticalTextSwitch.svelte.d.ts +30 -26
  137. package/dist/components/simple/lists/ColorInvertedSelector.svelte +53 -23
  138. package/dist/components/simple/lists/ColorInvertedSelector.svelte.d.ts +46 -42
  139. package/dist/components/simple/lists/HierarchyMenu.svelte +38 -19
  140. package/dist/components/simple/lists/HierarchyMenu.svelte.d.ts +34 -30
  141. package/dist/components/simple/lists/Paginator.svelte +50 -41
  142. package/dist/components/simple/lists/Paginator.svelte.d.ts +23 -19
  143. package/dist/components/simple/lists/SelectableMenuList.svelte +43 -15
  144. package/dist/components/simple/lists/SelectableMenuList.svelte.d.ts +24 -20
  145. package/dist/components/simple/lists/SelectableVerticalList.svelte +99 -57
  146. package/dist/components/simple/lists/SelectableVerticalList.svelte.d.ts +51 -47
  147. package/dist/components/simple/lists/SidebarMenuList.svelte +115 -70
  148. package/dist/components/simple/lists/SidebarMenuList.svelte.d.ts +26 -22
  149. package/dist/components/simple/lists/SimpleTable.svelte +264 -154
  150. package/dist/components/simple/lists/SimpleTable.svelte.d.ts +70 -66
  151. package/dist/components/simple/loaders/CircularLoader.svelte +16 -5
  152. package/dist/components/simple/loaders/CircularLoader.svelte.d.ts +19 -15
  153. package/dist/components/simple/loaders/Skeleton.svelte +3 -2
  154. package/dist/components/simple/loaders/Skeleton.svelte.d.ts +16 -12
  155. package/dist/components/simple/media/AttachmentDownloader.svelte +17 -3
  156. package/dist/components/simple/media/AttachmentDownloader.svelte.d.ts +32 -28
  157. package/dist/components/simple/media/Avatar.svelte +18 -12
  158. package/dist/components/simple/media/Avatar.svelte.d.ts +31 -20
  159. package/dist/components/simple/media/Carousel.svelte +29 -11
  160. package/dist/components/simple/media/Carousel.svelte.d.ts +28 -24
  161. package/dist/components/simple/media/DescriptiveAvatar.svelte +12 -4
  162. package/dist/components/simple/media/DescriptiveAvatar.svelte.d.ts +44 -28
  163. package/dist/components/simple/media/FlagIcon.svelte +8 -5
  164. package/dist/components/simple/media/FlagIcon.svelte.d.ts +19 -15
  165. package/dist/components/simple/media/Gallery.svelte +49 -29
  166. package/dist/components/simple/media/Gallery.svelte.d.ts +27 -23
  167. package/dist/components/simple/media/Icon.svelte +9 -4
  168. package/dist/components/simple/media/Icon.svelte.d.ts +24 -20
  169. package/dist/components/simple/media/Image.svelte +42 -20
  170. package/dist/components/simple/media/Image.svelte.d.ts +44 -33
  171. package/dist/components/simple/media/ImageGrid.svelte +37 -12
  172. package/dist/components/simple/media/ImageGrid.svelte.d.ts +32 -28
  173. package/dist/components/simple/navigation/Breadcrumb.svelte +28 -10
  174. package/dist/components/simple/navigation/Breadcrumb.svelte.d.ts +26 -22
  175. package/dist/components/simple/navigation/Chip.svelte +44 -23
  176. package/dist/components/simple/navigation/Chip.svelte.d.ts +42 -31
  177. package/dist/components/simple/navigation/Drawer.svelte +107 -65
  178. package/dist/components/simple/navigation/Drawer.svelte.d.ts +50 -37
  179. package/dist/components/simple/navigation/HeaderMenu.svelte +40 -23
  180. package/dist/components/simple/navigation/HeaderMenu.svelte.d.ts +39 -35
  181. package/dist/components/simple/navigation/Navigator.svelte +30 -8
  182. package/dist/components/simple/navigation/Navigator.svelte.d.ts +28 -24
  183. package/dist/components/simple/navigation/TabSwitcher.svelte +83 -47
  184. package/dist/components/simple/navigation/TabSwitcher.svelte.d.ts +38 -34
  185. package/dist/components/simple/notifiers/AlertBanner.svelte +43 -15
  186. package/dist/components/simple/notifiers/AlertBanner.svelte.d.ts +41 -37
  187. package/dist/components/simple/progress/ProgressBar.svelte +20 -13
  188. package/dist/components/simple/progress/ProgressBar.svelte.d.ts +21 -17
  189. package/dist/components/simple/timeline/SimpleTimeLine.svelte +19 -5
  190. package/dist/components/simple/timeline/SimpleTimeLine.svelte.d.ts +39 -35
  191. package/dist/components/simple/typography/Code.svelte +27 -12
  192. package/dist/components/simple/typography/Code.svelte.d.ts +28 -24
  193. package/dist/stores/debounce.d.ts +0 -1
  194. package/dist/stores/layouts/unstableSidebarOpened.d.ts +0 -1
  195. package/dist/stores/mediaQuery.d.ts +0 -1
  196. package/dist/stores/theme.d.ts +0 -1
  197. package/dist/utils/filters/builder.d.ts +2 -0
  198. package/dist/utils/filters/builder.js +20 -0
  199. package/dist/utils/filters/modifiers/where.d.ts +10 -3
  200. package/package.json +1 -1
@@ -1,269 +1,358 @@
1
- <script>import { createId } from "@paralleldrive/cuid2";
2
- import {
3
- fly
4
- } from "svelte/transition";
5
- import { sidebarOpened } from "../../../stores/layouts/unstableSidebarOpened";
6
- export let _top = void 0, _left = void 0, _width = "auto", _height = "auto", _maxHeight = void 0, _minWidth = void 0, _overflow = "auto", _boxShadow = void 0, _borderRadius = void 0, _activatorGap = 5;
7
- export let open = false, refreshPosition = false, activator = void 0, anchor = "bottom", closeOnClickOutside = false, inAnimation = fly, inAnimationConfig = {
8
- duration: 100,
9
- y: 10
10
- }, outAnimation = fly, outAnimationConfig = {
11
- duration: 100,
12
- y: 10
13
- }, menuElement = void 0, flipOnOverflow = false, stayInViewport = false, openingId = void 0;
14
- let zIndex = 50, currentUid = createId(), closeController;
15
- function calculateMenuPosition(params) {
16
- if (params.menuElement) {
17
- if (params.activator) {
18
- if (anchor == "bottom") {
19
- let { left: activatorLeft, top: activatorTop } = params.activator.getBoundingClientRect();
20
- let activatorHeight = params.activator.offsetHeight;
21
- _top = activatorTop + activatorHeight + _activatorGap;
22
- _left = activatorLeft;
23
- let { top: fixedParentTop, left: fixedParentLeft, fixedParent, validStickyParent } = getParentInstanceFromViewport(activator?.parentElement);
24
- if (!!fixedParent) {
25
- _top = _top - fixedParentTop;
26
- _left = _left - fixedParentLeft;
27
- } else if (!validStickyParent && !fixedParent) {
28
- _top = _top + window.scrollY;
29
- _left = _left + window.scrollX;
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
- } else if (anchor == "bottom-center") {
32
- let { left: activatorLeft, top: activatorTop } = params.activator.getBoundingClientRect();
33
- let activatorHeight = params.activator.offsetHeight;
34
- let activatorWidth = params.activator.offsetWidth;
35
- let menuWidth = params.menuElement.offsetWidth;
36
- _top = activatorTop + activatorHeight + _activatorGap;
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
- if (menuWidth > activatorWidth) {
47
- _left = _left - (menuWidth - activatorWidth) / 2;
48
- } else {
49
- _left = _left + (activatorWidth - menuWidth) / 2;
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
- if (flipOnOverflow && !!params.activator) {
62
- let { top: activatorTopDistance } = params.activator.getBoundingClientRect();
63
- if (window.innerHeight < activatorTopDistance + (menuElement?.offsetHeight || 0) + (menuElement?.offsetHeight || 0) * 0.1) {
64
- _top = getTopDistance(params.activator) - _activatorGap - (menuElement?.offsetHeight || 0);
65
- }
66
- if (anchor == "right-center" && window.innerWidth + window.scrollX < (_left || 0) + (menuElement?.offsetWidth || 0)) {
67
- let { left: activatorLeft } = params.activator.getBoundingClientRect();
68
- _left = activatorLeft + window.scrollX - _activatorGap - (menuElement?.offsetWidth || 0);
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
- if (!!positionedAncestor) {
80
- let { left: positionedAncestorLeft, top: positionedAncestorTop } = positionedAncestor.getBoundingClientRect();
81
- if (!_left)
82
- _left = 0;
83
- if (!_top)
84
- _top = 0;
85
- _left = _left - (positionedAncestorLeft + window.scrollX);
86
- _top = _top - (positionedAncestorTop + window.scrollY);
87
- if (!!activator) {
88
- let { validStickyParent, fixedParent } = getParentInstanceFromViewport(activator?.parentElement);
89
- if (!!validStickyParent || !!fixedParent) {
90
- _left = _left + window.scrollX;
91
- _top = _top + window.scrollY;
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
- let positionedAncestor2 = getPositionedAncestor(elem);
99
- if (!!positionedAncestor2) {
100
- let top = parseInt(getComputedStyle(positionedAncestor2).top);
101
- return (isNaN(top) ? 0 : top) + elem.offsetTop - calcScrollY(elem);
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
- return window.scrollY + elem.getBoundingClientRect().top;
104
- }
105
- function calcScrollY(elem) {
106
- let parent = elem.parentElement;
107
- let scroll = 0;
108
- while (!!parent) {
109
- scroll += parent.scrollTop;
110
- let parentPosition = getComputedStyle(parent).position;
111
- if (parentPosition === "absolute" || parentPosition === "fixed" || parentPosition === "relative")
112
- break;
113
- parent = parent.parentElement;
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
- return scroll;
116
- }
117
- $:
118
- if (open) {
119
- if (!!activator) {
120
- let parent = activator.parentElement;
121
- while (!!parent) {
122
- let parentPosition = getComputedStyle(parent).position;
123
- parent.addEventListener("scroll", refreshMenuPosition);
124
- if (parentPosition == "absolute" || parentPosition == "fixed" || parentPosition === "relative")
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
- if (!!openingId) {
130
- const controllers = document.querySelectorAll(`[data-operation="close"][data-opening-id="${openingId}"]`);
131
- for (let k = 0; k < controllers.length; k += 1) {
132
- if (controllers[k] !== closeController) {
133
- const clickEvent = new MouseEvent("click", {
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
- controllers[k].dispatchEvent(clickEvent);
202
+ })
203
+
204
+ controllers[k].dispatchEvent(clickEvent)
139
205
  }
140
206
  }
141
207
  }
142
- let otherMenus = document.querySelectorAll("[data-menu]");
143
- let otherDialogs = document.querySelectorAll("[data-dialog]");
144
- let maxZIndex = void 0;
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
- if (maxZIndex)
160
- zIndex = maxZIndex + 2;
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 (!!activator && !!menuElement)
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
- let positionedAncestor = void 0;
198
- $:
199
- if (!!menuElement && !!activator) {
200
- let elem = getPositionedAncestor(menuElement.parentElement);
201
- positionedAncestor = elem == null ? void 0 : elem;
202
- calculateMenuPosition({ menuElement, activator });
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
- function getPositionedAncestor(elem) {
205
- if (!elem)
206
- return null;
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
- return { top, left, fixedParent, validStickyParent: isStickyValid ? stickyParent : void 0 };
242
- }
243
- function refreshMenuPosition() {
244
- if (open && !!menuElement && !!activator)
245
- calculateMenuPosition({ menuElement, activator });
246
- }
247
- function handleMenuClick(e, zIndex2) {
248
- let otherMenus = document.querySelectorAll(`[data-menu]`);
249
- otherMenus.forEach((m) => {
250
- let uid = m.getAttribute("data-uid");
251
- if (uid !== currentUid && Number(m.style.zIndex) > zIndex2) {
252
- let controller = document.querySelector(`[data-operation="close"][data-uid="${uid}"]`);
253
- if (!!controller) {
254
- const clickEvent = new MouseEvent("click", {
255
- bubbles: false,
256
- cancelable: true,
257
- view: window
258
- });
259
- controller.dispatchEvent(clickEvent);
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
- if ($sidebarOpened !== void 0)
266
- setTimeout(refreshMenuPosition, 300);
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
- declare const __propDef: {
4
- props: {
5
- _top?: number | undefined;
6
- _left?: number | undefined;
7
- _width?: string | undefined;
8
- _height?: string | undefined;
9
- _maxHeight?: string | undefined;
10
- _minWidth?: string | undefined;
11
- _overflow?: string | undefined;
12
- _boxShadow?: string | undefined;
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
- events: {
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
- export {};
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;