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

package/components/FSDialogFormBody.vue

@@ -12,13 +12,50 @@
         gap="24px"
       >
         <FSFadeOut
+          :disableBottomMask="isKeyboardOpen"
           :maxHeight="maxHeight"
         >
           <slot
             name="body"
           />
+          <FSRow
+            v-if="isKeyboardOpen"
+            padding="24px 0 0 0"
+          >
+            <slot
+              name="left-footer"
+            />
+            <FSRow
+              class="fs-dialog-actions"
+              align="top-right"
+              :wrap="false"
+            >
+              <FSButton
+                v-if="$props.showCancelButton"
+                :prependIcon="$props.cancelButtonPrependIcon"
+                :appendIcon="$props.cancelButtonAppendIcon"
+                :variant="$props.cancelButtonVariant"
+                :color="$props.cancelButtonColor"
+                :label="cancelLabel"
+                @click="() => $emit('click:cancelButton', false)"
+              />
+              <FSButton
+                v-if="$props.showSubmitButton"
+                type="submit"
+                :prependIcon="$props.submitButtonPrependIcon"
+                :appendIcon="$props.submitButtonAppendIcon"
+                :variant="$props.submitButtonVariant"
+                :color="$props.submitButtonColor"
+                :editable="$props.editable"
+                :label="submitLabel"
+                :load="$props.load"
+              />
+            </FSRow>
+          </FSRow>
         </FSFadeOut>
-        <FSRow>
+        <FSRow
+          v-if="!isKeyboardOpen"
+        >
           <slot
             name="left-footer"
           />
@@ -59,13 +96,38 @@
       gap="24px"
     >
       <FSFadeOut
+        :disableBottomMask="isKeyboardOpen"
         :maxHeight="maxHeight"
       >
         <slot
           name="validation"
         />
+        <FSRow
+          v-if="isKeyboardOpen"
+          padding="24px 0 0 0"
+        >
+          <slot
+            name="left-footer"
+          />
+          <FSRow
+            class="fs-dialog-actions"
+            align="top-right"
+            :wrap="false"
+          >
+            <FSButton
+              :prependIcon="$props.validateButtonPrependIcon"
+              :appendIcon="$props.validateButtonAppendIcon"
+              :variant="$props.validateButtonVariant"
+              :color="$props.validateButtonColor"
+              :label="validateLabel"
+              @click="onValidate"
+            />
+          </FSRow>
+        </FSRow>
       </FSFadeOut>
-      <FSRow>
+      <FSRow
+        v-if="!isKeyboardOpen"
+      >
         <slot
           name="left-footer"
         />
@@ -222,18 +284,18 @@ export default defineComponent({
   },
   emits: ["click:cancelButton", "click:submitButton", "click:validateButton", "update:isValidForm"],
   setup(props, { emit }) {
-    const { isMobileSized } = useBreakpoints();
+    const { isKeyboardOpen, isMobileSized } = useBreakpoints();
     const { $tr } = useTranslationsProvider();
 
     const formRef = ref<typeof FSForm | null>(null);
     const isValidForm = ref(null);
 
     const maxHeight = computed(() => {
-      const other = 24 + 24                                          // Paddings
-        + (isMobileSized.value ? 24 : 32) + 24                       // Title
-        + (props.subtitle ? (isMobileSized.value ? 16 : 20) + 8 : 0) // Subtitle
-        + (isMobileSized.value ? 36 : 40) + 24;                      // Footer
-      return `calc(100vh - 42px - ${other}px)`;
+      const other = 24 + 24                                                   // Paddings
+        + (isMobileSized.value ? 24 : 32) + 24                                // Title
+        + (props.subtitle ? (isMobileSized.value ? 16 : 20) + 8 : 0)          // Subtitle
+        + (isKeyboardOpen.value ? 0 : (isMobileSized.value ? 36 : 40) + 24);  // Footer
+      return `calc(100vh - 12px - ${other}px)`;
     });
 
     const cancelLabel = computed(() => {
@@ -276,6 +338,7 @@ export default defineComponent({
 
     return {
       resetFormValidation,
+      isKeyboardOpen,
       validateLabel,
       validateForm,
       isValidForm,

package/components/FSDialogMultiFormBody.vue

@@ -22,13 +22,50 @@
           gap="24px"
         >
           <FSFadeOut
+            :disableBottomMask="isKeyboardOpen"
             :maxHeight="maxHeight"
           >
             <slot
               :name="`step-${step}`"
             />
+            <FSRow
+              v-if="isKeyboardOpen"
+              padding="24px 0 0 0"
+            >
+              <slot
+                name="left-footer"
+              />
+              <FSRow
+                class="fs-dialog-actions"
+                align="top-right"
+                :wrap="false"
+              >
+                <FSButton
+                  v-if="$props.showCancelButton || currentStep > 1"
+                  :prependIcon="$props.cancelButtonPrependIcon"
+                  :appendIcon="$props.cancelButtonAppendIcon"
+                  :variant="$props.cancelButtonVariant"
+                  :color="$props.cancelButtonColor"
+                  :label="previousButtonLabel"
+                  @click="onPrevious()"
+                />
+                <FSButton
+                  v-if="$props.showSubmitButton || currentStep < $props.steps"
+                  type="submit"
+                  :prependIcon="$props.submitButtonPrependIcon"
+                  :appendIcon="$props.submitButtonAppendIcon"
+                  :color="$props.submitButtonColor"
+                  :variant="nextButtonVariant"
+                  :editable="$props.editable"
+                  :label="nextButtonLabel"
+                  :load="$props.load"
+                />
+              </FSRow>
+            </FSRow>
           </FSFadeOut>
-          <FSRow>
+          <FSRow
+            v-if="!isKeyboardOpen"
+          >
             <slot
               name="left-footer"
             />
@@ -182,7 +219,7 @@ export default defineComponent({
   },
   emits: ["click:cancelButton", "click:submitButton"],
   setup(props, { emit }) {
-    const { isMobileSized } = useBreakpoints();
+    const { isKeyboardOpen, isMobileSized } = useBreakpoints();
     const { $tr } = useTranslationsProvider();
 
     const currentStep = ref(1);
@@ -190,12 +227,12 @@ export default defineComponent({
     const valids = ref(Array.from({ length: props.steps }, () => false));
 
     const maxHeight = computed(() => {
-      const other = 24 + 24                                          // Paddings
-        + (isMobileSized.value ? 24 : 32) + 24                       // Title
-        + (props.subtitle ? (isMobileSized.value ? 16 : 20) + 8 : 0) // Subtitle
-        + (props.steps > 1 ? 24 + 4 : 0)                             // Pagination
-        + (isMobileSized.value ? 36 : 40) + 24;                      // Footer
-      return `calc(100vh - 42px - ${other}px)`;
+      const other = 24 + 24                                                   // Paddings
+        + (isMobileSized.value ? 24 : 32) + 24                                // Title
+        + (props.subtitle ? (isMobileSized.value ? 16 : 20) + 8 : 0)          // Subtitle
+        + (props.steps > 1 ? 24 + 4 : 0)                                      // Pagination
+        + (isKeyboardOpen.value ? 0 : (isMobileSized.value ? 36 : 40) + 24);  // Footer
+      return `calc(100vh - 12px - ${other}px)`;
     });
 
     const previousButtonLabel = computed(() => {
@@ -241,6 +278,7 @@ export default defineComponent({
       previousButtonLabel,
       nextButtonVariant,
       nextButtonLabel,
+      isKeyboardOpen,
       currentStep,
       ColorEnum,
       maxHeight,

package/components/FSDialogSubmit.vue

@@ -11,14 +11,53 @@
       #body
     >
       <FSFadeOut
+        :disableBottomMask="isKeyboardOpen"
         :maxHeight="maxHeight"
       >
         <slot
           name="body"
         />
+        <slot
+          v-if="isKeyboardOpen"
+          name="footer"
+        >
+          <FSRow
+            padding="24px 0 0 0"
+          >
+            <slot
+              name="left-footer"
+            />
+            <FSRow
+              align="top-right"
+              :wrap="false"
+            >
+              <FSButton
+                v-if="$props.showCancelButton"
+                :prependIcon="$props.cancelButtonPrependIcon"
+                :appendIcon="$props.cancelButtonAppendIcon"
+                :variant="$props.cancelButtonVariant"
+                :color="$props.cancelButtonColor"
+                :label="cancelLabel"
+                @click="$emit('update:modelValue', false)"
+              />
+              <FSButton
+                v-if="$props.showSubmitButton"
+                :prependIcon="$props.submitButtonPrependIcon"
+                :appendIcon="$props.submitButtonAppendIcon"
+                :variant="$props.submitButtonVariant"
+                :color="$props.submitButtonColor"
+                :editable="$props.editable"
+                :label="submitLabel"
+                :load="$props.load"
+                @click="$emit('click:submitButton')"
+              />
+            </FSRow>
+          </FSRow>
+        </slot>
       </FSFadeOut>
     </template>
     <template
+      v-if="!isKeyboardOpen"
       #footer
     >
       <slot
@@ -173,15 +212,15 @@ export default defineComponent({
   },
   emits: ["update:modelValue", "click:submitButton"],
   setup(props) {
-    const { isMobileSized } = useBreakpoints();
+    const { isKeyboardOpen, isMobileSized } = useBreakpoints();
     const { $tr } = useTranslationsProvider();
 
     const maxHeight = computed(() => {
-      const other = 24 + 24                                          // Paddings
-        + (isMobileSized.value ? 24 : 32) + 24                       // Title
-        + (props.subtitle ? (isMobileSized.value ? 16 : 20) + 8 : 0) // Subtitle
-        + (isMobileSized.value ? 36 : 40) + 24;                      // Footer
-      return `calc(100vh - 42px - ${other}px)`;
+      const other = 24 + 24                                                   // Paddings
+        + (isMobileSized.value ? 24 : 32) + 24                                // Title
+        + (props.subtitle ? (isMobileSized.value ? 16 : 20) + 8 : 0)          // Subtitle
+        + (isKeyboardOpen.value ? 0 : (isMobileSized.value ? 36 : 40) + 24);  // Footer
+      return `calc(100vh - 12px - ${other}px)`;
     });
 
     const cancelLabel = computed(() => {
@@ -193,6 +232,7 @@ export default defineComponent({
     });
 
     return {
+      isKeyboardOpen,
       cancelLabel,
       submitLabel,
       ColorEnum,

package/components/FSFadeOut.vue

@@ -3,7 +3,6 @@
     class="fs-fade-out"
     ref="fadeOutRef"
     :id="elementId"
-    :style="style"
     @scroll="$emit('scroll', $event); debounceMasks()"
   >
     <slot />
@@ -11,7 +10,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, onUnmounted, type PropType, ref, type StyleValue, watch } from "vue";
+import { computed, defineComponent, onMounted, onUnmounted, type PropType, ref, watch } from "vue";
 
 import { useBreakpoints, useColors, useDebounce } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -65,6 +64,10 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    style:{
+      type: Object,
+      required: false
     }
   },
   emits: ["scroll"],
@@ -75,7 +78,7 @@ export default defineComponent({
 
     const backgrounds = getColors(ColorEnum.Background);
 
-    const fadeOutRef = ref(null);
+    const fadeOutRef = ref<HTMLElement | null>(null);
     const bottomMaskHeight = ref("0px");
     const topMaskHeight = ref("0px");
     const lastScroll = ref(0);
@@ -86,7 +89,7 @@ export default defineComponent({
 
     const showOutsideScrollbar = computed(() => props.scrollOutside && !isTouchScreenEnabled.value);
 
-    const style = computed((): StyleValue => ({
+    const style = computed((): {[index: string]: string} => ({
       "--fs-fade-out-height"            : props.height ? sizeToVar(props.height) : "initial",
       "--fs-fade-out-max-height"        : props.maxHeight ? sizeToVar(props.maxHeight) : "initial",
       "--fs-fade-out-width"             : sizeToVar(props.width),
@@ -97,7 +100,8 @@ export default defineComponent({
       "--fs-fade-out-mask-color"        : backgrounds.base,
       "--fs-fade-out-top-mask-height"   : props.disableTopMask ? '0px' : topMaskHeight.value,
       "--fs-fade-out-bottom-mask-height": props.disableBottomMask ? '0px' : bottomMaskHeight.value,
-      "--fs-fade-out-x-overflow"        : props.hideHorizontalOverflow ? 'hidden' : 'auto'
+      "--fs-fade-out-x-overflow"        : props.hideHorizontalOverflow ? 'hidden' : 'auto', 
+      ...props.style
     }));
 
     const handleMasks = () => {
@@ -148,6 +152,15 @@ export default defineComponent({
 
     watch([() => windowWidth.value, () => windowHeight.value], debounceMasks);
 
+    watch(() => [style.value, fadeOutRef.value], () => {
+      if(!fadeOutRef.value || !style.value) {
+        return;
+      }
+      for(const key in style.value){
+        fadeOutRef.value.style.setProperty(key, style.value[key])
+      }
+    }, { immediate: true})
+
     return {
       fadeOutRef,
       elementId,

package/components/map/FSMap.vue

@@ -259,7 +259,7 @@ export default defineComponent({
         name: "map",
         label: $tr("ui.map-layer.map", "Map"),
         image: new URL("../../assets/images/map/map.png", import.meta.url).href,
-        layer: tileLayer(`http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}&key=${import.meta.env.VITE_GOOGLE_MAPS_API_KEY ?? ""}`, {
+        layer: tileLayer(`https://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}&key=${import.meta.env.VITE_GOOGLE_MAPS_API_KEY ?? ""}`, {
           maxZoom: 22,
           subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
           attribution: '© Google Map Data'
@@ -269,7 +269,7 @@ export default defineComponent({
         name: "imagery",
         label: $tr("ui.map-layer.imagery", "Imagery"),
         image: new URL("../../assets/images/map/imagery.png", import.meta.url).href,
-        layer: tileLayer(`http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}&key=${import.meta.env.VITE_GOOGLE_MAPS_API_KEY ?? ""}`, {
+        layer: tileLayer(`https://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}&key=${import.meta.env.VITE_GOOGLE_MAPS_API_KEY ?? ""}`, {
           maxZoom: 22,
           subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
           attribution: '© Google Map Data'

package/composables/useBreakpoints.ts

@@ -6,6 +6,7 @@ const windowHeight = ref(window.innerHeight);
 const windowWidth = ref(window.innerWidth);
 
 const windowOuterWidth = ref(!window.document.hasFocus() && window.outerWidth === 0 ? window.innerWidth : window.outerWidth);
+const visualViewportHeight = ref(window.visualViewport!.height);
 
 export const useBreakpoints = () => {
     const onSizeChange = (): void => {
@@ -20,10 +21,18 @@ export const useBreakpoints = () => {
         windowOuterWidth.value = window.outerWidth;
     };
 
+    const onVisualViewportResize = (): void => {
+        visualViewportHeight.value = window.visualViewport!.height;
+    };
+
     const isTouchScreenEnabled = computed((): boolean => {
         return navigator.maxTouchPoints > 0;
     });
 
+    const isKeyboardOpen = computed((): boolean => {
+        return visualViewportHeight.value + 300 < window.screen.height;
+    });
+
     const isMobileSized = computed((): boolean => {
         return windowOuterWidth.value < 1264;
     });
@@ -34,6 +43,7 @@ export const useBreakpoints = () => {
 
     if (!initialized) {
         window.addEventListener("resize", onSizeChange);
+        window.visualViewport!.addEventListener ("resize", onVisualViewportResize);
         initialized = true;
     }
 
@@ -64,6 +74,7 @@ export const useBreakpoints = () => {
 
     return {
         isTouchScreenEnabled,
+        isKeyboardOpen,
         isMobileSized,
         isExtraSmall,
         windowHeight,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.128-fix-mobile-12",
+  "version": "1.0.128-fix-mobile-keyboard",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.128-fix-mobile-12",
-    "@dative-gpi/foundation-shared-services": "1.0.128-fix-mobile-12"
+    "@dative-gpi/foundation-shared-domain": "1.0.128-fix-mobile-keyboard",
+    "@dative-gpi/foundation-shared-services": "1.0.128-fix-mobile-keyboard"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "001b23c2ba55899cb9e93038c769289a1b20024b"
+  "gitHead": "61080db8bd4a7ede6932088bc03dca613d805931"
 }