@ims360/svelte-ivory 0.0.3 → 0.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/layout/index.d.ts +1 -1
- package/dist/components/layout/modal/Modal.svelte +60 -45
- package/dist/components/layout/tooltip/Tooltip.svelte +2 -2
- package/package.json +1 -1
- package/src/lib/components/layout/index.ts +1 -1
- package/src/lib/components/layout/modal/Modal.svelte +60 -45
- package/src/lib/components/layout/tooltip/Tooltip.svelte +2 -2
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export { default as Drawer } from './drawer/Drawer.svelte';
|
|
2
2
|
export { default as Heading } from './heading/index';
|
|
3
3
|
export { default as HiddenBackground } from './hiddenBackground/index';
|
|
4
|
-
export { default as Modal } from './modal/Modal.svelte';
|
|
4
|
+
export { default as Modal, type ModalProps } from './modal/Modal.svelte';
|
|
5
5
|
export { default as Popover } from './popover/Popover.svelte';
|
|
6
6
|
export { default as Portal } from './portal/Portal.svelte';
|
|
7
7
|
export { default as Tabs } from './tabs/index';
|
|
@@ -4,8 +4,7 @@
|
|
|
4
4
|
import type { Snippet } from 'svelte';
|
|
5
5
|
import type { ClassValue } from 'svelte/elements';
|
|
6
6
|
import { twMerge } from 'tailwind-merge';
|
|
7
|
-
import Heading from '
|
|
8
|
-
import HiddenBackground from '../hiddenBackground/HiddenBackground.svelte';
|
|
7
|
+
import { Heading, HiddenBackground, Portal } from '..';
|
|
9
8
|
|
|
10
9
|
/** Props for the modal, expose if you overwrite the defaults in a custom component */
|
|
11
10
|
export interface ModalProps {
|
|
@@ -60,55 +59,71 @@
|
|
|
60
59
|
A modal, comes with a title, close button and different variants per default.
|
|
61
60
|
-->
|
|
62
61
|
{#if b_open}
|
|
63
|
-
<
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
{@render modal()}
|
|
72
|
-
</div>
|
|
73
|
-
{:else}
|
|
74
|
-
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
|
75
|
-
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
76
|
-
<div
|
|
77
|
-
class={twMerge(
|
|
78
|
-
clsx([
|
|
79
|
-
'bg-surface-50-950 relative flex max-h-full max-w-full flex-col overflow-hidden rounded',
|
|
80
|
-
clazz
|
|
81
|
-
])
|
|
82
|
-
)}
|
|
83
|
-
{style}
|
|
84
|
-
onclick={(e) => e.stopPropagation()}
|
|
85
|
-
data-testid={testId}
|
|
86
|
-
>
|
|
62
|
+
<Portal>
|
|
63
|
+
<HiddenBackground
|
|
64
|
+
onclose={close}
|
|
65
|
+
class="flex h-full w-full flex-col items-center justify-start p-16"
|
|
66
|
+
>
|
|
67
|
+
{#if modal}
|
|
68
|
+
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
69
|
+
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
|
87
70
|
<div
|
|
88
|
-
class={
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
variant === 'warning' && 'preset-tonal-warning',
|
|
93
|
-
variant === 'error' && 'preset-tonal-error',
|
|
94
|
-
variant === 'info' && 'preset-tonal-primary'
|
|
95
|
-
]}
|
|
71
|
+
class={clazz}
|
|
72
|
+
onclick={(e) => e.stopPropagation()}
|
|
73
|
+
data-testid={testId}
|
|
74
|
+
{style}
|
|
96
75
|
>
|
|
97
|
-
{
|
|
98
|
-
<Heading>{title}</Heading>
|
|
99
|
-
{/if}
|
|
100
|
-
<button class="group ml-auto flex justify-end" type="button" onclick={close}>
|
|
101
|
-
<X class="h-full w-auto transition-[stroke-width] group-hover:stroke-3" />
|
|
102
|
-
</button>
|
|
76
|
+
{@render modal()}
|
|
103
77
|
</div>
|
|
78
|
+
{:else}
|
|
79
|
+
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
|
80
|
+
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
104
81
|
<div
|
|
105
82
|
class={twMerge(
|
|
106
|
-
clsx(
|
|
83
|
+
clsx([
|
|
84
|
+
'bg-surface-50-950 relative flex max-h-full max-w-full flex-col overflow-hidden rounded',
|
|
85
|
+
clazz
|
|
86
|
+
])
|
|
107
87
|
)}
|
|
88
|
+
{style}
|
|
89
|
+
onclick={(e) => e.stopPropagation()}
|
|
90
|
+
data-testid={testId}
|
|
108
91
|
>
|
|
109
|
-
|
|
92
|
+
<div
|
|
93
|
+
class={[
|
|
94
|
+
'flex flex-row items-center justify-between gap-4 px-4 py-3',
|
|
95
|
+
!variant && 'pb-0',
|
|
96
|
+
variant === 'success' && 'preset-tonal-success',
|
|
97
|
+
variant === 'warning' && 'preset-tonal-warning',
|
|
98
|
+
variant === 'error' && 'preset-tonal-error',
|
|
99
|
+
variant === 'info' && 'preset-tonal-primary'
|
|
100
|
+
]}
|
|
101
|
+
>
|
|
102
|
+
{#if title}
|
|
103
|
+
<Heading>{title}</Heading>
|
|
104
|
+
{/if}
|
|
105
|
+
<button
|
|
106
|
+
class="group ml-auto flex justify-end"
|
|
107
|
+
type="button"
|
|
108
|
+
onclick={close}
|
|
109
|
+
>
|
|
110
|
+
<X
|
|
111
|
+
class="h-full w-auto transition-[stroke-width] group-hover:stroke-3"
|
|
112
|
+
/>
|
|
113
|
+
</button>
|
|
114
|
+
</div>
|
|
115
|
+
<div
|
|
116
|
+
class={twMerge(
|
|
117
|
+
clsx(
|
|
118
|
+
'flex grow flex-col gap-4 overflow-hidden bg-inherit p-4 pt-3',
|
|
119
|
+
innerClass
|
|
120
|
+
)
|
|
121
|
+
)}
|
|
122
|
+
>
|
|
123
|
+
{@render children?.()}
|
|
124
|
+
</div>
|
|
110
125
|
</div>
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
</
|
|
126
|
+
{/if}
|
|
127
|
+
</HiddenBackground>
|
|
128
|
+
</Portal>
|
|
114
129
|
{/if}
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
}
|
|
63
63
|
|
|
64
64
|
function onpointerleave() {
|
|
65
|
-
clearTimeout(
|
|
65
|
+
clearTimeout(showTimeout);
|
|
66
66
|
open = false;
|
|
67
67
|
}
|
|
68
68
|
</script>
|
|
@@ -96,7 +96,7 @@
|
|
|
96
96
|
placement="top"
|
|
97
97
|
class={twMerge(
|
|
98
98
|
clsx(
|
|
99
|
-
'bg-surface-
|
|
99
|
+
'bg-surface-50-950 max-w-96 -translate-y-0.5 rounded px-4 py-1 shadow-lg',
|
|
100
100
|
tooltipClass
|
|
101
101
|
)
|
|
102
102
|
)}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export { default as Drawer } from './drawer/Drawer.svelte';
|
|
2
2
|
export { default as Heading } from './heading/index';
|
|
3
3
|
export { default as HiddenBackground } from './hiddenBackground/index';
|
|
4
|
-
export { default as Modal } from './modal/Modal.svelte';
|
|
4
|
+
export { default as Modal, type ModalProps } from './modal/Modal.svelte';
|
|
5
5
|
export { default as Popover } from './popover/Popover.svelte';
|
|
6
6
|
export { default as Portal } from './portal/Portal.svelte';
|
|
7
7
|
export { default as Tabs } from './tabs/index';
|
|
@@ -4,8 +4,7 @@
|
|
|
4
4
|
import type { Snippet } from 'svelte';
|
|
5
5
|
import type { ClassValue } from 'svelte/elements';
|
|
6
6
|
import { twMerge } from 'tailwind-merge';
|
|
7
|
-
import Heading from '
|
|
8
|
-
import HiddenBackground from '../hiddenBackground/HiddenBackground.svelte';
|
|
7
|
+
import { Heading, HiddenBackground, Portal } from '..';
|
|
9
8
|
|
|
10
9
|
/** Props for the modal, expose if you overwrite the defaults in a custom component */
|
|
11
10
|
export interface ModalProps {
|
|
@@ -60,55 +59,71 @@
|
|
|
60
59
|
A modal, comes with a title, close button and different variants per default.
|
|
61
60
|
-->
|
|
62
61
|
{#if b_open}
|
|
63
|
-
<
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
{@render modal()}
|
|
72
|
-
</div>
|
|
73
|
-
{:else}
|
|
74
|
-
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
|
75
|
-
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
76
|
-
<div
|
|
77
|
-
class={twMerge(
|
|
78
|
-
clsx([
|
|
79
|
-
'bg-surface-50-950 relative flex max-h-full max-w-full flex-col overflow-hidden rounded',
|
|
80
|
-
clazz
|
|
81
|
-
])
|
|
82
|
-
)}
|
|
83
|
-
{style}
|
|
84
|
-
onclick={(e) => e.stopPropagation()}
|
|
85
|
-
data-testid={testId}
|
|
86
|
-
>
|
|
62
|
+
<Portal>
|
|
63
|
+
<HiddenBackground
|
|
64
|
+
onclose={close}
|
|
65
|
+
class="flex h-full w-full flex-col items-center justify-start p-16"
|
|
66
|
+
>
|
|
67
|
+
{#if modal}
|
|
68
|
+
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
69
|
+
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
|
87
70
|
<div
|
|
88
|
-
class={
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
variant === 'warning' && 'preset-tonal-warning',
|
|
93
|
-
variant === 'error' && 'preset-tonal-error',
|
|
94
|
-
variant === 'info' && 'preset-tonal-primary'
|
|
95
|
-
]}
|
|
71
|
+
class={clazz}
|
|
72
|
+
onclick={(e) => e.stopPropagation()}
|
|
73
|
+
data-testid={testId}
|
|
74
|
+
{style}
|
|
96
75
|
>
|
|
97
|
-
{
|
|
98
|
-
<Heading>{title}</Heading>
|
|
99
|
-
{/if}
|
|
100
|
-
<button class="group ml-auto flex justify-end" type="button" onclick={close}>
|
|
101
|
-
<X class="h-full w-auto transition-[stroke-width] group-hover:stroke-3" />
|
|
102
|
-
</button>
|
|
76
|
+
{@render modal()}
|
|
103
77
|
</div>
|
|
78
|
+
{:else}
|
|
79
|
+
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
|
80
|
+
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
104
81
|
<div
|
|
105
82
|
class={twMerge(
|
|
106
|
-
clsx(
|
|
83
|
+
clsx([
|
|
84
|
+
'bg-surface-50-950 relative flex max-h-full max-w-full flex-col overflow-hidden rounded',
|
|
85
|
+
clazz
|
|
86
|
+
])
|
|
107
87
|
)}
|
|
88
|
+
{style}
|
|
89
|
+
onclick={(e) => e.stopPropagation()}
|
|
90
|
+
data-testid={testId}
|
|
108
91
|
>
|
|
109
|
-
|
|
92
|
+
<div
|
|
93
|
+
class={[
|
|
94
|
+
'flex flex-row items-center justify-between gap-4 px-4 py-3',
|
|
95
|
+
!variant && 'pb-0',
|
|
96
|
+
variant === 'success' && 'preset-tonal-success',
|
|
97
|
+
variant === 'warning' && 'preset-tonal-warning',
|
|
98
|
+
variant === 'error' && 'preset-tonal-error',
|
|
99
|
+
variant === 'info' && 'preset-tonal-primary'
|
|
100
|
+
]}
|
|
101
|
+
>
|
|
102
|
+
{#if title}
|
|
103
|
+
<Heading>{title}</Heading>
|
|
104
|
+
{/if}
|
|
105
|
+
<button
|
|
106
|
+
class="group ml-auto flex justify-end"
|
|
107
|
+
type="button"
|
|
108
|
+
onclick={close}
|
|
109
|
+
>
|
|
110
|
+
<X
|
|
111
|
+
class="h-full w-auto transition-[stroke-width] group-hover:stroke-3"
|
|
112
|
+
/>
|
|
113
|
+
</button>
|
|
114
|
+
</div>
|
|
115
|
+
<div
|
|
116
|
+
class={twMerge(
|
|
117
|
+
clsx(
|
|
118
|
+
'flex grow flex-col gap-4 overflow-hidden bg-inherit p-4 pt-3',
|
|
119
|
+
innerClass
|
|
120
|
+
)
|
|
121
|
+
)}
|
|
122
|
+
>
|
|
123
|
+
{@render children?.()}
|
|
124
|
+
</div>
|
|
110
125
|
</div>
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
</
|
|
126
|
+
{/if}
|
|
127
|
+
</HiddenBackground>
|
|
128
|
+
</Portal>
|
|
114
129
|
{/if}
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
}
|
|
63
63
|
|
|
64
64
|
function onpointerleave() {
|
|
65
|
-
clearTimeout(
|
|
65
|
+
clearTimeout(showTimeout);
|
|
66
66
|
open = false;
|
|
67
67
|
}
|
|
68
68
|
</script>
|
|
@@ -96,7 +96,7 @@
|
|
|
96
96
|
placement="top"
|
|
97
97
|
class={twMerge(
|
|
98
98
|
clsx(
|
|
99
|
-
'bg-surface-
|
|
99
|
+
'bg-surface-50-950 max-w-96 -translate-y-0.5 rounded px-4 py-1 shadow-lg',
|
|
100
100
|
tooltipClass
|
|
101
101
|
)
|
|
102
102
|
)}
|