lutra 0.1.50 → 0.1.51
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/Dialog.svelte +1 -0
- package/dist/components/Modal.svelte +5 -0
- package/dist/components/Modal.svelte.d.ts +2 -0
- package/dist/components/ModalContent.svelte +1 -0
- package/dist/components/ModalTypes.d.ts +2 -0
- package/dist/components/modals.svelte.js +2 -0
- package/dist/css/1-props.css +1 -0
- package/package.json +1 -1
|
@@ -63,6 +63,7 @@
|
|
|
63
63
|
padding: 0;
|
|
64
64
|
border: var(--modal-border-size) var(--modal-border-style) var(--modal-border-color);
|
|
65
65
|
width: var(--modal-width, fit-content);
|
|
66
|
+
min-width: var(--modal-min-width, auto);
|
|
66
67
|
border-radius: var(--modal-border-radius, var(--surface-border-radius));
|
|
67
68
|
background: var(--modal-background, var(--surface-background));
|
|
68
69
|
color: var(--text-color-p);
|
|
@@ -45,6 +45,7 @@
|
|
|
45
45
|
closeOnScrim = true,
|
|
46
46
|
dismissOnEsc = true,
|
|
47
47
|
width,
|
|
48
|
+
minWidth,
|
|
48
49
|
maxWidth,
|
|
49
50
|
maxHeight,
|
|
50
51
|
onclose,
|
|
@@ -78,6 +79,8 @@
|
|
|
78
79
|
dismissOnEsc?: boolean;
|
|
79
80
|
/** Width of the modal */
|
|
80
81
|
width?: string;
|
|
82
|
+
/** Minimum width of the modal */
|
|
83
|
+
minWidth?: string;
|
|
81
84
|
/** Maximum width of the modal */
|
|
82
85
|
maxWidth?: string;
|
|
83
86
|
/** Maximum height of the modal */
|
|
@@ -178,6 +181,7 @@
|
|
|
178
181
|
oncancel={handleDialogCancel}
|
|
179
182
|
onclick={handleBackdropClick}
|
|
180
183
|
style:--modal-width={width}
|
|
184
|
+
style:--modal-min-width={minWidth}
|
|
181
185
|
style:--modal-max-width={maxWidth}
|
|
182
186
|
style:--modal-max-height={maxHeight}
|
|
183
187
|
>
|
|
@@ -221,6 +225,7 @@
|
|
|
221
225
|
border-radius: var(--modal-border-radius, var(--surface-border-radius));
|
|
222
226
|
box-shadow: var(--modal-shadow, var(--surface-shadow));
|
|
223
227
|
width: var(--modal-width, fit-content);
|
|
228
|
+
min-width: var(--modal-min-width, auto);
|
|
224
229
|
max-width: min(
|
|
225
230
|
var(--modal-max-width, 40rem),
|
|
226
231
|
calc(100svw - 2rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))
|
|
@@ -110,6 +110,7 @@
|
|
|
110
110
|
grid-template-rows: 1fr auto;
|
|
111
111
|
gap: var(--modal-gap);
|
|
112
112
|
width: var(--modal-width, fit-content);
|
|
113
|
+
min-width: var(--modal-min-width, auto);
|
|
113
114
|
max-width: min(
|
|
114
115
|
var(--modal-max-width, 40rem),
|
|
115
116
|
calc(100svw - 2rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))
|
|
@@ -24,6 +24,8 @@ export type ModalOptions = {
|
|
|
24
24
|
buttons?: ModalButton[] | 'ok-cancel' | 'none';
|
|
25
25
|
/** Width of the modal */
|
|
26
26
|
width?: string;
|
|
27
|
+
/** Minimum width of the modal */
|
|
28
|
+
minWidth?: string;
|
|
27
29
|
/** Maximum width of the modal */
|
|
28
30
|
maxWidth?: string;
|
|
29
31
|
/** Maximum height of the modal */
|
|
@@ -56,6 +56,8 @@ export function openModal(opts) {
|
|
|
56
56
|
// Apply custom styles
|
|
57
57
|
if (opts.width)
|
|
58
58
|
dialog.style.setProperty('--modal-width', opts.width);
|
|
59
|
+
if (opts.minWidth)
|
|
60
|
+
dialog.style.setProperty('--modal-min-width', opts.minWidth);
|
|
59
61
|
if (opts.maxWidth)
|
|
60
62
|
dialog.style.setProperty('--modal-max-width', opts.maxWidth);
|
|
61
63
|
if (opts.maxHeight)
|
package/dist/css/1-props.css
CHANGED
|
@@ -483,6 +483,7 @@
|
|
|
483
483
|
@property --modal-padding-inline { syntax: "<length>"; inherits: true; initial-value: 24px; }
|
|
484
484
|
@property --modal-padding-block { syntax: "<length>"; inherits: true; initial-value: 24px; }
|
|
485
485
|
@property --modal-width { syntax: "*"; inherits: true; initial-value: fit-content; }
|
|
486
|
+
@property --modal-min-width { syntax: "*"; inherits: true; initial-value: auto; }
|
|
486
487
|
@property --modal-max-width { syntax: "*"; inherits: true; initial-value: 40rem; }
|
|
487
488
|
@property --modal-max-height { syntax: "*"; inherits: true; initial-value: 80svh; }
|
|
488
489
|
@property --modal-gap { syntax: "<length>"; inherits: true; initial-value: 0px; }
|