@ims360/svelte-ivory 0.0.56 → 0.0.57

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 (20) hide show
  1. package/dist/components/layout/drawer/Drawer.svelte +25 -8
  2. package/dist/components/layout/drawer/Drawer.svelte.d.ts +7 -2
  3. package/dist/components/layout/drawer/Drawer.svelte.d.ts.map +1 -1
  4. package/dist/components/layout/modal/Modal.svelte +25 -11
  5. package/dist/components/layout/modal/Modal.svelte.d.ts +12 -5
  6. package/dist/components/layout/modal/Modal.svelte.d.ts.map +1 -1
  7. package/dist/components/layout/popover/Popover.svelte +41 -27
  8. package/dist/components/layout/popover/Popover.svelte.d.ts +6 -3
  9. package/dist/components/layout/popover/Popover.svelte.d.ts.map +1 -1
  10. package/dist/components/layout/tooltip/Tooltip.svelte +22 -26
  11. package/dist/components/layout/tooltip/Tooltip.svelte.d.ts.map +1 -1
  12. package/dist/components/table/Table.svelte +32 -32
  13. package/dist/components/table/Table.svelte.d.ts +2 -0
  14. package/dist/components/table/Table.svelte.d.ts.map +1 -1
  15. package/package.json +1 -1
  16. package/src/lib/components/layout/drawer/Drawer.svelte +25 -8
  17. package/src/lib/components/layout/modal/Modal.svelte +25 -11
  18. package/src/lib/components/layout/popover/Popover.svelte +41 -27
  19. package/src/lib/components/layout/tooltip/Tooltip.svelte +22 -26
  20. package/src/lib/components/table/Table.svelte +32 -32
package/dist/components/layout/drawer/Drawer.svelte CHANGED
@@ -13,20 +13,20 @@
13
13
 
14
14
  export type DrawerProps = TransitionProps & {
15
15
  class?: string;
16
- b_open: boolean;
17
16
  title?: string | Snippet;
18
17
  children: Snippet;
19
18
  placement?: DrawerPlacement;
19
+ closeOnOutsideClick?: boolean;
20
20
  };
21
21
  </script>
22
22
 
23
23
  <script lang="ts">
24
24
  let {
25
25
  class: clazz,
26
- b_open = $bindable(false),
27
26
  children,
28
27
  title,
29
28
  placement = 'right',
29
+ closeOnOutsideClick = true,
30
30
  inTransition = (e) =>
31
31
  fly(e, { x: placement === 'right' ? '100%' : '-100%', duration: 200 }),
32
32
  outTransition = (e) =>
@@ -34,14 +34,31 @@
34
34
  ...rest
35
35
  }: DrawerProps = $props();
36
36
 
37
- const onclose = () => {
38
- b_open = false;
39
- };
37
+ let currentlyOpen = $state(false);
38
+ export function close() {
39
+ currentlyOpen = false;
40
+ }
41
+
42
+ export function open() {
43
+ currentlyOpen = true;
44
+ }
45
+
46
+ export function toggle() {
47
+ currentlyOpen = !currentlyOpen;
48
+ }
49
+
50
+ export function isOpen() {
51
+ return currentlyOpen;
52
+ }
40
53
  </script>
41
54
 
42
- {#if b_open}
55
+ {#if currentlyOpen}
43
56
  <Portal>
44
- <HiddenBackground {onclose}>
57
+ <HiddenBackground
58
+ onclose={() => {
59
+ if (closeOnOutsideClick) close();
60
+ }}
61
+ >
45
62
  <div
46
63
  class={twMerge(
47
64
  clsx([
@@ -66,7 +83,7 @@
66
83
  {/if}
67
84
  </Heading>
68
85
  {/if}
69
- <button class="group ml-auto flex justify-end" type="button" onclick={onclose}>
86
+ <button class="group ml-auto flex justify-end" type="button" onclick={close}>
70
87
  <X class="h-full w-auto transition-[stroke-width] group-hover:stroke-3" />
71
88
  </button>
72
89
  </div>
package/dist/components/layout/drawer/Drawer.svelte.d.ts CHANGED
@@ -3,12 +3,17 @@ import type { Snippet } from 'svelte';
3
3
  export type DrawerPlacement = 'left' | 'right';
4
4
  export type DrawerProps = TransitionProps & {
5
5
  class?: string;
6
- b_open: boolean;
7
6
  title?: string | Snippet;
8
7
  children: Snippet;
9
8
  placement?: DrawerPlacement;
9
+ closeOnOutsideClick?: boolean;
10
10
  };
11
- declare const Drawer: import("svelte").Component<DrawerProps, {}, "b_open">;
11
+ declare const Drawer: import("svelte").Component<DrawerProps, {
12
+ close: () => void;
13
+ open: () => void;
14
+ toggle: () => void;
15
+ isOpen: () => boolean;
16
+ }, "">;
12
17
  type Drawer = ReturnType<typeof Drawer>;
13
18
  export default Drawer;
14
19
  //# sourceMappingURL=Drawer.svelte.d.ts.map
package/dist/components/layout/drawer/Drawer.svelte.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Drawer.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/drawer/Drawer.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAGlD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAOtC,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,CAAC;AAE/C,MAAM,MAAM,WAAW,GAAG,eAAe,GAAG;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,eAAe,CAAC;CAC/B,CAAC;AAwDN,QAAA,MAAM,MAAM,uDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
1
+ {"version":3,"file":"Drawer.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/drawer/Drawer.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAGlD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAOtC,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,CAAC;AAE/C,MAAM,MAAM,WAAW,GAAG,eAAe,GAAG;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAC;CACjC,CAAC;AAuEN,QAAA,MAAM,MAAM;;;;;MAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
package/dist/components/layout/modal/Modal.svelte CHANGED
@@ -14,12 +14,14 @@
14
14
  class?: ClassValue;
15
15
  /** Class of the div wrapping the children */
16
16
  innerClass?: ClassValue;
17
- /** If `true`, the modal will be open */
18
- b_open: boolean;
19
17
  /** Content of the modal */
20
18
  children?: Snippet;
21
- /** If `true` the modal will not close when clicking outside of it */
22
- preventClosing?: boolean;
19
+ /**
20
+ * If `true` the modal will not close when clicking outside of it
21
+ *
22
+ * Defaults to `true`
23
+ * */
24
+ closeOnOutsideClick?: boolean;
23
25
  /** Variant of the modal, applies styling to the header */
24
26
  variant?: ModalVariant;
25
27
  title?: string | Snippet;
@@ -38,10 +40,9 @@
38
40
  let {
39
41
  class: clazz = 'flex flex-col',
40
42
  title,
41
- b_open = $bindable(),
42
43
  children,
43
44
  modal,
44
- preventClosing = false,
45
+ closeOnOutsideClick = true,
45
46
  variant,
46
47
  innerClass,
47
48
  inTransition = (e) =>
@@ -52,8 +53,22 @@
52
53
  ...rest
53
54
  }: Props = $props();
54
55
 
55
- function close() {
56
- b_open = false;
56
+ let currentlyOpen = $state(false);
57
+
58
+ export function close() {
59
+ currentlyOpen = false;
60
+ }
61
+
62
+ export function open() {
63
+ currentlyOpen = true;
64
+ }
65
+
66
+ export function toggle() {
67
+ currentlyOpen = !currentlyOpen;
68
+ }
69
+
70
+ export function isOpen() {
71
+ return currentlyOpen;
57
72
  }
58
73
 
59
74
  const onclick: MouseEventHandler<HTMLDivElement> = (e) => {
@@ -66,12 +81,11 @@
66
81
  @component
67
82
  A modal, comes with a title, close button and different variants per default.
68
83
  -->
69
- {#if b_open}
84
+ {#if currentlyOpen}
70
85
  <Portal>
71
86
  <HiddenBackground
72
87
  onclose={() => {
73
- if (preventClosing) return;
74
- close();
88
+ if (closeOnOutsideClick) close();
75
89
  }}
76
90
  class="flex h-full w-full flex-col items-center justify-start p-8 lg:p-12 xl:p-16"
77
91
  >
package/dist/components/layout/modal/Modal.svelte.d.ts CHANGED
@@ -7,12 +7,14 @@ export type ModalProps = TransitionProps & {
7
7
  class?: ClassValue;
8
8
  /** Class of the div wrapping the children */
9
9
  innerClass?: ClassValue;
10
- /** If `true`, the modal will be open */
11
- b_open: boolean;
12
10
  /** Content of the modal */
13
11
  children?: Snippet;
14
- /** If `true` the modal will not close when clicking outside of it */
15
- preventClosing?: boolean;
12
+ /**
13
+ * If `true` the modal will not close when clicking outside of it
14
+ *
15
+ * Defaults to `true`
16
+ * */
17
+ closeOnOutsideClick?: boolean;
16
18
  /** Variant of the modal, applies styling to the header */
17
19
  variant?: ModalVariant;
18
20
  title?: string | Snippet;
@@ -24,7 +26,12 @@ interface Props extends ModalProps {
24
26
  modal?: Snippet;
25
27
  }
26
28
  /** A modal, comes with a title, close button and different variants per default. */
27
- declare const Modal: import("svelte").Component<Props, {}, "b_open">;
29
+ declare const Modal: import("svelte").Component<Props, {
30
+ close: () => void;
31
+ open: () => void;
32
+ toggle: () => void;
33
+ isOpen: () => boolean;
34
+ }, "">;
28
35
  type Modal = ReturnType<typeof Modal>;
29
36
  export default Modal;
30
37
  //# sourceMappingURL=Modal.svelte.d.ts.map
package/dist/components/layout/modal/Modal.svelte.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/modal/Modal.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAGlD,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAKrE,sFAAsF;AACtF,MAAM,MAAM,UAAU,GAAG,eAAe,GAAG;IACvC,iEAAiE;IACjE,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,wCAAwC;IACxC,MAAM,EAAE,OAAO,CAAC;IAChB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qEAAqE;IACrE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,0DAA0D;IAC1D,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;CAC/C,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAEpE,UAAU,KAAM,SAAQ,UAAU;IAC9B,sGAAsG;IACtG,KAAK,CAAC,EAAE,OAAO,CAAC;CACnB;AAwFL,oFAAoF;AACpF,QAAA,MAAM,KAAK,iDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
1
+ {"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/modal/Modal.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAGlD,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAKrE,sFAAsF;AACtF,MAAM,MAAM,UAAU,GAAG,eAAe,GAAG;IACvC,iEAAiE;IACjE,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;SAIK;IACL,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,0DAA0D;IAC1D,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;CAC/C,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAEpE,UAAU,KAAM,SAAQ,UAAU;IAC9B,sGAAsG;IACtG,KAAK,CAAC,EAAE,OAAO,CAAC;CACnB;AAoGL,oFAAoF;AACpF,QAAA,MAAM,KAAK;;;;;MAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
package/dist/components/layout/popover/Popover.svelte CHANGED
@@ -12,13 +12,12 @@
12
12
  import clsx from 'clsx';
13
13
  import { twMerge } from 'tailwind-merge';
14
14
  import { clickOutside } from '../../../utils/actions/clickOutside';
15
+ import Portal from '../portal/Portal.svelte';
15
16
 
16
17
  /** Possible placements for the popover */
17
18
  export type PopoverPlacement = ComputePositionConfig['placement'];
18
19
 
19
20
  export interface PopoverProps extends IvoryComponent<HTMLDivElement> {
20
- /** Whether the popover is open or not */
21
- b_open: boolean;
22
21
  /** The element the popover will be positioned relative to */
23
22
  target: Element | undefined;
24
23
  /**
@@ -45,13 +44,10 @@
45
44
  <script lang="ts">
46
45
  let {
47
46
  class: clazz,
48
- b_open = $bindable(false),
49
47
  style: externalStyle,
50
48
  target,
51
49
  placement = 'bottom-start',
52
- onClickOutside = () => {
53
- b_open = false;
54
- },
50
+ onClickOutside = close,
55
51
  keepMounted = false,
56
52
  children,
57
53
  autoplacement,
@@ -70,21 +66,33 @@
70
66
  style = `top: ${y}px; left: ${x}px;`;
71
67
  };
72
68
 
69
+ let currentlyOpen = $state(false);
70
+
73
71
  let cleanup: () => void = () => {};
74
- $effect(() => {
75
- if (browser && popover && target)
76
- if (b_open) {
77
- cleanup = autoUpdate(target, popover, () => postion(b_open));
78
- } else {
79
- cleanup();
80
- }
81
- });
72
+ export function close() {
73
+ currentlyOpen = false;
74
+ cleanup();
75
+ }
76
+
77
+ export function open() {
78
+ currentlyOpen = true;
79
+ if (!target || !popover) return;
80
+ cleanup = autoUpdate(target, popover, () => postion(true));
81
+ }
82
+
83
+ export function toggle() {
84
+ currentlyOpen = !currentlyOpen;
85
+ }
86
+
87
+ export function isOpen() {
88
+ return currentlyOpen;
89
+ }
82
90
 
83
91
  // TODO: this is kinda hacky
84
92
  $effect(() => {
85
93
  // eslint-disable-next-line @typescript-eslint/no-unused-expressions
86
94
  [popover, target];
87
- postion(b_open);
95
+ postion(currentlyOpen);
88
96
  });
89
97
  </script>
90
98
 
@@ -92,16 +100,22 @@
92
100
  @component
93
101
  A popover, positions itself relative to a target element.
94
102
  -->
95
- {#if b_open || keepMounted}
96
- <div
97
- class={twMerge(
98
- clsx('absolute z-30', !keepMounted && clazz, keepMounted && !b_open ? 'hidden' : clazz)
99
- )}
100
- style={style + ' ' + externalStyle}
101
- bind:this={popover}
102
- use:clickOutside={{ callback: onClickOutside, target }}
103
- {...rest}
104
- >
105
- {@render children?.()}
106
- </div>
103
+ {#if currentlyOpen || keepMounted}
104
+ <Portal>
105
+ <div
106
+ class={twMerge(
107
+ clsx(
108
+ 'absolute z-30',
109
+ !keepMounted && clazz,
110
+ keepMounted && !currentlyOpen ? 'hidden' : clazz
111
+ )
112
+ )}
113
+ style={style + ' ' + externalStyle}
114
+ bind:this={popover}
115
+ use:clickOutside={{ callback: onClickOutside, target }}
116
+ {...rest}
117
+ >
118
+ {@render children?.()}
119
+ </div>
120
+ </Portal>
107
121
  {/if}
package/dist/components/layout/popover/Popover.svelte.d.ts CHANGED
@@ -3,8 +3,6 @@ import { type ComputePositionConfig } from '@floating-ui/dom';
3
3
  /** Possible placements for the popover */
4
4
  export type PopoverPlacement = ComputePositionConfig['placement'];
5
5
  export interface PopoverProps extends IvoryComponent<HTMLDivElement> {
6
- /** Whether the popover is open or not */
7
- b_open: boolean;
8
6
  /** The element the popover will be positioned relative to */
9
7
  target: Element | undefined;
10
8
  /**
@@ -27,7 +25,12 @@ export interface PopoverProps extends IvoryComponent<HTMLDivElement> {
27
25
  autoplacement?: boolean;
28
26
  }
29
27
  /** A popover, positions itself relative to a target element. */
30
- declare const Popover: import("svelte").Component<PopoverProps, {}, "b_open">;
28
+ declare const Popover: import("svelte").Component<PopoverProps, {
29
+ close: () => void;
30
+ open: () => void;
31
+ toggle: () => void;
32
+ isOpen: () => boolean;
33
+ }, "">;
31
34
  type Popover = ReturnType<typeof Popover>;
32
35
  export default Popover;
33
36
  //# sourceMappingURL=Popover.svelte.d.ts.map
package/dist/components/layout/popover/Popover.svelte.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Popover.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/popover/Popover.svelte.ts"],"names":[],"mappings":"AAII,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAMH,KAAK,qBAAqB,EAC7B,MAAM,kBAAkB,CAAC;AAK1B,0CAA0C;AAC1C,MAAM,MAAM,gBAAgB,GAAG,qBAAqB,CAAC,WAAW,CAAC,CAAC;AAElE,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE,yCAAyC;IACzC,MAAM,EAAE,OAAO,CAAC;IAChB,6DAA6D;IAC7D,MAAM,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B;;;;OAIG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACzC,8FAA8F;IAC9F,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B;AA6DL,gEAAgE;AAChE,QAAA,MAAM,OAAO,wDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
1
+ {"version":3,"file":"Popover.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/popover/Popover.svelte.ts"],"names":[],"mappings":"AAII,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAMH,KAAK,qBAAqB,EAC7B,MAAM,kBAAkB,CAAC;AAM1B,0CAA0C;AAC1C,MAAM,MAAM,gBAAgB,GAAG,qBAAqB,CAAC,WAAW,CAAC,CAAC;AAElE,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE,6DAA6D;IAC7D,MAAM,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B;;;;OAIG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACzC,8FAA8F;IAC9F,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B;AA4EL,gEAAgE;AAChE,QAAA,MAAM,OAAO;;;;;MAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
package/dist/components/layout/tooltip/Tooltip.svelte CHANGED
@@ -4,7 +4,6 @@
4
4
  import type { ClassValue, MouseEventHandler } from 'svelte/elements';
5
5
  import { twMerge } from 'tailwind-merge';
6
6
  import Popover, { type PopoverPlacement } from '../popover/Popover.svelte';
7
- import Portal from '../portal/Portal.svelte';
8
7
 
9
8
  export interface TooltipProps {
10
9
  onclick?: MouseEventHandler<HTMLElement>;
@@ -44,23 +43,24 @@
44
43
  }: TooltipProps = $props();
45
44
 
46
45
  let target = $state<HTMLElement>();
47
- let open = $state(false);
46
+
47
+ let popover = $state<Popover>();
48
48
 
49
49
  let currentTimeout: number;
50
50
  function onmouseenter() {
51
51
  clearTimeout(currentTimeout);
52
52
  if (timeout === 0) {
53
- open = true;
53
+ popover?.open();
54
54
  } else {
55
55
  currentTimeout = setTimeout(() => {
56
- open = true;
56
+ popover?.open();
57
57
  }, timeout) as unknown as number;
58
58
  }
59
59
  }
60
60
 
61
61
  function onmouseleave() {
62
62
  clearTimeout(currentTimeout);
63
- open = false;
63
+ popover?.close();
64
64
  }
65
65
  </script>
66
66
 
@@ -80,24 +80,20 @@
80
80
  {@render children?.()}
81
81
  </svelte:element>
82
82
 
83
- {#if open}
84
- <Portal>
85
- <Popover
86
- bind:b_open={open}
87
- {target}
88
- {placement}
89
- class={twMerge(
90
- clsx(
91
- 'bg-surface-50-950 max-w-96 -translate-y-0.5 rounded px-4 py-1 shadow-lg',
92
- tooltipClass
93
- )
94
- )}
95
- >
96
- {#if typeof tooltip === 'string'}
97
- {tooltip}
98
- {:else}
99
- {@render tooltip()}
100
- {/if}
101
- </Popover>
102
- </Portal>
103
- {/if}
83
+ <Popover
84
+ bind:this={popover}
85
+ {target}
86
+ {placement}
87
+ class={twMerge(
88
+ clsx(
89
+ 'bg-surface-50-950 max-w-96 -translate-y-0.5 rounded px-4 py-1 shadow-lg',
90
+ tooltipClass
91
+ )
92
+ )}
93
+ >
94
+ {#if typeof tooltip === 'string'}
95
+ {tooltip}
96
+ {:else}
97
+ {@render tooltip()}
98
+ {/if}
99
+ </Popover>
package/dist/components/layout/tooltip/Tooltip.svelte.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Tooltip.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/tooltip/Tooltip.svelte.ts"],"names":[],"mappings":"AAII,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAErE,OAAgB,EAAE,KAAK,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAG3E,MAAM,WAAW,YAAY;IACzB,OAAO,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC;IACzC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iCAAiC;IACjC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B,sCAAsC;IACtC,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,2EAA2E;IAC3E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;CAChC;AA4DL,kEAAkE;AAClE,QAAA,MAAM,OAAO,kDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
1
+ {"version":3,"file":"Tooltip.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/tooltip/Tooltip.svelte.ts"],"names":[],"mappings":"AAII,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAErE,OAAgB,EAAE,KAAK,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAE3E,MAAM,WAAW,YAAY;IACzB,OAAO,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC;IACzC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iCAAiC;IACjC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B,sCAAsC;IACtC,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,2EAA2E;IAC3E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;CAChC;AAyDL,kEAAkE;AAClE,QAAA,MAAM,OAAO,kDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
package/dist/components/table/Table.svelte CHANGED
@@ -84,7 +84,38 @@
84
84
  let columns = $state<ColumnController[]>(externalColumns ?? []);
85
85
  let treeIndicatorColumn = $state<ColumnController>();
86
86
 
87
- function toggleExpansion(id: string) {
87
+ setTableContext({
88
+ toggleExpansion,
89
+ registerColumn(config: ColumnConfig) {
90
+ let existingColumn: ColumnController | undefined = undefined;
91
+
92
+ if (config.id === treeIndicatorId) {
93
+ if (!treeIndicatorColumn) treeIndicatorColumn = new ColumnController(config);
94
+ return treeIndicatorColumn;
95
+ }
96
+
97
+ for (const column of existingColumn || columns) {
98
+ if (column.id !== config.id) continue;
99
+ existingColumn = column;
100
+ break;
101
+ }
102
+ if (existingColumn) return existingColumn;
103
+ const col = new ColumnController(config);
104
+ (externalColumns || columns).push(col);
105
+ return col;
106
+ },
107
+ get nestingInset() {
108
+ return nestingInset;
109
+ },
110
+ get rowHeight() {
111
+ return rowHeight;
112
+ },
113
+ scrollTo(top?: number, left?: number) {
114
+ list?.scrollTo(top, left);
115
+ }
116
+ });
117
+
118
+ export function toggleExpansion(id: string) {
88
119
  if (expanded.has(id)) expanded.delete(id);
89
120
  else expanded.add(id);
90
121
  }
@@ -151,37 +182,6 @@
151
182
  prevSearch = currentSearch;
152
183
  });
153
184
 
154
- setTableContext({
155
- toggleExpansion,
156
- registerColumn(config: ColumnConfig) {
157
- let existingColumn: ColumnController | undefined = undefined;
158
-
159
- if (config.id === treeIndicatorId) {
160
- if (!treeIndicatorColumn) treeIndicatorColumn = new ColumnController(config);
161
- return treeIndicatorColumn;
162
- }
163
-
164
- for (const column of existingColumn || columns) {
165
- if (column.id !== config.id) continue;
166
- existingColumn = column;
167
- break;
168
- }
169
- if (existingColumn) return existingColumn;
170
- const col = new ColumnController(config);
171
- (externalColumns || columns).push(col);
172
- return col;
173
- },
174
- get nestingInset() {
175
- return nestingInset;
176
- },
177
- get rowHeight() {
178
- return rowHeight;
179
- },
180
- scrollTo(top?: number, left?: number) {
181
- list?.scrollTo(top, left);
182
- }
183
- });
184
-
185
185
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
186
186
  let list = $state<VirtualList<any>>();
187
187
  export function scrollTo(top?: number, left?: number) {
package/dist/components/table/Table.svelte.d.ts CHANGED
@@ -48,6 +48,7 @@ export declare function getTableContext<T extends TableRow<T>>(): TableContext<T
48
48
  declare function $$render<T extends TableRow<T>>(): {
49
49
  props: TableProps<T>;
50
50
  exports: {
51
+ toggleExpansion: (id: string) => void;
51
52
  scrollTo: (top?: number, left?: number) => void;
52
53
  };
53
54
  bindings: "b_scrollTop" | "b_columns";
@@ -60,6 +61,7 @@ declare class __sveltets_Render<T extends TableRow<T>> {
60
61
  slots(): ReturnType<typeof $$render<T>>['slots'];
61
62
  bindings(): "b_scrollTop" | "b_columns";
62
63
  exports(): {
64
+ toggleExpansion: (id: string) => void;
63
65
  scrollTo: (top?: number, left?: number) => void;
64
66
  };
65
67
  }
package/dist/components/table/Table.svelte.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Table.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/table/Table.svelte.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Table.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/table/Table.svelte.ts"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ims360/svelte-ivory",
3
- "version": "0.0.56",
3
+ "version": "0.0.57",
4
4
  "keywords": [
5
5
  "svelte"
6
6
  ],
package/src/lib/components/layout/drawer/Drawer.svelte CHANGED
@@ -13,20 +13,20 @@
13
13
 
14
14
  export type DrawerProps = TransitionProps & {
15
15
  class?: string;
16
- b_open: boolean;
17
16
  title?: string | Snippet;
18
17
  children: Snippet;
19
18
  placement?: DrawerPlacement;
19
+ closeOnOutsideClick?: boolean;
20
20
  };
21
21
  </script>
22
22
 
23
23
  <script lang="ts">
24
24
  let {
25
25
  class: clazz,
26
- b_open = $bindable(false),
27
26
  children,
28
27
  title,
29
28
  placement = 'right',
29
+ closeOnOutsideClick = true,
30
30
  inTransition = (e) =>
31
31
  fly(e, { x: placement === 'right' ? '100%' : '-100%', duration: 200 }),
32
32
  outTransition = (e) =>
@@ -34,14 +34,31 @@
34
34
  ...rest
35
35
  }: DrawerProps = $props();
36
36
 
37
- const onclose = () => {
38
- b_open = false;
39
- };
37
+ let currentlyOpen = $state(false);
38
+ export function close() {
39
+ currentlyOpen = false;
40
+ }
41
+
42
+ export function open() {
43
+ currentlyOpen = true;
44
+ }
45
+
46
+ export function toggle() {
47
+ currentlyOpen = !currentlyOpen;
48
+ }
49
+
50
+ export function isOpen() {
51
+ return currentlyOpen;
52
+ }
40
53
  </script>
41
54
 
42
- {#if b_open}
55
+ {#if currentlyOpen}
43
56
  <Portal>
44
- <HiddenBackground {onclose}>
57
+ <HiddenBackground
58
+ onclose={() => {
59
+ if (closeOnOutsideClick) close();
60
+ }}
61
+ >
45
62
  <div
46
63
  class={twMerge(
47
64
  clsx([
@@ -66,7 +83,7 @@
66
83
  {/if}
67
84
  </Heading>
68
85
  {/if}
69
- <button class="group ml-auto flex justify-end" type="button" onclick={onclose}>
86
+ <button class="group ml-auto flex justify-end" type="button" onclick={close}>
70
87
  <X class="h-full w-auto transition-[stroke-width] group-hover:stroke-3" />
71
88
  </button>
72
89
  </div>
package/src/lib/components/layout/modal/Modal.svelte CHANGED
@@ -14,12 +14,14 @@
14
14
  class?: ClassValue;
15
15
  /** Class of the div wrapping the children */
16
16
  innerClass?: ClassValue;
17
- /** If `true`, the modal will be open */
18
- b_open: boolean;
19
17
  /** Content of the modal */
20
18
  children?: Snippet;
21
- /** If `true` the modal will not close when clicking outside of it */
22
- preventClosing?: boolean;
19
+ /**
20
+ * If `true` the modal will not close when clicking outside of it
21
+ *
22
+ * Defaults to `true`
23
+ * */
24
+ closeOnOutsideClick?: boolean;
23
25
  /** Variant of the modal, applies styling to the header */
24
26
  variant?: ModalVariant;
25
27
  title?: string | Snippet;
@@ -38,10 +40,9 @@
38
40
  let {
39
41
  class: clazz = 'flex flex-col',
40
42
  title,
41
- b_open = $bindable(),
42
43
  children,
43
44
  modal,
44
- preventClosing = false,
45
+ closeOnOutsideClick = true,
45
46
  variant,
46
47
  innerClass,
47
48
  inTransition = (e) =>
@@ -52,8 +53,22 @@
52
53
  ...rest
53
54
  }: Props = $props();
54
55
 
55
- function close() {
56
- b_open = false;
56
+ let currentlyOpen = $state(false);
57
+
58
+ export function close() {
59
+ currentlyOpen = false;
60
+ }
61
+
62
+ export function open() {
63
+ currentlyOpen = true;
64
+ }
65
+
66
+ export function toggle() {
67
+ currentlyOpen = !currentlyOpen;
68
+ }
69
+
70
+ export function isOpen() {
71
+ return currentlyOpen;
57
72
  }
58
73
 
59
74
  const onclick: MouseEventHandler<HTMLDivElement> = (e) => {
@@ -66,12 +81,11 @@
66
81
  @component
67
82
  A modal, comes with a title, close button and different variants per default.
68
83
  -->
69
- {#if b_open}
84
+ {#if currentlyOpen}
70
85
  <Portal>
71
86
  <HiddenBackground
72
87
  onclose={() => {
73
- if (preventClosing) return;
74
- close();
88
+ if (closeOnOutsideClick) close();
75
89
  }}
76
90
  class="flex h-full w-full flex-col items-center justify-start p-8 lg:p-12 xl:p-16"
77
91
  >
package/src/lib/components/layout/popover/Popover.svelte CHANGED
@@ -12,13 +12,12 @@
12
12
  import clsx from 'clsx';
13
13
  import { twMerge } from 'tailwind-merge';
14
14
  import { clickOutside } from '../../../utils/actions/clickOutside';
15
+ import Portal from '../portal/Portal.svelte';
15
16
 
16
17
  /** Possible placements for the popover */
17
18
  export type PopoverPlacement = ComputePositionConfig['placement'];
18
19
 
19
20
  export interface PopoverProps extends IvoryComponent<HTMLDivElement> {
20
- /** Whether the popover is open or not */
21
- b_open: boolean;
22
21
  /** The element the popover will be positioned relative to */
23
22
  target: Element | undefined;
24
23
  /**
@@ -45,13 +44,10 @@
45
44
  <script lang="ts">
46
45
  let {
47
46
  class: clazz,
48
- b_open = $bindable(false),
49
47
  style: externalStyle,
50
48
  target,
51
49
  placement = 'bottom-start',
52
- onClickOutside = () => {
53
- b_open = false;
54
- },
50
+ onClickOutside = close,
55
51
  keepMounted = false,
56
52
  children,
57
53
  autoplacement,
@@ -70,21 +66,33 @@
70
66
  style = `top: ${y}px; left: ${x}px;`;
71
67
  };
72
68
 
69
+ let currentlyOpen = $state(false);
70
+
73
71
  let cleanup: () => void = () => {};
74
- $effect(() => {
75
- if (browser && popover && target)
76
- if (b_open) {
77
- cleanup = autoUpdate(target, popover, () => postion(b_open));
78
- } else {
79
- cleanup();
80
- }
81
- });
72
+ export function close() {
73
+ currentlyOpen = false;
74
+ cleanup();
75
+ }
76
+
77
+ export function open() {
78
+ currentlyOpen = true;
79
+ if (!target || !popover) return;
80
+ cleanup = autoUpdate(target, popover, () => postion(true));
81
+ }
82
+
83
+ export function toggle() {
84
+ currentlyOpen = !currentlyOpen;
85
+ }
86
+
87
+ export function isOpen() {
88
+ return currentlyOpen;
89
+ }
82
90
 
83
91
  // TODO: this is kinda hacky
84
92
  $effect(() => {
85
93
  // eslint-disable-next-line @typescript-eslint/no-unused-expressions
86
94
  [popover, target];
87
- postion(b_open);
95
+ postion(currentlyOpen);
88
96
  });
89
97
  </script>
90
98
 
@@ -92,16 +100,22 @@
92
100
  @component
93
101
  A popover, positions itself relative to a target element.
94
102
  -->
95
- {#if b_open || keepMounted}
96
- <div
97
- class={twMerge(
98
- clsx('absolute z-30', !keepMounted && clazz, keepMounted && !b_open ? 'hidden' : clazz)
99
- )}
100
- style={style + ' ' + externalStyle}
101
- bind:this={popover}
102
- use:clickOutside={{ callback: onClickOutside, target }}
103
- {...rest}
104
- >
105
- {@render children?.()}
106
- </div>
103
+ {#if currentlyOpen || keepMounted}
104
+ <Portal>
105
+ <div
106
+ class={twMerge(
107
+ clsx(
108
+ 'absolute z-30',
109
+ !keepMounted && clazz,
110
+ keepMounted && !currentlyOpen ? 'hidden' : clazz
111
+ )
112
+ )}
113
+ style={style + ' ' + externalStyle}
114
+ bind:this={popover}
115
+ use:clickOutside={{ callback: onClickOutside, target }}
116
+ {...rest}
117
+ >
118
+ {@render children?.()}
119
+ </div>
120
+ </Portal>
107
121
  {/if}
package/src/lib/components/layout/tooltip/Tooltip.svelte CHANGED
@@ -4,7 +4,6 @@
4
4
  import type { ClassValue, MouseEventHandler } from 'svelte/elements';
5
5
  import { twMerge } from 'tailwind-merge';
6
6
  import Popover, { type PopoverPlacement } from '../popover/Popover.svelte';
7
- import Portal from '../portal/Portal.svelte';
8
7
 
9
8
  export interface TooltipProps {
10
9
  onclick?: MouseEventHandler<HTMLElement>;
@@ -44,23 +43,24 @@
44
43
  }: TooltipProps = $props();
45
44
 
46
45
  let target = $state<HTMLElement>();
47
- let open = $state(false);
46
+
47
+ let popover = $state<Popover>();
48
48
 
49
49
  let currentTimeout: number;
50
50
  function onmouseenter() {
51
51
  clearTimeout(currentTimeout);
52
52
  if (timeout === 0) {
53
- open = true;
53
+ popover?.open();
54
54
  } else {
55
55
  currentTimeout = setTimeout(() => {
56
- open = true;
56
+ popover?.open();
57
57
  }, timeout) as unknown as number;
58
58
  }
59
59
  }
60
60
 
61
61
  function onmouseleave() {
62
62
  clearTimeout(currentTimeout);
63
- open = false;
63
+ popover?.close();
64
64
  }
65
65
  </script>
66
66
 
@@ -80,24 +80,20 @@
80
80
  {@render children?.()}
81
81
  </svelte:element>
82
82
 
83
- {#if open}
84
- <Portal>
85
- <Popover
86
- bind:b_open={open}
87
- {target}
88
- {placement}
89
- class={twMerge(
90
- clsx(
91
- 'bg-surface-50-950 max-w-96 -translate-y-0.5 rounded px-4 py-1 shadow-lg',
92
- tooltipClass
93
- )
94
- )}
95
- >
96
- {#if typeof tooltip === 'string'}
97
- {tooltip}
98
- {:else}
99
- {@render tooltip()}
100
- {/if}
101
- </Popover>
102
- </Portal>
103
- {/if}
83
+ <Popover
84
+ bind:this={popover}
85
+ {target}
86
+ {placement}
87
+ class={twMerge(
88
+ clsx(
89
+ 'bg-surface-50-950 max-w-96 -translate-y-0.5 rounded px-4 py-1 shadow-lg',
90
+ tooltipClass
91
+ )
92
+ )}
93
+ >
94
+ {#if typeof tooltip === 'string'}
95
+ {tooltip}
96
+ {:else}
97
+ {@render tooltip()}
98
+ {/if}
99
+ </Popover>
package/src/lib/components/table/Table.svelte CHANGED
@@ -84,7 +84,38 @@
84
84
  let columns = $state<ColumnController[]>(externalColumns ?? []);
85
85
  let treeIndicatorColumn = $state<ColumnController>();
86
86
 
87
- function toggleExpansion(id: string) {
87
+ setTableContext({
88
+ toggleExpansion,
89
+ registerColumn(config: ColumnConfig) {
90
+ let existingColumn: ColumnController | undefined = undefined;
91
+
92
+ if (config.id === treeIndicatorId) {
93
+ if (!treeIndicatorColumn) treeIndicatorColumn = new ColumnController(config);
94
+ return treeIndicatorColumn;
95
+ }
96
+
97
+ for (const column of existingColumn || columns) {
98
+ if (column.id !== config.id) continue;
99
+ existingColumn = column;
100
+ break;
101
+ }
102
+ if (existingColumn) return existingColumn;
103
+ const col = new ColumnController(config);
104
+ (externalColumns || columns).push(col);
105
+ return col;
106
+ },
107
+ get nestingInset() {
108
+ return nestingInset;
109
+ },
110
+ get rowHeight() {
111
+ return rowHeight;
112
+ },
113
+ scrollTo(top?: number, left?: number) {
114
+ list?.scrollTo(top, left);
115
+ }
116
+ });
117
+
118
+ export function toggleExpansion(id: string) {
88
119
  if (expanded.has(id)) expanded.delete(id);
89
120
  else expanded.add(id);
90
121
  }
@@ -151,37 +182,6 @@
151
182
  prevSearch = currentSearch;
152
183
  });
153
184
 
154
- setTableContext({
155
- toggleExpansion,
156
- registerColumn(config: ColumnConfig) {
157
- let existingColumn: ColumnController | undefined = undefined;
158
-
159
- if (config.id === treeIndicatorId) {
160
- if (!treeIndicatorColumn) treeIndicatorColumn = new ColumnController(config);
161
- return treeIndicatorColumn;
162
- }
163
-
164
- for (const column of existingColumn || columns) {
165
- if (column.id !== config.id) continue;
166
- existingColumn = column;
167
- break;
168
- }
169
- if (existingColumn) return existingColumn;
170
- const col = new ColumnController(config);
171
- (externalColumns || columns).push(col);
172
- return col;
173
- },
174
- get nestingInset() {
175
- return nestingInset;
176
- },
177
- get rowHeight() {
178
- return rowHeight;
179
- },
180
- scrollTo(top?: number, left?: number) {
181
- list?.scrollTo(top, left);
182
- }
183
- });
184
-
185
185
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
186
186
  let list = $state<VirtualList<any>>();
187
187
  export function scrollTo(top?: number, left?: number) {