@dative-gpi/foundation-shared-components 1.0.129 → 1.0.130-maps2

package/components/lists/FSDataTableUI.vue

@@ -4,13 +4,13 @@
     style="position: relative;"
   >
     <FSRow
-      v-if="$props.showSearch || (!isExtraSmall && ($slots.prependToolbar || $slots.toolbar )) || (!$props.disableTable && !$props.disableIterator)"
+      v-if="$props.showSearch || (!isMobileSized && ($slots['prepend-toolbar'] || $slots['toolbar'] || $slots['append-toolbar'])) || (!$props.disableTable && !$props.disableIterator)"
       align="bottom-left"
-      :wrap="isExtraSmall ? false : true"
+      :wrap="isMobileSized ? false : true"
       width="fill"
     >
       <slot
-        v-if="!isExtraSmall"
+        v-if="!isMobileSized"
         name="prepend-toolbar"
       />
       <template
@@ -28,16 +28,22 @@
         />
       </template>
       <slot
-        v-if="!isExtraSmall"
+        v-if="!isMobileSized"
         name="toolbar"
       />
       <template
-        v-if="!$props.disableTable && !$props.disableIterator"
+        v-if="$slots['append-toolbar'] || (!$props.disableTable && !$props.disableIterator)"
       >
         <FSRow
           align="center-right"
+          :width="isExtraSmall ? 'hug' : 'fill'"
         >
+          <slot
+            v-if="!isMobileSized"
+            name="append-toolbar"
+          />
           <FSOptionGroup
+            v-if="!$props.disableTable && !$props.disableIterator"
             :values="modeOptions"
             :singleColor="true"
             :required="true"
@@ -48,13 +54,19 @@
       </template>
     </FSRow>
     <FSRow
-      v-if="isExtraSmall && hasToolbar"
+      v-if="isMobileSized && ($slots['prepend-toolbar'] || $slots['toolbar'] || $slots['append-toolbar'])"
     >
-      <FSWrapGroup>
+      <FSSlideGroup>
+        <slot
+          name="prepend-toolbar"
+        />
         <slot
           name="toolbar"
         />
-      </FSWrapGroup>
+        <slot
+          name="append-toolbar"
+        />
+      </FSSlideGroup>
     </FSRow>
     <FSRow
       v-if="showFiltersRow"
@@ -900,8 +912,8 @@ export default defineComponent({
   },
   emits: ["update:modelValue", "update:headers", "update:search", "update:showFilters", "update:filters", "update:mode", "update:sortBy", "update:rowsPerPage", "update:page", "update:include", "update:items", "click:row"],
   setup(props, { emit }) {
+    const { isExtraSmall, isMobileSized } = useBreakpoints();
     const { handleRoutingEvent } = useRouting();
-    const { isExtraSmall } = useBreakpoints();
     const { $tr } = useTranslationsProvider();
     const { getColors } = useColors();
     const router = useRouter();
@@ -962,10 +974,6 @@ export default defineComponent({
       
     });
 
-    const hasToolbar = computed((): boolean => {
-      return !!useSlots().slots["toolbar"];
-    });
-
     const innerSlots = computed((): { [label: string]: Slot<any> } => {
       const slots = { ...useSlots().slots };
       delete slots["toolbar"];
@@ -1054,10 +1062,13 @@ export default defineComponent({
     });
 
     const innerItems = computed((): any[] => {
-      const activeFilters: { [key: string]: FSDataTableFilter[] } = {};
-      for (const property in filters.value) {
-        activeFilters[property] = filters.value[property].filter((filter) => !filter.hidden);
-      }
+      // Select only the filters where a value is hidden, for others, accept all values
+      const activeFilters: { [key: string]: FSDataTableFilter[] } = Object.keys(filters.value).reduce((acc, key) => {
+        if (filters.value[key].some((filter) => filter.hidden)) {
+          acc[key] = filters.value[key].filter((filter) => !filter.hidden);
+        }
+        return acc;
+      }, {} as { [key: string]: FSDataTableFilter[] });
 
       if (props.items && props.items.length) {
         const innerSearchFormatted = innerSearch.value ? innerSearch.value.toLowerCase() : null;
@@ -1566,7 +1577,7 @@ export default defineComponent({
         await nextTick();
         innerPage.value = formerPage;
       }
-    });
+    }, { deep: true });
 
     return {
       ColorEnum,
@@ -1577,7 +1588,6 @@ export default defineComponent({
       innerMode,
       modeOptions,
       innerPage,
-      hasToolbar,
       pageOptions,
       innerShowFilters,
       showFiltersRow,
@@ -1596,6 +1606,7 @@ export default defineComponent({
       classes,
       style,
       size,
+      isMobileSized,
       isExtraSmall,
       draggableDisabled,
       elementId,

package/components/map/FSMap.vue

@@ -22,7 +22,6 @@
           :color="ColorEnum.Primary"
           :latlng="gpsPosition"
         />
-  
         <FSMapFeatureGroup
           v-if="$props.areas"
           :expected-layers="$props.areas.length"
@@ -36,7 +35,6 @@
             @click="$emit('update:selectedAreaId', area.id)"
           />
         </FSMapFeatureGroup>
-  
         <FSMapMarkerClusterGroup
           v-if="$props.locations"
           :expected-layers="$props.locations.length"
@@ -54,6 +52,7 @@
             @click="$emit('update:selectedLocationId', location.id)"
           />
         </FSMapMarkerClusterGroup>
+        <slot />
       </template>
     </div>
 
@@ -100,17 +99,18 @@
     </FSCol>
 
     <FSMapOverlay
-      v-if="$slots['overlay']"
       :mode="$props.overlayMode"
       @update:mode="$emit('update:overlayMode', $event)"
       @update:height="(height) => overlayHeight = height"
       @update:width="(width) => overlayWidth = width"
     >
       <template
-        #body
+        v-for="(_, name) in overlaySlots"
+        v-slot:[name]="slotData"
       >
         <slot
-          name="overlay"
+          :name="'overlay-' + name"
+          v-bind="slotData"
         />
       </template>
     </FSMapOverlay>
@@ -126,7 +126,7 @@ import { map as createMap, control, tileLayer, latLngBounds, latLng, type LatLng
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 import { type FSArea } from '@dative-gpi/foundation-shared-domain/models';
 
-import { useBreakpoints, useColors } from "../../composables";
+import { useBreakpoints, useColors, useSlots } from "../../composables";
 import { ColorEnum, type FSLocation, type MapLayer } from "../../models";
 
 import FSMapLayerButton from "./FSMapLayerButton.vue";
@@ -231,8 +231,9 @@ export default defineComponent({
   emits: ["update:modelValue", "update:selectedLocationId", "update:selectedAreaId", 'update:overlayMode', 'update:currentLayer', "click:latlng"],
   setup(props, { emit }) {
     const { $tr } = useTranslationsProvider();
-    const { getColors } = useColors();
     const { isExtraSmall } = useBreakpoints();
+    const { getColors } = useColors();
+    const { slots } = useSlots();
 
     const leafletContainer = ref<HTMLElement>();
     const locationGroupBounds = ref<LatLngBounds>();
@@ -257,7 +258,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'
@@ -267,7 +268,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'
@@ -314,6 +315,13 @@ export default defineComponent({
       return bounds as LatLngBounds;
     });
 
+    const overlaySlots = computed(() => {
+      return Object.keys(slots).filter((slot) => slot.startsWith("overlay-")).reduce((acc, slot) => {
+        acc[slot.replace("overlay-", "")] = slots[slot];
+        return acc;
+      }, {} as Record<string, unknown>);
+    });
+
     const calculateTargetPosition = (target: L.LatLng, zoom?: number) => {
       if(!map.value) {
         return target;
@@ -468,7 +476,8 @@ export default defineComponent({
       actualLayer,
       mapLayers,
       gpsPosition,
-      style
+      style,
+      overlaySlots
     };
   }
 });

package/components/map/FSMapMarker.vue

@@ -87,15 +87,15 @@ export default {
         icon = divIcon({
           html: locationMarkerHtml(props.icon, getColors(props.color).base, props.label),
           iconSize: [size, size],
-          className: props.selected ? 'fs-map-location fs-map-location-selected' : 'fs-map-location',
+          className: props.selected ? 'fs-map-marker fs-map-location fs-map-location-selected' : 'fs-map-marker fs-map-location',
           iconAnchor: [size / 2, size / 2],
         });
       } else {
-        const size = 20;
+        const size = 16;
         icon = divIcon({
-          html: pinMarkerHtml(getColors(props.color).base),
+          html: pinMarkerHtml(getColors(props.color).base, props.label),
           iconSize: [size, size],
-          className: props.selected ? 'fs-map-location fs-map-location-selected' : 'fs-map-location',
+          className: props.selected ? 'fs-map-marker fs-map-pin fs-map-pin-selected' : 'fs-map-marker fs-map-pin',
           iconAnchor: [size / 2, size / 2],
         });
       }

package/components/map/FSMapMarkerClusterGroup.vue

@@ -45,7 +45,7 @@ export default {
 
         return divIcon({
           html: clusterMarkerHtml(cluster.getChildCount()),
-          className: 'fs-map-location fs-map-location-full',
+          className: 'fs-map-marker fs-map-cluster-marker',
           iconSize: [size, size],
           iconAnchor: [size / 2, size / 2],
         });

package/components/map/FSMapOverlay.vue

@@ -10,7 +10,7 @@
     v-show="isExtraSmall"
     ref="mobileOverlayWrapper"
     class="fs-map-overlay-mobile"
-    :style="{ height: $props.mode === 'expand' ? '90%' : ($props.mode === 'half' ? '60%' : '20px') }"
+    :style="{ height: $props.mode === 'expand' ? '90%' : ($props.mode === 'half' ? '60%' : 'auto') }"
   >
     <FSCard
       width="100%"
@@ -24,14 +24,18 @@
       >
         <FSRow
           align="center-center"
-          @touchstart="$props.mode === 'expand' ? $emit('update:mode', 'collapse') : $emit('update:mode', 'expand')"
+          style="cursor: pointer;"
+          @touchstart="onClick"
+          @mousedown="onClick"
         >
-          <FSButton
-            variant="icon"
-            :icon="$props.mode === 'expand' ? 'mdi-chevron-down' : 'mdi-chevron-up'"
-            @click="$props.mode === 'expand' ? $emit('update:mode', 'collapse') : $emit('update:mode', 'expand')"
-          />
+          <FSIcon>
+            {{ $props.mode === 'expand' ? 'mdi-chevron-down' : 'mdi-chevron-up' }}
+          </FSIcon>
         </FSRow>
+        <slot
+          v-if="$props.mode === 'collapse'"
+          name="collapsed"
+        />
         <FSCol
           v-if="$props.mode !== 'collapse'"
           height="fill"
@@ -44,7 +48,6 @@
       </FSCol>
     </FSCard>
   </div>
-
   <FSCard
     v-show="!isExtraSmall"
     class="fs-map-overlay-desktop"
@@ -64,14 +67,22 @@
 
 <script lang="ts">
 import { defineComponent, type PropType, onUnmounted, onMounted, ref } from "vue";
+
 import { useBreakpoints } from "../../composables";
-import FSButton from "../FSButton.vue";
+
 import FSCard from "../FSCard.vue";
+import FSIcon from "../FSIcon.vue";
 import FSCol from "../FSCol.vue";
 import FSRow from "../FSRow.vue";
 
 export default defineComponent({
   name: "FSMapOverlay",
+  components: {
+    FSCard,
+    FSIcon,
+    FSCol,
+    FSRow
+  },
   props: {
     mode: {
       type: String as PropType<"collapse" | "half" | "expand">,
@@ -79,15 +90,9 @@ export default defineComponent({
       default: "collapse"
     }
   },
-  components: {
-    FSButton,
-    FSCard,
-    FSCol,
-    FSRow
-  },
   emits: ["update:mode", "update:height", "update:width"],
-  setup(_, { emit }) {
-    const { isExtraSmall } = useBreakpoints();
+  setup(props, { emit }) {
+    const { isExtraSmall, isTouchScreenEnabled } = useBreakpoints();
 
     const mobileOverlayWrapper = ref<HTMLDivElement | null>(null);
     const desktopOverlay = ref<InstanceType<typeof FSCard> | null>(null);
@@ -95,6 +100,14 @@ export default defineComponent({
     const mobileResizeObserver = ref<ResizeObserver | null>(null);
     const desktopResizeObserver = ref<ResizeObserver | null>(null);
 
+    const onClick = (): void => {
+      if (props.mode === "expand") {
+        emit("update:mode", "collapse");
+        return;
+      }
+      emit("update:mode", "expand");
+    }
+
     onMounted(() => {
       mobileResizeObserver.value = new ResizeObserver(entries => {
         entries.forEach((entry) => {
@@ -129,9 +142,11 @@ export default defineComponent({
     });
 
     return {
-      isExtraSmall,
       mobileOverlayWrapper,
-      desktopOverlay
+      isTouchScreenEnabled,
+      desktopOverlay,
+      isExtraSmall,
+      onClick
     };
   }
 });

package/components/tiles/FSGroupTileUI.vue

@@ -97,6 +97,13 @@
           :imageId="$props.imageId"
           :width="imageSize"
         />
+        <FSIconCard
+          v-else-if="$props.icon"
+          backgroundVariant="standard"
+          :backgroundColor="ColorEnum.Background"
+          :icon="$props.icon"
+          :size="imageSize"
+        />
       </FSRow>
     </FSCol>
   </FSTile>
@@ -108,6 +115,7 @@ import { computed, defineComponent, type PropType } from "vue";
 import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
+import FSIconCard from "../FSIconCard.vue";
 import FSImage from "../FSImage.vue";
 import FSColor from "../FSColor.vue";
 import FSSpan from "../FSSpan.vue";
@@ -118,6 +126,7 @@ import FSRow from "../FSRow.vue";
 export default defineComponent({
   name: "FSGroupTileUI",
   components: {
+    FSIconCard,
     FSImage,
     FSColor,
     FSSpan,
@@ -131,6 +140,10 @@ export default defineComponent({
       required: false,
       default: null
     },
+    icon: {
+      type: String,
+      required: false
+    },
     label: {
       type: String as PropType<string | null>,
       required: false,
@@ -183,7 +196,7 @@ export default defineComponent({
     });
 
     const infoWidth = computed((): string => {
-      if (!props.imageId) {
+      if (!props.imageId && !props.icon) {
         return "100%";
       }
       return `calc(100% - ${imageSize.value}px - 24px)`;

package/components/tiles/FSLocationTileUI.vue

@@ -46,7 +46,7 @@
               align="center-left"
             >
               <FSColor
-                width="24px"
+                padding="0 8px"
                 height="24px"
                 :color="ColorEnum.Light"
                 :border="false"

package/components/tiles/FSSimpleTileUI.vue

@@ -115,7 +115,7 @@ export default defineComponent({
     iconColor: {
       type: String as PropType<ColorBase>,
       required: false,
-      default: ColorEnum.Dark
+      default: ColorEnum.Light
     },
     activeColor: {
       type: String as PropType<ColorBase>,

package/components/views/desktop/FSBaseDefaultDesktopView.vue

@@ -12,11 +12,10 @@
       <slot
         name="header"
       >
-
         <FSRow
-          padding="24px 16px 16px 24px"
           style="position: sticky; top: 0px; z-index: 3;"
           :style="{ backgroundColor, marginTop: $props.stickyTitleTopOffset }"
+          :padding="`24px ${isTouchScreenEnabled ? '24px' : '16px'} 16px 24px`"
         >
           <slot
             name="title"
@@ -45,8 +44,8 @@
         </FSCol>
         <FSRow
           v-if="$slots.toolbar"
-          padding="0px 16px 8px 24px"
           :style="stickyToolbar ? `position: sticky; top: ${$props.toolbarTopOffset}; z-index: 3; background-color: ${backgroundColor}` : undefined"
+          :padding="`0px ${isTouchScreenEnabled ? '24px' : '16px'} 8px 24px`"
         >
           <FSSlideGroup
             width="100%"
@@ -60,8 +59,8 @@
 
       <FSCol
         height="fill"
-        :padding="$slots.toolbar ? '8px 16px 24px 24px' : '16px 16px 24px 24px'"
         gap="0px"
+        :padding="`${$slots.toolbar ? '8px' : '16px'} ${isTouchScreenEnabled ? '24px' : '16px'} 24px 24px`"
       >
         <slot />
       </FSCol>
@@ -74,7 +73,7 @@ import { defineComponent, type PropType, computed } from "vue";
 
 import { type FSBreadcrumbItem, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
-import { useColors } from "../../../composables"
+import { useBreakpoints, useColors } from "../../../composables"
  
 import FSCol from "../../FSCol.vue";
 import FSRow from "../../FSRow.vue"
@@ -119,7 +118,8 @@ export default defineComponent({
       default: "0px"
     }
   },
-  setup(){
+  setup() {
+    const { isTouchScreenEnabled } = useBreakpoints();
     const { getColors } = useColors();
 
     const backgroundColor = computed(() => {
@@ -127,8 +127,9 @@ export default defineComponent({
     });
 
     return {
+      isTouchScreenEnabled,
       backgroundColor
-    }
+    };
   }
 });
 </script>

package/components/views/desktop/FSBaseEntityDesktopView.vue

@@ -36,6 +36,7 @@
           :icon="$props.icon"
         />
         <FSCol
+          style="min-width: 0"
           align="center-left"
           height="fill"
         >

package/components/views/mobile/FSBaseDefaultMobileView.vue

@@ -12,11 +12,10 @@
       <slot
         name="header"
       >
-
         <FSRow
-          padding="24px 16px 16px 24px"
           style="position: sticky; top: 0px; z-index: 3;"
           :style="{ backgroundColor, marginTop: $props.stickyTitleTopOffset }"
+          :padding="`24px ${isTouchScreenEnabled ? '24px' : '16px'} 16px 24px`"
         >
           <slot
             name="title"
@@ -45,8 +44,8 @@
         </FSCol>
         <FSRow
           v-if="$slots.toolbar"
-          padding="0px 16px 8px 24px"
           :style="stickyToolbar ? `position: sticky; top: ${$props.toolbarTopOffset}; z-index: 3; background-color: ${backgroundColor}` : undefined"
+          :padding="`0px ${isTouchScreenEnabled ? '24px' : '16px'} 8px 24px`"
         >
           <FSSlideGroup>
             <slot
@@ -58,8 +57,8 @@
 
       <FSCol
         height="fill"
-        :padding="$slots.toolbar ? '8px 16px 24px 24px' : '16px 16px 24px 24px'"
         gap="0px"
+        :padding="`${$slots.toolbar ? '8px' : '16px'} ${isTouchScreenEnabled ? '24px' : '16px'} 24px 24px`"
       >
         <slot />
       </FSCol>
@@ -72,7 +71,7 @@ import { defineComponent, type PropType, computed } from "vue";
 
 import { type FSBreadcrumbItem, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
-import { useColors } from "../../../composables"
+import { useBreakpoints, useColors } from "../../../composables"
  
 import FSCol from "../../FSCol.vue";
 import FSRow from "../../FSRow.vue"
@@ -117,7 +116,8 @@ export default defineComponent({
       default: "0px"
     }
   },
-  setup(){
+  setup() {
+    const { isTouchScreenEnabled } = useBreakpoints();
     const { getColors } = useColors();
 
     const backgroundColor = computed(() => {
@@ -125,8 +125,9 @@ export default defineComponent({
     });
 
     return {
+      isTouchScreenEnabled,
       backgroundColor
-    }
+    };
   }
 });
 </script>

package/components/views/mobile/FSBaseEntityMobileView.vue

@@ -28,6 +28,7 @@
           :size="actualImageSize"
         />
         <FSCol
+          style="min-width: 0"
           align="center-left"
           height="fill"
         >

package/composables/useSlots.ts

@@ -20,11 +20,12 @@ export const useSlots = () => {
         // Directive wrapper (v-for, v-if)
         case "symbol":
           switch (element.type) {
+            // On a v-for, we want to get the children of the v-for
             case Symbol.for("v-fgt"):
               returnElements.push(...recursiveGetChildren(element.children));
               break;
+              // On a negative v-if, we want to get nothing
             case Symbol.for("v-cmt"):
-              returnElements.push(element);
               break;
             default:
               returnElements.push(element);

package/models/rules.ts

@@ -2,8 +2,9 @@ import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui
 import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
 import { validateExpression } from "@dative-gpi/foundation-shared-domain/tools";
 
-import { getTimeBestString } from "../utils";
-import type { TimeUnit } from "@/shared/foundation-shared-domain/enums";
+import type { TimeUnit } from "@dative-gpi/foundation-shared-domain/enums";
+
+import { getTimeBestString, validateOperation } from "../utils";
 
 const { epochToLongDateFormat } = useDateFormat()!;
 const { $tr } = useTranslationsProvider();
@@ -22,6 +23,8 @@ export const TextRules = {
     different: (original: string, message: string | undefined = undefined) => (value: string) => value != original || (message ?? $tr("ui.rules.text-different", "Must be different from original")),
     outside: (values: string[], message: string | undefined = undefined) => (value: string) => !values.includes(value) || (message ?? $tr("ui.rules.text-outside", "Must be different from others")),
     inside: (values: string[], message: string | undefined = undefined) => (value: string) => values.includes(value) || (message ?? $tr("ui.rules.text-inside", "Must be one of the options")),
+    operation: (operands: string[], variables: string[], message: string | undefined = undefined) => (value: string) => validateOperation(value, operands, variables) || (message ?? $tr("ui.rules.text-operation", "Invalid operation")),
+    singleWord: (message: string | undefined = undefined) => (value: string) => !value.includes(" ") || (message ?? $tr("ui.rules.text-single-word", "Must be a single word")),
 };
 
 export const TagRules = {

package/package.json

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