@dative-gpi/foundation-shared-components 0.0.212 → 0.0.214

package/components/FSEditImage.vue

@@ -65,13 +65,13 @@
           >
             <FSText
               v-if="fileSelected && fileSelected.fileName"
-              lineClamp="2"
               font="text-body"
+              :lineClamp="2"
             >
               {{ fileSelected.fileName }}
             </FSText>
             <FSCol
-              gap="0"
+              gap="0px"
             >
               <FSText
                 class="fs-edit-image-overline"
@@ -97,7 +97,7 @@
           <FSButtonFileMini
             accept="image/*"
             :readFile="false"
-            @update:modelValue="onUpload"
+            @update:metadata="onUpload"
           />
           <FSButtonRemoveMini
             @click="onRemove"
@@ -124,7 +124,7 @@
         <FSButtonFileMini
           accept="image/*"
           :readFile="false"
-          @update:modelValue="onUpload"
+          @update:metadata="onUpload"
         />
         <FSButtonRemoveMini
           @click="onRemove"
@@ -147,17 +147,17 @@
           mdi-plus-box-outline
         </FSIcon>
         <FSText
-          lineClamp="2"
           font="text-body"
+          :lineClamp="2"
         >
           {{ $tr('ui.edit-image.add-image', 'Add an image.') }}
         </FSText>
         <FSButtonFileMini
-          ref="invisibleButtonRef"
           class="fs-edit-image-hidden-button"
+          ref="invisibleButtonRef"
           accept="image/*"
           :readFile="false"
-          @update:modelValue="onUpload"
+          @update:metadata="onUpload"
         />
       </FSRow>
     </FSClickable>
@@ -165,13 +165,11 @@
 </template>
 
 <script lang="ts">
-import type { PropType} from "vue";
-import { computed, defineComponent, ref, watch } from "vue";
+import { computed, defineComponent, type PropType, ref, watch } from "vue";
 
 import { useBreakpoints, useColors } from "@dative-gpi/foundation-shared-components/composables";
+import { ColorEnum, type FileImage } from "@dative-gpi/foundation-shared-components/models";
 import { useFiles } from "@dative-gpi/foundation-shared-services/composables";
-import type { FileImage } from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSButtonRemoveMini from "./buttons/FSButtonRemoveMini.vue";
 import FSButtonFileMini from "./buttons/FSButtonFileMini.vue";

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

@@ -8,27 +8,27 @@
       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"
+        @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"
@@ -135,15 +135,15 @@ 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 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,11 @@ 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 LL = window.L;
 
@@ -265,34 +275,29 @@ export default defineComponent({
         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],
-          });
+          return clusterMarker(cluster.getChildCount());
         }
       });
     }
     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'
         })
       }
     ];
@@ -309,18 +314,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);
         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));
@@ -359,7 +353,7 @@ export default defineComponent({
     const initMap = () => {
       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 +381,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);
@@ -432,13 +426,7 @@ 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],
-        });
+        const icon = myLocationMarker();
         myLocationLayerGroup.clearLayers();
         LL.marker(e.latlng, { icon }).addTo(myLocationLayerGroup);
       });
@@ -536,6 +524,6 @@ export default defineComponent({
       locate,
       zoomIn
     };
-  },
+  }
 });
 </script>

package/components/map/FSMapOverlay.vue

@@ -0,0 +1,141 @@
+<template>
+  <FSCol
+    v-if="isExtraSmall"
+    :height="$props.mode === 'expand' ? '100%' : ($props.mode === 'half' ? '50%' : 'hug')"
+    :style="style"
+    class="fs-map-overlay-left-mobile"
+    ref="mobileOverlayElement"
+    align="bottom-center"
+    width="hug"
+    gap="2px"
+    @click="$event.target === mobileOverlayElement?.$el ? $emit('update:mode', 'collapse') : null"
+  >
+    <FSCard
+      padding="0px"
+      :elevation="true"
+      :border="false"
+    >
+      <FSCol
+        gap="0px"
+        height="fill"
+      >
+        <FSRow
+          align="center-center"
+          @touchstart="$props.mode === 'expand' ? $emit('update:mode', 'collapse') : $emit('update:mode', 'expand')"
+        >
+          <FSButton
+            :icon="$props.mode === 'expand' ? 'mdi-chevron-down' : 'mdi-chevron-up'"
+            variant="icon"
+            @click="$props.mode === 'expand' ? $emit('update:mode', 'collapse') : $emit('update:mode', 'expand')"
+          />
+        </FSRow>
+        <FSCol
+          class="fs-map-overlay-left-mobile-content"
+          height="fill"
+        >
+          <slot
+            name="leftoverlay-header"
+          />
+          <FSFadeOut
+            :height="$props.mode === 'collapse' ? '0px' : '100%'"
+            maskHeight="0px"
+          >
+            <slot
+              name="leftoverlay-body"
+            />
+          </FSFadeOut>
+        </FSCol>
+      </FSCol>
+    </FSCard>
+  </FSCol>
+  <FSCol
+    v-else
+    class="fs-map-overlay-left"
+    width="hug"
+    gap="2px"
+  >
+    <FSCard
+      padding="4px"
+      :elevation="true"
+      :border="false"
+    >
+      <FSCol
+        :height="`calc(${$props.height} - 40px)`"
+      >
+        <slot
+          name="leftoverlay-header"
+        />
+        <FSFadeOut
+          maskHeight="0"
+          height="100%"
+        >
+          <slot
+            name="leftoverlay-body"
+          />
+        </FSFadeOut>
+      </FSCol>
+    </FSCard>
+  </FSCol>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType, ref } from "vue";
+
+import { useBreakpoints } from "../../composables";
+
+import FSFadeOut from "../FSFadeOut.vue";
+import FSButton from "../FSButton.vue";
+import FSCard from "../FSCard.vue";
+import FSCol from "../FSCol.vue";
+import FSRow from "../FSRow.vue";
+
+export default defineComponent({
+  name: "FSMapOverlay",
+  props: {
+    height: {
+      type: [String, Number] as PropType<string | number | null>,
+      required: false,
+      default: "100%"
+    },
+    mode: {
+      type: String as PropType<"collapse" | "half" | "expand">,
+      required: false,
+      default: "collapse"
+    }
+  },
+  components: {
+    FSFadeOut,
+    FSButton,
+    FSCard,
+    FSCol,
+    FSRow
+  },
+  emits: ["update:mode"],
+  setup(props) {
+    const { isExtraSmall } = useBreakpoints();
+
+    const leftOverlayMenuMobile = ref(false);
+    const mobileOverlayElement = ref(null);
+
+    const style = computed((): { [key: string]: string | null | undefined } => {
+      if (props.mode === "expand") {
+        return {
+          "--fs-map-overlay-card-height": "95%",
+        };
+      }
+      else {
+        return {
+          "--fs-map-overlay-card-height": "100%",
+        };
+      }
+    });
+
+    return {
+      leftOverlayMenuMobile,
+      mobileOverlayElement,
+      isExtraSmall,
+      style
+    };
+  }
+});
+</script>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.212",
+  "version": "0.0.214",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.212",
-    "@dative-gpi/foundation-shared-services": "0.0.212"
+    "@dative-gpi/foundation-shared-domain": "0.0.214",
+    "@dative-gpi/foundation-shared-services": "0.0.214"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^0.0.75",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "f91d3811c68a2c71bd08beacb5f0f7135ac0b8d2"
+  "gitHead": "d13e07184215ee5604d7d0ee124c889edd741b0b"
 }

package/styles/components/fs_map.scss

@@ -48,12 +48,12 @@
       z-index: 1001;
       margin-bottom: 8px;
 
-      button.fs-map-zoom-plus>* {
+      button.fs-map-zoom-plus > * {
         border-bottom-left-radius: 0 !important;
         border-bottom-right-radius: 0 !important;
       }
 
-      button.fs-map-zoom-minus>* {
+      button.fs-map-zoom-minus > * {
         margin-top: 1px;
         border-top-left-radius: 0 !important;
         border-top-right-radius: 0 !important;
@@ -96,8 +96,7 @@
     &:hover {
       filter: brightness(0.92) drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.4));
 
-      >* {
-
+      > * {
         transform: scale(1.15);
       }
     }
@@ -134,5 +133,4 @@
       opacity: 1;
     }
   }
-
 }