@dative-gpi/foundation-shared-components 0.0.213 → 0.0.215

package/components/fields/FSColorField.vue

@@ -164,7 +164,7 @@ export default defineComponent({
 
     const menu = ref(false);
 
-    const innerColor = ref(props.modelValue.toString().substring(0, 7));
+    const innerColor = ref(getColors(props.modelValue).base);
     const innerOpacity = ref(getHexFromPercentage(props.opacityValue));
     const fullColor = ref(innerColor.value + innerOpacity.value);
 
@@ -174,14 +174,14 @@ export default defineComponent({
           "--fs-color-field-cursor"             : "default",
           "--fs-color-field-border-color"       : lights.base,
           "--fs-color-field-color"              : lights.dark,
-          "--fs-color-field-colorvalue": fullColor.value,
+          "--fs-color-field-colorvalue"         : fullColor.value,
         };
       }
       return {
         "--fs-color-field-cursor"             : "pointer",
         "--fs-color-field-border-color"       : lights.dark,
         "--fs-color-field-color"              : darks.base,
-        "--fs-color-field-colorvalue": fullColor.value,
+        "--fs-color-field-colorvalue"         : fullColor.value,
       };
     });
 

package/components/fields/FSGradientField.vue

@@ -12,29 +12,30 @@
       <FSRow>
         <FSColorField
           v-for="colorIndex in $props.colorCount"
-          :key="colorIndex"
-          :modelValue="$props.modelValue[colorIndex-1]"
+          :allowOpacity="$props.allowOpacity"
+          :modelValue="$props.modelValue[colorIndex - 1]"
           :required="$props.required"
           :editable="$props.editable"
-          @update:modelValue="($event, index) => $emit('update:modelValue', $props.modelValue.map((color, i) => colorIndex === i + 1 ? $event : color))"
+          :key="colorIndex"
+          @update:modelValue="$emit('update:modelValue', $props.modelValue.map((color, i) => colorIndex === i + 1 ? $event : color))"
         />
       </FSRow>
       <FSSelectField
         class="fs-gradient-select-field"
-        :items="items"
-        @update:modelValue="$emit('update:modelValue', JSON.parse($event))"
         :clearable="false"
         :editable="$props.editable"
+        :items="items"
         :modelValue="JSON.stringify($props.modelValue)"
+        @update:modelValue="$emit('update:modelValue', presetGradients[$event])"
       >
         <template
           v-slot:selection="{ item }"
         >
           <FSRow
+            class="fs-gradient-field-preview"
             height="fill"
             width="100%"
-            class="fs-gradient-field-preview"
-            :style="{ '--fs-gradient-field-background': `linear-gradient(to right, ${JSON.parse(item.value).join(', ')})` }"
+            :style="{ '--fs-gradient-field-background': `linear-gradient(to right, ${encodeGradientCssColors(JSON.parse(item.value))})` }"
           >
             <span />
           </FSRow>
@@ -49,10 +50,10 @@
               #title
             >
               <FSRow
+                class="fs-gradient-field-preview"
                 height="fill"
                 width="100%"
-                class="fs-gradient-field-preview"
-                :style="{ '--fs-gradient-field-background': `linear-gradient(to right, ${JSON.parse(item.value).join(', ')})` }"
+                :style="{ '--fs-gradient-field-background': `linear-gradient(to right, ${encodeGradientCssColors(presetGradients[item.value])})` }"
               >
                 <span />
               </FSRow>
@@ -67,21 +68,23 @@
 <script lang="ts">
 import { type PropType, defineComponent } from "vue";
 
+import { groupedGradients } from "../../utils";
+import { useColors } from "../../composables";
+
+import FSSelectField from "./FSSelectField.vue";
 import FSColorField from "./FSColorField.vue";
+import FSBaseField from "./FSBaseField.vue";
 import FSCol from "../FSCol.vue";
 import FSRow from "../FSRow.vue";
-import FSBaseField from "./FSBaseField.vue";
-import FSSelectField from "./FSSelectField.vue";
-import { groupedGradients } from "../../utils";
 
 export default defineComponent({
   name: "FSGradientField",
   components: {
-    FSBaseField,
+    FSSelectField,
     FSColorField,
+    FSBaseField,
     FSCol,
-    FSRow,
-    FSSelectField
+    FSRow
   },
   props: {
     label: {
@@ -94,6 +97,11 @@ export default defineComponent({
       required: false,
       default: null
     },
+    colorCount: {
+      type: Number,
+      required: false,
+      default: 2
+    },
     modelValue: {
       type: Array as PropType<string[]>,
       required: true
@@ -108,18 +116,27 @@ export default defineComponent({
       required: false,
       default: true
     },
-    colorCount: {
-      type: Number,
+    allowOpacity: {
+      type: Boolean,
       required: false,
-      default: 2
+      default: false
     }
   },
   emits: ["update:modelValue"],
   setup(props) {
-    const items = groupedGradients[props.colorCount] ?? [];
+    const { getColors } = useColors();
+
+    const presetGradients = groupedGradients[props.colorCount];
+    const items = Object.keys(presetGradients)
+
+    const encodeGradientCssColors = (colors: string[]) => {
+      return colors.map((color) => getColors(color).base).join(", ");
+    };
 
     return {
-      items
+      presetGradients,
+      items,
+      encodeGradientCssColors
     };
   }
 });

package/components/map/FSMap.vue

@@ -1,6 +1,7 @@
 <template>
   <FSCard
     :width="$props.width"
+    :style="style"
     v-bind="$attrs"
   >
     <FSCol
@@ -8,27 +9,28 @@
       width="fill"
       :class="['fs-map', { 'fs-map-fullscreen': fullScreen }]"
     >
-      <FSCol
-        v-if="$slots.leftoverlay"
-        class="fs-map-overlay-left"
-        width="hug"
-        gap="2px"
+      <FSMapOverlay
+        v-if="$slots['leftoverlay-header'] || $slots['leftoverlay-body']"
+        :mode="$props.overlayMode"
+        :height="$props.height"
+        :mapId="mapId"
+        @update:mode="$emit('update:overlayMode', $event)"
       >
-        <FSCard
-          padding="4px"
-          :elevation="true"
-          :border="false"
+        <template
+          v-slot:leftoverlay-header
         >
-          <FSFadeOut
-            maskHeight="0"
-            :height="`calc(${$props.height} - 40px)`"
-          >
-            <slot
-              name="leftoverlay"
-            />
-          </FSFadeOut>
-        </FSCard>
-      </FSCol>
+          <slot
+            name="leftoverlay-header"
+          />
+        </template>
+        <template
+          v-slot:leftoverlay-body
+        >
+          <slot
+            name="leftoverlay-body"
+          />
+        </template>
+      </FSMapOverlay>
       <FSRow
         v-if="$props.editable && !editingLocation && $props.selectedLocationId !== null"
         class="fs-map-overlay-edit-button"
@@ -39,9 +41,7 @@
           @click="editingLocation = true"
         />
       </FSRow>
-      <FSCol
-        :style="style"
-      >
+      <FSCol>
         <div
           class="fs-leaflet-container"
           :id="mapId"
@@ -129,21 +129,21 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, type PropType, ref, watch } from "vue";
+import { computed, defineComponent, onMounted, onUnmounted, type PropType, ref, watch } from "vue";
 
 import * as L from "leaflet";
 import "leaflet.markercluster";
 
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
-
 import { type Address, type FSArea } from '@dative-gpi/foundation-shared-domain/models';
 
+import { clusterMarker, locationMarker, myLocationMarker } from "../../utils";
 import { ColorEnum, type FSLocation, type MapLayer } from "../../models";
-import { useColors, useAddress } from "../../composables";
+import { useColors, useAddress, useBreakpoints } from "../../composables";
 
 import FSMapEditPointAddressOverlay from "./FSMapEditPointAddressOverlay.vue";
 import FSMapLayerButton from "./FSMapLayerButton.vue";
-import FSFadeOut from "../FSFadeOut.vue";
+import FSMapOverlay from "./FSMapOverlay.vue";
 import FSButton from "../FSButton.vue";
 import FSCard from "../FSCard.vue";
 import FSCol from "../FSCol.vue";
@@ -154,7 +154,7 @@ export default defineComponent({
   components: {
     FSMapEditPointAddressOverlay,
     FSMapLayerButton,
-    FSFadeOut,
+    FSMapOverlay,
     FSButton,
     FSCard,
     FSCol,
@@ -181,6 +181,11 @@ export default defineComponent({
       required: false,
       default: false
     },
+    overlayMode: {
+      type: String as PropType<'collapse' | 'half' | 'expand'>,
+      required: false,
+      default: 'collapse'
+    },
     showMyLocation: {
       type: Boolean,
       required: false,
@@ -196,6 +201,11 @@ export default defineComponent({
       required: false,
       default: false
     },
+    enableScrollWheelZoom: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     center: {
       type: Array as PropType<number[]>,
       required: false,
@@ -212,14 +222,14 @@ export default defineComponent({
       default: () => [],
     },
     selectedLayer: {
-      type: String as PropType<"osm" | "imagery">,
+      type: String as PropType<"map" | "imagery">,
       required: false,
-      default: "osm"
+      default: "map"
     },
     selectableLayers: {
       type: Array as PropType<string[]>,
       required: false,
-      default: () => ["osm", "imagery"]
+      default: () => ["map", "imagery"]
     },
     selectedLocationId: {
       type: String as PropType<string | null>,
@@ -232,11 +242,12 @@ export default defineComponent({
       default: null
     }
   },
-  emits: ["update:modelValue", "update:selectedLocationId", "update:selectedAreaId"],
+  emits: ["update:modelValue", "update:selectedLocationId", "update:selectedAreaId", 'update:overlayMode'],
   setup(props, { emit }) {
+    const { $tr } = useTranslationsProvider();
     const { reverseSearch } = useAddress();
     const { getColors } = useColors();
-    const { $tr } = useTranslationsProvider();
+    const { isExtraSmall } = useBreakpoints();
 
     const LL = window.L;
 
@@ -244,6 +255,9 @@ export default defineComponent({
     const innerModelValue = ref(props.modelValue);
     const editingLocation = ref(false);
     const fullScreen = ref(false);
+    const leftOverlayHeight = ref<number>();
+    const leftOverlayWidth = ref<number>();
+    const resizeObserver = ref<ResizeObserver | null>(null);
 
     const mapId = `map-${Math.random().toString(36).substring(7)}`;
     const defaultZoom = 15;
@@ -256,52 +270,52 @@ export default defineComponent({
     let map: L.Map;
     let markerLayerGroup: L.FeatureGroup | any;
 
-    if (props.editable) {
-      markerLayerGroup = new LL.FeatureGroup();
-    }
-    else {
-      markerLayerGroup = new LL.MarkerClusterGroup({
-        spiderfyOnMaxZoom: false,
-        showCoverageOnHover: false,
-        disableClusteringAtZoom: 17,
-        iconCreateFunction: function (cluster: any) {
-          return LL.divIcon({
-            html: `<div>
-                    <span>${cluster.getChildCount()}</span>
-                   </div>`,
-            className: 'fs-map-location fs-map-location-full',
-            iconSize: [36, 36],
-            iconAnchor: [18, 18],
-          });
-        }
-      });
-    }
     const mapLayers: MapLayer[] = [
       {
-        name: "osm",
-        label: $tr("ui.map.layer.osm", "Map"),
-        image: new URL("../../assets/images/map/osm.png", import.meta.url).href,
-        layer: LL.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
-          maxZoom: 20,
-          attribution: '© OpenStreetMap'
+        name: "map",
+        label: $tr("ui.map.layer.map", "Map"),
+        image: new URL("../../assets/images/map/map.png", import.meta.url).href,
+        layer: LL.tileLayer(`http://{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'
         })
       },
       {
         name: "imagery",
         label: $tr("ui.map.layer.imagery", "Imagery"),
         image: new URL("../../assets/images/map/imagery.png", import.meta.url).href,
-        layer: LL.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
-          attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
-          maxZoom: 19
+        layer: LL.tileLayer(`http://{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'
         })
       }
     ];
 
+    const bottomMargin = computed(() => {
+      let margin = 0;
+      if (props.overlayMode !== 'expand' && leftOverlayHeight.value && isExtraSmall.value) {
+        margin += leftOverlayHeight.value;
+      }
+      return margin;
+    });
+
+    const leftMargin = computed(() => {
+      let margin = 0;
+      if (leftOverlayWidth.value && !isExtraSmall.value) {
+        margin += leftOverlayWidth.value;
+      }
+      return margin;
+    });
+
     const style = computed((): { [key: string]: string | undefined } => {
       return {
         "--fs-map-location-pin-color": getColors(ColorEnum.Primary).base,
+        "--fs-map-mylocation-pin-color": getColors(ColorEnum.Primary).base,
         "--fs-map-mylocation-pin-color-alpha": getColors(ColorEnum.Primary).base + "50",
         "--fs-map-leaflet-container-height": props.height as string,
+        "--fs-map-leaflet-bottom-overlay-margin": `${bottomMargin.value}px`,
         "--fs-map-container-grayscale": props.grayscale ? '0.9' : '0'
       };
     });
@@ -309,18 +323,7 @@ export default defineComponent({
     const displayLocations = () => {
       markerLayerGroup.clearLayers();
       innerModelValue.value.forEach((location) => {
-        const iconHtml = `
-          <div style="--fs-map-mylocation-pin-color-alpha:${getColors(location.color).base}50;--fs-map-location-pin-color: ${getColors(location.color).base}">
-            <div class="fs-map-location-pin">
-              <i class="${location.icon} mdi v-icon notranslate v-theme--DefaultTheme fs-icon" aria-hidden="true" style="--fs-icon-font-size: 22px;"  ></i>
-            </div>
-          </div>`;
-        const icon = LL.divIcon({
-          html: iconHtml,
-          iconSize: [36, 36],
-          className: 'fs-map-location',
-          iconAnchor: [18, 18],
-        });
+        const icon = locationMarker(location.icon, getColors(location.color).base, L);
         const marker = LL.marker([location.address.latitude, location.address.longitude], { icon }).addTo(markerLayerGroup);
         markers[location.id] = marker;
         marker.on('click', () => emit('update:selectedLocationId', location.id));
@@ -357,9 +360,22 @@ export default defineComponent({
     };
 
     const initMap = () => {
+      if (props.editable) {
+        markerLayerGroup = new LL.FeatureGroup();
+      }
+      else {
+        markerLayerGroup = new LL.MarkerClusterGroup({
+          spiderfyOnMaxZoom: false,
+          showCoverageOnHover: false,
+          disableClusteringAtZoom: 17,
+          iconCreateFunction: function (cluster: any) {
+            return clusterMarker(cluster.getChildCount(), L);
+          }
+        });
+      }
       const mapOptions = {
         zoomControl: false,
-        scrollWheelZoom: false,
+        scrollWheelZoom: props.enableScrollWheelZoom,
         minZoom: 2,
         maxBounds: LL.latLngBounds(LL.latLng(-90, -180), LL.latLng(90, 180)),
         maxBoundsViscosity: 1.0
@@ -387,7 +403,7 @@ export default defineComponent({
       });
     };
 
-    const setMapBaseLayer = (layerName: 'osm' | 'imagery') => {
+    const setMapBaseLayer = (layerName: 'map' | 'imagery') => {
       const layer = mapLayers.find((mapLayer) => mapLayer.name === layerName) ?? mapLayers[0];
       baseLayerGroup.clearLayers();
       layer.layer.addTo(baseLayerGroup);
@@ -398,7 +414,7 @@ export default defineComponent({
         return;
       }
       modifyLocationAddress(props.selectedLocationId, address);
-      map.panTo([address.latitude, address.longitude]);
+      map.panTo(calculateTargetPosition(new L.LatLng(address.latitude, address.longitude)));
     };
 
     const onNewCoordEntered = async (lat: number, lng: number) => {
@@ -431,19 +447,18 @@ export default defineComponent({
       }
       map.locate();
       map.on('locationfound', (e: L.LocationEvent) => {
-        map.panTo(e.latlng);
-        const iconHtml = `<div class="fs-map-mylocation-pin"></div>`;
-        const icon = LL.divIcon({
-          html: iconHtml,
-          className: 'fs-map-mylocation',
-          iconSize: [16, 16],
-          iconAnchor: [8, 8],
-        });
+        map.panTo(calculateTargetPosition(e.latlng));
+        const icon = myLocationMarker(L);
         myLocationLayerGroup.clearLayers();
         LL.marker(e.latlng, { icon }).addTo(myLocationLayerGroup);
       });
     };
 
+    const calculateTargetPosition = (target: L.LatLng, zoom: number = map.getZoom()) => {
+      const targetPoint = map.project(target, zoom).subtract([leftMargin.value / 2, -bottomMargin.value / 2]);
+      return map.unproject(targetPoint, zoom);
+    }
+
     const onCancel = () => {
       editingLocation.value = false;
       innerModelValue.value = props.modelValue;
@@ -455,7 +470,7 @@ export default defineComponent({
         map.fitBounds(markerLayerGroup.getBounds(), { maxZoom: defaultZoom });
       }
       else {
-        map.panTo([props.center[0], props.center[1]]);
+        map.panTo(calculateTargetPosition(new L.LatLng(props.center[0], props.center[1])), { animate: false });
       }
       if (props.modelValue.length > 1) {
         emit('update:selectedLocationId', null);
@@ -472,7 +487,7 @@ export default defineComponent({
         map.fitBounds(markerLayerGroup.getBounds(), { maxZoom: defaultZoom });
       }
       else {
-        map.flyTo([props.center[0], props.center[1]], map.getZoom() ?? defaultZoom, { animate: false });
+        map.panTo(calculateTargetPosition(new L.LatLng(props.center[0], props.center[1])), { animate: false });
       }
       if (props.modelValue.length > 1) {
         emit('update:selectedLocationId', null);
@@ -484,6 +499,29 @@ export default defineComponent({
       if (props.selectedLocationId && props.modelValue.length === 1) {
         editingLocation.value = true;
       }
+
+      resizeObserver.value = new ResizeObserver(entries => {
+        entries.forEach((entry) => {
+          if (entry.target.id === `left-overlay-${mapId}`) {
+            leftOverlayWidth.value = entry.contentRect.width;
+          }
+          if(entry.target.id === `left-overlay-mobile-${mapId}`) {
+            leftOverlayHeight.value = entry.contentRect.height;
+          }
+        });
+      });
+      if (document.querySelector(`#left-overlay-mobile-${mapId}`)) {
+        resizeObserver.value.observe(document.querySelector(`#left-overlay-mobile-${mapId}`)!);
+      }
+      if (document.querySelector(`#left-overlay-${mapId}`)) {
+        resizeObserver.value.observe(document.querySelector(`#left-overlay-${mapId}`)!);
+      }
+    });
+
+    onUnmounted((): void => {
+      if (resizeObserver.value) {
+        resizeObserver.value.disconnect();
+      }
     });
 
     watch(() => innerModelValue.value, () => {
@@ -500,7 +538,7 @@ export default defineComponent({
       });
 
       const marker = markers[props.selectedLocationId];
-      map.flyTo(marker.getLatLng(), 17, { animate: false });
+      map.flyTo(calculateTargetPosition(marker.getLatLng(), 17), 17, { animate: false });
       marker.getElement()?.classList.add('fs-map-location-selected');
     })
 
@@ -519,10 +557,11 @@ export default defineComponent({
     });
 
     return {
-      innerSelectedLayer,
+      bottomMargin,
       editingLocation,
-      innerModelValue,
       fullScreen,
+      innerModelValue,
+      innerSelectedLayer,
       mapLayers,
       mapId,
       style,
@@ -536,6 +575,6 @@ export default defineComponent({
       locate,
       zoomIn
     };
-  },
+  }
 });
 </script>

package/components/map/FSMapLayerButton.vue

@@ -7,20 +7,24 @@
   <FSDialog
     v-model="dialog"
     title="Select Layers"
-    width="460px"
+    width="442px"
   >
     <template
       v-slot:body
     >
-      <FSImageCard
-        v-for="layer in layers"
-        :variant="modelValue === layer.name ? 'full' : 'background'"
-        :color="modelValue === layer.name ? 'primary' : 'light'"
-        :label="layer.label"
-        :src="layer.image"
-        :key="layer.name"
-        @click="onLayerClick(layer.name)"
-      />
+      <FSRow
+        align="center-center"
+      >
+        <FSImageCard
+          v-for="layer in layers"
+          :variant="modelValue === layer.name ? 'full' : 'background'"
+          :color="modelValue === layer.name ? 'primary' : 'light'"
+          :label="layer.label"
+          :src="layer.image"
+          :key="layer.name"
+          @click="onLayerClick(layer.name)"
+        />
+      </FSRow>
     </template>
   </FSDialog> 
 </template>
@@ -33,13 +37,15 @@ import { type MapLayer } from "../../models";
 import FSImageCard from "../FSImageCard.vue";
 import FSButton from "../FSButton.vue";
 import FSDialog from "../FSDialog.vue";
+import FSRow from "../FSRow.vue";
 
 export default defineComponent({
   name: "FSMapLayerButton",
   components: {
     FSImageCard,
     FSButton,
-    FSDialog
+    FSDialog,
+    FSRow
   },
   props: {
     layers: {