@ims360/svelte-ivory 0.1.15 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (176) hide show
  1. package/README.md +0 -5
  2. package/dist/components/ai/AiMessage.svelte +2 -3
  3. package/dist/components/ai/AiMessage.svelte.d.ts.map +1 -1
  4. package/dist/components/ai/Chat.svelte +2 -3
  5. package/dist/components/ai/Chat.svelte.d.ts.map +1 -1
  6. package/dist/components/ai/Markdown.svelte +4 -7
  7. package/dist/components/ai/Markdown.svelte.d.ts.map +1 -1
  8. package/dist/components/ai/UserMessage.svelte +2 -3
  9. package/dist/components/ai/UserMessage.svelte.d.ts.map +1 -1
  10. package/dist/components/basic/checkbox/Checkbox.svelte +13 -11
  11. package/dist/components/basic/checkbox/Checkbox.svelte.d.ts.map +1 -1
  12. package/dist/components/basic/toggle/Toggle.svelte +5 -8
  13. package/dist/components/basic/toggle/Toggle.svelte.d.ts.map +1 -1
  14. package/dist/components/inputs/CheckboxInput.svelte +39 -0
  15. package/dist/components/inputs/CheckboxInput.svelte.d.ts +12 -0
  16. package/dist/components/inputs/CheckboxInput.svelte.d.ts.map +1 -0
  17. package/dist/components/inputs/ColorInput.svelte +25 -0
  18. package/dist/components/inputs/ColorInput.svelte.d.ts +5 -0
  19. package/dist/components/inputs/ColorInput.svelte.d.ts.map +1 -0
  20. package/dist/components/inputs/DateInput.svelte +11 -0
  21. package/dist/components/inputs/DateInput.svelte.d.ts +5 -0
  22. package/dist/components/inputs/DateInput.svelte.d.ts.map +1 -0
  23. package/dist/components/inputs/EmailInput.svelte +16 -0
  24. package/dist/components/inputs/EmailInput.svelte.d.ts +5 -0
  25. package/dist/components/inputs/EmailInput.svelte.d.ts.map +1 -0
  26. package/dist/components/inputs/FileInput.svelte +131 -0
  27. package/dist/components/inputs/FileInput.svelte.d.ts +11 -0
  28. package/dist/components/inputs/FileInput.svelte.d.ts.map +1 -0
  29. package/dist/components/inputs/Input.svelte +101 -0
  30. package/dist/components/inputs/Input.svelte.d.ts +48 -0
  31. package/dist/components/inputs/Input.svelte.d.ts.map +1 -0
  32. package/dist/components/inputs/NumberInput.svelte +17 -0
  33. package/dist/components/inputs/NumberInput.svelte.d.ts +10 -0
  34. package/dist/components/inputs/NumberInput.svelte.d.ts.map +1 -0
  35. package/dist/components/inputs/PasswordCreateInput.svelte +60 -0
  36. package/dist/components/inputs/PasswordCreateInput.svelte.d.ts +12 -0
  37. package/dist/components/inputs/PasswordCreateInput.svelte.d.ts.map +1 -0
  38. package/dist/components/inputs/PasswordInput.svelte +27 -0
  39. package/dist/components/inputs/PasswordInput.svelte.d.ts +10 -0
  40. package/dist/components/inputs/PasswordInput.svelte.d.ts.map +1 -0
  41. package/dist/components/inputs/TextInput.svelte +16 -0
  42. package/dist/components/inputs/TextInput.svelte.d.ts +7 -0
  43. package/dist/components/inputs/TextInput.svelte.d.ts.map +1 -0
  44. package/dist/components/inputs/ToggleInput.svelte +24 -0
  45. package/dist/components/inputs/ToggleInput.svelte.d.ts +5 -0
  46. package/dist/components/inputs/ToggleInput.svelte.d.ts.map +1 -0
  47. package/dist/components/inputs/index.d.ts +13 -0
  48. package/dist/components/inputs/index.d.ts.map +1 -1
  49. package/dist/components/inputs/index.js +13 -0
  50. package/dist/components/inputs/issues/FormIssues.svelte +35 -0
  51. package/dist/components/inputs/issues/FormIssues.svelte.d.ts +10 -0
  52. package/dist/components/inputs/issues/FormIssues.svelte.d.ts.map +1 -0
  53. package/dist/components/inputs/select/Select.svelte +69 -0
  54. package/dist/components/inputs/select/Select.svelte.d.ts +15 -0
  55. package/dist/components/inputs/select/Select.svelte.d.ts.map +1 -0
  56. package/dist/components/inputs/select/SelectOption.svelte +34 -0
  57. package/dist/components/inputs/select/SelectOption.svelte.d.ts +11 -0
  58. package/dist/components/inputs/select/SelectOption.svelte.d.ts.map +1 -0
  59. package/dist/components/layout/Heading.svelte +5 -4
  60. package/dist/components/layout/Heading.svelte.d.ts.map +1 -1
  61. package/dist/components/layout/dialog/Dialog.svelte +5 -8
  62. package/dist/components/layout/dialog/Dialog.svelte.d.ts.map +1 -1
  63. package/dist/components/layout/drawer/Drawer.svelte +7 -10
  64. package/dist/components/layout/drawer/Drawer.svelte.d.ts.map +1 -1
  65. package/dist/components/layout/index.d.ts +1 -2
  66. package/dist/components/layout/index.d.ts.map +1 -1
  67. package/dist/components/layout/index.js +0 -1
  68. package/dist/components/layout/modal/Modal.svelte +10 -15
  69. package/dist/components/layout/modal/Modal.svelte.d.ts.map +1 -1
  70. package/dist/components/layout/popover/Popover.svelte +96 -79
  71. package/dist/components/layout/popover/Popover.svelte.d.ts +8 -22
  72. package/dist/components/layout/popover/Popover.svelte.d.ts.map +1 -1
  73. package/dist/components/layout/tabs/Tab.svelte +5 -8
  74. package/dist/components/layout/tabs/Tab.svelte.d.ts.map +1 -1
  75. package/dist/components/layout/tooltip/Tooltip.svelte +4 -7
  76. package/dist/components/layout/tooltip/Tooltip.svelte.d.ts.map +1 -1
  77. package/dist/components/table/Column.svelte +7 -10
  78. package/dist/components/table/Column.svelte.d.ts.map +1 -1
  79. package/dist/components/table/ColumnHead.svelte +2 -2
  80. package/dist/components/table/Table.svelte +5 -8
  81. package/dist/components/table/Table.svelte.d.ts.map +1 -1
  82. package/dist/components/table/VirtualList.svelte +3 -8
  83. package/dist/components/table/VirtualList.svelte.d.ts.map +1 -1
  84. package/dist/theme.svelte.d.ts +18 -0
  85. package/dist/theme.svelte.d.ts.map +1 -1
  86. package/dist/types.d.ts.map +1 -1
  87. package/dist/utils/{actions → attachments}/clickOutside.d.ts +2 -4
  88. package/dist/utils/attachments/clickOutside.d.ts.map +1 -0
  89. package/dist/utils/{actions → attachments}/clickOutside.js +4 -7
  90. package/dist/utils/attachments/focusTrap.d.ts +3 -0
  91. package/dist/utils/attachments/focusTrap.d.ts.map +1 -0
  92. package/dist/utils/{actions → attachments}/focusTrap.js +5 -14
  93. package/dist/utils/{actions → attachments}/index.d.ts +0 -1
  94. package/dist/utils/attachments/index.d.ts.map +1 -0
  95. package/dist/utils/{actions → attachments}/index.js +0 -1
  96. package/dist/utils/attachments/resize.d.ts +6 -0
  97. package/dist/utils/attachments/resize.d.ts.map +1 -0
  98. package/dist/utils/{actions → attachments}/resize.js +3 -5
  99. package/dist/utils/attachments/shortcut.svelte.d.ts.map +1 -0
  100. package/dist/utils/attachments/visible.d.ts +6 -0
  101. package/dist/utils/attachments/visible.d.ts.map +1 -0
  102. package/dist/utils/attachments/visible.js +12 -0
  103. package/dist/utils/merge.d.ts +4 -0
  104. package/dist/utils/merge.d.ts.map +1 -0
  105. package/dist/utils/merge.js +6 -0
  106. package/package.json +7 -5
  107. package/src/lib/components/ai/AiMessage.svelte +2 -3
  108. package/src/lib/components/ai/Chat.svelte +2 -3
  109. package/src/lib/components/ai/Markdown.svelte +4 -7
  110. package/src/lib/components/ai/UserMessage.svelte +2 -3
  111. package/src/lib/components/basic/checkbox/Checkbox.svelte +13 -11
  112. package/src/lib/components/basic/toggle/Toggle.svelte +5 -8
  113. package/src/lib/components/inputs/CheckboxInput.svelte +39 -0
  114. package/src/lib/components/inputs/ColorInput.svelte +25 -0
  115. package/src/lib/components/inputs/DateInput.svelte +11 -0
  116. package/src/lib/components/inputs/EmailInput.svelte +16 -0
  117. package/src/lib/components/inputs/FileInput.svelte +131 -0
  118. package/src/lib/components/inputs/Input.svelte +101 -0
  119. package/src/lib/components/inputs/NumberInput.svelte +17 -0
  120. package/src/lib/components/inputs/PasswordCreateInput.svelte +60 -0
  121. package/src/lib/components/inputs/PasswordInput.svelte +27 -0
  122. package/src/lib/components/inputs/TextInput.svelte +16 -0
  123. package/src/lib/components/inputs/ToggleInput.svelte +24 -0
  124. package/src/lib/components/inputs/index.ts +17 -0
  125. package/src/lib/components/inputs/issues/FormIssues.svelte +35 -0
  126. package/src/lib/components/inputs/select/Select.svelte +69 -0
  127. package/src/lib/components/inputs/select/SelectOption.svelte +34 -0
  128. package/src/lib/components/layout/Heading.svelte +5 -4
  129. package/src/lib/components/layout/dialog/Dialog.svelte +5 -8
  130. package/src/lib/components/layout/drawer/Drawer.svelte +7 -10
  131. package/src/lib/components/layout/index.ts +1 -5
  132. package/src/lib/components/layout/modal/Modal.svelte +10 -15
  133. package/src/lib/components/layout/popover/Popover.svelte +96 -79
  134. package/src/lib/components/layout/tabs/Tab.svelte +5 -8
  135. package/src/lib/components/layout/tooltip/Tooltip.svelte +4 -7
  136. package/src/lib/components/table/Column.svelte +7 -10
  137. package/src/lib/components/table/ColumnHead.svelte +2 -2
  138. package/src/lib/components/table/Table.svelte +5 -8
  139. package/src/lib/components/table/VirtualList.svelte +3 -8
  140. package/src/lib/theme.svelte.ts +18 -0
  141. package/src/lib/types.ts +3 -2
  142. package/src/lib/utils/attachments/clickOutside.ts +36 -0
  143. package/src/lib/utils/attachments/focusTrap.ts +67 -0
  144. package/src/lib/utils/{actions → attachments}/index.ts +0 -1
  145. package/src/lib/utils/attachments/resize.ts +38 -0
  146. package/src/lib/utils/attachments/visible.ts +22 -0
  147. package/src/lib/utils/merge.ts +7 -0
  148. package/dist/components/layout/portal/Portal.svelte +0 -39
  149. package/dist/components/layout/portal/Portal.svelte.d.ts +0 -21
  150. package/dist/components/layout/portal/Portal.svelte.d.ts.map +0 -1
  151. package/dist/components/layout/portal/index.d.ts +0 -6
  152. package/dist/components/layout/portal/index.d.ts.map +0 -1
  153. package/dist/components/layout/portal/index.js +0 -5
  154. package/dist/utils/actions/clickOutside.d.ts.map +0 -1
  155. package/dist/utils/actions/focusTrap.d.ts +0 -5
  156. package/dist/utils/actions/focusTrap.d.ts.map +0 -1
  157. package/dist/utils/actions/index.d.ts.map +0 -1
  158. package/dist/utils/actions/portal.d.ts +0 -10
  159. package/dist/utils/actions/portal.d.ts.map +0 -1
  160. package/dist/utils/actions/portal.js +0 -39
  161. package/dist/utils/actions/resize.d.ts +0 -6
  162. package/dist/utils/actions/resize.d.ts.map +0 -1
  163. package/dist/utils/actions/shortcut.svelte.d.ts.map +0 -1
  164. package/dist/utils/actions/visible.d.ts +0 -6
  165. package/dist/utils/actions/visible.d.ts.map +0 -1
  166. package/dist/utils/actions/visible.js +0 -14
  167. package/src/lib/components/layout/portal/Portal.svelte +0 -39
  168. package/src/lib/components/layout/portal/index.ts +0 -7
  169. package/src/lib/utils/actions/clickOutside.ts +0 -38
  170. package/src/lib/utils/actions/focusTrap.ts +0 -65
  171. package/src/lib/utils/actions/portal.ts +0 -43
  172. package/src/lib/utils/actions/resize.ts +0 -35
  173. package/src/lib/utils/actions/visible.ts +0 -28
  174. /package/dist/utils/{actions → attachments}/shortcut.svelte.d.ts +0 -0
  175. /package/dist/utils/{actions → attachments}/shortcut.svelte.js +0 -0
  176. /package/src/lib/utils/{actions → attachments}/shortcut.svelte.ts +0 -0
@@ -1,21 +0,0 @@
1
- import type { IvoryComponent } from '../../../types';
2
- import type { Snippet } from 'svelte';
3
- export interface PortalProps extends IvoryComponent<HTMLDivElement> {
4
- children: Snippet;
5
- target?: string | HTMLElement;
6
- }
7
- export interface PortalConfig {
8
- defaultTarget: string;
9
- }
10
- export declare function setConfig(newConfig: Partial<PortalConfig>): void;
11
- /**
12
- * A portal, renders its children in a different DOM element.
13
- *
14
- * Wrapps the `use:portal` action.
15
- *
16
- * **Use sparingy as it can make the DOM structure confusing**
17
- */
18
- declare const Portal: import("svelte").Component<PortalProps, {}, "">;
19
- type Portal = ReturnType<typeof Portal>;
20
- export default Portal;
21
- //# sourceMappingURL=Portal.svelte.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Portal.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/portal/Portal.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGtC,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC/D,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;CACjC;AAED,MAAM,WAAW,YAAY;IACzB,aAAa,EAAE,MAAM,CAAC;CACzB;AAOD,wBAAgB,SAAS,CAAC,SAAS,EAAE,OAAO,CAAC,YAAY,CAAC,QAEzD;AAeL;;;;;;GAMG;AACH,QAAA,MAAM,MAAM,iDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
@@ -1,6 +0,0 @@
1
- import { setConfig } from './Portal.svelte';
2
- declare const portal: import("svelte").Component<import("./Portal.svelte").PortalProps, {}, ""> & {
3
- setConfig: typeof setConfig;
4
- };
5
- export default portal;
6
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/portal/index.ts"],"names":[],"mappings":"AAAA,OAAe,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAEpD,QAAA,MAAM,MAAM;;CAEV,CAAC;AAEH,eAAe,MAAM,CAAC"}
@@ -1,5 +0,0 @@
1
- import Portal, { setConfig } from './Portal.svelte';
2
- const portal = Object.assign(Portal, {
3
- setConfig
4
- });
5
- export default portal;
@@ -1 +0,0 @@
1
- {"version":3,"file":"clickOutside.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/actions/clickOutside.ts"],"names":[],"mappings":"AAAA,UAAU,kBAAkB;IACxB,0DAA0D;IAC1D,QAAQ,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,4EAA4E;IAC5E,MAAM,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,8CAA8C;AAC9C,wBAAgB,YAAY,CACxB,IAAI,EAAE,OAAO,EACb,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC,GAAG,kBAAkB;;EA2BzD"}
@@ -1,5 +0,0 @@
1
- export declare function focusTrap(node: HTMLElement, enabled: boolean): {
2
- update(newArgs: boolean): void;
3
- destroy(): void;
4
- };
5
- //# sourceMappingURL=focusTrap.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"focusTrap.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/actions/focusTrap.ts"],"names":[],"mappings":"AAAA,wBAAgB,SAAS,CAAC,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,OAAO;oBAsDrC,OAAO;;EAU9B"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/actions/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC"}
@@ -1,10 +0,0 @@
1
- /**
2
- * Places the element in a diffrent place in the DOM
3
- *
4
- * **Use sparingy as it can make the DOM structure confusing**
5
- */
6
- export declare function portal(el: HTMLElement, target?: HTMLElement | string): {
7
- update: (newTarget: HTMLElement | string) => Promise<void>;
8
- destroy: () => void;
9
- };
10
- //# sourceMappingURL=portal.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"portal.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/actions/portal.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,EAAE,EAAE,WAAW,EAAE,MAAM,GAAE,WAAW,GAAG,MAAe;wBAExC,WAAW,GAAG,MAAM;;EAiCxD"}
@@ -1,39 +0,0 @@
1
- import { tick } from 'svelte';
2
- /**
3
- * Places the element in a diffrent place in the DOM
4
- *
5
- * **Use sparingy as it can make the DOM structure confusing**
6
- */
7
- export function portal(el, target = 'body') {
8
- let targetEl;
9
- async function update(newTarget) {
10
- target = newTarget;
11
- if (typeof target === 'string') {
12
- targetEl = document.querySelector(target);
13
- if (targetEl === null) {
14
- await tick();
15
- targetEl = document.querySelector(target);
16
- }
17
- if (targetEl === null) {
18
- throw new Error(`No element found matching css selector: "${target}"`);
19
- }
20
- }
21
- else if (target instanceof HTMLElement) {
22
- targetEl = target;
23
- }
24
- else {
25
- throw new TypeError(`Unknown portal target type: ${target === null ? 'null' : typeof target}. Allowed types: string (CSS selector) or HTMLElement.`);
26
- }
27
- targetEl.appendChild(el);
28
- el.hidden = false;
29
- }
30
- function destroy() {
31
- if (el.parentNode)
32
- el.parentNode.removeChild(el);
33
- }
34
- update(target);
35
- return {
36
- update,
37
- destroy
38
- };
39
- }
@@ -1,6 +0,0 @@
1
- import type { Action } from 'svelte/action';
2
- export declare const resize: Action<HTMLElement, {
3
- resized: (mouseX: number) => void;
4
- dragging: (dragging: boolean) => void;
5
- }>;
6
- //# sourceMappingURL=resize.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"resize.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/actions/resize.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAE5C,eAAO,MAAM,MAAM,EAAE,MAAM,CACvB,WAAW,EACX;IAAE,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAAC,QAAQ,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAA;CAAE,CA8B/E,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"shortcut.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/actions/shortcut.svelte.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGrD,MAAM,WAAW,cAAc;IAC3B,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,IAAI,CAAC;CACxB;AA4CD,wBAAgB,QAAQ,CAAC,MAAM,EAAE,cAAc,GAAG,UAAU,CAQ3D"}
@@ -1,6 +0,0 @@
1
- import type { Action } from 'svelte/action';
2
- export declare const onFirstVisible: Action<HTMLElement, {
3
- callback: () => void;
4
- options?: Partial<IntersectionObserverInit>;
5
- }>;
6
- //# sourceMappingURL=visible.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"visible.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/actions/visible.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAE5C,eAAO,MAAM,cAAc,EAAE,MAAM,CAC/B,WAAW,EACX;IACI,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC,wBAAwB,CAAC,CAAC;CAC/C,CAoBJ,CAAC"}
@@ -1,14 +0,0 @@
1
- export const onFirstVisible = (node, input) => {
2
- const observer = new IntersectionObserver((e) => {
3
- if (!e[0].isIntersecting) {
4
- return;
5
- }
6
- input.callback();
7
- }, { root: null, threshold: 1, ...input.options });
8
- observer.observe(node);
9
- return {
10
- destroy: () => {
11
- observer.disconnect();
12
- }
13
- };
14
- };
@@ -1,39 +0,0 @@
1
- <script lang="ts" module>
2
- import type { IvoryComponent } from '$lib/types';
3
- import type { Snippet } from 'svelte';
4
- import { portal } from '../../../utils/actions/index';
5
-
6
- export interface PortalProps extends IvoryComponent<HTMLDivElement> {
7
- children: Snippet;
8
- target?: string | HTMLElement;
9
- }
10
-
11
- export interface PortalConfig {
12
- defaultTarget: string;
13
- }
14
-
15
- const defaultConfig: PortalConfig = {
16
- defaultTarget: 'body'
17
- };
18
-
19
- let config = $state<PortalConfig>(defaultConfig);
20
- export function setConfig(newConfig: Partial<PortalConfig>) {
21
- config = { ...defaultConfig, ...newConfig };
22
- }
23
- </script>
24
-
25
- <script lang="ts">
26
- let { children, target }: PortalProps = $props();
27
- </script>
28
-
29
- <!--
30
- @component
31
- A portal, renders its children in a different DOM element.
32
-
33
- Wrapps the `use:portal` action.
34
-
35
- **Use sparingy as it can make the DOM structure confusing**
36
- -->
37
- <div use:portal={target ?? config.defaultTarget} hidden>
38
- {@render children()}
39
- </div>
@@ -1,7 +0,0 @@
1
- import Portal, { setConfig } from './Portal.svelte';
2
-
3
- const portal = Object.assign(Portal, {
4
- setConfig
5
- });
6
-
7
- export default portal;
@@ -1,38 +0,0 @@
1
- interface ClickOutsideParams {
2
- /** Callback to be called when clicking outside of node */
3
- callback: (e: MouseEvent) => void;
4
- /** Callback is also not fired if the click target is inside this element */
5
- target?: Element;
6
- }
7
-
8
- /** Dispatch event on click outside of node */
9
- export function clickOutside(
10
- node: Element,
11
- params: ((e: MouseEvent) => void) | ClickOutsideParams
12
- ) {
13
- function handleClick(event: MouseEvent) {
14
- if (
15
- !(event.target instanceof Node) ||
16
- !node ||
17
- node.contains(event.target) ||
18
- event.defaultPrevented
19
- )
20
- return;
21
-
22
- if (typeof params === 'function') {
23
- params(event);
24
- return;
25
- }
26
-
27
- if (params.target?.contains(event.target)) return;
28
- params.callback(event);
29
- }
30
-
31
- document.addEventListener('click', handleClick, true);
32
-
33
- return {
34
- destroy() {
35
- document.removeEventListener('click', handleClick, true);
36
- }
37
- };
38
- }
@@ -1,65 +0,0 @@
1
- export function focusTrap(node: HTMLElement, enabled: boolean) {
2
- const elementWhitelist =
3
- 'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])';
4
- let firstElement: HTMLElement;
5
- let lastElement: HTMLElement;
6
-
7
- function onFirstElemKeydown(e: KeyboardEvent): void {
8
- if (e.shiftKey && e.code === 'Tab') {
9
- e.preventDefault();
10
- lastElement.focus();
11
- }
12
- }
13
-
14
- function onLastElemKeydown(e: KeyboardEvent): void {
15
- if (!e.shiftKey && e.code === 'Tab') {
16
- e.preventDefault();
17
- firstElement.focus();
18
- }
19
- }
20
-
21
- function scanElements(fromObserver: boolean) {
22
- if (enabled === false) return;
23
- const focusableElems: HTMLElement[] = Array.from(node.querySelectorAll(elementWhitelist));
24
- if (focusableElems.length) {
25
- // Set first/last focusable elements
26
- firstElement = focusableElems[0];
27
- lastElement = focusableElems[focusableElems.length - 1];
28
- // Auto-focus first focusable element only when not called from mutation observer
29
- if (!fromObserver) firstElement.focus();
30
- // Listen for keydown on first & last element
31
- firstElement.addEventListener('keydown', onFirstElemKeydown);
32
- lastElement.addEventListener('keydown', onLastElemKeydown);
33
- }
34
- }
35
- scanElements(false);
36
-
37
- function cleanUp(): void {
38
- if (firstElement) firstElement.removeEventListener('keydown', onFirstElemKeydown);
39
- if (lastElement) lastElement.removeEventListener('keydown', onLastElemKeydown);
40
- }
41
-
42
- // Re-determine focusable elements when mutations are observed
43
- const onObservationChange = (mutationRecords: MutationRecord[], observer: MutationObserver) => {
44
- if (mutationRecords.length) {
45
- cleanUp();
46
- scanElements(true);
47
- }
48
- return observer;
49
- };
50
- const observer = new MutationObserver(onObservationChange);
51
- observer.observe(node, { childList: true, subtree: true });
52
-
53
- // Lifecycle
54
- return {
55
- update(newArgs: boolean) {
56
- enabled = newArgs;
57
- if (newArgs) scanElements(false);
58
- else cleanUp();
59
- },
60
- destroy() {
61
- cleanUp();
62
- observer.disconnect();
63
- }
64
- };
65
- }
@@ -1,43 +0,0 @@
1
- import { tick } from 'svelte';
2
-
3
- /**
4
- * Places the element in a diffrent place in the DOM
5
- *
6
- * **Use sparingy as it can make the DOM structure confusing**
7
- */
8
- export function portal(el: HTMLElement, target: HTMLElement | string = 'body') {
9
- let targetEl;
10
- async function update(newTarget: HTMLElement | string) {
11
- target = newTarget;
12
- if (typeof target === 'string') {
13
- targetEl = document.querySelector(target);
14
- if (targetEl === null) {
15
- await tick();
16
- targetEl = document.querySelector(target);
17
- }
18
- if (targetEl === null) {
19
- throw new Error(`No element found matching css selector: "${target}"`);
20
- }
21
- } else if (target instanceof HTMLElement) {
22
- targetEl = target;
23
- } else {
24
- throw new TypeError(
25
- `Unknown portal target type: ${
26
- target === null ? 'null' : typeof target
27
- }. Allowed types: string (CSS selector) or HTMLElement.`
28
- );
29
- }
30
- targetEl.appendChild(el);
31
- el.hidden = false;
32
- }
33
-
34
- function destroy() {
35
- if (el.parentNode) el.parentNode.removeChild(el);
36
- }
37
-
38
- update(target);
39
- return {
40
- update,
41
- destroy
42
- };
43
- }
@@ -1,35 +0,0 @@
1
- import type { Action } from 'svelte/action';
2
-
3
- export const resize: Action<
4
- HTMLElement,
5
- { resized: (mouseX: number) => void; dragging: (dragging: boolean) => void }
6
- > = (node: HTMLElement, { resized, dragging }) => {
7
- const onResize = (e: PointerEvent) => {
8
- resized(e.clientX);
9
- };
10
-
11
- const onResizeEnd = () => {
12
- dragging(false);
13
- window.removeEventListener('pointermove', onResize);
14
- window.removeEventListener('pointerup', onResizeEnd);
15
- window.removeEventListener('pointercancel', onResizeEnd);
16
-
17
- document.getElementsByTagName('html')[0].style.userSelect = '';
18
- };
19
-
20
- const onResizeStart = () => {
21
- dragging(true);
22
- window.addEventListener('pointermove', onResize);
23
- window.addEventListener('pointerup', onResizeEnd);
24
- window.addEventListener('pointercancel', onResizeEnd);
25
-
26
- document.getElementsByTagName('html')[0].style.userSelect = 'none';
27
- };
28
- node.addEventListener('pointerdown', onResizeStart);
29
-
30
- return {
31
- destroy() {
32
- node.removeEventListener('pointerdown', onResizeStart);
33
- }
34
- };
35
- };
@@ -1,28 +0,0 @@
1
- import type { Action } from 'svelte/action';
2
-
3
- export const onFirstVisible: Action<
4
- HTMLElement,
5
- {
6
- callback: () => void;
7
- options?: Partial<IntersectionObserverInit>;
8
- }
9
- > = (node, input) => {
10
- const observer = new IntersectionObserver(
11
- (e) => {
12
- if (!e[0].isIntersecting) {
13
- return;
14
- }
15
-
16
- input.callback();
17
- },
18
- { root: null, threshold: 1, ...input.options }
19
- );
20
-
21
- observer.observe(node);
22
-
23
- return {
24
- destroy: () => {
25
- observer.disconnect();
26
- }
27
- };
28
- };