@dative-gpi/foundation-shared-components 1.0.131 → 1.0.132

package/components/FSBreadcrumbs.vue

@@ -1,7 +1,7 @@
 <template>
   <v-breadcrumbs
     class="fs-breadcrumbs"
-    :items="$props.items"
+    :items="items"
     :style="style"
     v-bind="$attrs"
   >
@@ -9,7 +9,7 @@
       #title="{ item }"
     >
       <FSSpan
-        :class="classes(item)"
+        class="fs-breadcrumbs-label"
       >
         {{ item.title }}
       </FSSpan>
@@ -31,7 +31,9 @@
 import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
 import { ColorEnum, type FSBreadcrumbItem } from "@dative-gpi/foundation-shared-components/models";
-import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+import { useBreakpoints, useColors } from "@dative-gpi/foundation-shared-components/composables";
+
+import { sizeToVar } from "../utils";
 
 import FSSpan from "./FSSpan.vue";
 import FSIcon from "./FSIcon.vue";
@@ -49,28 +51,34 @@ export default defineComponent({
       default: () => []
     }
   },
-  setup() {
+  setup(props) {
+    const { isExtraSmall } = useBreakpoints();
     const { getColors } = useColors();
 
     const darks = getColors(ColorEnum.Dark);
 
     const style = computed((): StyleValue => ({
+      "--fs-breadcrumbs-height"        : sizeToVar(["20px", "16px"]),
       "--fs-breadcrumbs-color"         : darks.dark,
       "--fs-breadcrumbs-active-color"  : darks.base,
       "--fs-breadcrumbs-disabled-color": darks.soft
     }));
 
-    const classes = (item: FSBreadcrumbItem): string[] => {
-      const classNames = ["fs-breadcrumbs-label"];
-      if (item.disabled) {
-        classNames.push("fs-breadcrumbs-label-disabled");
+    const items = computed((): FSBreadcrumbItem[] => {
+      if (isExtraSmall.value && props.items.length > 3) {
+        const mobileItems: FSBreadcrumbItem[] = [0, -2, -1].map((index) => props.items.at(index)!)
+        mobileItems.splice(1, 0, {
+          title    : "...",
+          disabled : true
+        });
+        return mobileItems;
       }
-      return classNames;
-    };
+      return props.items;
+    });
 
     return {
-      style,
-      classes
+      items,
+      style
     };
   }
 });

package/components/FSDialogMenu.vue

@@ -5,9 +5,8 @@
     v-bind="$attrs"
   >
     <FSCard
-      width="calc(100vw - 48px)"
-      padding="8px"
-      gap="24px"
+      :padding="$props.padding"
+      :gap="$props.gap"
       :color="$props.color"
       :class="classes"
     >
@@ -38,11 +37,21 @@ export default defineComponent({
     FSCard
   },
   props: {
-    cardClasses: {
+    classes: {
       type: [Array, String] as PropType<string[] | string | null>,
       required: false,
       default: null
     },
+    padding: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "8px"
+    },
+    gap: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "24px"
+    },
     modelValue: {
       type: Boolean,
       required: false,
@@ -60,12 +69,12 @@ export default defineComponent({
 
     const classes = computed((): string[] => {
       const classNames = ["fs-dialog-menu"];
-      if (props.cardClasses) {
-        if (Array.isArray(props.cardClasses)) {
-          classNames.push(...props.cardClasses);
+      if (props.classes) {
+        if (Array.isArray(props.classes)) {
+          classNames.push(...props.classes);
         }
         else {
-          classNames.push(props.cardClasses);
+          classNames.push(props.classes);
         }
       }
       return classNames;

package/components/FSDialogRemove.vue

@@ -21,7 +21,7 @@
             mdi-alert-outline
           </FSIcon>
           <FSRow
-            gap="2px"
+            gap="4px"
           >
             <FSSpan>
               {{ $tr("dialog-remove.body-regular", "This action is") }}

package/components/FSFadeOut.vue

@@ -87,7 +87,7 @@ export default defineComponent({
 
     const elementId = `id${uuidv4()}`;
 
-    const showOutsideScrollbar = computed(() => props.scrollOutside && !isTouchScreenEnabled);
+    const showOutsideScrollbar = computed(() => props.scrollOutside && !isTouchScreenEnabled.value);
 
     const style = computed((): {[index: string]: string} => ({
       "--fs-fade-out-height"            : props.height ? sizeToVar(props.height) : "initial",

package/components/FSSpan.vue

@@ -1,13 +1,15 @@
 <template>
-  <span
+  <div
     :class="classes"
     :style="style"
     v-bind="$attrs"
   >
-    <slot>
-      {{ $props.label }}
-    </slot>
-  </span>
+    <span>
+      <slot>
+        {{ $props.label }}
+      </slot>
+    </span>
+  </div>
 </template>
 
 <script lang="ts">
@@ -49,6 +51,7 @@ export default defineComponent({
     const { slots } = useSlots();
 
     const style = computed((): StyleValue => ({
+      "--fs-span-text-align": props.align,
       "--fs-span-line-clamp": props.lineClamp.toString(),
       ...fontStyles.value
     }));

package/components/FSText.vue

@@ -1,13 +1,15 @@
 <template>
-  <span
+  <div
     :class="classes"
     :style="style"
     v-bind="$attrs"
   >
-    <slot>
-      {{ $props.label }}
-    </slot>
-  </span>
+    <span>
+      <slot>
+        {{ $props.label }}
+      </slot>
+    </span>
+  </div>
 </template>
 
 <script lang="ts">

package/components/fields/FSAutocompleteField.vue

@@ -121,6 +121,7 @@
       </FSCard>
     </FSSlideGroup>
     <FSDialogMenu
+      padding="16px"
       v-model="dialog"
     >
       <template
@@ -139,69 +140,52 @@
           >
             <FSRow
               v-for="(item, index) in searchItems"
+              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>

package/components/fields/FSSelectField.vue

@@ -122,6 +122,7 @@
       </FSCard>
     </FSSlideGroup>
     <FSDialogMenu
+      padding="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>

package/components/fields/FSTranslateRichTextField.vue

@@ -77,7 +77,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, type PropType, ref } from 'vue';
+import { defineComponent, type PropType, ref, watch } from 'vue';
 
 import { useAppLanguages } from "@dative-gpi/foundation-shared-services/composables";
 
@@ -134,7 +134,10 @@ export default defineComponent({
   setup(props, { emit }) {
     const { languages } = useAppLanguages();
 
-    const innerTranslations = ref(props.translations);
+    const innerTranslations = ref<{
+      languageCode: string;
+      [key: string]: string | object | null;
+    }[]>([]);
 
     const getTranslation = (languageCode: string): string | object => {
       if (!innerTranslations.value) {
@@ -178,6 +181,18 @@ export default defineComponent({
       emit('update:translationsExpanded', false);
     };
 
+    watch(() => props.translations, (newTranslations) => {
+      innerTranslations.value = newTranslations.map((translation) => {
+        if(typeof translation[props.property] === 'string'){
+          return translation;
+        }
+        return {
+          ...translation,
+          [props.property]: JSON.stringify(translation[props.property])
+        }
+      });
+    }, { immediate: true, deep: true });
+
     return {
       languages,
       onCancelTranslations,

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
     };
   }
 });