@dative-gpi/foundation-shared-components 1.0.157 → 1.0.158-maps2

package/components/FSCol.vue

@@ -26,6 +26,11 @@ export default defineComponent({
       required: false,
       default: "fill"
     },
+    maxWidth: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: null
+    },
     padding: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
@@ -49,11 +54,12 @@ export default defineComponent({
   },
   setup(props) {
     const style = computed((): StyleValue => ({
-      "--fs-col-overflow": props.overflow,
-      "--fs-col-padding" : sizeToVar(props.padding),
-      "--fs-col-gap"     : sizeToVar(props.gap),
-      "--fs-col-width"   : sizeToVar(props.width),
-      "--fs-col-height"  : sizeToVar(props.height)
+      "--fs-col-overflow"   : props.overflow,
+      "--fs-col-padding"    : sizeToVar(props.padding),
+      "--fs-col-gap"        : sizeToVar(props.gap),
+      "--fs-col-width"      : sizeToVar(props.width),
+      "--fs-col-max-width"  : props.maxWidth ? sizeToVar(props.maxWidth) : "100%",
+      "--fs-col-height"     : sizeToVar(props.height),
     }));
 
     const classes = computed((): string[] => {

package/components/fields/FSAutocompleteField.vue

@@ -1,6 +1,7 @@
 <template>
   <FSCol
     v-if="$props.loading"
+    :maxWidth="$props.maxWidth"
   >
     <FSLoader
       v-if="!$props.hideHeader"
@@ -14,6 +15,7 @@
   </FSCol>
   <FSCol
     v-else-if="isExtraSmall"
+    :maxWidth="$props.maxWidth"
   >
     <FSTextField
       :validationValue="$props.modelValue"
@@ -220,6 +222,7 @@
     :disabled="$props.disabled"
     :label="$props.label"
     :messages="messages"
+    :maxWidth="$props.maxWidth"
   >
     <FSToggleSet
       v-if="$props.toggleSet"
@@ -588,6 +591,11 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    maxWidth: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "600px"
     }
   },
   emits: ["update:modelValue", "update:search", "add:item"],

package/components/fields/FSBaseField.vue

@@ -1,5 +1,6 @@
 <template>
   <FSCol
+    :maxWidth="$props.maxWidth"
     :style="style"
   >
     <slot
@@ -114,6 +115,11 @@ export default defineComponent({
       type: String,
       required: false,
       default: "120px"
+    },
+    maxWidth: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "600px"
     }
   },
   setup(props) {

package/components/fields/FSIconField.vue

@@ -1,5 +1,7 @@
 <template>
-  <FSCol>
+  <FSCol
+    :maxWidth="$props.maxWidth"
+  >
     <FSTextField
       :label="$props.label"
       :description="$props.description"
@@ -10,6 +12,7 @@
       :messages="messages"
       :validateOn="validateOn"
       :validationValue="$props.modelValue"
+      :maxWidth="null"
       v-model="innerValue"
       v-bind="$attrs"
     >
@@ -123,7 +126,12 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
-    }
+    },
+    maxWidth: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "600px"
+    },
   },
   emits: ["update:modelValue"],
   setup(props) {

package/components/fields/FSSearchField.vue

@@ -4,6 +4,7 @@
     :placeholder="placeholder"
     :modelValue="$props.modelValue"
     prependInnerIcon="mdi-magnify"
+    minWidth="200px"
     @update:modelValue="$emit('update:modelValue', $event)"
     v-bind="$attrs"
   >

package/components/fields/FSTimeRangeField.vue

@@ -6,6 +6,7 @@
     :disabled="$props.disabled"
     :label="$props.label"
     :messages="messages"
+    :maxWidth="$props.maxWidth"
   >
     <FSRow>
       <FSRow
@@ -132,6 +133,11 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    maxWidth: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: null
     }
   },
   emits: ["update:modelValue"],

package/components/lists/FSDataTableUI.vue

@@ -5,7 +5,7 @@
   >
     <FSRow
       v-if="$props.showSearch || (!isMobileSized && ($slots['prepend-toolbar'] || $slots['toolbar'] || $slots['append-toolbar'])) || (!$props.disableTable && !$props.disableIterator)"
-      align="bottom-left"
+      align="top-left"
       :wrap="isMobileSized ? false : true"
       width="fill"
     >
@@ -13,35 +13,41 @@
         v-if="!isMobileSized"
         name="prepend-toolbar"
       />
-      <template
-        v-if="$props.showSearch"
-      >
-        <FSSearchField
-          :hideHeader="true"
-          v-model="innerSearch"
-        />
-        <FSButton
-          v-if="filterableHeaders.length > 0"
-          prependIcon="mdi-filter-variant"
-          :variant="innerShowFilters ? 'full' : 'standard'"
-          @click="innerShowFilters = !innerShowFilters"
-        />
-      </template>
-      <slot
-        v-if="!isMobileSized"
-        name="toolbar"
-      />
-      <template
-        v-if="$slots['append-toolbar'] || (!$props.disableTable && !$props.disableIterator)"
+      <FSRow
+        align="top-left"
       >
         <FSRow
-          align="center-right"
-          :width="isExtraSmall ? 'hug' : 'fill'"
+          v-if="$props.showSearch || filterableHeaders.length > 0 || $slots['append-toolbar']"
+          align="bottom-left"
         >
+          <FSSearchField
+            :hideHeader="true"
+            v-model="innerSearch"
+          />
+          <FSButton
+            v-if="filterableHeaders.length > 0"
+            prependIcon="mdi-filter-variant"
+            :variant="innerShowFilters ? 'full' : 'standard'"
+            @click="innerShowFilters = !innerShowFilters"
+          />
           <slot
             v-if="!isMobileSized"
-            name="append-toolbar"
+            name="toolbar"
           />
+        </FSRow>
+        <slot
+          v-if="!isMobileSized"
+          name="append-toolbar"
+        />
+      </FSRow>
+      <template
+        v-if="(!$props.disableTable && !$props.disableIterator)"
+      >
+        <FSRow
+          align="top-right"
+          width="hug"
+          :wrap="false"
+        >
           <FSOptionGroup
             v-if="!$props.disableTable && !$props.disableIterator"
             :values="modeOptions"

package/components/map/FSMap.vue

@@ -389,8 +389,6 @@ export default defineComponent({
       if(!map.value || !props.bounds) {
         return;
       }
-
-      //console.log("Bounds changed", props.bounds);
       fitBounds(props.bounds, { maxZoom: 14 });
     });
 

package/components/map/FSMapMarker.vue

@@ -3,11 +3,13 @@
 </template>
 
 <script lang="ts">
-import { inject, type PropType, type Ref, watch, ref, onUnmounted, onMounted } from 'vue';
+import { inject, type PropType, type Ref, watch, ref, onUnmounted, computed } from 'vue';
+import { type RouteLocation } from "vue-router";
 
-import { type Map, divIcon, type LatLng, marker, type Marker, type MarkerClusterGroup, type LeafletMouseEvent } from 'leaflet';
+import { type Map, divIcon, type LatLng, marker, type Marker, type MarkerClusterGroup } from 'leaflet';
 
 import { useColors } from "../../composables";
+import { useRouting } from '@dative-gpi/foundation-shared-services/composables';
 
 import { gpsMarkerHtml, locationMarkerHtml, pinMarkerHtml } from '../../utils/leafletMarkers';
 import { MAP, MARKERCLUSTERGROUP } from './keys';
@@ -41,14 +43,28 @@ export default {
     label: {
       type: String,
       required: false
+    },
+    to: {
+      type: Object as PropType<RouteLocation | null>,
+      required: false
     }
   },
-  emits: ['click'],
+  emits: ['click', 'auxclick'],
   setup(props, { emit }) {
     const map = inject<Ref<Map | null>>(MAP);
     const markerClusterGroup = inject<Ref<MarkerClusterGroup | null>>(MARKERCLUSTERGROUP, ref(null));
-
+      
     const { getColors } = useColors();
+    const { handleRoutingEvent } = useRouting();
+
+    if(!map) {
+      throw new Error('FSMapTileLayer must be used inside a FSMap component');
+    }
+
+    if(!map.value) {
+      throw new Error('FSMapTileLayer must be used inside a FSMap component with a map');
+    }
+      
     const getMarkerIcon = () => {
       if(props.variant === 'gps') {
         const size = 16;
@@ -81,12 +97,32 @@ export default {
 
     const actualMarker = ref(marker(props.latlng ?? [0, 0], { icon: getMarkerIcon() }));
 
-    if(!map) {
-      throw new Error('FSMapTileLayer must be used inside a FSMap component');
+    const markerElement = computed(() => {
+      return actualMarker.value.getElement();
+    });
+
+    const onClick = (event: MouseEvent) => {
+      emit('click', {
+        ...event,
+        latlng: props.latlng
+      });
+
+      if(!props.to) {
+        return;
+      }
+      handleRoutingEvent(event, props.to);
     }
 
-    if(!map.value) {
-      throw new Error('FSMapTileLayer must be used inside a FSMap component with a map');
+    const onAuxClick = (event: MouseEvent) => {
+      emit('auxclick', {
+        ...event,
+        latlng: props.latlng
+      });
+
+      if(!props.to) {
+        return;
+      }
+      handleRoutingEvent(event, props.to);
     }
 
     watch(map, () => {
@@ -118,10 +154,13 @@ export default {
       actualMarker.value.setLatLng(props.latlng);
     });
 
-    onMounted(() => {
-      actualMarker.value.on('click', (event: LeafletMouseEvent) => {
-        emit('click', event);
-      });
+    watch(markerElement, (newMarkerElement) => {
+      if(!newMarkerElement) {
+        return;
+      }
+
+      newMarkerElement.addEventListener('click', onClick);
+      newMarkerElement.addEventListener('auxclick', onAuxClick);
     });
 
     onUnmounted(() => {

package/components/views/desktop/FSBaseDefaultDesktopView.vue

@@ -29,7 +29,7 @@
         </FSRow>
         <FSCol
           v-if="$props.breadcrumbs && $props.breadcrumbs.length > 0"
-          :padding="$slots.toolbar ? '0px 24px 8px 24px' : '0px 24px'"
+          :padding="$slots.toolbar ? '0px 24px 16px 24px' : '0px 24px'"
           gap="16px"
         >
           <FSCol>

package/components/views/desktop/FSBaseEntityDesktopView.vue

@@ -9,6 +9,7 @@
     >
       <FSRow
         gap="24px"
+        :height="actualImageSize"
         :wrap="false"
       >
         <template 
@@ -54,7 +55,7 @@
             >
               <slot
                 name="subtitle"
-                v-if="topOffset < 60"
+                v-if="topOffset < 64"
               >
                 <FSText
                   v-if="$props.subtitle"
@@ -65,10 +66,11 @@
               </slot>
               <slot
                 name="description"
-                v-if="topOffset < 20"
+                v-if="topOffset < 24"
               >
                 <FSText
                   v-if="$props.description"
+                  :lineClamp="2"
                   font="text-body"
                 >
                   {{ $props.description }}
@@ -146,9 +148,9 @@ export default defineComponent({
       default: () => ["124px", "96px", "80px"]
     },
     icon: {
-      type: String as PropType<string>,
+      type: String as PropType<string | null>,
       required: false,
-      default: "mdi-ab-testing"
+      default: null
     },
     iconColor: {
       type: String as PropType<ColorBase>,

package/components/views/mobile/FSBaseDefaultMobileView.vue

@@ -15,7 +15,7 @@
         <FSRow
           style="position: sticky; top: 0px; z-index: 3;"
           :style="{ backgroundColor, marginTop: $props.stickyTitleTopOffset }"
-          :padding="`24px ${isTouchScreenEnabled ? '24px' : '16px'} 16px 24px`"
+          :padding="`16px ${isTouchScreenEnabled ? '20px' : '12px'} 12px 12px`"
         >
           <slot
             name="title"
@@ -29,7 +29,7 @@
         </FSRow>
         <FSCol
           v-if="$props.breadcrumbs && $props.breadcrumbs.length > 0"
-          :padding="$slots.toolbar ? '0px 24px 8px 24px' : '0px 24px'"
+          :padding="`0px ${isTouchScreenEnabled ? '20px' : '12px'} ${$slots.toolbar ? '12px' : '0px'} 12px`"
           gap="16px"
         >
           <FSCol>
@@ -45,7 +45,7 @@
         <FSRow
           v-if="$slots.toolbar"
           :style="stickyToolbar ? `position: sticky; top: ${$props.toolbarTopOffset}; z-index: 3; background-color: ${backgroundColor}` : undefined"
-          :padding="`0px ${isTouchScreenEnabled ? '24px' : '16px'} 8px 24px`"
+          :padding="`0px ${isTouchScreenEnabled ? '20px' : '12px'} 12px 12px`"
         >
           <FSSlideGroup>
             <slot
@@ -58,7 +58,7 @@
       <FSCol
         height="fill"
         gap="0px"
-        :padding="`${$slots.toolbar ? '8px' : '16px'} ${isTouchScreenEnabled ? '24px' : '16px'} 24px 24px`"
+        :padding="`0px ${isTouchScreenEnabled ? '20px' : '12px'} 16px 12px`"
       >
         <slot />
       </FSCol>

package/components/views/mobile/FSBaseEntityMobileView.vue

@@ -8,7 +8,8 @@
       #title
     >
       <FSRow
-        gap="24px"
+        gap="12px"
+        :height="actualImageSize"
         :wrap="false"
       >
         <FSImage 
@@ -31,6 +32,7 @@
           style="min-width: 0"
           align="center-left"
           height="fill"
+          :gap="$props.subtitle && $props.description ? '6px' : '8px'"
         >
           <slot
             name="title"
@@ -44,26 +46,31 @@
               name="title-extra"
               v-bind="{ topOffset }"
             >
-              <slot
-                name="subtitle"
+              <FSCol
+                gap="4px"
               >
-                <FSText
-                  v-if="$props.subtitle && topOffset < 60"
-                  font="text-button"
+                <slot
+                  name="subtitle"
                 >
-                  {{ $props.subtitle }}
-                </FSText>
-              </slot>
-              <slot
-                name="description"
-              >
-                <FSText
-                  v-if="$props.description && topOffset < 20"
-                  font="text-body"
+                  <FSText
+                    v-if="$props.subtitle && topOffset < 48"
+                    font="text-button"
+                  >
+                    {{ $props.subtitle }}
+                  </FSText>
+                </slot>
+                <slot
+                  name="description"
                 >
-                  {{ $props.description }}
-                </FSText>
-              </slot>
+                  <FSText
+                    v-if="$props.description && topOffset < 8"
+                    :lineClamp="2"
+                    font="text-body"
+                  >
+                    {{ $props.description }}
+                  </FSText>
+                </slot>
+              </FSCol>
             </slot>
           </slot>
         </FSCol>
@@ -136,9 +143,9 @@ export default defineComponent({
       default: () => ["124px", "96px", "80px"]
     },
     icon: {
-      type: String as PropType<string>,
+      type: String as PropType<string | null>,
       required: false,
-      default: "mdi-ab-testing"
+      default: null
     },
     iconColor: {
       type: String as PropType<ColorBase>,
@@ -183,7 +190,7 @@ export default defineComponent({
       const minSize = sizeToVar(props.minImageSize);
       const actualMinSize = parseInt(minSize);
 
-      topOffset.value = Math.max(0, Math.min(actualScrollTop, actualMinSize + 16 + 24));
+      topOffset.value = Math.max(0, Math.min(actualScrollTop, actualMinSize + 16 + 12));
     }
 
     delete slots.title;

package/composables/useMapLayers.ts

@@ -13,7 +13,7 @@ export const useMapLayers = () => {
     {
       name: MapLayers.Map,
       label: $tr("ui.map-layer.map", "Map"),
-      image: new URL("../../assets/images/map/map.png", import.meta.url).href,
+      image: new URL("../assets/images/map/map.png", import.meta.url).href,
       layers: [
         tileLayer(`https://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}&key=${apiKey}`, {
           maxZoom: 22,
@@ -26,7 +26,7 @@ export const useMapLayers = () => {
     {
       name: MapLayers.Imagery,
       label: $tr("ui.map-layer.imagery", "Imagery"),
-      image: new URL("../../assets/images/map/imagery.png", import.meta.url).href,
+      image: new URL("../assets/images/map/imagery.png", import.meta.url).href,
       layers: [
         tileLayer(`https://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}&key=${apiKey}`, {
           maxZoom: 22,
@@ -39,7 +39,7 @@ export const useMapLayers = () => {
     {
       name: MapLayers.Snow,
       label: $tr("ui.map-layer.snow", "Snow ski map"),
-      image: new URL("../../assets/images/map/snow.png", import.meta.url).href,
+      image: new URL("../assets/images/map/snow.png", import.meta.url).href,
       layers: [
         tileLayer(`https://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}&key=${apiKey}`, {
           maxZoom: 22,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.157",
+  "version": "1.0.158-maps2",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.157",
-    "@dative-gpi/foundation-shared-services": "1.0.157"
+    "@dative-gpi/foundation-shared-domain": "1.0.158-maps2",
+    "@dative-gpi/foundation-shared-services": "1.0.158-maps2"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "0aedaf4c6e5f977982f18d5936f5cdfaf7ab86a4"
+  "gitHead": "99a7e7aebf7e4bb0687672dfb8f7cc6a54ba923a"
 }

package/styles/components/fs_col.scss

@@ -4,7 +4,7 @@
     overflow-y: var(--fs-col-overflow);
     padding: var(--fs-col-padding);
     gap: var(--fs-col-gap);
-    max-width: 100%;
+    max-width: var(--fs-col-max-width);
 
     &-top-left {
         justify-content: flex-start;

package/tools/alertsTools.ts

@@ -74,9 +74,10 @@ export const AlertTools = {
   },
   criticityLabel(value: Criticity): string {
     switch (value) {
+      case Criticity.Information: return $tr('ui.common.information', 'Information');
       case Criticity.Warning: return $tr('ui.common.warning', 'Warning');
       case Criticity.Error: return $tr('ui.common.error', 'Error');
-      default: return $tr('ui.common.information', 'Information');
+      default: return $tr("ui.common.none", "None");
     }
   },
   statusColor(status: AlertStatus): ColorEnum {