@dative-gpi/foundation-shared-components 1.0.126 → 1.0.128-dvh

package/components/fields/FSSelectField.vue

@@ -122,6 +122,7 @@
       </FSCard>
     </FSSlideGroup>
     <FSDialogMenu
+      cardPadding="16px"
       v-model="dialog"
     >
       <template
@@ -135,69 +136,52 @@
           >
             <FSRow
               v-for="(item, index) in $props.items"
+              align="center-left"
+              height="36px"
+              :wrap="false"
               :key="index"
+              @click="$props.multiple ?
+                onCheckboxChange(item[$props.itemValue!]) :
+                onRadioChange(item[$props.itemValue!])
+              "
             >
-              <FSCheckbox
-                v-if="$props.multiple"
-                :label="item[$props.itemTitle!]"
-                :editable="$props.editable"
-                :modelValue="$props.modelValue?.includes(item[$props.itemValue!])"
-                @update:modelValue="() => onCheckboxChange(item[$props.itemValue!])"
-              >
-                <template
-                  #label="{ font }"
-                >
-                  <FSRow
-                    align="center-left"
-                    :wrap="false"
-                  >
-                    <slot
-                      name="item-prepend"
-                      v-bind="{ item }"
-                    />
-                    <FSSpan
-                      :font="font"
-                    >
-                      {{ item[$props.itemTitle!] }}
-                    </FSSpan>
-                  </FSRow>
-                </template>
-              </FSCheckbox>
-              <FSRadio
-                v-else
-                :selected="$props.modelValue === item[$props.itemValue!]"
-                :label="item[$props.itemTitle!]"
-                :editable="$props.editable"
-                :item="item"
-                :modelValue="item[$props.itemValue!]"
-                @update:modelValue="() => onRadioChange(item[$props.itemValue!])"
+              <FSRow
+                style="min-width: 0;"
+                :wrap="false"
               >
-                <template
-                  #label="{ font }"
+                <slot
+                  name="item-prepend"
+                  v-bind="{ item }"
+                />
+                <FSSpan
+                  :font="selectedItems.includes(item) ? 'text-button' : 'text-body'"
                 >
-                  <FSRow
-                    align="center-left"
-                    :wrap="false"
-                  >
-                    <slot
-                      name="item-prepend"
-                      v-bind="{ item }"
-                    />
-                    <FSSpan
-                      :font="font"
-                    >
-                      {{ item[$props.itemTitle!] }}
-                    </FSSpan>
-                  </FSRow>
-                </template>
-              </FSRadio>
+                  {{ item[$props.itemTitle!] }}
+                </FSSpan>
+              </FSRow>
               <FSRow
                 align="center-right"
+                width="hug"
+                :wrap="false"
               >
                 <slot
                   name="item-append"
                   v-bind="{ item }"
                 />
+                <FSCheckbox
+                  v-if="$props.multiple"
+                  :editable="$props.editable"
+                  :modelValue="$props.modelValue?.includes(item[$props.itemValue!])"
+                  @update:modelValue="onCheckboxChange(item[$props.itemValue!])"
+                />
+                <FSRadio
+                  v-else
+                  :selected="$props.modelValue === item[$props.itemValue!]"
+                  :editable="$props.editable"
+                  :item="item"
+                  :modelValue="item[$props.itemValue!]"
+                  @update:modelValue="onRadioChange(item[$props.itemValue!])"
+                />
               </FSRow>
             </FSRow>
           </FSCol>
@@ -648,7 +632,7 @@ export default defineComponent({
 
     const maxHeight = computed(() => {
       const other = 8 + 8; // Paddings
-      return `calc(100vh - 40px - ${other}px)`;
+      return `calc(100dvh - 40px - ${other}px)`;
     });
 
     const mobileValue = computed((): string | null => {

package/components/fields/FSTreeViewField.vue

@@ -383,7 +383,7 @@ export default defineComponent({
 
     const maxHeight = computed(() => {
       const other = 8 + 8; // Paddings
-      return `calc(100vh - 40px - ${other}px)`;
+      return `calc(100dvh - 40px - ${other}px)`;
     });
 
     const fieldSlots = computed((): any => {

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"];
@@ -1577,7 +1585,6 @@ export default defineComponent({
       innerMode,
       modeOptions,
       innerPage,
-      hasToolbar,
       pageOptions,
       innerShowFilters,
       showFiltersRow,
@@ -1596,6 +1603,7 @@ export default defineComponent({
       classes,
       style,
       size,
+      isMobileSized,
       isExtraSmall,
       draggableDisabled,
       elementId,

package/components/map/FSMap.vue

@@ -100,17 +100,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 +127,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 +232,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 +259,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 +269,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 +316,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 +477,8 @@ export default defineComponent({
       actualLayer,
       mapLayers,
       gpsPosition,
-      style
+      style,
+      overlaySlots
     };
   }
 });

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%"
@@ -22,16 +22,39 @@
         height="100%"
         gap="0px"
       >
-        <FSRow
-          align="center-center"
-          @touchstart="$props.mode === 'expand' ? $emit('update:mode', 'collapse') : $emit('update:mode', 'expand')"
+        <template
+          v-if="isTouchScreenEnabled"
         >
-          <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')"
+          <FSRow
+            align="center-center"
+            @touchstart="$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"
           />
-        </FSRow>
+        </template>
+        <template
+          v-else
+        >
+          <FSRow
+            align="center-center"
+          >
+            <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')"
+            />
+          </FSRow>
+          <slot
+            v-if="$props.mode === 'collapse'"
+            name="collapsed"
+          />
+        </template>
         <FSCol
           v-if="$props.mode !== 'collapse'"
           height="fill"
@@ -64,14 +87,24 @@
 
 <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: {
+    FSButton,
+    FSCard,
+    FSIcon,
+    FSCol,
+    FSRow
+  },
   props: {
     mode: {
       type: String as PropType<"collapse" | "half" | "expand">,
@@ -79,15 +112,9 @@ export default defineComponent({
       default: "collapse"
     }
   },
-  components: {
-    FSButton,
-    FSCard,
-    FSCol,
-    FSRow
-  },
   emits: ["update:mode", "update:height", "update:width"],
   setup(_, { emit }) {
-    const { isExtraSmall } = useBreakpoints();
+    const { isExtraSmall, isTouchScreenEnabled } = useBreakpoints();
 
     const mobileOverlayWrapper = ref<HTMLDivElement | null>(null);
     const desktopOverlay = ref<InstanceType<typeof FSCard> | null>(null);
@@ -129,9 +156,10 @@ export default defineComponent({
     });
 
     return {
-      isExtraSmall,
       mobileOverlayWrapper,
-      desktopOverlay
+      isTouchScreenEnabled,
+      desktopOverlay,
+      isExtraSmall,
     };
   }
 });

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/views/desktop/FSBaseDefaultDesktopView.vue

@@ -12,11 +12,9 @@
       <slot
         name="header"
       >
-
         <FSRow
-          padding="24px 16px 16px 24px"
-          style="position: sticky; top: 0px; z-index: 3;"
-          :style="{ backgroundColor, marginTop: $props.stickyTitleTopOffset }"
+          :style="`position: sticky; top: 0px; z-index: 3; background-color: ${backgroundColor}; margin-top: ${$props.stickyTitleTopOffset};`"
+          :padding="`24px ${isTouchScreenEnabled ? '24px' : '16px'} 16px 24px`"
         >
           <slot
             name="title"
@@ -45,8 +43,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 +58,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 +72,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 +117,8 @@ export default defineComponent({
       default: "0px"
     }
   },
-  setup(){
+  setup() {
+    const { isTouchScreenEnabled } = useBreakpoints();
     const { getColors } = useColors();
 
     const backgroundColor = computed(() => {
@@ -127,8 +126,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,9 @@
       <slot
         name="header"
       >
-
         <FSRow
-          padding="24px 16px 16px 24px"
-          style="position: sticky; top: 0px; z-index: 3;"
-          :style="{ backgroundColor, marginTop: $props.stickyTitleTopOffset }"
+          :style="`position: sticky; top: 0px; z-index: 3; background-color: ${backgroundColor}; margin-top: ${$props.stickyTitleTopOffset};`"
+          :padding="`24px ${isTouchScreenEnabled ? '24px' : '16px'} 16px 24px`"
         >
           <slot
             name="title"
@@ -45,8 +43,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 +56,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 +70,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 +115,8 @@ export default defineComponent({
       default: "0px"
     }
   },
-  setup(){
+  setup() {
+    const { isTouchScreenEnabled } = useBreakpoints();
     const { getColors } = useColors();
 
     const backgroundColor = computed(() => {
@@ -125,8 +124,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/useBreakpoints.ts

@@ -6,6 +6,7 @@ const windowHeight = ref(window.innerHeight);
 const windowWidth = ref(window.innerWidth);
 
 const windowOuterWidth = ref(!window.document.hasFocus() && window.outerWidth === 0 ? window.innerWidth : window.outerWidth);
+const visualViewportHeight = ref(window.visualViewport!.height);
 
 export const useBreakpoints = () => {
     const onSizeChange = (): void => {
@@ -20,6 +21,10 @@ export const useBreakpoints = () => {
         windowOuterWidth.value = window.outerWidth;
     };
 
+    const onVisualViewportResize = (): void => {
+        visualViewportHeight.value = window.visualViewport!.height;
+    };
+
     const isTouchScreenEnabled = computed((): boolean => {
         return navigator.maxTouchPoints > 0;
     });
@@ -34,6 +39,7 @@ export const useBreakpoints = () => {
 
     if (!initialized) {
         window.addEventListener("resize", onSizeChange);
+        window.visualViewport!.addEventListener ("resize", onVisualViewportResize);
         initialized = true;
     }
 

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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.126",
+  "version": "1.0.128-dvh",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.126",
-    "@dative-gpi/foundation-shared-services": "1.0.126"
+    "@dative-gpi/foundation-shared-domain": "1.0.128-dvh",
+    "@dative-gpi/foundation-shared-services": "1.0.128-dvh"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "fa74ceb5e1e68ec7e0cf75fd43bdaf014f0ab552"
+  "gitHead": "02186299b1e99ef0040b5f09892143f046fe119d"
 }

package/styles/components/fs_agenda_event.scss

@@ -8,7 +8,7 @@
   }
 
   >.fs-card {
-    border-left: solid 3px var(--fs-clickable-border-color) !important;
+    border-left: solid var(--fs-agenda-event-border-width) var(--fs-clickable-border-color) !important;
   }
 }