@dative-gpi/foundation-shared-components 1.0.128-fix-mobile-map → 1.0.128-fix-mobile-keyboard

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 (7) hide show
  1. package/components/FSDialogFormBody.vue +71 -8
  2. package/components/FSDialogMultiFormBody.vue +46 -8
  3. package/components/FSDialogSubmit.vue +46 -6
  4. package/composables/useBreakpoints.ts +11 -0
  5. package/package.json +4 -4
  6. package/styles/components/fs_dialog.scss +1 -1
  7. package/styles/components/fs_dialog_menu.scss +2 -2
package/components/FSDialogFormBody.vue CHANGED
@@ -12,13 +12,50 @@
12
12
  gap="24px"
13
13
  >
14
14
  <FSFadeOut
15
+ :disableBottomMask="isKeyboardOpen"
15
16
  :maxHeight="maxHeight"
16
17
  >
17
18
  <slot
18
19
  name="body"
19
20
  />
21
+ <FSRow
22
+ v-if="isKeyboardOpen"
23
+ padding="24px 0 0 0"
24
+ >
25
+ <slot
26
+ name="left-footer"
27
+ />
28
+ <FSRow
29
+ class="fs-dialog-actions"
30
+ align="top-right"
31
+ :wrap="false"
32
+ >
33
+ <FSButton
34
+ v-if="$props.showCancelButton"
35
+ :prependIcon="$props.cancelButtonPrependIcon"
36
+ :appendIcon="$props.cancelButtonAppendIcon"
37
+ :variant="$props.cancelButtonVariant"
38
+ :color="$props.cancelButtonColor"
39
+ :label="cancelLabel"
40
+ @click="() => $emit('click:cancelButton', false)"
41
+ />
42
+ <FSButton
43
+ v-if="$props.showSubmitButton"
44
+ type="submit"
45
+ :prependIcon="$props.submitButtonPrependIcon"
46
+ :appendIcon="$props.submitButtonAppendIcon"
47
+ :variant="$props.submitButtonVariant"
48
+ :color="$props.submitButtonColor"
49
+ :editable="$props.editable"
50
+ :label="submitLabel"
51
+ :load="$props.load"
52
+ />
53
+ </FSRow>
54
+ </FSRow>
20
55
  </FSFadeOut>
21
- <FSRow>
56
+ <FSRow
57
+ v-if="!isKeyboardOpen"
58
+ >
22
59
  <slot
23
60
  name="left-footer"
24
61
  />
@@ -59,13 +96,38 @@
59
96
  gap="24px"
60
97
  >
61
98
  <FSFadeOut
99
+ :disableBottomMask="isKeyboardOpen"
62
100
  :maxHeight="maxHeight"
63
101
  >
64
102
  <slot
65
103
  name="validation"
66
104
  />
105
+ <FSRow
106
+ v-if="isKeyboardOpen"
107
+ padding="24px 0 0 0"
108
+ >
109
+ <slot
110
+ name="left-footer"
111
+ />
112
+ <FSRow
113
+ class="fs-dialog-actions"
114
+ align="top-right"
115
+ :wrap="false"
116
+ >
117
+ <FSButton
118
+ :prependIcon="$props.validateButtonPrependIcon"
119
+ :appendIcon="$props.validateButtonAppendIcon"
120
+ :variant="$props.validateButtonVariant"
121
+ :color="$props.validateButtonColor"
122
+ :label="validateLabel"
123
+ @click="onValidate"
124
+ />
125
+ </FSRow>
126
+ </FSRow>
67
127
  </FSFadeOut>
68
- <FSRow>
128
+ <FSRow
129
+ v-if="!isKeyboardOpen"
130
+ >
69
131
  <slot
70
132
  name="left-footer"
71
133
  />
@@ -222,18 +284,18 @@ export default defineComponent({
222
284
  },
223
285
  emits: ["click:cancelButton", "click:submitButton", "click:validateButton", "update:isValidForm"],
224
286
  setup(props, { emit }) {
225
- const { isMobileSized } = useBreakpoints();
287
+ const { isKeyboardOpen, isMobileSized } = useBreakpoints();
226
288
  const { $tr } = useTranslationsProvider();
227
289
 
228
290
  const formRef = ref<typeof FSForm | null>(null);
229
291
  const isValidForm = ref(null);
230
292
 
231
293
  const maxHeight = computed(() => {
232
- const other = 24 + 24 // Paddings
233
- + (isMobileSized.value ? 24 : 32) + 24 // Title
234
- + (props.subtitle ? (isMobileSized.value ? 16 : 20) + 8 : 0) // Subtitle
235
- + (isMobileSized.value ? 36 : 40) + 24; // Footer
236
- return `calc(100vh - 42px - ${other}px)`;
294
+ const other = 24 + 24 // Paddings
295
+ + (isMobileSized.value ? 24 : 32) + 24 // Title
296
+ + (props.subtitle ? (isMobileSized.value ? 16 : 20) + 8 : 0) // Subtitle
297
+ + (isKeyboardOpen.value ? 0 : (isMobileSized.value ? 36 : 40) + 24); // Footer
298
+ return `calc(100vh - 12px - ${other}px)`;
237
299
  });
238
300
 
239
301
  const cancelLabel = computed(() => {
@@ -276,6 +338,7 @@ export default defineComponent({
276
338
 
277
339
  return {
278
340
  resetFormValidation,
341
+ isKeyboardOpen,
279
342
  validateLabel,
280
343
  validateForm,
281
344
  isValidForm,
package/components/FSDialogMultiFormBody.vue CHANGED
@@ -22,13 +22,50 @@
22
22
  gap="24px"
23
23
  >
24
24
  <FSFadeOut
25
+ :disableBottomMask="isKeyboardOpen"
25
26
  :maxHeight="maxHeight"
26
27
  >
27
28
  <slot
28
29
  :name="`step-${step}`"
29
30
  />
31
+ <FSRow
32
+ v-if="isKeyboardOpen"
33
+ padding="24px 0 0 0"
34
+ >
35
+ <slot
36
+ name="left-footer"
37
+ />
38
+ <FSRow
39
+ class="fs-dialog-actions"
40
+ align="top-right"
41
+ :wrap="false"
42
+ >
43
+ <FSButton
44
+ v-if="$props.showCancelButton || currentStep > 1"
45
+ :prependIcon="$props.cancelButtonPrependIcon"
46
+ :appendIcon="$props.cancelButtonAppendIcon"
47
+ :variant="$props.cancelButtonVariant"
48
+ :color="$props.cancelButtonColor"
49
+ :label="previousButtonLabel"
50
+ @click="onPrevious()"
51
+ />
52
+ <FSButton
53
+ v-if="$props.showSubmitButton || currentStep < $props.steps"
54
+ type="submit"
55
+ :prependIcon="$props.submitButtonPrependIcon"
56
+ :appendIcon="$props.submitButtonAppendIcon"
57
+ :color="$props.submitButtonColor"
58
+ :variant="nextButtonVariant"
59
+ :editable="$props.editable"
60
+ :label="nextButtonLabel"
61
+ :load="$props.load"
62
+ />
63
+ </FSRow>
64
+ </FSRow>
30
65
  </FSFadeOut>
31
- <FSRow>
66
+ <FSRow
67
+ v-if="!isKeyboardOpen"
68
+ >
32
69
  <slot
33
70
  name="left-footer"
34
71
  />
@@ -182,7 +219,7 @@ export default defineComponent({
182
219
  },
183
220
  emits: ["click:cancelButton", "click:submitButton"],
184
221
  setup(props, { emit }) {
185
- const { isMobileSized } = useBreakpoints();
222
+ const { isKeyboardOpen, isMobileSized } = useBreakpoints();
186
223
  const { $tr } = useTranslationsProvider();
187
224
 
188
225
  const currentStep = ref(1);
@@ -190,12 +227,12 @@ export default defineComponent({
190
227
  const valids = ref(Array.from({ length: props.steps }, () => false));
191
228
 
192
229
  const maxHeight = computed(() => {
193
- const other = 24 + 24 // Paddings
194
- + (isMobileSized.value ? 24 : 32) + 24 // Title
195
- + (props.subtitle ? (isMobileSized.value ? 16 : 20) + 8 : 0) // Subtitle
196
- + (props.steps > 1 ? 24 + 4 : 0) // Pagination
197
- + (isMobileSized.value ? 36 : 40) + 24; // Footer
198
- return `calc(100vh - 42px - ${other}px)`;
230
+ const other = 24 + 24 // Paddings
231
+ + (isMobileSized.value ? 24 : 32) + 24 // Title
232
+ + (props.subtitle ? (isMobileSized.value ? 16 : 20) + 8 : 0) // Subtitle
233
+ + (props.steps > 1 ? 24 + 4 : 0) // Pagination
234
+ + (isKeyboardOpen.value ? 0 : (isMobileSized.value ? 36 : 40) + 24); // Footer
235
+ return `calc(100vh - 12px - ${other}px)`;
199
236
  });
200
237
 
201
238
  const previousButtonLabel = computed(() => {
@@ -241,6 +278,7 @@ export default defineComponent({
241
278
  previousButtonLabel,
242
279
  nextButtonVariant,
243
280
  nextButtonLabel,
281
+ isKeyboardOpen,
244
282
  currentStep,
245
283
  ColorEnum,
246
284
  maxHeight,
package/components/FSDialogSubmit.vue CHANGED
@@ -11,14 +11,53 @@
11
11
  #body
12
12
  >
13
13
  <FSFadeOut
14
+ :disableBottomMask="isKeyboardOpen"
14
15
  :maxHeight="maxHeight"
15
16
  >
16
17
  <slot
17
18
  name="body"
18
19
  />
20
+ <slot
21
+ v-if="isKeyboardOpen"
22
+ name="footer"
23
+ >
24
+ <FSRow
25
+ padding="24px 0 0 0"
26
+ >
27
+ <slot
28
+ name="left-footer"
29
+ />
30
+ <FSRow
31
+ align="top-right"
32
+ :wrap="false"
33
+ >
34
+ <FSButton
35
+ v-if="$props.showCancelButton"
36
+ :prependIcon="$props.cancelButtonPrependIcon"
37
+ :appendIcon="$props.cancelButtonAppendIcon"
38
+ :variant="$props.cancelButtonVariant"
39
+ :color="$props.cancelButtonColor"
40
+ :label="cancelLabel"
41
+ @click="$emit('update:modelValue', false)"
42
+ />
43
+ <FSButton
44
+ v-if="$props.showSubmitButton"
45
+ :prependIcon="$props.submitButtonPrependIcon"
46
+ :appendIcon="$props.submitButtonAppendIcon"
47
+ :variant="$props.submitButtonVariant"
48
+ :color="$props.submitButtonColor"
49
+ :editable="$props.editable"
50
+ :label="submitLabel"
51
+ :load="$props.load"
52
+ @click="$emit('click:submitButton')"
53
+ />
54
+ </FSRow>
55
+ </FSRow>
56
+ </slot>
19
57
  </FSFadeOut>
20
58
  </template>
21
59
  <template
60
+ v-if="!isKeyboardOpen"
22
61
  #footer
23
62
  >
24
63
  <slot
@@ -173,15 +212,15 @@ export default defineComponent({
173
212
  },
174
213
  emits: ["update:modelValue", "click:submitButton"],
175
214
  setup(props) {
176
- const { isMobileSized } = useBreakpoints();
215
+ const { isKeyboardOpen, isMobileSized } = useBreakpoints();
177
216
  const { $tr } = useTranslationsProvider();
178
217
 
179
218
  const maxHeight = computed(() => {
180
- const other = 24 + 24 // Paddings
181
- + (isMobileSized.value ? 24 : 32) + 24 // Title
182
- + (props.subtitle ? (isMobileSized.value ? 16 : 20) + 8 : 0) // Subtitle
183
- + (isMobileSized.value ? 36 : 40) + 24; // Footer
184
- return `calc(100vh - 42px - ${other}px)`;
219
+ const other = 24 + 24 // Paddings
220
+ + (isMobileSized.value ? 24 : 32) + 24 // Title
221
+ + (props.subtitle ? (isMobileSized.value ? 16 : 20) + 8 : 0) // Subtitle
222
+ + (isKeyboardOpen.value ? 0 : (isMobileSized.value ? 36 : 40) + 24); // Footer
223
+ return `calc(100vh - 12px - ${other}px)`;
185
224
  });
186
225
 
187
226
  const cancelLabel = computed(() => {
@@ -193,6 +232,7 @@ export default defineComponent({
193
232
  });
194
233
 
195
234
  return {
235
+ isKeyboardOpen,
196
236
  cancelLabel,
197
237
  submitLabel,
198
238
  ColorEnum,
package/composables/useBreakpoints.ts CHANGED
@@ -6,6 +6,7 @@ const windowHeight = ref(window.innerHeight);
6
6
  const windowWidth = ref(window.innerWidth);
7
7
 
8
8
  const windowOuterWidth = ref(!window.document.hasFocus() && window.outerWidth === 0 ? window.innerWidth : window.outerWidth);
9
+ const visualViewportHeight = ref(window.visualViewport!.height);
9
10
 
10
11
  export const useBreakpoints = () => {
11
12
  const onSizeChange = (): void => {
@@ -20,10 +21,18 @@ export const useBreakpoints = () => {
20
21
  windowOuterWidth.value = window.outerWidth;
21
22
  };
22
23
 
24
+ const onVisualViewportResize = (): void => {
25
+ visualViewportHeight.value = window.visualViewport!.height;
26
+ };
27
+
23
28
  const isTouchScreenEnabled = computed((): boolean => {
24
29
  return navigator.maxTouchPoints > 0;
25
30
  });
26
31
 
32
+ const isKeyboardOpen = computed((): boolean => {
33
+ return visualViewportHeight.value + 300 < window.screen.height;
34
+ });
35
+
27
36
  const isMobileSized = computed((): boolean => {
28
37
  return windowOuterWidth.value < 1264;
29
38
  });
@@ -34,6 +43,7 @@ export const useBreakpoints = () => {
34
43
 
35
44
  if (!initialized) {
36
45
  window.addEventListener("resize", onSizeChange);
46
+ window.visualViewport!.addEventListener ("resize", onVisualViewportResize);
37
47
  initialized = true;
38
48
  }
39
49
 
@@ -64,6 +74,7 @@ export const useBreakpoints = () => {
64
74
 
65
75
  return {
66
76
  isTouchScreenEnabled,
77
+ isKeyboardOpen,
67
78
  isMobileSized,
68
79
  isExtraSmall,
69
80
  windowHeight,
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@dative-gpi/foundation-shared-components",
3
3
  "sideEffects": false,
4
- "version": "1.0.128-fix-mobile-map",
4
+ "version": "1.0.128-fix-mobile-keyboard",
5
5
  "description": "",
6
6
  "publishConfig": {
7
7
  "access": "public"
@@ -10,8 +10,8 @@
10
10
  "author": "",
11
11
  "license": "ISC",
12
12
  "dependencies": {
13
- "@dative-gpi/foundation-shared-domain": "1.0.128-fix-mobile-map",
14
- "@dative-gpi/foundation-shared-services": "1.0.128-fix-mobile-map"
13
+ "@dative-gpi/foundation-shared-domain": "1.0.128-fix-mobile-keyboard",
14
+ "@dative-gpi/foundation-shared-services": "1.0.128-fix-mobile-keyboard"
15
15
  },
16
16
  "peerDependencies": {
17
17
  "@dative-gpi/bones-ui": "^1.0.0",
@@ -35,5 +35,5 @@
35
35
  "sass": "1.71.1",
36
36
  "sass-loader": "13.3.2"
37
37
  },
38
- "gitHead": "a5512820c57c64f4ffe5653bbfc138f438098ac8"
38
+ "gitHead": "61080db8bd4a7ede6932088bc03dca613d805931"
39
39
  }
package/styles/components/fs_dialog.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  .fs-dialog-mobile > .v-overlay__content {
2
- max-height: 100dvh !important;
2
+ max-height: 100vh !important;
3
3
  max-width: 100vw !important;
4
4
  width: 100% !important;
5
5
  margin: 0 !important;
package/styles/components/fs_dialog_menu.scss CHANGED
@@ -1,11 +1,11 @@
1
1
  .v-overlay__content:has(.fs-dialog-menu) {
2
2
  width: fit-content !important;
3
- max-height: calc(100dvh - 40px) !important;
3
+ max-height: calc(100vh - 40px) !important;
4
4
  justify-content: center;
5
5
  align-items: center;
6
6
  }
7
7
 
8
8
  .fs-dialog-menu {
9
- max-height: calc(100dvh - 40px) !important;
9
+ max-height: calc(100vh - 40px) !important;
10
10
  max-width: calc(100vw - 40px) !important;
11
11
  }