@dative-gpi/foundation-shared-components 1.0.56 → 1.0.58-groupings

package/components/views/desktop/FSBaseEntityDesktopView.vue

@@ -0,0 +1,211 @@
+<template>
+  <FSBaseDefaultDesktopView
+    :toolbarTopOffset="topOffset + 'px'"
+    :stickyTitleTopOffset="topOffset + 'px'"
+    @scroll="onScroll"
+  >
+    <template
+      #title
+    >
+      <FSRow
+        gap="24px"
+        :height="actualImageSize"
+        :wrap="false"
+      >
+        <template 
+          v-if="$props.imageId"
+        >
+          <slot
+            name="image"
+            v-bind="{ actualImageSize }"
+          >
+            <FSImage
+              :imageId="$props.imageId"
+              :cover="$props.imageCover"
+              :height="actualImageSize"
+              :width="actualImageSize"
+            />
+          </slot>
+        </template>
+        <FSIconCard
+          v-else-if="$props.icon"
+          :backgroundVariant="$props.iconBackgroundVariant"
+          :backgroundColor="$props.iconBackgroundColors"
+          :iconColor="$props.iconColor"
+          :border="$props.iconBorder"
+          :size="actualImageSize"
+          :icon="$props.icon"
+        />
+        <FSCol
+          style="min-width: 0"
+          align="center-left"
+          height="fill"
+        >
+          <slot
+            name="title"
+          >
+            <FSText
+              font="text-h3"
+            >
+              {{ $props.title }}
+            </FSText>
+            <slot
+              name="title-extra"
+              v-bind="{ topOffset }"
+            >
+              <slot
+                name="subtitle"
+                v-if="topOffset < 64"
+              >
+                <FSText
+                  v-if="$props.subtitle"
+                  font="text-button"
+                >
+                  {{ $props.subtitle }}
+                </FSText>
+              </slot>
+              <slot
+                name="description"
+                v-if="topOffset < 24"
+              >
+                <FSText
+                  v-if="$props.description"
+                  :lineClamp="2"
+                  font="text-body"
+                >
+                  {{ $props.description }}
+                </FSText>
+              </slot>
+            </slot>
+          </slot>
+        </FSCol>
+      </FSRow>
+    </template>
+
+    <template
+      v-for="(_, name) in slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData"
+      />
+    </template>
+  </FSBaseDefaultDesktopView>
+</template>
+
+<script lang="ts">
+import { defineComponent, useSlots, type PropType, computed, ref } from "vue";
+
+import { type ColorBase } from "@dative-gpi/foundation-shared-components/models";
+
+import { sizeToVar } from "../../../utils"
+ 
+import FSCol from "../../FSCol.vue";
+import FSRow from "../../FSRow.vue"
+import FSText from "../../FSText.vue";
+import FSImage from "../../FSImage.vue";
+import FSIconCard from "../../FSIconCard.vue"
+
+import FSBaseDefaultDesktopView from "./FSBaseDefaultDesktopView.vue";
+
+export default defineComponent({
+  name: "FSBaseEntityDesktopView",
+  components: {
+    FSCol,
+    FSRow,
+    FSText,
+    FSBaseDefaultDesktopView,
+    FSImage,
+    FSIconCard,
+  },
+  props: {
+    title: {
+      type: String,
+      required: false
+    },
+    subtitle: {
+      type: String,
+      required: false
+    },
+    description: {
+      type: String,
+      required: false
+    },
+    imageId: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    imageCover: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    imageSize: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: () => ["124px", "96px", "80px"]
+    },
+    icon: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    iconColor: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: null
+    },
+    iconBackgroundVariant: {
+      type: String as PropType<"background" | "standard" | "full" | "gradient">,
+      required: false,
+      default: "background"
+    },
+    iconBackgroundColors: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: () => []
+    },
+    iconBorder: {
+      type: Boolean as PropType<boolean>,
+      required: false,
+      default: true
+    },
+    minImageSize: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: () => ["48px", "48px", "48px"]
+    }
+  },
+  setup(props){
+    const slots = { ...useSlots() };
+
+    const topOffset = ref(0);
+
+    const actualImageSize = computed(() => {
+      const size = sizeToVar(props.imageSize);
+      const minSize = sizeToVar(props.minImageSize);
+      return `max(calc(${size} - ${topOffset.value}px), ${minSize})`;
+    });
+
+    const onScroll = (event: Event) => {
+      const actualScrollTop = (event.target as HTMLElement).scrollTop;
+
+      const minSize = sizeToVar(props.minImageSize);
+      const actualMinSize = parseInt(minSize);
+
+      topOffset.value = Math.max(0, Math.min(actualScrollTop, actualMinSize + 16 + 24));
+    }
+
+    delete slots.title;
+
+    return {
+      slots,
+      onScroll,
+      topOffset,
+      actualImageSize
+    }
+  }
+});
+</script>

package/components/views/mobile/FSBaseDefaultMobileView.vue

@@ -0,0 +1,133 @@
+<template>
+  <FSFadeOut
+    height="100%"
+    maxHeight="100%"
+    :scrollOutside="false"
+    :disableTopMask="true"
+  >
+    <FSCol
+      height="fill"
+      gap="0px"
+    >
+      <slot
+        name="header"
+      >
+        <FSRow
+          style="position: sticky; top: 0px; z-index: 3;"
+          :style="{ backgroundColor, marginTop: $props.stickyTitleTopOffset }"
+          :padding="`16px ${isTouchScreenEnabled ? '20px' : '12px'} 12px 12px`"
+        >
+          <slot
+            name="title"
+          >
+            <FSText
+              font="text-h2"
+            >
+              {{ $props.title }}
+            </FSText>
+          </slot>
+        </FSRow>
+        <FSCol
+          v-if="$props.breadcrumbs && $props.breadcrumbs.length > 0"
+          :padding="`0px ${isTouchScreenEnabled ? '20px' : '12px'} ${$slots.toolbar ? '12px' : '0px'} 12px`"
+          gap="16px"
+        >
+          <FSCol>
+            <slot
+              name="breadcrumbs"
+            >
+              <FSBreadcrumbs
+                :items="$props.breadcrumbs"
+              />
+            </slot>
+          </FSCol>
+        </FSCol>
+        <FSRow
+          v-if="$slots.toolbar"
+          :style="stickyToolbar ? `position: sticky; top: ${$props.toolbarTopOffset}; z-index: 3; background-color: ${backgroundColor}` : undefined"
+          :padding="`0px ${isTouchScreenEnabled ? '20px' : '12px'} 12px 12px`"
+        >
+          <FSSlideGroup>
+            <slot
+              name="toolbar"
+            />
+          </FSSlideGroup>
+        </FSRow>
+      </slot>
+
+      <FSCol
+        height="fill"
+        gap="0px"
+        :padding="`0px ${isTouchScreenEnabled ? '20px' : '12px'} 16px 12px`"
+      >
+        <slot />
+      </FSCol>
+    </FSCol>
+  </FSFadeOut>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType, computed } from "vue";
+
+import { type FSBreadcrumbItem, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import { useBreakpoints, useColors } from "../../../composables"
+ 
+import FSCol from "../../FSCol.vue";
+import FSRow from "../../FSRow.vue"
+import FSText from "../../FSText.vue";
+import FSBreadcrumbs from "../../FSBreadcrumbs.vue";
+import FSSlideGroup from "../../FSSlideGroup.vue";
+import FSFadeOut from "../../FSFadeOut.vue"
+
+export default defineComponent({
+  name: "FSBaseDefaultDesktopView",
+  components: {
+    FSCol,
+    FSRow,
+    FSText,
+    FSBreadcrumbs,
+    FSSlideGroup,
+    FSFadeOut
+  },
+  props: {
+    title: {
+      type: String,
+      required: false
+    },
+    breadcrumbs: {
+      type: Array as PropType<FSBreadcrumbItem[]>,
+      required: false,
+      default: () => []
+    },
+    stickyToolbar: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    toolbarTopOffset: {
+      type: String,
+      required: false,
+      default: "72px" 
+    },
+    stickyTitleTopOffset: {
+      type: String,
+      required: false,
+      default: "0px"
+    }
+  },
+  setup() {
+    const { isTouchScreenEnabled } = useBreakpoints();
+    const { getColors } = useColors();
+
+    const backgroundColor = computed(() => {
+      return getColors(ColorEnum.Background).base;
+    });
+
+    return {
+      isTouchScreenEnabled,
+      backgroundColor
+    };
+  }
+});
+</script>

package/components/views/mobile/FSBaseEntityMobileView.vue

@@ -0,0 +1,206 @@
+<template>
+  <FSBaseDefaultMobileView
+    :toolbarTopOffset="topOffset + 'px'"
+    :stickyTitleTopOffset="topOffset + 'px'"
+    @scroll="onScroll"
+  >
+    <template
+      #title
+    >
+      <FSRow
+        gap="12px"
+        :height="actualImageSize"
+        :wrap="false"
+      >
+        <FSImage 
+          v-if="$props.imageId"
+          :imageId="$props.imageId"
+          :cover="$props.imageCover"
+          :height="actualImageSize"
+          :width="actualImageSize"
+        />
+        <FSIconCard
+          v-else-if="$props.icon"
+          :backgroundVariant="$props.iconBackgroundVariant"
+          :backgroundColor="$props.iconBackgroundColors"
+          :iconColor="$props.iconColor"
+          :border="$props.iconBorder"
+          :icon="$props.icon"
+          :size="actualImageSize"
+        />
+        <FSCol
+          style="min-width: 0"
+          align="center-left"
+          height="fill"
+          :gap="$props.subtitle && $props.description ? '6px' : '8px'"
+        >
+          <slot
+            name="title"
+          >
+            <FSText
+              font="text-h3"
+            >
+              {{ $props.title }}
+            </FSText>
+            <slot
+              name="title-extra"
+              v-bind="{ topOffset }"
+            >
+              <FSCol
+                gap="4px"
+              >
+                <slot
+                  name="subtitle"
+                >
+                  <FSText
+                    v-if="$props.subtitle && topOffset < 48"
+                    font="text-button"
+                  >
+                    {{ $props.subtitle }}
+                  </FSText>
+                </slot>
+                <slot
+                  name="description"
+                >
+                  <FSText
+                    v-if="$props.description && topOffset < 8"
+                    :lineClamp="2"
+                    font="text-body"
+                  >
+                    {{ $props.description }}
+                  </FSText>
+                </slot>
+              </FSCol>
+            </slot>
+          </slot>
+        </FSCol>
+      </FSRow>
+    </template>
+
+    <template
+      v-for="(_, name) in slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData"
+      />
+    </template>
+  </FSBaseDefaultMobileView>
+</template>
+
+<script lang="ts">
+import { defineComponent, useSlots, type PropType, computed, ref } from "vue";
+
+import { type ColorBase } from "@dative-gpi/foundation-shared-components/models";
+
+import { sizeToVar } from "../../../utils"
+ 
+import FSCol from "../../FSCol.vue";
+import FSRow from "../../FSRow.vue"
+import FSText from "../../FSText.vue";
+import FSImage from "../../FSImage.vue";
+import FSIconCard from "../../FSIconCard.vue"
+
+import FSBaseDefaultMobileView from "./FSBaseDefaultMobileView.vue";
+
+export default defineComponent({
+  name: "FSBaseEntityMobileView",
+  components: {
+    FSCol,
+    FSRow,
+    FSText,
+    FSBaseDefaultMobileView,
+    FSImage,
+    FSIconCard,
+  },
+  props: {
+    title: {
+      type: String,
+      required: false
+    },
+    subtitle: {
+      type: String,
+      required: false
+    },
+    description: {
+      type: String,
+      required: false
+    },
+    imageId: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    imageCover: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    imageSize: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: () => ["124px", "96px", "80px"]
+    },
+    icon: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    iconColor: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: null
+    },
+    iconBackgroundVariant: {
+      type: String as PropType<"background" | "standard" | "full" | "gradient">,
+      required: false,
+      default: "background"
+    },
+    iconBackgroundColors: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: () => []
+    },
+    iconBorder: {
+      type: Boolean as PropType<boolean>,
+      required: false,
+      default: true
+    },
+    minImageSize: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: () => ["48px", "48px", "48px"]
+    }
+  },
+  setup(props){
+    const slots = { ...useSlots() };
+
+    const topOffset = ref(0);
+
+    const actualImageSize = computed(() => {
+      const size = sizeToVar(props.imageSize);
+      const minSize = sizeToVar(props.minImageSize);
+      return `max(calc(${size} - ${topOffset.value}px), ${minSize})`;
+    });
+
+    const onScroll = (event: Event) => {
+      const actualScrollTop = (event.target as HTMLElement).scrollTop;
+
+      const minSize = sizeToVar(props.minImageSize);
+      const actualMinSize = parseInt(minSize);
+
+      topOffset.value = Math.max(0, Math.min(actualScrollTop, actualMinSize + 16 + 12));
+    }
+
+    delete slots.title;
+
+    return {
+      slots,
+      onScroll,
+      topOffset,
+      actualImageSize
+    }
+  }
+});
+</script>

package/components/views/mobile/FSBaseMobileView.vue

@@ -0,0 +1,53 @@
+<template>
+  <FSBaseDefaultMobileView
+    v-if="$props.variant === 'default'"
+    v-bind="$attrs"
+  >
+    <template
+      v-for="(_, name) in $slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData"
+      />
+    </template>
+  </FSBaseDefaultMobileView>
+
+  <FSBaseEntityMobileView
+    v-if="$props.variant === 'entity'"
+    v-bind="$attrs"
+  >
+    <template
+      v-for="(_, name) in $slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData"
+      />
+    </template>
+  </FSBaseEntityMobileView>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType } from "vue";
+
+import FSBaseDefaultMobileView from "./FSBaseDefaultMobileView.vue";
+import FSBaseEntityMobileView from "./FSBaseEntityMobileView.vue";
+
+export default defineComponent({
+  name: "FSBaseMobileView",
+  components: {
+    FSBaseDefaultMobileView,
+    FSBaseEntityMobileView
+  },
+  props: {
+    variant: {
+      type: String as PropType<"default" | "entity">,
+      required: false,
+      default: "default"
+    }
+  }
+});
+</script>

package/composables/index.ts

@@ -4,6 +4,7 @@ export * from "./useBreakpoints";
 export * from "./useColors";
 export * from "./useDebounce";
 export * from "./useMagicFieldProvider";
+export * from "./useMapLayers";
 export * from "./useRules";
 export * from "./useSlots";
 export * from "./useTables";

package/composables/useAddress.ts

@@ -1,20 +1,25 @@
+/// <reference types="@types/google.maps" />
 import _ from "lodash";
 
 import { Address, type Place } from "@dative-gpi/foundation-shared-domain/models";
+import { useAppLanguageCode } from '@dative-gpi/foundation-shared-services/composables';
 
 export const useAddress = () => {
   const enabled = true;
+  const { languageCode } = useAppLanguageCode();
+
   let initialized = false;
+  let userLocation: google.maps.LatLngLiteral | null;
   let searchService: google.maps.places.AutocompleteService;
   let placeService: google.maps.places.PlacesService;
   let sessionId: google.maps.places.AutocompleteSessionToken;
-  
 
   const init = async () => {
     await window.initMap;
+    userLocation = await getCurrentLocation();
     searchService = new google.maps.places.AutocompleteService();
     placeService = new google.maps.places.PlacesService(
-      document.getElementById("places") as HTMLDivElement
+      document.createElement("div")
     );
     sessionId = new google.maps.places.AutocompleteSessionToken();
     initialized = true;
@@ -25,11 +30,12 @@ export const useAddress = () => {
       await init();
     } 
 
-    return _search(search).then(result => {
-      return _.map(result, r => ({ id: r.place_id, label: r.description }));
-    }).catch(() => {
-      return [];
-    });
+    const mapsResults = await _search(search);
+
+    return mapsResults.map((result) => ({
+      id: result.place_id,
+      label: result.description
+    }));
   }
 
   const get = async (place: Place): Promise<Address> => {
@@ -78,16 +84,42 @@ export const useAddress = () => {
     });
   }
 
+  const getCurrentLocation = async (): Promise<google.maps.LatLngLiteral | null> => {
+    if (!navigator.geolocation) {
+      return null;
+    }
+  
+    return new Promise((resolve) => {
+      navigator.geolocation.getCurrentPosition(
+        (position) => {
+          resolve({
+            lat: position.coords.latitude,
+            lng: position.coords.longitude
+          });
+        },
+        () => resolve(null)
+      );
+    });
+  };
+
   const _search = (search: string) => {
     if (!enabled) {
       throw new Error("offline mode, do not call this method");
     }
     return new Promise<google.maps.places.AutocompletePrediction[]>(
       (resolve, reject) => {
+        /**
+         * ISO 3166 language code
+         */
+        const isoLanguageCode = languageCode.value?.split("-")[0];
+
         searchService!.getPlacePredictions(
           {
             input: search,
-            sessionToken: sessionId!
+            region: isoLanguageCode,
+            language: isoLanguageCode,
+            sessionToken: sessionId,
+            locationBias: userLocation,
           },
           function (result, status) {
             if (status != google.maps.places.PlacesServiceStatus.OK || !result) {