vira 31.10.1 → 31.11.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.
|
@@ -9,6 +9,7 @@ export declare const ViraDrawer: import("element-vir").DeclarativeElementDefinit
|
|
|
9
9
|
} & PartialWithUndefined<{
|
|
10
10
|
/** If this isn't set, make sure to use the drawer title slot to fill it in. */
|
|
11
11
|
drawerTitle: string;
|
|
12
|
+
noContentPadding: boolean;
|
|
12
13
|
}>, {
|
|
13
14
|
dialogElement: HTMLDialogElement | undefined;
|
|
14
15
|
contentElement: HTMLDivElement | undefined;
|
|
@@ -20,4 +21,4 @@ export declare const ViraDrawer: import("element-vir").DeclarativeElementDefinit
|
|
|
20
21
|
dragCurrentY: number;
|
|
21
22
|
}, {
|
|
22
23
|
drawerClose: import("element-vir").DefineEvent<void>;
|
|
23
|
-
}, "vira-drawer-dragging", "vira-drawer-backdrop-filter" | "vira-drawer-max-height", readonly ["drawerTitle"], readonly []>;
|
|
24
|
+
}, "vira-drawer-dragging" | "vira-drawer-no-content-padding", "vira-drawer-backdrop-filter" | "vira-drawer-max-height", readonly ["drawerTitle"], readonly []>;
|
|
@@ -46,6 +46,7 @@ export const ViraDrawer = defineViraElement()({
|
|
|
46
46
|
},
|
|
47
47
|
hostClasses: {
|
|
48
48
|
'vira-drawer-dragging': ({ state }) => state.isDragging,
|
|
49
|
+
'vira-drawer-no-content-padding': ({ inputs }) => !!inputs.noContentPadding,
|
|
49
50
|
},
|
|
50
51
|
slotNames: ['drawerTitle'],
|
|
51
52
|
cssVars: {
|
|
@@ -129,6 +130,7 @@ export const ViraDrawer = defineViraElement()({
|
|
|
129
130
|
gap: 4px;
|
|
130
131
|
align-self: center;
|
|
131
132
|
flex-grow: 1;
|
|
133
|
+
overflow: hidden;
|
|
132
134
|
|
|
133
135
|
& h1 {
|
|
134
136
|
font-size: 20px;
|
|
@@ -137,6 +139,7 @@ export const ViraDrawer = defineViraElement()({
|
|
|
137
139
|
|
|
138
140
|
& button.close {
|
|
139
141
|
${noNativeFormStyles};
|
|
142
|
+
flex-shrink: 0;
|
|
140
143
|
cursor: pointer;
|
|
141
144
|
padding: 4px;
|
|
142
145
|
border-radius: ${viraFormCssVars['vira-form-radius'].value};
|
|
@@ -159,6 +162,12 @@ export const ViraDrawer = defineViraElement()({
|
|
|
159
162
|
}
|
|
160
163
|
}
|
|
161
164
|
}
|
|
165
|
+
|
|
166
|
+
${hostClasses['vira-drawer-no-content-padding'].selector} {
|
|
167
|
+
& dialog .drawer-content-wrapper .body {
|
|
168
|
+
padding: 0;
|
|
169
|
+
}
|
|
170
|
+
}
|
|
162
171
|
`,
|
|
163
172
|
render({ inputs, state, updateState, events, dispatch, slotNames }) {
|
|
164
173
|
if (state.dialogElement && inputs.open !== state.dialogElement.open) {
|
|
@@ -28,6 +28,7 @@ export declare const ViraModal: import("element-vir").DeclarativeElementDefiniti
|
|
|
28
28
|
blockLightDismissal: boolean;
|
|
29
29
|
modalSubtitle: string;
|
|
30
30
|
isMobileSize: boolean;
|
|
31
|
+
noContentPadding: boolean;
|
|
31
32
|
}>, {
|
|
32
33
|
dialogElement: HTMLDialogElement | undefined;
|
|
33
34
|
contentElement: HTMLDivElement | undefined;
|
|
@@ -36,4 +37,4 @@ export declare const ViraModal: import("element-vir").DeclarativeElementDefiniti
|
|
|
36
37
|
cleanupListeners: undefined | (() => void);
|
|
37
38
|
}, {
|
|
38
39
|
modalClose: import("element-vir").DefineEvent<void>;
|
|
39
|
-
}, "vira-modal-phone-size", "vira-modal-backdrop-filter", readonly ["modalTitle"], readonly []>;
|
|
40
|
+
}, "vira-modal-phone-size" | "vira-modal-no-content-padding", "vira-modal-backdrop-filter", readonly ["modalTitle"], readonly []>;
|
|
@@ -40,6 +40,7 @@ export const ViraModal = defineViraElement()({
|
|
|
40
40
|
},
|
|
41
41
|
hostClasses: {
|
|
42
42
|
'vira-modal-phone-size': ({ inputs }) => !!inputs.isMobileSize,
|
|
43
|
+
'vira-modal-no-content-padding': ({ inputs }) => !!inputs.noContentPadding,
|
|
43
44
|
},
|
|
44
45
|
slotNames: ['modalTitle'],
|
|
45
46
|
cssVars: {
|
|
@@ -94,6 +95,7 @@ export const ViraModal = defineViraElement()({
|
|
|
94
95
|
gap: 4px;
|
|
95
96
|
align-self: center;
|
|
96
97
|
margin-right: auto;
|
|
98
|
+
overflow: hidden;
|
|
97
99
|
|
|
98
100
|
& h1 {
|
|
99
101
|
font-size: 24px;
|
|
@@ -107,6 +109,7 @@ export const ViraModal = defineViraElement()({
|
|
|
107
109
|
|
|
108
110
|
& button.close {
|
|
109
111
|
${noNativeFormStyles};
|
|
112
|
+
flex-shrink: 0;
|
|
110
113
|
cursor: pointer;
|
|
111
114
|
padding: 4px;
|
|
112
115
|
border-radius: ${viraFormCssVars['vira-form-radius'].value};
|
|
@@ -129,6 +132,12 @@ export const ViraModal = defineViraElement()({
|
|
|
129
132
|
}
|
|
130
133
|
}
|
|
131
134
|
|
|
135
|
+
${hostClasses['vira-modal-no-content-padding'].selector} {
|
|
136
|
+
& dialog .modal-content-wrapper .body {
|
|
137
|
+
padding: 0;
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
|
|
132
141
|
${hostClasses['vira-modal-phone-size'].selector} {
|
|
133
142
|
& dialog {
|
|
134
143
|
width: 100dvw;
|